/* ============================================================ ThaiExplores Design Tokens — canonical, single source of truth. Loaded by every static prototype page (via a relative to this same file — it lives inside wordpress-theme/thaiexplores/ but is plain, portable CSS with zero WordPress/PHP dependency and zero external asset references, so both contexts can load the literal same file with no duplication and no drift risk) and by every WordPress template — either directly, or transitively via main.css's @import. This file defines VARIABLES ONLY — no selectors, no component rules, no img/opacity logic. That is deliberate: it is the one part of the design system that is 100% safe to attach to every template, including the 5 self-contained area templates that cannot safely load main.css itself (see docs/DESIGN_SYSTEM_V1.md §8 for the img.is-photo fade-in conflict this avoids). Every value below was already identical everywhere it appeared before this file existed — this is a consolidation of an existing, already-shipped system, not a new one. Changing a value here changes it everywhere this file is loaded. ============================================================ */ :root { /* ---- Colors ---- */ --ink:#17302A; --paper:#FAF6F0; --surface:#FFFFFF; --sand:#F1E4CC; /* Visual Polish V2 — a warm off-white for cards that otherwise sit as pure --surface white directly on a --sand section (e.g. the Weather Checker), so they read as "part of the same warm page" rather than a stark white rectangle. Barely off pure white — enough to soften the edge against --sand, not so warm it competes with --paper/--sand themselves or reduces text contrast. Not a blanket --surface replacement; applied only where a component is deliberately opted in. */ --surface-warm:#FFFCF7; --turquoise:#0E9C93; --turquoise-dark:#0B6E68; --turquoise-light:#DCF1EC; --mango:#DB7F2E; --mango-dark:#B5631F; --mango-light:#FBEAD2; --muted:#6A5F54; --terracotta-light:#F2E0D5; --terracotta-dark:#8C5A42; --line:rgba(23,48,42,0.12); /* ---- Typography ---- */ --font-display:'Fraunces', serif; --font-body:'Public Sans', sans-serif; --font-mono:'Space Mono', monospace; --fs-micro:10px; --fs-label:11px; --fs-small:12.5px; --fs-body:13px; --fs-lede:14.5px; --fs-title-std:15px; --fs-title-feat:19px; /* Fluid heading scale — same endpoints as the old fixed/breakpoint- jump values it replaced, now a smooth curve instead of visible jumps. See docs/DESIGN_SYSTEM_V2_ROADMAP.md Part A for the original unification of this scale. */ --fs-h3:clamp(19px, 17px + 0.5vw, 22px); --fs-h2:clamp(22px, 16px + 1.5vw, 32px); --fs-h1:clamp(33px, 27px + 1.7vw, 44px); /* ---- Radii ---- */ --radius-card:22px; --radius-sm:14px; --radius-tag:10px; --radius-button:100px; /* ---- Spacing ---- */ --space-xs:8px; --space-sm:16px; --space-md:20px; --space-lg:32px; --space-xl:48px; /* ---- Shadows ---- */ /* Layered card shadow: a tight near shadow (grounds the card) + a soft wide far shadow (lifts it off the page) — reads as one shadow, not two, but has more depth than a single blurred layer. Surface & Button Polish V1 added the inset top highlight (a soft-lit paper edge, not a glossy bevel) — outer depth is unchanged, so this reads as "premium printed module," not a stronger shadow. */ --shadow-card: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(34,29,24,.10), 0 14px 28px rgba(34,29,24,.10); --shadow-card-hover: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(34,29,24,.12), 0 20px 40px rgba(34,29,24,.16); /* ---- Transitions ---- */ /* The two values already used almost everywhere sitewide for interactive feedback (button/card hover+press, filter/background) and for slightly slower state changes (color, image zoom). Not force-applied to every transition in this pass — only documented and available; see docs/DESIGN_SYSTEM_V1.md for what still uses a literal duration and why. */ --transition-fast: .15s ease; --transition-standard: .2s ease; /* ---- Layout ---- */ --tap:48px; /* Horizontal gap between cards in every swipe/scroll carousel (.swipe-row, .promo-swipe, .disco-filter, etc.) — was already 14px everywhere this pattern is used. */ --gap-carousel:14px; /* ---- Desktop layout containers (Desktop Layout Consistency Audit V1) ---- Before this pass, three independently hand-maintained desktop widths existed: main.css's homepage/Areas Hub (1180px @1024px), the area-page generator's shared template (960px @1200px), and template-things-to-do.php's own copy (1080px @960px) — three different numbers, three different breakpoints, for what should be one editorial column. --container-content is that one column now; --container-wide is only for sections that deliberately want more room (the interactive map); --container-full is for genuine edge-to-edge treatments (e.g. the Nightlife feature banners already use the full 1180px outer width, wider than the padded content column inside .wrap). 1180px was kept rather than the audit brief's suggested 1180–1240px midpoint because it's already the most-polished, most-reviewed value in the codebase (the homepage) — extending an already-approved number to the rest of the site is lower-risk than introducing a new one. */ --container-content:1180px; --container-wide:1320px; --container-full:1600px; --gutter-desktop:48px; /* ---- Hero tiers (Product Consistency V1) ---- Exactly two hero families sitewide, replacing the ad-hoc per-page vh/min/max combinations. PAGE is the default for every hero page (Areas, Things to Do, the five area guides); LANDING is the homepage alone and stays somewhat more prominent without taking most of the first screen — it was 36vh/350-400 on mobile (41% of a 390x844 viewport) and is now 32vh/300-340 (36%). */ --hero-page-h:26vh; --hero-page-min:260px; --hero-page-max:310px; --hero-page-h-md:28vh; --hero-page-min-md:290px; --hero-page-max-md:340px; --hero-page-h-lg:26vh; --hero-page-min-lg:330px; --hero-page-max-lg:380px; --hero-landing-h:32vh; --hero-landing-min:320px; --hero-landing-max:370px; --hero-landing-h-md:32vh; --hero-landing-min-md:340px; --hero-landing-max-md:390px; --hero-landing-h-lg:30vh; --hero-landing-min-lg:350px; --hero-landing-max-lg:410px; /* Desktop Visual QA V1 fix-up — the single formula that insets a carousel row from the viewport. Previously duplicated as a literal calc() on .swipe-row/.reel-row's margin only; the carousel-arrow buttons used a flat -8px instead, which assumed the row's *wrapping* .carousel-shell carried the inset — it doesn't (the shell is intentionally full-bleed so the row's own margin is the only inset), so arrows floated in the gutter and, at 1024–1179px where the margin bottoms out at 48px, past the true viewport edge. One shared token drives both the row's margin and the arrows' position, so they always track the same edge — the arrows automatically follow any change here, no per-carousel hand-tuning. Visual Polish V2 (Carousel Width/Bleed pass) — swapped the target from --container-content to --container-full. Below ~1180px viewport this produces the exact same 48px gutter-floor inset as before (both formulas hit the floor identically at 1024–1180px, so nothing changes at the low end of desktop); above ~1180px the row now bleeds wider than the text column instead of stopping at it, which is the whole point — the section heading stays in --container-content, the carousel track alone gets the extra room, so it no longer feels squeezed inside the same narrow wrapper as the heading above it. */ --carousel-inset:max(var(--gutter-desktop), calc(50vw - (var(--container-full) / 2) + var(--gutter-desktop))); /* ---- Visual Polish V3 — controlled prototype (Homepage + Weather only). Two shared background-watermark tokens, both --ink at 2.8% fill-opacity (baked into the SVG itself, not a CSS opacity on the element, so it never competes with any text placed over it) — large, sparse, single-color, meant to be cropped by whatever section uses them via background-position/-size, never tiled. Centralized here (not duplicated per-page) so a later sitewide rollout reuses the same two assets rather than hand-copying new ones per page. Visual Approval + Finish V3 — reduced from the original 4% after a live screenshot review: at 4%, --ink's dark value against --paper's light cream still read as a visible soft grey shape at the ~220px size used, not the barely-there watermark the brief wanted. 2.8% is the same two assets, same size/position, just a quieter fill. */ --motif-island: the real Phuket coastline (same path data the interactive map already draws — see src/map/phuket-map-geometry.js's islandPath — reused verbatim, not redrawn), for area/geography- flavored sections. --motif-wave: a simple three-crest wave silhouette, for beach/discovery-flavored sections. ---- */ --motif-island: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='80 145 180 384'%3E%3Cpath d='M117.8,388.7L121.4,387.8L124.7,391.0L127.0,395.5L126.1,402.7L124.4,407.3L121.2,411.9L107.0,411.7L106.2,408.7L99.7,408.8L98.6,412.4L102.4,416.8L106.7,415.1L108.5,422.4L108.0,426.1L110.9,429.5L114.9,428.6L115.6,433.2L121.1,434.4L123.5,442.8L125.0,454.1L123.7,461.1L127.3,464.2L128.6,468.2L126.1,470.3L128.0,473.1L128.4,477.9L123.3,486.3L118.3,486.7L117.4,490.2L122.3,491.0L119.1,496.5L120.1,499.9L132.3,498.0L134.8,502.1L132.7,511.7L138.0,514.2L144.3,511.2L145.3,503.8L150.7,500.7L154.3,499.7L157.3,500.3L160.2,496.7L158.7,493.3L155.9,491.1L156.7,486.7L159.1,481.8L160.9,474.3L163.4,469.3L165.6,462.1L168.3,458.5L174.6,454.8L176.5,455.0L180.9,450.1L184.0,449.2L189.3,449.3L192.2,451.7L193.6,460.7L197.4,468.4L198.1,472.2L204.5,469.2L206.6,469.7L210.6,475.5L218.3,479.8L217.2,473.9L212.7,473.6L210.7,471.1L213.9,465.7L211.8,461.7L210.4,454.7L211.4,452.6L215.1,452.7L214.9,449.5L206.7,449.0L204.7,441.5L203.6,440.4L205.3,433.0L209.3,432.0L210.1,429.4L207.8,425.2L209.1,423.5L217.0,418.6L221.3,420.8L221.6,416.6L219.8,414.1L220.8,410.9L224.5,410.9L224.1,405.0L226.8,398.9L225.5,396.1L221.8,394.3L219.2,387.7L220.4,383.6L219.4,379.8L215.3,373.8L213.6,373.0L208.3,367.2L205.4,360.2L207.0,357.7L204.5,355.5L204.2,352.4L206.6,347.3L204.6,345.3L205.4,341.5L203.4,338.7L208.6,332.8L215.2,329.0L218.4,328.6L223.5,330.5L219.7,321.8L217.5,320.1L216.7,307.2L217.7,300.9L219.0,300.5L223.1,289.8L225.3,287.4L231.1,287.8L233.0,286.9L233.4,282.0L232.3,279.3L234.4,273.3L238.1,268.7L243.3,269.5L242.4,264.2L237.4,265.1L236.2,261.8L236.6,252.9L240.0,251.9L239.9,248.8L237.1,247.7L234.9,243.5L228.7,246.1L223.0,253.7L218.5,254.1L213.4,258.5L210.0,255.9L206.2,258.6L197.9,253.3L190.0,242.8L187.8,233.4L189.4,229.8L185.4,226.1L183.4,226.0L177.3,231.8L172.6,233.5L170.8,231.2L172.1,222.3L170.0,222.0L166.5,224.6L165.3,220.0L165.4,214.1L167.5,210.7L166.5,207.0L163.0,206.4L161.8,199.8L162.4,196.6L160.7,192.0L160.7,187.9L159.0,184.6L155.9,184.9L146.9,179.7L142.1,174.2L137.4,173.6L133.2,168.6L129.7,169.9L131.0,164.8L123.4,162.7L117.9,163.1L116.5,165.6L119.7,172.2L121.8,179.7L126.1,199.1L127.7,210.8L130.3,224.1L130.9,229.8L130.4,237.7L127.1,242.3L128.1,247.5L126.4,252.0L122.1,255.5L118.6,254.0L113.7,257.4L107.5,259.8L106.0,265.0L107.7,269.7L110.3,272.0L111.6,279.2L110.5,281.1L111.6,284.9L110.5,288.7L107.2,290.0L110.3,295.1L113.8,295.1L120.3,298.8L122.1,305.1L123.5,317.5L123.1,322.7L121.0,329.9L116.9,333.8L111.3,331.8L107.1,332.9L110.8,335.7L112.0,339.4L112.6,348.9L116.1,351.4L115.2,359.0L111.6,362.0L108.7,361.2L104.4,364.0L99.6,362.6L99.7,366.2L96.2,372.9L98.5,373.4L99.4,376.5L98.4,379.4L100.2,382.6L102.5,380.7L104.8,383.1L107.0,380.9L112.6,383.6L114.4,386.9L117.8,388.7Z' fill='%2317302A' fill-opacity='0.028'/%3E%3C/svg%3E"); --motif-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cpath d='M0,120 C60,80 120,160 180,120 C240,80 300,160 360,120 C420,80 480,160 540,120 C570,100 590,110 600,120 L600,200 L0,200 Z' fill='%2317302A' fill-opacity='0.028'/%3E%3C/svg%3E"); }