/* ============================================================ Rent Responsibly – STR Regulations Widget Stylesheet — v5 Brand (Poppins · Gold #FDB924 · Light) Mirrors rr_homepage_v5 design language. ============================================================ */ /* --- Google Fonts: Poppins (also imported in ) --- */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap'); /* --- CSS Custom Properties --- */ :root { /* v5 brand palette */ --gold: #FDB924; /* primary accent */ --gold-soft: rgba(253,185,36,0.16); --ink: #111114; /* near-black text */ --teal: #1F576A; /* brand teal */ --teal-dark: #17455A; --slate: #8FA4B5; /* muted blue-grey */ /* Surfaces (light theme) */ --page-bg: #F7F8FA; --bg: #ffffff; --card-bg: #ffffff; --surface: #F7F8FA; --surface-2: #F0F2F5; --surface-hover: #EEF1F5; --header-bg: #ffffff; --header-text: #111114; /* Borders */ --border: #EBEBF0; --border-strong: #D8DBDF; /* Map colors (consumed by d3map.js via CSS variables) */ --state-fill: #1F576A; /* base map: RR teal */ --state-stroke: #ffffff; --state-stroke-w: 0.6; --state-hover: #6EB4C9; /* hover: light RR blue */ --state-hover-stroke: #ffffff; --state-active: #6EB4C9; /* selected: light RR blue */ --state-active-stroke: #ffffff; /* clean ring on selected */ --state-populated: #1F576A; /* has data: RR dark teal */ --state-populated-stroke: #ffffff; --state-inset-bg: #EEF1F5; /* Strictness scale (state fills) */ --state-friendly: #6EB4C9; /* Unregulated — light RR blue (distinct from dark teal base) */ --state-mixed: #FDB924; /* Mixed — gold */ --state-restrictive: #F0792B; /* Restricted — orange */ --state-heavy: #E5392E; /* Banned — red (reserved) */ --state-nodata: #D8DBDF; /* no data — neutral grey */ /* Text */ --text-primary: #111114; --text-secondary: #55555F; --text-muted: #ABABBC; /* Status badge palette (semantic) */ --status-highly: #FDB924; --status-moderate: #1F576A; --status-light: #8FA4B5; --status-soon: #ABABBC; /* Shape */ --radius: 16px; --radius-sm: 10px; --shadow: 0 4px 18px rgba(17,17,20,0.06); --shadow-lg: 0 18px 48px -18px rgba(17,17,20,0.18); /* Font */ --font: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font); background: var(--page-bg); color: var(--text-primary); line-height: 1.6; min-height: 100vh; } /* ============================================================ Top Bar Accent — gold stripe at page top ============================================================ */ .top-bar-accent { height: 4px; background: var(--gold); width: 100%; flex-shrink: 0; } /* ============================================================ Layout ============================================================ */ .widget-wrapper { max-width: 1200px; margin: 0 auto; background: var(--bg); box-shadow: var(--shadow-lg); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } /* --- Header --- */ .widget-header { background: var(--header-bg); color: var(--header-text); padding: 16px 28px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } /* RR logo image */ .widget-header .logo-img { height: 32px; width: auto; display: block; flex-shrink: 0; } .widget-header .header-text h1 { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; } .widget-header .header-text p { font-size: 0.76rem; color: var(--text-muted); margin-top: 3px; } /* --- Body: map + panel --- */ .widget-body { display: grid; grid-template-columns: 1fr 360px; min-height: 520px; } /* --- Map column --- */ .map-column { padding: 20px 16px 16px; background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; } /* Search */ .search-bar { position: relative; } .search-bar label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .search-bar input { width: 100%; padding: 10px 14px 10px 36px; border: 1px solid var(--border-strong); border-radius: 40px; font-size: 0.9rem; font-family: var(--font); background: #fff; color: var(--text-primary); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .search-bar input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } .search-bar input::placeholder { color: var(--text-muted); } .search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; width: 16px; height: 16px; } .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 100; max-height: 200px; overflow-y: auto; display: none; } .search-results.visible { display: block; } .search-results li { list-style: none; padding: 10px 14px; cursor: pointer; font-size: 0.88rem; color: var(--text-secondary); display: flex; align-items: center; gap: 10px; } .search-results li:hover, .search-results li.highlighted { background: var(--surface); color: var(--teal); } .search-results li .state-abbr { font-weight: 700; color: var(--text-muted); width: 28px; font-size: 0.8rem; } .search-results li.has-data .state-abbr { color: var(--teal); } /* SVG Map */ .map-container { flex: 1; position: relative; min-height: 0; display: flex; align-items: center; } .map-svg { width: 100%; height: auto; display: block; } /* State paths */ .state-path { fill: var(--state-fill); stroke: var(--state-stroke); stroke-width: var(--state-stroke-w); cursor: pointer; transition: fill 0.15s ease, stroke 0.15s ease, filter 0.15s ease; outline: none; } .state-path.has-data { fill: var(--state-populated); stroke: var(--state-populated-stroke); } .state-path:hover, .state-path.hovered { fill: var(--state-hover); stroke: var(--state-hover-stroke); stroke-width: 1.2; filter: drop-shadow(0 1px 5px rgba(253,185,36,0.4)); } .state-path.active { fill: var(--state-active); stroke: var(--state-active-stroke); stroke-width: 2; filter: drop-shadow(0 2px 6px rgba(17,17,20,0.25)); } .state-path:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* State labels (omitted from render — hover tooltip used instead) */ .state-label { font-size: 5.5px; font-weight: 600; fill: #fff; pointer-events: none; user-select: none; text-anchor: middle; dominant-baseline: middle; letter-spacing: 0.2px; } /* Inset labels */ .inset-label { font-size: 5px; fill: var(--text-muted); font-style: italic; text-anchor: middle; pointer-events: none; } .inset-border { fill: var(--state-inset-bg); stroke: var(--border-strong); stroke-width: 0.5; stroke-dasharray: 3,2; } /* Map legend — STR regulatory strictness gradient scale */ /* ============================================================ Info Panel (right column) ============================================================ */ .info-panel { padding: 20px; overflow-y: auto; max-height: 600px; display: flex; flex-direction: column; gap: 16px; background: var(--bg); } /* Prompt state (no selection) */ .panel-prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 32px 16px; flex: 1; color: var(--text-secondary); } .panel-prompt svg { opacity: 0.5; color: var(--teal); } .panel-prompt h2 { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; color: var(--text-primary); } .panel-prompt p { font-size: 0.85rem; max-width: 220px; line-height: 1.5; color: var(--text-muted); } /* State detail view */ .state-detail { display: flex; flex-direction: column; gap: 14px; } .state-detail.hidden { display: none; } .panel-prompt.hidden { display: none; } /* State header banner — teal, bleeds to panel edges */ .state-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; background: var(--teal); margin: -20px -20px 0; padding: 18px 20px; } .state-header-name { display: flex; align-items: center; gap: 10px; } /* Abbreviation badge inside header */ .state-flag { width: 42px; height: 42px; background: var(--gold); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; color: var(--ink); flex-shrink: 0; } .state-title h2 { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; color: #ffffff; line-height: 1.2; } .state-title span { font-size: 0.78rem; color: rgba(255,255,255,0.78); } /* Status / regulation-level badges — pill style */ .status-badge { padding: 4px 11px; border-radius: 20px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; flex-shrink: 0; } .status-badge.highly-regulated { background: rgba(253,185,36,0.22); color: #8a5b00; border: 1px solid rgba(253,185,36,0.5); } .status-badge.moderate { background: rgba(143,164,181,0.22); color: #4a6473; border: 1px solid rgba(143,164,181,0.5); } .status-badge.light { background: rgba(31,87,106,0.14); color: var(--teal); border: 1px solid rgba(31,87,106,0.35); } .status-badge.coming-soon { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.4); } /* Summary */ .state-summary { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.65; padding: 14px; background: var(--surface); border-radius: var(--radius-sm); border-left: 3px solid var(--gold); } .state-summary.coming-soon-bg { border-left-color: var(--text-muted); font-style: italic; } /* Quick facts */ .quick-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; } .fact-card .fact-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); font-weight: 600; } .fact-card .fact-value { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); } .fact-value.yes { color: #b07c00; } .fact-value.no { color: var(--teal); } .fact-value.na { color: var(--text-muted); font-style: italic; } /* Key regulations */ .rules-section h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.9px; color: var(--teal); font-weight: 700; margin-bottom: 9px; } .rules-list { list-style: none; display: flex; flex-direction: column; gap: 7px; } .rules-list li { font-size: 0.84rem; color: var(--text-secondary); padding-left: 18px; position: relative; line-height: 1.5; } .rules-list li::before { content: "›"; position: absolute; left: 0; color: var(--gold); font-weight: 700; font-size: 1rem; line-height: 1.4; } /* CTA button — v5 gold pill */ .panel-cta { margin-top: 4px; } .btn-learn-more { display: inline-flex; align-items: center; gap: 7px; background: var(--gold); color: var(--ink); padding: 11px 22px; border-radius: 40px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; font-family: var(--font); text-decoration: none; border: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .btn-learn-more:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(253,185,36,0.7); } .btn-learn-more:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .last-updated { font-size: 0.72rem; color: var(--text-muted); text-align: right; margin-top: 4px; } /* ============================================================ Footer ============================================================ */ .widget-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .widget-footer p { font-size: 0.74rem; color: var(--text-muted); } .widget-footer a { color: var(--teal); text-decoration: none; font-weight: 600; } .widget-footer a:hover { text-decoration: underline; } /* ============================================================ Tooltip — v5 white card with gold accent ============================================================ */ .map-tooltip { position: fixed; background: #ffffff; color: var(--ink); padding: 8px 14px; border-radius: 12px; font-size: 0.78rem; font-weight: 700; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 1000; white-space: nowrap; transform: translate(-50%, -110%); box-shadow: 0 6px 24px rgba(17,17,20,0.16); border: 1px solid var(--border); border-left: 3px solid var(--gold); } .map-tooltip.visible { opacity: 1; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 820px) { .widget-body { grid-template-columns: 1fr; } .map-column { border-right: none; border-bottom: 1px solid var(--border); padding: 16px; } .info-panel { max-height: none; padding: 16px; } .state-header { margin: -16px -16px 0; } .widget-header .header-text h1 { font-size: 1rem; } } @media (max-width: 480px) { .widget-header { padding: 12px 16px; } .map-column { padding: 12px; } .info-panel { padding: 12px; } .state-header { margin: -12px -12px 0; } .quick-facts { grid-template-columns: 1fr; } } /* ============================================================ Print ============================================================ */ @media print { body, .widget-wrapper { background: #fff; color: #111; } .widget-wrapper { box-shadow: none; border: 1px solid #ccc; } .btn-learn-more { display: none; } .widget-footer { background: #fff; } .widget-footer p { color: #666; } } /* ============================================================ VIEW CONTAINERS — Three-view navigation system ============================================================ */ .view-container { display: none; } .view-container.active { display: block; animation: viewFadeIn 0.22s ease; } @keyframes viewFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ MAP VIEW — Updated styles ============================================================ */ #view-map .widget-body { display: grid; grid-template-columns: 1fr 320px; min-height: 0; align-items: center; } /* Map Prompt Panel (right side on map view) */ .map-prompt-panel { background: var(--bg); border-left: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .map-prompt-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 32px 24px; color: var(--text-secondary); } .map-prompt-inner svg { opacity: 0.5; color: var(--teal); } .map-prompt-inner h2 { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; color: var(--text-primary); } .map-prompt-inner p { font-size: 0.85rem; max-width: 220px; line-height: 1.55; color: var(--text-muted); } /* Featured states mini-grid */ .prompt-states-grid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; } .featured-state-btn { background: var(--teal); color: #fff; border: none; border-radius: 30px; padding: 6px 14px; font-size: 0.76rem; font-weight: 700; font-family: var(--font); cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s; } .featured-state-btn:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); } /* ============================================================ STATE VIEW (Level 2) ============================================================ */ /* Hero / Header — teal brand banner */ .state-hero { background: var(--teal); color: #fff; position: relative; overflow: hidden; } .state-hero::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 68%); top: -160px; right: -90px; pointer-events: none; } .state-hero-inner { max-width: 1140px; margin: 0 auto; padding: 26px 28px 30px; position: relative; z-index: 1; } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; margin-bottom: 14px; opacity: 0.95; } .breadcrumb-link { color: var(--gold); text-decoration: none; cursor: pointer; transition: color 0.15s; } .breadcrumb-link:hover { color: #fff; } .breadcrumb-sep { color: rgba(255,255,255,0.6); } .breadcrumb-current { color: rgba(255,255,255,0.9); font-weight: 600; } .state-hero-h1 { font-size: 1.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.025em; color: #fff; line-height: 1.1; margin-bottom: 8px; } .state-hero-sub { font-size: 0.9rem; color: rgba(255,255,255,0.82); margin-bottom: 18px; } .btn-back-state { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 40px; padding: 8px 18px; font-size: 0.8rem; font-weight: 700; font-family: var(--font); cursor: pointer; transition: background 0.15s, color 0.15s; } .btn-back-state:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); } /* State view body */ .state-view-body { background: var(--page-bg); padding: 24px 28px 40px; max-width: 1140px; margin: 0 auto; width: 100%; box-sizing: border-box; } /* Stat cards row */ .stat-cards-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; box-shadow: var(--shadow); } .stat-number { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--text-primary); } .stat-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; } /* Tinted backgrounds */ .stat-allowed { background: #f0faf2; border-left: 3px solid #22c55e; } .stat-allowed .stat-number { color: #15803d; } .stat-allowed .stat-label { color: #16a34a; } .stat-restricted { background: #fff8e8; border-left: 3px solid var(--gold); } .stat-restricted .stat-number { color: #b07c00; } .stat-restricted .stat-label { color: #a87600; } .stat-banned { background: #fef2f2; border-left: 3px solid #ef4444; } .stat-banned .stat-number { color: #b91c1c; } .stat-banned .stat-label { color: #dc2626; } .stat-unregulated { background: #f5f7f9; border-left: 3px solid var(--slate); } .stat-unregulated .stat-number { color: #374151; } .stat-unregulated .stat-label { color: #6b7280; } /* Active stat card (selected as filter) */ .stat-card.stat-active { box-shadow: 0 0 0 2px var(--gold), var(--shadow); transform: translateY(-2px); transition: transform 0.15s, box-shadow 0.15s; } /* State Overview Card */ .state-overview-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); margin-bottom: 24px; } .overview-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .overview-section-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.9px; font-weight: 700; color: var(--teal); } .state-summary-text { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; } /* State view status badge */ .sv-status-badge { padding: 3px 11px; border-radius: 20px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .sv-status-allowed { background: #dcfce7; color: #15803d; border: 1px solid #86efac; } .sv-status-restricted { background: #fef3c7; color: #a87600; border: 1px solid #fcd34d; } .sv-status-banned { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; } .sv-status-unregulated { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; } .sv-status-mixed, .sv-status-coming-soon, .sv-status-moderate, .sv-status-light, .sv-status-preempted { background: rgba(31,87,106,0.12); color: var(--teal); border: 1px solid rgba(31,87,106,0.3); } /* Markets Section */ .markets-section { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; } .markets-h2 { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 14px; } /* Filter bar */ .markets-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; } .markets-search-wrap { position: relative; flex: 0 0 220px; } .markets-search-wrap input { width: 100%; padding: 9px 12px 9px 32px; border: 1px solid var(--border-strong); border-radius: 40px; font-size: 0.85rem; font-family: var(--font); color: var(--text-primary); background: var(--surface); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .markets-search-wrap input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); background: #fff; } .markets-search-wrap input::placeholder { color: var(--text-muted); } .search-icon-sm { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-muted); pointer-events: none; } /* Filter pills */ .filter-pills-group { display: flex; gap: 6px; flex-wrap: wrap; } .filter-pill { padding: 6px 13px; border-radius: 20px; border: 1.5px solid var(--border-strong); background: transparent; color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; font-family: var(--font); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .filter-pill:hover { border-color: var(--teal); color: var(--teal); } .filter-pill.active { background: var(--teal); border-color: var(--teal); color: #fff; } /* Markets count */ .markets-count { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 10px; } /* Markets Table */ .markets-table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); } .markets-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .markets-table thead tr { background: var(--surface); border-bottom: 2px solid var(--border); } .markets-table thead th { padding: 11px 14px; text-align: left; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); white-space: nowrap; } .markets-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; } .markets-table tbody tr:last-child { border-bottom: none; } .markets-table tbody tr:hover { background: var(--surface); } .markets-table tbody td { padding: 12px 14px; color: var(--text-primary); vertical-align: middle; } .market-name-cell { font-weight: 600; color: var(--text-primary); } .market-type-cell { } /* Type pill */ .type-pill { background: rgba(31,87,106,0.1); color: var(--teal); border-radius: 30px; padding: 3px 10px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; } /* Status pills */ .status-pill { display: inline-block; padding: 3px 11px; border-radius: 20px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; } .pill-allowed { background: #dcfce7; color: #15803d; } .pill-restricted { background: #fef3c7; color: #a87600; } .pill-banned { background: #fee2e2; color: #b91c1c; } .pill-unregulated { background: #f3f4f6; color: #374151; } /* Permit cells */ .permit-cell { font-size: 0.82rem; } .permit-yes { color: #15803d; font-weight: 600; } .permit-no { color: var(--text-muted); } /* View button */ .btn-view-market { background: var(--gold); color: var(--ink); border: none; border-radius: 30px; padding: 6px 14px; font-size: 0.76rem; font-weight: 700; font-family: var(--font); cursor: pointer; white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s; } .btn-view-market:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(253,185,36,0.7); } /* Empty state */ .markets-empty { text-align: center; padding: 28px; color: var(--text-muted); font-size: 0.88rem; } .markets-empty.hidden { display: none; } /* ============================================================ CITY VIEW (Level 3) ============================================================ */ /* City Hero — teal brand banner */ .city-hero { background: var(--teal); color: #fff; position: relative; overflow: hidden; } .city-hero::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 68%); top: -160px; right: -90px; pointer-events: none; } .city-hero-inner { max-width: 1140px; margin: 0 auto; padding: 28px 28px 32px; position: relative; z-index: 1; } .city-hero-badges { display: flex; gap: 8px; margin-bottom: 14px; } .city-badge-status { display: inline-block; padding: 4px 13px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .badge-allowed { background: rgba(34,197,94,0.28); color: #d6ffe4; border: 1px solid rgba(134,239,172,0.5); } .badge-restricted { background: rgba(253,185,36,0.3); color: #fff1cc; border: 1px solid rgba(253,185,36,0.55); } .badge-banned { background: rgba(239,68,68,0.3); color: #ffe0e0; border: 1px solid rgba(252,165,165,0.5); } .badge-unregulated { background: rgba(255,255,255,0.2); color: #f3f4f6; border: 1px solid rgba(255,255,255,0.4); } .city-badge-type { display: inline-block; padding: 4px 13px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.3); } .city-hero-h1 { font-size: 1.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.025em; color: #fff; line-height: 1.1; margin-bottom: 8px; } .city-hero-sub { font-size: 0.84rem; color: rgba(255,255,255,0.82); margin-bottom: 18px; } .city-report-link { color: var(--gold); text-decoration: underline; text-decoration-style: dotted; opacity: 0.9; } .btn-back-city { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 40px; padding: 8px 18px; font-size: 0.8rem; font-weight: 700; font-family: var(--font); cursor: pointer; transition: background 0.15s, color 0.15s; } .btn-back-city:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); } /* City content layout */ .city-content-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; max-width: 1140px; margin: 0 auto; padding: 28px 28px 48px; background: var(--page-bg); align-items: start; } /* City main content */ .city-main { display: flex; flex-direction: column; gap: 20px; } .city-section { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; } .city-section-h2 { font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--teal); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .city-section-text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; } /* Permit steps */ .city-permit-steps { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; margin: 0; } .city-permit-steps li { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.65; padding-left: 4px; } .city-permit-steps li::marker { color: var(--gold); font-weight: 700; } /* Official resource button */ .btn-official-resource { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--ink); padding: 11px 20px; border-radius: 40px; font-size: 0.85rem; font-weight: 700; font-family: var(--font); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; } .btn-official-resource:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(253,185,36,0.7); } /* City Sidebar — Quick Facts */ .city-sidebar { position: sticky; top: 20px; } .quick-facts-card { background: var(--teal); border-radius: var(--radius); padding: 22px 22px 18px; color: #fff; box-shadow: var(--shadow-lg); } .qf-header { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.2); } .qf-eyebrow { display: block; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gold); margin-bottom: 5px; } .qf-city-name { font-size: 1.05rem; font-weight: 700; color: #fff; } .qf-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .qf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .qf-key { font-size: 0.78rem; color: rgba(255,255,255,0.78); font-weight: 600; } .qf-val-text { font-size: 0.82rem; color: rgba(255,255,255,0.95); font-weight: 600; text-align: right; } /* QF Badges */ .qf-val-badge { padding: 3px 11px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; } .qf-badge-yes { background: rgba(34,197,94,0.28); color: #d6ffe4; border: 1px solid rgba(134,239,172,0.45); } .qf-badge-no { background: rgba(239,68,68,0.28); color: #ffe0e0; border: 1px solid rgba(252,165,165,0.45); } .qf-badge-neutral { background: rgba(255,255,255,0.2); color: #f3f4f6; border: 1px solid rgba(255,255,255,0.4); } .qf-back-link { display: block; font-size: 0.8rem; color: var(--gold); text-decoration: none; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.2); transition: color 0.15s; } .qf-back-link:hover { color: #fff; } /* ============================================================ RESPONSIVE OVERRIDES ============================================================ */ @media (max-width: 900px) { #view-map .widget-body { grid-template-columns: 1fr; } .map-prompt-panel { border-left: none; border-top: 1px solid var(--border); } .stat-cards-row { grid-template-columns: repeat(2, 1fr); } .city-content-layout { grid-template-columns: 1fr; padding: 20px 16px 40px; } .city-sidebar { position: static; } .state-view-body { padding: 16px 16px 32px; } .state-hero-inner { padding: 18px 16px 22px; } .city-hero-inner { padding: 20px 16px 24px; } .state-hero-h1 { font-size: 1.35rem; } .city-hero-h1 { font-size: 1.25rem; } } @media (max-width: 600px) { .stat-cards-row { grid-template-columns: repeat(2, 1fr); gap: 10px; } .markets-filter-bar { flex-direction: column; align-items: flex-start; } .markets-search-wrap { flex: none; width: 100%; } .filter-pills-group { width: 100%; } .state-hero-h1 { font-size: 1.15rem; } .city-hero-h1 { font-size: 1.05rem; } .markets-table thead th:nth-child(4), .markets-table tbody td:nth-child(4) { display: none; } } /* ===== Embedded mode — auto-hide chrome when inside an iframe (no homepage change needed) ===== */ html.embedded .top-bar-accent, html.embedded .widget-header, html.embedded .map-prompt-panel { display: none !important; } html.embedded #view-map .widget-body { grid-template-columns: 1fr; min-height: 0; } html.embedded .map-column { border-right: none; border-bottom: none; } html.embedded .widget-wrapper { box-shadow: none; border: none; border-radius: 0; } /* Transparent background so the widget sits directly on the page (no white box) */ html.embedded, html.embedded body, html.embedded .widget-wrapper, html.embedded .map-column { background: transparent !important; } /* Body must hug content (not 100vh) so the iframe auto-resizer reports the true height */ html.embedded body, html.compact body { min-height: 0; } /* ===== Compact embed mode — map + legend only (hero iframe uses ?view=compact) ===== */ html.compact .top-bar-accent, html.compact .widget-header, html.compact .search-bar, html.compact .map-prompt-panel, html.compact .widget-footer{display:none!important} html.compact #view-map .widget-body{grid-template-columns:1fr;min-height:0} html.compact .map-column{border-right:none;padding:8px 12px 12px} html.compact .widget-wrapper{box-shadow:none;border:none;border-radius:0} html.compact,html.compact body{background:#fff}