/* ═══════════════════════════════════════════════════════════════
Chee Chan — "Executive Playground" theme skin
Loaded only when Website Settings › site_theme = playground.
Cream–gold–deep-green palette over the shared component library.
═══════════════════════════════════════════════════════════════ */
.theme-playground {
--pg-cream: #f7f1e3;
--pg-cream-2: #efe6d2;
--pg-gold: #c9a55c;
--pg-gold-light: #edd39a; /* on dark/photo grounds */
--pg-gold-deep: #8f6f2e; /* on cream grounds */
--pg-green: #0b3d2e;
--pg-ink: #3d3427;
/* Brand face: geometric sans matching the Chee Chan wordmark (Futura-style).
Thai has no Jost glyphs, so a Thai-capable face follows in the stack. */
--pg-serif: 'Jost', 'Leelawadee UI', 'Noto Sans Thai', sans-serif;
}
/* ── Site-wide skin: warm ground + gold accents on every page ── */
body.theme-playground { background: var(--pg-cream); }
body.theme-playground .ccg-section { background-color: var(--pg-cream); }
body.theme-playground .ccg-section.light-alt { background-color: var(--pg-cream-2); }
body.theme-playground .ccg-sec-badge { background: var(--pg-gold); color: #fff; }
body.theme-playground .ccg-sec-title { font-family: var(--pg-serif); letter-spacing: 1px; }
body.theme-playground .ccg-sec-head .ccg-sec-title::after {
background: linear-gradient(90deg, var(--pg-gold), var(--pg-gold-deep));
}
body.theme-playground .ccg-sec-head .ccg-sec-badge::before,
body.theme-playground .ccg-sec-head .ccg-sec-badge::after {
background: linear-gradient(90deg, transparent, var(--pg-gold));
}
body.theme-playground .ccg-sec-head .ccg-sec-badge::after {
background: linear-gradient(270deg, transparent, var(--pg-gold));
}
body.theme-playground .ccg-btn-primary { background: var(--pg-gold); border-color: var(--pg-gold); }
body.theme-playground .ccg-btn-primary:hover { background: var(--pg-gold-deep); border-color: var(--pg-gold-deep); }
body.theme-playground .ccg-footer { --footer-bg: var(--pg-green); }
/* ── Hero ── */
/* The hero artwork is a composed scene (flag left, cart and sign right), so the
block takes the image's own 16:9 shape instead of a viewport height — that
way nothing at the edges is ever cropped away. */
.pg-hero {
position: relative; isolation: isolate;
/* Height is derived from the viewport WIDTH (56.25vw = 16:9), never from
aspect-ratio: pairing aspect-ratio with max-height makes the browser
shrink the width to match the capped height, which left a bare strip
down the right-hand side. Floor keeps the copy fitting; ceiling stops a
tall monitor turning the hero into a wall. */
height: clamp(700px, 56.25vw, 96vh);
display: flex; align-items: center; justify-content: center;
background-size: cover; background-position: center; text-align: center; overflow: hidden;
padding: 110px 20px 210px;
}
/* No colour grade over the hero — the artwork's own colours come through as-is. */
/* Scrim: a soft pool of shade behind the copy so the white + gold type stays
readable whichever photo an admin picks for the hero. */
/* Neutral shade behind the copy — darkens for legibility without tinting the
photo. A second pool sits under the play button so its gold label reads
against the bright fairway in the artwork. */
.pg-hero-ov {
position: absolute; inset: 0; z-index: 1;
background:
radial-gradient(30% 20% at 50% 72%, rgba(10,14,10,.5) 0%, rgba(10,14,10,0) 72%),
radial-gradient(56% 40% at 50% 34%, rgba(10,14,10,.46) 0%, rgba(10,14,10,.2) 55%, rgba(10,14,10,0) 78%),
linear-gradient(180deg, rgba(10,14,10,.36) 0%, rgba(10,14,10,.05) 48%, rgba(10,14,10,.2) 100%);
}
.pg-hero-inner { position: relative; z-index: 2; color: #fff; max-width: 760px; }
/* Title + kicker mirror the wordmark: bold "CHEE CHAN" over a lighter,
wide-tracked second line, exactly like "GOLF RESORT" sits under the logo. */
.pg-hero-title {
font-family: var(--pg-serif); font-weight: 700; margin: 0;
font-size: clamp(2.7rem, 8.8vw, 5.8rem); letter-spacing: 3px; line-height: 1.05;
text-transform: uppercase; white-space: nowrap;
background: linear-gradient(178deg, #ffffff 0%, #fdf6e4 46%, #f0d9a4 78%, #d9b263 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 4px 18px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(255,196,110,.28));
}
/* "GOLF RESORT" — the wordmark's small wide-tracked line */
.pg-hero-sub {
font-family: var(--pg-serif); font-weight: 400; color: rgba(255,250,240,.92);
font-size: clamp(.6rem, 1.5vw, .92rem); letter-spacing: 11px; text-transform: uppercase;
margin-top: 6px; padding-left: 11px;
text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.pg-hero-kicker {
font-family: var(--pg-serif); color: #e9be6b; font-weight: 500;
font-size: clamp(1rem, 2.9vw, 1.6rem); letter-spacing: 7px; text-transform: uppercase;
margin-top: 14px; padding-left: 7px; /* balance the trailing letter-space */
text-shadow: 0 2px 8px rgba(0,0,0,.75), 0 0 30px rgba(233,190,107,.3);
}
.pg-hero-tag {
display: flex; flex-direction: column; gap: 2px;
color: #fff; margin: 14px auto 26px; font-size: .96rem; line-height: 1.6;
text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 0 24px rgba(0,0,0,.55);
}
.pg-play {
display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
background: none; border: 0; cursor: pointer; color: #fff; text-decoration: none;
}
.pg-play-btn {
width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
background:
linear-gradient(160deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 48%, rgba(120,78,18,.35) 100%),
radial-gradient(circle at 34% 28%, #f4e0ae, #d9b263 52%, #ab7f2c 100%);
color: #fffaf0; font-size: 1.9rem; padding-left: 7px;
box-shadow:
0 0 0 3px rgba(255,250,240,.85),
0 0 0 8px rgba(217,178,99,.42),
0 14px 34px rgba(0,0,0,.45),
inset 0 2px 6px rgba(255,255,255,.5),
inset 0 -10px 18px rgba(90,58,12,.3);
transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.pg-play:hover .pg-play-btn {
transform: scale(1.06);
box-shadow: 0 0 0 3px #fffaf0, 0 0 0 11px rgba(217,178,99,.55), 0 18px 42px rgba(0,0,0,.5),
inset 0 2px 6px rgba(255,255,255,.55), inset 0 -10px 18px rgba(90,58,12,.3);
}
.pg-play-label {
font-family: var(--pg-serif);
color: #f2cf85; letter-spacing: 4px; text-transform: uppercase; font-weight: 600; font-size: 1rem;
padding-left: 4px;
text-shadow: 0 2px 8px rgba(0,0,0,.95), 0 0 20px rgba(0,0,0,.7), 0 0 42px rgba(0,0,0,.5);
}
/* Lotus divider with gold rules on each side (mockup ornament) */
.pg-ornament-hero { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pg-ornament-hero::before,
.pg-ornament-hero::after {
content: ''; width: clamp(48px, 9vw, 104px); height: 1px;
background: linear-gradient(90deg, transparent, rgba(233,190,107,.85));
}
.pg-ornament-hero::after { background: linear-gradient(270deg, transparent, rgba(233,190,107,.85)); }
/* Mascot (shows only when assets/playground/mascot.png exists) */
.pg-mascot { position: absolute; left: 4%; bottom: 60px; z-index: 3; display: flex; align-items: flex-start; gap: 6px; }
.pg-mascot img { width: clamp(120px, 16vw, 220px); height: auto; display: block; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.pg-mascot-trigger {
appearance: none; padding: 0; border: 0; background: transparent; color: inherit;
cursor: pointer; border-radius: 40%; touch-action: manipulation;
}
.pg-mascot-trigger:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.pg-mascot-trigger:hover img { filter: drop-shadow(0 14px 28px rgba(0,0,0,.4)) drop-shadow(0 0 12px rgba(233,190,107,.65)); }
.pg-mascot.is-greeting .pg-mascot-trigger { cursor: wait; }
.pg-mascot.is-greeting .pg-bubble { transform: scale(1.04); }
.pg-bubble {
background: #fff; border-radius: 16px 16px 16px 4px; padding: 10px 16px; max-width: 180px;
box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: .82rem; color: var(--pg-ink);
display: flex; flex-direction: column; gap: 2px; margin-top: 8px;
}
.pg-bubble b { color: var(--pg-green); }
.pg-bubble small { margin-top: 4px; color: var(--pg-gold-deep); font-size: .68rem; font-weight: 600; }
/* Curved transition into the cream body — cream dome rises at the centre
(mockup style); the Explore heading + lotus sit inside the dome. */
.pg-hero-curve {
position: absolute; left: 0; right: 0; bottom: -1px; height: 168px; z-index: 2; pointer-events: none;
}
.pg-hero-curve svg { width: 100%; height: 100%; display: block; }
.pg-curve-fill { fill: var(--pg-cream); }
.pg-curve-line {
stroke: url(#pgRule); stroke-width: 1.6; stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.pg-curve-echo {
stroke: url(#pgRule); stroke-width: 1; opacity: .45;
vector-effect: non-scaling-stroke;
}
/* A lotus medallion set into the gap at the crest: cream disc, gold ring, and
a ripple spreading from it like a flower on water. 18.2% is the path's y at
its midpoint, so the medallion tracks the line at any curve height. */
.pg-curve-mark {
position: absolute; left: 50%; top: 18.2%; transform: translate(-50%, -50%);
width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center; color: var(--pg-gold);
background: var(--pg-cream);
box-shadow: 0 0 0 1px rgba(201,165,92,.55), 0 6px 16px rgba(61,52,39,.18);
}
.pg-curve-mark::before {
content: ''; position: absolute; inset: -7px; border-radius: 50%;
border: 1px solid rgba(201,165,92,.5);
animation: pgRipple 4.6s ease-out infinite;
}
.pg-curve-mark svg {
position: relative; width: 26px; height: 18px; display: block;
animation: pgBloom 4.6s ease-in-out infinite; transform-origin: 50% 70%;
}
@keyframes pgBloom {
0%, 100% { transform: scale(1); opacity: .85; }
50% { transform: scale(1.14); opacity: 1; }
}
@keyframes pgRipple {
0% { transform: scale(.8); opacity: 0; }
30% { opacity: .85; }
100% { transform: scale(1.55); opacity: 0; }
}
/* ── Shared section headings (serif + gold) ── */
.pg-section { padding: 56px 0; background: var(--pg-cream); }
.pg-h2 {
font-family: var(--pg-serif); text-align: center; color: var(--pg-gold-deep); font-weight: 600;
font-size: clamp(1.3rem, 2.8vw, 1.85rem); letter-spacing: 4px; text-transform: uppercase; margin: 0 0 4px;
padding-left: 4px; text-wrap: unset;
}
@media (min-width: 769px) {
.pg-h2,
body.theme-playground .ccg-sec-title {
white-space: nowrap !important;
text-wrap: unset !important;
}
}
.pg-sub { text-align: center; color: #6f6552; margin: 0 0 30px; font-size: .85rem; }
/* ── Explore map ── */
/* Heading + lotus nestle inside the hero's cream dome */
/* Heading clears the lotus, which now lives on the curve line above it */
.pg-map-sec { margin-top: -76px; position: relative; z-index: 3; padding-top: 0; background: transparent; }
/* Three columns: labels flank the map, each icon disc turned toward it.
The map sits in the middle column with the "below the map" spots beneath it. */
.pg-map-wrap {
display: grid; grid-template-columns: 1fr minmax(0, 620px) 1fr;
grid-template-rows: auto auto; align-items: center;
gap: 0 18px; max-width: 1180px; margin: 0 auto;
}
.pg-map-left { grid-column: 1; grid-row: 1 / 3; }
.pg-map-stage { grid-column: 2; grid-row: 1; }
.pg-map-right { grid-column: 3; grid-row: 1 / 3; }
.pg-map-bottom { grid-column: 2; grid-row: 2; }
.pg-map-col { display: flex; flex-direction: column; justify-content: center; gap: 52px; }
/* Bowl arrangement: each column curves inward as it descends, so the pins
cradle the island and meet the centred pin below it (a ∪, not two bars).
Offsets grow quadratically — a straight ramp reads as a slant, not a curve. */
@media (min-width: 1025px) {
.pg-map-left .pg-spot:nth-child(1) { transform: translateX(4px); }
.pg-map-left .pg-spot:nth-child(2) { transform: translateX(22px); }
.pg-map-left .pg-spot:nth-child(3) { transform: translateX(66px); }
.pg-map-left .pg-spot:nth-child(4) { transform: translateX(96px); }
.pg-map-right .pg-spot:nth-child(1) { transform: translateX(-4px); }
.pg-map-right .pg-spot:nth-child(2) { transform: translateX(-22px); }
.pg-map-right .pg-spot:nth-child(3) { transform: translateX(-66px); }
.pg-map-right .pg-spot:nth-child(4) { transform: translateX(-96px); }
}
/* Island look: feathered edge + a contact shadow on the ground beneath it */
.pg-map-stage { position: relative; }
.pg-map-stage::before {
content: ''; position: absolute; left: 16%; right: 16%; bottom: 6%; height: 46px;
background: radial-gradient(50% 50% at 50% 50%, rgba(61,52,39,.34) 0%, rgba(61,52,39,0) 72%);
filter: blur(8px);
}
.pg-map-stage img {
position: relative; width: 100%; height: auto; display: block;
filter: drop-shadow(0 22px 26px rgba(61,52,39,.28)) saturate(1.06) contrast(1.03);
/* Egg shape at full size: the ellipse is inscribed in the image, so it meets
the middle of every edge — the widest oval the artwork allows. Only the
four corners (forest and sky) dissolve; the course itself stays whole. */
-webkit-mask-image: radial-gradient(52% 52% at 50% 50%, #000 76%, transparent 100%);
mask-image: radial-gradient(52% 52% at 50% 50%, #000 76%, transparent 100%);
}
/* Pins stack above the map. The image is position:relative (it carries the
drop shadow), so without this it paints over any pin the bowl curve pushes
inward — the pin looks fine but can't be hovered or clicked. */
.pg-spot { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; text-decoration: none; }
.pg-map-stage { z-index: 1; }
/* ══ Free placement: pins sit at their saved %-coords on the artwork ══
Applies at EVERY width — a phone/tablet shows the same map with the same
pins, not a card list. Coordinates are %, so they follow the image as it
scales; nothing is cropped, so a pin never drifts off its landmark.
Label behaviour differs by input device, not by width — an iPad Pro is
1366px wide but has no hover, so a width breakpoint would give it the
desktop treatment and its labels would never open:
• pointer: fine (mouse) → label box always visible
• hover: none (touch) → icon only; tap opens the box (.is-open) */
.pg-map-wrap.is-free {
display: block; position: relative;
width: min(880px, 68vh * 4 / 3); max-width: 100%; margin: 0 auto;
}
.pg-map-wrap.is-free .pg-map-stage { max-width: 100%; margin: 0; }
.pg-map-wrap.is-free .pg-map-col,
.pg-map-wrap.is-free .pg-map-bottom { display: contents; }
.pg-map-wrap.is-free .pg-spot {
position: absolute; transform: translate(-50%, -50%); z-index: 3;
flex-direction: column; text-align: center; gap: 5px;
width: max-content; max-width: 170px;
}
.pg-map-wrap.is-free .pg-spot-ic { width: calc(50px * var(--pin-k, 1)); height: calc(50px * var(--pin-k, 1)); }
.pg-map-wrap.is-free .pg-spot-ic svg { width: calc(23px * var(--pin-k, 1)); height: calc(23px * var(--pin-k, 1)); }
.pg-map-wrap.is-free .pg-spot-tx {
align-items: center; background: rgba(255,253,248,.94); border-radius: 10px;
padding: 4px 10px; box-shadow: 0 6px 16px rgba(61,52,39,.25); backdrop-filter: blur(3px);
}
.pg-map-wrap.is-free .pg-spot-tx b { font-size: .74rem; letter-spacing: .4px; }
.pg-map-wrap.is-free .pg-spot-tx small { display: none; }
/* The island keeps its feathered edge here too. An earlier note claimed the
mask would clip the pins — it can't: the pins are siblings of .pg-map-stage
(the columns use display:contents), so masking the image never touches them. */
.pg-map-wrap.is-free .pg-map-stage::before { content: none; }
/* ── Mouse: labels always on, note appears on hover ───────────────────── */
@media (hover: hover) and (pointer: fine) {
.pg-map-wrap.is-free .pg-spot:hover,
.pg-map-wrap.is-free .pg-spot:focus-visible { z-index: 6; }
.pg-map-wrap.is-free .pg-spot:hover .pg-spot-tx small,
.pg-map-wrap.is-free .pg-spot:focus-visible .pg-spot-tx small { display: block; }
}
/* ── Touch (phone + iPad): icon only until tapped ─────────────────────── */
@media (hover: none) {
/* Bigger tap target than the disc itself — 44px is the accessible minimum
and pins can sit close together on a busy map */
.pg-map-wrap.is-free .pg-spot { padding: 3px; }
.pg-map-wrap.is-free .pg-spot-ic { width: calc(46px * var(--pin-k, 1)); height: calc(46px * var(--pin-k, 1)); }
.pg-map-wrap.is-free .pg-spot-ic svg { width: calc(22px * var(--pin-k, 1)); height: calc(22px * var(--pin-k, 1)); }
/* Hidden, not display:none — it animates in and keeps its place in the
layout calculation so the box never jumps on first open */
.pg-map-wrap.is-free .pg-spot-tx {
position: absolute; top: calc(100% + 6px); left: 50%;
transform: translate(-50%, 4px); width: max-content; max-width: 46vw;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .16s ease, transform .16s ease;
padding: 7px 12px; box-shadow: 0 10px 24px rgba(61,52,39,.3);
}
.pg-map-wrap.is-free .pg-spot.is-open { z-index: 8; }
.pg-map-wrap.is-free .pg-spot.is-open .pg-spot-tx {
opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.pg-map-wrap.is-free .pg-spot.is-open .pg-spot-tx small { display: block; }
.pg-map-wrap.is-free .pg-spot.is-open .pg-spot-ic {
box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 8px 18px rgba(61,52,39,.4);
}
/* Little pointer joining box to pin */
.pg-map-wrap.is-free .pg-spot-tx::before {
content: ''; position: absolute; bottom: 100%; left: 50%; margin-left: -6px;
border: 6px solid transparent; border-bottom-color: rgba(255,253,248,.94);
}
/* Pins low on the map open upward so the box stays on screen */
.pg-map-wrap.is-free .pg-spot.is-low .pg-spot-tx {
top: auto; bottom: calc(100% + 6px); transform: translate(-50%, -4px);
}
.pg-map-wrap.is-free .pg-spot.is-low.is-open .pg-spot-tx { transform: translate(-50%, 0); }
.pg-map-wrap.is-free .pg-spot.is-low .pg-spot-tx::before {
bottom: auto; top: 100%; border-bottom-color: transparent;
border-top-color: rgba(255,253,248,.94);
}
/* Pins near an edge: shift the box inward instead of letting it clip */
.pg-map-wrap.is-free .pg-spot.is-edge-l .pg-spot-tx { left: 0; transform: translate(0, 4px); }
.pg-map-wrap.is-free .pg-spot.is-edge-l.is-open .pg-spot-tx { transform: translate(0, 0); }
.pg-map-wrap.is-free .pg-spot.is-edge-l .pg-spot-tx::before { left: 24px; }
.pg-map-wrap.is-free .pg-spot.is-edge-r .pg-spot-tx { left: auto; right: 0; transform: translate(0, 4px); }
.pg-map-wrap.is-free .pg-spot.is-edge-r.is-open .pg-spot-tx { transform: translate(0, 0); }
.pg-map-wrap.is-free .pg-spot.is-edge-r .pg-spot-tx::before { left: auto; right: 24px; }
}
/* Phones: smaller discs so six pins still breathe on a 360px screen */
@media (hover: none) and (max-width: 640px) {
.pg-map-wrap.is-free .pg-spot-ic { width: calc(38px * var(--pin-k, 1)); height: calc(38px * var(--pin-k, 1)); }
.pg-map-wrap.is-free .pg-spot-ic svg { width: calc(18px * var(--pin-k, 1)); height: calc(18px * var(--pin-k, 1)); }
.pg-map-wrap.is-free .pg-spot-tx { max-width: 62vw; padding: 6px 10px; }
.pg-map-wrap.is-free .pg-spot-tx b { font-size: .8rem; }
}
/* Left column: text outward (left), disc inward (right) */
.pg-map-left .pg-spot { flex-direction: row-reverse; text-align: right; justify-content: flex-start; }
/* Right column: disc inward (left), text outward (right) */
.pg-map-right .pg-spot { text-align: left; justify-content: flex-start; }
/* Below the map: text sits under the disc */
.pg-map-bottom { display: flex; justify-content: center; gap: 40px; margin-top: 6px; }
.pg-map-bottom .pg-spot { flex-direction: column; text-align: center; gap: 8px; }
/* Disc: colour + top-light shading, white rim, thin gold ring, layered shadow */
.pg-spot-ic {
--disc: var(--pg-gold);
width: calc(64px * var(--pin-k, 1)); height: calc(64px * var(--pin-k, 1)); border-radius: 50%; flex: 0 0 auto; position: relative;
display: grid; place-items: center; color: #fff; border: 0;
background:
linear-gradient(158deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.22) 100%),
var(--disc);
box-shadow:
0 0 0 3px #fffdf8,
0 0 0 4.5px rgba(185,138,60,.55),
0 10px 20px rgba(61,52,39,.26),
inset 0 2px 5px rgba(255,255,255,.4),
inset 0 -7px 14px rgba(0,0,0,.2);
transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.pg-spot-ic svg { width: calc(29px * var(--pin-k, 1)); height: calc(29px * var(--pin-k, 1)); display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.pg-spot-ic img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.pg-spot:hover .pg-spot-ic {
transform: translateY(-3px) scale(1.06);
box-shadow:
0 0 0 3px #fffdf8,
0 0 0 5px rgba(185,138,60,.9),
0 16px 28px rgba(61,52,39,.34),
inset 0 2px 5px rgba(255,255,255,.45),
inset 0 -7px 14px rgba(0,0,0,.2);
}
.pg-spot-tx { display: flex; flex-direction: column; gap: 3px; line-height: 1.4; min-width: 0; max-width: 210px; }
.pg-spot-tx b {
font-size: .9rem; letter-spacing: .8px; text-transform: uppercase;
color: var(--label, var(--pg-green)); transition: color .18s ease;
}
.pg-spot-tx small { color: #6f6552; font-size: .76rem; }
.pg-spot:hover .pg-spot-tx b { color: var(--pg-green); }
/* Admin-selectable disc colours — the label picks up a darker tone of the same hue */
.pg-c-green { --disc-c: #2f7d4f; --label-c: #1f6b41; }
.pg-c-blue { --disc-c: #2471a3; --label-c: #17567f; }
.pg-c-purple { --disc-c: #6d4b9e; --label-c: #533a7b; }
.pg-c-violet { --disc-c: #7d3f98; --label-c: #602e75; }
.pg-c-orange { --disc-c: #d08a2d; --label-c: #97621a; }
.pg-c-red { --disc-c: #c0392b; --label-c: #96291d; }
.pg-c-gold { --disc-c: #b98a3c; --label-c: #8a6526; }
.pg-c-teal { --disc-c: #12776e; --label-c: #0c5b55; }
.pg-spot[class*="pg-c-"] .pg-spot-ic { --disc: var(--disc-c); }
.pg-spot[class*="pg-c-"] .pg-spot-tx b { --label: var(--label-c); }
/* ── Choose Your Day ── */
.pg-journeys-box {
background: #fffdf8; border: 1px solid #e7dcc4; border-radius: 24px;
padding: 42px 32px; box-shadow: 0 18px 48px rgba(61,52,39,.1);
}
.pg-journey-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
/* Full-bleed photo with its tint washing up from the bottom; the copy and the
▶ badge sit on that wash — one piece, not a photo stacked on a colour block. */
.pg-jcard {
--tint: #0d4a34;
position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
text-decoration: none; background: var(--tint); display: block;
box-shadow: 0 10px 26px rgba(61,52,39,.2); transition: transform .18s ease, box-shadow .18s ease;
}
.pg-jcard:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(61,52,39,.3); }
.pg-jcard-img { position: absolute; inset: 0; }
.pg-jcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-jcard-body {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
display: flex; align-items: flex-end; gap: 10px;
padding: 42px 12px 14px; color: #fff;
/* Fallback first for browsers without color-mix() */
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 42%, var(--tint) 100%);
background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--tint) 78%, transparent) 42%, var(--tint) 100%);
}
.pg-jcard-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pg-jcard-body b {
display: flex; align-items: center; gap: 6px;
font-family: var(--pg-serif); font-size: .84rem; font-weight: 600;
letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.25;
}
.pg-jcard-mark { width: 15px; height: 11px; flex: 0 0 auto; color: rgba(255,255,255,.75); }
.pg-jcard-body span { font-size: .72rem; color: rgba(255,255,255,.8); line-height: 1.4; }
.pg-jcard-go {
flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
display: grid; place-items: center; font-size: .68rem; padding-left: 2px;
background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.6); color: #fff;
transition: background .18s ease, transform .18s ease;
}
.pg-jcard:hover .pg-jcard-go { background: rgba(255,255,255,.3); transform: scale(1.08); }
/* Each journey keeps its own tint, cycling like the approved layout */
.pg-jcard:nth-child(2) { --tint: #163a55; }
.pg-jcard:nth-child(3) { --tint: #452a51; }
.pg-jcard:nth-child(4) { --tint: #6b4218; }
.pg-jcard:nth-child(5) { --tint: #12203a; }
/* ── Live status bar ── */
.pg-status {
display: flex; flex-wrap: wrap; align-items: center; gap: 20px 30px;
background: #fffdf8; border: 1px solid #e7dcc4; border-radius: 18px; padding: 18px 26px;
box-shadow: 0 12px 32px rgba(61,52,39,.1);
}
.pg-st { display: flex; flex-direction: column; gap: 2px; font-weight: 700; color: var(--pg-ink); font-size: .84rem; }
.pg-st small { font-weight: 600; color: #8a7f6a; font-size: .64rem; letter-spacing: 1px; text-transform: uppercase; }
.pg-st-sub { font-weight: 500; color: #8a7f6a; font-size: .7rem; }
.pg-st-head b { font-family: var(--pg-serif); color: var(--pg-green); letter-spacing: 1.4px; text-transform: uppercase; font-size: .76rem; }
.pg-st-head a { color: var(--pg-gold-deep); font-size: .72rem; text-decoration: none; font-weight: 600; }
/* Hairline rules between readings, as in the approved layout */
@media (min-width: 1025px) {
.pg-status > .pg-st + .pg-st { border-left: 1px solid #e7dcc4; padding-left: 30px; }
}
.pg-st-head a:hover { text-decoration: underline; }
.pg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; }
.pg-dot.pg-ok { background: #1e9e64; } .pg-dot.pg-busy { background: #d99a1b; } .pg-dot.pg-closed { background: #c2402f; }
.pg-book {
margin-left: auto; background: var(--pg-gold); color: #fff; text-decoration: none;
border-radius: 10px; padding: 11px 22px; font-family: var(--pg-serif);
font-weight: 600; letter-spacing: 1.4px; font-size: .78rem;
text-transform: uppercase; box-shadow: 0 8px 22px rgba(169,133,62,.4); transition: background .18s ease;
}
.pg-book:hover { background: var(--pg-gold-deep); color: #fff; }
/* Status + booking read as one zone (no double section gap) */
.pg-status-sec { padding-bottom: 20px; }
/* ── Booking section on the playground flow ──
The estate booking card pulls itself up (-80px) to overlap the hero;
here it follows the status bar, so it must sit in normal flow + match the skin. */
body.theme-playground .ccg-booking-row { margin-top: 0; padding: 0 24px 40px; }
body.theme-playground .ccg-booking-widget {
background: #fffdf8; border: 1px solid #e7dcc4;
box-shadow: 0 14px 36px rgba(61,52,39,.12);
}
body.theme-playground .ccg-booking-soon-badge { background: rgba(201,165,92,.16); color: var(--pg-gold-deep); }
/* Status bar polish: divider after the heading, aligned numbers */
.pg-status { font-variant-numeric: tabular-nums; }
.pg-st-head { padding-right: 26px; border-right: 1px solid #e7dcc4; }
@media (max-width: 860px) {
.pg-st-head { border-right: 0; padding-right: 0; border-bottom: 1px solid #e7dcc4; padding-bottom: 12px; }
}
/* Hero lotus divider (between kicker and tagline) */
.pg-ornament-hero { margin: 12px 0 0; color: #e9be6b; filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.pg-ornament-hero svg { width: 26px; height: 18px; }
/* ── Brand tagline strip above the footer ── */
.pg-strip {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
background: var(--pg-green); color: var(--pg-gold); padding: 16px 20px;
font-family: var(--pg-serif); font-size: .88rem; letter-spacing: 3px; text-transform: uppercase;
}
.pg-strip-dot { color: rgba(201,165,92,.55); }
.pg-strip-lotus { display: inline-flex; margin-right: 4px; }
/* ── Video overlay (Start Your Day) ── */
.pg-video-ov {
position: fixed; inset: 0; z-index: 4000; background: rgba(8,20,16,.94);
display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pg-video-ov[hidden] { display: none; }
.pg-video-frame { width: min(1000px, 100%); aspect-ratio: 16 / 9; }
.pg-video-frame iframe,
.pg-video-frame video { width: 100%; height: 100%; border: 0; border-radius: 12px; display: block; background: #000; }
.pg-video-close {
position: absolute; top: 18px; right: 24px; background: rgba(255,255,255,.12); border: 0;
color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
/* ── Responsive ── */
@media (max-width: 960px) {
.pg-journey-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The mascot is the theme's signature greeting — it belongs on phones too
(that's where most visitors are). Scale it down instead of hiding it, and
keep it clear of the "Start your day" copy above it. */
.pg-mascot { left: 3%; bottom: 44px; }
.pg-mascot img { width: clamp(76px, 16vw, 116px); }
.pg-bubble { max-width: 126px; font-size: .68rem; padding: 7px 10px; border-radius: 12px 12px 12px 3px; }
.pg-bubble b { font-size: .76rem; }
.pg-bubble small { font-size: .6rem; }
}
@media (max-width: 820px) {
/* On a phone the bubble competes with the hero copy for the same space */
.pg-bubble { display: none; }
.pg-mascot { bottom: 52px; }
.pg-mascot img { width: clamp(66px, 19vw, 96px); }
}
@media (max-width: 1024px) {
/* Not enough width to flank the map → one grid: map on top, spots as cards.
display:contents lets the three groups' cards flow into the same grid so
they align in even rows instead of orphaning one card per group. */
.pg-map-wrap:not(.is-free) {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none;
max-width: 620px; gap: 12px; align-items: stretch;
}
.pg-map-wrap:not(.is-free) .pg-map-col,
.pg-map-wrap:not(.is-free) .pg-map-bottom { display: contents; }
.pg-map-wrap:not(.is-free) .pg-map-stage { grid-column: 1 / -1; grid-row: auto; order: -1; margin-bottom: 8px; }
/* Tablets use the phone tile: icon on top, label under it, two per row */
.pg-map-wrap:not(.is-free) .pg-spot {
grid-column: auto; flex-direction: column; align-items: center; text-align: center; gap: 8px;
background: #fffdf8; border: 1px solid #e7dcc4; border-radius: 14px; padding: 18px 12px;
}
.pg-map-wrap:not(.is-free) .pg-spot .pg-spot-tx { align-items: center; }
/* The "below the map" group spans the full width (it is the odd one out).
NB: :nth-of-type counts within each group's own element, not the grid —
using it here would fire once per group. */
.pg-map-wrap:not(.is-free) .pg-map-bottom .pg-spot { grid-column: 1 / -1; }
.pg-map-wrap:not(.is-free) .pg-spot-ic { width: calc(48px * var(--pin-k, 1)); height: calc(48px * var(--pin-k, 1)); }
.pg-map-wrap:not(.is-free) .pg-spot-ic svg { width: calc(24px * var(--pin-k, 1)); height: calc(24px * var(--pin-k, 1)); }
.pg-map-wrap:not(.is-free) .pg-spot-tx { max-width: none; }
}
@media (max-width: 640px) {
/* Phones: same tile, tightened up for the narrower screen */
.pg-map-wrap:not(.is-free) .pg-spot { padding: 16px 10px; }
.pg-map-wrap:not(.is-free) .pg-spot .pg-spot-tx b { font-size: .82rem; letter-spacing: .5px; }
.pg-map-wrap:not(.is-free) .pg-spot .pg-spot-tx small { font-size: .72rem; }
.pg-map-wrap:not(.is-free) { gap: 10px; }
}
/* Tablets: the status strip wraps into a tidy grid instead of one tall column */
@media (max-width: 1024px) {
.pg-status {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px 20px; align-items: start;
}
.pg-st-head {
grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between;
border-right: 0; padding-right: 0; padding-bottom: 12px; border-bottom: 1px solid #e7dcc4;
}
.pg-book { grid-column: 1 / -1; margin-left: 0; text-align: center; }
}
@media (max-width: 560px) {
.pg-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.pg-journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Phones are far from 16:9 — let the content set the height there */
.pg-hero { height: auto; min-height: 74vh; padding: 100px 18px 140px; }
.pg-hero-curve { height: 96px; }
.pg-hero-title { letter-spacing: 3px; }
.pg-curve-mark { width: 38px; height: 38px; }
.pg-curve-mark svg { width: 22px; height: 15px; }
}
/* ── Explore heading vs the hero dome ───────────────────────────────────
The heading is designed to sit inside the cream dome. The dome narrows
towards its sides, so below ~1025px the wide-tracked heading starts to
overhang it and the outer letters land on the green hero — gold on green,
unreadable. Two stages: tighten the tracking first, then on tablets and
phones drop the heading below the curve where the cream runs full width. */
@media (max-width: 1024px) {
.pg-map-sec .pg-h2 { letter-spacing: 2px; }
}
@media (max-width: 768px) {
.pg-map-sec { margin-top: -18px; padding-top: 22px; }
.pg-map-sec .pg-h2 { font-size: clamp(1rem, 4.4vw, 1.25rem); letter-spacing: 1.5px; }
.pg-map-sec .pg-sub { margin-bottom: 20px; }
}
/* ══ One surface language for every section in this theme ══
Estate sections keep their markup; here they inherit the playground's
ivory card, gold hairlines, brand type and gold emphasis so the page reads
as a single design rather than two themes stacked. */
body.theme-playground .ccg-card,
body.theme-playground .ccg-rates-card,
body.theme-playground .ccg-menu-item,
body.theme-playground .ccg-booking-widget,
body.theme-playground .ccg-contact-item,
body.theme-playground #academyRates {
background: #fffdf8; border: 1px solid #e7dcc4;
box-shadow: 0 12px 32px rgba(61,52,39,.1);
}
body.theme-playground .ccg-card { border-radius: 16px; }
/* Rates panel — the theme's headline surface */
body.theme-playground .ccg-rates-card { border-radius: 22px; padding: 44px; }
body.theme-playground .ccg-rates-title {
font-family: var(--pg-serif); font-weight: 600; color: var(--pg-gold-deep);
font-size: clamp(1.3rem, 2.8vw, 1.85rem); letter-spacing: 3px; text-transform: uppercase;
padding-left: 3px;
}
body.theme-playground .ccg-rates-subtitle { color: #6f6552; letter-spacing: 1.6px; }
body.theme-playground .ccg-rates-col { border-top: 2px solid var(--pg-gold); }
body.theme-playground .ccg-rates-col h4 {
font-family: var(--pg-serif); font-weight: 600; color: var(--pg-green); letter-spacing: 2px;
}
body.theme-playground .ccg-rate-row { border-bottom: 1px solid #e7dcc4; }
body.theme-playground .ccg-rate-row span { color: #6f6552; }
body.theme-playground .ccg-rate-row strong {
font-family: var(--pg-serif); font-weight: 600; color: var(--pg-gold-deep);
font-variant-numeric: tabular-nums;
}
body.theme-playground .ccg-rates-note { color: #8a7f6a; }
/* Cards, tabs, contact + forms pick up the same gold-on-ivory treatment */
body.theme-playground .ccg-card-badge { background: var(--pg-gold); color: #fff; }
body.theme-playground .ccg-card-body h3,
body.theme-playground .ccg-menu-item h4,
body.theme-playground .ccg-contact-item h5 { font-family: var(--pg-serif); letter-spacing: .6px; }
body.theme-playground .ccg-card-price,
body.theme-playground .ccg-card-link { color: var(--pg-gold-deep); }
body.theme-playground .ccg-card:hover .ccg-card-link { color: var(--pg-green); }
body.theme-playground .ccg-contact-icon { background: rgba(201,165,92,.16); }
body.theme-playground .ccg-tab-btn.active { background: var(--pg-gold); border-color: var(--pg-gold); color: #fff; }
body.theme-playground .ccg-form-field input:focus,
body.theme-playground .ccg-form-field select:focus,
body.theme-playground .ccg-form-field textarea:focus { border-color: var(--pg-gold); }
body.theme-playground .ccg-modal-box { background: #fffdf8; }
/* Section titles across the site use the brand face, not just the map ones */
body.theme-playground .ccg-sec-title { font-weight: 600; letter-spacing: 3px; text-transform: uppercase; }
body.theme-playground .ccg-sec-desc { color: #6f6552; }
/* Dark sections (Tournaments, Gallery) keep their night palette — these must
out-rank the ivory rules above, which carry an extra element selector. */
body.theme-playground .ccg-section.dark {
background: linear-gradient(180deg, #06231a 0%, #0b3d2c 100%) !important;
color: #ffffff !important;
}
body.theme-playground .ccg-section.dark .ccg-sec-badge {
background: rgba(201,165,92,.22) !important;
color: var(--pg-gold-light, #edd39a) !important;
border: 1px solid rgba(201,165,92,.4) !important;
}
body.theme-playground .ccg-section.dark .ccg-sec-title {
color: #ffffff !important;
}
body.theme-playground .ccg-section.dark .ccg-sec-desc {
color: rgba(255,255,255,0.85) !important;
}
body.theme-playground .ccg-section.dark .ccg-card {
background: rgba(255,255,255,.06); border: 1px solid rgba(201,165,92,.3); box-shadow: 0 12px 30px rgba(0,0,0,.35);
border-radius: 20px;
}
body.theme-playground .ccg-section.dark .ccg-card-link { color: var(--pg-gold-light, #edd39a); font-weight: 600; }
body.theme-playground .ccg-section.dark .ccg-card:hover .ccg-card-link { color: #fff; }
body.theme-playground .ccg-section.dark .ccg-card-body h3 { color: #fff; font-size: 1.2rem; }
body.theme-playground .ccg-section.dark .ccg-card-body p { color: rgba(255,255,255,.8); line-height: 1.6; }
/* ── Navbar skin: solid deep green everywhere; floats transparent over the
homepage hero only (inner pages have light grounds under it). ── */
body.theme-playground .ccg-utility-bar { display: none; }
body.theme-playground #navbar {
background: rgba(8,50,38,.97);
backdrop-filter: none; box-shadow: 0 4px 20px rgba(0,0,0,.15); border-bottom: 0;
}
body.theme-playground.pg-home #navbar {
background: linear-gradient(180deg, rgba(6,40,30,.6), rgba(6,40,30,0)); box-shadow: none;
}
body.theme-playground #navbar.scrolled { background: rgba(8,50,38,.96); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,.2); }
/* Mobile hamburger bars must be white on the dark navbar */
body.theme-playground .hamburger span { background-color: #fff; }
body.theme-playground #navbar .nav-logo { color: #fff; }
body.theme-playground #navbar .nav-logo-img { filter: brightness(0) invert(1); }
/* White links only where the menu sits on the dark bar. At ≤1024px it becomes
the slide-in panel (white background), so links must stay dark there. */
@media (min-width: 1025px) {
body.theme-playground .nav-links a { color: #fff; }
body.theme-playground .nav-links a:hover { color: var(--pg-gold); }
/* …but items inside the white language dropdown stay dark */
body.theme-playground .nav-links .ccg-lang-menu a { color: var(--pg-ink); }
body.theme-playground .nav-links .ccg-lang-menu a:hover { color: var(--pg-green); }
}
body.theme-playground .nav-book-btn {
background-color: var(--pg-gold) !important; color: #143324 !important;
box-shadow: 0 4px 16px rgba(0,0,0,.3); font-weight: 700;
}
body.theme-playground .ccg-lang-toggle { color: #fff; }
/* Thai text: no tracked-out letter spacing (it breaks Thai script) */
html[lang="th"] .pg-h2,
html[lang="th"] .pg-play-label,
html[lang="th"] .pg-book,
html[lang="th"] .pg-jcard-body b,
html[lang="th"] .pg-spot-tx b { letter-spacing: normal; }
/* ══ Playful layer ══
A theme park feels alive: things breathe, bounce and greet you. These are
slow, small movements — enough to feel warm, never enough to distract. */
@keyframes pgFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pgBob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-1.2deg); } }
@keyframes pgPulse { 0% { box-shadow: 0 0 0 0 rgba(233,190,107,.55); } 70% { box-shadow: 0 0 0 22px rgba(233,190,107,0); } 100% { box-shadow: 0 0 0 0 rgba(233,190,107,0); } }
@keyframes pgPop { 0% { opacity: 0; transform: scale(.6) translateY(10px); } 60% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
/* Map pins drift on their own rhythm, so the map reads as a place, not a chart */
.pg-spot-ic { animation: pgFloat 4.5s ease-in-out infinite; }
.pg-spot:nth-child(2) .pg-spot-ic { animation-delay: -1.1s; animation-duration: 5.2s; }
.pg-spot:nth-child(3) .pg-spot-ic { animation-delay: -2.3s; animation-duration: 4.9s; }
.pg-spot:nth-child(4) .pg-spot-ic { animation-delay: -3.1s; }
/* Hover takes over from the float so the lift still reads */
.pg-spot:hover .pg-spot-ic { animation: none; }
/* The mascot waves you in; the speech bubble pops once on arrival */
.pg-mascot img { animation: pgBob 5s ease-in-out infinite; transform-origin: 50% 100%; }
.pg-bubble { animation: pgPop .5s cubic-bezier(.2,1.4,.4,1) .6s both; }
/* Start Your Day keeps a soft halo pulsing outward — the page's one beacon */
.pg-play-btn { animation: pgPulse 2.8s ease-out infinite; }
.pg-play:hover .pg-play-btn { animation: none; }
/* Journey cards: the photo eases in on hover and the ▶ badge breathes */
.pg-jcard-img img { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.pg-jcard:hover .pg-jcard-img img { transform: scale(1.07); }
.pg-jcard:hover .pg-jcard-go { animation: pgPulse 1.6s ease-out infinite; }
/* Friendlier shapes: rounder cards and fully-pill buttons */
body.theme-playground .ccg-card,
body.theme-playground .ccg-menu-item,
body.theme-playground .ccg-contact-item,
body.theme-playground #academyRates { border-radius: 20px; }
.pg-journeys-box, .pg-status { border-radius: 24px; }
.pg-jcard { border-radius: 20px; }
body.theme-playground .ccg-btn-primary,
body.theme-playground .ccg-btn-outline,
.pg-book { border-radius: 50px; }
/* ── Reduced motion: no scaling/lift, everything stays visible ── */
@media (prefers-reduced-motion: reduce) {
.pg-play-btn, .pg-spot-ic, .pg-jcard { transition: none !important; }
.pg-play:hover .pg-play-btn { transform: none !important; }
.pg-spot:hover .pg-spot-ic { transform: none !important; } /* ring still brightens on hover */
.pg-jcard:hover { transform: none !important; }
/* Reduced motion swaps travel for light: nothing slides or bobs, but the
page still breathes so it doesn't read as broken. */
.pg-spot-ic, .pg-mascot img, .pg-curve-mark svg { animation: pgGlow 6s ease-in-out infinite !important; }
.pg-curve-mark::before { animation: none !important; opacity: .6; transform: none; }
.pg-play-btn { animation: pgHalo 4.5s ease-in-out infinite !important; }
.pg-jcard:hover .pg-jcard-go { animation: none !important; background: rgba(255,255,255,.34); }
.pg-bubble { animation: pgFade .5s ease .3s both !important; }
.pg-jcard-img img { transition: opacity .3s ease !important; }
.pg-jcard:hover .pg-jcard-img img { transform: none !important; opacity: .88; }
/* Section 2 of the playful layer: keep the lift (small, user-initiated) but
drop the ambient drift and the rotations that read as "bouncing". */
.ccg-sponsors-grid > * { animation: none !important; }
.ccg-gal-card:hover { transform: rotate(0) translateY(-5px) !important; }
.ccg-menu-item:hover .ccg-menu-icon,
.ccg-menu-item:hover .ccg-menu-img,
.ccg-contact-item:hover .ccg-contact-icon,
.ccg-card:hover .ccg-card-badge { transform: none !important; }
.ccg-sec-head .ccg-sec-badge { transform: none !important; }
body.theme-playground .reveal { transition: opacity .5s ease !important; }
}
/* ══ Playful layer, part 2: the rest of the page ══
Every section gets the same springy character as the hero — arrivals with a
little overshoot, cards that lift and breathe, icons that greet the cursor. */
body.theme-playground {
--pg-spring: cubic-bezier(.2, 1.35, .35, 1);
}
/* Scroll-in gets a gentle overshoot instead of a flat slide */
body.theme-playground .reveal { transition: opacity .6s ease, transform .7s var(--pg-spring); }
/* Content cards: lift higher, zoom the photo, pop the badge, slide the link */
body.theme-playground .ccg-card { transition: transform .35s var(--pg-spring), box-shadow .35s ease; }
body.theme-playground .ccg-card:hover { transform: translateY(-10px); box-shadow: 0 22px 44px rgba(61,52,39,.22); }
body.theme-playground .ccg-card:hover .ccg-card-img-wrap img { transform: scale(1.12); }
body.theme-playground .ccg-card-badge { transition: transform .3s var(--pg-spring); }
body.theme-playground .ccg-card:hover .ccg-card-badge { transform: scale(1.08) rotate(-2deg); }
body.theme-playground .ccg-card-link { transition: gap .25s var(--pg-spring), color .2s ease; }
body.theme-playground .ccg-card:hover .ccg-card-link { gap: 12px; }
/* ── Gallery as a scrapbook wall ──
Snapshots in paper frames, taped down at slightly different angles, on a
warm page instead of the cinematic dark strip. Hover straightens the photo
and lifts it to the front, like picking one up off the table. */
body.theme-playground .ccg-gallery-sec { background: var(--pg-cream-2); color: var(--pg-ink); }
body.theme-playground .ccg-gallery-sec .ccg-sec-badge {
background: var(--pg-gold); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(169,133,62,.3);
}
body.theme-playground .ccg-gallery-sec .ccg-sec-title { color: var(--pg-gold-deep); }
body.theme-playground .ccg-gallery-sec .ccg-sec-title::after { background: linear-gradient(90deg, var(--pg-gold), var(--pg-gold-deep)); }
body.theme-playground .ccg-gallery-sec .ccg-sec-badge::before { background: linear-gradient(90deg, transparent, var(--pg-gold)); }
body.theme-playground .ccg-gallery-sec .ccg-sec-badge::after { background: linear-gradient(270deg, transparent, var(--pg-gold)); }
body.theme-playground .ccg-gallery-sec .ccg-sec-desc { color: #6f6552; }
body.theme-playground .ccg-gal-card {
width: 292px; height: 256px; padding: 11px 11px 13px;
background: #fffdf8; border: 1px solid #e7dcc4; border-radius: 8px; overflow: visible;
box-shadow: 0 10px 24px rgba(61,52,39,.2);
transition: transform .35s var(--pg-spring), box-shadow .35s ease;
}
body.theme-playground .ccg-gal-card::after { content: none; } /* the dark wash isn't needed on paper */
body.theme-playground .ccg-gal-card img { border-radius: 4px; }
/* A strip of gold tape holding each snapshot to the page */
body.theme-playground .ccg-gal-card::before {
content: ''; position: absolute; top: -9px; left: 50%; z-index: 3;
width: 64px; height: 19px; transform: translateX(-50%) rotate(-3deg);
background: linear-gradient(180deg, rgba(201,165,92,.5), rgba(201,165,92,.3));
border-left: 1px dashed rgba(255,255,255,.55); border-right: 1px dashed rgba(255,255,255,.55);
}
/* Alternating tilts — a pile of photos, not a filing cabinet */
body.theme-playground .ccg-gal-card:nth-child(odd) { transform: rotate(-2.1deg); }
body.theme-playground .ccg-gal-card:nth-child(even) { transform: rotate(1.8deg); }
body.theme-playground .ccg-gal-card:nth-child(3n) { transform: rotate(-0.7deg); }
body.theme-playground .ccg-gal-card:nth-child(5n) { transform: rotate(2.6deg); }
body.theme-playground .ccg-gal-card:hover {
transform: rotate(0) translateY(-12px) scale(1.04); z-index: 5;
box-shadow: 0 26px 50px rgba(61,52,39,.3);
}
body.theme-playground .ccg-gal-card:focus-within { outline-color: var(--pg-gold); }
body.theme-playground .ccg-gal-zoom { background: var(--pg-gold); top: 20px; right: 20px; }
body.theme-playground .ccg-gal-cap {
position: static; margin-top: 8px; text-align: center; color: var(--pg-green);
font-family: var(--pg-serif); font-size: .78rem; letter-spacing: .5px;
text-shadow: none; opacity: 1; transform: none;
}
/* Room above the cards so the tape and the hover lift aren't clipped by the
strip's scroll box (overflow-x: auto also clips vertically). */
body.theme-playground .ccg-gallery-strip { padding-top: 30px; }
/* Only make room for a caption when one actually exists */
body.theme-playground .ccg-gal-card:has(.ccg-gal-cap) img { height: calc(100% - 26px); }
body.theme-playground .ccg-gallery-hint { color: #6f6552; }
body.theme-playground .ccg-gallery-hint-arrow { color: var(--pg-gold-deep); }
body.theme-playground .ccg-gallery-strip::-webkit-scrollbar-thumb { background-color: var(--pg-gold); }
body.theme-playground .ccg-gallery-strip::-webkit-scrollbar-track { background-color: rgba(61,52,39,.08); }
/* ══ Pro Shop rebuilt as a gift-shop storefront ══
Every other grid on this page is a row of cards; the shop earns its own
identity — a scalloped awning over the section and products standing on
shelves, priced with swing tags. */
body.theme-playground #proshop { position: relative; padding-top: 84px; background: var(--pg-cream-2); }
/* Striped awning with a scalloped hem across the top of the section */
body.theme-playground #proshop::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 46px; z-index: 1;
background: repeating-linear-gradient(90deg, var(--pg-green) 0 28px, #fffdf8 28px 56px);
-webkit-mask-image: radial-gradient(14px 14px at 14px 100%, transparent 13px, #000 13.5px);
-webkit-mask-size: 28px 100%; -webkit-mask-repeat: repeat-x;
mask-image: radial-gradient(14px 14px at 14px 100%, transparent 13px, #000 13.5px);
mask-size: 28px 100%; mask-repeat: repeat-x;
filter: drop-shadow(0 6px 10px rgba(61,52,39,.22));
}
/* Clean product cards: photo, then a calm ivory body that always ends with the
same button line, so a row of cards reads as a tidy shelf of goods. */
body.theme-playground #proshop .ccg-card {
background: #fffdf8; border: 1px solid #e7dcc4; border-radius: 20px; overflow: hidden;
}
body.theme-playground #proshop .ccg-card:hover { border-color: var(--pg-gold); }
body.theme-playground #proshop .ccg-card-img-wrap { aspect-ratio: 4 / 3; }
body.theme-playground #proshop .ccg-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
body.theme-playground #proshop .ccg-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
/* Buttons line up across the row however long the copy runs */
body.theme-playground #proshop .ccg-card-actions { margin-top: auto; padding-top: 6px; }
/* Price: a small gold pill that hugs its own text (it used to stretch the card) */
body.theme-playground #proshop .ccg-card-price {
align-self: flex-start; margin: 0;
background: rgba(201,165,92,.16); color: var(--pg-gold-deep); border: 1px solid rgba(201,165,92,.5);
font-family: var(--pg-serif); font-weight: 600; letter-spacing: .4px;
padding: 5px 15px; border-radius: 50px; font-variant-numeric: tabular-nums;
}
/* Corner label as a small notched ribbon on the photo */
body.theme-playground #proshop .ccg-card-badge {
border-radius: 4px 0 0 4px; padding-right: 18px;
clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
font-family: var(--pg-serif); letter-spacing: 1.4px;
}
/* One clear shop button instead of a faint text link */
body.theme-playground #proshop .ccg-card-link {
background: var(--pg-gold); color: #fff; border-radius: 50px;
padding: 10px 22px; font-size: .72rem; letter-spacing: 1.2px;
box-shadow: 0 6px 16px rgba(169,133,62,.3);
transition: background .2s ease, transform .22s var(--pg-spring);
}
body.theme-playground #proshop .ccg-card:hover .ccg-card-link {
background: var(--pg-gold-deep); color: #fff; transform: translateY(-2px);
}
/* ══ Facilities: the practice zone ══
These are precision instruments — launch monitors, GPS, private bays — so the
cards borrow a viewfinder's corner brackets and a technical label chip
instead of looking like more merchandise. */
body.theme-playground #facilities { background: var(--pg-cream-2); }
body.theme-playground #facilities .ccg-card {
background: #fffdf8; border: 1px solid #e7dcc4; border-radius: 20px;
}
body.theme-playground #facilities .ccg-card-img-wrap { aspect-ratio: 4 / 3; }
body.theme-playground #facilities .ccg-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
/* Viewfinder brackets framing the shot */
body.theme-playground #facilities .ccg-card-img-wrap::before {
content: ''; position: absolute; inset: 14px; z-index: 2; pointer-events: none;
border: 2px solid rgba(255,253,248,.85); border-radius: 3px;
clip-path: polygon(
0 0, 22px 0, 22px 2px, 2px 2px, 2px 22px, 0 22px,
0 100%, 22px 100%, 22px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 22px), 0 calc(100% - 22px),
100% 100%, calc(100% - 22px) 100%, calc(100% - 22px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 22px), 100% calc(100% - 22px),
100% 0, calc(100% - 22px) 0, calc(100% - 22px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 22px, 100% 22px
);
transition: inset .3s var(--pg-spring), opacity .3s ease;
opacity: .8;
}
body.theme-playground #facilities .ccg-card:hover .ccg-card-img-wrap::before { inset: 9px; opacity: 1; }
/* Technical label chip rather than a marketing ribbon */
body.theme-playground #facilities .ccg-card-badge {
background: rgba(11,61,46,.88); color: #edd39a; border-radius: 5px;
font-family: var(--pg-serif); font-size: .62rem; letter-spacing: 2px;
padding: 5px 12px; backdrop-filter: blur(3px);
}
body.theme-playground #facilities .ccg-card-body { display: flex; flex-direction: column; gap: 8px; padding: 22px; }
body.theme-playground #facilities .ccg-card-body h3 { position: relative; padding-bottom: 10px; }
/* A gold rule that draws itself under the title on hover */
body.theme-playground #facilities .ccg-card-body h3::after {
content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 34px;
background: linear-gradient(90deg, var(--pg-gold), transparent);
transition: width .35s var(--pg-spring);
}
body.theme-playground #facilities .ccg-card:hover .ccg-card-body h3::after { width: 78px; }
body.theme-playground #facilities .ccg-card-link { margin-top: auto; padding-top: 6px; }
/* ── Dining: a bright, appetising menu ──
Lighter ground than the rest of the page, a tall arched window onto the view,
and dishes set like a printed menu — name, leader dots, price. */
body.theme-playground #restaurant { background: #fffdf8; }
/* A portrait crop so the arch reads as a tall window, not a squat loaf */
body.theme-playground #restaurant .ccg-split-img-wrap {
aspect-ratio: 4 / 5; border-radius: 999px 999px 26px 26px;
box-shadow: 0 26px 54px rgba(61,52,39,.2);
}
body.theme-playground #restaurant .ccg-split-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
/* Hairline reveal just inside the arch; radii track the outer shape */
body.theme-playground #restaurant .ccg-split-img-wrap::after {
content: ''; position: absolute; inset: 12px; z-index: 2; pointer-events: none;
border: 1px solid rgba(255,253,248,.55); border-radius: 999px 999px 16px 16px;
}
/* Category heading above its dishes */
body.theme-playground .ccg-menu-group {
font-family: var(--pg-serif); color: var(--pg-gold-deep); font-weight: 600;
font-size: .78rem; letter-spacing: 2.4px; text-transform: uppercase;
margin: 22px 0 12px; display: flex; align-items: center; gap: 12px;
}
body.theme-playground .ccg-menu-group::after {
content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201,165,92,.55), transparent);
}
body.theme-playground .ccg-menu-group:first-child { margin-top: 0; }
/* Dish name and price on one line, joined by leader dots */
body.theme-playground .ccg-menu-tx { flex: 1; min-width: 0; }
body.theme-playground .ccg-menu-line { display: flex; align-items: baseline; gap: 10px; }
body.theme-playground .ccg-menu-line h4 { border-bottom: 0; margin: 0; padding: 0; flex: 0 1 auto; }
body.theme-playground .ccg-menu-dots {
flex: 1 1 auto; min-width: 18px; border-bottom: 1px dotted #cfbe98; transform: translateY(-4px);
}
body.theme-playground .ccg-menu-price {
font-family: var(--pg-serif); font-weight: 600; color: var(--pg-gold-deep);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.theme-playground .ccg-menu-item p { margin-top: 5px; }
/* Booking row under the menu. The shared outline button is white-on-transparent
(built for the dark hero) and vanished on this ivory ground — give it ink. */
body.theme-playground .ccg-menu-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
body.theme-playground .ccg-section:not(.dark) .ccg-btn-outline,
body.theme-playground .ccg-menu-cta .ccg-btn-outline {
color: var(--pg-gold-deep); border-color: var(--pg-gold); background: transparent;
}
body.theme-playground .ccg-section:not(.dark) .ccg-btn-outline:hover,
body.theme-playground .ccg-menu-cta .ccg-btn-outline:hover {
background: var(--pg-gold); border-color: var(--pg-gold); color: #fff;
}
body.theme-playground .ccg-menu-item {
align-items: center; padding: 18px 22px; border-radius: 18px;
border-left: 4px solid var(--pg-gold);
}
/* Solid gold-tinted disc with a thin ring — the dashed outline read as a
placeholder box rather than a finished mark. */
body.theme-playground .ccg-menu-icon {
display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
background: linear-gradient(160deg, rgba(201,165,92,.22), rgba(201,165,92,.1));
box-shadow: inset 0 0 0 1px rgba(201,165,92,.55), 0 4px 10px rgba(61,52,39,.08);
font-size: 1.45rem; line-height: 1;
}
body.theme-playground .ccg-menu-img { border: 2px solid rgba(201,165,92,.75); border-radius: 50%; width: 54px; height: 54px; }
body.theme-playground .ccg-menu-item h4 {
color: var(--pg-green); padding-bottom: 6px; margin-bottom: 6px;
border-bottom: 1px dashed #e0d3b6;
}
body.theme-playground .ccg-menu-item p { color: #6f6552; }
/* Restaurant menu + contact icons greet the cursor */
body.theme-playground .ccg-menu-item,
body.theme-playground .ccg-contact-item { transition: transform .3s var(--pg-spring), box-shadow .3s ease; }
/* Menu rows slide toward the reader; contact cards just lift */
body.theme-playground .ccg-menu-item:hover { transform: translateX(6px) translateY(-3px); box-shadow: 0 16px 32px rgba(61,52,39,.16); }
body.theme-playground .ccg-contact-item:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(61,52,39,.16); }
body.theme-playground .ccg-menu-icon,
body.theme-playground .ccg-contact-icon,
body.theme-playground .ccg-menu-img { transition: transform .35s var(--pg-spring); }
body.theme-playground .ccg-menu-item:hover .ccg-menu-icon,
body.theme-playground .ccg-menu-item:hover .ccg-menu-img,
body.theme-playground .ccg-contact-item:hover .ccg-contact-icon { transform: scale(1.14) rotate(-6deg); }
/* Sponsor logos drift, each on its own beat */
body.theme-playground .ccg-sponsors-grid > * { animation: pgFloat 5.5s ease-in-out infinite; }
body.theme-playground .ccg-sponsors-grid > *:nth-child(2n) { animation-delay: -1.8s; animation-duration: 6.2s; }
body.theme-playground .ccg-sponsors-grid > *:nth-child(3n) { animation-delay: -3.4s; animation-duration: 5.9s; }
/* Buttons and tabs press like real buttons */
body.theme-playground .ccg-btn-primary,
body.theme-playground .ccg-btn-outline,
body.theme-playground .ccg-tab-btn,
.pg-book { transition: transform .22s var(--pg-spring), background .2s ease, box-shadow .22s ease; }
body.theme-playground .ccg-btn-primary:hover,
body.theme-playground .ccg-btn-outline:hover,
.pg-book:hover { transform: translateY(-3px); }
body.theme-playground .ccg-btn-primary:active,
body.theme-playground .ccg-btn-outline:active,
.pg-book:active { transform: translateY(1px) scale(.98); }
body.theme-playground .ccg-tab-btn:hover { transform: translateY(-2px); }
/* Section flourish: the badge nudges up as its section arrives */
body.theme-playground .ccg-sec-head .ccg-sec-badge { transition: transform .5s var(--pg-spring) .1s; transform: translateY(6px); }
body.theme-playground .ccg-sec-head.visible .ccg-sec-badge { transform: translateY(0); }
/* Admin override (Website Settings › Ambient motion). "Always on" has to beat
the reduced-motion block above, so it carries both weight and !important. */
body.pg-motion-on .pg-spot-ic { animation: pgFloat 4.5s ease-in-out infinite !important; filter: none !important; }
body.pg-motion-on .pg-spot:nth-child(2) .pg-spot-ic { animation-delay: -1.1s !important; animation-duration: 5.2s !important; }
body.pg-motion-on .pg-spot:nth-child(3) .pg-spot-ic { animation-delay: -2.3s !important; animation-duration: 4.9s !important; }
body.pg-motion-on .pg-spot:nth-child(4) .pg-spot-ic { animation-delay: -3.1s !important; }
body.pg-motion-on .pg-spot:hover .pg-spot-ic { animation: none !important; transform: translateY(-3px) scale(1.06) !important; }
body.pg-motion-on .pg-mascot img { animation: pgBob 5s ease-in-out infinite !important; filter: none !important; }
body.pg-motion-on .pg-curve-mark svg { animation: pgBloom 4.6s ease-in-out infinite !important; }
body.pg-motion-on .pg-curve-mark::before { animation: pgRipple 4.6s ease-out infinite !important; }
body.pg-motion-on .pg-play-btn { animation: pgPulse 2.8s ease-out infinite !important; }
body.pg-motion-on .pg-jcard-img img { transition: transform .55s cubic-bezier(.2,.7,.2,1) !important; }
body.pg-motion-on .pg-jcard:hover .pg-jcard-img img { transform: scale(1.07) !important; opacity: 1 !important; }
body.pg-motion-on .pg-jcard:hover { transform: translateY(-6px) !important; }
body.pg-motion-on .ccg-sponsors-grid > * { animation: pgFloat 5.5s ease-in-out infinite !important; }
body.pg-motion-on .ccg-sponsors-grid > *:nth-child(2n) { animation-delay: -1.8s !important; animation-duration: 6.2s !important; }
body.pg-motion-on .ccg-sponsors-grid > *:nth-child(3n) { animation-delay: -3.4s !important; animation-duration: 5.9s !important; }
body.pg-motion-on .ccg-gal-card:hover { transform: rotate(0) translateY(-12px) scale(1.04) !important; }
body.pg-motion-on .ccg-menu-item:hover .ccg-menu-icon,
body.pg-motion-on .ccg-menu-item:hover .ccg-menu-img,
body.pg-motion-on .ccg-contact-item:hover .ccg-contact-icon { transform: scale(1.14) rotate(-6deg) !important; }
body.pg-motion-on .ccg-card:hover .ccg-card-badge { transform: scale(1.08) rotate(-2deg) !important; }
body.pg-motion-on .reveal { transition: opacity .6s ease, transform .7s var(--pg-spring) !important; }
/* "Always off" — a still page for everyone, whatever their device says */
body.pg-motion-off .pg-spot-ic,
body.pg-motion-off .pg-mascot img,
body.pg-motion-off .pg-play-btn,
body.pg-motion-off .pg-bubble,
body.pg-motion-off .pg-jcard-go { animation: none !important; filter: none !important; }
body.pg-motion-off .pg-bubble { opacity: 1; }
body.pg-motion-off .pg-jcard:hover .pg-jcard-img img { transform: none !important; }
body.pg-motion-off .ccg-sponsors-grid > *,
body.pg-motion-off .pg-curve-mark svg,
body.pg-motion-off .pg-curve-mark::before { animation: none !important; opacity: 1; }
/* Still mode keeps the scrapbook tilt (it's layout, not motion) but stops the lift */
body.pg-motion-off .ccg-gal-card:hover { transform: rotate(0) !important; }
body.pg-motion-off .ccg-menu-item:hover .ccg-menu-icon,
body.pg-motion-off .ccg-menu-item:hover .ccg-menu-img,
body.pg-motion-off .ccg-contact-item:hover .ccg-contact-icon,
body.pg-motion-off .ccg-card:hover .ccg-card-badge { transform: none !important; }
/* Animation mode "none" leaves .visible unset — don't strand the badge mid-nudge */
.anim-none .ccg-sec-head .ccg-sec-badge,
body.pg-motion-off .ccg-sec-head .ccg-sec-badge { transform: none !important; }
/* Motion-free "alive" cues: brightness and halo only, no displacement */
@keyframes pgGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.13); } }
@keyframes pgHalo {
0%,100% { box-shadow: 0 0 0 3px rgba(255,250,240,.85), 0 0 0 8px rgba(217,178,99,.42), 0 14px 34px rgba(0,0,0,.45); }
50% { box-shadow: 0 0 0 3px rgba(255,250,240,.95), 0 0 0 14px rgba(217,178,99,.5), 0 14px 34px rgba(0,0,0,.45); }
}
@keyframes pgFade { from { opacity: 0; } to { opacity: 1; } }
/* Shop page in the playground skin */
body.theme-playground .ccg-shop-filter { border-color: #e7dcc4; color: #6f6552; background: #fffdf8; }
body.theme-playground .ccg-shop-filter:hover { border-color: var(--pg-gold); color: var(--pg-gold-deep); }
body.theme-playground .ccg-shop-filter.active { background: var(--pg-gold); border-color: var(--pg-gold); color: #fff; }
body.theme-playground .ccg-shop-count strong { color: var(--pg-gold-deep); }
body.theme-playground .ccg-shop-page { border-color: #e7dcc4; background: #fffdf8; color: var(--pg-ink); }
body.theme-playground .ccg-shop-page:hover { border-color: var(--pg-gold); color: var(--pg-gold-deep); }
body.theme-playground .ccg-shop-page.active { background: var(--pg-gold); border-color: var(--pg-gold); color: #fff; }
/* ══ Tournaments: the prestige stage ══
A dark room with a spotlight, panels edged in gold, and one confident CTA. */
body.theme-playground #tournaments { position: relative; overflow: hidden; }
body.theme-playground #tournaments::before {
content: ''; position: absolute; left: 50%; top: -10%; width: 90%; height: 70%;
transform: translateX(-50%); pointer-events: none;
background: radial-gradient(50% 50% at 50% 50%, rgba(201,165,92,.16), transparent 70%);
}
body.theme-playground #tournaments .ccg-container { position: relative; z-index: 1; }
body.theme-playground #tournaments .ccg-card {
background: rgba(255,255,255,.06); border: 1px solid rgba(201,165,92,.32); border-radius: 20px;
box-shadow: 0 18px 40px rgba(0,0,0,.3);
}
body.theme-playground #tournaments .ccg-card:hover {
border-color: rgba(201,165,92,.85); box-shadow: 0 26px 54px rgba(0,0,0,.42);
}
body.theme-playground #tournaments .ccg-card-body h3 { color: #fff; }
/* The artwork here is event posters with text, dates and QR codes printed into
them, so cropping chops the message into fragments. Show them whole on a
deep backdrop — a poster on a wall — whatever ratio an admin uploads. */
body.theme-playground #tournaments .ccg-card-img-wrap {
aspect-ratio: 7 / 5; height: auto; background: #08281e; padding: 10px;
}
body.theme-playground #tournaments .ccg-card-img-wrap img {
width: 100%; height: 100%; object-fit: contain; border-radius: 8px;
}
body.theme-playground #tournaments .ccg-card:hover .ccg-card-img-wrap img { transform: none; }
body.theme-playground .ccg-tourn-cta {
border-color: rgba(201,165,92,.35); background: rgba(201,165,92,.08); border-radius: 22px;
}
body.theme-playground .ccg-tourn-cta p { font-family: var(--pg-serif); letter-spacing: .4px; }
body.theme-playground .ccg-tourn-cta-ic { color: var(--pg-gold-light); }
/* ══ Contact: warm, tappable, unfussy ══ */
body.theme-playground #contact { background: var(--pg-cream-2); }
body.theme-playground .ccg-contact-item {
align-items: center; border-radius: 18px; border-left: 4px solid var(--pg-gold); padding: 18px 22px;
}
body.theme-playground .ccg-contact-icon {
width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
background: linear-gradient(160deg, rgba(201,165,92,.24), rgba(201,165,92,.1));
box-shadow: inset 0 0 0 1px rgba(201,165,92,.55);
color: var(--pg-gold-deep);
}
body.theme-playground .ccg-contact-item h5 {
font-family: var(--pg-serif); color: var(--pg-gold-deep); font-weight: 600;
font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px;
}
body.theme-playground .ccg-contact-item p { color: var(--pg-ink); font-weight: 600; }
body.theme-playground .ccg-contact-item a:hover { color: var(--pg-gold-deep); }
body.theme-playground .ccg-contact-map {
border-radius: 22px; overflow: hidden; border: 1px solid #e7dcc4;
box-shadow: 0 18px 40px rgba(61,52,39,.14);
}
body.theme-playground .ccg-contact-form {
background: #fffdf8; border: 1px solid #e7dcc4; border-radius: 24px;
box-shadow: 0 18px 44px rgba(61,52,39,.12);
}
body.theme-playground .ccg-contact-form input,
body.theme-playground .ccg-contact-form textarea { background: var(--pg-cream); border-color: #e7dcc4; }
body.theme-playground .ccg-contact-form input:focus,
body.theme-playground .ccg-contact-form textarea:focus { border-color: var(--pg-gold); background: #fff; }
body.theme-playground .ccg-form-field label {
font-family: var(--pg-serif); color: var(--pg-green); letter-spacing: 1px;
}
/* ══ 2.5D parallax hero ══
Four painted layers drifting at different rates. Backgrounds are attached to
elements rather than ![]()
so a media query can stop phones downloading the
desktop-only layers entirely. */
.pg-layers { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pg-l {
position: absolute; left: -6%; right: -6%; top: -6%; bottom: -6%;
background-repeat: no-repeat; background-position: center bottom; background-size: cover;
will-change: transform;
}
/* Phones: one flat image, none of the layer files fetched. It still drifts as
you scroll — that costs no extra download. */
.pg-l-sky, .pg-l-mount, .pg-l-course, .pg-l-front { display: none; }
.pg-l-flat { background-position: center; }
/* Tablets and up get the real four-layer depth */
@media (min-width: 769px) {
.pg-l-flat { display: none; }
.pg-l-sky, .pg-l-mount, .pg-l-course, .pg-l-front { display: block; }
/* Artwork itself comes from the admin (Hero Scene) as an inline style — this
file only decides where each layer sits and how it is framed. */
.pg-l-sky { background-position: center top; }
/* The mountain is a cut-out, so its base must land BELOW the course layer's
tree line (which starts at ~45% of the hero) or it reads as floating.
Ending the element at 52% and anchoring the image to that edge tucks the
base behind the trees. */
.pg-l-mount {
/* Sit the base well below the centre tree line… */
top: -6%; bottom: 30%;
background-size: contain; background-position: center bottom;
/* …and dissolve the last fifth of it. The cut-out has a straight cropped
base, so any moment it clears the trees you see a hard line hanging in
the air. Fading it into haze is how matte paintings hide the same seam,
and it holds no matter how the layers shift while scrolling. */
-webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 98%);
mask-image: linear-gradient(to bottom, #000 76%, transparent 98%);
}
.pg-l-course { background-position: center bottom; }
.pg-l-front { background-position: center bottom; }
}
/* ── Chee's second appearance: a peek-in nudge near the booking area ── */
.pg-buddy {
position: fixed; left: 18px; bottom: 18px; z-index: 900;
display: flex; align-items: flex-end; gap: 4px;
opacity: 0; transform: translateY(24px) translateX(-12px);
transition: opacity .45s ease, transform .55s var(--pg-spring, cubic-bezier(.2,1.35,.35,1));
pointer-events: none;
}
.pg-buddy.show { opacity: 1; transform: none; pointer-events: auto; }
.pg-buddy[hidden] { display: none; }
.pg-buddy img { width: clamp(96px, 11vw, 150px); height: auto; display: block; filter: drop-shadow(0 12px 22px rgba(0,0,0,.3)); }
.pg-buddy-bubble {
position: relative; background: #fffdf8; border: 1px solid #e7dcc4; border-radius: 18px 18px 4px 18px;
padding: 14px 16px; max-width: 210px; box-shadow: 0 14px 32px rgba(61,52,39,.24);
display: flex; flex-direction: column; gap: 4px; margin-bottom: 26px;
}
.pg-buddy-bubble b { font-family: var(--pg-serif); color: var(--pg-green); font-size: .9rem; }
.pg-buddy-bubble span { font-size: .76rem; color: #6f6552; line-height: 1.45; }
.pg-buddy-btn {
margin-top: 6px; background: var(--pg-gold); color: #fff; text-align: center;
border-radius: 50px; padding: 8px 14px; font-size: .74rem; font-weight: 700; letter-spacing: .8px;
text-decoration: none; transition: background .2s ease;
}
.pg-buddy-btn:hover { background: var(--pg-gold-deep); color: #fff; }
.pg-buddy-x {
position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%;
background: #fffdf8; border: 1px solid #e7dcc4; color: #6f6552; font-size: 1rem; line-height: 1;
cursor: pointer; box-shadow: 0 4px 10px rgba(61,52,39,.2); z-index: 2;
}
.pg-buddy-x:hover { background: var(--pg-gold); color: #fff; border-color: var(--pg-gold); }
/* Keep clear of the floating music player on small screens */
@media (max-width: 900px) {
.pg-buddy { left: 12px; bottom: 96px; }
.pg-buddy-bubble { max-width: 168px; padding: 11px 13px; }
}
/* Motion settings apply here too */
body.pg-motion-off .pg-buddy { transition: opacity .3s ease !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
.pg-buddy { transition: opacity .3s ease !important; transform: none !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
Playground map — life in the artwork
The map was a still photo with flat discs on it: nothing invited a click,
and on touch (labels hidden) there was no cue the pins did anything at all.
Four additions, all opt-out under prefers-reduced-motion:
1. the photo breathes (very slow drift), so the section is never inert
2. light sweeps across it once in a while, like sun moving over the course
3. each pin carries a pulsing halo — the "tap me" cue
4. pins arrive one by one when the section scrolls into view
══════════════════════════════════════════════════════════════════════════ */
/* 1 + 2 — the artwork as a floating island, matching the approved layout:
no frame, no rectangle, just the map dissolving into the cream page. */
.pg-map-wrap.is-free .pg-map-stage {
position: relative; overflow: visible; border-radius: 0; box-shadow: none;
filter: drop-shadow(0 30px 40px rgba(61,52,39,.26));
}
/* Motion only — the mask and radius belong to the shape/edge matrix above.
This rule used to hardcode the oval mask and, sitting later in the file at
equal specificity, it silently overrode every admin choice. */
.pg-map-wrap.is-free .pg-map-stage img {
transform-origin: 52% 46%;
animation: pgMapDrift 34s ease-in-out infinite;
will-change: transform;
}
@keyframes pgMapDrift {
0%, 100% { transform: scale(1.02) translate3d(0, 0, 0); }
50% { transform: scale(1.06) translate3d(-.7%, -.6%, 0); }
}
/* Sunlight crossing the course — a wide, very soft band, mostly invisible.
Masked to the same island shape so the sweep never shows as a rectangle. */
.pg-map-wrap.is-free .pg-map-stage::after {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
background: linear-gradient(105deg,
transparent 34%, rgba(255,248,225,.34) 46%, rgba(255,255,255,.16) 52%, transparent 64%);
-webkit-mask-image: radial-gradient(58% 56% at 50% 50%, #000 62%, transparent 100%);
mask-image: radial-gradient(58% 56% at 50% 50%, #000 62%, transparent 100%);
transform: translateX(-120%);
animation: pgMapSheen 11s ease-in-out infinite;
}
@keyframes pgMapSheen {
0%, 62% { transform: translateX(-120%); }
86%, 100% { transform: translateX(120%); }
}
/* 3 — halo. Sits behind the disc and echoes its colour, so a red pin pulses
red. Two rings offset in time read as a ripple rather than a blink. */
.pg-map-wrap.is-free .pg-spot-ic::after,
.pg-map-wrap.is-free .pg-spot-ic::before {
content: ''; position: absolute; inset: 0; border-radius: 50%;
border: 2px solid var(--disc-c, var(--pg-gold));
animation: pgPinHalo 3.2s cubic-bezier(.2,.6,.35,1) infinite;
pointer-events: none;
}
.pg-map-wrap.is-free .pg-spot-ic::before { animation-delay: -1.6s; }
@keyframes pgPinHalo {
0% { transform: scale(1); opacity: .55; }
70% { transform: scale(1.75); opacity: 0; }
100% { transform: scale(1.75); opacity: 0; }
}
/* Stagger so six pins don't pulse in lockstep */
.pg-map-wrap.is-free .pg-spot:nth-child(2) .pg-spot-ic::after { animation-delay: -.5s; }
.pg-map-wrap.is-free .pg-spot:nth-child(3) .pg-spot-ic::after { animation-delay: -1s; }
.pg-map-wrap.is-free .pg-spot:nth-child(4) .pg-spot-ic::after { animation-delay: -1.5s; }
.pg-map-wrap.is-free .pg-spot:nth-child(5) .pg-spot-ic::after { animation-delay: -2s; }
.pg-map-wrap.is-free .pg-spot:nth-child(6) .pg-spot-ic::after { animation-delay: -2.5s; }
/* Once the visitor is interacting the halo has done its job — it stops so it
doesn't compete with the open label */
.pg-map-wrap.is-free .pg-spot:hover .pg-spot-ic::after,
.pg-map-wrap.is-free .pg-spot:hover .pg-spot-ic::before,
.pg-map-wrap.is-free .pg-spot.is-open .pg-spot-ic::after,
.pg-map-wrap.is-free .pg-spot.is-open .pg-spot-ic::before { animation: none; opacity: 0; }
/* 4 — arrival. Held at opacity 0 until the section is in view, then released
in reading order. Only opacity/filter animate: .pg-spot uses transform for
its %-position, so touching transform here would fling the pins off-map. */
.pg-map-wrap.is-free.pg-anim .pg-spot {
opacity: 0; filter: blur(3px);
transition: opacity .55s ease, filter .55s ease;
}
.pg-map-wrap.is-free.pg-anim.is-ready .pg-spot { opacity: 1; filter: blur(0); }
.pg-map-wrap.is-free.pg-anim.is-ready .pg-spot:nth-child(1) { transition-delay: .05s; }
.pg-map-wrap.is-free.pg-anim.is-ready .pg-spot:nth-child(2) { transition-delay: .17s; }
.pg-map-wrap.is-free.pg-anim.is-ready .pg-spot:nth-child(3) { transition-delay: .29s; }
.pg-map-wrap.is-free.pg-anim.is-ready .pg-spot:nth-child(4) { transition-delay: .41s; }
.pg-map-wrap.is-free.pg-anim.is-ready .pg-spot:nth-child(5) { transition-delay: .53s; }
.pg-map-wrap.is-free.pg-anim.is-ready .pg-spot:nth-child(6) { transition-delay: .65s; }
/* Note: the hold is keyed on .pg-anim, which only JS adds. No JS (blocked,
error, old browser) → the class never lands and the pins are simply there. */
/* Desktop: the whole pin lifts on hover, label included */
@media (hover: hover) and (pointer: fine) {
.pg-map-wrap.is-free .pg-spot-tx {
transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.pg-map-wrap.is-free .pg-spot:hover .pg-spot-tx {
transform: translateY(-2px); box-shadow: 0 10px 22px rgba(61,52,39,.32);
}
}
/* Motion is decoration here — everything above is safe to drop */
@media (prefers-reduced-motion: reduce) {
.pg-map-wrap.is-free .pg-map-stage img,
.pg-map-wrap.is-free .pg-map-stage::after,
.pg-map-wrap.is-free .pg-spot-ic::after,
.pg-map-wrap.is-free .pg-spot-ic::before { animation: none !important; }
.pg-map-wrap.is-free .pg-map-stage::after { opacity: 0; }
.pg-map-wrap.is-free .pg-spot { opacity: 1 !important; filter: none !important; transition: none; }
}
/* Site-wide motion toggle (footer preference) wins over everything */
body.pg-motion-off .pg-map-wrap.is-free .pg-map-stage img,
body.pg-motion-off .pg-map-wrap.is-free .pg-map-stage::after,
body.pg-motion-off .pg-map-wrap.is-free .pg-spot-ic::after,
body.pg-motion-off .pg-map-wrap.is-free .pg-spot-ic::before { animation: none !important; }
body.pg-motion-off .pg-map-wrap.is-free .pg-map-stage::after { opacity: 0; }
body.pg-motion-off .pg-map-wrap.is-free .pg-spot { opacity: 1 !important; filter: none !important; }
/* Seal the hero's bottom edge. The curve is an SVG scaled with
preserveAspectRatio="none", so at fractional heights (any 2x display, browser
zoom, odd viewport) its cream fill can land a sub-pixel short and let a
hairline of the dark artwork show through as a line across the page. */
.pg-hero-curve { bottom: -2px; }
.pg-hero-curve::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
background: var(--pg-cream); pointer-events: none;
}
/* Same reasoning on the inner pages: a hard 1px rule under the course intro
reads as a stray line in this theme. */
body.theme-playground .ccg-holes-intro { border-bottom: 0; }
/* ══ Map image: admin-chosen mask shape and desktop size ══
The mask lives on the ![]()
; pins are siblings, so no shape ever clips them.
Pin coordinates are percentages, so every size keeps them in place. */
@media (min-width: 1025px) {
.pg-map-wrap.is-free.pg-w-normal { width: min(880px, 68vh * 4 / 3); }
.pg-map-wrap.is-free.pg-w-wide { width: min(1200px, 84vh * 4 / 3); }
.pg-map-wrap.is-free.pg-w-full { width: 100%; max-width: 1500px; }
}
/* Shape and edge are independent, so all eight combinations are valid.
Feathered edges use a mask whose geometry follows the chosen shape;
crisp edges drop the mask and use plain border-radius instead. */
/* A circle is bound by its shorter side, so "full width" would otherwise
produce a 1500px-tall disc. Cap it against the viewport height. */
.pg-shape-circle .pg-map-stage {
aspect-ratio: 1; max-width: min(100%, 74vh); margin-inline: auto;
}
.pg-shape-circle .pg-map-stage img { width: 100%; height: 100%; object-fit: cover; }
/* — Feathered — */
.pg-edge-feather .pg-map-stage img,
.pg-edge-feather .pg-map-stage::after { border-radius: 0; }
.pg-shape-oval.pg-edge-feather .pg-map-stage img,
.pg-shape-oval.pg-edge-feather .pg-map-stage::after {
-webkit-mask-image: radial-gradient(58% 56% at 50% 50%, #000 62%, transparent 100%);
mask-image: radial-gradient(58% 56% at 50% 50%, #000 62%, transparent 100%);
}
.pg-shape-circle.pg-edge-feather .pg-map-stage img,
.pg-shape-circle.pg-edge-feather .pg-map-stage::after {
-webkit-mask-image: radial-gradient(closest-side circle at 50% 50%, #000 74%, transparent 100%);
mask-image: radial-gradient(closest-side circle at 50% 50%, #000 74%, transparent 100%);
}
.pg-shape-rounded.pg-edge-feather .pg-map-stage img,
.pg-shape-rounded.pg-edge-feather .pg-map-stage::after {
-webkit-mask-image: radial-gradient(80% 78% at 50% 50%, #000 76%, transparent 100%);
mask-image: radial-gradient(80% 78% at 50% 50%, #000 76%, transparent 100%);
}
.pg-shape-full.pg-edge-feather .pg-map-stage img,
.pg-shape-full.pg-edge-feather .pg-map-stage::after {
-webkit-mask-image: radial-gradient(96% 94% at 50% 50%, #000 84%, transparent 100%);
mask-image: radial-gradient(96% 94% at 50% 50%, #000 84%, transparent 100%);
}
/* — Crisp — */
.pg-edge-crisp .pg-map-stage img,
.pg-edge-crisp .pg-map-stage::after { -webkit-mask-image: none; mask-image: none; }
.pg-shape-oval.pg-edge-crisp .pg-map-stage img,
.pg-shape-circle.pg-edge-crisp .pg-map-stage img { border-radius: 50%; }
.pg-shape-rounded.pg-edge-crisp .pg-map-stage img { border-radius: 24px; }
.pg-shape-full.pg-edge-crisp .pg-map-stage img { border-radius: 0; }
/* ══ Per-pin controls (Content › Map destinations) ══ */
/* Size — a multiplier, not a fixed pixel value, so a pin keeps its relative
size on every breakpoint instead of overriding the responsive rules. */
.pg-spot.pg-sz-xs { --pin-k: .64; }
.pg-spot.pg-sz-sm { --pin-k: .82; }
.pg-spot.pg-sz-md { --pin-k: 1; }
.pg-spot.pg-sz-lg { --pin-k: 1.22; }
.pg-spot.pg-sz-xl { --pin-k: 1.48; }
/* Label behaviour */
.pg-spot.pg-lb-none .pg-spot-tx { display: none; }
.pg-lb-hover .pg-spot-tx { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.pg-lb-hover:hover .pg-spot-tx,
.pg-lb-hover:focus-visible .pg-spot-tx { opacity: 1; }
@media (hover: none) {
.pg-map-wrap:not(.is-free) .pg-lb-hover .pg-spot-tx { opacity: 1; }
}
/* Corner badge — a small flag on the disc */
.pg-spot-badge {
position: absolute; top: -6px; right: -8px; z-index: 4;
background: #c0392b; color: #fff; border: 2px solid #fffdf8; border-radius: 20px;
font-size: .56rem; font-weight: 800; letter-spacing: .6px; padding: 2px 7px;
text-transform: uppercase; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.3);
}
/* Pins opted out of the attention ring */
.pg-spot.no-pulse .pg-spot-ic::after,
.pg-spot.no-pulse .pg-spot-ic::before { display: none; }
/* Display-only pins shouldn't pretend to be clickable */
.pg-spot[aria-disabled="true"] { cursor: default; }
/* Buttons must look identical to the anchor version */
button.pg-spot { background: none; border: 0; padding: 0; font: inherit; text-align: inherit; cursor: pointer; }
/* ── Pin detail popup ── */
.pg-pop {
position: fixed; inset: 0; z-index: 3500; display: flex; align-items: center; justify-content: center;
padding: 24px; background: rgba(12,20,15,.72); backdrop-filter: blur(4px);
}
.pg-pop[hidden] { display: none; }
.pg-pop-panel {
background: #fffdf8; border-radius: 24px; overflow: hidden; max-width: 520px; width: 100%;
max-height: 88vh; overflow-y: auto; box-shadow: 0 30px 70px rgba(0,0,0,.4);
animation: pgPop .38s cubic-bezier(.2,1.3,.35,1);
}
.pg-pop-panel[hidden] { display: none; }
@keyframes pgPop { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.pg-pop-img { aspect-ratio: 16 / 9; background: var(--pg-cream-2); }
.pg-pop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-pop-body { padding: 26px 26px 28px; text-align: center; }
.pg-pop-ic {
display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
margin: 0 auto 12px; position: relative; color: #fff;
background: var(--disc-c, var(--pg-gold));
box-shadow: 0 0 0 4px #fffdf8, 0 8px 18px rgba(61,52,39,.3);
}
.pg-pop-img + .pg-pop-body .pg-pop-ic { margin-top: -56px; }
.pg-pop-ic svg { width: 27px; height: 27px; }
.pg-pop-body h3 { font-family: var(--pg-serif); color: var(--pg-green); font-size: 1.3rem; margin-bottom: 4px; }
.pg-pop-sub { color: var(--pg-gold-deep); font-size: .84rem; letter-spacing: 1px; margin-bottom: 14px; }
.pg-pop-rich { color: #6f6552; font-size: .92rem; line-height: 1.8; text-align: left; margin-bottom: 20px; }
.pg-pop-rich :last-child { margin-bottom: 0; }
.pg-pop-x {
position: absolute; top: 20px; right: 24px; z-index: 2;
width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(255,255,255,.16); color: #fff; font-size: 1.5rem; line-height: 1;
}
.pg-pop-x:hover { background: rgba(255,255,255,.3); }
@media (prefers-reduced-motion: reduce) { .pg-pop-panel { animation: none; } }
body.pg-motion-off .pg-pop-panel { animation: none; }
/* Artwork that animates on its own (GIF / animated WebP) — the CSS bob would
fight the file's own motion, so it is dropped for these. */
body.theme-playground .pg-mascot.is-animated img,
body.pg-motion-on .pg-mascot.is-animated img { animation: none !important; }
/* Very narrow phones: let the Explore heading break onto a second line rather
than shrink into illegibility, and keep the sides clear of the screen edge. */
@media (max-width: 768px) {
/* .ccg-container carries no side gutter, so headings would otherwise run
into the screen edge. The uneven inline padding keeps the optical
centring that letter-spacing's trailing space would spoil. */
.pg-h2, .pg-sub { padding-inline: 18px 14px; }
}
@media (max-width: 380px) {
.pg-map-sec .pg-h2 { letter-spacing: 1px; text-wrap: balance; line-height: 1.35; }
.pg-map-sec { padding-top: 18px; }
}