/*
Theme Name: Link2Selwyn Child
Theme URI: https://link2selwyn.co.nz
Description: Link2Selwyn Hello Elementor Child is a child theme of Hello Elementor
Author: link2selwyn.co.nz
Author URI: https://link2selwyn.co.nz
Template: hello-elementor
Version: 4.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/
/* Add your custom styles here */
/* GD Map Bubble padding */
.geodir-bubble_desc {
padding: 5px;
}
/* GD CSS */
/* GD Map Bubble List Group Boarder */
.bsui .list-group-item {
position: relative;
display: block;
padding: .55rem 1.25rem;
background-color: #9e9e9e17;
}
/* GD Map Bubble List Group Hover State */
.bsui .list-group-item-action:hover, .bsui .list-group-item-action:focus {
z-index: 1;
color: #495057;
text-decoration: none;
background-color: #f8f9fa;
}
/* GD Map Bubble - When bubble overflow requires scroll a faint boarder appears , particularly noticeable in Mobile */
.leaflet-popup-scrolled {
overflow: auto;
border-bottom: 0px solid #ddd !important;
border-top: 0px solid #ddd !important;
}
/* GD Support : 6 Nov 23, to resolve CPT Images disappearing and requires page to be reloaded */
.elementor-widget-wp-widget-gd_post_images.elementor-invisible {
visibility: visible !important;
}
/* GD Support 20 Nov 23,to resolve UsersWP - Profile & Banner Image Upload Button out of view as sitting behind Top Menu Bar */
.modal{
z-index:9999;
}
.modal .modal-dialog{
display: flex;
align-items: center;
min-height: calc(100% - var(--bs-modal-margin) * 2);
}
/* GD Map Bubble List Title Styling */
.geodir_map_container .geodir-entry-title a {
font-size:20px;
font-weight:700;
color: #026670
}
/* GD Archive Item Read More gradiant fade and other styling */
.gd-read-more {
background-image: linear-gradient(to bottom, transparent, #ffffff) !important;
font-weight: 700;
color: #435151 !important;
}
/* Link2 13 July 25, Styling of Primary Button Colours for Login & Register Button etc */
.bsui .btn-primary {
--bs-btn-bg: #397576;
--bs-btn-border-color: #162842;
}
/* Link2 13 July 25, Styling of Primary Button Colours for Login & Register etc on Hover */
.bsui .btn:hover {
background-color: #ee4d27;
}
/*GD Support , Custom Styles for Flatpickr Calendar Integration with Geodirectory Events , Description: Adjusts the appearance of the Flatpickr calendar to resolve conflicts and improve styling on Geodirectory event pages */
body.geodir-page-cpt-gd_event .flatpickr-prev-month.flatpickr-prev-month,
body.geodir-page-cpt-gd_event .flatpickr-next-month.flatpickr-next-month {
height: 34px;
top: .75rem;
}
body.geodir-page-cpt-gd_event .flatpickr-month {
height: 80px;
}
body.geodir-page-cpt-gd_event .flatpickr-innerContainer {
justify-content: center;
}
body.geodir-page-cpt-gd_event .flatpickr-weekdaycontainer {
display: flex;
flex: 1;
justify-content: center;
}
/* Link2 , Wordpress SMooth Scrolling - Hello Theme by default does not implement this */
html {
scroll-behavior: smooth;
}
/* Link2 , Styling of GD>Post Meta Tags for Icons,Title and Hover */
.tags-custom i {
color: #026670; /* Icon color */
font-size: 0.875rem;
}
.tags-custom a {
padding: 4px 15px;
font-size: 0.75rem;
border: 1px solid #435151;
background-color: #f7f7f7;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 2.5em;
border-radius: 5px;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
margin-top: 2px;
color: #435151;
}
.tags-custom a:hover {
background-color: #ee4d27;
color: white;
}
.geodir_post_meta_title {
font-family:roboto;
font-weight: bold; /* Example: make it bold */
color: #026670; /* Change text color */
font-size: 0.875rem;
margin-right: 10px; /* Add some space to the right */
}
/* Link2 , Targets User profile Name - this being the User Login Name is hidden for Privacy and Security reasons when a user is not logged in */
.uwp-user-title {
display: none !important;
}
/* Link2 , Targets the Avatar height and change the column sizing to allow 256px width on large screen size */
@media (min-width: 1200px) {
/* Adjust avatar size for large screens */
.bsui .rounded-circle {
width:100% !important;
height: 144px !important;
border-radius: 0% !important;
}
/* Adjust column sizing for large screens */
.bsui .col-xl-6 {
flex: 0 0 auto;
width: 40%;
}
}
/* Link2 , Target the Avatar column size in mobile portrait mode */
@media (max-width: 767px) {
.bsui .rounded-circle {
width: 60% !important;
height: 100px !important;
}
.bsui .mb-4 {
margin-bottom: 0 !important;
}
.bsui .navbar {
--bs-navbar-padding-y: 0.5rem;
}
.bsui .card {
--bs-card-spacer-y: 0.125rem;
}
.bsui .pb-3 a {
margin-top: 0.5rem !important;
}
}
/* Link2 , Target the Avatar column size in mobile landscape mode */
@media (max-width: 767px) and (orientation: landscape) {
.bsui .rounded-circle {
width: 42.5% !important; /* Adjust width for landscape mode */
height: 120px !important; /* Keep height consistent */
transform: translateX(-150px); /* Shift the avatar 20px to the left */
}
}
/* Target Alert Information Badges */
.bsui .alert-info {
--bs-alert-color: #435151 !important;
--bs-alert-bg: #f9fcfe !important;
--bs-alert-border-color: #435151 !important;
}
/* Link2 5 Dec 24, Target Danger Alert Badges */
.bsui .alert-danger {
--bs-alert-color: #435151 !important;
--bs-alert-bg: #f9fcfe !important;
--bs-alert-border-color: #435151 !important;
}
/*Testing Target Boot Strap core variable css */
.bsui .nav-tabs .nav-link.active {
--bs-nav-tabs-link-active-color: #026670 !important;
--bs-nav-tabs-link-active-bg: #f9fcfe !important;
--bs-nav-tabs-link-active-border-color: #435151 !important;
}
/* Link2 1st Dec 24, GD>Singles Tab Events Date - Button "More" + "Less" styling */
.bsui .mt-2 {
margin-top: .8rem !important;
}
.bsui .mx-auto {
margin-left: 0px !important;
}
.bsui .text-bg-primary {
background-color: #ee4d27 !important;
color: whitesmoke !important;
border-bottom-color: white !important;
border-right-color: white !important;
border-left-color: white !important;
border-top-color: white !important;
}
/* Lin2 6th Dec 24 , Profile post link badge color */
.bsui .text-bg-dark {
background-color: #435151 !important;
}
/* Link2 14 Dec 24 , Profile Invoice View , Download buttons, paid success button*/
.invoice-actions .w-100 {
margin-top: 5px;
}
.bsui .btn-secondary {
--bs-btn-bg: #026670;
color: white;
}
.bsui .bg-success {
background-color: #ee4d27 !important;
}
.bsui .btn-dark {
--bs-btn-bg: #162842;
}
/* Link2 20 Dec , GetPaid Ad Zone Bacground Colour */
.bsui .bg-light {
background-color: #ffffff00 !important;
}
.bsui .rounded {
border-radius: 0 !important;
}
/* Link2 25 Jan 25 , Account (Profile Template Page ) Avatar Camera Icon positioning */
body.page-id-14 .bsui .card-img-overlay {
top: 1.8rem !important;
right: 15.5rem !important;
}
/* Link2 26 Jan 25 , Hide the .bsui .rounded-circle element on the Blog page (Page ID: 1376).This ensures the element is not displayed on the blog page, while it remains visible
on other pages throughout the website */
body.page-id-1376 .bsui .rounded-circle {
display: none !important;
}
/* Link2 26 Jan 25 , Hide the ( Author Avatar Image ) .rounded-circle element on the GD Archive for Engineers. This ensures the element is not displayed on the blog page, while it remains visible
on other pages throughout the website */
body.post-type-archive-gd_cert_engineers .rounded-circle {
display: none !important;
}
/* Link2 17 Jan 25 , Hide the .bsui .rounded-circle element on the Blog page (Page ID: 1376).This ensures the element is not displayed on the blog page, while it remains visible
on other pages throughout the website */
body.post-type-archive-gd_event .rounded-circle {
display: none !important;
}
/* Link2 21 July 25 , Hide the .bsui .rounded-circle element on the Blog page (Page ID: 1137).This ensures the element is not displayed on the blog page, while it remains visible
on other pages throughout the website */
body.post-type-archive-gd_retail_service .rounded-circle {
display: none !important;
}
/* Link2 27 Jan 25 , Postion of Camera Icon on Account Page */
body.page-id-10 .bsui .card-img-overlay {
top: 1.8rem !important;
right: -1.8rem !important;
padding-left: 40px !important;
}
/* Link2 29 Jan 25 , Styling of dropdown icon in GD Archive Item displayed in Ads Zones Linked to GD Packages */
.bsui .dropdown-toggle:not(.dropdown-toggle-split)::after {
margin-right: .75rem;
}
/* Link2 29 Jan 25 , Styling of GD Archive Item displayed in Ads Zones Linked to GD Packages*/
.bsui .card {
--bs-card-border-width: 1px !important;
}
/* TEST LINK2 > styling of Multi Rating Avatar Image Size in UsersWP Review Tab*/
@media (min-width: 1200px) {
/* More specific selector to override the default */
#reviews .rounded-circle {
height: 80px !important;
}
}
/* TEST Link2 > Style Greddy Menu Tab Boarder colour and width in Mobile Responsive Mode */
@media (min-width: 768px) {
.nav-item.greedy-btn.dropdown {
border: 2px solid #435151 !important; /* Change to desired color */
border-radius: 4px !important; /* Optional for curved corners */
}
}
/* Link2 14 June 25 - Base button style (default/unselected state) for UserWP Register Form
Applies to both "register-to-review" and "register-to-list" buttons */
#uwp-form-select-ajax .btn {
background-color: #ffffff; /* White background */
color: #026670; /* Teal text color */
border-color: #026670; /* Matching teal border */
transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition on hover */
}
/* Link2 14 June 25 - UserWP Register Form Hover state for buttons that are not active for- Adds visual feedback when user hovers over an unselected button */
#uwp-form-select-ajax .btn:hover {
background-color: #EE4D27; /* Light teal background on hover */
color: #014f57; /* Darker teal text for contrast */
border-color: #014f57; /* Slightly darker border for clarity */
}
/* Link2 14 June 25 - Active (selected) button state for UserWP Register Form
Used to visually highlight the currently selected button */
#uwp-form-select-ajax .btn.active {
background-color: #397576; /* Solid teal background */
color: #ffffff; /* White text for contrast */
border-color: #014f57; /* Darker border for depth */
}
/* Link2 14 June 25 - Hover state for the active (selected) button for UserWP Register Form
Optional: slightly darken the active button on hover for feedback */
#uwp-form-select-ajax .btn.active:hover {
background-color:#2E5F60; /* Slightly darker teal */
color: #ffffff; /* Maintain white text */
}
/* General styling for the form wrapper */
.contact-styled {
background: rgb(240, 240, 240); /* Light grey background for the form */
padding: 10px 30px 40px 30px; /* Padding inside the form */
border: 1px solid rgb(236, 236, 236); /* Light grey border around the form */
box-shadow: rgba(0, 0, 0, 0.20) 0px 3px 8px; /* Soft shadow for form container */
font-family: Arial, Helvetica, sans-serif; /* Setting font family */
color: #7f8c8d; /* Text color */
}
/* Styling for the form header (if present) */
.contact-styled h3 {
color: #2c3e50; /* Darker color for the form's header text */
}
/* Label styling */
.contact-styled .nf-field-label {
color: #7f8c8d; /* Light grey label text */
text-transform: capitalize; /* Capitalize first letters of each word */
}
/* Button styling for submit button */
.contact-styled .nf-form-content input[type=button] {
background: #2ecc71; /* Green background */
font-weight: 700; /* Bold font */
font-size: 22px; /* Larger font size for the button */
border-radius: 3px; /* Slightly rounded corners for the button */
}
/* Hover effect for the submit button */
.contact-styled .nf-form-content input[type=button]:hover {
background: #EE4D27 !important; /* Darker green on hover */
color: #2ecc71; /* White text on hover */
}
/* Error messages for fields */
.contact-styled .nf-error.field-wrap .nf-field-element:after {
background: #ee4d27; /* Red background for error indicator */
}
/* Required field label styling */
.contact-styled .nf-form-fields-required {
margin-bottom: 10px; /* Space below required fields */
}
/* Error messages display */
.contact-styled .nf-error .nf-error-msg {
color: #ee4d27; /* Red error message color */
}
/* Error messages and required field symbols */
.contact-styled .nf-error-msg, .ninja-forms-req-symbol {
color: #ee4d27; /* Red color for error messages and required field symbols */
}
/* Styling for password success field */
.contact-styled .nf-pass.field-wrap .nf-field-element:after {
color: #2ecc71; /* Green success indicator for password field */
content: “\f164”; /* Font Awesome icon (a check mark or similar) */
}
/* Link2 21 July 25, GD Contact Tab - Ninja Contact Form Bottom Margin */
#nf-form-3-cont {
margin-bottom: 20px;
}
/* Link2 22 July 25, UserWP Profile Page- Hide Post Count */
body.page-id-14 span.nav-link.pe-0.ps-0 {
display: none !important;
}
/* Link2 26 July 25, Adds essential Bootstrap-style utility classes for accessibility and layout compatibility with Hello Theme, Elementor, and GeoDirectory plugins. To Hide Screen Reader Text in GD Advance Search above Catergory and Search Field */
.sr-only,
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Link2 26 July 25, Target Ninja Contact Form Submit Button Atrribute Selectors, The cursor: pointer style enhances usability by indicating that the element is clickable.*/
input[type="button"],
input[type="submit"],
button {
background-color: #397576;
color: #ffffff;
border: none;
}
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
background-color: #ee4d27;
color: #ffffff;
cursor: pointer;
}
/* TEST Link2 27 July 25, Retain Aspect-ratio container used for Hero Images */
.geodir-field-post_images .carousel-item {
aspect-ratio: 970 / 250;
width: 100%;
overflow: hidden;
}
/* Mobile: increase height, change to 4:3 or 16:9 for better visual balance */
@media (max-width: 480px) {
.geodir-field-post_images .carousel-item {
aspect-ratio: 4 / 3; /* or try 16 / 9, or 1 / 1 for square */
}
}
/*TEST Link2 18 Aug 25, Make only those image types viewable on th Ad Listing Form - Default CPT Predefined Ad Listing Form
.geodir-dropbox-file-types {
display: none !important;
}
*/
/* TEST LInk2 31 Aug 25, GeoDirectory Ad Zone Styling */
/* === Fix: Keep all 4 Ad Zone cards inline === */
/* Reset Bootstrap .card inside ads */
.geodir-post .card {
border: none !important;
background: transparent !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Important: don’t strip spacing that controls columns */
.geodir-post {
margin-bottom: 0px; /* same as Elementor gap */
padding: 0 10px; /* keep column gutters so 4 fit side-by-side */
flex: 1 1 25%; /* ensure 4 in a row (25% each) */
box-sizing: border-box;
}
/* Ad label background only */
.adv-ad-text {
background-color: #bd4e33 !important;
}
/* Adds "Tax " before the H2 inside the specific container */
.col-12.col-sm-6.text-sm-right h2.h3.text-dark::before {
content: "Tax ";
}
/*
* Link2 – 12 Sept 2025
* Hide specific GeoDirectory elements on Profile, Archive and Search pages
*/
/* Hide the GeoDirectory location block element (Open Hours & Business Name)
on the Profile template page */
body.page-id-14 .geodir-output-location.geodir-output-location-listing {
display: none !important;
}
/* Hide the GeoDirectory location block element (Open Hours & Business Name)
on the Elementor Archive template page */
body.elementor-page-2115 .geodir-output-location.geodir-output-location-listing {
display: none !important;
}
/* Hide the Author Avatar Image (.rounded-circle) on the Search Archive page */
body.archive.search-results.elementor-page-2115 .rounded-circle {
display: none !important;
}
/*
* Link2 - 15 Sept 2025
*Target the Verified Bade badge span directly - CSS attribute selector [ ] means: “Match any element that has an attribute named data-badge with value claimed.”
*/
.bsui .gd-badge[data-badge="claimed"] {
background-color: #ff3100ff !important; /* your new background */
border-color: #ff3100ff !important;
}
/* Change icon colour */
.greedy-btn .fas.fa-ellipsis-h {
color: #ff6600; /* your hex */
}
/* Change badge text colour (and optionally background) */
.greedy-btn .greedy-count {
color: #ffffff; /* text colour */
background-color: #ee4d27 !important; /* background-color: #fff; if you also want background */
}
/* ==============================
Mobile-specific overrides
============================== */
@media (max-width: 767px) {
/* Greedy menu icon */
.greedy-btn .fas.fa-ellipsis-h {
color: #ee4d27 !important;
}
/* Greedy menu badge */
.greedy-btn .greedy-count {
color: #ffffff !important;
background-color: #ee4d27 !important;
}
/* Verified badge (GeoDirectory / bsui) */
.bsui .gd-badge[data-badge="claimed"] {
background-color: #ff3100ff !important;
border-color: #ff3100ff !important;
}
}
/*
* Link2 - 28 Sept 2025
* Target and inject Font Awsome Icon in Listing+ Listing Ads
*/
/* --- Badge container (icon + text) --- */
.gd-badge[data-badge="featured"] {
background-color: #ff00fd !important; /* badge background */
color: #fff !important; /* label text color */
font-weight: 700; /* bold label text */
font-size: 1rem; /* label text size */
padding: 0.25em 0.6em; /* spacing inside badge */
border-radius: 0.3em; /* rounded corners */
display: inline-flex; /* flexible layout for icon + text */
align-items: center; /* vertical align icon with text */
justify-content: center; /* center content horizontally */
gap: 0.3em; /* spacing between icon and text */
white-space: nowrap; /* prevent wrapping of icon + text */
}
/* --- Icon before the label --- */
.gd-badge[data-badge="featured"]::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f559"; /* Font Awesome icon code */
font-size: 1.25rem; /* icon size */
color: #fff; /* icon color */
flex-shrink: 0; /* prevent icon from shrinking */
display: inline-block;
vertical-align: middle;
}
/* Link2 - 13 Nov 25, create some top/bottom margin in Tabs GD Shortcode - have added , tags to shorcode in CPT Tabs for Google Map directions */
.gd-directions-block {
margin-top: 20px; /* adjust as needed */
margin-bottom: 20px; /* adjust as needed */
}
/* Test Link2 15 Nov 25; Rank Math Breadcrumb wrapper container - Added Rank Math Shortcode to Single Archive with wrapper */
/* Wrapper font and base color */
.my-breadcrumbs {
margin-bottom: 20px;
font-size: 14px;
font-weight: 400;
color: #333;
}
/* Apply color specifically to breadcrumb links */
.my-breadcrumbs nav.rank-math-breadcrumb p a {
color: #e41515 !important;
}
/* Apply color to separators and non-link text */
.my-breadcrumbs nav.rank-math-breadcrumb p .separator,
.my-breadcrumbs nav.rank-math-breadcrumb p span {
color: #333 !important;
}
/* TEST LInk2 19 Nov 25; Hide “Contact Us” Tab for Specific Free Package IDs (GeoDirectory Singles Tabs)*/
body.gd-pkg-id-7 a.nav-link[href="#contact-us"] {
display: none !important;
}
/* =====================================================
Link2 – ACTIVE menu state styling
Matches Elementor hover/open state
(Custom parent links + descendant CPT context)
===================================================== */
/* Ensure parent links can host underline */
.menu-item-type-custom.menu-item-has-children > a {
position: relative;
}
/* Active parent state (pre-hover) */
.menu-item-type-custom.menu-item-has-children.current-menu-ancestor > a,
.menu-item-type-custom.menu-item-has-children.current-menu-parent > a,
.menu-item.l2s-forced-active > a {
color: #a8cbfe !important;
font-weight: 500 !important;
}
/* =====================================================
Link2 – Active submenu background to match hover state
(Fixes missing background on custom-link submenu items)
===================================================== */
/* Active submenu items (same level as Trades & Technical) */
.elementor-nav-menu
.menu-item.current-menu-parent > a,
.elementor-nav-menu
.menu-item.current-menu-ancestor > a,
.elementor-nav-menu
.menu-item.l2s-forced-active > a {
background-color: #2e6161 !important; /* same as hover bg */
}
/* =========================================================
Link2Selwyn – Elementor Off-Canvas Chevron Logic
Elementor Pro 3.33.x / WordPress 6.9
RULES:
- Closed submenu = chevron points RIGHT
- Open submenu = chevron points DOWN
- CSS reacts ONLY to aria-expanded
- JS does NOT touch SVG transforms
========================================================= */
/* ---------------------------------------------------------
1. Base chevron appearance (ALL states)
--------------------------------------------------------- */
.e-off-canvas__content
.elementor-nav-menu
a.has-submenu
.sub-arrow svg {
transform: rotate(0deg); /* RIGHT = closed */
transition: transform 0.25s ease;
transform-origin: 50% 50%;
}
/* ---------------------------------------------------------
2. OPEN state – rotate DOWN (90deg)
--------------------------------------------------------- */
.e-off-canvas__content
.elementor-nav-menu
a.has-submenu[aria-expanded="true"]
.sub-arrow svg {
transform: rotate(90deg); /* DOWN = open */
}
/* ---------------------------------------------------------
3. CLOSED state – force RIGHT
(defensive reset for SmartMenus quirks)
--------------------------------------------------------- */
.e-off-canvas__content
.elementor-nav-menu
a.has-submenu[aria-expanded="false"]
.sub-arrow svg {
transform: rotate(0deg);
}
/* ---------------------------------------------------------
4. Kill SmartMenus inline transforms
(THIS is what caused left-pointing arrows)
--------------------------------------------------------- */
.e-off-canvas__content
.elementor-nav-menu
.sub-arrow svg[style] {
transform: rotate(0deg) !important;
}
/* ============================================================
* Link2Selwyn – Off-Canvas Chevron Open-State Colour
* ------------------------------------------------------------
* Date: 2025-12-16 11:32 NZDT
*
* Purpose:
* Visually distinguish open submenus by changing chevron
* colour when aria-expanded="true".
*
* Scope:
* - Elementor Pro Off-Canvas Nav Menu
* - SVG-based submenu chevrons
*
* Notes:
* - No JS required
* - Colour reacts purely to accessibility state
* - Safe with Elementor updates
* ============================================================ */
/* Default (closed) chevron colour */
.e-off-canvas__content
.elementor-nav-menu
.sub-arrow svg {
fill: #f9fcfe;
}
/* OPEN state – active chevron colour
.e-off-canvas__content
.elementor-nav-menu
a.has-submenu[aria-expanded="true"]
.sub-arrow svg {
fill: #a8cbfe;
stroke: #a8cbfe; /* included for stroke-based SVGs */
}
*/
/* ============================================================
* Link2Selwyn – Neutralise Expanded but Inactive Chevrons
* ------------------------------------------------------------
* Date: 2025-12-16 12:27 NZDT
*
* Purpose:
* Prevent expanded menus that are NOT part of the current
* page hierarchy from inheriting active chevron colour.
*
* This preserves active context while allowing exploration.
* ============================================================ */
.e-off-canvas__content
.elementor-nav-menu
li:not(.current-menu-ancestor):not(.current-menu-parent):not(.current-menu-item)
> a.has-submenu[aria-expanded="true"]
.sub-arrow svg {
fill: #f9fcfe;
stroke: #f9fcfe;
}
/* ============================================================
* Link2Selwyn – Off-Canvas Chevron Active-Trail Colour Fix
* ------------------------------------------------------------
* Date: 2025-12-16 12:27 NZDT
*
* Purpose:
* Ensure parent menu chevrons retain the active colour when
* viewing descendant pages, even if the submenu is collapsed.
*
* This resolves the nuance where top-level custom-link parents
* (e.g. "Business Explore") lose visual active context when
* the Off-Canvas menu is closed.
*
* Scope:
* - Elementor Pro Off-Canvas Nav Menu
* - Custom links
* - CPT archive pages
* - Taxonomy category pages
*
* Notes:
* - Complements aria-expanded chevron logic
* - Uses native WordPress active-state classes
* - No JavaScript required
* ============================================================ */
/* Active trail (ancestor / parent / current) chevron colour */
.e-off-canvas__content
.elementor-nav-menu
li.current-menu-ancestor > a.has-submenu
.sub-arrow svg,
.e-off-canvas__content
.elementor-nav-menu
li.current-menu-parent > a.has-submenu
.sub-arrow svg,
.e-off-canvas__content
.elementor-nav-menu
li.current-menu-item > a.has-submenu
.sub-arrow svg {
fill: #a8cbfe;
stroke: #a8cbfe;
}
/* ============================================================
* Link2Selwyn – Off-Canvas Menu Chevron Alignment (Mobile)
* ------------------------------------------------------------
* Date: 2025-12-15
*
* Purpose:
* Align all submenu chevrons to the far right edge of the
* Elementor Off-Canvas menu, while keeping menu text left-
* aligned and indentation consistent across all depths.
*
* Scope:
* - Elementor Pro Off-Canvas widget
* - Nav Menu widget (dropdown layout)
* - Mobile & tablet only (≤1024px)
* - Applies to:
* • Custom links
* • CPT archive links
* • Taxonomy category links
*
* Notes:
* - Uses flexbox on
elements
* - Chevrons (.sub-arrow) are pushed right via margin-left:auto
* - Chevron rotation is controlled separately via aria-expanded
* - No JS interaction required
* ============================================================ */
/* ------------------------------------------------------------
* 1. Treat menu links as flex containers
* ------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
a.elementor-item,
.e-off-canvas__content
.elementor-nav-menu
a.elementor-sub-item {
display: flex;
align-items: center;
width: 100%;
}
/* ------------------------------------------------------------
* 2. Push chevron to far right (JetMenu-style alignment)
* ------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
.sub-arrow {
margin-left: auto;
display: flex;
align-items: center;
}
/* ------------------------------------------------------------
* 3. Normalise chevron icon sizing
* ------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
.sub-arrow svg {
width: 14px;
height: 14px;
}
/* ------------------------------------------------------------
* 4. Indentation for nested submenu levels
* Text indents, chevrons remain vertically aligned
* ------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
ul.sub-menu a.elementor-sub-item {
padding-left: 1.25rem;
}
.e-off-canvas__content
.elementor-nav-menu
ul.sub-menu ul.sub-menu a.elementor-sub-item {
padding-left: 2rem;
}
.e-off-canvas__content
.elementor-nav-menu
ul.sub-menu ul.sub-menu ul.sub-menu a.elementor-sub-item {
padding-left: 2.75rem;
}
/* ------------------------------------------------------------
* 5. Prevent text wrapping from breaking alignment
* ------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
a.elementor-item span:not(.sub-arrow),
.e-off-canvas__content
.elementor-nav-menu
a.elementor-sub-item span:not(.sub-arrow) {
white-space: normal;
}
/* =====================================================================
Link2 Name : Link2Selwyn
Date : 2025-12-15 15:05 NZDT
Purpose :
Normalise and refine visual styling of Elementor Off-Canvas
submenu items so that:
- Custom links
- CPT archive links
- Taxonomy category links
all share consistent font size, weight, and colour.
Improves mobile readability and reduces visual confusion
when navigating deep CPT / taxonomy hierarchies.
Scope :
- Elementor Pro Off-Canvas widget
- Nav Menu widget (dropdown layout)
- Mobile & tablet only (≤1024px)
Notes :
- CSS-only (no JS interaction changes)
- Works alongside SmartMenus and aria-expanded logic
- Chevron positioning and rotation handled separately
===================================================================== */
/* ------------------------------------------------------------
1. Base submenu item visual normalisation
Applies to ALL submenu levels (CPT + taxonomies)
------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
.elementor-sub-item {
font-size: 0.95rem;
font-weight: 500;
line-height: 1.45;
color: #ffffff;
}
/* ------------------------------------------------------------
2. Slight visual hierarchy for deeper taxonomy levels
(keeps long lists readable on mobile)
------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
ul.sub-menu ul.sub-menu
.elementor-sub-item {
font-size: 0.9rem;
opacity: 0.8;
}
.e-off-canvas__content
.elementor-nav-menu
ul.sub-menu ul.sub-menu ul.sub-menu
.elementor-sub-item {
font-size: 0.88rem;
opacity: 0.7;
}
/* ------------------------------------------------------------
3. Active / current item styling
Highlights current CPT or taxonomy without overpowering
the rest of the menu
------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
li.current-menu-item
> a,
.e-off-canvas__content
.elementor-nav-menu
li.current-menu-ancestor
> a {
font-weight: 600;
color: #a8cbfe; /* adjust to brand highlight colour if needed */
}
/* ------------------------------------------------------------
4. Hover / tap feedback (mobile-safe)
Provides subtle affordance without desktop hover reliance
------------------------------------------------------------
.e-off-canvas__content
.elementor-nav-menu
.elementor-item:hover,
.e-off-canvas__content
.elementor-nav-menu
.elementor-sub-item:hover {
background-color: rgba(255, 255, 255, 0.08);
}
*/
/* ------------------------------------------------------------
5. Reduce visual dominance of long taxonomy lists
Prevents “wall of links” effect on mobile
------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
ul.sub-menu
li {
margin-bottom: 0.15rem;
}
/* --------------------------------------------------------------
Link2Selwyn | Remove duplicate search button in Advanced Filters
Date: 29-12-2025 19:25 NZDT
Purpose: Remove the second Search button (.geodir-advance-search)
Context: GD > Filters → Auto-injected submit button
-------------------------------------------------------------- */
.geodir-advance-search .geodir_submit_search {
display: none !important;
}
/* =============================================================================
* Link2Selwyn – Restore Off-Canvas Pointer Interactions (Mobile)
* -----------------------------------------------------------------------------
* Version: L2S-16012026-0107
* RefID: 0107 (RefID: 0106 + 0104 removed )
* Date: 16-01-2026 20:00 NZDT
*
* Purpose:
* Restore click / tap interaction in Elementor Off-Canvas menus
* when overlay-based panel logic is active but panel-replacement
* logic is not yet enabled.
*
* Root Cause Addressed:
* Earlier mobile CSS introduced pointer-events suppression
* intended for single-active-panel navigation. When that model
* is inactive, it blocks ALL interaction.
*
* Scope:
* - Mobile & tablet only (≤1024px)
* - Elementor Pro Off-Canvas Nav Menu
*
* Notes:
* - This is a TEMPORARY stabilisation layer
* - Safe to remove once full Groovy-style panel replacement
* is implemented
* - Does NOT alter layout or animation
* ============================================================================= */
@media (max-width: 1024px) {
/* Always allow interaction on the root menu */
.e-off-canvas__content
ul.elementor-nav-menu {
pointer-events: auto !important;
}
/* Allow interaction on all visible sub-menus */
.e-off-canvas__content
ul.sub-menu {
pointer-events: auto !important;
}
}
/* ========================================================================
Link2Selwyn — Off-Canvas Panel Layout Override (VISIBLE PANELS)
RefID: CSS5002
Version: L2S-23012026-0002
Date: 23-01-2026 22:40 NZDT
------------------------------------------------------------------------
Purpose:
Override Elementor accordion document-flow layout so submenu
levels can behave as horizontal panels.
This enables VISIBLE panel replacement while preserving:
- Native Elementor / SmartMenus behaviour
- aria-expanded authority
- Click handling
- Accessibility state
Scope:
- Off-canvas menu ONLY
- Mobile & tablet contexts
- CSS layout override only (no behaviour changes)
======================================================================== */
/* ------------------------------------------------------------------------
1. Lock the off-canvas menu into a panel viewport
------------------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu {
position: relative;
overflow: hidden; /* critical: prevents vertical push */
}
/* ------------------------------------------------------------------------
2. Remove submenus from normal document flow
(this neutralises accordion stacking)
------------------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
ul.sub-menu {
position: absolute;
inset: 0;
width: 100%;
margin: 0;
}
/* ------------------------------------------------------------------------
3. Root menu stays as the base panel
------------------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu > ul {
position: relative;
}
/* ------------------------------------------------------------------------
4. Default state: panels sit off to the right
(Elementor still controls visibility)
------------------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
li.has-submenu > ul.sub-menu {
transform: translateX(100%);
}
/* ------------------------------------------------------------------------
5. ACTIVE PANEL: slide into place when aria-expanded is true
------------------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
li.has-submenu
> a[aria-expanded="true"]
+ ul.sub-menu {
transform: translateX(0);
}
/* ------------------------------------------------------------------------
6. Nested panels stack correctly (no animation yet)
------------------------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
ul.sub-menu
li.has-submenu > ul.sub-menu {
transform: translateX(100%);
}
/* ========================================================================
Link2Selwyn — TRUE Panel 0 Promotion (Strict Panel Mode)
RefID: CSS5005
Version: L2S-24012026-0005
Date: 24-01-2026 20:15 NZDT
------------------------------------------------------------------------
Purpose:
Promote the ROOT menu into a true panel peer so that
strict panel mode is possible on mobile.
In strict panel mode:
- Only ONE panel is visible at a time
- Root menu fully disappears when a submenu opens
- No partial overlays or background content remain visible
Scope:
- Mobile & tablet only (≤1024px)
- Elementor Pro Off-Canvas Nav Menu
- CSS-only (no JS, no behaviour changes)
======================================================================== */
@media (max-width: 1024px) {
/* ------------------------------------------------------
1. Establish panel viewport
------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu {
position: relative;
overflow: hidden;
}
/* ------------------------------------------------------
2. Treat ROOT menu as Panel 0
------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu > ul {
position: absolute;
inset: 0;
width: 100%;
transform: translateX(0);
}
/* ------------------------------------------------------
3. Submenus are peer panels (Panel 1+)
------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
ul.sub-menu {
position: absolute;
inset: 0;
width: 100%;
transform: translateX(100%);
}
/* ------------------------------------------------------
4. STRICT MODE:
When ANY submenu opens,
Panel 0 must fully leave the viewport
------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
li.has-submenu
> a[aria-expanded="true"]
~ ul {
transform: translateX(0);
}
.e-off-canvas__content
.elementor-nav-menu
li.has-submenu
> a[aria-expanded="true"]
~ ul
~ ul {
transform: translateX(-100%);
}
}
/* ========================================================================
Link2Selwyn — Activate Expanded Submenu Panel
RefID: CSS5006
Version: L2S-24012026-0006
Date: 24-01-2026 20:23 NZDT
------------------------------------------------------------------------
Purpose:
Bring the ACTIVE submenu panel into view in strict panel mode.
This listens to aria-expanded and restores visibility of the
correct panel without altering behaviour.
Scope:
- Mobile & tablet only (≤1024px)
- Off-canvas menu
- CSS-only
======================================================================== */
@media (max-width: 1024px) {
/* ------------------------------------------------------
ACTIVE PANEL:
When an anchor is expanded, show its submenu panel
------------------------------------------------------ */
.e-off-canvas__content
.elementor-nav-menu
li.has-submenu
> a[aria-expanded="true"]
+ ul.sub-menu {
transform: translateX(0);
}
}
/* ======================================================================
Link2Selwyn — CP-08.3 Virtual Panel Rendering Styles (Additive)
Version: L2S-26012026-0001
RefID: CSS8001
Date: 26-01-2026 10:39 NZDT
Purpose: Ensure #l2s-panel-active is visible and occupies the off-canvas surface.
Scope: Additive only. Does not modify frozen CSS5002/CSS5005/CSS5006.
Notes: No submenu rendering attempted; this styles owned virtual panel only.
====================================================================== */
#l2s-panels {
width: 100%;
height: 100%;
}
#l2s-panel-active {
width: 100%;
height: 100%;
}
.l2s-panel-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
}
.l2s-panel-back {
cursor: default;
}
.l2s-panel-list {
list-style: none;
margin: 0;
padding: 0 0 16px 0;
}
/* ======================================================================
Link2Selwyn — CP-08.3.x Chevron Styling Parity (Virtual Panels)
Version: L2S-26012026-0002
RefID: CSS8002
Date: 26-01-2026 11:36 NZDT
Purpose:
Normalise chevron / icon size inside virtual panels so it matches
the root off-canvas menu styling.
Scope:
- Affects ONLY #l2s-panel-active
- CSS-only, no behavioural changes
====================================================================== */
/* Target common icon patterns used by Elementor / SmartMenus */
#l2s-panel-active i,
#l2s-panel-active svg,
#l2s-panel-active .elementor-icon,
#l2s-panel-active .sub-arrow {
font-size: 1em;
width: 1em;
height: 1em;
line-height: 1;
transform: none;
}
/* Ensure icons don’t inherit oversized flex or spacing rules */
#l2s-panel-active a {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Optional: keep chevron alignment consistent with root menu */
#l2s-panel-active .sub-arrow,
#l2s-panel-active .elementor-icon {
margin-left: auto;
}
/* ======================================================================
Link2Selwyn — CP-08.4 Header Ergonomics Refinement
Version: L2S-26012026-0003
RefID: CSS8003
Date: 26-01-2026 13:22 NZDT
Purpose:
Improve virtual panel header usability on mobile by:
- Moving Back button to the right
- Giving long titles more horizontal room
- Aligning Back with chevron affordances
Scope:
- Virtual panels only (#l2s-panel-active)
- CSS-only, additive
====================================================================== */
#l2s-panel-active .l2s-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
#l2s-panel-active .l2s-panel-title {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#l2s-panel-active .l2s-panel-back {
flex: 0 0 auto;
margin-left: auto;
text-align: right;
}
/* ======================================================================
Link2Selwyn — CP-08.4 Header Final Alignment Fix
Version: L2S-26012026-0004
RefID: CSS8004
Date: 26-01-2026 13:31 NZDT
Purpose:
Finalise virtual panel header ergonomics by:
- Forcing Back control to the right edge
- Allowing long titles to occupy left space
- Preventing Back from truncating titles
Scope:
- Virtual panels only
- CSS-only, additive
====================================================================== */
#l2s-panel-active .l2s-panel-header {
display: flex;
align-items: center;
}
#l2s-panel-active .l2s-panel-title {
order: 1;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#l2s-panel-active .l2s-panel-back {
order: 2;
flex: 0 0 auto;
margin-left: 16px;
}
/* ======================================================================
Link2Selwyn — CP-08 Virtual Panel Header (FINAL, AUDITED)
Version: L2S-26012026-0012
RefID: CSS8012
Date: 26-01-2026 13:05 NZDT
PURPOSE
-------
Final, DOM-correct styling for the CP-08 Virtual Panel header.
Implements a Groovy-style header with:
• Icon-only back navigation (chevron)
• No visible "Back | Parent" text
• Subtle full-width background highlight
• Clear, readable current panel title
DOM TRUTH (CONFIRMED)
--------------------
The back label text (e.g. "Back | Selwyn Life") exists as a RAW TEXT NODE
inside the following element:
CSS cannot directly target text nodes.
The only safe suppression method is:
→ font-size: 0 on the button
→ reintroduce the chevron via ::before
AUDIT / REPLACEMENT PATH
-----------------------
This block explicitly REPLACES and RETIRES the following CP-08 CSS blocks,
which were exploratory and based on earlier (incorrect) DOM assumptions:
CSS8005 — early back-chevron attempt (assumed child elements)
CSS8006 — header ordering based on false structure
CSS8007 — visual highlight layered on flawed base
CSS8008 — chevron visibility workaround
CSS8009 — mixed structural + visual assumptions
CSS8010 — attempted suppression of non-existent spans
CSS8011 — sibling text suppression attempt
All above were REMOVED on 26-01-2026 (NZDT) after DevTools inspection
confirmed the actual DOM structure.
ACTIVE CP-08 CSS STACK
---------------------
The following RefIDs remain valid and active:
CSS8001 — Virtual panel base container
CSS8002 — Panel list / menu item styling
CSS8003 — Chevron size consistency
CSS8004 — One-depth-per-panel enforcement
CSS8012 — FINAL header implementation (this block)
SCOPE
-----
• Virtual panels only (#l2s-panel-active)
• CSS-only, additive
• No JS changes
====================================================================== */
/* --- Virtual panel header container --- */
#l2s-panel-active .l2s-panel-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.12);
}
/* --- Back control: functional button, visually icon-only --- */
#l2s-panel-active .l2s-panel-back {
/* Suppress inline text node: "Back | Parent" */
font-size: 0;
color: transparent;
/* Remove all button visuals */
background: none;
border: none;
box-shadow: none;
outline: none;
padding: 6px 10px;
cursor: pointer;
}
/* --- Back chevron (visual affordance) --- */
#l2s-panel-active .l2s-panel-back::before {
content: "‹";
font-size: 26px;
font-weight: 600;
line-height: 1;
color: #ffffff;
display: inline-block;
}
/* --- Optional active feedback (touch-friendly, subtle) --- */
#l2s-panel-active .l2s-panel-back:active {
background-color: rgba(255, 255, 255, 0.18);
border-radius: 999px;
}
/* --- Current panel title --- */
#l2s-panel-active .l2s-panel-title {
flex: 1 1 auto;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.02em;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ======================================================================
Link2Selwyn — CP-08 Header Chevron Right-Edge Alignment Patch
Version: L2S-26012026-0013
RefID: CSS8013
Date: 26-01-2026 15:00 NZDT
Purpose:
Hard-right align the header back chevron so it lines up with
submenu chevrons in the list.
Scope:
- Virtual panel header only
- CSS-only, additive
====================================================================== */
#l2s-panel-active .l2s-panel-header {
justify-content: space-between;
}
#l2s-panel-active .l2s-panel-title {
flex: 1 1 auto;
min-width: 0;
}
/* Push the back control to the far right and give it a stable column width */
#l2s-panel-active .l2s-panel-back {
margin-left: auto;
width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 0;
}
/* ======================================================================
Link2Selwyn — CP-08 Virtual Panel Slide Motion (Initial)
Version: L2S-27012026-0014
RefID: CSS8014
Date: 27-01-2026 07:17 NZDT
Purpose:
Define base and active motion states for virtual panels.
Enables controlled slide-in from right and slide-out to right.
Scope:
- Per-panel motion wrapper only
- No stacking, no JS dependency
- CSS-only, additive
Notes:
- Horizontal motion is owned exclusively by the panel wrapper
- Animation is driven by transform + transition
====================================================================== */
/* ----------------------------------------------------------------------
Base (parked) state — panel off-screen to the right
---------------------------------------------------------------------- */
#l2s-panels > #l2s-panel-active {
transition: transform 300ms ease-out;
will-change: transform;
}
/* ----------------------------------------------------------------------
Active state — panel fully visible
---------------------------------------------------------------------- */
#l2s-panels > #l2s-panel-active.is-active {
transform: translateX(0);
}
/* ======================================================================
Link2Selwyn — CP-09B Virtual Panel State Assignment by Depth
Version: L2S-27012026-0015
RefID: CSS8015
Date: 27-01-2026 10:42 NZDT
Purpose:
Assign spatial position to panels based on navigation state
(active, before, after) using depth-relative meaning.
Scope:
- All .l2s-panel elements under #l2s-panels
- No JS logic, CSS-only state handling
Notes:
- Motion ownership remains per-panel (CP-08 lock)
- Transition defined once, reused
====================================================================== */
/* Base panel behaviour */
#l2s-panels > .l2s-panel {
transition: transform 300ms ease-out;
will-change: transform;
}
/* Panels behind the active panel (history stack) */
#l2s-panels > .l2s-panel.is-before {
transform: translateX(-100%);
}
/* Active panel */
#l2s-panels > .l2s-panel.is-active {
transform: translateX(0);
}
/* Panels ahead of the active panel (future stack) */
#l2s-panels > .l2s-panel.is-after {
transform: translateX(100%);
}
/* ======================================================================
Link2Selwyn — CP-10A Back Direction Motion Polish (Final)
Version: L2S-28012026-0002
RefID: CSS8016
Date: 28-01-2026 10:05 NZDT
Purpose:
Restore and control panel motion by explicitly overriding
Elementor's transition reset, and visually differentiate
backward navigation.
Scope:
- Virtual panels under #l2s-panels only
- CSS-only refinement
====================================================================== */
/* ----------------------------------------------------------------------
1. HARD override Elementor transition reset (scoped, controlled)
---------------------------------------------------------------------- */
#l2s-panels > .l2s-panel {
transition-property: transform;
transition-duration: 1200ms;
transition-timing-function: linear;
will-change: transform;
}
/* ----------------------------------------------------------------------
2. Backward staging — previous panels partially visible
---------------------------------------------------------------------- */
#l2s-panels > .l2s-panel.is-before {
transform: translateX(-30%);
}
/* ----------------------------------------------------------------------
3. Active panel in viewport
---------------------------------------------------------------------- */
#l2s-panels > .l2s-panel.is-active {
transform: translateX(0);
}
/* ----------------------------------------------------------------------
4. Panels ahead remain fully offscreen
---------------------------------------------------------------------- */
#l2s-panels > .l2s-panel.is-after {
transform: translateX(100%);
}
/* ======================================================================
Link2Selwyn — CP-10B-1 Panel Opacity Polish
Version: L2S-28012026-0001
RefID: CSS8018
Date: 28-01-2026 18:00 NZDT
Purpose:
Reduce harsh panel swaps by fading panels in/out
during state changes inside Elementor off-canvas.
Scope:
- Virtual panels under #l2s-panels
====================================================================== */
#l2s-panels > .l2s-panel {
opacity: 0;
transition: opacity 220ms ease-out !important;
}
#l2s-panels > .l2s-panel.is-active {
opacity: 1;
}
/* =====================================================================
CP LOCK RECORD — PRE CP-11.1 (DOCUMENTATION ONLY)
Date: 28-01-2026 NZDT
Active CSS RefIDs prior to CP-11.1:
CSS5002, CSS5005, CSS5006,
CSS8001, CSS8002, CSS8003, CSS8004,
CSS8012, CSS8013, CSS8014,
CSS8015, CSS8016, CSS8018
Note:
This block contains NO executable CSS.
It exists solely as an audit snapshot.
===================================================================== */
/* =================================================================================================
Project : Link2Selwyn — Selwyn District Directory Platform
Link : https://link2selwyn.co.nz
Component : Custom Off-Canvas Navigation Architecture
CP : CP-11
RefID : CSS1104
Version : v1.1
Checkpoint: CP-11.4.4 (Track-Only Motion — Consolidation Release + Overscroll Containment Patch)
LOCKED STATUS : This file defines the unified track motion contract, and IS LOCKED
Root and panels must remain static.
Any motion changes require a new CP phase.
Heading:
CP-11.4.4 Unified Track Motion Layer (Full Replacement + Firefox Android Overscroll Containment)
Date | Time:
19.02.2026 | 20:05 NZDT
Purpose:
This stylesheet fully replaces CSS1100 and CSS1101 by consolidating all CP-11
motion responsibilities into a single, deterministic motion surface:
`.l2s11-track`.
The root container becomes a static visibility gate only. All open, close,
and panel navigation motion is handled via a unified transform composed of:
- panel depth (--l2s11-depth)
- track shift (--l2s11-shift)
Additional Refinement (19.02.2026):
Prevent Firefox Android pull-to-refresh / overscroll chaining while the
CP-11 overlay is open. This does NOT alter motion logic or layout contracts.
Scope:
- Sole CP-11 CSS implementation after CP-11.4.4
- Root: static (no transforms, no transitions)
- Track: single motion owner (GPU-safe, X-axis only)
- Panels: passive layout surfaces
- Does NOT modify Elementor Off-Canvas internals
- Overscroll containment limited strictly to #l2s11-root subtree
Notes:
- Supersedes CSS1100 (CP-11.1 / CP-11.3 hybrid)
- Supersedes CSS1101 (root entrance/exit animation)
- Eliminates competing motion owners and timing race conditions
================================================================================================= */
/* ================================================================================================
Root Container — STATIC VISIBILITY GATE ONLY
================================================================================================ */
#l2s11-root {
position: fixed;
inset: 0;
z-index: 2147483000;
display: none;
visibility: hidden;
pointer-events: none;
/* Root never animates */
transform: none !important;
transition: none !important;
/* Core variables */
--l2s11-vh: 100vh;
--l2s11-panel-count: 2;
/* Motion variables */
--l2s11-depth: 0;
--l2s11-shift: 0vw;
--l2s11-duration: 360ms;
--l2s11-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
/* Visuals */
--l2s11-overlay: rgba(0, 0, 0, 0.52);
--l2s11-bg: #ffffff;
--l2s11-border: rgba(0, 0, 0, 0.12);
--l2s11-text: rgba(0, 0, 0, 0.90);
/* Overscroll containment (Firefox Android Pull-to-Refresh Prevention) */
overscroll-behavior-y: none;
overscroll-behavior-x: none;
}
/* Root open state = gate only */
#l2s11-root[data-l2s11-state="open"] {
display: block;
visibility: visible;
pointer-events: auto;
}
/* ================================================================================================
Viewport Frame (Static)
================================================================================================ */
#l2s11-root .l2s11-viewport {
position: absolute;
inset: 0;
width: 100vw;
height: var(--l2s11-vh);
overflow: hidden;
background: transparent;
contain: layout paint size;
/* Overscroll containment */
overscroll-behavior-y: none;
overscroll-behavior-x: none;
}
/* ================================================================================================
Overlay (Static, Click Target Only)
================================================================================================ */
#l2s11-root .l2s11-overlay {
position: absolute;
inset: 0;
background: var(--l2s11-overlay);
touch-action: manipulation;
}
/* ================================================================================================
Track — SINGLE MOTION OWNER (DEPTH + SHIFT)
================================================================================================ */
#l2s11-root .l2s11-track {
position: absolute;
inset: 0;
display: flex;
width: calc(var(--l2s11-panel-count) * 100vw);
height: var(--l2s11-vh);
transform: translate3d(
calc((var(--l2s11-depth) * -100vw) + var(--l2s11-shift)),
0,
0
);
transition: transform var(--l2s11-duration) var(--l2s11-ease);
will-change: transform;
backface-visibility: hidden;
/* Overscroll containment */
overscroll-behavior-y: none;
overscroll-behavior-x: none;
}
/* ================================================================================================
Panels — PASSIVE LAYOUT SURFACES
================================================================================================ */
#l2s11-root .l2s11-panel {
width: 100vw;
height: var(--l2s11-vh);
background: var(--l2s11-bg);
color: var(--l2s11-text);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding:
calc(env(safe-area-inset-top, 0px) + 16px)
16px
calc(env(safe-area-inset-bottom, 0px) + 16px);
box-sizing: border-box;
/* Prevent scroll chaining beyond panel */
overscroll-behavior-y: none;
overscroll-behavior-x: none;
}
#l2s11-root .l2s11-panel + .l2s11-panel {
border-left: 1px solid var(--l2s11-border);
}
/* ================================================================================================
Demo / Proof UI Elements (CP-11.1 lineage)
================================================================================================ */
#l2s11-root .l2s11-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid var(--l2s11-border);
}
#l2s11-root .l2s11-title {
margin: 0;
font-size: 18px;
font-weight: 500;
letter-spacing:0.03em;
line-height: 1.2;
}
#l2s11-root .l2s11-actions {
display: flex;
gap: 8px;
}
#l2s11-root .l2s11-btn {
appearance: none;
border: 1px solid var(--l2s11-border);
background: #f7f7f7;
color: var(--l2s11-text);
border-radius: 10px;
padding: 10px 12px;
font-size: 14px;
line-height: 1;
cursor: pointer;
touch-action: manipulation;
}
#l2s11-root .l2s11-btn:active {
transform: translateY(1px);
}
#l2s11-root .l2s11-body {
font-size: 14px;
line-height: 1.5;
/* Overscroll containment */
overscroll-behavior-y: none;
overscroll-behavior-x: none;
}
#l2s11-root .l2s11-list {
margin: 12px 0 0;
padding: 0;
list-style: none;
border: 1px solid var(--l2s11-border);
border-radius: 12px;
overflow: hidden;
}
#l2s11-root .l2s11-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 12px;
border-top: 1px solid var(--l2s11-border);
background: #ffffff;
}
#l2s11-root .l2s11-item:first-child {
border-top: 0;
}
#l2s11-root .l2s11-linkbtn {
appearance: none;
border: 0;
background: transparent;
color: inherit;
font: inherit;
padding: 0;
margin: 0;
cursor: pointer;
text-align: left;
}
/* ================================================================================================
Reduced Motion Support
================================================================================================ */
@media (prefers-reduced-motion: reduce) {
#l2s11-root .l2s11-track {
transition-duration: 1ms;
}
}
/* =================================================================================================
Project : Link2Selwyn — Selwyn District Directory Platform (Selwyn, New Zealand)
Component : CP-11 Custom Off-Canvas Navigation Architecture
CP : CP-11.7.1
RefID : CSS1107
Version : L2S-04022026-0001
Checkpoint: CP-11.6.2 LOCKED (Header DOM + Logo Injection)
Heading:
CP-11.7.1 Header Row Enforcement — Grid Tier-1 + Stable Title Separation
Date:
04-02-2026 18:04 NZDT
Purpose:
- Enforce Tier-1 Row-1 as a 3-column CSS Grid
- Maintain left-aligned logo + right-aligned actions
- Ensure consistent spatial separation between Tier-1 and Tier-2
- Apply identical behaviour to Panel 0 and Panel 1
Scope:
- Header layout only
- CSS-only
- No motion, timing, or transform changes
Notes:
- Tier-1 is architecturally LOCKED
- This change is purely visual polish (Option A)
================================================================================================= */
/* ================================================================================================
Tier-1 — Header Row 1 (Logo | Spacer | Actions)
================================================================================================ */
.l2s11-header-row1 {
display: grid;
grid-template-columns: 1fr 200px auto;
align-items: center;
height: 88px;
padding: 8px 16px;
background: transparent;
border-bottom: 0;
box-sizing: border-box;
}
/* Logo container */
.l2s11-header-logo {
display: flex;
align-items: center;
justify-content: flex-start;
width: 80px;
height: 80px;
overflow: hidden;
}
/* Logo asset (SVG / IMG) */
.l2s11-header-logo img,
.l2s11-header-logo svg {
width: 80px;
height: 80px;
max-width: 80px;
max-height: 80px;
display: block;
}
/* Actions container (Back / Close) */
.l2s11-header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
white-space: nowrap;
}
/* Buttons */
.l2s11-btn {
height: 36px;
padding: 6px 12px;
border-radius: 10px;
font-size: 14px;
line-height: 1;
white-space: nowrap;
}
/* ================================================================================================
Tier-2 — Title Band (Option A: Vertical Separation)
================================================================================================ */
.l2s11-header-titleband {
margin-top: 6px; /* Option A — controlled separation from Tier-1 */
padding: 10px 14px;
background: rgba(0, 0, 0, 0.04);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.l2s11-title {
margin: 0;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
text-align: left;
}
/* ================================================================================================
Safety Guards
================================================================================================ */
/* Prevent title from appearing in Tier-1 */
.l2s11-header-row1 > .l2s11-title {
display: none;
}
/* Prevent grid children from forcing overflow */
.l2s11-header-row1 > * {
min-width: 0;
}
/* =================================================================================================
Project : Link2Selwyn — Selwyn District Directory Platform
Component : CP-11 Custom Off-Canvas Navigation Architecture
CP : CP-11.13
RefID : CSS1105
Version : L2S-16012026-0015
Date : 13-02-2026 20:29 NZDT
Heading:
CP-11.13 RowPolish — Brand Layer + SVG Chevron Alignment (12px + Stroke Override)
Purpose:
- Apply panel background colour (#2e6161)
- Set text and chevron colour (#ffffff)
- Apply modern bottom-only hairline dividers (#ffffff1f)
- Apply desktop hover tint (#ffffff14) under hover-capable devices
- Apply mobile/press active tint (#ffffff0f)
- Apply keyboard focus outline (#ffffff)
- Support inline SVG chevron injection (JS1115 v11.9) using 24x24 viewBox scaled via CSS
- Chevron size: 12px
- Chevron stroke override: 2.6
- Preserve CP-11 motion contract (CSS1104 LOCKED)
- Preserve header enforcement (CSS1107 LOCKED)
Scope:
- Row-level visuals only
- SVG scaling + stroke override only
- No motion, timing, transform, or stack changes
================================================================================================= */
/* ================================================================================================
Panel Background + Base Text Colour
================================================================================================ */
#l2s11-root .l2s11-panel {
background: #2e6161; /* Diagnostic transparency */
color: #ffffff;
}
/* ================================================================================================
Remove Legacy Boxed List Appearance (if still present from CSS1104)
================================================================================================ */
#l2s11-root .l2s11-list {
border: 0;
border-radius: 0;
overflow: visible;
background: transparent;
}
/* ================================================================================================
Row Structure — Grid Layout (Text | Chevron)
================================================================================================ */
#l2s11-root .l2s11-row {
display: grid;
grid-template-columns: 1fr 48px;
align-items: center;
padding: 16px 16px;
background: transparent;
border-bottom: 1px solid #ffffff1f;
}
#l2s11-root .l2s11-row:last-child {
border-bottom: 0;
}
/* ================================================================================================
Text Column
================================================================================================ */
#l2s11-root .l2s11-row-text {
all: unset;
display: block;
cursor: pointer;
font-family: inherit;
font-size: 16px;
line-height: 1.0;
text-transform: capitalize;
font-weight: 400;
letter-spacing: 0.02em;
color: #ffffff;
padding-right: 12px;
text-align: left;
}
/* ================================================================================================
Chevron Column — SVG Mode (JS1115 v11.9)
================================================================================================ */
#l2s11-root .l2s11-row-chev {
all: unset;
width: 48px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #ffffff;
}
/* SVG Scaling — 24x24 Geometry Scaled via CSS */
#l2s11-root .l2s11-row-chev svg {
width: 12px;
height: 12px;
display: block;
}
/* Ensure SVG remains hollow and obeys currentColor (and override stroke thickness for 12px render) */
#l2s11-root .l2s11-row-chev svg path {
fill: none;
stroke: currentColor;
stroke-width: 2.8;
}
/* ================================================================================================
Interaction States
================================================================================================ */
@media (hover: hover) {
#l2s11-root .l2s11-row:hover {
background: #ffffff14;
}
}
#l2s11-root .l2s11-row:active {
background: #ffffff0f;
}
/* ================================================================================================
Accessibility — Keyboard Focus Ring
================================================================================================ */
#l2s11-root .l2s11-row-text:focus-visible,
#l2s11-root .l2s11-row-chev:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
/* =================================================================================================
Project : Link2Selwyn — Selwyn District Directory Platform
Link : https://link2selwyn.co.nz
Component : Custom Off-Canvas Navigation Architecture
CP : CP-11.18
RefID : CSS1109
Version : L2S-25022026-0001
Human Ver : v4.0
Date : 25-02-2026 9:21 NZDT
Heading:
CP-11.18 Track Slide — Bidirectional Early Panel Suppression (CSS1109 v4.0)
Purpose:
Implement perfectly mirrored early-fade suppression for outgoing panels
during both forward (Panel 0 → Panel 1) and reverse (Panel 1 → Panel 0)
slide transitions.
This removes perceptual trailing-edge registration and introduces a
clean background exposure cue that reinforces spatial directionality.
Scope:
- Visual layer only.
- Does NOT modify CSS1104 transform contract.
- Slide duration remains controlled by --l2s11-duration.
- Fade duration intentionally shorter (120ms).
- Applies only during depth transitions.
Notes:
- Forward: Depth = 1 → Fade Panel 0 early.
- Reverse: Depth = 0 → Fade Panel 1 early.
- Background exposure is intentional and symmetrical.
================================================================================================= */
/* -----------------------------------------------------------------------------------------------
Base panel opacity state (stable)
------------------------------------------------------------------------------------------------ */
#l2s11-root .l2s11-panel[data-depth="0"],
#l2s11-root .l2s11-panel[data-depth="1"] {
opacity: 1;
}
/* -----------------------------------------------------------------------------------------------
Rapid fade timing (shorter than slide duration)
------------------------------------------------------------------------------------------------ */
#l2s11-root .l2s11-panel {
transition: opacity 120ms ease-out;
}
/* -----------------------------------------------------------------------------------------------
Forward Motion: Panel 0 → Panel 1
Depth becomes 1
Fade outgoing Panel 0 early
------------------------------------------------------------------------------------------------ */
#l2s11-root[style*="--l2s11-depth: 1"]
.l2s11-panel[data-depth="0"] {
opacity: 0;
}
/* -----------------------------------------------------------------------------------------------
Reverse Motion: Panel 1 → Panel 0
Depth becomes 0
Fade outgoing Panel 1 early
------------------------------------------------------------------------------------------------ */
#l2s11-root[style*="--l2s11-depth: 0"]
.l2s11-panel[data-depth="1"] {
opacity: 0;
}
/* -----------------------------------------------------------------------------------------------
Defensive: Ensure active panel always resolves to full opacity
------------------------------------------------------------------------------------------------ */
#l2s11-root[style*="--l2s11-depth: 1"]
.l2s11-panel[data-depth="1"],
#l2s11-root[style*="--l2s11-depth: 0"]
.l2s11-panel[data-depth="0"] {
opacity: 1;
}
/* =================================================================================================
Project : Link2Selwyn — Selwyn District Directory Platform
Link : https://link2selwyn.co.nz
Component : L2S Slide Panel Navigation — Panel 1 Internal Motion Layer
CP : CP-11.8
RefID : CSS1108
Version : v1.3
Checkpoint: CP-11.8 (Panel 1 Internal X-Axis Simulation — Stack-Driven + Mobile Selection Guard)
LOCKED STATUS : ADDITIVE LAYER — FORMALLY LOCKED
Does NOT modify CSS1104 (Track Motion Contract)
Does NOT modify CSS1109 (Bidirectional Suppression)
Safe removal by deleting this block only.
Heading:
CP-11.8 Panel 1 Internal X-Axis Simulation (Stack-Driven Surface Animation + Selection Suppression)
Date | Time:
25.02.2026 | 21:04 NZDT
Purpose:
Provide deterministic internal X-axis animation inside Panel 1 by animating
the stable .l2s11-list surface itself (stack-driven trigger via JS1116).
Additionally suppress mobile text selection behaviour inside Panel 1 rows
to prevent OS-level copy/search/share overlays during rapid tapping.
Scope:
- Applies strictly to #l2s11-panel-content-1
- Forward: list starts slightly right, settles to neutral
- Back: list starts slightly left, settles to neutral
- Harmonised timing with track motion (360ms track / 280ms internal)
- Prevents text selection inside navigation rows only
- No impact to depth logic, stack logic, header logic, or scroll arbitration
Notes:
- JS1116 controls class application and timing
- No DOM cloning
- No MutationObserver
================================================================================================= */
:root {
--l2s11-xnav-duration: 280ms;
--l2s11-xnav-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--l2s11-xnav-offset-in: 32px;
--l2s11-xnav-opacity-in-start: 0.92;
}
/* -----------------------------------------------------------------------------------------------
Panel 1 Internal Motion Surface
------------------------------------------------------------------------------------------------ */
#l2s11-panel-content-1 .l2s11-list[data-l2s11-panel-index="1"] {
transform: translate3d(0, 0, 0);
opacity: 1;
}
#l2s11-panel-content-1 .l2s11-list[data-l2s11-panel-index="1"].l2s11-xnav-animating {
transition:
transform var(--l2s11-xnav-duration) var(--l2s11-xnav-ease),
opacity var(--l2s11-xnav-duration) var(--l2s11-xnav-ease);
will-change: transform, opacity;
}
#l2s11-panel-content-1 .l2s11-list[data-l2s11-panel-index="1"].l2s11-xnav-pre.dir-forward {
transform: translate3d(var(--l2s11-xnav-offset-in), 0, 0);
opacity: var(--l2s11-xnav-opacity-in-start);
}
#l2s11-panel-content-1 .l2s11-list[data-l2s11-panel-index="1"].l2s11-xnav-pre.dir-back {
transform: translate3d(calc(var(--l2s11-xnav-offset-in) * -1), 0, 0);
opacity: var(--l2s11-xnav-opacity-in-start);
}
/* -----------------------------------------------------------------------------------------------
Mobile Text Selection Suppression (Panel 1 Rows Only)
------------------------------------------------------------------------------------------------ */
#l2s11-panel-content-1 .l2s11-row,
#l2s11-panel-content-1 .l2s11-row-text {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
/* -----------------------------------------------------------------------------------------------
Reduced Motion Support
------------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
:root {
--l2s11-xnav-duration: 1ms;
}
}
/* =================================================================================================
Project : Link2Selwyn — Selwyn District Directory Platform
Link : https://link2selwyn.co.nz
Component : L2S Slide Panel Navigation — Active Path Highlight Visual Layer
CP : CP-11.8
RefID : CSS1110
Version : v1.0
Checkpoint: CP-11.8 (Option A — Uniform Active Path Highlight)
LOCKED STATUS : ADDITIVE LAYER — NOT LOCKED
Does NOT modify CSS1104 (Track Contract)
Does NOT modify CSS1105 (RowPolish Base Styling)
Does NOT modify CSS1108 (Internal X-Axis Motion)
Safe removal by deleting this block only.
Date | Time:
03-03-2026 21:13 NZDT
Purpose:
Provide a uniform visual highlight for the full active navigation pathway
inside CP-11 slide panels.
Behaviour:
- All WP-derived active nodes (ancestors + deepest current)
share the same highlight colour.
- No bolding or visual emphasis differentiation for deepest node.
- Colour is centrally controlled via CSS variable.
Scope:
- Text colour override only.
- No font-size, spacing, background, or transform changes.
================================================================================================= */
/* ================================================================================================
Root-Level Highlight Variable
(Change this value to adjust highlight colour globally)
================================================================================================ */
#l2s11-root {
--l2s11-path-color: #9bdede; /* Uniform active path colour */
}
/* ================================================================================================
Active Path (Ancestors + Deepest Current — Uniform Styling)
================================================================================================ */
#l2s11-root .l2s11-row-text.l2s11-active-path-text,
#l2s11-root .l2s11-row-text.l2s11-active-current-text {
color: var(--l2s11-path-color);
font-weight: 400; /* Maintain base weight from CSS1105 */
}
/* =================================================================================================
Project : Link2Selwyn — Selwyn District Directory Platform (Selwyn, New Zealand)
Component : CPTA2Z-08 — Tag Mapping Engine (UI Control Layer)
RefID : CSS0801
Version : L2S-10042026-0004
Date : 10-04-2026 22:45 NZST
Heading:
CPTA2Z-08 — Remove Legacy Popular Tags UI (Safe Layer Only)
CPT Phase:
CPTA2Z-08 — Frontend Tag Mapping & Enforcement Layer
Purpose:
Remove ONLY static / legacy tag UI elements that conflict with the mapping system,
while preserving Select2 dropdown for controlled interaction and validation.
Scope:
- Frontend only
- Safe removal of non-dynamic tag UI
- Does NOT interfere with Select2 rendering
Notes:
- This restores visibility of Select2 dropdown
- Required before JS0801 validation layer can be tested
================================================================================================= */
/* Remove GeoDirectory static/popular tag UI only */
.geodir_post_tags,
.gd-popular-tags,
.gd-popular-tags-item,
.geodir-tags-field .tagcloud {
display: none !important;
}
/* --------------------------------------------------------------------------
* Project: Link2Selwyn (L2S)
* Link: CPTA2Z
* Component: Frontend Tag Presentation Layer
* CP Phase: CPTA2Z-08.1
* RefID: CSS0801
*
* Version: L2S-13042026-0002
* Reference: 0002
*
* STATUS : LOCKED
*
* Checkpoint: CP-A2Z-08.1-IMPLEMENTATION-V1
* Date: 13-04-2026 20:49 NZST
*
* Purpose:
* Scoped styling for frontend tag dropdown grouping, helper text, and compact
* multi-category marker.
*
* Scope:
* Frontend only. Select2 results presentation only.
* -------------------------------------------------------------------------- */
.l2s-a2z081-helper {
margin: 0 0 8px 0;
font-size: 12px;
line-height: 1.45;
color: #5f6b6d;
}
.select2-results__option.l2s-a2z081-group {
padding: 8px 12px 6px 12px;
font-size: 12px;
line-height: 1.3;
font-weight: 700;
text-transform: none;
letter-spacing: 0.01em;
color: #5f6b6d;
background: #f3f5f6;
border-top: 1px solid #e4e8ea;
border-bottom: 1px solid #e4e8ea;
cursor: default;
user-select: none;
}
.select2-results__option.l2s-a2z081-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.l2s-a2z081-option-text {
display: inline-block;
min-width: 0;
flex: 1 1 auto;
}
.l2s-a2z081-marker {
display: inline-block;
flex: 0 0 auto;
font-size: 14px;
line-height: 1;
color: #7a8587;
margin-left: 6px;
}
.select2-results__option--highlighted.l2s-a2z081-option .l2s-a2z081-marker {
color: inherit;
}
@media (max-width: 767px) {
.l2s-a2z081-helper {
font-size: 11px;
margin-bottom: 6px;
}
.select2-results__option.l2s-a2z081-group {
padding: 7px 10px 5px 10px;
font-size: 11px;
}
.l2s-a2z081-marker {
font-size: 13px;
margin-left: 4px;
}
}
/* --------------------------------------------------------------------------
* Project: Link2Selwyn (L2S)
* System: CPTA2Z – Category → Tag Mapping Engine
* Component: Tag Dashboard UX Styling
*
* CP Phase: CPTA2Z-08.3
* RefID: CSS0802
*
* STATUS: ACTIVE DEVELOPMENT
*
* VERSION CONTROL
* Version: L2S-17042026-0003
* Stage Version: v1.1 (STATE-STABILITY PATCH + HEADER HARDENING)
* Reference: 0003
*
* Date: 17-04-2026 12:25 NZST
*
* PURPOSE
* Provide styling for the CPTA2Z-08.3 collapsible grouped tag dashboard UI.
*
* Includes:
* - Toggle header styling
* - Grouped category presentation
* - Tag item layout
* - State-stability patch to prevent visual degradation after re-render
*
* SCOPE
* UI only. No behavioural logic.
* Compatible with JS0802 v15.0 structure.
*
* NOTES
* v1.1 introduces explicit header colour locking to prevent washed-out
* rendering after observer-triggered DOM reflows.
* -------------------------------------------------------------------------- */
.l2s-tag-dashboard {
margin-top: 12px;
border: 1px solid #d8d8d8;
border-radius: 6px;
background: #ddffff;
overflow: hidden;
}
/* --------------------------------------------------------------------------
* HEADER CONTAINER
* -------------------------------------------------------------------------- */
.l2s-tag-header {
margin: 0;
padding: 0;
border-bottom: 1px solid #e2e2e2;
background: #f9fcfe;
}
/* --------------------------------------------------------------------------
* HEADER BUTTON (PRIMARY INTERACTION)
* -------------------------------------------------------------------------- */
.l2s-tag-header-button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
margin: 0;
padding: 11px 14px;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
user-select: none;
font: inherit;
color: #222222;
}
/* --------------------------------------------------------------------------
* STATE STABILITY PATCH (CRITICAL)
* Ensures header text does NOT degrade after toggle cycles
* -------------------------------------------------------------------------- */
.l2s-tag-dashboard.is-collapsed .l2s-tag-header-button,
.l2s-tag-dashboard.is-expanded .l2s-tag-header-button {
color: #222222;
background: transparent;
}
/* Prevent inherited washout from parent state */
.l2s-tag-dashboard.is-collapsed,
.l2s-tag-dashboard.is-expanded {
color: inherit;
}
/* --------------------------------------------------------------------------
* HOVER / FOCUS HARDENING
* -------------------------------------------------------------------------- */
.l2s-tag-header-button:hover,
.l2s-tag-header-button:focus {
background: #efefef;
color: #222222;
outline: none;
}
/* --------------------------------------------------------------------------
* HEADER TITLE
* -------------------------------------------------------------------------- */
.l2s-tag-header-title {
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
/* --------------------------------------------------------------------------
* CHEVRON
* -------------------------------------------------------------------------- */
.l2s-tag-header-chevron {
position: relative;
flex: 0 0 12px;
width: 12px;
height: 12px;
}
.l2s-tag-header-chevron::before {
content: '';
position: absolute;
top: 1px;
left: 1px;
width: 8px;
height: 8px;
border-right: 2px solid #555555;
border-bottom: 2px solid #555555;
transform: rotate(45deg);
transition: transform 0.2s ease;
}
.l2s-tag-dashboard.is-collapsed .l2s-tag-header-chevron::before {
transform: rotate(-45deg);
top: 2px;
}
.l2s-tag-dashboard.is-expanded .l2s-tag-header-chevron::before {
transform: rotate(45deg);
}
/* --------------------------------------------------------------------------
* BODY
* -------------------------------------------------------------------------- */
.l2s-tag-body {
padding: 12px 14px 14px 14px;
background: #ffffff;
}
/* --------------------------------------------------------------------------
* EMPTY STATE
* -------------------------------------------------------------------------- */
.l2s-tag-empty {
font-size: 13px;
line-height: 1.5;
color: #5a5a5a;
}
/* --------------------------------------------------------------------------
* GROUP CONTAINER
* -------------------------------------------------------------------------- */
.l2s-tag-groups {
display: flex;
flex-direction: column;
gap: 12px;
}
/* --------------------------------------------------------------------------
* GROUP BLOCK
* -------------------------------------------------------------------------- */
.l2s-tag-group {
border: 1px solid #e6e6e6;
border-radius: 4px;
background: #fafafa;
overflow: hidden;
}
/* --------------------------------------------------------------------------
* GROUP TITLE
* -------------------------------------------------------------------------- */
.l2s-tag-group-title {
padding: 9px 12px;
background: #f8f8f8;
border-bottom: 1px solid #dddddd;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: #2d2d2d;
}
/* --------------------------------------------------------------------------
* GROUP LIST
* -------------------------------------------------------------------------- */
.l2s-tag-group-list {
padding: 10px 12px 10px 20px;
background: #ffffff;
}
/* --------------------------------------------------------------------------
* TAG ITEM
* -------------------------------------------------------------------------- */
.l2s-tag-group-item {
position: relative;
margin: 0 0 7px 0;
padding: 0 0 0 12px;
font-size: 13px;
line-height: 1.5;
color: #333333;
}
.l2s-tag-group-item:last-child {
margin-bottom: 0;
}
.l2s-tag-group-item::before {
content: '•';
position: absolute;
left: 0;
top: 0;
color: #666666;
}
/* --------------------------------------------------------------------------
* MOBILE ADJUSTMENTS
* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
.l2s-tag-header-button {
padding: 10px 12px;
}
.l2s-tag-body {
padding: 10px 12px 12px 12px;
}
.l2s-tag-group-title {
padding: 8px 10px;
}
.l2s-tag-group-list {
padding: 9px 10px 9px 18px;
}
.l2s-tag-group-item {
font-size: 12.5px;
}
}
/* --------------------------------------------------------------------------
* Project: Link2Selwyn (L2S)
* System: CPTA2Z - Category -> Tag Mapping Engine
* Component: Predefined Tag Dashboard UI Polish
*
* CP Phase: CPTA2Z-08.4
* RefID: CSS0802
*
* STATUS: ACTIVE DEVELOPMENT
*
* Version: L2S-23042026-0006
* Stage Version: v1.7
* Date: 23-04-2026 21:05 NZST
*
* PURPOSE:
* Full authoritative rewrite for the predefined tag dashboard styling layer.
* Finalises the visual contract for:
* - Available predefined tags
* - Selected predefined tags
* - Max-reached / unavailable tags
* - Panel, group, and notice styling
*
* VERSION LINEAGE:
* v1.0 -> Scoped chip patch
* v1.1 -> Token refinement
* v1.2 -> State colour polish
* v1.3 -> Visible remove marker
* v1.4 -> Structural harmony pass
* v1.5 -> Final geometry + tone calibration
* v1.6 -> Hard reset precision pass
* v1.7 -> Full rewrite with exact available tone, residual marker removal,
* and selected-chip left alignment correction
*
* COLOUR CONTRACT:
* - Available = pale blue / neutral selectable
* - Selected = pale green / active removable
* - Unavailable = muted grey / max reached
*
* SCOPE:
* - JS0802 predefined dashboard only
* - CSS only
* - No JS changes
* - No CP11 impact
* - No native GeoDirectory Select2 token styling changes
*
* NOTES:
* - Unselected chip background locked to approved tone: #f9fcfe
* - Residual bullet / dot / pseudo marker suppressed for unselected chips
* - Selected chip x-marker tightened toward left edge
* - Selected and unselected chip geometry kept aligned
* -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
PANEL
-------------------------------------------------------------------------- */
.l2s-tag-dashboard {
margin-top: 12px;
border: 1px solid #d7dce2;
border-radius: 10px;
background: #ffffff;
overflow: hidden;
}
.l2s-tag-header-button {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
border: 0;
background: #eef3f7;
color: #1d2327;
font-size: 15px;
font-weight: 700;
text-align: left;
cursor: pointer;
}
/* --------------------------------------------------------------------------
BODY / GROUPS
-------------------------------------------------------------------------- */
.l2s-tag-body {
padding: 14px;
}
.l2s-tag-group {
margin-bottom: 14px;
border: 1px solid #e7e8ea;
border-radius: 10px;
background: #fafafa;
overflow: hidden;
}
.l2s-tag-group:last-child {
margin-bottom: 0;
}
.l2s-tag-group-title {
padding: 11px 14px;
background: #f3f4f5;
border-bottom: 1px solid #ececec;
color: #1d2327;
font-size: 14px;
font-weight: 700;
}
.l2s-tag-group-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 14px;
}
/* --------------------------------------------------------------------------
UNIVERSAL CHIP RESET
-------------------------------------------------------------------------- */
.l2s-tag-group-item,
button.l2s-tag-group-item,
button.l2s-tag-group-item.is-selected {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
box-sizing: border-box !important;
list-style: none !important;
text-decoration: none !important;
box-shadow: none !important;
outline: none !important;
display: inline-flex !important;
align-items: center !important;
vertical-align: middle !important;
min-height: 38px !important;
height: 38px !important;
margin: 0 !important;
border-radius: 10px !important;
font-family: inherit !important;
font-size: 13px !important;
line-height: 1 !important;
white-space: nowrap !important;
cursor: pointer !important;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
transform 0.08s ease !important;
}
.l2s-tag-group-item::after,
button.l2s-tag-group-item::after {
content: none !important;
}
/* --------------------------------------------------------------------------
AVAILABLE CHIP
-------------------------------------------------------------------------- */
.l2s-tag-group-item:not(.is-selected),
button.l2s-tag-group-item:not(.is-selected) {
justify-content: center !important;
padding: 0 14px !important;
background: #f9fcfe !important;
border: 1px solid #cfd8e2 !important;
color: #35506a !important;
font-weight: 500 !important;
}
.l2s-tag-group-item:not(.is-selected)::before,
button.l2s-tag-group-item:not(.is-selected)::before {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.l2s-tag-group-item:not(.is-selected):hover,
button.l2s-tag-group-item:not(.is-selected):hover {
background: #f2f8fc !important;
border-color: #c3d2df !important;
color: #2e4a63 !important;
}
.l2s-tag-group-item:not(.is-selected):active,
button.l2s-tag-group-item:not(.is-selected):active {
transform: scale(0.985);
}
.l2s-tag-group-item:not(.is-selected):focus-visible,
button.l2s-tag-group-item:not(.is-selected):focus-visible {
border-color: #2271b1 !important;
box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.18) !important;
}
/* --------------------------------------------------------------------------
SELECTED CHIP
-------------------------------------------------------------------------- */
.l2s-tag-group-item.is-selected,
button.l2s-tag-group-item.is-selected {
justify-content: flex-start !important;
padding: 0 14px 0 8px !important;
background: #e7f6ea !important;
border: 1px solid #8cc79c !important;
color: #14532d !important;
font-weight: 700 !important;
}
.l2s-tag-group-item.is-selected::before,
button.l2s-tag-group-item.is-selected::before {
content: "×" !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 12px !important;
height: 12px !important;
margin-right: 6px !important;
margin-left: 0 !important;
color: #14532d !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1 !important;
position: relative !important;
top: -1px !important;
left: 0 !important;
}
.l2s-tag-group-item.is-selected:hover,
button.l2s-tag-group-item.is-selected:hover {
background: #dcf0e1 !important;
border-color: #79b88b !important;
color: #114625 !important;
}
.l2s-tag-group-item.is-selected:active,
button.l2s-tag-group-item.is-selected:active {
transform: scale(0.985);
}
.l2s-tag-group-item.is-selected:focus-visible,
button.l2s-tag-group-item.is-selected:focus-visible {
border-color: #2f8f49 !important;
box-shadow: 0 0 0 2px rgba(47, 143, 73, 0.16) !important;
}
/* --------------------------------------------------------------------------
MAX REACHED / UNAVAILABLE
-------------------------------------------------------------------------- */
.l2s-tag-notice {
margin-bottom: 12px;
padding: 11px 14px;
border-radius: 10px;
font-size: 14px;
line-height: 1.35;
}
.l2s-tag-notice-max {
background: #fff4d6;
border: 1px solid #ecd07a;
color: #6f5200;
}
.l2s-tag-notice-max + .l2s-tag-groups .l2s-tag-group-item:not(.is-selected),
.l2s-tag-notice-max + .l2s-tag-groups button.l2s-tag-group-item:not(.is-selected) {
background: #f5f6f7 !important;
border: 1px solid #d9dde1 !important;
color: #7a7f87 !important;
cursor: not-allowed !important;
}
.l2s-tag-notice-max + .l2s-tag-groups .l2s-tag-group-item:not(.is-selected):hover,
.l2s-tag-notice-max + .l2s-tag-groups button.l2s-tag-group-item:not(.is-selected):hover {
background: #f5f6f7 !important;
border: 1px solid #d9dde1 !important;
color: #7a7f87 !important;
transform: none !important;
}
/* --------------------------------------------------------------------------
EMPTY
-------------------------------------------------------------------------- */
.l2s-tag-empty {
padding: 4px 2px;
color: #666666;
font-size: 14px;
line-height: 1.45;
}
/* --------------------------------------------------------------------------
MOBILE
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.l2s-tag-header-button {
padding: 13px 14px;
font-size: 14px;
}
.l2s-tag-body {
padding: 12px;
}
.l2s-tag-group-title {
padding: 10px 12px;
font-size: 13px;
}
.l2s-tag-group-list {
gap: 10px;
padding: 12px;
}
.l2s-tag-group-item,
button.l2s-tag-group-item,
.l2s-tag-group-item.is-selected,
button.l2s-tag-group-item.is-selected {
min-height: 38px !important;
height: 38px !important;
font-size: 13px !important;
}
}
/**
* --------------------------------------------------------
* Project: Link2Selwyn CPT Manager Enhancement
* Component: CPT Manager Layout and Chevron Control
* RefID: CSS0020
* Version: L2S-30042026-0038 v5.5
* Date: 30-04-2026 23:40 NZST
* --------------------------------------------------------
* Purpose:
* - Fix border-based arrow rendering
* - Force arrow to far right
* - Correct open/close rotation logic
* --------------------------------------------------------
*/
/* GRID */
.l2s-accordion.l2s-cpt-grid-active {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 20px !important;
}
/* HEADER */
.l2s-accordion-header {
display: flex !important;
align-items: center !important;
position: relative !important;
padding: 14px 40px 14px 16px !important; /* space for arrow */
}
/* TITLE */
.l2s-header-title {
flex: 1 1 auto !important;
}
/* PACKAGES */
.l2s-inline-packages {
margin-left: auto !important;
font-size: 11px !important;
white-space: nowrap !important;
}
/* ----------------------------------------
ARROW (ABSOLUTE POSITION FIX)
---------------------------------------- */
.l2s-arrow {
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-50%) rotate(-45deg) !important;
width: 12px !important;
height: 12px !important;
border-right: 2px solid #333 !important;
border-bottom: 2px solid #333 !important;
transition: transform 0.2s ease !important;
}
/* OPEN STATE */
.l2s-accordion-header.active .l2s-arrow {
transform: translateY(-50%) rotate(45deg) !important;
}
/* BODY */
.l2s-accordion-body {
padding: 12px 16px !important;
background: #ffffff !important;
border-top: 1px solid #e2e4e7 !important;
}
.l2s-accordion-body a {
display: block !important;
padding: 6px 0 !important;
color: #2271b1 !important;
text-decoration: none !important;
}
.l2s-accordion-body a:hover {
text-decoration: underline !important;
}
/*
============================================================
Project: Link2Selwyn
System/Component: Elementor Pro SmartMenus Dropdown
Layer: CSS
CP Phase: CP-MENU-03
RefID: CSS-MENU-0003
Version: L2S-09052026-0003
Reference #: 0003
Date: 2026-05-09 10:22 NZST
Status: TEST
Purpose:
Create visual gutters between multi-level Elementor Pro
dropdown flyout menus while preserving SmartMenus
dynamic positioning and hover continuity.
Scope:
Desktop multi-level submenu flyouts only.
Notes:
- DOES NOT override SmartMenus positioning engine.
- Uses visual transforms only.
- Includes invisible hover bridge.
- Safer against Elementor updates and viewport flipping.
============================================================
*/
/* ---------------------------------------------------------
ALLOW OVERFLOW VISIBILITY
--------------------------------------------------------- */
.elementor-nav-menu--main .elementor-nav-menu .sub-menu {
overflow: visible !important;
}
/* ---------------------------------------------------------
CREATE VISUAL GUTTER
--------------------------------------------------------- */
.elementor-nav-menu--main .elementor-nav-menu .sub-menu .sub-menu {
transform: translateX(5px);
}
/* ---------------------------------------------------------
HOVER BRIDGE
--------------------------------------------------------- */
.elementor-nav-menu--main
.elementor-nav-menu
.menu-item-has-children {
position: relative;
}
/* invisible bridge preserving hover continuity */
.elementor-nav-menu--main
.elementor-nav-menu
.menu-item-has-children > .sub-menu::before {
content: "";
position: absolute;
top: 0;
left: -5px;
width: 5px;
height: 100%;
background: transparent;
}
/* ---------------------------------------------------------
OPTIONAL DEPTH ENHANCEMENT
--------------------------------------------------------- */
.elementor-nav-menu--main .elementor-nav-menu .sub-menu {
box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}