/* Theme Name: OneListing Pro Child Template: onelisting-pro Theme URI: https://directorist.com/product/onelisting/ Author: wpWax Author URI: https://wpwax.com/ Description: OneListing Pro child theme for LantaLocal.com Version: 1.1 Text Domain: onelisting-pro-child */ /* PMLABS-FONT-START Self-hosted DM Sans (variable font, weights 100-1000 in one file, no external request). Theme's typography options (onelisting.typo_body/typo_h1-h6/menu_typo/etc) were set to font-family:"Roboto" with type:"google" but the theme has no code anywhere that actually builds a Google Fonts URL or enqueues one - it only ever renders the font-family NAME into inline CSS. Every visitor has been getting the browser's fallback sans-serif this whole time, not Roboto. Switched the typography options to "DM Sans" (matches the logo wordmark) and added this @font-face so the name resolves to a real, self-hosted file. */ @font-face { font-family: 'DM Sans'; src: url('fonts/DMSans-Variable.woff2') format('woff2-variations'), url('fonts/DMSans-Variable.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; } /* PMLABS-FONT-END */ :root { --sticky-offset: 90px; } /* Listing page whitespace fix */ .directorist-single-wrapper { padding-bottom: 0 !important; } /* TOKENS */ :root { --la-saffron: #1a7a8a; --la-saffron-dk: #135b67; --la-paper: #f2ede6; --la-paper-lt: #f8f4ee; --la-offwhite: #fdfbf8; --la-accent: #e8a94d; --la-accent-dk: #ae7f3a; --la-teak: #2b3a3c; --la-teak-lt: #55696c; --la-white: #ffffff; --la-font-head: 'Playfair Display', Georgia, serif; --la-font-body: 'DM Sans', system-ui, sans-serif; --la-radius: 16px; --la-shadow: 0 2px 16px rgba(45,41,38,.09); --la-shadow-lg: 0 8px 32px rgba(45,41,38,.16); --la-ease: 0.22s ease; } /* SUBCATEGORY GRID */ .la-subcat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 0 0 32px 0; width: 100%; justify-content: center; } .la-subcat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 16px 24px; background: #fff; border: 1.5px solid rgba(45,41,38,.09); border-radius: var(--la-radius); text-decoration: none; text-align: center; box-shadow: var(--la-shadow); transition: transform var(--la-ease), box-shadow var(--la-ease), border-color var(--la-ease); gap: 6px; min-height: 100px; } .la-subcat-card:hover { transform: translateY(-4px); box-shadow: var(--la-shadow-lg); border-color: var(--la-accent); text-decoration: none; } .la-subcat-name { font-family: var(--la-font-head); font-size: 14px; font-weight: 600; color: var(--la-teak); line-height: 1.3; } .la-subcat-count { font-family: var(--la-font-body); font-size: 12px; color: var(--la-accent); font-weight: 400; } /* SUBCATEGORY SIDEBAR */ .la-subcat-sidebar { background: #fff; border: 1.5px solid var(--la-paper); border-radius: 8px; padding: 16px; margin-bottom: 20px; } .la-subcat-sidebar-title { font-family: var(--la-font-body); font-size: 13px; font-weight: 700; color: var(--la-teak); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 12px 0; } .la-subcat-sidebar ul { list-style: none; margin: 0; padding: 0; } .la-subcat-sidebar ul li { border-bottom: 1px solid var(--la-offwhite); } .la-subcat-sidebar ul li:last-child { border-bottom: none; } .la-subcat-sidebar ul li a { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-family: var(--la-font-body); font-size: 14px; color: var(--la-teak); text-decoration: none; transition: color 0.15s ease; } .la-subcat-sidebar ul li a:hover { color: var(--la-accent); } .la-subcat-sidebar ul li a span { color: #aaa; font-size: 12px; } .la-subcat-sidebar ul li.active a { color: var(--la-saffron); font-weight: 600; } /* LISTING PAGE - HIGHLIGHTS & INFO LABELS */ .directorist-single-info__label__text::after, .directorist-single-info__label__text::before { content: none !important; } .directorist-single-info__label__text { font-weight: 700 !important; font-family: var(--la-font-body) !important; color: #1a2530 !important; margin-top: 0 !important; } .directorist-single-info__label { align-items: center !important; } .directorist-details-info-wrap { align-items: flex-start !important; } /* LISTING PAGE - REVIEW FORM */ .directorist-review-submit__form .form-group-author::before { content: 'Your name'; display: block; font-family: var(--la-font-body); font-size: 13px; font-weight: 600; color: var(--la-teak); margin-bottom: 6px; } .directorist-review-submit__form .form-group-email::before { content: 'Your email'; display: block; font-family: var(--la-font-body); font-size: 13px; font-weight: 600; color: var(--la-teak); margin-bottom: 6px; } .directorist-review-submit__form .directorist-btn, .directorist-review-submit__form button[type="submit"] { background: var(--la-accent) !important; border-color: var(--la-accent) !important; color: #fff !important; font-family: var(--la-font-body) !important; font-weight: 600 !important; border-radius: 8px !important; padding: 12px 28px !important; transition: background var(--la-ease) !important; } .directorist-review-submit__form .directorist-btn:hover, .directorist-review-submit__form button[type="submit"]:hover { background: var(--la-accent-dk) !important; border-color: var(--la-accent-dk) !important; } /* FROM THE OWNER - listing detail page. Markup already renders (single-contents.php) from _custom-owner-message postmeta but had zero CSS - unstyled h3+p. Ported from siargaolocal, colours swapped to lantalocal's own tokens. Ported from chiangmailocal, 2026-09-10. */ .la-owner-message { background: var(--la-paper); border-radius: 8px; padding: 24px; margin: 32px 0; } .la-owner-message__title { font-family: var(--la-font-head); font-weight: 700; color: var(--la-teak); font-size: 1.2rem; margin-bottom: 12px; } .la-owner-message__text { font-family: var(--la-font-body); color: var(--la-teak); line-height: 1.6; margin: 0; } /* CLAIM LISTING WIDGET - cleanup. Ported from siargaolocal: the widget's own .directorist-claim-listing__title h3 always renders empty (the real heading is .directorist-widget__header__title next to it) but still eats its default h3 margin; description text was inheriting Directorist's default size. Typography-audit 2026-08-10. */ .directorist-claim-listing__title { display: none !important; } .directorist-claim-listing p.directorist-claim-listing__description, .directorist-card__body p.directorist-claim-listing__description, p.directorist-claim-listing__description { font-size: 15px !important; color: #1a2530 !important; margin-top: 0 !important; } /* BASE */ #la-home { font-family: var(--la-font-body); color: var(--la-teak); } #la-home * { box-sizing: border-box; } #la-home .la-container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } #la-home .la-section { padding: 72px 0; background: #fff; } #la-home .la-section--cream { background: var(--la-paper-lt); } #la-home .la-blog { background: var(--la-offwhite); } #la-home .la-section__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 36px; gap: 16px; flex-wrap: wrap; } #la-home .la-section__title { font-family: var(--la-font-head); font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; color: var(--la-teak); margin: 0; line-height: 1.15; } #la-home .la-link-arrow { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--la-saffron); text-decoration: none; white-space: nowrap; transition: color var(--la-ease); } #la-home .la-link-arrow:hover { color: var(--la-accent); text-decoration: none; } /* HERO */ #la-home .la-hero { position: relative; min-height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--la-teak) /* TODO hero image: ported from chiangmailocal - needs a Koh Lanta photo uploaded to this site's own media library */ center/cover no-repeat; } #la-home .la-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(45,41,38,.45) 0%, rgba(45,41,38,.7) 100%); z-index: 1; } #la-home .la-hero__content { position: relative; z-index: 2; max-width: 720px; padding: 0 24px; } #la-home .la-hero__eyebrow { font-family: var(--la-font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--la-paper); margin: 0 0 12px; } #la-home .la-hero__headline { font-family: var(--la-font-head); font-size: clamp(42px, 7vw, 72px); font-weight: 700; color: #fff; margin: 0 0 16px; line-height: 1.05; } #la-home .la-hero__sub { font-family: var(--la-font-body); font-size: clamp(15px, 2vw, 18px); color: rgba(255,255,255,.88); margin: 0 0 36px; line-height: 1.5; } /* HERO SEARCH */ #la-home .la-hero__search { width: 100%; max-width: 600px; margin: 0 auto; } #la-home .la-search-form { display: flex; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.18); } #la-home .la-search-input { flex: 1; border: none; padding: 16px 20px; font-size: 15px; font-family: var(--la-font-body); outline: none; min-width: 0; background: transparent; color: var(--la-teak); } #la-home .la-search-input::placeholder { color: #aaa; } #la-home .la-search-select { border: none; border-left: 1px solid #eee; padding: 16px 14px; font-size: 14px; font-family: var(--la-font-body); color: var(--la-teak-lt); background: transparent; outline: none; cursor: pointer; max-width: 160px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2355696c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; } #la-home .la-search-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: var(--la-accent); color: #fff; padding: 16px 24px; font-size: 14px; font-weight: 600; font-family: var(--la-font-body); cursor: pointer; transition: background var(--la-ease); white-space: nowrap; } #la-home .la-search-btn:hover { background: var(--la-accent-dk); } /* HERO SCROLL HINT */ #la-home .la-hero__scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(255,255,255,.6); font-size: 11px; font-family: var(--la-font-body); letter-spacing: 0.1em; text-transform: uppercase; animation: la-bob 2.5s ease-in-out infinite; } @keyframes la-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } /* CATEGORY GRID */ #la-home .la-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; } #la-home .la-cat-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px 24px; background: #fff; border: 1.5px solid rgba(45,41,38,.06); border-radius: var(--la-radius); text-decoration: none; text-align: center; box-shadow: var(--la-shadow); transition: transform var(--la-ease), box-shadow var(--la-ease), border-color var(--la-ease); } #la-home .la-cat-card:hover { transform: translateY(-4px); box-shadow: var(--la-shadow-lg); border-color: var(--la-accent); text-decoration: none; } #la-home .la-cat-card__icon { font-size: 28px; line-height: 1; } #la-home .la-cat-card__icon img { width: 28px; height: 28px; object-fit: contain; } #la-home .la-cat-card__name { font-family: var(--la-font-body); font-size: 13px; font-weight: 600; color: var(--la-teak); line-height: 1.25; } /* LOCATION GRID */ /* Browse-by-area grid: fixed columns, not auto-fill. Network rule (Chris, 2026-08-10) is 4-5 columns, preferring a clean division of the area count. auto-fill produced 6 on a wide viewport on chiangmailocal, which smushed the cards. Koh Lanta has 16 areas in config (hide_empty => true, so the count climbs as listings land), and 16/4 divides cleanly, so 4 columns. Siargao is the reference at 4; Hoi An runs 5 for its 9. */ #la-home .la-loc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1024px) { #la-home .la-loc-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { #la-home .la-loc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } #la-home .la-loc-card { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: #fff; border: 1.5px solid rgba(45,41,38,.06); border-radius: 12px; text-decoration: none; box-shadow: var(--la-shadow); transition: transform var(--la-ease), border-color var(--la-ease); } #la-home .la-loc-card:hover { transform: translateY(-2px); border-color: var(--la-saffron); text-decoration: none; } #la-home .la-loc-card__name { font-family: var(--la-font-body); font-size: 14px; font-weight: 600; color: var(--la-teak); } #la-home .la-loc-card__count { font-family: var(--la-font-body); font-size: 12px; color: var(--la-teak-lt); } /* LISTING CARD */ #la-home .la-listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; } #la-home .la-listing-card { background: #fff; border-radius: var(--la-radius); overflow: hidden; text-decoration: none; box-shadow: var(--la-shadow); transition: transform var(--la-ease), box-shadow var(--la-ease); display: flex; flex-direction: column; } #la-home .la-listing-card:hover { transform: translateY(-4px); box-shadow: var(--la-shadow-lg); text-decoration: none; } #la-home .la-listing-card__img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--la-paper-lt); } #la-home .la-listing-card__img img { width: 100%; height: 100%; object-fit: cover; } #la-home .la-listing-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--la-paper-lt); } #la-home .la-listing-card__placeholder svg { opacity: .2; } #la-home .la-badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 6px; font-family: var(--la-font-body); font-size: 11px; font-weight: 600; line-height: 1.4; } #la-home .la-badge--cat { background: var(--la-saffron); color: #fff; } #la-home .la-badge--featured { background: var(--la-accent); color: #fff; } #la-home .la-listing-card__body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; gap: 6px; } #la-home .la-listing-card__title { font-family: var(--la-font-head); font-size: 17px; font-weight: 700; color: var(--la-teak); margin: 0; line-height: 1.3; } #la-home .la-listing-card__rating { display: flex; align-items: center; gap: 3px; } #la-home .la-rating-val { font-family: var(--la-font-body); font-size: 13px; font-weight: 600; color: var(--la-teak-lt); margin-left: 4px; } #la-home .la-listing-card__meta { display: flex; align-items: flex-start; gap: 5px; font-family: var(--la-font-body); font-size: 13px; color: var(--la-teak-lt); margin: 0; line-height: 1.4; } /* BLOG CARDS */ #la-home .la-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; } #la-home .la-blog-card { background: #fff; border-radius: var(--la-radius); overflow: hidden; text-decoration: none; box-shadow: var(--la-shadow); transition: transform var(--la-ease), box-shadow var(--la-ease); } #la-home .la-blog-card:hover { transform: translateY(-4px); box-shadow: var(--la-shadow-lg); text-decoration: none; } #la-home .la-blog-card__img { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--la-paper-lt); } #la-home .la-blog-card__img img { width: 100%; height: 100%; object-fit: cover; } #la-home .la-blog-card__placeholder { width: 100%; height: 100%; background: var(--la-paper-lt); } #la-home .la-blog-card__body { padding: 18px 20px 22px; } #la-home .la-blog-card__date { font-family: var(--la-font-body); font-size: 12px; color: var(--la-teak-lt); margin: 0 0 6px; } #la-home .la-blog-card__title { font-family: var(--la-font-head); font-size: 17px; font-weight: 700; color: var(--la-teak); margin: 0 0 8px; line-height: 1.3; } #la-home .la-blog-card__excerpt { font-family: var(--la-font-body); font-size: 14px; color: var(--la-teak-lt); margin: 0; line-height: 1.5; } /* CTA SECTION */ #la-home .la-cta { background: var(--la-teak); } #la-home .la-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } #la-home .la-cta__title { font-family: var(--la-font-head); font-size: clamp(22px, 3vw, 30px); color: #fff; margin: 0 0 8px; } #la-home .la-cta__body { font-family: var(--la-font-body); font-size: 15px; color: rgba(255,255,255,.75); margin: 0; max-width: 520px; line-height: 1.5; } #la-home .la-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; } /* BUTTONS */ #la-home .la-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 10px; font-family: var(--la-font-body); font-size: 14px; font-weight: 600; text-decoration: none; transition: all var(--la-ease); cursor: pointer; border: 2px solid transparent; white-space: nowrap; } #la-home .la-btn--primary { background: var(--la-accent); color: #fff; border-color: var(--la-accent); } #la-home .la-btn--primary:hover { background: var(--la-accent-dk); border-color: var(--la-accent-dk); text-decoration: none; color: #fff; } #la-home .la-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); } #la-home .la-btn--ghost:hover { border-color: #fff; text-decoration: none; color: #fff; } /* EMPTY STATE */ #la-home .la-empty { font-family: var(--la-font-body); color: var(--la-teak-lt); font-style: italic; } /* FOOTER */ .la-footer { background: var(--la-teak); color: rgba(255,255,255,.75); font-family: var(--la-font-body); } .la-footer a { color: rgba(255,255,255,.75); text-decoration: none; transition: color 0.15s ease; } .la-footer a:hover { color: #fff; } .la-footer__cta { background: var(--la-saffron); padding: 20px 0; } .la-footer__container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .la-footer__cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .la-footer__cta-text { color: #fff; font-size: 15px; } .la-footer__cta-text strong { display: block; font-size: 16px; margin-bottom: 2px; } .la-footer__cta-btn { display: inline-flex; align-items: center; padding: 10px 24px; background: #fff; color: var(--la-saffron) !important; border-radius: 8px; font-weight: 600; font-size: 14px; white-space: nowrap; transition: all 0.15s ease; } .la-footer__cta-btn:hover { background: var(--la-paper); color: var(--la-saffron) !important; } .la-footer__main { padding: 56px 0 40px; } .la-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .la-footer__logo img { height: 36px; width: auto; margin-bottom: 16px; } .la-footer__about { font-size: 14px; line-height: 1.6; margin: 0; color: rgba(255,255,255,.6); } .la-footer__heading { font-family: var(--la-font-body); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #fff; margin: 0 0 16px; } .la-footer__links { list-style: none; margin: 0; padding: 0; } .la-footer__links li { margin-bottom: 10px; } .la-footer__links li a { font-size: 14px; } .la-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; } .la-footer__bottom p { margin: 0; font-size: 13px; color: rgba(255,255,255,.4); } /* RESPONSIVE */ @media (max-width: 768px) { #la-home .la-search-form { flex-direction: column; border-radius: 12px; } #la-home .la-search-select { border-left: none; border-top: 1px solid #eee; max-width: none; } #la-home .la-search-btn { justify-content: center; border-radius: 0 0 12px 12px; } #la-home .la-cta__inner { text-align: center; justify-content: center; } #la-home .la-cta__actions { justify-content: center; width: 100%; } .la-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 480px) { #la-home .la-listing-grid, #la-home .la-blog-grid { grid-template-columns: 1fr; } .la-footer__grid { grid-template-columns: 1fr; gap: 28px; } } /* Fix duplicate H1 on homepage - keep only hero headline */ body.home .theme-breadcrumb-banner { display: none !important; } body.home .site-branding h1.site-title { font-size: 22px; } /* FIX: Map zero-width in flex container */ .directorist-single-map { width: 100%; } /* Hide Google Reviews placeholder (rows with no actual review text) */ li.directorist-review-single:not(:has(.directorist-review-single__content p)) { display: none !important; } /* Restore paragraph spacing inside review content (Directorist sets p {margin:0} globally) */ .directorist-review-single__content p { margin: 0 0 12px; } .directorist-review-single__content p:last-child { margin-bottom: 0; } /* ============================================= HOMEPAGE FIXES - April 2026 ============================================= */ /* Stats bar */ .la-stats-bar { background-color: #2b3a3c; padding: 40px 20px; } .la-stats-inner { display: flex; justify-content: center; gap: 80px; max-width: 1000px; margin: 0 auto; flex-wrap: wrap; } .la-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; } .la-stat-number { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 700; color: #1a7a8a; line-height: 1; } .la-stat-label { font-family: 'DM Sans', sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: #f2ede6; opacity: 0.8; } /* Hero - improve overlay so search bar and headline are legible */ .la-hero__overlay { background: rgba(0, 0, 0, 0.55) !important; } /* CTA "Own a business" section - cream background */ .la-cta { background-color: #f2ede6 !important; color: #2b3a3c !important; } .la-cta .la-cta__title, .la-cta .la-cta__body, .la-cta h2, .la-cta p { color: #2b3a3c !important; } /* Sign In - icon only, no border */ .theme-menu-action-box__login { border: none; padding: 6px 8px; color: #1a7a8a !important; font-weight: 500; transition: color 0.2s; } .theme-menu-action-box__login:hover { color: #D4A520 !important; } .theme-menu-action-box__login a.btn, .theme-menu-action-box__login a.btn:hover, .theme-menu-action-box__login a.btn:focus { border: none !important; box-shadow: none !important; background: transparent !important; padding: 4px 8px; } /* Area/location cards - enforce consistent height */ .la-loc-card { min-height: 72px; } .la-loc-card__name { font-size: 0.9rem; line-height: 1.3; } /* Category grid - center cards */ .la-cat-grid { justify-content: center; } /* Listing card titles - clamp to 2 lines */ .la-listing-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================= HOMEPAGE VISUAL FIXES - April 2026 round 2 ============================================= */ /* Fix 1 - Remove dark strip below stats bar */ .la-stats-bar { margin-bottom: 0; padding-bottom: 40px; } #la-home .la-categories { margin-top: 0; padding-top: 60px; } /* Fix 2 - Category cards: tighter padding, larger icons */ #la-home .la-cat-card { padding: 20px 12px; } #la-home .la-cat-card__icon { width: 40px; height: 40px; font-size: 36px; } #la-home .la-cat-card__name { font-size: 0.85rem; margin-top: 8px; } /* Fix 3 - Reduce gap between categories and area sections */ #la-home .la-categories { padding-bottom: 40px; } #la-home .la-locations { padding-top: 40px; } /* Fix 4 - Browse directory button: beat #la-home specificity */ #la-home .la-cta .la-btn--ghost { display: inline-block !important; border: 2px solid #2b3a3c !important; color: #2b3a3c !important; padding: 12px 24px !important; border-radius: 4px !important; background: transparent !important; font-weight: 500 !important; text-decoration: none !important; } #la-home .la-cta .la-btn--ghost:hover { background: #2b3a3c !important; color: #fdfbf8 !important; } /* Category/location page description - center align */ .la-tax-description a { color: #1a7a8a !important; text-decoration: underline; text-underline-offset: 2px; } .la-tax-description { text-align: center; max-width: 700px; margin: 0 auto 32px; font-family: 'DM Sans', sans-serif; /* was inheriting body's Roboto stack - siargaolocal declares this explicitly */ font-size: 1rem; line-height: 1.65; /* matches siargaolocal (was 1.6) */ color: #55696c; } /* ============================================= FRONTEND FIXES - April 2026 round 3 ============================================= */ /* Fix 1 - Hero headline: ensure "Koh Lanta" stays on one line on mobile */ @media (max-width: 768px) { #la-home .la-hero__headline { word-break: keep-all; } } /* Fix 2 - Mobile: move hamburger (theme-mobile-menu-trigger) to far right. The hamburger lives inside .theme-menu-container, which is a flex sibling of .theme-menu-action-box inside .theme-header-menu-full. Reorder on mobile. */ @media (max-width: 991px) { .theme-header-menu-full { display: flex; align-items: center; width: 100%; } .theme-header-menu-full .theme-header-logo-wrap { order: 1; } .theme-header-menu-full .theme-menu-action-box { order: 2; margin-left: auto; } .theme-header-menu-full .theme-menu-container { order: 3; flex: none; } /* Match logo's left offset. Logo sits at ~10-14px from the viewport edge (container padding). Give the hamburger a matching right breathing room so it mirrors the logo's placement. */ .theme-header-menu-full .theme-mobile-menu-trigger { margin-right: 4px; margin-left: 8px; } } /* Fix 3 - Stats bar: strict 2x2 grid */ .la-stats-inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: 32px 24px; max-width: 560px; margin: 0 auto; } .la-stats-inner .la-stat { width: auto; flex: unset; } /* =============================================================== Page design — all WordPress pages (page-template-default) Confirmed from template audit: content-page.php outputs #post-{ID}.hentry with the_content() directly inside — no .entry-content, no .theme-post-content wrapper. Posts use col-lg-8.offset-lg-2 (centred narrow column); pages get col-sm-12 (full width), so we constrain here. Rank Math FAQ renders: #rank-math-faq.rank-math-block > .rank-math-list > .rank-math-list-item > h3.rank-math-question + .rank-math-answer (no Gutenberg block wrapper classes) =============================================================== */ /* ---------------------------------------------------------- H2 section headings Scoped to .hentry to avoid touching banner h2 elements ---------------------------------------------------------- */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .page-template-default .hentry h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem; font-weight: 700; color: #1a7a8a; margin: 3rem 0 0.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid #f2ede6; line-height: 1.3; } */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .page-template-default .hentry h2:first-child { margin-top: 0; } */ /* H2 immediately after a FAQ block gets reduced top margin */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .page-template-default .hentry .rank-math-block + h2 { margin-top: 1.5rem; } */ /* ---------------------------------------------------------- H3 — used for FAQ questions and any inline subheadings Global h3 rule sets font-weight:600; color:--color-dark. Class selector wins specificity cleanly, no !important needed for most properties — but font-family needs it because the parent theme sets headings via a broad selector chain. ---------------------------------------------------------- */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .page-template-default .hentry h3 { font-family: 'DM Sans', sans-serif; font-size: 1.05rem; font-weight: 700; color: #2b3a3c; margin: 0 0 0.6rem; } */ /* ---------------------------------------------------------- Body text and links inside page content ---------------------------------------------------------- */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .page-template-default .hentry p { font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #2b3a3c; line-height: 1.8; margin-bottom: 0; } */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .page-template-default .hentry a:not(.la-loc-pill):not(.la-subcat-card) { color: #1a7a8a; text-decoration: underline; text-underline-offset: 2px; } */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .page-template-default .hentry a:not(.la-loc-pill):not(.la-subcat-card):hover { color: #e8a94d; } */ /* Directorist's own components (search results grid, /all-listings/, swiper slides, listing cards) sit inside .hentry on any page-template-default page, so the broad prose-link rule above was recolouring and underlining phone numbers, listing-card links and pagination numbers that were never meant to look like inline text links. Directorist's own component CSS already handles these correctly on its own - this just stops the generic rule from reaching them. Scoped to the archive/search wrapper specifically, not a blanket page-wide :not() exclusion, so any FUTURE Directorist component embedded elsewhere in page content still needs its own line here if it starts leaking too. */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .page-template-default .hentry .directorist-archive-contents a, .page-template-default .hentry .directorist-search-form a, .page-template-default .hentry .directorist-listings-wrapper a { color: inherit !important; text-decoration: none !important; } */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .page-template-default .hentry .directorist-archive-contents a:hover, .page-template-default .hentry .directorist-search-form a:hover, .page-template-default .hentry .directorist-listings-wrapper a:hover { color: inherit !important; } */ /* ---------------------------------------------------------- Rank Math FAQ block — outer container ---------------------------------------------------------- */ #rank-math-faq, .rank-math-block { margin-bottom: 0.5rem; } /* ---------------------------------------------------------- FAQ items ---------------------------------------------------------- */ .rank-math-list-item { border-bottom: 1px solid #f2ede6; padding: 1.5rem 0; } .rank-math-list-item:first-child { border-top: 1px solid #f2ede6; } /* ---------------------------------------------------------- FAQ question (h3.rank-math-question) Override global h3 font-family with !important since the parent theme sets headings via a multi-selector chain that outspecifics a single class alone. ---------------------------------------------------------- */ .rank-math-question { font-family: 'DM Sans', sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; color: #2b3a3c !important; margin: 0 0 0.6rem !important; line-height: 1.4; } /* ---------------------------------------------------------- FAQ answer text — inherits page p rules but reset margin so stacked paragraphs don't double-gap ---------------------------------------------------------- */ .rank-math-answer p { margin-bottom: 0.75rem; } .rank-math-answer p:last-child { margin-bottom: 0; } .rank-math-answer a { color: #1a7a8a; text-decoration: underline; text-underline-offset: 2px; } .rank-math-answer a:hover { color: #e8a94d; } /* EASY TABLE OF CONTENTS - SIDEBAR WIDGET */ .sidebar-widget-area .widget.ez-toc { background: #fff; border: 1.5px solid var(--la-paper); border-radius: var(--la-radius); padding: 22px 22px 18px; margin-bottom: 24px; box-shadow: var(--la-shadow); } .sidebar-widget-area .widget.ez-toc .widgettitle { font-family: var(--la-font-body); font-size: 12px; font-weight: 700; color: var(--la-teak); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 14px 0; padding: 0 0 10px 0; border-bottom: 1px solid var(--la-paper); } .sidebar-widget-area .widget.ez-toc .ez-toc-title { font-family: var(--la-font-body) !important; font-size: 12px !important; font-weight: 700 !important; color: var(--la-teak) !important; text-transform: uppercase; letter-spacing: 0.08em; } .sidebar-widget-area .widget.ez-toc .ez-toc-widget-container { background: transparent; border: none; padding: 0; box-shadow: none; } .sidebar-widget-area .widget.ez-toc ul.ez-toc-list, .sidebar-widget-area .widget.ez-toc ul.ez-toc-list ul { list-style: none; margin: 0; padding: 0; } .sidebar-widget-area .widget.ez-toc ul.ez-toc-list li { margin: 0; padding: 0; border: none; } .sidebar-widget-area .widget.ez-toc ul.ez-toc-list li a { display: block; font-family: var(--la-font-body) !important; font-size: 14px !important; font-weight: 400 !important; color: var(--la-teak-lt) !important; line-height: 1.4; padding: 7px 0 7px 12px; text-decoration: none; border-left: 2px solid transparent; transition: color var(--la-ease), border-color var(--la-ease), background var(--la-ease); } .sidebar-widget-area .widget.ez-toc ul.ez-toc-list li a:hover { color: var(--la-accent) !important; border-left-color: var(--la-saffron); background: var(--la-offwhite); } .sidebar-widget-area .widget.ez-toc ul.ez-toc-list li.active > a, .sidebar-widget-area .widget.ez-toc ul.ez-toc-list li a.active { color: var(--la-accent) !important; font-weight: 600 !important; border-left-color: var(--la-saffron); background: var(--la-paper-lt); } /* ═══════════════════════════════════════════════ LOCATION SWITCHER — /single-location/ pages ═══════════════════════════════════════════════ */ .la-loc-switcher { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 0 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .la-loc-switcher__label { font-family: var(--la-font-body); font-size: 13px; font-weight: 700; color: var(--la-teak); white-space: nowrap; flex-shrink: 0; } .la-loc-switcher__pills { display: flex; gap: 8px; flex-wrap: nowrap; } .la-loc-pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; background: #fff; border: 1.5px solid rgba(45, 41, 38, 0.12); border-radius: 20px; font-family: var(--la-font-body); font-size: 13px; font-weight: 500; color: var(--la-teak); text-decoration: none; white-space: nowrap; transition: all 0.18s ease; } .la-loc-pill:hover { border-color: var(--la-accent); color: var(--la-accent); text-decoration: none; } .la-loc-pill--active, .la-loc-pill--active:hover { background: var(--la-accent); border-color: var(--la-accent); color: #fff; } .la-loc-pill__count { font-size: 11px; opacity: 0.6; } /* --------------------------------------------------------------- Guides category posts - suppress meta, carry page design over to post context (post wrapper has .category-guides; content sits in .theme-post-body not .hentry) --------------------------------------------------------------- */ /* Hide post meta (date, category, read time) on Guides posts */ .category-guides .theme-post-meta { display: none !important; } /* Column width already constrained by theme's col-lg-8 for single posts. Max-width rule redundant - commented out. .category-guides .hentry { max-width: 860px; margin: 0 auto; padding: 3.5rem 2rem 4rem; } */ /* Typography - mirror the .page-template-default .hentry rules */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .category-guides .theme-post-body h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem; font-weight: 700; color: #1a7a8a; margin: 3rem 0 0.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid #f2ede6; line-height: 1.3; } */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .category-guides .theme-post-body h2:first-child { margin-top: 0; } */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .category-guides .theme-post-body .rank-math-block + h2 { margin-top: 1.5rem; } */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .category-guides .theme-post-body h3 { font-family: 'DM Sans', sans-serif; font-size: 1.05rem; font-weight: 700; color: #2b3a3c; margin: 0 0 0.6rem; } */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .category-guides .theme-post-body p { font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #2b3a3c; line-height: 1.8; margin-bottom: 0; } */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .category-guides .theme-post-body a { color: #1a7a8a; text-decoration: underline; text-underline-offset: 2px; } */ /* superseded by PMLABS-TYPE in Customizer Additional CSS (2026-08-13) .category-guides .theme-post-body a:hover { color: #e8a94d; } */ /* ═══════════════════════════════════════════════ 404 PAGE ═══════════════════════════════════════════════ */ .pm-404 { max-width: 720px; margin: 0 auto; padding: 80px 24px 100px; text-align: center; } .pm-404__heading { font-family: var(--la-font-head); font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--la-teak); margin: 0 0 16px; line-height: 1.15; } .pm-404__subhead { font-family: var(--la-font-body); font-size: 1.15rem; color: var(--la-teak-lt); line-height: 1.6; margin: 0 0 36px; max-width: 540px; margin-left: auto; margin-right: auto; } .pm-404__search { max-width: 460px; margin: 0 auto 48px; } .pm-404__search .search-form { display: flex; gap: 8px; } .pm-404__search .search-field { flex: 1; padding: 12px 16px; border: 2px solid var(--la-paper); border-radius: var(--la-radius); font-family: var(--la-font-body); font-size: 1rem; transition: border-color var(--la-ease); } .pm-404__search .search-field:focus { outline: none; border-color: var(--la-saffron-dk); } .pm-404__search .search-submit { padding: 12px 24px; background: var(--la-saffron); color: var(--la-white); border: none; border-radius: var(--la-radius); font-family: var(--la-font-body); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background var(--la-ease); } .pm-404__search .search-submit:hover { background: var(--la-saffron-dk); } .pm-404__links-title { font-family: var(--la-font-head); font-size: 1.35rem; color: var(--la-teak); margin: 0 0 20px; } .pm-404__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 48px; } .pm-404__card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; background: var(--la-offwhite); border-radius: var(--la-radius); text-decoration: none; color: var(--la-teak); font-family: var(--la-font-body); font-weight: 600; font-size: 0.95rem; transition: box-shadow var(--la-ease), transform var(--la-ease); } .pm-404__card:hover { box-shadow: var(--la-shadow); transform: translateY(-2px); color: var(--la-saffron-dk); text-decoration: none; } .pm-404__card-icon { font-size: 1.8rem; } .pm-404__recent { text-align: center; } .pm-404__post-list { list-style: none; padding: 0; margin: 0; } .pm-404__post-list li { padding: 12px 0; border-bottom: 1px solid var(--la-paper-lt); } .pm-404__post-list li:last-child { border-bottom: none; } .pm-404__post-list a { font-family: var(--la-font-body); font-size: 1.05rem; color: var(--la-saffron); text-decoration: none; transition: color var(--la-ease); } .pm-404__post-list a:hover { color: var(--la-saffron-dk); } /* ═══════════════════════════════════════════════ BREADCRUMBS ═══════════════════════════════════════════════ */ .la-breadcrumbs { background: var(--la-offwhite); border-bottom: 1px solid rgba(45, 41, 38, 0.06); padding: 10px 0; font-family: var(--la-font-body); font-size: 13px; } .la-breadcrumbs__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .la-breadcrumbs a { color: var(--la-teak-lt); text-decoration: none; transition: color 0.15s ease; } .la-breadcrumbs a:hover { color: var(--la-accent); } .la-crumb-sep { color: #ccc; margin: 0 8px; } .la-crumb-current { color: var(--la-teak); font-weight: 600; } /* ============================================= HEADER + STATS FIXES - April 30, 2026 ============================================= */ /* Header search icon: show only when viewport has room for it. Below 1200px the action-box + main menu (incl. Nightlife dropdown) line-wraps, so hide it there. Above 1200px there's room for everything. */ @media (max-width: 1199.98px) { .theme-menu-action-box__search { display: none !important; } } /* Fix 2: Stats bar - single row on desktop, 2x2 grid only on mobile. Overrides the earlier `grid-template-columns: 1fr 1fr` rule. */ @media (min-width: 768px) { .la-stats-inner { display: flex !important; flex-direction: row !important; justify-content: center; gap: 80px !important; max-width: 1100px !important; } } @media (max-width: 767px) { .la-stats-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 32px 24px !important; max-width: 360px !important; } } /* ============================================= Sticky sidebars (single listings + blog posts) Pure CSS, replaces mystickysidebar plugin ============================================= */ @media (min-width: 992px) { .directorist-sidebar, .sidebar-widget-area { position: sticky; top: var(--sticky-offset); align-self: flex-start; } } /* ============================================= ARCHIVE LAYOUT TIGHTENING (2026-05-05 Phase 7 - ported from SL Phase 5b) Removes excess vertical whitespace on category/location/tag archive pages. - #primary.content-area top padding 0 so breadcrumbs sit flush with header. - .directorist-archive-title margin-top 48px adds breathing room above H1 after breadcrumbs. margin-bottom 16px keeps the tax description close. - Hide empty .listing-with-sidebar__type-nav placeholder which otherwise consumes a 30px flex-gap row above the search bar. - .la-loc-switcher margin-bottom 32px sets the visible pills-to-search gap to 32px (was 24+30=54 with the type-nav row gap). - aside.listing-with-sidebar__sidebar display:block forces filter form and HAL location dropdown to stack vertically full-width inside the aside (Directorist default is inline-flex row which cramped them). Scoped to taxonomy archive bodies only - single posts & pages keep the original chrome spacing. ============================================= */ body.theme-dir-single_category #primary.content-area, body.theme-dir-single_location #primary.content-area, body.theme-dir-single_tag #primary.content-area { padding-top: 0; padding-bottom: 40px; } body.theme-dir-single_category .directorist-archive-title, body.theme-dir-single_location .directorist-archive-title, body.theme-dir-single_tag .directorist-archive-title { margin-top: 48px; margin-bottom: 16px; } body.theme-dir-single_category .listing-with-sidebar__wrapper > .listing-with-sidebar__type-nav, body.theme-dir-single_location .listing-with-sidebar__wrapper > .listing-with-sidebar__type-nav, body.theme-dir-single_tag .listing-with-sidebar__wrapper > .listing-with-sidebar__type-nav { display: none; } body.theme-dir-single_category .la-loc-switcher, body.theme-dir-single_location .la-loc-switcher, body.theme-dir-single_tag .la-loc-switcher { margin-bottom: 32px; padding-bottom: 0; } body.theme-dir-single_category aside.listing-with-sidebar__sidebar, body.theme-dir-single_location aside.listing-with-sidebar__sidebar, body.theme-dir-single_tag aside.listing-with-sidebar__sidebar { display: block; } .directorist-single-info-textarea .directorist-single-info__value a { color: var(--color-primary); text-decoration: underline; font-weight: 500; } .directorist-single-info-textarea .directorist-single-info__value a:hover { opacity: 0.8; } /* Site title: an

on the front page, a everywhere else, so a post or listing has its own title as the page's only H1. The parent theme emits an H1 unconditionally when no custom logo is set, which is why this only bites here - Siargao and Hoi An have logos. These rules reproduce the h1 rendering exactly (measured: 30px/700/block) so nothing moves. */ .site-branding .site-title { display: block; font-size: 30px; font-weight: 700; line-height: 1.2; margin: 0; color: rgb(26, 27, 41); } body.home .site-branding .site-title { font-size: 22px; } /* "Koh Lanta Local" is longer than "Siargao Local", and the theme caps the brand image at 130px wide - which renders the wordmark too small to read. Widened for this site only, matching the fix ported from chiangmailocal; the header bar has room and nothing else moves. */ .site-branding .custom-logo-link .custom-logo, .site-branding .custom-logo-link .custom-logo img, .theme-header-logo-brand .custom-logo, .theme-header-logo-brand .custom-logo img { max-width: 160px !important; width: 160px !important; height: auto !important; } /* NOTE: the selector above must NOT be `img.custom-logo`. LiteSpeed's WebP replacement wraps the logo in