/* ============================================================ Golf Course Maps — Design Tokens Two themes, switched with `data-theme` on : modern (default) — carries the in-house lake-map DNA across to golf: deep forest-green rough, navy water with the signature cream/white halo, sand cart paths, navy hole markers, mint accents. heritage — parchment-and-sepia estate map for traditional clubs. The variable NAMES are deliberately inherited from the lake-map build so builder.css / cloud.css / tweaks.css keep working untouched. Their VALUES and meanings are golf now: --lm-bg rough (the ground the course sits on) --lm-water water hazards --lm-path cart paths + bunker sand --lm-trees woodland --lm-pin-* hole number markers --lm-zone-danger out of bounds Golf-only additions use the --gm-* prefix. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400..800&family=Barlow+Condensed:wght@500;600;700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Mona+Sans:ital,wght@0,400..900;1,400..900&family=Nunito:wght@400;600;700;800&display=swap"); :root, :root[data-theme="modern"] { /* --- Surfaces --- */ --lm-bg: #0E3B2E; /* deep rough — the canvas */ --lm-bg-deep: #0A2C22; /* darker, panels */ --lm-bg-soft: #1A4D3B; /* lifted surface */ /* --- Turf hierarchy (light → dark reads as mown → unmown) --- */ --gm-rough: #0E3B2E; --gm-rough-outer: #0B2D23; /* widest hole halo band (floodlit uses it) */ --gm-semi-rough: #1B5238; --gm-fairway: #2F7A4F; --gm-tee: #3E8C5C; --gm-green: #58B87A; /* putting surface — brightest turf */ --gm-green-edge: #7AD9B0; /* collar */ /* --- Hazards --- */ --gm-bunker: #E8D29C; --gm-bunker-edge: #C8AE74; --lm-water: #1E4170; /* water hazard fill */ --gm-water-deep: #142F52; /* gradient edge */ --lm-water-edge: #FFFFFF; /* crisp rim */ --lm-water-glow: rgba(255,255,255,0.20); /* --- Land features --- */ --lm-path: #E8D29C; /* cart path */ --lm-path-line: #C8AE74; --lm-road: #BDBAB1; /* service road */ --lm-road-line: #8E8B83; --lm-fence: #9C9A92; /* boundary fence */ --lm-building: #7B5028; /* roofs */ --gm-building-pad: #E8D29C; --lm-island: #245C3D; /* practice ground fill */ --lm-island-soft: #2E6645; --lm-trees: #1F4A33; /* woodland mass */ --lm-trees-soft: rgba(58,122,82,0.55); --gm-tree-light: #3A7A52; /* --- Hole markers & icons --- */ --lm-pin-fill: #0F2D54; /* navy disc */ --lm-pin-stroke: #FFFFFF; --lm-pin-text: #FFFFFF; --lm-icon-tile: #0F2D54; --lm-icon-glyph: #FFFFFF; --gm-flag-pole: #FFFFFF; --gm-flag-cloth: #B33636; /* --- Type & accents --- */ --lm-ink: #FFFFFF; --lm-ink-soft: rgba(255,255,255,0.78); --lm-mint: #7AD9B0; /* course name + key labels */ --lm-mint-soft: #A7E8CD; --lm-fish: rgba(255,255,255,0.18); /* brand-mark watermark */ /* --- Zones --- */ --lm-zone-danger: #B33636; /* out of bounds hatch */ --lm-zone-line: #FFFFFF; /* OB stake line (dashed) */ /* --- Generic zone presets (the coloured-polygon tool) --- */ --gm-zone-grey: #6E7A74; /* car park / hardstanding */ --gm-zone-waste: #C9B489; /* waste area / sandy scrub */ --gm-zone-heather: #6B5A7E; /* heather */ --gm-zone-gorse: #7E8C3A; /* gorse / scrub */ --gm-zone-wetland: #2F6B6B; /* wetland / marsh */ --gm-zone-paved: #9A9287; /* paved area / patio */ /* --- Tee-box markers --- */ --gm-tee-black: #14181C; --gm-tee-gold: #D4A93C; --gm-tee-blue: #2F6FB5; --gm-tee-white: #F2F2F0; --gm-tee-yellow: #E8CE4A; --gm-tee-red: #C0453F; --gm-tee-green: #4C9A5E; /* --- Green surround (collar / apron) --- */ --gm-green-collar: #46A06A; /* --- Panels (key + scorecard drawn ON the map) --- */ --gm-panel: #0A2C22; --gm-panel-edge: #2F7A4F; /* --- Strokes & sizing (canvas is 1920×1080) --- */ --lm-stroke-w: 3; --lm-path-w: 14; /* cart path width */ --gm-fairway-w: 56; /* default fairway corridor */ --gm-semi-extra: 17; /* semi-rough band each side */ --lm-pin-r: 26; /* hole marker radius */ /* --- Type --- */ --lm-font: "Gilroy", "Mona Sans", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; --gm-font-map: var(--lm-font); --lm-font-weight-bold: 800; --lm-font-weight-semi: 600; --lm-font-weight-reg: 500; --gm-title-transform: none; --gm-title-spacing: 0; /* --- App chrome (the builder UI itself) --- */ --app-bg: #0A1F18; --app-panel: #133A2D; --app-panel-2: #0F2E23; --app-border: rgba(255,255,255,0.08); --app-ink: #E8F4EE; --app-ink-dim: rgba(232,244,238,0.62); --app-accent: #58B87A; --app-radius: 12px; --app-radius-sm: 8px; --app-shadow: 0 8px 24px rgba(0,0,0,0.35); } /* ------------------------------------------------------------ Heritage — parchment estate map. Only the MAP tokens change; the builder chrome stays dark so the app itself doesn't flip to a light UI mid-session. ------------------------------------------------------------ */ :root[data-theme="heritage"] { --lm-bg: #F2E8D5; --lm-bg-deep: #E6DAC2; --lm-bg-soft: #EADFC7; --gm-rough: #B7BF95; --gm-semi-rough: #C8CFA6; --gm-fairway: #DDE2BB; --gm-tee: #CBD3A4; --gm-green: #9DBA7E; --gm-green-edge: #7D9C60; --gm-bunker: #F7EED5; --gm-bunker-edge: #C2A97A; --lm-water: #9DC0CC; --gm-water-deep: #7CA3B4; --lm-water-edge: #FFFFFF; --lm-water-glow: rgba(255,255,255,0.35); --lm-path: #D8BB8E; --lm-path-line: #B9976B; --lm-road: #C2B49B; --lm-road-line: #94856C; --lm-fence: #A2937A; --lm-building: #8A6A45; --gm-building-pad: #F7EED5; --lm-island: #C3CDA0; --lm-island-soft: #D2DAB4; --lm-trees: #6E8455; --lm-trees-soft: rgba(147,168,118,0.55); --gm-tree-light: #93A876; --lm-pin-fill: #3A4630; --lm-pin-stroke: #F2E8D5; --lm-pin-text: #F2E8D5; --lm-icon-tile: #3A4630; --lm-icon-glyph: #F2E8D5; --gm-flag-pole: #3A2E1F; --gm-flag-cloth: #A85B4A; --lm-ink: #3A2E1F; --lm-ink-soft: rgba(58,46,31,0.78); --lm-mint: #6B5C43; --lm-mint-soft: #8A7A5E; --lm-fish: rgba(58,46,31,0.16); --lm-zone-danger: #A85B4A; --lm-zone-line: #7A4638; --gm-zone-grey: #B0AFA6; --gm-zone-waste: #E4D5B0; --gm-zone-heather: #A996B4; --gm-zone-gorse: #C2C48A; --gm-zone-wetland: #9CB8B4; --gm-zone-paved: #D3C9B6; --gm-tee-black: #3A342C; --gm-tee-gold: #C9A34A; --gm-tee-blue: #6F92B5; --gm-tee-white: #FBF6EA; --gm-tee-yellow: #DCC468; --gm-tee-red: #B4685F; --gm-tee-green: #86A87E; --gm-green-collar: #B0C894; --gm-panel: #EADFC7; --gm-panel-edge: #B9A987; --gm-font-map: "EB Garamond", "Playfair Display", Georgia, "Times New Roman", serif; --gm-title-transform: uppercase; --gm-title-spacing: 0.06em; } /* ------------------------------------------------------------ v2 "Floodlit" — near-black course map for the v2 chrome. Same --lm- and --gm- variable NAMES (so map-renderer.jsx is untouched); values repainted to the v2 palette. This is the modern map, migrated: theme key `floodlit`. ------------------------------------------------------------ */ :root[data-theme="floodlit"] { --lm-bg: #07090B; /* §5: near-black turf — the ground */ --lm-bg-deep: #05070A; --lm-bg-soft: #0C1811; --gm-rough: #07090B; /* whole-canvas ground stays near-black */ --gm-rough-outer: #0C1410; /* §5 roughOuter — widest hole halo band */ --gm-semi-rough: #12241A; /* §5 rough — the band hugging the fairway */ --gm-fairway: #1D3F2C; --gm-tee: #2A5A3E; --gm-green: #5CF7A6; --gm-green-edge: #7CF5B5; --gm-bunker: #FFD98A; --gm-bunker-edge: #8A6F2E; --lm-water: #17A6D6; --gm-water-deep: #0A6E93; --lm-water-edge: #FFFFFF; --lm-water-glow: rgba(255,255,255,0.35); --lm-path: #38424E; --lm-path-line: #566270; --lm-road: #4A555F; --lm-road-line: #6B7784; --lm-fence: #566270; --lm-building: #2A3340; --gm-building-pad: #38424E; --lm-island: #163A28; --lm-island-soft: #1E4A32; --lm-trees: #0C1811; --lm-trees-soft: rgba(30,74,49,0.55); --gm-tree-light: #1E4A31; --gm-wood-dot: #1E4A31; /* dotted-outline / stipple dot */ --lm-pin-fill: #3EE68B; --lm-pin-stroke: #04120A; --lm-pin-text: #04120A; --lm-icon-tile: #0E1016; --lm-icon-glyph: #EAF2EC; --gm-flag-pole: #EAF2EC; --gm-flag-cloth: #F2545B; --lm-ink: #EAF2EC; --lm-ink-soft: rgba(234,242,236,0.72); --lm-mint: #3EE68B; --lm-mint-soft: #7CF5B5; --lm-fish: rgba(234,242,236,0.14); --lm-zone-danger: #F2545B; --lm-zone-line: #FF8A8F; --gm-zone-grey: #566270; --gm-zone-waste: #C9B489; --gm-zone-heather: #6B5A7E; --gm-zone-gorse: #7E8C3A; --gm-zone-wetland: #2F6B6B; --gm-zone-paved: #6E7A74; --gm-tee-black: #0E1016; --gm-tee-gold: #D4A93C; --gm-tee-blue: #2F6FB5; --gm-tee-white: #F2F2F0; --gm-tee-yellow: #E8CE4A; --gm-tee-red: #C0453F; --gm-tee-green: #4C9A5E; --gm-green-collar: #2C6B45; --gm-panel: #0B1015; --gm-panel-edge: #1D3F2C; --gm-font-map: "Archivo", "Mona Sans", system-ui, sans-serif; /* §5 labels */ --gm-font-num: "Barlow Condensed", "Archivo", sans-serif; /* §5 numerals */ --gm-title-transform: none; --gm-title-spacing: 0; } /* ------------------------------------------------------------ v2 "Estate" — parchment estate map (migrated `heritage`). ------------------------------------------------------------ */ :root[data-theme="estate"] { --lm-bg: #EFE4C9; --lm-bg-deep: #E6DABB; --lm-bg-soft: #EADFC7; --gm-rough: #DCCFA8; --gm-semi-rough: #D2D6A4; --gm-fairway: #C8D2A0; --gm-tee: #CBD5A6; --gm-green: #B6C68C; --gm-green-edge: #7E8A5E; --gm-bunker: #F6EDD2; --gm-bunker-edge: #B8A473; --lm-water: #B7CBD0; --gm-water-deep: #93AEB5; --lm-water-edge: #F7F0DE; --lm-water-glow: rgba(247,240,222,0.4); --lm-path: #DCC9A0; --lm-path-line: #B9976B; --lm-road: #C2B49B; --lm-road-line: #94856C; --lm-fence: #A2937A; --lm-building: #8A6A45; --gm-building-pad: #D8C6A2; --lm-island: #C3CDA0; --lm-island-soft: #D2DAB4; --lm-trees: #9DAE81; --lm-trees-soft: rgba(120,137,94,0.55); --gm-tree-light: #B0BE94; --gm-wood-dot: #78895E; /* dotted-outline / stipple dot */ --lm-pin-fill: #43351F; --lm-pin-stroke: #EFE4C9; --lm-pin-text: #EFE4C9; --lm-icon-tile: #43351F; --lm-icon-glyph: #EFE4C9; --gm-flag-pole: #43351F; --gm-flag-cloth: #8A3B2A; --lm-ink: #43351F; --lm-ink-soft: rgba(67,53,31,0.78); --lm-mint: #8A3B2A; --lm-mint-soft: #A6553F; --lm-fish: rgba(67,53,31,0.16); --lm-zone-danger: #8A3B2A; --lm-zone-line: #6E2E20; --gm-zone-grey: #B0AFA6; --gm-zone-waste: #E4D5B0; --gm-zone-heather: #A996B4; --gm-zone-gorse: #C2C48A; --gm-zone-wetland: #9CB8B4; --gm-zone-paved: #D3C9B6; --gm-tee-black: #3A342C; --gm-tee-gold: #C9A34A; --gm-tee-blue: #6F92B5; --gm-tee-white: #FBF6EA; --gm-tee-yellow: #DCC468; --gm-tee-red: #B4685F; --gm-tee-green: #86A87E; --gm-green-collar: #CBD5A6; --gm-panel: #E7DBBB; --gm-panel-edge: #B9A987; --gm-font-map: "EB Garamond", "Playfair Display", Georgia, "Times New Roman", serif; --gm-font-num: "EB Garamond", Georgia, serif; --gm-title-transform: uppercase; --gm-title-spacing: 0.06em; } /* Mona Sans / Nunito for the modern theme; EB Garamond for heritage. */ * { box-sizing: border-box; } html, body { margin: 0; font-family: var(--lm-font); background: var(--app-bg); color: var(--app-ink); -webkit-font-smoothing: antialiased; } /* Utility — the course-map canvas background */ .lm-canvas-bg { background: var(--lm-bg); }