/* ============================================================================ KLLD-TOURS-LISTING-2026 — "Andaman Index" ---------------------------------------------------------------------------- The ARCHIVE-SURFACE skin for the Khao Lak Tours listing (page IDs 1525 / 17123 / 17413 — EN/DE/FR). This is the sibling of, NOT a replacement for, the card-level "Emerald Daybreak" skin emitted inline from loop/grid.php (.klld-card). That skin styles the cards; THIS skin styles the page they live on: · a warm paper→mist atmosphere with a faint brand-green/gold mesh + grain · an editorial section-heading system for the Elementor H2 category titles (Snorkeling / Phang Nga Bay / Khao Sok / Phuket …) — Fraunces display over a JetBrains-Mono kicker rule with a green→gold tick and an extending hairline · grid rhythm + an orchestrated, reduced-motion-safe scroll reveal (.klld-tl-rise) SCOPE: every rule is prefixed with body.page-id-1525 / -17123 / -17413 so NOTHING leaks to other pages — in particular the related-tour grids that reuse loop/grid.php on single tour pages are untouched. Prefix .klld-tl- so it can't collide with the png- single-tour skin, the klld-card grid skin, or the klld-hdr header skin. Brand green #099024 / accent #ffcc00 only — never the deprecated #0b7016. No Inter. CSS-only: markup, hrefs, booking, wishlist hooks and aggregateRating microdata are all untouched. Fully reversible (delete this file + its enqueue function). ========================================================================== */ :root, body.page-id-1525, body.page-id-17123, body.page-id-17413{ --ktl-g:#099024; /* brand green */ --ktl-gd:#067a1d; /* deep/pressed green */ --ktl-g-ink:#0a5e1e; /* darkest green for small text on tint */ --ktl-y:#ffcc00; /* sun gold (sparingly) */ --ktl-y-deep:#c79100; /* gold for fine type on paper */ --ktl-ink:#23241f; /* deepest heading ink (warm near-black) */ --ktl-ink-2:#3a3f3a; /* body ink */ --ktl-soft:#5a635b; /* muted text */ --ktl-faint:#8a9088; /* dim micro-label */ --ktl-paper:#f6f4ee; /* warm paper base for the page surface */ --ktl-mist:#eef2ec; /* cool mist for the lower atmosphere */ --ktl-line:rgba(35,36,31,.12); --ktl-line-soft:rgba(35,36,31,.07); --ktl-line-g:rgba(9,144,36,.22); --ktl-disp:"Fraunces",Georgia,"Times New Roman",serif; --ktl-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif; --ktl-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace; } /* ========================================================================= 1. PAGE ATMOSPHERE — a designed surface, not flat white. We paint the page background (fixed mesh + grain) behind the content so the white cards read as objects floating on warm paper. Scoped to the body so it only paints these three pages. ========================================================================= */ body.page-id-1525, body.page-id-17123, body.page-id-17413{ background-color:var(--ktl-paper); } body.page-id-1525::before, body.page-id-17123::before, body.page-id-17413::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(60% 42% at 82% -6%, rgba(255,204,0,.12) 0, transparent 60%), radial-gradient(54% 46% at 12% 8%, rgba(9,144,36,.10) 0, transparent 62%), radial-gradient(80% 60% at 50% 116%, rgba(9,144,36,.09) 0, transparent 70%), linear-gradient(178deg, var(--ktl-paper) 0%, var(--ktl-paper) 42%, var(--ktl-mist) 100%); } /* fine grain over the mesh — keeps the gradients from looking flat/AI-smooth */ body.page-id-1525::after, body.page-id-17123::after, body.page-id-17413::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); } /* keep all real content above the painted surface */ body.page-id-1525 .elementor, body.page-id-1525 #main-content, body.page-id-17123 .elementor, body.page-id-17123 #main-content, body.page-id-17413 .elementor, body.page-id-17413 #main-content{ position:relative; z-index:1; } /* ========================================================================= 2. SECTION-HEADING SYSTEM — turn the plain Elementor H2 category titles into an editorial masthead. We only touch heading widgets that live on these pages. ========================================================================= */ body.page-id-1525 .elementor-widget-heading .elementor-heading-title, body.page-id-17123 .elementor-widget-heading .elementor-heading-title, body.page-id-17413 .elementor-widget-heading .elementor-heading-title{ font-family:var(--ktl-disp); color:var(--ktl-ink); font-weight:600; letter-spacing:-.018em; line-height:1.08; position:relative; padding-top:.7em; /* room for the kicker rule above */ } /* the kicker: a mono micro-rule with a green→gold tick, sitting above each title */ body.page-id-1525 .elementor-widget-heading .elementor-heading-title::before, body.page-id-17123 .elementor-widget-heading .elementor-heading-title::before, body.page-id-17413 .elementor-widget-heading .elementor-heading-title::before{ content:""; position:absolute; top:.22em; left:0; width:46px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--ktl-g) 0%, var(--ktl-g) 55%, var(--ktl-y) 100%); } /* extending hairline to the right of every section title — the "index rule" */ body.page-id-1525 .elementor-widget-heading, body.page-id-17123 .elementor-widget-heading, body.page-id-17413 .elementor-widget-heading{ position:relative; } /* H1 / hero heading (the top "Khao Lak Tours" masthead) gets the loudest type */ body.page-id-1525 .elementor-widget-heading h1.elementor-heading-title, body.page-id-17123 .elementor-widget-heading h1.elementor-heading-title, body.page-id-17413 .elementor-widget-heading h1.elementor-heading-title{ letter-spacing:-.028em; } /* ========================================================================= 3. GRID / SLIDER RHYTHM POLISH Light-touch: even gutters, a touch more vertical breathing between rows, and a soft top hairline framing each list-service block so categories feel indexed. We do NOT change Bootstrap column widths (theme + slider JS depend on them). ========================================================================= */ body.page-id-1525 .elementor-widget-st_list_service .service-list-wrapper, body.page-id-17123 .elementor-widget-st_list_service .service-list-wrapper, body.page-id-17413 .elementor-widget-st_list_service .service-list-wrapper{ position:relative; } /* add row breathing room on the GRID variant (slider rows are handled by swiper) */ body.page-id-1525 .st-list-service.grid .service-list-wrapper .row > [class*="col-"], body.page-id-17123 .st-list-service.grid .service-list-wrapper .row > [class*="col-"], body.page-id-17413 .st-list-service.grid .service-list-wrapper .row > [class*="col-"]{ margin-bottom:30px; } /* ========================================================================= 4. ORCHESTRATED SCROLL REVEAL JS adds .klld-tl-anim to (capability flag) and toggles .klld-tl-in on each .klld-card when it enters the viewport. We pre-hide cards ONLY when the flag is present, so no-JS users always see content. Stagger via --ktl-i index. ========================================================================= */ html.klld-tl-anim body.page-id-1525 .klld-card, html.klld-tl-anim body.page-id-17123 .klld-card, html.klld-tl-anim body.page-id-17413 .klld-card{ opacity:0; transform:translateY(22px) scale(.992); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--ktl-i, 0) * 70ms); will-change:opacity, transform; } html.klld-tl-anim body.page-id-1525 .klld-card.klld-tl-in, html.klld-tl-anim body.page-id-17123 .klld-card.klld-tl-in, html.klld-tl-anim body.page-id-17413 .klld-card.klld-tl-in{ opacity:1; transform:none; } /* section-heading reveal — title rises with its kicker */ html.klld-tl-anim body.page-id-1525 .elementor-widget-heading.klld-tl-rise .elementor-heading-title, html.klld-tl-anim body.page-id-17123 .elementor-widget-heading.klld-tl-rise .elementor-heading-title, html.klld-tl-anim body.page-id-17413 .elementor-widget-heading.klld-tl-rise .elementor-heading-title{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); } html.klld-tl-anim body.page-id-1525 .elementor-widget-heading.klld-tl-rise.klld-tl-in .elementor-heading-title, html.klld-tl-anim body.page-id-17123 .elementor-widget-heading.klld-tl-rise.klld-tl-in .elementor-heading-title, html.klld-tl-anim body.page-id-17413 .elementor-widget-heading.klld-tl-rise.klld-tl-in .elementor-heading-title{ opacity:1; transform:none; } /* ========================================================================= 5. REDUCED MOTION — honor the OS preference: no transforms, no transitions, everything visible. (The capability flag still applies but we neutralise it.) ========================================================================= */ @media (prefers-reduced-motion: reduce){ html.klld-tl-anim body.page-id-1525 .klld-card, html.klld-tl-anim body.page-id-17123 .klld-card, html.klld-tl-anim body.page-id-17413 .klld-card, html.klld-tl-anim body.page-id-1525 .elementor-widget-heading.klld-tl-rise .elementor-heading-title, html.klld-tl-anim body.page-id-17123 .elementor-widget-heading.klld-tl-rise .elementor-heading-title, html.klld-tl-anim body.page-id-17413 .elementor-widget-heading.klld-tl-rise .elementor-heading-title{ opacity:1 !important; transform:none !important; transition:none !important; } }