/* ========================================================================== Detroit Badman Archive — styles.css -------------------------------------------------------------------------- Site-wide stylesheet. Contains ONLY custom styles. Bootstrap 5 is loaded via CDN in each page's , not bundled here. Standards: - WCAG 2.2 Level AA - MSU Digital Accessibility Policy - MSU Basic Checklist Core rules (from CSS_DOCUMENTATION.md): 1. No hardcoded hex values outside :root. 2. No inline style="..." in HTML. The only exception is CSS custom property *values* (e.g., style="--criterion-value: 5;"). 3. Shape, not color, is the identity carrier (WCAG 1.4.1). 4. Every class named in CSS_DOCUMENTATION.md must exist here. This file is the destination the code is being synced to match CSS_DOCUMENTATION.md. See that document for the spec in full. ========================================================================== */ /* ========================================================================== CSS Variables ========================================================================== */ :root { /* Primary Greens — the archive's dominant visual field */ --dba-darkest-green: #0a1f12; --dba-dark-green: #0d2818; --dba-medium-green: #143d26; --dba-content-green: #1a472a; --dba-border-green: #2a623d; --dba-emerald: #50c878; --dba-network-bg: #0a1a0f; /* Kobe Tribute — Purple & Gold accent system */ --dba-purple: #552583; --dba-gold: #d4af37; --dba-purple-light: #b48cd8; /* Used in active nav state — needed AA contrast on dark green */ /* Text Colors */ --dba-text-primary: #e8e8e8; --dba-text-secondary: #c8c8c8; --dba-text-muted: #b0b0b0; --dba-white: #ffffff; /* Modality Colors */ --dba-detective: #3388ff; --dba-revolutionary: #dc3545; --dba-shv: #fd7e14; --dba-gangsta-pimp: #6f42c1; --dba-folk-hero: #d4af37; /* Edge Type Colors (decoupled from modality variables) */ --dba-edge-meta: #d4af37; --dba-edge-p2c: #dc3545; --dba-edge-c2c: #50c878; --dba-edge-org: #3388ff; --dba-edge-cc: #e83e8c; /* Focus */ --dba-focus-ring: #d4af37; } /* ========================================================================== Base Styles ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--dba-dark-green) !important; color: var(--dba-text-primary) !important; background-image: none !important; margin: 0; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; line-height: 1.25; font-weight: 600; } /* ========================================================================== Accessibility Utilities ========================================================================== */ /* Screen-reader-only content (Bootstrap 5 compatibility: both classes) */ .sr-only, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .sr-only-focusable:focus, .visually-hidden-focusable:focus { position: static !important; width: auto !important; height: auto !important; padding: 0.5rem 1rem !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; background-color: var(--dba-gold) !important; color: var(--dba-darkest-green) !important; z-index: 9999; font-weight: bold; } /* Focus styles — WCAG 2.4.7 (Focus Visible) */ *:focus-visible { outline: 3px solid var(--dba-focus-ring) !important; outline-offset: 2px !important; } a:focus-visible { outline: 3px solid var(--dba-focus-ring) !important; outline-offset: 2px !important; text-decoration: underline !important; } /* ========================================================================== Prose Links — site-wide default for body content Scoped to
so navbar/footer link styling stays untouched. ========================================================================== */ main a { color: var(--dba-gold); text-decoration: underline; text-decoration-color: rgba(212, 175, 55, 0.4); text-underline-offset: 0.2em; transition: color 0.15s ease, text-decoration-color 0.15s ease; } main a:hover { color: var(--dba-emerald); text-decoration-color: var(--dba-emerald); } main a:visited { color: var(--dba-gold); } /* mailto links get the same treatment but no "broken word" wrap on long addresses */ main a[href^="mailto:"] { word-break: break-word; } /* Reduced motion — WCAG 2.3.3 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== In-Prose Link Underlines -------------------------------------------------------------------------- Emerald vs. primary text measures 1.73:1 — fails WCAG 1.4.11 non-text contrast. Underline is the non-color cue that satisfies WCAG 1.4.1. Do not remove underlines in body-text contexts. ========================================================================== */ .essay a, p a, .bio-overview a, .data-section a, .cited-in-desc a, .bda-figure-biography a, .bda-source-notes a, .bda-connection-evidence a, .source-link-item a { text-decoration: underline; text-underline-offset: 2px; } /* ========================================================================== Partial Placeholder Min-Heights (FOUC Mitigation) ========================================================================== */ #bda-navbar { min-height: 84px; } #bda-footer { min-height: 72px; } #bda-credentialing-rail { min-height: 400px; } @media (max-width: 991px) { #bda-credentialing-rail { min-height: 120px; } } /* ========================================================================== Site Chrome — Header ========================================================================== */ .site-heading { text-align: center; padding: 3rem 1rem; } .site-heading-upper { display: block; color: var(--dba-gold); font-size: 1.5rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; } .site-heading-lower { display: block; color: var(--dba-text-primary); font-size: 3rem; font-weight: 700; line-height: 1.1; } /* ========================================================================== Site Chrome — Navigation ========================================================================== */ #mainNav { background-color: var(--dba-darkest-green); border-bottom: 1px solid var(--dba-border-green); } .nav-link { color: var(--dba-text-primary); padding: 0.5rem 1rem; } .nav-link:hover { color: var(--dba-gold); } #mainNav .nav-link.active, #mainNav .nav-link[aria-current="page"], #bda-navbar .nav-link.active, #bda-navbar .nav-link[aria-current="page"] { color: var(--dba-purple) !important; font-weight: bold; } .nav-link[aria-current="page"] { color: var(--dba-purple); font-weight: bold; } .dropdown-item { color: var(--dba-text-primary); } .dropdown-menu { background-color: var(--dba-darkest-green); border: 1px solid var(--dba-border-green); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--dba-medium-green); color: var(--dba-gold); } /* ========================================================================== Site Chrome — Footer ========================================================================== */ .footer { background-color: var(--dba-darkest-green) !important; color: var(--dba-text-primary); padding: 3rem 0 2rem; border-top: 1px solid var(--dba-border-green); margin-top: 4rem; } /* ========================================================================== Citation cards (cite.html) Extends .cta-inner for visual containment of citation examples. ========================================================================== */ .bda-cite-card { padding: 1.25rem 1.5rem; } .bda-cite-format { color: var(--dba-gold); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.5rem 0; } .bda-cite-example { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; line-height: 1.6; color: var(--dba-text-primary); } /* Inline code in licensing section — tone down Bootstrap default pink */ main code { color: var(--dba-gold); background-color: rgba(212, 175, 55, 0.08); padding: 0.1em 0.35em; border-radius: 0.25rem; font-size: 0.9em; } /* ========================================================================== About pages — criterion and modality card headings ========================================================================== */ .bda-criterion-heading, .bda-modality-heading { color: var(--dba-gold); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.6rem 0; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .bda-modality-status { color: var(--dba-text-muted); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.15rem 0.5rem; border: 1px solid var(--dba-border-green); border-radius: 0.75rem; background-color: var(--dba-medium-green); } /* ========================================================================== Landing-page navigation cards (archive/, visualizations/) Whole-card click target wrapping a .cta-inner. ========================================================================== */ .bda-archive-card { display: block; text-decoration: none !important; color: inherit !important; height: 100%; transition: transform 0.15s ease; } .bda-archive-card:hover .cta-inner, .bda-archive-card:focus-visible .cta-inner { border: 1px solid var(--dba-gold); background-color: var(--dba-medium-green); } .bda-archive-card .cta-inner { border: 1px solid transparent; transition: border-color 0.15s ease, background-color 0.15s ease; } .bda-archive-card-title { color: var(--dba-gold); margin-top: 0; margin-bottom: 0.75rem; } .bda-archive-card-desc { color: var(--dba-text-primary); line-height: 1.6; } .bda-archive-card-link { color: var(--dba-emerald); font-weight: 600; display: inline-block; } .bda-archive-card:hover .bda-archive-card-link, .bda-archive-card:focus-visible .bda-archive-card-link { color: var(--dba-gold); } /* ========================================================================== Page Sections & Content Boxes ========================================================================== */ .page-section { padding: 5rem 0; } .page-section.cta { background-color: var(--dba-medium-green); } .bg-faded { background-color: var(--dba-content-green); } .cta-inner { background-color: var(--dba-content-green); position: relative; padding: 2rem; border-radius: 0.5rem; } .cta-inner::before { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px solid var(--dba-purple); border-radius: 0.5rem; pointer-events: none; } /* ========================================================================== Section Headings ========================================================================== */ .section-heading { text-align: center; margin-bottom: 3rem; } .section-heading-upper { display: block; color: var(--dba-emerald); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; } .section-heading-lower { display: block; color: var(--dba-text-primary); font-size: 2.5rem; font-weight: 700; line-height: 1.2; } /* ========================================================================== Buttons ========================================================================== */ .btn-primary { background-color: transparent; color: var(--dba-text-primary); border: 2px solid var(--dba-purple); padding: 0.5rem 1.5rem; font-weight: 600; } .btn-primary:hover, .btn-primary:focus { background-color: var(--dba-purple); color: var(--dba-white); border-color: var(--dba-gold); } .btn-xl { padding: 1rem 2.5rem; font-size: 1.1rem; } /* ========================================================================== Intro Section (home page) ========================================================================== */ .intro { padding: 5rem 0; } .intro-img { width: 100%; height: auto; border-radius: 0.5rem; } .intro-text { background-color: var(--dba-content-green); padding: 2rem; border-radius: 0.5rem; border: 2px solid var(--dba-border-green); } .intro-button { margin-top: 1.5rem; } @media (min-width: 992px) { .intro-text { position: relative; margin-left: -3rem; z-index: 2; } } @media (max-width: 991px) { .intro-text { margin-top: 1.5rem; } } /* ========================================================================== Detail Panel Classes -------------------------------------------------------------------------- Emitted by showFigureDetails() and buildSourceLinks() in scripts.js. No inline styles in the JS — all visual properties are class-driven. ========================================================================== */ .figure-detail-name { color: var(--dba-text-primary); font-size: 1.5rem; font-weight: 600; margin-top: 0; margin-bottom: 1rem; } .read-more-toggle { color: var(--dba-emerald); display: block; margin-top: 0.5rem; cursor: pointer; /* In-prose context — inherits underline from in-prose link rule */ } .read-more-toggle:hover, .read-more-toggle:focus { color: var(--dba-gold); } .panel-divider { border: 0; border-top: 1px solid var(--dba-border-green); margin: 1rem 0; } .source-links { margin-top: 0.5rem; margin-bottom: 0; } .source-link-item { margin-bottom: 0.3rem; } .source-link-item a { color: var(--dba-emerald); /* In-prose — gets underline from in-prose link rule */ } .source-link-item a:hover, .source-link-item a:focus { color: var(--dba-gold); } .source-links-empty { color: var(--dba-text-muted); font-style: italic; margin: 0.5rem 0; } /* ========================================================================== Legend — Container ========================================================================== */ .map-legend, .network-legend { background-color: var(--dba-content-green); padding: 1rem; border-radius: 0.5rem; border: 2px solid var(--dba-border-green); } .legend-item { display: flex; align-items: center; margin-bottom: 0.5rem; } .legend-marker { width: 20px; height: 20px; margin-right: 10px; display: inline-block; } /* ========================================================================== Legend — Map Markers (shape + color) ========================================================================== */ .legend-detective { background-color: var(--dba-detective); border-radius: 50%; /* Circle */ } .legend-revolutionary { background-color: var(--dba-revolutionary); clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); /* Star */ } .legend-superhero-villain { background-color: var(--dba-shv); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* Hexagon */ } .legend-gangsta-pimp { background-color: var(--dba-gangsta-pimp); border-radius: 2px; /* Square */ } .legend-folk-hero { background-color: var(--dba-folk-hero); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Triangle */ } /* ========================================================================== Legend — Network Node Markers (network-specific shapes) ========================================================================== */ .legend-node-detective { background-color: var(--dba-detective); border-radius: 50%; /* Circle */ } .legend-node-revolutionary { background-color: var(--dba-revolutionary); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* Diamond */ } .legend-node-shv { background-color: var(--dba-shv); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); /* Hexagon */ } .legend-node-gangsta-pimp { background-color: var(--dba-gangsta-pimp); border-radius: 2px; /* Square */ } .legend-node-folk-hero { background-color: var(--dba-folk-hero); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Triangle */ } /* ========================================================================== Legend — Edge Type (dash patterns) -------------------------------------------------------------------------- Pattern sync rule: these must match the edgeDashPatterns object in network.html's inline script. Change both together or not at all. ========================================================================== */ .legend-line { width: 30px; height: 3px; margin-right: 10px; } .legend-meta { background-color: var(--dba-edge-meta); } .legend-p2c { background-color: transparent; background-image: repeating-linear-gradient( 90deg, var(--dba-edge-p2c) 0px, var(--dba-edge-p2c) 12px, transparent 12px, transparent 18px ); } .legend-c2c { background-color: transparent; background-image: repeating-linear-gradient( 90deg, var(--dba-edge-c2c) 0px, var(--dba-edge-c2c) 6px, transparent 6px, transparent 10px ); } .legend-org { background-color: transparent; background-image: repeating-linear-gradient( 90deg, var(--dba-edge-org) 0px, var(--dba-edge-org) 2px, transparent 2px, transparent 6px, var(--dba-edge-org) 6px, var(--dba-edge-org) 14px, transparent 14px, transparent 18px ); } .legend-cc { background-color: transparent; background-image: repeating-linear-gradient( 90deg, var(--dba-edge-cc) 0px, var(--dba-edge-cc) 2px, transparent 2px, transparent 4px ); } /* ========================================================================== Shared Filter Rail (Sources & Figures Landings) ========================================================================== */ .bda-filter-option { display: flex; align-items: center; padding: 0.4rem 0.5rem; cursor: pointer; border-radius: 4px; } .bda-filter-option:hover { background-color: var(--dba-medium-green); } .bda-filter-option input[type="checkbox"] { margin-right: 0.5rem; } .bda-filter-option.is-disabled { opacity: 0.6; cursor: not-allowed; } .bda-filter-option.is-disabled:hover { background-color: transparent; } /* Modality shape markers */ .bda-filter-modality-marker { display: inline-block; width: 14px; height: 14px; margin-right: 0.5rem; vertical-align: middle; } .bda-mm-detective { background-color: var(--dba-detective); border-radius: 50%; } .bda-mm-revolutionary { background-color: var(--dba-revolutionary); clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); } .bda-mm-superhero-villain { background-color: var(--dba-shv); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .bda-mm-gangsta-pimp { background-color: var(--dba-gangsta-pimp); border-radius: 2px; } .bda-mm-folk-hero-outlaw { background-color: var(--dba-folk-hero); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .bda-filter-modality-marker.is-pending { opacity: 0.5; } .bda-filter-pending-tag { color: var(--dba-text-muted); font-size: 0.85em; margin-left: 0.25em; } /* Filter collapse buttons */ .bda-filter-collapse-btn { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--dba-text-primary); padding: 0.5rem 0; cursor: pointer; } .bda-filter-collapse-btn[aria-expanded="true"]::after { content: "▾"; } .bda-filter-collapse-btn[aria-expanded="false"]::after { content: "▸"; } /* Active filter chips */ .bda-filter-chip { display: inline-flex; align-items: center; background-color: var(--dba-medium-green); color: var(--dba-text-primary); padding: 0.3rem 0.6rem; border-radius: 1rem; margin: 0.2rem; font-size: 0.9em; } .bda-filter-chip-label { color: var(--dba-text-secondary); margin-right: 0.25rem; } .bda-filter-chip-remove { background: transparent; border: none; color: var(--dba-text-primary); margin-left: 0.5rem; font-size: 1.2em; line-height: 1; cursor: pointer; padding: 0 0.25rem; } .bda-filter-chip-remove:hover, .bda-filter-chip-remove:focus { color: var(--dba-gold); } /* ========================================================================== Sources Landing ========================================================================== */ .bda-sources-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .bda-sources-loading { color: var(--dba-text-muted); text-align: center; padding: 2rem; } .bda-sources-loading[role="alert"] { color: var(--dba-revolutionary); } /* Source cards */ .bda-source-card { display: flex; flex-direction: column; background-color: var(--dba-content-green); border: 2px solid var(--dba-border-green); border-radius: 0.5rem; overflow: hidden; text-decoration: none; color: var(--dba-text-primary); transition: border-color 0.2s, transform 0.2s; } .bda-source-card:hover { border-color: var(--dba-emerald); transform: translateY(-2px); } .bda-source-card-thumb { position: relative; background-color: var(--dba-darkest-green); padding: 2rem 1rem; text-align: center; } .bda-source-card-category { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.75em; font-weight: bold; text-transform: uppercase; } .bda-cat-primary { background-color: var(--dba-emerald); color: var(--dba-darkest-green); } .bda-cat-secondary { background-color: var(--dba-gold); color: var(--dba-darkest-green); } .bda-cat-archival { background-color: var(--dba-purple); color: var(--dba-gold); } /* ========================================================================== PHASE 1 POLISH — HOMEPAGE + SITE CHROME -------------------------------------------------------------------------- Append this block to styles.css. All variables already defined in :root. No hardcoded hex values. All new classes documented here. ========================================================================== */ /* ========================================================================== Skip Link (.bda-skip-link) -------------------------------------------------------------------------- Visually hidden until focused. When a keyboard user Tabs to the link it becomes visible at the top of the viewport. WCAG 2.4.1 (Bypass Blocks). Same pattern as .visually-hidden-focusable but scoped to skip-link semantics and positioned explicitly at the top-left of the viewport. ========================================================================== */ .bda-skip-link { position: absolute !important; top: -40px; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; background-color: var(--dba-gold); color: var(--dba-darkest-green); font-weight: bold; text-decoration: none; z-index: 10000; } .bda-skip-link:focus { position: fixed !important; top: 0; left: 0; width: auto; height: auto; padding: 0.75rem 1.25rem; margin: 0; overflow: visible; clip: auto; white-space: normal; outline: 3px solid var(--dba-focus-ring); outline-offset: -3px; } /* ========================================================================== Navbar Brand Wordmark -------------------------------------------------------------------------- Overrides Bootstrap's .navbar-brand defaults to match the design mockup: gold uppercase "DETROIT" paired with a smaller primary-text "Badman Archive" on a single line. Letterspacing gives the type weight to serve as a visual anchor in the nav. ========================================================================== */ #mainNav { padding: 1rem 0; } .bda-brand-wordmark { display: inline-flex; align-items: baseline; gap: 0.6rem; text-decoration: none; padding: 0.25rem 0; } .bda-brand-wordmark:hover, .bda-brand-wordmark:focus { text-decoration: none; } .bda-brand-wordmark-upper { color: var(--dba-gold); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; } .bda-brand-wordmark-lower { color: var(--dba-text-primary); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; } .bda-brand-wordmark:hover .bda-brand-wordmark-lower, .bda-brand-wordmark:focus .bda-brand-wordmark-lower { color: var(--dba-gold); } @media (max-width: 575px) { .bda-brand-wordmark { gap: 0.4rem; } .bda-brand-wordmark-upper { font-size: 1.1rem; letter-spacing: 0.15em; } .bda-brand-wordmark-lower { font-size: 0.8rem; } } /* ========================================================================== Hero Section (home page) -------------------------------------------------------------------------- Full-bleed dark background, centered content. Eyebrow is gold small-caps, headline is the primary typographic anchor of the page. No imagery — the archive's identity is carried by type and color. ========================================================================== */ .bda-hero { background-color: var(--dba-darkest-green); padding: 6rem 0 5rem; border-bottom: 1px solid var(--dba-border-green); } .bda-hero-inner { max-width: 960px; margin: 0 auto; text-align: center; } .bda-hero-eyebrow { color: var(--dba-gold); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 1.5rem; line-height: 1.4; } .bda-hero-headline { color: var(--dba-text-primary); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 2.5rem; max-width: 22ch; margin-left: auto; margin-right: auto; } .bda-hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } .bda-hero-actions .btn { min-width: 180px; } /* Secondary button variant used alongside .btn-primary in the hero */ .btn-secondary { background-color: transparent; color: var(--dba-text-primary); border: 2px solid var(--dba-border-green); padding: 0.5rem 1.5rem; font-weight: 600; } .btn-secondary:hover, .btn-secondary:focus { background-color: var(--dba-medium-green); color: var(--dba-white); border-color: var(--dba-emerald); } /* ========================================================================== Stats Bar -------------------------------------------------------------------------- Four-up numerical summary. Uses
/
/
for semantic pairing — the number is the value, the label is the term. Emerald for the values carries the "vital signs" feel without competing with the hero's gold. ========================================================================== */ .bda-stats { background-color: var(--dba-dark-green); padding: 2.5rem 0; border-bottom: 1px solid var(--dba-border-green); } .bda-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 0; max-width: 960px; margin-left: auto; margin-right: auto; } .bda-stat { display: flex; flex-direction: column-reverse; /* Label reads below the number */ align-items: center; text-align: center; padding: 0.5rem; } .bda-stat-value { color: var(--dba-emerald); font-size: 2.75rem; font-weight: 700; line-height: 1; margin: 0 0 0.5rem; } .bda-stat-label { color: var(--dba-text-secondary); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; } @media (max-width: 767px) { .bda-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } .bda-stat-value { font-size: 2.25rem; } } /* ========================================================================== Actions Grid ("What you can do here") -------------------------------------------------------------------------- 5-card grid. Cards are elements for full-card click targets. Icon boxes use the modality-card visual language (content-green box with border). Hover lift is subtle — this is a scholarly site, not a SaaS landing page. ========================================================================== */ .bda-actions { background-color: var(--dba-dark-green); padding: 4.5rem 0; } .bda-actions-heading { color: var(--dba-text-primary); font-size: 1.5rem; font-weight: 600; margin: 0 0 2rem; max-width: 1140px; margin-left: auto; margin-right: auto; padding: 0 1rem; } .bda-actions-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 1140px; margin-left: auto; margin-right: auto; } .bda-actions-grid > li { display: flex; } .bda-action-card { display: flex; flex-direction: column; width: 100%; padding: 1.5rem; background-color: var(--dba-content-green); border: 1px solid var(--dba-border-green); border-radius: 0.5rem; color: var(--dba-text-primary); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .bda-action-card:hover, .bda-action-card:focus { border-color: var(--dba-emerald); transform: translateY(-2px); color: var(--dba-text-primary); text-decoration: none; background-color: var(--dba-medium-green); } .bda-action-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; background-color: var(--dba-medium-green); color: var(--dba-emerald); border: 1px solid var(--dba-border-green); border-radius: 0.375rem; } .bda-action-card:hover .bda-action-card-icon, .bda-action-card:focus .bda-action-card-icon { color: var(--dba-gold); border-color: var(--dba-emerald); } .bda-action-card-title { color: var(--dba-text-primary); font-size: 1.05rem; font-weight: 600; margin: 0 0 0.5rem; line-height: 1.3; } .bda-action-card-desc { color: var(--dba-text-secondary); font-size: 0.925rem; line-height: 1.55; margin: 0; } @media (max-width: 991px) { .bda-actions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .bda-actions-grid { grid-template-columns: 1fr; } } /* ========================================================================== Homepage Path Cards (Figures / Primary Sources / Visualizations row) -------------------------------------------------------------------------- Lives inside the "Explore the archive" faded panel. Links get the emerald-to-gold treatment used on other in-prose navigation cues, and an underline because they are in-prose links per the doc's WCAG 1.4.1 rule. ========================================================================== */ .bda-home-path-title { color: var(--dba-text-primary); margin-bottom: 0.75rem; } .bda-home-path-link { display: inline-block; color: var(--dba-emerald); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; margin-top: 0.5rem; } .bda-home-path-link:hover, .bda-home-path-link:focus { color: var(--dba-gold); } /* ========================================================================== Footer Typography & Links -------------------------------------------------------------------------- Headings use the emerald eyebrow treatment — smaller, uppercase, spaced. Link color stays emerald with underline; matches in-prose link rule but scoped here so footer links don't fall back to browser default blue. ========================================================================== */ .footer { padding: 4rem 0 2rem; } .bda-footer-main { margin-bottom: 3rem; } .bda-footer-heading { color: var(--dba-emerald); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 1rem; } .bda-footer-heading-secondary { margin-top: 2rem; } .bda-footer-text { color: var(--dba-text-secondary); font-size: 0.925rem; line-height: 1.65; margin: 0; } .bda-footer-list { list-style: none; padding: 0; margin: 0; color: var(--dba-text-secondary); font-size: 0.925rem; line-height: 1.85; } .bda-footer-list li { margin-bottom: 0.15rem; } .bda-footer-link { color: var(--dba-text-primary); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-bottom-color 0.15s ease; } .bda-footer-link:hover, .bda-footer-link:focus { color: var(--dba-gold); border-bottom-color: var(--dba-gold); text-decoration: none; } .bda-footer-meta { border-top: 1px solid var(--dba-border-green); padding-top: 1.5rem; color: var(--dba-text-muted); font-size: 0.85rem; } .bda-footer-copyright, .bda-footer-build { color: var(--dba-text-muted); margin: 0; } .bda-footer-copyright .bda-footer-link { color: var(--dba-text-muted); } .bda-footer-copyright .bda-footer-link:hover, .bda-footer-copyright .bda-footer-link:focus { color: var(--dba-gold); } .bda-footer-build { text-align: right; } @media (max-width: 767px) { .bda-footer-build { text-align: left; margin-top: 0.5rem; } } /* ========================================================================== PHASE 2 POLISH — FIGURES LANDING PAGE -------------------------------------------------------------------------- Append this block to styles.css after the Phase 1 additions. Adds the two-column layout (sticky rail + main), results header, sort control, breadcrumb, and lead paragraph treatment. All classes documented here must be added to CSS_DOCUMENTATION.md when the polish pass is complete. ========================================================================== */ /* ========================================================================== Breadcrumb (site-wide, used on any page) -------------------------------------------------------------------------- Bootstrap's default .breadcrumb has a light background and dark text — unreadable on our dark theme. This overrides all of it: transparent background, muted secondary text, emerald link color inheriting the in-prose underline rule, custom separator (middot). ========================================================================== */ .breadcrumb { background-color: transparent; padding: 0; margin-bottom: 1rem; font-size: 0.9rem; color: var(--dba-text-muted); } .breadcrumb-item { color: var(--dba-text-muted); } .breadcrumb-item a { color: var(--dba-emerald); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-bottom-color 0.15s ease; } .breadcrumb-item a:hover, .breadcrumb-item a:focus { color: var(--dba-gold); border-bottom-color: var(--dba-gold); } .breadcrumb-item.active, .breadcrumb-item[aria-current="page"] { color: var(--dba-text-secondary); } /* Override Bootstrap's default "/" breadcrumb separator with a middot */ .breadcrumb-item + .breadcrumb-item::before { content: "·"; color: var(--dba-border-green); padding: 0 0.5rem; } /* ========================================================================== Lead Paragraph (site-wide) -------------------------------------------------------------------------- Bootstrap's .lead has its own size but inherits default color. Give it the proper dark-theme treatment and slightly tighter line-height for a scholarly-intro feel. ========================================================================== */ .lead { color: var(--dba-text-secondary); font-size: 1.15rem; font-weight: 400; line-height: 1.65; max-width: 68ch; } /* ========================================================================== Page Title (H1) — for landing/index pages -------------------------------------------------------------------------- Scoped inside .page-section so it doesn't fight the hero's custom headline treatment on the homepage. ========================================================================== */ main .page-section h1 { color: var(--dba-text-primary); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 1rem; line-height: 1.15; } /* ========================================================================== Figures Layout Section -------------------------------------------------------------------------- Section wrapper gets a different background tone so the filter rail has visual separation from the intro strip above. Keeps the two-column grid contained in a max-width but uses container-fluid for breathing room. ========================================================================== */ .bda-figures-layout-section { padding-top: 1rem; padding-bottom: 5rem; } .bda-figures-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; max-width: 1400px; margin: 0 auto; padding: 0 1rem; align-items: start; } @media (max-width: 991px) { .bda-figures-layout { grid-template-columns: 1fr; gap: 1rem; } } /* ========================================================================== Mobile Filter Toggle -------------------------------------------------------------------------- Hidden on desktop. On mobile, taps to show/hide the filter rail. The rail's .is-open state is applied by the JS filterToggle handler. ========================================================================== */ .bda-figures-filter-toggle { display: none; width: 100%; padding: 0.75rem 1rem; background-color: var(--dba-content-green); color: var(--dba-text-primary); border: 1px solid var(--dba-border-green); border-radius: 0.5rem; font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left; } .bda-figures-filter-toggle::after { content: "▾"; float: right; color: var(--dba-emerald); } .bda-figures-filter-toggle[aria-expanded="true"]::after { content: "▴"; } @media (max-width: 991px) { .bda-figures-filter-toggle { display: block; margin-bottom: 1rem; } } /* ========================================================================== Filter Rail -------------------------------------------------------------------------- Sticky side rail on desktop. Card-style container with the content-green background and border pattern used across the archive's card components. ========================================================================== */ .bda-figures-filter-rail { position: sticky; top: 1.5rem; background-color: var(--dba-content-green); border: 1px solid var(--dba-border-green); border-radius: 0.5rem; padding: 1.25rem; align-self: start; max-height: calc(100vh - 3rem); overflow-y: auto; } /* Custom scrollbar for dark theme */ .bda-figures-filter-rail::-webkit-scrollbar { width: 8px; } .bda-figures-filter-rail::-webkit-scrollbar-track { background: var(--dba-dark-green); border-radius: 4px; } .bda-figures-filter-rail::-webkit-scrollbar-thumb { background: var(--dba-border-green); border-radius: 4px; } .bda-figures-filter-rail::-webkit-scrollbar-thumb:hover { background: var(--dba-emerald); } @media (max-width: 991px) { .bda-figures-filter-rail { position: static; max-height: none; display: none; } .bda-figures-filter-rail.is-open { display: block; } } /* ========================================================================== Filter Rail — Fieldset / Collapse Heading -------------------------------------------------------------------------- fieldset defaults have an inset border and padding that fight the card design — reset those. The collapse button inside the carries the actual heading treatment. ========================================================================== */ .bda-filter-fieldset { border: none; padding: 0; margin: 0 0 1.25rem; } .bda-filter-fieldset legend { width: 100%; padding: 0; margin: 0 0 0.5rem; font-size: inherit; float: none; } .bda-filter-fieldset .bda-filter-collapse-btn { color: var(--dba-emerald); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0; display: flex; align-items: center; justify-content: space-between; } .bda-filter-fieldset .bda-filter-collapse-btn[aria-expanded="true"]::after, .bda-filter-fieldset .bda-filter-collapse-btn[aria-expanded="false"]::after { color: var(--dba-emerald); font-size: 0.9rem; margin-left: 0.5rem; } .bda-filter-options { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.5rem; } /* ========================================================================== Filter Reset Button -------------------------------------------------------------------------- Secondary action at the bottom of the rail. Subtle styling — this should not compete with the primary checkbox filter list for attention. ========================================================================== */ .bda-filter-reset-btn { width: 100%; padding: 0.5rem 0.75rem; background-color: transparent; color: var(--dba-text-secondary); border: 1px solid var(--dba-border-green); border-radius: 0.25rem; font-size: 0.875rem; cursor: pointer; margin-top: 0.5rem; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .bda-filter-reset-btn:hover, .bda-filter-reset-btn:focus { color: var(--dba-text-primary); border-color: var(--dba-emerald); background-color: var(--dba-medium-green); } /* ========================================================================== Filter Option Row — Checkbox Refinements -------------------------------------------------------------------------- .bda-filter-option is already defined upstream in styles.css per spec. These additions tune the spacing and pending-tag treatment for the figures-page context specifically. ========================================================================== */ .bda-filter-option > span:last-child { color: var(--dba-text-primary); font-size: 0.95rem; flex: 1; } .bda-filter-option.is-disabled > span:last-child { color: var(--dba-text-muted); } .bda-filter-option .bda-filter-pending-tag { color: var(--dba-text-muted); font-size: 0.825em; } /* ========================================================================== Figures Main (right column) ========================================================================== */ .bda-figures-main { min-width: 0; /* Prevents grid blowout from long titles */ } /* ========================================================================== Results Header — count + sort ========================================================================== */ .bda-figures-results-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--dba-border-green); flex-wrap: wrap; } .bda-figures-count { color: var(--dba-text-secondary); font-size: 0.95rem; margin: 0; } /* ========================================================================== Sort Dropdown -------------------------------------------------------------------------- Custom-styled native . Duplicate of .bda-figures-sort from Phase 2 — scoped here for isolation. ========================================================================== */ .bda-sources-sort-wrapper { display: flex; align-items: center; gap: 0.75rem; } .bda-sources-sort-wrapper label { color: var(--dba-text-secondary); font-size: 0.875rem; margin: 0; white-space: nowrap; } .bda-sources-sort { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--dba-content-green); color: var(--dba-text-primary); border: 1px solid var(--dba-border-green); border-radius: 0.25rem; padding: 0.4rem 2rem 0.4rem 0.75rem; font-size: 0.9rem; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 12px; transition: border-color 0.15s ease; } .bda-sources-sort:hover, .bda-sources-sort:focus { border-color: var(--dba-emerald); } .bda-sources-sort option { background-color: var(--dba-darkest-green); color: var(--dba-text-primary); } @media (max-width: 575px) { .bda-sources-results-header { flex-direction: column; align-items: flex-start; } .bda-sources-sort-wrapper { width: 100%; } .bda-sources-sort { flex: 1; } } /* ========================================================================== Active Filter Chips Container -------------------------------------------------------------------------- The .bda-filter-chip styles themselves are defined globally. This just provides the container rhythm for the sources landing. ========================================================================== */ .bda-sources-active-filters { margin-bottom: 1.25rem; } .bda-sources-active-filters:empty { margin-bottom: 0; } /* ========================================================================== Source Grid (landing) -------------------------------------------------------------------------- 5 columns on wide desktops, auto-collapsing on narrower viewports via auto-fill minmax. Different from Phase 7a's related-sources grid which used 220px minimum — landing grid uses 240px for slightly bigger cards that match the mockup screenshot. ========================================================================== */ .bda-sources-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; } /* ========================================================================== Source Card (landing variant) -------------------------------------------------------------------------- Phase 7a defined compact .bda-source-card styles for the Related Sources grid on figure-entry pages. The landing grid needs slightly taller cards with a more prominent thumbnail area (per the mockup screenshot — the cards have a ~140px dark thumb showing a glyph). Override the Phase 7a compact treatment with the larger landing card. Because this phase loads AFTER Phase 7a, these rules win. ========================================================================== */ .bda-sources-grid .bda-source-card { display: flex; flex-direction: column; height: 100%; background-color: var(--dba-content-green); border: 1px solid var(--dba-border-green); border-radius: 0.5rem; overflow: hidden; text-decoration: none; color: var(--dba-text-primary); transition: border-color 0.2s ease, transform 0.2s ease; } .bda-sources-grid .bda-source-card:hover, .bda-sources-grid .bda-source-card:focus { border-color: var(--dba-emerald); transform: translateY(-2px); color: var(--dba-text-primary); text-decoration: none; } .bda-sources-grid .bda-source-card-thumb { position: relative; background-color: var(--dba-darkest-green); min-height: 140px; padding: 1rem; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--dba-border-green); } .bda-sources-grid .bda-source-card-info { padding: 1rem 1.1rem 1.1rem; flex: 1; display: flex; flex-direction: column; } .bda-sources-grid .bda-source-card-title { color: var(--dba-text-primary); font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0 0 0.35rem; } .bda-sources-grid .bda-source-card:hover .bda-source-card-title, .bda-sources-grid .bda-source-card:focus .bda-source-card-title { color: var(--dba-gold); } .bda-sources-grid .bda-source-card-figure { color: var(--dba-text-secondary); font-size: 0.85rem; line-height: 1.35; margin: 0 0 0.4rem; font-style: italic; } .bda-sources-grid .bda-source-card-meta { color: var(--dba-text-muted); font-size: 0.825rem; margin: 0; margin-top: auto; padding-top: 0.4rem; } /* ========================================================================== Category Badge (corner pill in card thumb) -------------------------------------------------------------------------- Positioned absolute in the top-left corner of the thumb. Already have .bda-cat-primary/secondary/archival color rules from Phase 1 spec; positioning/sizing lives here. ========================================================================== */ .bda-sources-grid .bda-source-card-category, .bda-source-card-thumb .bda-source-card-category { position: absolute; top: 0.55rem; left: 0.55rem; padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; z-index: 1; } /* ========================================================================== External-Link Badge -------------------------------------------------------------------------- Positioned in the top-right corner of the thumb when the source has a URL but no repository (i.e., it lives outside the archive). ========================================================================== */ .bda-source-card-external { position: absolute; top: 0.55rem; right: 0.55rem; padding: 0.2rem 0.5rem; background-color: var(--dba-medium-green); color: var(--dba-emerald); border: 1px solid var(--dba-emerald); border-radius: 0.25rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; z-index: 1; } .bda-source-card-external::after { content: " \2197"; /* ↗ arrow, hair-space before */ font-weight: 700; } /* ========================================================================== Thumbnail Glyphs -------------------------------------------------------------------------- Per-type stylized glyph in the center of the thumb. The bda-sources.js TYPE_TO_GLYPH map determines which glyph shows for each source type. Glyph is drawn in CSS using a ::after clip-path shape on a 48px square base. Color is emerald at reduced opacity so it reads as a "ghost" decoration rather than loud artwork. ========================================================================== */ .bda-source-thumb-glyph { width: 56px; height: 56px; position: relative; } .bda-source-thumb-glyph::after { content: ""; position: absolute; inset: 6px; background-color: var(--dba-emerald); opacity: 0.65; transition: opacity 0.2s ease; } .bda-sources-grid .bda-source-card:hover .bda-source-thumb-glyph::after, .bda-sources-grid .bda-source-card:focus .bda-source-thumb-glyph::after { opacity: 0.9; } /* Book — stacked horizontal lines with side-binding gap */ .bda-thumb-book::after { clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100%, 0 85%, 90% 85%, 90% 70%, 0 70%, 0 55%, 90% 55%, 90% 40%, 0 40%, 0 25%, 90% 25%, 90% 10%, 0 10% ); } /* Document — page with folded corner */ .bda-thumb-doc::after { clip-path: polygon( 0 0, 75% 0, 100% 25%, 100% 100%, 0 100% ); } /* News — horizontal bars (newsprint) */ .bda-thumb-news::after { clip-path: polygon( 0 10%, 100% 10%, 100% 25%, 0 25%, 0 40%, 100% 40%, 100% 55%, 0 55%, 0 70%, 100% 70%, 100% 85%, 0 85% ); } /* Photo — circle (camera lens) */ .bda-thumb-photo::after { inset: 10px; border-radius: 50%; clip-path: none; } /* Audio — tall vertical bars (spectrum / barcode) */ .bda-thumb-audio::after { clip-path: polygon( 0 30%, 10% 30%, 10% 70%, 0 70%, 0 30%, 20% 15%, 30% 15%, 30% 85%, 20% 85%, 20% 15%, 40% 0, 50% 0, 50% 100%, 40% 100%, 40% 0, 60% 20%, 70% 20%, 70% 80%, 60% 80%, 60% 20%, 80% 10%, 90% 10%, 90% 90%, 80% 90% ); } /* Film — horizontal frame with sprocket holes approximated */ .bda-thumb-film::after { clip-path: polygon( 0 20%, 100% 20%, 100% 35%, 0 35%, 0 45%, 100% 45%, 100% 55%, 0 55%, 0 65%, 100% 65%, 100% 80%, 0 80% ); } /* ========================================================================== Loading & Empty States ========================================================================== */ .bda-sources-loading { color: var(--dba-text-muted); text-align: center; padding: 3rem 1rem; font-size: 1rem; } .bda-sources-loading[role="alert"] { color: var(--dba-revolutionary); } .bda-sources-empty { text-align: center; padding: 4rem 1.5rem; background-color: var(--dba-content-green); border: 1px solid var(--dba-border-green); border-radius: 0.5rem; } .bda-sources-empty h2 { color: var(--dba-text-primary); font-size: 1.3rem; font-weight: 600; margin: 0 0 0.75rem; } .bda-sources-empty p { color: var(--dba-text-secondary); max-width: 52ch; margin: 0 auto 1.5rem; } .bda-sources-empty .btn-primary { min-width: 180px; } /* ========================================================================== Page H1 + Breadcrumb + Lead (intro strip) -------------------------------------------------------------------------- The sources.html intro strip uses the same page-section + container pattern as the figures landing. The H1 / breadcrumb / lead rules already exist from Phase 2; no new rules needed here. ========================================================================== */ /* ========================================================================== Mobile refinements ========================================================================== */ @media (max-width: 575px) { .bda-sources-grid { grid-template-columns: 1fr; gap: 1rem; } .bda-sources-grid .bda-source-card-thumb { min-height: 100px; } .bda-sources-grid .bda-source-card-info { padding: 0.85rem 1rem 1rem; } .bda-source-thumb-glyph { width: 44px; height: 44px; } } /* ========================================================================== PHASE 7c PATCH — HEADER CATEGORY BADGE POSITIONING -------------------------------------------------------------------------- Append to styles.css after Phase 7b. BUG: On source entry pages, the .bda-source-card-category badge in the .bda-source-header-meta row was inheriting position:absolute from the base .bda-source-card-category rule (defined in the original spec / Phase 1 for the sources landing grid cards). Without a positioned ancestor, the badge escaped to the nearest positioned element (body or viewport), rendering in the top-left corner of the page and overlapping the DETROIT wordmark. FIX: Explicitly set position:static on category badges inside the source-entry header, overriding the inherited absolute positioning. Also remove the positioning-specific properties (top/left) since they only make sense in the absolute context. ========================================================================== */ .bda-source-header .bda-source-card-category, .bda-source-header-meta .bda-source-card-category { position: static; top: auto; left: auto; z-index: auto; } /* Same fix for the metadata rail — the Category row renders the badge inline, not as a corner pill */ .bda-source-metadata-list .bda-source-card-category { position: static; top: auto; left: auto; z-index: auto; } /* Same fix for the Related Sources grid cards' category badge — those DO live inside a thumb, so they SHOULD still be absolute there. Don't override them here; Phase 7a's .bda-sources-grid-specific selector and the .bda-source-card-thumb ancestor positioning should keep that path working. This comment is a reminder not to be overzealous. */ /* ========================================================================== PHASE 8 POLISH — NETWORK VISUALIZATION PAGE -------------------------------------------------------------------------- Append this block to styles.css after Phase 7c. Brings the Network tool in line with the editorial system established by Phases 1–7: two-column layout (filter rail + main), sticky rail, framed canvas using the previously-unused --dba-network-bg token, tightened metrics panels, and a unified Selection panel that swaps between three states (empty / figure teaser / connection details). Reuses existing classes rather than redefining: - .bda-filter-fieldset, .bda-filter-collapse-btn, .bda-filter-option (Phase 2 figures-landing filter rail pattern) - .bda-filter-modality-marker, .bda-mm-* (shape markers) - .modality-badge, .modality-badge.modality-* (Phase 4 figure header) - .tier-badge, .tier-1/2/3 (Phase 4 connections section) - .legend-line, .legend-meta/p2c/c2c/org/cc (base spec) - .legend-node-* (base spec, network-specific shapes) - .breadcrumb, .lead (Phase 2) All new classes are prefixed .bda-network-* to avoid collisions. No hardcoded hex values outside :root. ========================================================================== */ /* ========================================================================== Layout — two-column grid (parallels .bda-figures-layout) ========================================================================== */ .bda-network-layout-section { padding-top: 1rem; padding-bottom: 5rem; } .bda-network-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; max-width: 1400px; margin: 0 auto; padding: 0 1rem; align-items: start; } @media (max-width: 991px) { .bda-network-layout { grid-template-columns: 1fr; gap: 1rem; } } /* ========================================================================== Mobile Filter Toggle (parallels .bda-figures-filter-toggle) ========================================================================== */ .bda-network-filter-toggle { display: none; width: 100%; padding: 0.75rem 1rem; background-color: var(--dba-content-green); color: var(--dba-text-primary); border: 1px solid var(--dba-border-green); border-radius: 0.5rem; font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left; } .bda-network-filter-toggle::after { content: "▾"; float: right; color: var(--dba-emerald); } .bda-network-filter-toggle[aria-expanded="true"]::after { content: "▴"; } @media (max-width: 991px) { .bda-network-filter-toggle { display: block; margin-bottom: 1rem; } } /* ========================================================================== Filter Rail — sticky sidebar container -------------------------------------------------------------------------- Identical pattern to .bda-figures-filter-rail and .bda-sources-filter-rail. Scoped to network for clarity and so future tuning doesn't cross-contaminate. ========================================================================== */ .bda-network-filter-rail { position: sticky; top: 1.5rem; background-color: var(--dba-content-green); border: 1px solid var(--dba-border-green); border-radius: 0.5rem; padding: 1rem; align-self: start; max-height: calc(100vh - 3rem); overflow-y: auto; } .bda-network-filter-rail::-webkit-scrollbar { width: 8px; } .bda-network-filter-rail::-webkit-scrollbar-track { background: var(--dba-dark-green); border-radius: 4px; } .bda-network-filter-rail::-webkit-scrollbar-thumb { background: var(--dba-border-green); border-radius: 4px; } .bda-network-filter-rail::-webkit-scrollbar-thumb:hover { background: var(--dba-emerald); } @media (max-width: 991px) { .bda-network-filter-rail { position: static; max-height: none; display: none; } .bda-network-filter-rail.is-open { display: block; } } /* ========================================================================== Filter Rail — Legend rows inside .bda-filter-fieldset -------------------------------------------------------------------------- The Figure Modalities and Relationship Types cards are semantically "legends," not interactive filters, but we render them inside the same .bda-filter-fieldset container as the Modality filter for visual parity. These rows use the .bda-network-legend-row pattern below. ========================================================================== */ .bda-network-legend-list { list-style: none; padding: 0; margin: 0.35rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; } .bda-network-legend-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0.4rem; color: var(--dba-text-primary); font-size: 0.88rem; line-height: 1.35; } .bda-network-legend-row .legend-line { flex-shrink: 0; width: 28px; height: 3px; margin: 0; } /* Node legend shape markers — reuse .legend-node-* color/shape rules from base spec, just resize to match the filter-marker dimensions */ .bda-network-legend-row .bda-legend-node-marker { display: inline-block; width: 14px; height: 14px; flex-shrink: 0; } .bda-network-legend-code { color: var(--dba-emerald); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8rem; font-weight: 700; margin-right: 0.2rem; } .bda-network-legend-label { color: var(--dba-text-primary); flex: 1; min-width: 0; } /* ========================================================================== Main column — lead paragraph sizing ========================================================================== */ .bda-network-main { min-width: 0; } .bda-network-lead { color: var(--dba-text-secondary); font-size: 1.05rem; line-height: 1.6; max-width: 68ch; margin: 0 0 1.5rem; } /* ========================================================================== Toolbar — pause button strip above canvas ========================================================================== */ .bda-network-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .bda-network-pause-btn { padding: 0.4rem 0.95rem; background-color: transparent; color: var(--dba-text-secondary); border: 1px solid var(--dba-border-green); border-radius: 0.25rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .bda-network-pause-btn:hover, .bda-network-pause-btn:focus { color: var(--dba-darkest-green); background-color: var(--dba-emerald); border-color: var(--dba-emerald); } .bda-network-toolbar-hint { color: var(--dba-text-muted); font-size: 0.825rem; margin-left: auto; } @media (max-width: 575px) { .bda-network-toolbar-hint { margin-left: 0; flex-basis: 100%; } } /* ========================================================================== Canvas Wrapper — framed dark region for the SVG -------------------------------------------------------------------------- The core visual move for this page: set the graph apart from the page background with a darker inset surface and a subtle border. The border steps up to emerald on :focus-within so keyboard users can see when the graph region has focus (WCAG 2.4.7 Focus Visible). Uses --dba-network-bg (defined in :root, previously unused). ========================================================================== */ .bda-network-canvas-wrapper { background-color: var(--dba-network-bg); border: 1px solid var(--dba-border-green); border-radius: 0.5rem; padding: 0.75rem; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); transition: border-color 0.2s ease; } .bda-network-canvas-wrapper:focus-within { border-color: var(--dba-emerald); } .bda-network-container { width: 100%; height: 600px; min-height: 600px; position: relative; border-radius: 0.25rem; overflow: hidden; } .bda-network-container svg { display: block; width: 100%; height: 100%; } .bda-network-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--dba-text-muted); font-style: italic; margin: 0; } .bda-network-loading[role="alert"] { color: var(--dba-revolutionary); font-style: normal; font-weight: 600; } /* Tighter canvas on mobile */ @media (max-width: 575px) { .bda-network-container { height: 440px; min-height: 440px; } } /* ========================================================================== Timeline — slider row below canvas -------------------------------------------------------------------------- Bootstrap doesn't ship dark-theme range styling. Native rules below theme the track and thumb to match the archive's emerald/green palette. Includes WebKit, Firefox, and MS paths. ========================================================================== */ .bda-network-timeline { margin: 1.25rem 0 0; padding: 1rem 1.25rem; background-color: var(--dba-content-green); border: 1px solid var(--dba-border-green); border-radius: 0.5rem; } .bda-network-timeline-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.65rem; flex-wrap: wrap; } .bda-network-timeline-label { color: var(--dba-emerald); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; } .bda-network-timeline-current { color: var(--dba-text-primary); font-size: 0.95rem; font-weight: 600; margin: 0; } .bda-network-timeline-current span { color: var(--dba-gold); font-variant-numeric: tabular-nums; } .bda-network-timeline-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--dba-darkest-green); border: 1px solid var(--dba-border-green); border-radius: 3px; outline: none; margin: 0.35rem 0 0.4rem; } .bda-network-timeline-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--dba-emerald); border: 2px solid var(--dba-darkest-green); cursor: pointer; box-shadow: 0 0 0 1px var(--dba-emerald); transition: background-color 0.15s ease, box-shadow 0.15s ease; } .bda-network-timeline-slider::-webkit-slider-thumb:hover, .bda-network-timeline-slider:focus::-webkit-slider-thumb { background: var(--dba-gold); box-shadow: 0 0 0 1px var(--dba-gold); } .bda-network-timeline-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--dba-emerald); border: 2px solid var(--dba-darkest-green); cursor: pointer; box-shadow: 0 0 0 1px var(--dba-emerald); transition: background-color 0.15s ease, box-shadow 0.15s ease; } .bda-network-timeline-slider::-moz-range-thumb:hover, .bda-network-timeline-slider:focus::-moz-range-thumb { background: var(--dba-gold); box-shadow: 0 0 0 1px var(--dba-gold); } .bda-network-timeline-slider::-moz-range-track { background: var(--dba-darkest-green); border-radius: 3px; height: 6px; } .bda-network-timeline-marks { display: flex; justify-content: space-between; color: var(--dba-text-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; margin-top: 0.25rem; } /* ========================================================================== Metrics Zone — two-column grid below canvas -------------------------------------------------------------------------- Network Summary (left) + Selection Panel (right). Stacks at ≤767px. ========================================================================== */ .bda-network-metrics-zone { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; } @media (max-width: 767px) { .bda-network-metrics-zone { grid-template-columns: 1fr; gap: 1rem; } } /* ========================================================================== Metrics Panel — shared card treatment for Network Summary + Selection ========================================================================== */ .bda-network-metrics-panel { background-color: var(--dba-content-green); border: 1px solid var(--dba-border-green); border-radius: 0.5rem; padding: 1.25rem 1.4rem; } .bda-network-metrics-heading { color: var(--dba-emerald); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 1rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--dba-border-green); } /* ========================================================================== Network Summary — metric rows -------------------------------------------------------------------------- Replaces the verbose parenthetical-labels-stacked layout. Each row is a flex line: label on the left (terse), value on the right (emerald, bold, tabular numerics). The full explanatory text lives in a tooltip via title= and as sr-only expansion for screen readers. ========================================================================== */ .bda-network-metrics-list { margin: 0; display: flex; flex-direction: column; gap: 0; } .bda-network-metric-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(42, 98, 61, 0.4); } .bda-network-metric-row:last-child { border-bottom: none; padding-bottom: 0.25rem; } .bda-network-metric-row:first-child { padding-top: 0.25rem; } .bda-network-metric-row dt { color: var(--dba-text-primary); font-size: 0.9rem; font-weight: 600; margin: 0; flex: 1; min-width: 0; } .bda-network-metric-row dd { color: var(--dba-emerald); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; flex-shrink: 0; text-align: right; } /* ========================================================================== Selection Panel — three states (empty / figure / connection) -------------------------------------------------------------------------- The right-hand panel below the canvas is the single detail surface for everything the user can click on the graph. It has three content modes: 1. Empty — no selection yet, shows a prompt 2. Figure — node clicked: teaser + network metrics 3. Connection — edge clicked: edge type, tier, evidence Each mode is styled below. The JS swaps between them by rewriting the heading text and inner HTML. ========================================================================== */ /* Empty state — muted prompt centered in panel */ .bda-network-selection-empty { color: var(--dba-text-muted); font-style: italic; margin: 0.5rem 0 0; line-height: 1.55; } /* --- Figure teaser (mode 2) --------------------------------------------- */ .bda-network-teaser-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.65rem; flex-wrap: wrap; } .bda-network-teaser-name { color: var(--dba-text-primary); font-size: 1.15rem; font-weight: 700; line-height: 1.25; margin: 0; flex: 1; min-width: 12ch; } /* Ensure the .modality-badge from Phase 4 sits properly inline here */ .bda-network-teaser-header .modality-badge { margin: 0; } .bda-network-teaser-bio { color: var(--dba-text-secondary); font-size: 0.925rem; line-height: 1.55; margin: 0 0 0.75rem; } .bda-network-teaser-link { display: inline-block; color: var(--dba-emerald); font-size: 0.925rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 0.1rem; margin: 0 0 1rem; transition: color 0.15s ease, border-bottom-color 0.15s ease; } .bda-network-teaser-link:hover, .bda-network-teaser-link:focus { color: var(--dba-gold); border-bottom-color: var(--dba-gold); } .bda-network-teaser-divider { border: 0; border-top: 1px solid var(--dba-border-green); margin: 0.75rem 0 1rem; } /* --- Figure network metrics (shown below the teaser) -------------------- */ .bda-network-figure-metrics { display: flex; flex-direction: column; gap: 0.6rem; } .bda-network-figure-metric-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .bda-network-figure-metric-label { color: var(--dba-text-secondary); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .bda-network-figure-metric-value { color: var(--dba-text-primary); font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; } .bda-network-figure-metric-value-faded { color: var(--dba-text-muted); font-size: 0.82rem; font-weight: 400; margin-left: 0.25rem; } /* Influence progress bar */ .bda-network-influence-bar { width: 100%; height: 6px; background-color: var(--dba-darkest-green); border: 1px solid var(--dba-border-green); border-radius: 3px; overflow: hidden; margin: 0.15rem 0 0; } .bda-network-influence-bar-fill { height: 100%; background-color: var(--dba-emerald); transition: width 0.3s ease; } .bda-network-figure-metric-justification { color: var(--dba-text-muted); font-size: 0.825rem; line-height: 1.5; margin: 0.25rem 0 0; font-style: italic; } /* Connections sub-list inside figure metrics */ .bda-network-connections-heading { color: var(--dba-text-secondary); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin: 1rem 0 0.4rem; } .bda-network-connections-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; } .bda-network-connection-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; color: var(--dba-text-primary); font-size: 0.9rem; border-bottom: 1px solid rgba(42, 98, 61, 0.3); } .bda-network-connection-item:last-child { border-bottom: none; } .bda-network-connection-arrow { color: var(--dba-emerald); font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; } .bda-network-connection-name { flex: 1; min-width: 0; } .bda-network-connections-empty { color: var(--dba-text-muted); font-size: 0.875rem; font-style: italic; margin: 0.25rem 0 0; } /* --- Connection details (mode 3) ---------------------------------------- */ .bda-network-connection-title { color: var(--dba-text-primary); font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.85rem; } .bda-network-connection-title .bda-network-connection-arrow { color: var(--dba-emerald); margin: 0 0.35rem; font-weight: 700; } .bda-network-connection-meta { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.85rem; } .bda-network-connection-meta-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .bda-network-connection-meta-label { color: var(--dba-text-secondary); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; flex-shrink: 0; } /* Edge-type chip — uses --dba-edge-* tokens; same vocabulary as legend */ .bda-network-edge-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.55rem; background-color: var(--dba-medium-green); border: 1px solid var(--dba-border-green); border-radius: 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--dba-text-primary); } .bda-network-edge-chip::before { content: ""; display: inline-block; width: 14px; height: 3px; flex-shrink: 0; } .bda-network-edge-chip.edge-META::before { background-color: var(--dba-edge-meta); } .bda-network-edge-chip.edge-P2C::before { background: repeating-linear-gradient(90deg, var(--dba-edge-p2c) 0 5px, transparent 5px 8px); } .bda-network-edge-chip.edge-C2C::before { background: repeating-linear-gradient(90deg, var(--dba-edge-c2c) 0 3px, transparent 3px 5px); } .bda-network-edge-chip.edge-ORG::before { background: repeating-linear-gradient(90deg, var(--dba-edge-org) 0 1px, transparent 1px 3px, var(--dba-edge-org) 3px 7px, transparent 7px 9px); } .bda-network-edge-chip.edge-CC::before { background: repeating-linear-gradient(90deg, var(--dba-edge-cc) 0 1px, transparent 1px 2px); } .bda-network-connection-evidence-label { color: var(--dba-text-secondary); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin: 0.25rem 0 0.35rem; } .bda-network-connection-evidence { color: var(--dba-text-primary); font-size: 0.9rem; line-height: 1.6; margin: 0; padding: 0.75rem 0.85rem; background-color: var(--dba-medium-green); border-left: 3px solid var(--dba-emerald); border-radius: 0 0.25rem 0.25rem 0; font-style: italic; } /* ========================================================================== SVG node / label / edge default treatments -------------------------------------------------------------------------- Minor defaults for the force-directed graph. The JS sets attrs on each element directly, but these CSS rules ensure the rendering is consistent with the archive's tone — labels in text-primary, subtle default stroke on nodes, pointer cursor on interactive elements. ========================================================================== */ .bda-network-container .nodes path { cursor: pointer; } .bda-network-container .nodes path:focus { outline: none; /* Custom focus treatment via stroke below */ stroke: var(--dba-gold); stroke-width: 3; } .bda-network-container .labels text { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; user-select: none; } .bda-network-container .edges line { pointer-events: none; /* Hit areas handle clicks */ } /* ========================================================================== Legend edge-code label (the "META", "P2C", etc. monospace tag) -------------------------------------------------------------------------- Sits between the dash swatch and the descriptive text in Relationship Types. Already covered by .bda-network-legend-code above, but this is a reminder that the three elements inside .bda-network-legend-row are: 1. [swatch: .legend-line .legend-meta etc.] 2. [code: .bda-network-legend-code — "META"] 3. [label: .bda-network-legend-label — "Creator → Creation"] ========================================================================== */ /* ========================================================================== PHASE 8b POLISH — MAP VISUALIZATION PAGE -------------------------------------------------------------------------- Append this block to styles.css after the Phase 8 network CSS. Architecture: - Map canvas is full-width (no side rail) - Filter sits as a horizontal strip BELOW the map (per mockup inversion) - Selection panel is a single full-width card below the filter strip - Leaflet default popup chrome is overridden to match the dark theme Reuses: - --dba-network-bg token for the canvas frame (shared visual vocabulary across both visualization tools) - .bda-filter-option, .bda-filter-modality-marker, .bda-mm-* (Phase 2) - .modality-badge, .modality-badge.modality-* (Phase 4) - .tier-badge, .tier-1/2/3 (Phase 4) - .breadcrumb, .lead (Phase 2) - .bda-network-selection-empty (Phase 8) for the empty-state paragraph All new classes prefixed .bda-map-*. No hardcoded hex values. ========================================================================== */ /* ========================================================================== Layout — full-width main (no sidebar) ========================================================================== */ .bda-map-layout-section { padding-top: 1rem; padding-bottom: 5rem; } .bda-map-main { max-width: 1400px; margin: 0 auto; padding: 0 1rem; } .bda-map-lead { color: var(--dba-text-secondary); font-size: 1.05rem; line-height: 1.6; max-width: 68ch; margin: 0 0 1.5rem; } /* ========================================================================== Canvas Wrapper — framed Leaflet container -------------------------------------------------------------------------- Mirrors .bda-network-canvas-wrapper (Phase 8). The map's visual weight is carried by the OpenStreetMap tiles themselves, so the frame's job is purely anchoring — 1px border, emerald on focus-within for keyboard users, modest inset shadow to match the network canvas. ========================================================================== */ .bda-map-canvas-wrapper { background-color: var(--dba-network-bg); border: 1px solid var(--dba-border-green); border-radius: 0.5rem; padding: 0.75rem; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); transition: border-color 0.2s ease; } .bda-map-canvas-wrapper:focus-within { border-color: var(--dba-emerald); } .bda-map-container { width: 100%; height: 620px; min-height: 620px; border-radius: 0.25rem; overflow: hidden; } @media (max-width: 575px) { .bda-map-container { height: 440px; min-height: 440px; } } /* ========================================================================== Filter Strip — horizontal card below the map -------------------------------------------------------------------------- Unlike the sidebar rail on figures/network pages, here the filter is a single horizontal card where options flow left-to-right. The fieldset has no visible heading (legend is sr-only) because the strip sits right below the map and its purpose is self-evident from context. On narrow viewports the options wrap naturally. ========================================================================== */ .bda-map-filter-strip { margin-top: 1.25rem; padding: 0.9rem 1.25rem; background-color: var(--dba-content-green); border: 1px solid var(--dba-border-green); border-radius: 0.5rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .bda-map-filter-strip-label { color: var(--dba-emerald); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; } .bda-map-filter-options { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; flex: 1; margin: 0; padding: 0; border: none; } /* Overrides to .bda-filter-option for horizontal-strip context — the base rule (Phase 2) styles it as a full-width flex row with hover background. In a horizontal strip we want the hover to feel chippier. */ .bda-map-filter-strip .bda-filter-option { display: inline-flex; align-items: center; padding: 0.3rem 0.65rem; border-radius: 0.25rem; gap: 0.3rem; } .bda-map-filter-strip .bda-filter-option:hover { background-color: var(--dba-medium-green); } .bda-map-filter-strip .bda-filter-option.is-disabled:hover { background-color: transparent; } .bda-map-filter-strip .bda-filter-option > span:last-child { color: var(--dba-text-primary); font-size: 0.9rem; } .bda-map-filter-strip .bda-filter-option.is-disabled > span:last-child { color: var(--dba-text-muted); } .bda-map-filter-strip .bda-filter-pending-tag { color: var(--dba-text-muted); font-size: 0.82em; } /* ========================================================================== Selection Panel — single full-width card below filter strip ========================================================================== */ .bda-map-selection-panel { margin-top: 1.25rem; padding: 1.25rem 1.5rem; background-color: var(--dba-content-green); border: 1px solid var(--dba-border-green); border-radius: 0.5rem; } .bda-map-selection-heading { color: var(--dba-emerald); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 1rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--dba-border-green); } /* ========================================================================== Teaser — figure detail content inside the selection card -------------------------------------------------------------------------- Mirrors the network teaser (.bda-network-teaser-*) but scoped to the map page. Two-column content layout on wide viewports (teaser left, map-specific facts right), stacks on narrow. ========================================================================== */ .bda-map-teaser { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; } @media (max-width: 767px) { .bda-map-teaser { grid-template-columns: 1fr; gap: 1.25rem; } } .bda-map-teaser-main { min-width: 0; } .bda-map-teaser-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.65rem; flex-wrap: wrap; } .bda-map-teaser-name { color: var(--dba-text-primary); font-size: 1.2rem; font-weight: 700; line-height: 1.25; margin: 0; flex: 1; min-width: 12ch; } .bda-map-teaser-header .modality-badge { margin: 0; } .bda-map-teaser-bio { color: var(--dba-text-secondary); font-size: 0.95rem; line-height: 1.6; margin: 0 0 0.85rem; } .bda-map-teaser-link { display: inline-block; color: var(--dba-emerald); font-size: 0.95rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 0.1rem; transition: color 0.15s ease, border-bottom-color 0.15s ease; } .bda-map-teaser-link:hover, .bda-map-teaser-link:focus { color: var(--dba-gold); border-bottom-color: var(--dba-gold); } /* --- Right-column map-specific facts ----------------------------------- */ .bda-map-teaser-facts { background-color: var(--dba-medium-green); border: 1px solid var(--dba-border-green); border-radius: 0.375rem; padding: 0.85rem 1rem; } .bda-map-teaser-facts-heading { color: var(--dba-text-secondary); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.55rem; } .bda-map-teaser-fact { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(42, 98, 61, 0.35); } .bda-map-teaser-fact:first-of-type { padding-top: 0; } .bda-map-teaser-fact:last-of-type { border-bottom: none; padding-bottom: 0; } .bda-map-teaser-fact-label { color: var(--dba-text-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .bda-map-teaser-fact-value { color: var(--dba-text-primary); font-size: 0.9rem; line-height: 1.45; } /* Territory status line — green dot + "Territory shown on map" */ .bda-map-teaser-territory { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.65rem; margin-top: 0.75rem; background-color: var(--dba-darkest-green); border: 1px solid var(--dba-border-green); border-radius: 0.25rem; color: var(--dba-text-primary); font-size: 0.82rem; } .bda-map-teaser-territory::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--dba-emerald); flex-shrink: 0; box-shadow: 0 0 0 2px rgba(80, 200, 120, 0.25); } .bda-map-teaser-territory.is-inactive { color: var(--dba-text-muted); } .bda-map-teaser-territory.is-inactive::before { background-color: var(--dba-text-muted); box-shadow: none; } /* ========================================================================== Leaflet popup overrides — archive-themed dark popups -------------------------------------------------------------------------- Leaflet renders popups with its own default white-bubble chrome. We use the className option on bindPopup() to attach .bda-map-popup-wrapper to each popup, then override the Leaflet-internal class names (.leaflet- popup-content-wrapper, .leaflet-popup-tip, .leaflet-popup-close-button) ONLY when they're descendants of our wrapper. Global Leaflet popups elsewhere on the site (unlikely, but if a plugin adds any) are unaffected. ========================================================================== */ .bda-map-popup-wrapper .leaflet-popup-content-wrapper { background-color: var(--dba-content-green); color: var(--dba-text-primary); border: 1px solid var(--dba-border-green); border-radius: 0.375rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); padding: 0; } .bda-map-popup-wrapper .leaflet-popup-content { margin: 0.85rem 1rem; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.9rem; line-height: 1.5; } .bda-map-popup-wrapper .leaflet-popup-tip { background-color: var(--dba-content-green); border: 1px solid var(--dba-border-green); box-shadow: none; } .bda-map-popup-wrapper .leaflet-popup-close-button { color: var(--dba-text-muted) !important; font-size: 1.1rem; padding: 0.3rem 0.45rem 0 0; transition: color 0.15s ease; } .bda-map-popup-wrapper .leaflet-popup-close-button:hover, .bda-map-popup-wrapper .leaflet-popup-close-button:focus { color: var(--dba-gold) !important; } /* Inner popup structure */ .bda-map-popup-location-name { display: block; color: var(--dba-text-primary); font-size: 0.95rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.2rem; } .bda-map-popup-figure-name { display: block; color: var(--dba-emerald); font-size: 0.82rem; font-style: italic; font-weight: 500; margin-bottom: 0.5rem; } .bda-map-popup-significance { color: var(--dba-text-secondary); font-size: 0.85rem; line-height: 1.55; margin: 0; } /* ========================================================================== Leaflet control overrides — zoom buttons + attribution -------------------------------------------------------------------------- Leaflet's default zoom control is a white button with black text, which reads loud against the OSM tiles but even louder against our dark canvas border. Dial them into the archive's palette. ========================================================================== */ .bda-map-container .leaflet-control-zoom a { background-color: var(--dba-content-green); color: var(--dba-text-primary); border: 1px solid var(--dba-border-green); transition: background-color 0.15s ease, color 0.15s ease; } .bda-map-container .leaflet-control-zoom a:hover, .bda-map-container .leaflet-control-zoom a:focus { background-color: var(--dba-emerald); color: var(--dba-darkest-green); border-color: var(--dba-emerald); } .bda-map-container .leaflet-control-attribution { background-color: rgba(10, 31, 18, 0.85); color: var(--dba-text-secondary); font-size: 0.72rem; padding: 0.2rem 0.5rem; border-radius: 0.2rem 0 0 0; } .bda-map-container .leaflet-control-attribution a { color: var(--dba-emerald); text-decoration: none; } .bda-map-container .leaflet-control-attribution a:hover, .bda-map-container .leaflet-control-attribution a:focus { color: var(--dba-gold); text-decoration: underline; } /* ========================================================================== Main marker glyph rendering — ensure SVG markers stay crisp -------------------------------------------------------------------------- L.divIcon wraps our SVG in a
. By default Leaflet adds a white background and border to that div. Our markers are already self-contained SVGs, so we strip the default chrome. ========================================================================== */ .bda-map-container .leaflet-div-icon { background: transparent; border: none; } .bda-map-container .bda-map-marker svg, .bda-map-container .bda-map-marker-secondary svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); } /* Hover scale for primary markers (not secondary to reduce visual noise) */ .bda-map-container .bda-map-marker { transition: transform 0.15s ease; transform-origin: center; } .bda-map-container .bda-map-marker:hover { transform: scale(1.15); z-index: 1000; } .bda-map-container .bda-map-marker:focus { outline: none; transform: scale(1.15); } .bda-map-container .bda-map-marker:focus svg { filter: drop-shadow(0 0 0 3px var(--dba-gold)); }