/*
* GENERATED from course-map.html by tools/build-course-map-block.py - do not edit.
*
* Change the prototype and run the script again. Editing this file directly means
* the next build silently throws the change away.
*/
/* ============================================================
INTERACTIVE COURSE MAP — prototype
Every shape on this page is traced geometry, not a drawing:
18 hole centrelines, 18 fairways, 19 greens, 140 bunkers, the
tee boxes, the cart paths, the water and the coastline, all
from OpenStreetMap and turned into SVG by tools/build-course-map.py.
Each hole is rotated so the tee is at the bottom and the green
at the top, the way a hole card is always drawn.
Built as vanilla JS against a JSON file on purpose. It has to
become a Gutenberg block, and the same component has to run in
the app in the autumn, so nothing here depends on this page.
============================================================ */
.loopa-course-map{/* Six steps of green, dark to light, so the course reads as layers rather
than as one flat colour: the complex, then its grass, then the fairway,
then the putting surface. */
--complex: #2b5c33;
--grass: #37703d;
--turf-dk: #24522d;
--turf: #3f8447;
--turf-lt: #4a8b52;
--green-put: #8fcf74;
--sand: #d9c391;
--beach: #c6b285;
--wood: #1f4a28;
/* Water is one colour, ocean and pond alike, so "that is water" needs no key.
The land is the section's own background, so the drawing sits in the page
rather than in a box of its own on top of it. */
--sea: #14505f;
--land: var(--ocean-dp, #0a2b33);
--built: rgba(253,241,212,.13);
--block: rgba(253,241,212,.045);
--path: rgba(253,241,212,.34);
/* The marks on the map -- hole numbers, pins, the coastline -- carry the
site's own yellow rather than a paler one of their own. */
--mark: var(--paper, #fad495);}
/* ---------- the frame both views live in ---------- */
.loopa-course-map .map{position:relative;
border:1px solid var(--rule-dk);
background:var(--land);
overflow:hidden;}
.loopa-course-map .map__stage{position:relative;display:grid}
.loopa-course-map .map__view{grid-area:1/1;min-width:0}
.loopa-course-map .map__view[hidden]{display:none}
.loopa-course-map .map svg{display:block;width:100%;height:auto}
/* ---------- the resort under the golf ----------
Painted first and kept quiet: the point is that the complex can be read at a
glance — where the buildings are, where the grass ends, where the beach runs —
without competing with the holes on top of it. */
/* The Caribbean, as a shape. Painted under everything, including the beaches
that run along its edge. */
.loopa-course-map .l-sea path{fill:var(--sea);stroke:none}
.loopa-course-map .l-golfarea path{fill:var(--complex);stroke:none;opacity:.62}
.loopa-course-map .l-grass path{fill:var(--grass);stroke:none;opacity:.42}
.loopa-course-map .l-wood path{fill:var(--wood);stroke:none;opacity:.5}
.loopa-course-map .l-sand path{fill:var(--beach);stroke:none;opacity:.3}
.loopa-course-map .l-block path{fill:var(--block);stroke:rgba(253,241,212,.07);stroke-width:.6}
.loopa-course-map .l-building path{fill:var(--built);stroke:rgba(253,241,212,.14);stroke-width:.5}
/* ---------- shared shape styling ---------- */
/* The general area: the hole's own hull, softened by a fat round stroke of its
own colour rather than by a real polygon offset. Two of the par threes have no
fairway mapped, and this is what stops their green floating on the background. */
.loopa-course-map .l-ground path{fill:var(--turf-dk);stroke:var(--turf-dk);
stroke-width:44;stroke-linejoin:round;
opacity:.92;}
.loopa-course-map .l-water path,
.loopa-course-map .l-lateral_water_hazard path{fill:var(--sea);stroke:rgba(253,241,212,.22);stroke-width:1.2}
.loopa-course-map .l-fairway path{fill:var(--turf);stroke:var(--turf-dk);stroke-width:1}
.loopa-course-map .l-green path{fill:var(--green-put);stroke:rgba(20,50,24,.5);stroke-width:1}
.loopa-course-map .l-bunker path{fill:var(--sand);stroke:rgba(90,70,30,.45);stroke-width:.8}
.loopa-course-map .l-cartpath path{fill:none;stroke:var(--path);stroke-width:2.4;stroke-linecap:round}
.loopa-course-map .l-tee path{fill:rgba(253,241,212,.72);stroke:rgba(20,50,24,.5);stroke-width:.8}
.loopa-course-map .l-coastline path{fill:none;stroke:rgba(253,241,212,.22);stroke-width:1.2}
/* ---------- the two ways of looking at the whole course ---------- */
.loopa-course-map .map__tabs{display:flex;gap:6px;padding:12px clamp(14px,2vw,22px);border-bottom:1px solid var(--rule-dk)}
.loopa-course-map .map__tab{min-height:36px;padding:0 15px;cursor:pointer;
background:transparent;border:1px solid var(--rule-dk);color:rgba(253,241,212,.66);
font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);}
.loopa-course-map .map__tab:hover{color:var(--paper-hi);border-color:var(--gold-lt)}
.loopa-course-map .map__tab[aria-pressed="true"]{background:var(--mark);border-color:var(--mark);color:var(--ocean-bk)}
.loopa-course-map .map__tab:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}
/* ---------- all eighteen, at a glance ----------
The screen a designer actually needs: every hole at once, so the drawing can
be judged without clicking through eighteen views. */
.loopa-course-map .sheet{display:grid;gap:1px;
grid-template-columns:repeat(2,1fr);
background:var(--rule-dk);
padding:1px;}
.loopa-course-map .sheet__cell{position:relative;
background:rgba(4,20,26,.55);
border:0;padding:0;cursor:pointer;
display:grid;
transition:background .3s var(--ease);}
.loopa-course-map .sheet__cell:hover{background:rgba(47,107,58,.22)}
.loopa-course-map .sheet__cell:focus-visible{outline:2px solid var(--gold-lt);outline-offset:-2px}
.loopa-course-map .sheet__cell svg{display:block;width:100%;height:auto}
.loopa-course-map .sheet__tag{position:absolute;top:9px;left:10px;right:10px;
display:flex;align-items:baseline;gap:8px;
pointer-events:none;}
.loopa-course-map .sheet__tag b{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:22px;
letter-spacing:.04em;color:var(--paper-hi);line-height:1;}
.loopa-course-map .sheet__tag span{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.loopa-course-map .sheet__tag em{margin-left:auto;font-style:normal;font-size:8.5px;letter-spacing:.18em;
text-transform:uppercase;color:rgba(253,241,212,.5)}
@media (min-width:640px){
.loopa-course-map .sheet{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1000px){
.loopa-course-map .sheet{grid-template-columns:repeat(6,1fr)}
}
/* ---------- overview ---------- */
.loopa-course-map .ov__line{fill:none;stroke:rgba(253,241,212,.22);stroke-width:2;stroke-dasharray:5 6}
.loopa-course-map .ov__hit{fill:none;stroke:transparent;stroke-width:26;
cursor:pointer;}
.loopa-course-map .ov__marker{cursor:pointer}
.loopa-course-map .ov__marker circle{fill:rgba(6,28,34,.86);stroke:var(--mark);stroke-width:1.4;
transition:fill .25s var(--ease),stroke .25s var(--ease);}
.loopa-course-map .ov__marker text{font-family:'Bebas Neue',Impact,sans-serif;font-size:19px;
fill:var(--paper-hi);text-anchor:middle;dominant-baseline:central;
pointer-events:none;letter-spacing:.04em;}
.loopa-course-map .ov__hole:hover .ov__marker circle,
.loopa-course-map .ov__hole.is-on .ov__marker circle{fill:var(--terra);stroke:var(--terra)}
.loopa-course-map .ov__hole:hover .ov__line,
.loopa-course-map .ov__hole.is-on .ov__line{stroke:var(--mark);stroke-dasharray:none}
.loopa-course-map .ov__hole:focus-visible .ov__marker circle{stroke:#fff;stroke-width:2.6}
.loopa-course-map .ov__hole{outline:none}
/* ---------- pins ----------
Built as their own layer with a data model behind them, because this map has
to carry more than golf later: which villa a player is in, where lunch is at
two, and a "you are here" from a GPS fix. All of those are the same thing —
a coordinate, a kind and a label — so there is one mechanism for all of it. */
.loopa-course-map .pins{pointer-events:none}
.loopa-course-map .pin{pointer-events:auto;cursor:pointer}
.loopa-course-map .pin__dot{fill:rgba(6,28,34,.9);stroke:var(--mark);stroke-width:1.4;
transition:fill .25s var(--ease),stroke .25s var(--ease);}
.loopa-course-map .pin__glyph{font-family:'Jost',sans-serif;font-size:10px;font-weight:500;
fill:var(--mark);text-anchor:middle;dominant-baseline:central;
pointer-events:none;}
.loopa-course-map .pin__label{font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;fill:rgba(253,241,212,.72);
paint-order:stroke;stroke:rgba(4,20,26,.85);stroke-width:3;stroke-linejoin:round;
pointer-events:none;}
.loopa-course-map .pin:hover .pin__dot,
.loopa-course-map .pin:focus-visible .pin__dot{fill:var(--terra);stroke:var(--terra)}
.loopa-course-map .pin:hover .pin__glyph,
.loopa-course-map .pin:focus-visible .pin__glyph{fill:var(--paper-hi)}
.loopa-course-map .pin--here .pin__dot{fill:var(--terra);stroke:var(--paper-hi);stroke-width:2}
.loopa-course-map .pin--here .pin__glyph{fill:var(--paper-hi)}
.loopa-course-map .pin--here .pin__pulse{fill:none;stroke:var(--terra);stroke-width:1.4;opacity:.5}
.loopa-course-map .map__toggles{display:flex;flex-wrap:wrap;gap:6px;padding:10px clamp(14px,2vw,22px);
border-bottom:1px solid var(--rule-dk)}
.loopa-course-map .map__toggles .map__tab{min-height:30px;font-size:9px;padding:0 12px}
/* ---------- hole view ---------- */
.loopa-course-map .hole{display:grid;gap:0}
.loopa-course-map .hole__figure{position:relative;background:rgba(4,20,26,.4);min-width:0}
.loopa-course-map .hole__centre{fill:none;stroke:rgba(253,241,212,.4);stroke-width:1.6;stroke-dasharray:4 7}
.loopa-course-map .hole__marker{fill:var(--paper-hi)}
.loopa-course-map .hole__flag line{stroke:var(--paper-hi);stroke-width:1.6}
.loopa-course-map .hole__flag path{fill:var(--terra)}
.loopa-course-map .hole__panel{padding:clamp(20px,2.6vw,34px);
display:grid;gap:clamp(14px,2vw,20px);align-content:start;
border-top:1px solid var(--rule-dk);}
.loopa-course-map .hole__no{display:flex;align-items:baseline;gap:14px;}
.loopa-course-map .hole__no b{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;
font-size:clamp(46px,7vw,78px);line-height:.8;color:var(--paper-hi);letter-spacing:.02em;}
.loopa-course-map .hole__no span{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.loopa-course-map .hole__name{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;
font-size:clamp(20px,2.6vw,28px);letter-spacing:.11em;color:var(--paper-hi);line-height:1}
.loopa-course-map .hole__desc{font-size:14px;line-height:1.75;max-width:44ch}
/* A photograph of the hole, between the name and the numbers. Placeholder for
now — a real one per hole is a media field on the event. */
.loopa-course-map .hole__photo{position:relative;aspect-ratio:16/9;overflow:hidden;
background:var(--ocean-dp);border:1px solid var(--rule-dk);}
.loopa-course-map .hole__photo img{width:100%;height:100%;object-fit:cover;display:block}
.loopa-course-map .hole__photo--empty{display:grid;place-items:center;
background:repeating-linear-gradient(135deg,rgba(253,241,212,.03) 0 10px,transparent 10px 20px),var(--ocean-dp);}
.loopa-course-map .hole__photo--empty span{font-size:9px;letter-spacing:.24em;text-transform:uppercase;
color:rgba(253,241,212,.42);text-align:center;padding:0 18px;line-height:1.8;}
.loopa-course-map .spec{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule-dk);border:1px solid var(--rule-dk)}
.loopa-course-map .spec div{background:rgba(6,28,34,.6);padding:11px 13px}
.loopa-course-map .spec dt{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.loopa-course-map .spec dd{margin:0;font-family:'Bebas Neue',Impact,sans-serif;font-size:19px;letter-spacing:.07em;color:var(--paper-hi);line-height:1}
.loopa-course-map .tees{display:grid;gap:6px}
.loopa-course-map .tees__row{display:flex;align-items:center;gap:10px;font-size:13px}
.loopa-course-map .tees__dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(253,241,212,.5)}
.loopa-course-map .tees__row b{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:16px;letter-spacing:.06em;color:var(--paper-hi);min-width:3.4em}
.loopa-course-map .tees__row span{color:rgba(253,241,212,.62);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.loopa-course-map .tees__missing{font-size:12px;line-height:1.65;color:rgba(253,241,212,.55);border-left:2px solid var(--terra);padding-left:12px}
.loopa-course-map .hole__nav{display:grid;grid-template-columns:max-content max-content;
gap:8px;align-items:center;justify-content:start;}
.loopa-course-map .pill-btn{min-height:40px;padding:0 16px;cursor:pointer;
background:transparent;border:1px solid var(--rule-dk);color:rgba(253,241,212,.72);
font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);}
.loopa-course-map .pill-btn:hover{color:var(--paper-hi);border-color:var(--gold-lt)}
.loopa-course-map .pill-btn:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}
.loopa-course-map .pill-btn--go{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--ocean-bk)}
.loopa-course-map .hole__nav .grow{grid-column:1/-1;margin-left:0;justify-self:start}
/* the strip of 18 along the bottom, always there */
.loopa-course-map .holebar{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;
padding:12px clamp(14px,2vw,22px);
border-top:1px solid var(--rule-dk);
background:rgba(4,20,26,.5);}
.loopa-course-map .holebar::-webkit-scrollbar{display:none}
.loopa-course-map .holebar button{flex:0 0 auto;width:34px;height:34px;cursor:pointer;
background:transparent;border:1px solid var(--rule-dk);
color:rgba(253,241,212,.66);
font-family:'Bebas Neue',Impact,sans-serif;font-size:15px;letter-spacing:.04em;
transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);}
.loopa-course-map .holebar button:hover{color:var(--paper-hi);border-color:var(--gold-lt)}
.loopa-course-map .holebar button[aria-current="true"]{background:var(--terra);border-color:var(--terra);color:var(--paper-hi)}
.loopa-course-map .holebar button:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}
.loopa-course-map .legend{padding:12px clamp(14px,2vw,22px);border-top:1px solid var(--rule-dk);
font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(253,241,212,.6)}
.loopa-course-map .legend__row{display:flex;flex-wrap:wrap;align-items:center;gap:7px 18px;padding:5px 0}
.loopa-course-map .legend__row + .legend__row{border-top:1px solid rgba(228,199,126,.1)}
.loopa-course-map .legend__row b{flex:0 0 auto;min-width:86px;font-weight:400;color:var(--gold);letter-spacing:.24em}
.loopa-course-map .legend i{display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px;border:1px solid rgba(0,0,0,.25)}
.loopa-course-map .legend__pin em{display:inline-grid;place-items:center;width:14px;height:14px;margin-right:7px;
vertical-align:-3px;border-radius:50%;background:var(--mark);color:var(--ocean-bk);
font-family:'Jost',sans-serif;font-style:normal;font-size:8px;letter-spacing:0}
.loopa-course-map .legend__src{color:rgba(253,241,212,.38);letter-spacing:.16em;text-transform:none}
.loopa-course-map .legend__said{color:var(--paper-hi);letter-spacing:.14em;text-transform:none;font-size:11px}
.loopa-course-map .loading{padding:clamp(40px,8vw,90px);text-align:center;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(253,241,212,.5)}
@media (min-width:900px){
.loopa-course-map .hole{grid-template-columns:1fr minmax(300px,.62fr)}
.loopa-course-map .hole__panel{border-top:0;border-left:1px solid var(--rule-dk)}
.loopa-course-map .spec{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
.loopa-course-map .ov__marker circle,
.loopa-course-map .ov__line,
.loopa-course-map .pill-btn,
.loopa-course-map .holebar button{transition:none}
}
/* ---------- the part that is a block rather than a page ---------- */
.loopa-course-map{background:var(--ocean-dp)}
.loopa-course-map__head{max-width:62ch;margin-bottom:clamp(28px,4vw,48px)}
.loopa-course-map__head .h2{margin:14px 0 0}
.loopa-course-map__head .lede{margin:18px 0 0}
.loopa-course-map__note{margin:18px 0 0;max-width:70ch;font-size:11.5px;line-height:1.75;
letter-spacing:.04em;color:rgba(253,241,212,.5)}
.loopa-course-map__setup{padding:clamp(28px,5vw,56px);border:1px dashed var(--rule-dk);
text-align:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
color:rgba(253,241,212,.6)}
/* the map's own frame, now that it sits inside a band rather than on a page */
.loopa-course-map .map{margin-inline:0}
/* Gutenberg cannot run the interactive drawing inside ServerSideRender. Show
the real event copy instead of a tall, empty canvas with one loading line. */
.loopa-course-map__editor-preview{color:var(--paper-hi);padding:clamp(24px,4vw,48px)}
.loopa-course-map__editor-title{border-bottom:1px solid var(--rule-dk);padding-bottom:20px}
.loopa-course-map__editor-title>span{color:var(--gold);display:block;font-size:9px;letter-spacing:.24em;margin-bottom:8px;text-transform:uppercase}
.loopa-course-map__editor-title>strong{display:block;font-family:'Bebas Neue',Impact,sans-serif;font-size:clamp(28px,4vw,48px);font-weight:400;letter-spacing:.06em}
.loopa-course-map__editor-title p,.loopa-course-map__editor-empty{color:rgba(253,241,212,.65);font-size:12px;line-height:1.6;margin:8px 0 0}
.loopa-course-map__editor-holes{display:grid;gap:1px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px;background:var(--rule-dk)}
.loopa-course-map__editor-holes>div{background:rgba(4,20,26,.72);min-height:150px;padding:16px}
.loopa-course-map__editor-holes img{aspect-ratio:16/9;display:block;margin:-16px -16px 14px;object-fit:cover;width:calc(100% + 32px)}
.loopa-course-map__editor-holes span{color:var(--gold);display:block;font-size:8px;letter-spacing:.2em;text-transform:uppercase}
.loopa-course-map__editor-holes strong{display:block;font-family:'Bebas Neue',Impact,sans-serif;font-size:20px;font-weight:400;letter-spacing:.05em;margin-top:5px}
.loopa-course-map__editor-holes p{color:rgba(253,241,212,.6);font-size:11px;line-height:1.55;margin:8px 0 0}
@media(max-width:780px){.loopa-course-map__editor-holes{grid-template-columns:1fr 1fr}}