/* ============================================================ "Field Survey" — TaxaTrack's shared theme Printed-topographic-quad palette + tree-of-life motif. Loaded globally from base.html so every screen inherits it. Rethemes via Bootstrap CSS vars + the design tokens in :root below. Fonts (Overpass + Spectral) are linked from base.html . ============================================================ */ :root { /* Printed-quad palette */ --tt-paper: #F4EFE3; /* map sheet — page background */ --tt-paper-2: #FBF8F1; /* raised surfaces (cards) */ --tt-ink: #2C2924; /* sepia-black text */ --tt-ink-2: #5F574A; /* muted ink */ --tt-brown: #8A6D3B; /* contour brown — primary */ --tt-brown-d: #6E552C; /* darker brown — hover/links */ --tt-green: #5E7551; /* vegetation tint — secondary */ --tt-water: #4E7E9B; /* topo water blue — accent */ --tt-tan: #C9B896; /* mid-elevation hypsometric tint */ --tt-clay: #A6553A; /* warning/danger, kept natural */ --tt-line: #DED4BF; /* hairlines on paper */ /* Back-compat aliases for existing component classes */ --tt-bg: var(--tt-paper); --tt-blue: var(--tt-water); --tt-teal: var(--tt-green); --tt-contour: var(--tt-tan); /* Bootstrap retheme (drives buttons, links, nav, cards, etc.) */ --bs-body-bg: var(--tt-paper); --bs-body-color: var(--tt-ink); --bs-primary: var(--tt-brown); --bs-primary-rgb: 138,109,59; --bs-link-color: var(--tt-brown-d); --bs-link-color-rgb: 110,85,44; --bs-link-hover-color: var(--tt-brown); --bs-border-color: var(--tt-line); --bs-font-sans-serif: 'Overpass', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* Type: map-lettering sans for headings/UI, field-guide serif for prose */ body { background-color: var(--tt-paper); color: var(--tt-ink); font-family: 'Spectral', Georgia, 'Times New Roman', serif; } h1,h2,h3,h4,h5,h6,.navbar-brand,.btn,.nav-link,.badge,label,.form-label, .table thead th,.tt-chip,.tt-pill-muted,.tt-badge-mini { font-family: var(--bs-font-sans-serif); } h1,h2,h3 { letter-spacing: -.01em; } /* Water features get the classic topo italic-serif blue treatment */ .tt-water-label { font-family: 'Spectral', Georgia, serif; font-style: italic; color: var(--tt-water); } /* Buttons / links follow the brown primary */ .btn-primary { --bs-btn-bg: var(--tt-brown); --bs-btn-border-color: var(--tt-brown); --bs-btn-hover-bg: var(--tt-brown-d); --bs-btn-hover-border-color: var(--tt-brown-d); --bs-btn-active-bg: var(--tt-brown-d); --bs-btn-active-border-color: var(--tt-brown-d); } .btn-outline-primary { --bs-btn-color: var(--tt-brown-d); --bs-btn-border-color: var(--tt-brown); --bs-btn-hover-bg: var(--tt-brown); --bs-btn-hover-border-color: var(--tt-brown); --bs-btn-active-bg: var(--tt-brown-d); } .text-primary { color: var(--tt-brown-d) !important; } /* Nav bar as a map "collar" */ .navbar { background-color: var(--tt-paper-2) !important; border-bottom: 1px solid var(--tt-line) !important; } .navbar .nav-link { color: var(--tt-ink-2); } .navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--tt-brown-d); } .navbar-brand { color: var(--tt-ink); } /* Home-page header: a taller, more prominent top row (opt-in via the {% block navbar_class %} hook, so only the landing page gets it). */ .tt-nav-lg { --bs-navbar-padding-y: .95rem; } .tt-nav-lg .navbar-brand { font-size: 1.75rem; } .tt-nav-lg .nav-link { font-size: 1.1rem; } .tt-nav-lg .btn { font-size: 1.05rem; padding: .5rem 1.05rem; } .tt-nav-lg .user-badge { font-size: 1.05rem; } @media (min-width: 992px) { .tt-nav-lg .navbar-nav { gap: .5rem; } } /* Full-page topographic watermark — REAL terrain of Cooke City, Montana: Ken Cummins's town at Yellowstone's northeast gate (926 m of relief in the surrounding Absaroka-Beartooth country). Fetched elevation grid -> marching squares -> Catmull-Rom-smoothed Bezier contours (20 m interval; index contours every 100 m drawn heavier, as on a printed quad). Fixed behind all content so the whole page reads as printed on his ground. */ /* The whole page is printed on ONE continuous topo sheet that SCROLLS WITH the content (not a fixed backdrop the content floats over). The stage is a positioned full-bleed wrapper; the terrain + benchmark are absolute layers that fill its entire height, so the contours run top-to-bottom and the map — Cooke City with it — travels with the page as you scroll. */ .tt-topo-stage { position: relative; } .tt-topo-stage > .tt-page-topo, .tt-topo-stage > .tt-cooke-marker { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Span the stage's own full width — NOT 100vw. 100vw includes the vertical scrollbar's width, so when a page scrolls it pushes this layer a few px past the viewport and the whole page reads slightly too wide. The .tt-topo-stage wrapper already spans the full content width, so 100% is full-bleed without the overflow. */ pointer-events: none; } .tt-page-topo { z-index: -2; opacity: .38; color: #B49B6E; -webkit-mask-image: linear-gradient(180deg, #000 93%, rgba(0,0,0,.5) 100%); mask-image: linear-gradient(180deg, #000 93%, rgba(0,0,0,.5) 100%); } .tt-page-topo path { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .tt-page-topo .reg path { stroke-width: .6px; } .tt-page-topo .idx path { stroke-width: 1.1px; stroke: #A98A57; } /* Cooke City survey benchmark — pinned to the town INSIDE the map's own coordinate system. This layer shares the terrain's exact viewBox and preserveAspectRatio, so the mark lands on Cooke City's grid point at every viewport size and scroll offset — it can't drift off his town. Sits just above the contours, behind content; scales with the sheet (tuned for desktop). */ .tt-cooke-marker { z-index: -1; opacity: .9; } .tt-cooke-marker .bm-stroke path, .tt-cooke-marker .bm-stroke circle { vector-effect: non-scaling-stroke; } /* Hero — now a transparent sheet so the terrain watermark reads through it; just a faint elevation-tint glow + hairline, no opaque fill. */ .tt-hero { position: relative; overflow: hidden; border-radius: .75rem; background-color: transparent; background-image: radial-gradient(900px 480px at 82% -20%, rgba(94,117,81,.15), transparent 62%), radial-gradient(720px 400px at -8% 115%, rgba(78,126,155,.13), transparent 62%), radial-gradient(500px 300px at 55% 120%, rgba(166,85,58,.08), transparent 60%); border: 1px solid var(--tt-line); } .tt-hero h1 { color: var(--tt-ink); } .tt-hero p.lead { color: var(--tt-ink-2); } .tt-hero .hero-title { padding-right: .5rem; padding-left: .5rem; margin-top: .25rem; margin-bottom: .25rem; } .tt-parallax { display: none; } /* Give the hero a little extra bottom room so its border clears the Cooke City benchmark that sits over it — the box should close BELOW "For Ken", not cut through the mark. Desktop only (that's where they overlap). */ @media (min-width: 768px) { .tt-hero { padding-bottom: 7.5rem !important; } } /* Tree-of-life divider (branch + survey-marker nodes) */ .tt-treediv { display:flex; align-items:center; gap:.9rem; margin:.25rem 0 2rem; } .tt-treediv::before, .tt-treediv::after { content:""; height:1px; background:var(--tt-line); flex:1; } .tt-treediv svg { color: var(--tt-brown); flex:0 0 auto; } /* Hero illustration card */ .tt-hero-ill svg { width: 100%; height: auto; display: block; border-radius: .75rem; } .tt-abstract-card { filter: drop-shadow(0 10px 22px rgba(44,41,36,.10)); } @keyframes ttFadeUp { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} } .tt-hero-ill .pill-anim-1 { animation: ttFadeUp .4s ease-out .05s both; } .tt-hero-ill .pill-anim-2 { animation: ttFadeUp .45s ease-out .10s both; } .tt-hero-ill .pill-anim-3 { animation: ttFadeUp .5s ease-out .15s both; } .tt-hero-ill .pill-anim-4 { animation: ttFadeUp .55s ease-out .20s both; } .tt-hero-ill .pill-anim-5 { animation: ttFadeUp .6s ease-out .25s both; } .tt-hero-ill .pill-anim-6 { animation: ttFadeUp .65s ease-out .30s both; } /* Cards / tiles on paper */ .card, .tt-feature, .tt-tile, .tt-tile3, .tt-proof-card { background-color: var(--tt-paper-2); border: 1px solid var(--tt-line); border-radius: .75rem; } .tt-feature { transition: transform .12s ease, box-shadow .12s ease; } .tt-feature:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(44,41,36,.10); } .tt-proof-card { box-shadow: 0 .75rem 1.5rem rgba(44,41,36,.08); } .tt-proof-caption { color: var(--tt-ink-2); } .tt-tile { box-shadow: 0 .5rem 1.25rem rgba(44,41,36,.06); } /* Tables: calm on paper so data stays legible */ .tt-table-dim tbody td, .tt-table-dim tbody th { background-color: var(--tt-paper-2); } .tt-table-dim thead th { background-color: #EEE6D5 !important; color: var(--tt-ink-2); } .tt-table-sticky thead th { position: sticky; top: 0; z-index: 2; background-color: #EEE6D5; } /* Chips / pills → vegetation green + water (taxa = tree of life) */ .tt-chip { display:inline-block; padding:.25rem .6rem; background: rgba(94,117,81,.16); color: var(--tt-green); border-radius: 999px; font-weight: 600; font-size:.825rem; } .tt-chip-muted { background: rgba(78,126,155,.14); color: var(--tt-water); } /* Habitat composition pills — a stronger water fill so the waterbody-type group reads as its own set beside the green taxa chips. */ .tt-chip-water { background: rgba(78,126,155,.22); color: #2c5468; } .tt-pill-muted { display:inline-block; padding:.25rem .5rem; border-radius: .5rem; background: #EEE6D5; color: var(--tt-ink-2); font-size:.75rem; } .tt-row { border:1px solid var(--tt-line); background: var(--tt-paper-2); border-radius:.5rem; padding:.5rem .75rem; } .tt-row + .tt-row { margin-top:.5rem; } .tt-row .tt-warn { color:#8A4B22; background:#FBF1E4; border:1px solid var(--tt-tan); border-radius:.35rem; padding:.05rem .4rem; font-size:.75rem; } .tt-row .tt-ok { color:#3C5233; background:#E4EBDD; border-radius:.35rem; padding:.05rem .4rem; font-size:.75rem; } .tt-tile-footer { display:flex; gap:.5rem; align-items:center; justify-content:space-between; } .tt-mini { font-size:.875rem; color: var(--tt-ink-2); } .tt-label-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:.75rem; } .tt-mini-label { background: var(--tt-paper-2); border:1px solid var(--tt-line); border-radius:.6rem; padding:.5rem .6rem; min-height:42px; } .tt-mini-label.focus { outline:2px solid rgba(138,109,59,.35); outline-offset:0; } .tt-mini-label .sub { font-size:.75rem; color: var(--tt-ink-2); } .tt-mini-guides { border:1px dashed var(--tt-line); border-radius:.5rem; padding:.35rem; } .tt-badge-mini { display:inline-block; font-size:.65rem; font-weight:600; padding:.1rem .35rem; border-radius:.35rem; background: rgba(78,126,155,.16); color: var(--tt-water); } /* Popover sizing + the small ⓘ info trigger (touch-friendly via hover/focus). Shared by the landing chapter cards and the group-grade column help. */ .tt-pop { --bs-popover-max-width: 320px; } .tt-help { font-size: .85rem; line-height: 1; text-decoration: none; vertical-align: baseline; } /* Chapter-card role pills — icon chips showing which roles a chapter serves (Pro / Instructor / Student). Uniform muted so they read as a quiet tag set beside the louder availability pill. */ .tt-role { display:inline-flex; align-items:center; justify-content:center; width:1.35rem; height:1.35rem; border-radius:.4rem; background: rgba(78,126,155,.14); color: var(--tt-water); } .tt-role svg { width:.8rem; height:.8rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* Empty-state guidance card — shown on a blank page to orient a stuck user: what this space is for + the one action that starts them off. */ .tt-empty { max-width: 46rem; margin-inline: auto; padding: 2.5rem 1.5rem; text-align: center; } .tt-empty-icon { font-size: 2.5rem; line-height: 1; margin-bottom: .5rem; } .tt-empty-body { max-width: 34rem; margin-inline: auto; } /* Analysis full-metric table + references list */ .tt-metric-table .tt-metric-cat th { background: var(--tt-paper); color: var(--tt-ink-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; border-top: 1px solid var(--tt-line); } .tt-refs { padding-left: 1.15rem; margin-bottom: 0; } .tt-refs li { margin-bottom: .4rem; } /* Pricing helpers (were undefined → now on-theme) */ .tt-price-badge { display:inline-block; font-weight:600; padding:.1rem .45rem; border-radius:.4rem; background: rgba(138,109,59,.15); color: var(--tt-brown-d); } .tt-note { color: var(--tt-ink-2); font-size:.9rem; } /* Map-legend color accents — adds green / rust-red / water without bright fills. A colored top rule on cards, the way a quad keys its features. */ .tt-accent-green { border-top: 3px solid var(--tt-green) !important; } .tt-accent-water { border-top: 3px solid var(--tt-water) !important; } .tt-accent-clay { border-top: 3px solid var(--tt-clay) !important; } .tt-accent-brown { border-top: 3px solid var(--tt-brown) !important; } /* Mini division tags — flag a demo/section as Lab or Field at a glance. */ .tt-tag-lab, .tt-tag-field { display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.02em; padding:.12rem .5rem; border-radius:999px; vertical-align:middle; } .tt-tag-lab { background: rgba(94,117,81,.16); color: var(--tt-green); } .tt-tag-field { background: rgba(78,126,155,.16); color: var(--tt-water); } /* Project rows sit flush inside a titled section tile (My Projects): blend into the tile's paper, separated only by the theme rule. */ .tt-tile .list-group-flush .list-group-item { background: transparent; border-color: var(--tt-line); } .tt-tile .list-group-flush .list-group-item:first-child { border-top: 0; } .tt-tile .list-group-flush .list-group-item:last-child { border-bottom: 0; } /* Leaflet "Re-center on all sites" control — matches the +/- zoom bar. */ .leaflet-bar a.tt-recenter { display: flex; align-items: center; justify-content: center; color: #333; text-decoration: none; } .leaflet-bar a.tt-recenter:hover { color: var(--tt-water); } .leaflet-bar a.tt-recenter svg { display: block; } /* Feature row gets a subtle woodland-green tint (the map's vegetation fill) */ .tt-feature { background-color: #ECEFE1; border-color: #D9DEC6; } .tt-feature .fw-semibold.text-primary { color: var(--tt-green) !important; } /* Warnings / attention in topo rust-red, not amber */ .tt-age-warn { color: var(--tt-clay) !important; } .tt-row .tt-warn { color:#8C3D22; background:#F6E4DC; border:1px solid #E0B7A6; } .tt-leg-dot { box-shadow: inset 0 0 0 1px rgba(44,41,36,.10); } /* A touch of rust on the section-heading pill + institutions accent */ .badge.text-bg-light { background-color:#EEE6D5 !important; color: var(--tt-ink-2) !important; border-color: var(--tt-line) !important; } /* Dedication — a restrained tribute to Ken at the foot of the page */ .tt-tribute { max-width: 640px; margin-left:auto; margin-right:auto; color: var(--tt-ink-2); } .tt-tribute-name { font-family:'Spectral', Georgia, serif; font-size:1.15rem; color: var(--tt-ink); } .tt-tribute-role { font-style:italic; color: var(--tt-water); margin-top:.1rem; } .tt-tribute-dates { font-family:'Overpass', system-ui, sans-serif; letter-spacing:.2em; font-size:.78rem; color: var(--tt-ink-2); margin-top:.15rem; } .tt-tribute-legacy { font-size:.9rem; line-height:1.55; margin:.65rem auto 1rem; } .tt-tribute-quote { font-family:'Spectral', Georgia, serif; font-style:italic; color: var(--tt-ink); font-size:1rem; line-height:1.65; border:0; border-top:1px solid var(--tt-line); border-bottom:1px solid var(--tt-line); padding:.9rem 0; margin:1.1rem auto; max-width:560px; } .tt-tribute-quote cite { display:block; font-style:normal; font-family:'Overpass', system-ui, sans-serif; font-size:.72rem; letter-spacing:.05em; color: var(--tt-ink-2); margin-top:.55rem; } .tt-tribute-more { margin:.5rem 0 .1rem; } .tt-tribute-more a { font-family:'Overpass', system-ui, sans-serif; font-size:.82rem; color: var(--tt-water); text-decoration:none; } .tt-tribute-more a:hover { text-decoration:underline; } .tt-forken { font-family:'Overpass', system-ui, sans-serif; text-transform:uppercase; letter-spacing:.34em; font-size:.72rem; color: var(--tt-brown-d); margin-top:.4rem; } /* --- Demo data-viz retint: recolor hardcoded blues to the palette without editing each SVG node (CSS beats inline presentation attrs) --- */ [fill="#0D6EFD"] { fill: var(--tt-water) !important; } [stroke="#0D6EFD"] { stroke: var(--tt-water) !important; } [fill="rgba(13,110,253,.12)"] { fill: rgba(138,109,59,.15) !important; } [fill="rgba(13,110,253,.35)"] { fill: rgba(78,126,155,.45) !important; } [fill="rgba(13,110,253,.5)"] { fill: rgba(78,126,155,.62) !important; } [fill="rgba(13,110,253,.7)"] { fill: rgba(78,126,155,.82) !important; } [stroke="rgba(12,26,75,0.08)"] { stroke: rgba(138,109,59,.22) !important; } @media (prefers-reduced-motion: reduce) { .tt-layer { transform: none !important; } } /* --------------------------------------------------------------- Shared navbar / chrome tweaks (promoted from base.html) --------------------------------------------------------------- */ .brand { font-weight: 600; text-decoration: none; color: inherit; } .muted { color: var(--tt-ink-2); } .user-badge { font-size: .95rem; color: var(--tt-ink-2); } .tt-card { border-radius: .75rem; } /* --------------------------------------------------------------- Semantic-color retint (cosmetic pass) Bootstrap's non-primary scales (success / warning / danger / info / secondary) were never mapped to the Field Survey palette, so they rendered as stock green/amber/red/blue/grey on the warm paper. Retint the CHROME uses — muted text, alerts, contextual badges, outline buttons, and warning table rows — to palette tints here, in ONE place, so individual templates don't each carry off-brand utility classes. Warnings resolve to topo RUST, never amber (per the palette's stance). DELIBERATELY LEFT ALONE: status data-viz that encodes meaning — the .bg-success/.bg-warning/.bg-danger grade & contribution bars/dots and the HBI band ramp — so their signal isn't flattened. --------------------------------------------------------------- */ /* Muted text → warm ink (not Bootstrap's cool grey #6c757d) */ :root { --bs-secondary-color: var(--tt-ink-2); --bs-secondary-color-rgb: 95,87,74; } /* Text utilities → palette (warning/danger both go rust, never amber/pure red) */ .text-success { color: var(--tt-green) !important; } .text-danger { color: var(--tt-clay) !important; } .text-warning { color: var(--tt-clay) !important; } .text-info { color: var(--tt-water) !important; } /* Alerts → soft palette tints (message flashes + inline form errors) */ .alert-success { --bs-alert-bg:#E4EBDD; --bs-alert-border-color:#C6D2B6; --bs-alert-color:#3C5233; } .alert-info { --bs-alert-bg:#E1EAF0; --bs-alert-border-color:#B9CDD9; --bs-alert-color:#2E5468; } .alert-warning { --bs-alert-bg:#FBF1E4; --bs-alert-border-color:var(--tt-tan); --bs-alert-color:#8A4B22; } .alert-danger { --bs-alert-bg:#F6E4DC; --bs-alert-border-color:#E0B7A6; --bs-alert-color:#8C3D22; } /* Solid contextual badges → palette */ .text-bg-success { background-color: var(--tt-green) !important; color:#fff !important; } .text-bg-info { background-color: var(--tt-water) !important; color:#fff !important; } .text-bg-warning { background-color: var(--tt-clay) !important; color:#fff !important; } .text-bg-danger { background-color: var(--tt-clay) !important; color:#fff !important; } .text-bg-secondary { background-color:#EEE6D5 !important; color: var(--tt-ink-2) !important; } /* Warning table rows → clay (keeps the "flagged" read, drops the amber) */ .table-warning { --bs-table-bg:#F6E4DC; --bs-table-border-color:#E0B7A6; --bs-table-color:#8C3D22; } /* Neutral / contextual buttons → palette (neutral=hairline+ink, success=green) */ .btn-outline-secondary { --bs-btn-color: var(--tt-ink-2); --bs-btn-border-color: var(--tt-line); --bs-btn-hover-bg: rgba(138,109,59,.10); --bs-btn-hover-border-color: var(--tt-brown); --bs-btn-hover-color: var(--tt-brown-d); --bs-btn-active-bg: rgba(138,109,59,.16); --bs-btn-active-border-color: var(--tt-brown); --bs-btn-active-color: var(--tt-brown-d); } .btn-outline-success { --bs-btn-color: var(--tt-green); --bs-btn-border-color: var(--tt-green); --bs-btn-hover-bg: var(--tt-green); --bs-btn-hover-border-color: var(--tt-green); --bs-btn-hover-color:#fff; --bs-btn-active-bg: var(--tt-green); } .btn-success { --bs-btn-bg: var(--tt-green); --bs-btn-border-color: var(--tt-green); --bs-btn-hover-bg:#4F6344; --bs-btn-hover-border-color:#4F6344; --bs-btn-active-bg:#4F6344; }