diff --git a/assets/img/flock_pole_cam_palmdale.jpg b/assets/img/flock_pole_cam_palmdale.jpg new file mode 100644 index 0000000..fc71463 Binary files /dev/null and b/assets/img/flock_pole_cam_palmdale.jpg differ diff --git a/css/styles.css b/css/styles.css index f7e70f4..447db65 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1379,9 +1379,94 @@ body { justify-content: space-between; } +/* Prominent Cross Streets Box */ +.dir-cam-cross-box { + display: flex; + align-items: center; + gap: 10px; + background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(15, 23, 42, 0.6)); + border: 1px solid rgba(6, 182, 212, 0.35); + border-radius: 8px; + padding: 8px 12px; + margin-bottom: 12px; +} + +.dir-cam-cross-icon { + font-size: 1.25rem; + flex-shrink: 0; +} + +.dir-cam-cross-content { + display: flex; + flex-direction: column; + min-width: 0; +} + +.dir-cam-cross-label { + font-size: 0.64rem; + font-weight: 800; + letter-spacing: 0.08em; + color: #38bdf8; + font-family: var(--font-mono); +} + +.dir-cam-cross-value { + font-size: 0.95rem; + font-weight: 800; + color: #ffffff; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.dir-cam-city-tag { + font-size: 0.75rem; + color: #94a3b8; + background: rgba(255, 255, 255, 0.05); + padding: 2px 8px; + border-radius: 4px; +} + +.dir-cam-img-hover-hint { + position: absolute; + bottom: 8px; + right: 8px; + font-size: 0.68rem; + background: rgba(0, 0, 0, 0.75); + color: #38bdf8; + padding: 3px 8px; + border-radius: 4px; + backdrop-filter: blur(4px); + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease; +} + +.dir-cam-card:hover .dir-cam-img-hover-hint { + opacity: 1; +} + +.btn-dir-cam-upload-trigger { + margin-top: 6px; + background: rgba(6, 182, 212, 0.15); + border: 1px solid rgba(6, 182, 212, 0.4); + color: #38bdf8; + border-radius: 6px; + padding: 5px 12px; + font-size: 0.75rem; + font-weight: 700; + cursor: pointer; + transition: all 0.2s ease; +} + +.btn-dir-cam-upload-trigger:hover { + background: rgba(6, 182, 212, 0.3); + color: #ffffff; +} + .dir-cam-intersection { font-family: var(--font-heading); - font-size: 1.05rem; + font-size: 1.02rem; font-weight: 700; color: #ffffff; margin-bottom: 6px; @@ -1394,7 +1479,8 @@ body { margin-bottom: 12px; display: flex; align-items: center; - gap: 6px; + gap: 8px; + flex-wrap: wrap; } .dir-cam-specs-row { diff --git a/index.html b/index.html index f45c38f..c11ec74 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@ - + @@ -1055,10 +1055,10 @@ - - - - + + + +