/* ==========================================================================
ELEVATION DETAILING — Altitude / Topographic brand layer
--------------------------------------------------------------------------
Link this AFTER your main stylesheet:
Requires two assets in /assets: topo.svg and topo-amber.svg
Everything else (peak glyph, ridgeline, watermark) is baked in below.
Purely additive — no existing rules are touched. Tune it all from :root.
WHERE TO ADD CLASSES (that's all the markup you touch):
• Add class="topo-section" to each you want textured.
- optional topo-wm-left (put watermark bottom-LEFT)
- optional no-wm (texture only, no watermark)
• Add class="topo-card" to the Full Detail card + membership cards.
• Change your feature
to
(peak bullets).
• On each mono eyebrow, add class="topo-eyebrow" (swaps the dash for a peak).
• Between two sections, paste:
- variants: ridge--b (2nd profile), ridge--flip (mirror)
• On each tier card add: ALT 5,280 FT
Base Camp 5,280 · Ridgeline 8,400 · Summit 11,750
========================================================================== */
:root{
--topo-tile: 760px; /* matches the SVG tile — don't change */
--topo-bg-opacity: .05; /* section contour texture (3–5%) */
--topo-card-opacity: .07; /* amber contour inside cards (6–8%) */
--topo-wm-opacity: .03; /* corner peak watermark (2–4%) */
--ridge-h: 96px; /* divider height (desktop) */
--peak: #d4a24a; /* peak-glyph amber */
--alt-tag-color: rgba(244,242,236,.42);
}
/* 1 ── SECTION CONTOUR TEXTURE + CORNER WATERMARK ─────────────────────────── */
.topo-section{ position:relative; isolation:isolate; }
.topo-section::before{ /* seamless topographic field */
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:url("assets/topo.svg") repeat;
background-size:var(--topo-tile) var(--topo-tile);
opacity:var(--topo-bg-opacity);
}
.topo-section::after{ /* faint peak signature, bottom-right */
content:""; position:absolute; right:0; bottom:0; z-index:-1; pointer-events:none;
width:min(38vw,420px); aspect-ratio:320 / 210;
background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20210'%3E%3Cpath%20d='M6,204%2078,64%20118,118%20168,30%20214,104%20258,72%20314,204Z'%20fill='%23f4f2ec'/%3E%3C/svg%3E") no-repeat right bottom / contain;
opacity:var(--topo-wm-opacity);
}
.topo-section.topo-wm-left::after{
right:auto; left:0; background-position:left bottom; transform:scaleX(-1);
}
.topo-section.no-wm::after{ display:none; }
/* 2 ── AMBER CONTOUR TEXTURE INSIDE CARDS ─────────────────────────────────── */
.topo-card{ position:relative; isolation:isolate; }
.topo-card::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
border-radius:inherit;
background:url("assets/topo-amber.svg") repeat;
background-size:var(--topo-tile) var(--topo-tile);
opacity:var(--topo-card-opacity);
}
/* 3 ── PEAK BULLET MARKERS ────────────────────────────────────────────────── */
ul.peak-list{ list-style:none; padding-left:0; margin:0; }
ul.peak-list > li{
position:relative;
display:flex;
align-items:flex-start;
gap:.7em;
padding-left:0;
}
ul.peak-list > li::before{
content:"";
flex:0 0 auto;
width:.9em;
height:.72em;
margin-top:.42em; /* optically center with first text line */
background-color:var(--peak);
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2011'%3E%3Cpath%20d='M0.8,10.2%205,2.2%207.4,6%209,3.8%2013.2,10.2Z'%20fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2011'%3E%3Cpath%20d='M0.8,10.2%205,2.2%207.4,6%209,3.8%2013.2,10.2Z'%20fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* drop-in marker if a given list can't become a