* {
box-sizing: border-box;
}
html,
body {
min-height: 100%;
margin: 0;
}
/* Go13 > chevron - not used*/
.xcamera-info-chevron {
width: 9px;
height: 9px;
border-right: 2.5px solid #59c7ff;
border-bottom: 2.5px solid #59c7ff;
transform: rotate(-45deg);
display: inline-block;
margin-left: 8px;
}
/* down chevron */
.camera-info-chevron {
width: 8px;
height: 8px;
border-right: 2px solid #55bfff;
border-bottom: 2px solid #55bfff;
transform: rotate(45deg);
margin-left: 8px;
margin-top: -4px;
display: inline-block;
flex-shrink: 0;
transition:
transform 0.2s ease,
border-color 0.2s ease;
}
/* =========================================================
roXtrails tabs (Groups / No Groups, Location / Browse,
Icons A–Z / Regular / Large). Set --mountain-image for the
active tab's scenery.
========================================================= */
.rt-group-tabs {
--mountain-image: url("/images/layout/keywords/kw-picker-bg.webp");
--tab-height: 78px;
--tab-angle: -18deg;
--tab-outline: #8de5ff;
--tab-contours: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22420%22%20height%3D%22240%22%20viewBox%3D%220%200%20420%20240%22%3E%3Cdefs%3E%3Cpath%20id%3D%22c%22%20d%3D%22M80%200C81%2031%2043%2034%2028%2062C10%2092-44%2073-49%2041C-57%2017-91%2010-79-19C-64-49-30-51-10-69C15-93%2050-70%2052-43C54-19%2083-24%2080%200Z%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%236794b0%22%20stroke-width%3D%221%22%20opacity%3D%22.35%22%3E%3Cg%20transform%3D%22translate(136%20128)%22%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22scale(0.35)%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22scale(0.55)%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22scale(0.78)%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22scale(1)%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22scale(1.24)%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22scale(1.49)%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22scale(1.77)%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22scale(2.08)%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(417%20-6)%20rotate(36)%22%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22scale(0.5)%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22scale(0.75)%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22scale(1)%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22scale(1.27)%22%2F%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22scale(1.56)%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
position: relative;
isolation: isolate;
padding: 18px 30px 0;
margin: 0 0 32px;
}
.rt-group-tabs,
.rt-group-tabs * {
box-sizing: border-box;
}
/* Center the tabs; the cyan rule spans the whole wrapper. */
.rt-group-tabs__inner {
display: flex;
align-items: flex-end;
gap: 8px;
width: min(100%, 1040px);
margin-inline: auto;
}
.rt-group-tabs::after {
content: "";
position: absolute;
z-index: 5;
right: 0;
bottom: 0;
left: 0;
height: 3px;
pointer-events: none;
background: #70dcff;
box-shadow: 0 0 6px #36c9ff, 0 2px 14px rgb(0 174 255 / 30%);
}
.rt-group-tab {
position: relative;
isolation: isolate;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: .3em;
flex: 0 1 auto; /* width follows the label; only shrinks if the row runs out of room */
min-width: 0;
min-height: var(--tab-height);
padding: 16px 28px;
border: 0;
border-radius: 0;
appearance: none;
-webkit-appearance: none;
background: transparent;
color: #12364a;
font-family: inherit;
font-size: clamp(18px, 2vw, 30px);
font-weight: 700;
line-height: 1.15;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Only the background is skewed; the label stays upright. */
.rt-group-tab::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
border: 2px solid #d7eaf5;
border-bottom: 0;
border-radius: 15px 15px 0 0;
background-color: #edf5fa;
background-image: var(--tab-contours);
background-size: 420px 240px;
background-position: center;
transform: skewX(var(--tab-angle));
transform-origin: bottom center;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%);
transition: border-color .18s ease, box-shadow .18s ease;
}
.rt-group-tab.is-active {
z-index: 2;
color: #fff;
text-shadow: 0 2px 4px rgb(0 15 30 / 75%);
}
.rt-group-tab.is-active::before {
border-color: var(--tab-outline);
background-color: #0b3553;
background-image:
linear-gradient(rgb(4 33 56 / 10%), rgb(0 17 34 / 60%)),
var(--mountain-image, none);
background-size: cover;
background-position: center 55%;
background-repeat: no-repeat;
box-shadow:
0 0 8px rgb(70 200 255 / 50%),
inset 0 2px 0 rgb(230 251 255 / 60%);
}
@media (hover: hover) {
.rt-group-tab:hover::before {
border-color: #a4e8ff;
box-shadow: 0 0 10px rgb(75 202 255 / 35%);
}
}
.rt-group-tab:focus-visible {
outline: 2px solid #fff;
outline-offset: 5px;
}
/* Next-view arrow (keyword picker) */
.rt-group-tabs__next {
appearance: none;
display: grid;
place-items: center;
flex: 0 0 44px;
height: 52px;
margin: 0 0 6px;
padding: 0;
border: 1px solid #203c50;
border-radius: 12px;
background: linear-gradient(#102d42, #081b2b);
color: #b2c6d4;
cursor: pointer;
}
.rt-group-tabs__next::before {
content: "";
width: 12px;
height: 22px;
background: currentColor;
clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.rt-group-tabs__next:hover { color: #fff; background: #15384f; }
.rt-group-tabs__next:focus-visible { outline: 2px solid #83deff; outline-offset: 2px; }
/* Where the tabs are used */
.rt-group-tabs--groups .rt-group-tabs__inner,
.rt-group-tabs--filter .rt-group-tabs__inner { width: min(100%, 640px); }
/* compact bars: shared with Location / Browse */
.rt-group-tabs--groups {
--tab-height: 46px;
margin: 0 0 4px;
padding: 4px 30px 0;
}
.rt-group-tabs--groups .rt-group-tab { padding: 6px 20px; font-size: clamp(16px, 1.6vw, 22px); }
/* Section title in the Groups bar: "Videos" (before the tabs) / "Photos" (alone).
Same size as the tab text, no tab shape — it is a label, not a button. */
.rt-group-title {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: var(--tab-height);
padding: 6px 20px;
color: #fff;
font-size: clamp(16px, 1.6vw, 22px);
font-weight: 700;
line-height: 1.15;
white-space: nowrap;
text-shadow: 0 2px 4px rgb(0 15 30 / 75%);
}
/* photo view: nothing to group — only the title stays */
.rt-group-tabs[data-mode="photos"] .rt-group-tab { display: none; }
/* phones: title + both tabs must share one row — tighter padding/type (side padding still
clears the neighbouring tab's skewed edge), same size for title and tabs */
@media (max-width: 480px) {
.rt-group-tabs--groups { padding-left: 8px; padding-right: 8px; }
.rt-group-tabs--groups .rt-group-tabs__inner { gap: 4px; }
.rt-group-tabs--groups .rt-group-tab,
.rt-group-title { padding: 6px 8px; font-size: clamp(11px, 3.7vw, 17px); }
}
.rt-group-tabs--filter { margin-bottom: 14px; }
.video-filter-bar > .rt-group-tabs--filter {
--tab-height: 46px;
flex: 1 1 100%;
margin: 0;
padding: 4px 30px 0;
}
.rt-group-tabs--filter .rt-group-tab { padding: 6px 20px; font-size: clamp(16px, 1.6vw, 22px); white-space: nowrap; }
/* four labelled tabs (Location (4) / Keywords (22) / New (2) / All (46)) need more room than the old 640px */
.rt-group-tabs--filter .rt-group-tabs__inner { width: min(100%, 780px); }
@media (max-width: 700px) {
.video-filter-bar > .rt-group-tabs--filter { padding-left: 8px; padding-right: 8px; }
.rt-group-tabs--filter .rt-group-tab { padding: 6px 6px; font-size: clamp(12px, 3.3vw, 16px); gap: .2em; }
}
@media (max-width: 480px) {
.rt-group-tabs--filter .rt-group-tabs__inner { gap: 4px; }
/* side padding clears the neighbouring tab's skewed edge (active tab paints over it) */
.rt-group-tabs--filter .rt-group-tab { padding: 6px 8px; font-size: clamp(9.5px, 2.7vw, 12px); }
.rt-group-tabs--filter .rt-tab-count { margin-left: .1em; }
}
.video-filter-bar { padding-top: 4px; padding-bottom: 4px; gap: 4px; }
/* Keep tabs on one line on small screens. */
@media (max-width: 600px) {
.rt-group-tabs {
--tab-height: 52px;
--tab-angle: -13deg;
padding: 12px 16px 0;
margin-bottom: 24px;
}
.rt-group-tabs__inner { gap: 6px; }
.rt-group-tab { padding: 12px 10px; font-size: 18px; }
.rt-group-tab::before { border-radius: 10px 10px 0 0; }
.rt-group-tabs__next { flex-basis: 34px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
.rt-group-tab::before { transition: none; }
}
.trail-banner {
position: relative;
padding: 0 20px 14px;
box-shadow: none;
}
.trail-banner::after { content: none; }
/* less empty space above the intro text on the main page */
.roxtrails-content:has(.trail-intro) { padding-top: 8px; }
.trail-banner::before {
content: "";
position: absolute;
inset: auto 0 0;
height: 22px;
box-sizing: border-box;
pointer-events: none;
border-top: 1px solid #f58b19;
border-bottom: 1px solid #f58b19;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath fill='%23f58b19' d='M2 14 12 0 22 14Z'/%3E%3Cpath fill='%2380aec8' d='M26 14 36 0 46 14Z'/%3E%3C/svg%3E")
center / 48px 14px repeat-x
#031726;
}
.trail-intro {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 10px 30px 10px;
text-align: center;
overflow: hidden;
container-type: inline-size;
background:
linear-gradient(
180deg,
rgba(2, 18, 31, .45),
rgba(1, 15, 27, .15)
);
}
/* TOP LINE */
.trail-intro-main {
margin: 0;
white-space: nowrap;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: min(4.1cqw, 64px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -.7px;
color: #e0e9f1;
text-shadow:
0 3px 1px rgba(0,0,0,.75),
0 6px 12px rgba(0,0,0,.35);
}
/* roXtrails */
.trail-intro-main .brand {
color: #fff;
font-style: italic;
font-weight: 800;
margin-right: .12em;
text-shadow:
0 3px 1px rgba(0,0,0,.8),
0 6px 12px rgba(0,0,0,.4);
}
/* ORANGE HEADLINE */
.southwest-title {
width: 100%;
margin: 0 0 0;
white-space: nowrap;
text-align: center;
font-family: "Eagle Lake", serif !important;
font-size: min(4.45cqw, 68px);
font-weight: 400;
line-height: 1;
letter-spacing: .5px;
color: #f39427;
text-shadow:
0 2px 0 #b74220,
0 4px 1px rgba(75, 20, 10, .85),
0 7px 12px rgba(0,0,0,.45);
}
/* state pages (Arizona, Colorado, …) reuse the exact same .trail-intro /
.southwest-title / .trail-banner markup and CSS as the main page — same
container-query sizing, nothing state-specific to maintain separately. */
.state-quicklinks {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 22px;
margin: 0 0 18px;
padding: 0 10px;
}
.state-quicklinks[hidden] { display: none !important; }
.state-quicklink {
color: #cfdeeb;
font-size: 17px;
font-weight: 700;
text-decoration: none;
letter-spacing: .2px;
white-space: nowrap;
transition: color .15s ease;
}
.state-quicklink:hover { color: #fff; }
.state-quicklink.active { color: #f5a623; }
.state-quicklink--home {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex: 0 0 auto;
border-radius: 50%;
border: 1px solid rgba(160, 175, 200, .4);
color: #cfdeeb;
font-size: 13px;
}
.state-quicklink--home:hover { color: #fff; border-color: #4c9dcc; }
/* keep all 5 names + the home icon on one line even on a small phone */
@media (max-width: 480px) {
.state-quicklinks { gap: clamp(6px, 2.8vw, 22px); }
.state-quicklink { font-size: clamp(10px, 3.6vw, 17px); }
.state-quicklink--home { width: 22px; height: 22px; font-size: 10px; }
}
/* ==============================
VIDEO COUNT PILL
============================== */
.video-count {
display: inline-flex;
align-items: center;
height: 1em;
padding: 0 2px 0 2px;
border-radius: 0.5em;
background: linear-gradient( 180deg, rgba(31,69,103,.96) 0%, rgba(7,25,46,.98) 55%, rgba(4,17,34,.98) 100%);
border: 2px solid rgba(115,185,235,.75);
box-shadow: 0 5px 13px rgba(0,0,0,.48), inset 0 1px 1px rgba(255,255,255,.18), inset 0 -2px 5px rgba(0,0,0,.35);
white-space: nowrap;
}
/* number */
.video-count-number {
/* color: #ffb016; */
color: lime;
font-size: 0.6em;
font-weight: 900;
line-height: 1;
margin-right: 8px;
text-shadow: 0 2px 3px rgba(0,0,0,.55);
}
/* VIDEO / VIDEOS */
.video-count-label {
color: #fff;
font-size: 0.4em;
font-weight: 800;
line-height: 1;
letter-spacing: .3px;
margin-right: 10px;
}
/* ==============================
TRAILS VARIANT
============================== */
.video-section-heading.trails::before {
background: linear-gradient( 90deg, transparent, #70c940);
}
.video-section-heading.trails::after {
background: linear-gradient( 90deg, #70c940, transparent);
}
/* ==============================
RESPONSIVE
============================== */
@media (max-width: 800px) {
.video-section-heading { gap: 9px; }
.video-section-heading::before,
.video-section-heading::after { width: 80px; }
.video-section-icon { font-size: 31px; }
.video-section-name { font-size: 31px; }
.video-count { height: 1.2em; padding-left: 13px; }
.video-count-number { font-size: 24px; }
.video-count-label { font-size: 13px; }
.video-count-play { width: 29px; height: 29px; }
}
.video-count { padding: 0 8px 0 8px; border-width: 1px; }
.video-number { font-size: 31px; }
.video-word { font-size: 19px; }
.theme-name { font-size: 34px; }
.theme-icon { font-size: 38px; }
.section-count {
display: inline-flex;
align-items: center;
gap: 5px;
height: 32px;
padding: 0 17px;
color: #fff;
background: rgba(2, 20, 42, 0.85);
border: 3px solid #ffa500;
border-radius: 999px;
font-size: 23px;
font-weight: 800;
line-height: 1;
box-shadow: 0 3px 10px rgba(0,0,0,.35), inset 0 0 8px rgba(255,255,255,.04);
}
.section-count small {
font-size: 16px;
font-weight: 800;
letter-spacing: .4px;
}
.media-count {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 8px 8px;
box-sizing: border-box;
background: linear-gradient(
180deg,
rgba(15, 38, 58, 0.78),
rgba(5, 18, 32, 0.88)
);
border: 1px solid rgba(65, 175, 235, 0.8);
border-radius: 15px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 3px 10px rgba(0, 0, 0, 0.3);
font-family: inherit;
text-align: center;
text-decoration: none;
}
.media-count__number {
color: #ffbf32;
font-size: 1em;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
.media-count__label {
color: #f0f4f8;
font-size: 0.5em;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.media-count--ray {
position: relative;
cursor: pointer;
/* Darker/more opaque than the plain .media-count, so the glowing trail
reads clearly against it instead of washing out over the photo below. */
background: linear-gradient(180deg, #0a1826, #040b14);
}
.media-count--ray:hover { border-color: rgba(120, 210, 255, 0.95); }
.media-count__ray {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
.media-count__ray rect {
filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #63d8ff) drop-shadow(0 0 20px #2f7dff);
}
/* ----------------- photo button bg - start ----------------- */
.photo-button {
background: linear-gradient(
180deg,
rgba(155, 175, 195, 0.25) 0%,
rgba(85, 105, 125, 0.28) 100%
) !important;
border: 2px solid rgba(140, 220, 255, 0.8);
border-radius: 14px;
box-shadow:
inset 0 1px 2px rgba(255, 255, 255, 0.25),
0 0 12px rgba(70, 190, 245, 0.2);
color: #e4f3fc;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.photo-button:hover,
.photo-button:focus-visible {
background: linear-gradient(
180deg,
rgba(155, 220, 255, 0.55),
rgba(80, 180, 230, 0.38)
);
box-shadow:
inset 0 1px 2px rgba(255, 255, 255, 0.3),
0 0 16px rgba(70, 190, 245, 0.35);
}
.photo-button:focus-visible { outline: 2px solid #d5f3ff; outline-offset: 3px; }
.photo-button .count { color: #ffbd24; font-weight: 800; }
.photo-button i,
.photo-button svg { color: #e4f3fc; }
/* ----------------- photo button bg - end ----------------- */
.roxtrails-header {
display: flex;
align-items: center;
justify-content: center; /* top line centered */
gap: 6px;
width: 100%;
}
/* ruler / screen-size toggle in the header (same feature as roxfinder) */
.size-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 12;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
text-decoration: none;
}
.size-icon img {
width: 28px;
height: auto;
filter: drop-shadow(0 0 3px rgba(255, 210, 60, 0.8));
transition: filter 0.15s ease, transform 0.15s ease;
}
.size-icon:hover img {
transform: scale(1.08);
filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #ffd23c);
}
.rx-res-display {
position: absolute;
left: 52px;
top: 50%;
transform: translateY(-50%);
z-index: 12;
padding: 2px 9px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.78);
color: #4dff6a;
font: 700 13px/1.4 ui-monospace, Menlo, Consolas, monospace;
letter-spacing: 0.5px;
white-space: nowrap;
}
.roxtrails-logo-link {
display: flex;
align-items: center;
flex: 0 0 auto;
cursor: pointer;
}
.roxtrails-logo {
display: block;
height: 70px;
width: auto;
cursor: pointer;
-webkit-user-drag: none;
user-select: none;
}
/* arrow toggle sits right next to the logo */
.roxtrails-tick-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
margin-left: -4px; /* almost touching the logo */
background: none;
border: 0;
cursor: pointer;
flex: 0 0 auto;
}
.roxtrails-tick {
display: block;
width: 44px;
height: 44px;
object-fit: contain;
transition: transform 0.2s ease;
}
.roxtrails-tick-btn.is-open .roxtrails-tick {
transform: rotate(180deg);
}
/* Hamburger menu button — first icon on the left, opens a link dropdown */
.roxtrails-menu-btn {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 13;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 34px;
height: 34px;
background: none;
border: 0;
cursor: pointer;
}
.roxtrails-menu-bar {
display: block;
width: 22px;
height: 3px;
border-radius: 2px;
background: #fff;
box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
transition: transform 0.15s ease, opacity 0.15s ease;
}
.roxtrails-menu-btn:hover .roxtrails-menu-bar {
background: #fff;
box-shadow: 0 0 6px #fff, 0 0 12px #ffd23c;
}
.roxtrails-menu-btn.is-open .roxtrails-menu-bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.roxtrails-menu-btn.is-open .roxtrails-menu-bar:nth-child(2) {
opacity: 0;
}
.roxtrails-menu-btn.is-open .roxtrails-menu-bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* Ruler icon shifts right to make room for the hamburger button */
.roxtrails-header .size-icon {
left: 52px;
}
.roxtrails-header .rx-res-display {
left: 94px;
}
.roxtrails-menu-panel[hidden] {
display: none;
}
.roxtrails-menu-panel {
position: absolute;
top: 100%;
left: 10px;
z-index: 20;
margin-top: 6px;
display: flex;
flex-direction: column;
min-width: 180px;
background: #03111d;
border: 1px solid rgba(119, 178, 214, 0.35);
border-radius: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.roxtrails-menu-panel a {
padding: 10px 16px;
color: #d8e5ee;
font-weight: 700;
font-size: 15px;
text-decoration: none;
}
.roxtrails-menu-panel a:hover {
background: rgba(22, 136, 196, 0.2);
color: #ffd23c;
}
.roxtrails-menu-divider {
height: 1px;
margin: 4px 10px;
background: rgba(119, 178, 214, 0.3);
}
.roxtrails-header {
position: relative;
}
/* Search button — mirrors the hamburger, right side of the header */
.roxtrails-search-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 13;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: none;
border: 0;
cursor: pointer;
color: #fff;
font-size: 18px;
}
.roxtrails-search-btn:hover {
color: #ffd23c;
text-shadow: 0 0 6px #fff, 0 0 12px #ffd23c;
}
/* Cloudflare status icon — same feature/colors as roxfinder's header */
.cloudflare-icon {
position: absolute;
right: 52px;
top: 50%;
transform: translateY(-50%);
z-index: 13;
font-size: 22px;
background: linear-gradient(135deg, #F9B233 0%, #F38020 55%, #F15A24 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 6px rgba(243, 128, 32, 0.55)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
.cloudflare-icon.on {
color: #F38020;
filter: drop-shadow(0 0 8px rgba(243, 128, 32, 0.8)) drop-shadow(0 0 18px rgba(249, 178, 51, 0.45));
}
.cloudflare-icon.off {
color: #6B7280;
background: none;
background-clip: unset;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
opacity: 0.45;
filter: grayscale(1);
}
.cloudflare-icon.dev {
color: #38D9FF;
background: none;
background-clip: unset;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
filter: drop-shadow(0 0 8px rgba(56, 217, 255, 0.7));
}
.roxtrails-search-overlay[hidden] {
display: none;
}
/* Backdrop — click it (outside the panel) to close */
.roxtrails-search-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(3, 17, 29, 0.55);
}
/* Sidebar panel — slides in from the right. overflow stays visible here (not
on this element) so the close circle can float half outside the left edge
without being clipped; the content below scrolls in its own wrapper instead. */
.roxtrails-search-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 201;
width: min(360px, 85vw);
background: #03111d;
border-left: 1px solid rgba(119, 178, 214, 0.35);
box-shadow: -12px 0 34px rgba(0, 0, 0, 0.55);
transform: translateX(100%);
transition: transform 0.22s ease;
}
.roxtrails-search-panel__scroll {
display: flex;
flex-direction: column;
gap: 18px;
height: 100%;
padding: 22px 22px 18px;
overflow-y: auto;
}
.roxtrails-search-overlay:not([hidden]) .roxtrails-search-panel {
transform: translateX(0);
}
/* Keyword browse grid, between the search box and the close arrow */
/* "Select Camera" / "Select Car" row in the header search panel */
.roxtrails-search-filters {
display: flex;
gap: 10px;
}
.roxtrails-search-filter {
position: relative;
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 30px 10px 14px;
border: 1px solid #2c4a60;
border-radius: 10px;
background: #0e2235;
color: #cfe3f0;
}
/* Icon and chevron are purely visual, laid over the select below — pointer-events:
none lets a click anywhere on the row (icon, label or chevron) reach the select
underneath, instead of only its own narrow text box being clickable. */
.roxtrails-search-filter__icon {
flex: 0 0 auto;
font-size: 14px;
color: #6ddcff;
pointer-events: none;
}
.roxtrails-search-filter__chevron {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
color: #7c93a3;
pointer-events: none;
}
.roxtrails-search-filter select {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 10px 30px 10px 38px;
appearance: none;
border: 0;
border-radius: inherit;
background: transparent;
color: inherit;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
}
.roxtrails-search-filter select:focus { outline: none; }
.roxtrails-search-kw__label {
margin: 0 0 10px;
color: #7c93a3;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.roxtrails-search-kw__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: 10px 6px;
}
.roxtrails-search-kw__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 6px 2px;
border-radius: 8px;
color: #cfe3f0;
text-decoration: none;
text-align: center;
transition: background .15s ease;
}
.roxtrails-search-kw__item:hover { background: rgba(119, 178, 214, .12); color: #fff; }
.roxtrails-search-kw__item img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.roxtrails-search-kw__item span {
font-size: 10.5px;
font-weight: 600;
line-height: 1.2;
}
/* Floating circle, half-overlapping the panel's left edge, level with the
search box — click it (or its chevron) to close, same as before. */
.roxtrails-search-overlay-close {
position: absolute;
top: 22px;
left: -22px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: 0 0 auto;
background: #0e2235;
border: 2px solid #35c9f3;
border-radius: 50%;
color: #fff;
font-size: 18px;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(53, 201, 243, .35);
}
.roxtrails-search-overlay-close:hover { filter: brightness(1.1); }
.roxtrails-search-overlay-form {
display: flex;
flex-shrink: 0; /* overflow:hidden below makes this item's auto-min-size 0 —
without this it gets crushed when the panel's content overflows */
background: #f4f7f9;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.roxtrails-search-overlay-form input {
flex: 1;
min-width: 0;
padding: 14px 16px;
background: none;
border: 0;
color: #1c2b36;
font-size: 16px;
font: inherit;
}
.roxtrails-search-overlay-form input:focus { outline: none; }
.roxtrails-search-overlay-form input::placeholder { color: #7c8b96; }
.roxtrails-search-overlay-form button {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
flex: 0 0 auto;
background: linear-gradient(180deg, #ff9a1f, #e6650f);
border: 0;
color: #fff;
font-size: 17px;
cursor: pointer;
}
.roxtrails-search-overlay-form button:hover { filter: brightness(1.1); }
body.search-overlay-open { overflow: hidden; }
/* Without this, the page behind the (fixed-position) video player keeps scrolling
on wheel/trackpad input even while a modal like Filter by Camera is open on top
of it, since nothing was stopping the page itself from also being scrollable. */
body.vid-player-open { overflow: hidden; }
.site-switcher[hidden] {
display: none;
}
.site-switcher {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
background: black;
gap: 14px;
width: 100%;
white-space: nowrap;
}
/* all logo images */
.site-switcher .site-logo {
display: block;
width: auto;
height: 62px;
object-fit: contain;
flex: 0 0 auto;
transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
.site-switcher a {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.site-switcher a:hover .site-logo {
transform: scale(1.04);
filter: brightness(1.52);
}
/* separator image */
.site-switcher .site-divider {
display: block;
width: 8px;
height: 48px;
object-fit: contain;
flex: 0 0 8px;
opacity: .8;
}
.state-tab { margin-left: 0; }
/* separator */
.diamond-divider {
width: 10px;
height: 10px;
flex: 0 0 10px;
margin: 0 14px;
align-self: center;
background: linear-gradient( 135deg, #d9f5ff, #68cfff 40%, #168bc5 100%);
transform: rotate(45deg);
border: 1px solid rgba(180, 235, 255, .85);
box-shadow: 0 0 4px rgba(90,205,255,.75), 0 0 8px rgba(35,160,230,.4);
}
/* ===== LOCATION CARD GRID ONLY ===== */
.location-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
width: 100%;
}
/* ===== LOCATION CARD ===== */
.location-card {
position: relative;
min-height: 170px;
padding: 34px 34px 28px;
background: linear-gradient(
135deg,
#171717 0%,
#202020 100%
);
border: 2px solid #3b3b3b;
border-radius: 24px;
color: #f4f4f4;
text-align: left;
cursor: pointer;
transition:
border-color 0.18s ease,
background 0.18s ease,
transform 0.18s ease;
}
.location-card:hover {
border-color: #626262;
}
/* ===== STATE LINE ===== */
.location-state {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 25px;
color: #c1c1c5;
font-size: 25px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1.5px;
}
/* state dot */
.location-state::before {
content: "";
width: 16px;
height: 16px;
flex: 0 0 16px;
border-radius: 50%;
background: #ed6828;
}
/* ===== CITY NAME ===== */
.location-name {
margin: 0 0 18px;
color: #f4f4f4;
font-size: 37px;
line-height: 1.05;
font-weight: 700;
}
/* ===== DESCRIPTION ===== */
.location-description {
color: #bebec2;
font-size: 28px;
line-height: 1.35;
font-weight: 400;
}
/* ===== CHECKMARK ===== */
.location-check {
position: absolute;
top: 22px;
right: 22px;
display: none;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: #2f72d6;
color: #fff;
font-size: 34px;
font-weight: 700;
line-height: 1;
}
/* ===== SELECTED CARD ===== */
.location-card.selected {
border: 4px solid #2f72d6;
padding:
32px
32px
26px;
background: linear-gradient(
135deg,
#11151b 0%,
#1d1d1f 100%
);
}
.location-card.selected .location-check {
display: flex;
}
.location-card.selected .location-state::before {
background: #2f72d6;
}
/* ===== SELECTED BAR ===== */
.selected-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
width: 100%;
margin-top: 32px;
padding: 24px 26px;
background: #222;
border: 2px solid #414141;
border-radius: 24px;
}
/* "Selected:" */
.selected-label {
margin-right: 8px;
color: #f0f0f0;
font-size: 27px;
font-weight: 700;
}
/* ===== SELECTED PILLS ===== */
.selected-pill {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 58px;
padding: 8px 24px;
background: #222;
border: 2px solid #2f72d6;
border-radius: 30px;
color: #f1f1f1;
font-size: 27px;
font-weight: 400;
}
.selected-pill::before {
content: "✓";
color: #f5f5f5;
font-size: 27px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
.location-grid { grid-template-columns: 1fr; gap: 16px; }
.location-card { min-height: 145px; padding: 26px; }
.location-card.selected { padding: 24px; }
.location-state { margin-bottom: 18px; font-size: 18px; }
.location-name { font-size: 30px; }
.location-description { font-size: 20px; }
.selected-label,
.selected-pill { font-size: 20px; }
}
.state-tabs {
position: relative;
z-index: 8;
display: flex;
flex-wrap: wrap; /* allows wrapping */
justify-content: center;
align-items: center;
gap: 9px;
padding: 14px 20px;
background: linear-gradient(180deg, rgba(14, 34, 51, .85) 0%, rgba(7, 22, 35, .92) 100%);
border-bottom: 1px solid rgba(90, 148, 185, 0.45);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 14px rgba(0, 0, 0, .25);
}
.state-tab {
padding: 0.4em 1em;
margin-left: 0;
color: #aebdca;
background: linear-gradient(180deg, #173044, #0a1824);
border: 1px solid #29485e;
border-radius: 10px;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 3px 9px rgba(0, 0, 0, 0.3);
font-size: 1.3em;
font-weight: 700;
letter-spacing: 0.3px;
text-align: center;
text-decoration: none;
white-space: nowrap; /* never collapse a tab to one letter */
flex: 0 0 auto; /* size to content, wrap instead of shrink */
transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.state-tab:hover {
color: #fff;
background: linear-gradient(180deg, #21445d, #10283a);
transform: translateY(-2px);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 5px 14px rgba(0, 0, 0, 0.4);
}
/* state tabs — same branded colors as the LOCATION buttons */
.state-tab.arizona {
background:
radial-gradient(circle at 50% 0%, rgba(196, 102, 0, .40), transparent 65%),
linear-gradient(180deg, #754000 0%, #522900 47%, #261500 100%);
border-color: #ff9600;
}
.state-tab.colorado {
background:
radial-gradient(circle at 50% 0%, rgba(0, 153, 220, .34), transparent 65%),
linear-gradient(180deg, #07517d 0%, #06385f 50%, #02243e 100%);
border-color: #00c8ff;
}
.state-tab.utah {
background: linear-gradient(135deg, #9e421d 0%, #d8752c 52%, #823017 100%);
border-color: #ff9a55;
}
.state-tab.california {
background: linear-gradient(135deg, #8f2525 0%, #c64235 52%, #7b171b 100%);
border-color: #ff6b6b;
}
.state-tab.arizona:hover,
.state-tab.colorado:hover,
.state-tab.utah:hover,
.state-tab.california:hover { filter: brightness(1.15); }
/* state tabs that carry an image (from rb_info) — bigger icon before the name */
.state-tab.has-icon {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0.15em 0.85em 0.15em 0.6em;
}
.state-tab-icon {
width: 30px;
height: 30px;
object-fit: contain;
flex: 0 0 auto;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
@media (max-width: 600px) {
.state-tab-icon { width: 22px; height: 22px; }
.state-tab.has-icon { gap: 5px; }
}
/* keyword tabs that carry an icon (coloured PNG from images/layout/keywords/) */
.kw-tab-icon {
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
font-size: 0.78em;
line-height: 1;
}
.kw-tab-icon > i { font-size: inherit; }
.kw-tab-icon-img {
height: 1em;
width: auto;
flex: 0 0 auto;
object-fit: contain;
vertical-align: middle;
}
/* keyword tabs: white label, orange on hover (same orange as section titles) */
.state-tab[data-tab-type="kw"] { color: #eef2f6; }
.state-tab[data-tab-type="kw"]:hover,
.state-tab[data-tab-type="kw"]:focus-visible { color: #f5a623; background: linear-gradient(180deg, #21445d, #10283a); }
.state-tab.active {
position: relative;
color: #fff;
background: linear-gradient(180deg, #2879aa, #123b56);
border-color: #4c9dcc;
padding-bottom: 0.7em; /* room for the down arrow */
box-shadow: inset 0 1px rgba(255, 255, 255, 0.22), 0 -4px 14px rgba(0, 0, 0, 0.45);
}
/* active tab: a small down arrow, no checkmark */
.state-tab.active::after {
content: "";
position: absolute;
left: 50%;
bottom: 3px;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid currentColor;
}
/* ===== RESPONSIVE HEADER ===== */
@media (max-width: 900px) {
.roxtrails-tick { width: 32px; height: 32px; }
.state-tabs {
gap: 5px;
padding: 4px 10px 0;
}
.state-tab {
margin-left: 0; /* drop the overlap once tabs wrap */
font-size: 0.9em;
padding: 0.25em 0.7em;
}
.diamond-divider { margin: 0 6px; }
}
@media (max-width: 600px) {
.roxtrails-header { gap: 2px; }
.roxtrails-tick { width: 26px; height: 26px; }
/* let the tab row scroll sideways instead of stacking many rows */
.state-tabs {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 4px;
padding: 4px 8px 0;
}
.state-tabs::-webkit-scrollbar { display: none; }
.state-tab {
font-size: 0.82em;
padding: 0.3em 0.6em;
border-radius: 7px 7px 0 0;
}
.state-tab.active::after { border-left-width: 4px; border-right-width: 4px; border-top-width: 5px; bottom: 2px; }
.diamond-divider { margin: 0 5px; flex: 0 0 8px; width: 8px; height: 8px; }
/* related-sites dropdown: wrap + shrink logos so it fits */
.site-switcher {
flex-wrap: wrap;
white-space: normal;
gap: 8px;
padding: 6px 8px;
}
.site-switcher .site-logo { height: 40px; }
.site-switcher .site-divider { display: none; }
}
@media (max-width: 380px) {
.roxtrails-tick { width: 22px; height: 22px; }
.state-tab { font-size: 0.76em; padding: 0.3em 0.5em; }
}
/* keyword dropdown: only used at <=400px; inline everywhere else */
.kw-dd-toggle { display: none; }
.kw-dd-panel { display: contents; }
/* <=400px: readable, tappable tabs that wrap naturally + less-zoomed background */
@media (max-width: 400px) {
.state-tabs {
flex-wrap: wrap;
justify-content: center;
overflow-x: visible;
gap: 4px;
padding: 4px 6px 6px;
}
.state-tabs .state-tab {
flex: 0 0 auto;
margin-left: 0;
padding: 0.4em 0.75em;
font-size: 0.85rem;
letter-spacing: 0.2px;
white-space: nowrap;
}
.state-tabs .state-tab.has-icon { padding: 0.3em 0.75em 0.3em 0.5em; }
.state-tabs .diamond-divider { margin: 0 4px; }
.state-tabs .state-tab.active { padding-bottom: 0.95em; }
.state-tabs .state-tab.active::after { bottom: 1px; }
/* Snow / Rain / … collapse into a "Keywords ▾" dropdown after Colorado */
.kw-dd-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
padding: 0.4em 0.75em;
border: 1px solid #29485e;
border-radius: 7px 7px 0 0;
background: linear-gradient(180deg, #173044, #0a1824);
color: #cdd9e4;
font: inherit;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
}
.kw-dd-toggle .vid-drop-caret { font-size: 0.6rem; opacity: 0.8; }
.kw-dd-toggle[aria-expanded="true"] { color: #fff; border-color: #4c9dcc; }
.kw-dd-toggle.is-filtered { border-color: #f5c518; color: #ffe37a; }
.kw-dd-panel {
display: none;
position: absolute;
top: 100%;
left: 6px;
right: 6px;
z-index: 30;
flex-wrap: wrap;
gap: 5px;
padding: 8px;
border: 1px solid #4c9dcc;
border-radius: 0 0 10px 10px;
background: rgba(6, 14, 26, 0.98);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
max-height: 55vh;
overflow-y: auto;
}
.kw-dd-panel.is-open { display: flex; }
.kw-dd-panel .state-tab { border-radius: 6px; }
}
/* keywords row shown under the thumbnail on small screens (see media query) */
.vid-keywords-below { display: none; }
/* ===== VIDEO CARDS <= 400px =====
Top chrome (id + YouTube, then music + time) stays overlaid on the thumbnail
as normal. Only the keyword chips move down, into a row under the image. */
@media (max-width: 400px) {
/* extra selector weight so it beats the base .ppl-label .vis-keywords rule */
.video-card .ppl-card--video .ppl-label .vis-keywords { display: none; }
.video-card .vid-keywords-below {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 6px 8px 2px;
}
/* no Pormido / GoPro camera chip on the first overlay line at this size */
.video-card .vid-camera-actual { display: none; }
}
.site-footer {
position: relative;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
gap: clamp(25px, 7vw, 100px);
padding: 18px 20px;
background: rgba(1, 7, 13, 0.9);
border-top: 1px solid rgba(115, 172, 205, 0.35);
box-shadow: 0 -5px 18px rgba(0, 0, 0, 0.45);
}
.site-footer a {
color: #dceaf4;
font-size: 16px;
font-weight: 700;
text-decoration: none;
transition: color 0.2s, transform 0.2s;
}
.site-footer a:hover { transform: translateY(-2px); }
.site-footer .roxfinder-link:hover { color: #46a9ff; }
.site-footer .myxterra-link:hover { color: #ff5858; }
.site-footer .robertbody-link:hover { color: #62cc78; }
@media (max-width: 600px) {
.site-footer {
flex-direction: column;
gap: 12px;
}
}
body {
min-width: 320px;
min-height: 100vh;
margin: 0;
color: #fff;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
background-color: #020912;
background-image: url("/images/roxtrails-bg.webp");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
/* mobile: don't zoom the background scene (placed after the base rule so it wins) */
@media (max-width: 600px) {
body {
background-attachment: scroll;
background-size: 100% auto;
background-position: top center;
}
}
/* Header image */
.roxtrails-header {
position: relative;
z-index: 10;
width: 100%;
background-color: #020912;
background-image: url("/images/roxtrails-header-bg.webp");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-top: 3px solid #020407;
border-bottom: 3px solid #1a3549;
box-shadow:
0 7px 20px rgba(0, 0, 0, 0.7),
inset 0 -1px rgba(255, 255, 255, 0.08);
}
.roxtrails-header .roxtrails-logo {
display: block;
width: auto;
height: 70px;
cursor: pointer;
}
/* shrink the header logo on small screens (placed after the base rule so it wins) */
@media (max-width: 900px) {
.roxtrails-header .roxtrails-logo { height: 48px; }
}
@media (max-width: 600px) {
.roxtrails-header .roxtrails-logo { height: 38px; }
}
@media (max-width: 380px) {
.roxtrails-header .roxtrails-logo { height: 30px; }
}
/* not-used Main background image */
.xroxtrails-page {
position: relative;
min-height: calc(100vh - 100px);
overflow: hidden;
background-image:
linear-gradient(
180deg,
rgba(1, 13, 24, 0.04),
rgba(1, 7, 13, 0.22)
),
url("/images/roxtrails-bg.webp");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-color: #031426;
}
/* Page content container */
.roxtrails-content {
position: relative;
z-index: 1;
width: min(1200px, calc(100% - 40px));
margin: 0 auto;
padding: 0px 0 24px;
}
.site-intro {
max-width: 900px;
margin: 0 auto 22px;
padding: 0 8px;
color: #b9c9d6;
font-size: 16px;
line-height: 1.5;
text-align: center;
}
/* state pages (Colorado, Arizona, …) skip the hero image + intro text —
the LOCATION bar sits right at the top instead. */
.roxtrails-content--no-hero { padding-top: 22px; }
/* Collapse handle for the LOCATION/BROWSE bar on state pages — sits right
next to the state title, no extra line/space added. */
.latest-title-row {
display: flex;
align-items: center;
gap: 12px;
}
.filters-toggle {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 26px;
height: 26px;
margin: 0;
background: linear-gradient(180deg, #bf151d 0%, #7a0d12 100%);
border: 1px solid #ff4b52;
border-radius: 50%;
box-shadow: 0 0 8px rgba(255, 45, 50, .45), inset 0 1px 0 rgba(255, 255, 255, .2);
color: #fff;
cursor: pointer;
transition: transform .15s ease, filter .15s ease;
}
.filters-toggle[hidden] { display: none !important; }
.filters-toggle:hover { filter: brightness(1.15); }
.filters-toggle__chevron {
font-size: 10px;
line-height: 1;
transform: translateY(-1px) rotate(0deg);
transition: transform .2s ease;
}
/* expanded (bar showing): chevron flips to point down, meaning "collapse" */
.filters-toggle[aria-expanded="true"] .filters-toggle__chevron { transform: translateY(1px) rotate(180deg); }
/* full-bleed hero image — edge to edge, no side gap */
.hero-full {
position: relative;
width: 100%;
margin: 0;
line-height: 0;
}
.hero-full > img {
display: block;
width: 100%;
height: auto;
}
/* GoPro + camera icons overlaid on the lower-left of the hero */
.hero-items-left {
position: absolute;
left: 1em;
bottom: 0.25em;
display: flex;
align-items: flex-end;
gap: 1em;
line-height: 1;
}
.hero-items-left img {
display: block;
height: clamp(24px, 6vw, 64px);
width: auto;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
}
.hero-items-right {
position: absolute;
right: 1em;
bottom: 0.25em;
display: flex;
align-items: flex-end;
gap: 1em;
line-height: 1;
}
/* mobile: the GoPro/camera icons crowd and overlap the hero text —
keep just the photo/video counts, drop the pictures. */
@media (max-width: 600px) {
.hero-items-left img,
.hero-items-right img { display: none; }
}
/* home page nav: Arizona · Colorado | Latest | All */
.home-nav {
align-items: center;
gap: 8px;
padding-top: 14px;
border-bottom: none;
}
.home-nav .home-nav-sep {
width: 1px;
align-self: stretch;
min-height: 30px;
margin: 0 4px;
background: rgba(150, 180, 205, 0.4);
}
.home-nav .home-latest-btn {
display: inline-flex;
align-items: center;
gap: 7px;
margin-left: 0;
cursor: pointer;
font: inherit;
border-radius: 8px;
}
.home-nav .home-latest-btn.active {
color: #fff;
background: linear-gradient(180deg, #2879aa, #123b56);
border-color: #4c9dcc;
}
.home-nav .home-all-link {
border-radius: 8px;
color: #7fd0ff;
}
.home-nav .home-all-link:hover { color: #bfe8ff; }
@media (max-width: 700px) {
.roxtrails-page {
/*
* Shows more of the background on narrow screens.
* Change to "cover" if you prefer the image to fill
* the entire area without empty space.
*/
background-size: auto 100%;
}
.roxtrails-content {
width: calc(100% - 24px);
padding: 0px 0 16px;
}
}
/* ===== VIDEOS PAGE ===== */
.videos-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
color: #bebec2;
font-size: 20px;
text-align: center;
padding: 30px 0;
}
.videos-empty[hidden] { display: none; }
.videos-empty__text { margin: 0; }
.search-heading {
margin: 20px 0 12px;
color: #fff;
font-size: clamp(24px, 4vw, 34px);
}
/* Camera page heading: [(camera) CAMERA ››] Gopro M1 Pro */
.search-heading.camera-heading {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px 12px;
margin: 20px 0 18px;
position: relative;
}
/* While its menu is open, lift the heading above the sticky toolbar (z-index 100) below it */
.search-heading.camera-heading.is-menu-open { z-index: 110; }
.camera-heading__picker,
.vid-toolbar-campicker { position: relative; display: inline-flex; }
.vid-toolbar-campicker[hidden] { display: none; }
/* Opens below the heading pill instead of above */
.vid-camera-filter-menu.vid-camera-filter-menu--down {
top: calc(100% + 10px);
bottom: auto;
left: 0;
right: auto;
z-index: 60;
max-height: none;
overflow: visible;
}
.camera-heading__type {
appearance: none;
font-family: inherit;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
display: inline-flex;
align-items: center;
gap: 10px;
padding-right: 14px;
border: 1.5px solid rgba(53, 201, 243, .55);
border-radius: 999px;
background: rgba(8, 43, 68, .45);
color: #6ddcff;
font-size: 14px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.camera-heading__icon {
width: 44px;
height: 44px;
margin: -2px 0 -2px -2px; /* round icon sits over the pill's left end */
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #35c9f3;
border-radius: 50%;
color: #eafaff;
background: rgba(8, 43, 68, .9);
box-shadow:
0 0 0 3px rgba(53, 201, 243, .08),
0 0 12px rgba(53, 201, 243, .22);
}
.camera-heading__icon i { font-size: 18px; }
.camera-heading__type:hover,
.camera-heading__type[aria-expanded="true"] { background: rgba(20, 70, 105, .7); border-color: #35c9f3; }
.camera-heading__type:focus-visible { outline: 2px solid #6ddcff; outline-offset: 3px; }
.camera-heading__label { white-space: nowrap; }
.camera-heading__chevrons {
display: inline-flex;
align-items: center;
margin-left: -2px;
color: #45d1f5;
font-size: 23px;
font-weight: 700;
line-height: 1;
letter-spacing: -6px;
opacity: .9;
}
.camera-title {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 10px 22px 10px 16px;
background: linear-gradient(110deg, #303136, #191c23);
border: 1px solid #c99438;
border-left: 4px solid #e4b25a;
border-radius: 12px;
box-shadow:
inset 8px 0 14px -10px rgba(255, 190, 80, 0.65),
0 2px 8px rgba(0, 0, 0, 0.18);
color: #f7f8fa;
font-family: inherit;
font-size: clamp(20px, 3vw, 36px);
font-weight: 700;
line-height: 1.15;
white-space: nowrap;
}
/* Car heading: same box as the Camera one, teal instead of gold — so a Car
filter page (Car > Xterra) reads as visually distinct from a Camera one. */
.car-title {
--car-color: #2dd4bf;
background: #0b0f14;
border: 2px solid var(--car-color);
border-left: 2px solid var(--car-color);
box-shadow:
0 0 10px var(--car-color),
0 0 22px color-mix(in srgb, var(--car-color) 55%, transparent),
inset 0 0 14px color-mix(in srgb, var(--car-color) 25%, transparent);
color: #fff;
text-shadow: 0 0 10px color-mix(in srgb, var(--car-color) 85%, white);
}
.car-heading .camera-heading__type { border-color: #19bce9; color: #63dcff; }
.car-heading .camera-heading__type:hover,
.car-heading .camera-heading__type[aria-expanded="true"] { background: rgba(0, 190, 255, .18); border-color: #19bce9; }
.car-heading .camera-heading__icon { border-color: #30e6ff; color: #fff; box-shadow: 0 0 8px rgba(48, 230, 255, .8), inset 0 0 8px rgba(48, 230, 255, .22); }
.car-heading .camera-heading__chevrons { color: #16c5f4; text-shadow: 0 0 8px rgba(0, 200, 255, .55); }
/* "Filter by Car" dropdown — same layout as Filter by Camera, teal palette */
.vid-car-filter-menu {
position: absolute;
top: calc(100% + 10px);
left: 0;
z-index: 60;
box-sizing: border-box;
width: min(260px, calc(100vw - 24px));
max-height: min(280px, calc(100vh - 160px));
padding: 0 8px 8px;
background: #0e2823;
border: 1px solid #1f6358;
border-radius: 15px;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0 10px 26px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.vid-car-filter-menu[hidden] { display: none; }
.vid-car-filter-title {
position: sticky;
top: 0;
z-index: 1;
min-height: 44px;
display: flex;
align-items: center;
gap: 10px;
margin: 0 -8px 6px;
padding: 0 16px;
background: #1a4a42;
color: #fff;
font-size: 15px;
font-weight: 700;
}
.vid-car-filter-title .fa-car-side { font-size: 1.1em; }
.vid-car-filter-close {
margin-left: auto;
padding: 0;
border: 0;
background: transparent;
color: #cfe6f6;
font-size: 22px;
font-weight: 300;
line-height: 1;
cursor: pointer;
}
.vid-car-filter-close:hover { color: #fff; }
.vid-car-filter-menu a {
position: relative;
display: flex;
align-items: center;
min-height: 42px;
padding: 8px 34px 8px 16px;
border-radius: 10px;
color: #eef7ff;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
.vid-car-filter-menu a.is-current { background: rgba(45, 212, 191, .18); color: #5eead4; }
.vid-car-filter-menu a:not(.is-current):hover { background: rgba(45, 212, 191, .1); }
.vid-car-arrow {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: #4bb8a9;
font-size: 20px;
line-height: 1;
}
.camera-title__marks {
display: inline-flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.camera-title__marks::before,
.camera-title__marks::after {
content: "";
width: 5px;
height: 0.95em;
border-radius: 3px;
background: #08bce8;
}
.camera-title__marks::after {
background: #4596b7;
}
@media (max-width: 400px) {
.camera-title {
gap: 10px;
padding: 9px 14px 9px 12px;
border-radius: 9px;
}
.camera-title__marks {
gap: 4px;
}
.camera-title__marks::before,
.camera-title__marks::after {
width: 4px;
}
}
.search-page-form {
display: flex;
max-width: 520px;
margin: 0 0 24px;
}
.search-page-form input {
flex: 1;
padding: 12px 16px;
background: #0a1824;
border: 1px solid #29485e;
border-radius: 8px 0 0 8px;
color: #d8e5ee;
font-size: 15px;
}
.search-page-form input:focus { outline: none; border-color: #4c9dcc; }
.search-page-form button {
padding: 12px 22px;
background: linear-gradient(180deg, #2879aa, #123b56);
border: 1px solid #4c9dcc;
border-left: 0;
border-radius: 0 8px 8px 0;
color: #fff;
font-weight: 700;
cursor: pointer;
}
.search-page-form button:hover { filter: brightness(1.15); }
.videos-empty__photos-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 18px;
background: rgba(76, 157, 204, .14);
border: 1px solid rgba(76, 157, 204, .55);
border-radius: 10px;
color: #eaf1f7;
font: inherit;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.videos-empty__photos-btn[hidden] { display: none; }
.videos-empty__photos-btn:hover {
background: rgba(76, 157, 204, .26);
border-color: #4c9dcc;
transform: translateY(-1px);
}
.videos-empty__photos-btn img {
height: 30px;
width: auto;
flex: 0 0 auto;
}
.videos-empty__photos-count {
color: #ffb31a;
font-weight: 800;
}
/* ---- quick links between the video pages (top bar, under the header) ---- */
.video-quicklinks {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
}
.video-quicklinks[hidden] { display: none !important; }
.video-quicklink {
padding: 7px 18px;
border-radius: 8px;
background: linear-gradient(180deg, #173044, #0a1824);
border: 1px solid #29485e;
color: #cdd9e4;
font-weight: 700;
font-size: 15px;
text-decoration: none;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.video-quicklink:hover {
color: #fff;
background: linear-gradient(180deg, #21445d, #10283a);
}
.video-quicklink.is-current {
color: #fff;
background: linear-gradient(180deg, #2879aa, #123b56);
border-color: #4c9dcc;
}
/* red left stripe = link goes to a different site (roXfinder) */
.video-quicklink.is-external {
position: relative;
padding-left: 24px;
overflow: hidden;
}
.video-quicklink.is-external::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 7px;
background: linear-gradient(180deg, #e11d1d, #a11414);
}
@media (max-width: 420px) {
.video-quicklinks { gap: 6px; padding: 8px; }
.video-quicklink { padding: 6px 12px; font-size: 13px; }
}
/* =========================================================
LOCATION / BROWSE selector (Robert's spec)
========================================================= */
.video-filter-bar[hidden] { display: none !important; }
.video-filter-bar {
width: 100%;
box-sizing: border-box;
padding: 24px 34px 28px;
/* background:
linear-gradient(180deg, rgba(0, 20, 38, .92) 0%, rgba(0, 28, 50, .96) 50%, rgba(0, 18, 34, .98) 100%),
url("/images/layout/topo-bg.webp"),
url("/images/roxtrails-bg.webp");
*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-top: 1px solid rgba(36, 155, 210, .18);
border-bottom: 1px solid rgba(36, 155, 210, .18);
box-shadow: inset 0 10px 25px rgba(0, 0, 0, .18), inset 0 -10px 25px rgba(0, 0, 0, .22);
border-radius: 12px;
display: flex;
align-items: stretch;
justify-content: center;
gap: 28px;
margin-bottom: 16px;
}
.filter-group { display: flex; flex-direction: column; }
.filter-group[hidden] { display: none !important; }
.filter-divider[hidden] { display: none !important; }
.filter-group.location { flex: 0 1 720px; }
.filter-group.browse { flex: 0 1 860px; }
.filter-heading {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 14px;
color: #9cd8f3;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 800;
letter-spacing: 5px;
text-transform: uppercase;
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 7px rgba(30, 180, 255, .25);
}
.filter-heading::before,
.filter-heading::after {
content: "";
height: 1px;
flex: 1;
background: linear-gradient(90deg, rgba(139, 210, 241, .1), rgba(139, 210, 241, .85));
}
.filter-heading::after {
background: linear-gradient(90deg, rgba(139, 210, 241, .85), rgba(139, 210, 241, .1));
}
.filter-buttons { display: flex; align-items: center; gap: 14px; }
.filter-btn {
height: 72px;
box-sizing: border-box;
padding: 0 28px;
border-radius: 11px;
border: 2px solid rgba(255, 255, 255, .35);
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
cursor: pointer;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
text-decoration: none;
text-shadow: 0 2px 3px rgba(0, 0, 0, .9);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), inset 0 -18px 24px rgba(0, 0, 0, .20), 0 5px 12px rgba(0, 0, 0, .42);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.filter-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.filter-btn:active { transform: translateY(1px); }
.filter-btn .nav-icon {
width: 46px;
height: 46px;
object-fit: contain;
flex: 0 0 auto;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .65));
}
.filter-btn.new .nav-icon,
.filter-btn.keywords .nav-icon,
.filter-btn.all-videos .nav-icon { width: 39px; height: 39px; }
.filter-btn .nav-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 30px;
line-height: 1;
}
.filter-btn.arizona {
background:
radial-gradient(circle at 50% 0%, rgba(196, 102, 0, .40), transparent 65%),
linear-gradient(180deg, #754000 0%, #522900 47%, #261500 100%);
border-color: #ff9600;
box-shadow: inset 0 1px 0 rgba(255, 214, 130, .25), inset 0 -18px 24px rgba(0, 0, 0, .28), 0 0 8px rgba(255, 145, 0, .55), 0 5px 12px rgba(0, 0, 0, .45);
}
.filter-btn.arizona:hover {
box-shadow: inset 0 1px 0 rgba(255, 225, 160, .30), 0 0 14px rgba(255, 145, 0, .75), 0 5px 12px rgba(0, 0, 0, .45);
}
.filter-btn.colorado {
background:
radial-gradient(circle at 50% 0%, rgba(0, 153, 220, .34), transparent 65%),
linear-gradient(180deg, #07517d 0%, #06385f 50%, #02243e 100%);
border-color: #00c8ff;
box-shadow: inset 0 1px 0 rgba(188, 235, 255, .22), inset 0 -18px 24px rgba(0, 0, 0, .23), 0 0 9px rgba(0, 198, 255, .58), 0 5px 12px rgba(0, 0, 0, .45);
}
.filter-btn.colorado:hover {
box-shadow: inset 0 1px 0 rgba(220, 245, 255, .28), 0 0 15px rgba(0, 205, 255, .8), 0 5px 12px rgba(0, 0, 0, .45);
}
.filter-btn.new {
min-width: 215px;
background:
radial-gradient(circle at 50% 0%, rgba(255, 72, 72, .50), transparent 65%),
linear-gradient(180deg, #bf151d 0%, #950d15 48%, #57070c 100%);
border-color: #ff3038;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -18px 24px rgba(0, 0, 0, .23), 0 0 9px rgba(255, 30, 45, .55), 0 5px 12px rgba(0, 0, 0, .45);
}
.filter-btn.new:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 15px rgba(255, 35, 50, .85), 0 5px 12px rgba(0, 0, 0, .45);
}
.filter-btn.new .nav-glyph { color: #ffd23c; }
.filter-btn.keywords {
min-width: 245px;
background:
radial-gradient(circle at 50% 0%, rgba(0, 220, 95, .40), transparent 65%),
linear-gradient(180deg, #078b40 0%, #05642f 48%, #023c20 100%);
border-color: #00eb70;
box-shadow: inset 0 1px 0 rgba(213, 255, 228, .20), inset 0 -18px 24px rgba(0, 0, 0, .24), 0 0 10px rgba(0, 255, 108, .62), 0 5px 12px rgba(0, 0, 0, .45);
}
.filter-btn.keywords:hover {
box-shadow: inset 0 1px 0 rgba(230, 255, 240, .27), 0 0 16px rgba(0, 255, 110, .90), 0 5px 12px rgba(0, 0, 0, .45);
}
.filter-btn.all-videos {
min-width: 260px;
background:
radial-gradient(circle at 50% 0%, rgba(120, 145, 160, .26), transparent 65%),
linear-gradient(180deg, #394550 0%, #25323d 48%, #111c25 100%);
border-color: rgba(225, 232, 235, .75);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -18px 24px rgba(0, 0, 0, .26), 0 0 8px rgba(210, 225, 235, .22), 0 5px 12px rgba(0, 0, 0, .45);
}
.filter-btn.all-videos:hover {
border-color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 13px rgba(220, 235, 245, .42), 0 5px 12px rgba(0, 0, 0, .45);
}
.filter-divider {
width: 1px;
margin: 7px 0;
flex: 0 0 1px;
background: linear-gradient(180deg, transparent 0%, rgba(166, 215, 240, .75) 15%, rgba(166, 215, 240, .75) 85%, transparent 100%);
box-shadow: 0 0 5px rgba(30, 170, 225, .15);
}
.filter-btn.active {
filter: brightness(1.12);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 -15px 25px rgba(0, 0, 0, .18), 0 0 17px currentColor, 0 6px 12px rgba(0, 0, 0, .45);
}
@media (max-width: 1250px) {
.video-filter-bar { flex-wrap: wrap; }
.filter-divider { display: none; }
.filter-group { flex: 1 1 100%; }
.filter-buttons { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 700px) {
.video-filter-bar { padding: 20px 15px; }
.filter-buttons { gap: 10px; }
.filter-btn { height: 62px; padding: 0 20px; font-size: 17px; }
.filter-btn.new,
.filter-btn.keywords,
.filter-btn.all-videos { min-width: 0; flex: 1 1 200px; }
.filter-btn .nav-icon { width: 36px; height: 36px; }
.filter-btn .nav-glyph { font-size: 24px; }
.filter-heading { font-size: 12px; letter-spacing: 4px; }
}
/* ---- compact override: shrink the filter bar ~35% ---- */
.video-filter-bar { padding: 14px 20px 16px; gap: 20px; }
.filter-group.location { flex: 0 1 400px; }
.filter-group.browse { flex: 0 1 470px; }
.filter-heading { font-size: 11px; letter-spacing: 3px; gap: 10px; margin-bottom: 8px; }
.filter-buttons { gap: 9px; }
.filter-btn {
height: 46px;
padding: 0 16px;
gap: 9px;
font-size: 15px;
border-radius: 9px;
border-width: 1.5px;
}
.filter-btn .nav-icon { width: 26px; height: 26px; }
.filter-btn.new .nav-icon,
.filter-btn.keywords .nav-icon,
.filter-btn.all-videos .nav-icon { width: 22px; height: 22px; }
.filter-btn .nav-glyph { font-size: 18px; }
.filter-btn.new { min-width: 108px; }
.filter-btn.keywords { min-width: 130px; }
.filter-btn.all-videos { min-width: 140px; }
/* BROWSE buttons: label row + a stat line underneath */
.filter-group.browse .filter-btn {
flex-direction: column;
height: auto;
min-height: 46px;
padding-top: 7px;
padding-bottom: 7px;
gap: 3px;
}
.filter-btn__row {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
}
.filter-btn__stat {
font-size: 11px;
font-weight: 700;
letter-spacing: .3px;
line-height: 1;
opacity: .82;
text-transform: none;
}
@media (max-width: 700px) {
.filter-btn { height: 42px; font-size: 13px; padding: 0 12px; }
.filter-btn .nav-icon,
.filter-btn.new .nav-icon,
.filter-btn.keywords .nav-icon,
.filter-btn.all-videos .nav-icon { width: 20px; height: 20px; }
.filter-btn .nav-glyph { font-size: 15px; }
}
/* ---- per-state Videos / Photos choice ---- */
.state-choice {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
flex: 0 0 auto;
}
.state-modes {
display: flex;
gap: 4px;
}
/* media-box: Videos / Photos count buttons */
.state-mode-btn.media-box {
flex: 1;
height: 34px;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
background:
linear-gradient(
180deg,
rgba(14, 34, 51, .92) 0%,
rgba(7, 22, 35, .96) 100%
);
border: 1px solid rgba(145, 185, 210, .48);
border-radius: 7px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .08),
0 2px 5px rgba(0, 0, 0, .35);
color: #fff;
font: inherit;
cursor: pointer;
}
.media-box i {
font-size: 13px;
color: #dce8f0;
}
.media-box .count,
.media-box .smb-count {
font-size: 14px;
font-weight: 800;
line-height: 1;
color: #ffb31a;
}
/* videos: gold icon + count; photos: light blue-white icon + count */
.state-mode-btn.media-box[data-mode="videos"] i,
.state-mode-btn.media-box[data-mode="videos"] .count { color: #ffb31a; }
.state-mode-btn.media-box[data-mode="photos"] i,
.state-mode-btn.media-box[data-mode="photos"] .count { color: #bfe0f2; }
.media-box .label,
.media-box .smb-label {
font-size: 15px;
font-weight: 700;
color: #d7e0e7;
}
/* zero count — red diagonal stripes */
.media-box.zero {
background:
repeating-linear-gradient(
135deg,
rgba(255, 45, 45, .16) 0,
rgba(255, 45, 45, .16) 12px,
rgba(90, 0, 0, .20) 12px,
rgba(90, 0, 0, .20) 24px
),
linear-gradient(
180deg,
#641717 0%,
#340b0b 100%
);
border-color: #ff4b4b;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .10),
0 0 7px rgba(255, 45, 45, .32);
}
.state-mode-btn.media-box.zero i { color: #ff5151; }
.state-mode-btn.media-box.zero .count,
.state-mode-btn.media-box.zero .smb-count { color: #ffc400; }
.state-mode-btn.media-box:hover { border-color: #4c9dcc; filter: brightness(1.1); }
.state-mode-btn.media-box.is-active {
border-color: #4c9dcc;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .12),
0 0 0 2px rgba(76, 157, 204, .55),
0 2px 8px rgba(0, 0, 0, .4);
}
.state-choice.is-active .filter-btn.state-main {
filter: brightness(1.12);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 17px currentColor, 0 6px 12px rgba(0, 0, 0, .45);
}
/* new states — plain look until themed */
.filter-btn.utah {
background: linear-gradient(
135deg,
#9e421d 0%,
#d8752c 52%,
#823017 100%
);
}
.filter-btn.california {
background: linear-gradient(
135deg,
#8f2525 0%,
#c64235 52%,
#7b171b 100%
);
}
/* keep the state icon inside the rounded button */
.filter-btn { overflow: hidden; }
.filter-btn.state-main { padding-left: 8px; }
.filter-btn.state-main .state-icon {
width: 42px;
height: 42px;
object-fit: contain;
flex: 0 0 auto;
}
/* small screens: every button on one line, scaled down */
@media (max-width: 640px) {
.video-filter-bar { flex-direction: column; gap: 10px; padding: 10px 8px 12px; }
.filter-divider { display: none; }
.filter-group,
.filter-group.location,
.filter-group.browse { flex: 1 1 100%; }
.filter-heading { margin-bottom: 6px; font-size: 10px; letter-spacing: 2px; }
.filter-buttons { flex-wrap: nowrap; gap: 4px; align-items: stretch; justify-content: stretch; }
.state-choice { flex: 1 1 0; min-width: 0; }
.filter-btn {
flex: 1 1 0;
min-width: 0 !important;
width: auto;
height: auto;
flex-direction: column;
gap: 3px;
padding: 7px 3px;
border-radius: 7px;
font-size: clamp(8px, 2.5vw, 12px);
text-align: center;
}
.filter-btn > span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-btn .nav-icon,
.filter-btn.new .nav-icon,
.filter-btn.keywords .nav-icon,
.filter-btn.all-videos .nav-icon,
.filter-btn.state-main .state-icon {
width: clamp(18px, 6vw, 30px);
height: clamp(18px, 6vw, 30px);
}
.filter-btn .nav-glyph { font-size: clamp(12px, 4.2vw, 18px); }
.filter-btn__row { gap: 4px; }
.filter-btn__stat { font-size: clamp(7px, 2.1vw, 10px); }
.state-mode-btn { padding: 2px 1px; font-size: clamp(7px, 2vw, 10px); }
/* state buttons: not enough width for icon + text side by side —
icon sits behind, label rides on top */
.filter-btn.state-main {
position: relative;
flex-direction: row;
justify-content: center;
padding: 11px 4px;
min-height: 42px;
overflow: hidden;
}
.filter-btn.state-main .state-icon {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover;
opacity: .45;
filter: brightness(.55);
border-radius: inherit;
}
.filter-btn.state-main > span {
position: relative;
z-index: 1;
font-size: clamp(11px, 3.2vw, 15px) !important;
font-weight: 800;
color: #fff;
text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .9);
}
}
/* ---- photos grid ---- */
.ppl-grid-row[hidden] { display: none !important; }
.photos-empty { color: #bebec2; font-size: 18px; text-align: center; padding: 30px 0; }
.photo-card { position: relative; }
.photo-card[hidden] { display: none !important; }
.photo-thumb {
display: block;
aspect-ratio: 3 / 2;
background: #0b1220 center / cover no-repeat;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.photo-thumb:hover { filter: brightness(1.08); }
.photo-cap {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
max-width: calc(100% - 20px);
padding: 6px 14px;
background: rgba(0, 0, 0, .72);
border-radius: 6px;
color: #fff;
font-size: .82rem;
font-weight: 600;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.photo-date {
position: absolute;
top: 8px;
right: 8px;
padding: 3px 8px;
background: rgba(0, 0, 0, .72);
border-radius: 5px;
color: #fff;
font-size: .72rem;
font-weight: 600;
letter-spacing: .3px;
}
/* manual "hide labels" toggle */
body.hide-photo-labels .photo-cap { display: none; }
/* small thumbnails: labels always hidden regardless of the toggle above —
there's no room for them once this many columns are showing. */
body.grid-cols-7 .photo-cap,
body.grid-cols-8 .photo-cap,
body.grid-cols-9 .photo-cap,
body.grid-cols-10 .photo-cap { display: none !important; }
.ppl-labels-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-left: 6px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(160, 175, 200, .35);
border-radius: 7px;
color: #dce4f5;
cursor: pointer;
}
.ppl-labels-toggle:hover { background: rgba(255, 255, 255, .1); }
.ppl-labels-toggle.is-active { color: #82d927; border-color: rgba(130, 217, 39, .5); }
.ppl-labels-toggle:not(.is-active) { color: #6b7a8c; }
/* ---- "Latest Videos" banner header ---- */
.latest-videos-header {
width: 100%;
height: 130px;
background:
linear-gradient(
90deg,
rgba(0, 18, 32, .96) 0%,
rgba(0, 23, 40, .88) 34%,
rgba(0, 20, 34, .35) 63%,
rgba(0, 10, 20, .05) 100%
),
url("/images/layout/latest-videos-bg.webp"),
url("/images/roxtrails-bg.webp");
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0 30px;
overflow: visible; /* let the magnified keyword icon extend past the bar */
position: relative;
z-index: 5;
border-radius: 12px;
margin-bottom: 16px;
}
.latest-videos-inner {
display: flex;
align-items: center;
gap: 16px;
}
.latest-more-photos[hidden] { display: none !important; }
.latest-more-photos {
margin-left: auto;
flex: 0 0 auto;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
border: none;
background: none;
box-shadow: none;
text-decoration: none;
white-space: nowrap;
transition: transform .15s ease, filter .15s ease;
}
.latest-more-photos:hover { transform: translateY(-2px); filter: brightness(1.15); }
.latest-more-photos__logo {
height: 52px;
width: auto;
max-width: 100%;
flex: 0 0 auto;
object-fit: contain;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
.latest-more-photos__sub {
font-size: 13px;
font-weight: 700;
letter-spacing: .2px;
line-height: 1;
color: #fff;
text-transform: none;
}
.latest-more-photos__go {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid rgba(190, 230, 255, .7);
font-size: 12px;
}
/* below this, the play button + title + hero toggle no longer all fit on one
line without clipping — wrap instead of cramming/cutting them off. The
header's height must go auto too, or the wrapped 2nd line gets cut off. */
@media (max-width: 960px) {
.latest-videos-header { height: auto; padding: 18px 20px; }
.latest-videos-inner { flex-wrap: wrap; }
.latest-play { flex: 0 0 auto; }
.latest-title-block { flex: 1 1 0; min-width: 0; }
.hero-mode-toggle { margin: 4px 0 0; }
.latest-more-photos { margin-left: 12px; }
}
.latest-play {
width: 68px;
height: 68px;
flex: 0 0 68px;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(
circle,
#124878 0 43%,
#06263e 44% 52%,
#ff9400 53% 61%,
#09bfff 62% 69%,
#021522 70%
);
box-shadow: 0 0 10px rgba(0, 190, 255, .8), 0 0 2px #fff inset;
}
.play-triangle {
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 20px solid white;
margin-left: 5px;
filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 5px rgba(255, 255, 255, .6));
}
/* ≤720px: the play icon moves onto the title row, next to "Arizona" —
same element rendered twice, only one of the two is ever shown. */
.latest-play--inline { display: none; }
@media (max-width: 720px) {
.latest-play--desktop { display: none; }
.latest-play--inline {
display: flex;
width: 40px;
height: 40px;
flex: 0 0 40px;
}
.latest-play--inline .play-triangle {
border-top-width: 8px;
border-bottom-width: 8px;
border-left-width: 12px;
margin-left: 3px;
}
}
.latest-title-block {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
}
/* Big Videos / Photos toggle next to the state heading (Colorado, Utah, …) */
.hero-mode-toggle {
display: flex;
align-items: center;
gap: 18px;
flex: 0 0 auto;
margin: 0 14px;
}
.hero-mode-toggle[hidden] { display: none !important; }
.hero-mode-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 2px;
background: transparent;
border: none;
cursor: pointer;
transition: transform .15s ease, filter .15s ease;
}
.hero-mode-btn:hover { transform: translateY(-1px); }
.hero-mode-btn img {
height: 52px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}
.hero-mode-row {
display: flex;
align-items: baseline;
gap: 5px;
}
.hero-mode-count {
font-size: 20px;
font-weight: 800;
line-height: 1;
color: #ffb31a;
}
.hero-mode-label {
font-size: 14px;
font-weight: 500;
letter-spacing: .2px;
text-transform: lowercase;
color: #eaf1f7;
}
.hero-mode-btn.is-active img {
filter: drop-shadow(0 0 10px rgba(76, 190, 255, .65)) drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}
.hero-mode-btn.zero .hero-mode-count { color: #ff6b6b; }
.hero-mode-btn.zero img { opacity: .55; filter: grayscale(.4) drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
@media (max-width: 900px) {
.hero-mode-toggle { gap: 16px; margin: 0 12px; }
.hero-mode-btn img { height: 48px; }
.hero-mode-count { font-size: 20px; }
.hero-mode-label { font-size: 14px; }
}
.latest-title {
color: #f4f7fa;
font-family: Arial, Helvetica, sans-serif;
font-size: 39px;
font-weight: 900;
font-style: italic;
line-height: 1;
letter-spacing: -1.5px;
text-shadow: 0 3px 2px rgba(0, 0, 0, .8), 0 0 7px rgba(0, 0, 0, .55);
margin: 0;
}
/* keyword icon after the heading: fits the line, full 128px size on hover */
.latest-title-icon {
height: 1em;
width: auto;
margin-left: 0.3em;
vertical-align: -0.12em;
transform-origin: left center;
transition: transform 160ms ease;
position: relative;
z-index: 2;
}
.latest-title-icon:hover { transform: scale(3.2); z-index: 10; }
.latest-subline {
margin-top: 8px;
display: flex;
align-items: center;
gap: 14px;
border-top: 2px solid #16b9e8;
padding-top: 6px;
}
.latest-subtitle {
white-space: nowrap;
color: #91d9f4;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 4px;
text-shadow: 0 1px 2px #000;
}
.latest-subtitle b {
color: #8cd9f7;
font-size: 8px;
}
/* "Posted last: …" variant — normal case, tighter tracking */
.latest-subtitle.latest-posted {
letter-spacing: 0.5px;
font-size: 12px;
text-transform: none;
color: #9cd8f3;
}
@media (max-width: 600px) {
.latest-subtitle.latest-posted { white-space: normal; font-size: 11px; }
}
.latest-line {
display: block;
width: 170px;
height: 2px;
background: linear-gradient(90deg, #12bfea 0%, rgba(18, 191, 234, .15) 100%);
}
@media (max-width: 700px) {
.latest-videos-header { height: auto; padding: 18px 20px; }
.latest-title { font-size: 28px; letter-spacing: -1px; }
.latest-play { width: 52px; height: 52px; flex-basis: 52px; }
.play-triangle { border-top-width: 10px; border-bottom-width: 10px; border-left-width: 15px; }
.latest-line { width: 80px; }
}
@media (max-width: 400px) {
.latest-videos-header { padding: 8px 12px; }
.latest-title { font-size: 22px; }
.latest-subtitle { letter-spacing: 2px; font-size: 10px; }
.latest-line { display: none; }
}
/* ---- section heading (home / product videos) ---- */
.videos-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 12px 16px;
margin-bottom: 16px;
}
.videos-title {
margin: 0;
font-size: 26px;
font-weight: 800;
color: #eef4f9;
letter-spacing: 0.3px;
}
.videos-count {
color: #9fb2c1;
font-size: 15px;
}
.videos-more {
margin-left: auto;
color: #7fd0ff;
font-weight: 700;
font-size: 15px;
text-decoration: none;
}
.videos-more:hover { color: #bfe8ff; }
.new-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 9px;
border-radius: 5px;
background: #c62828;
border: 1px solid #e35656;
color: #fff;
font-size: 0.62em;
font-weight: 800;
letter-spacing: 1px;
vertical-align: middle;
}
.new-badge::before {
content: "\2605"; /* ★ */
font-size: 1.1em;
line-height: 1;
}
/* recency rank badge: red, star + number — same on the home page and /videos
(ported from roxfinder's .vid-rank-badge) */
.vid-rank-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1px;
height: 30px;
min-width: 34px;
padding: 0 6px;
border-radius: 6px;
background: #c62828;
color: #fff;
font-size: 0.8rem;
font-weight: 800;
line-height: 1;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
-webkit-user-select: none;
user-select: none;
}
.vid-rank-star {
font-size: 0.85em;
margin-right: 1px;
}
/* ---- sticky filter + toolbar stack (ported from roxfinder) ---- */
/* ===== "Viewed" bar (same as roxfinder) ===== */
.vid-viewed-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 12px;
margin: 0 0 12px;
padding: 6px 12px;
border: 1px solid rgba(53, 197, 255, 0.4);
border-radius: 8px;
background: rgba(16, 40, 64, 0.97);
color: #dce8ff;
font-size: 0.9rem;
}
.vid-viewed-bar-label i {
font-style: normal;
margin-right: 5px;
color: #35c5ff;
}
.vid-viewed-bar-label strong { color: #fff; }
.vid-viewed-filter-btn,
.vid-viewed-reset {
padding: 4px 12px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 6px;
background: rgba(0, 0, 0, 0.25);
color: #fff;
font: inherit;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, outline-color 0.12s ease;
}
.vid-viewed-filter-btn:hover,
.vid-viewed-reset:hover {
background: rgba(0, 0, 0, 0.45);
border-color: #35c5ff;
}
.vid-viewed-reset { margin-left: auto; }
.vid-viewed-filter-btn--new {
background: #d32f2f;
border-color: #ef5350;
letter-spacing: 0.06em;
}
.vid-viewed-filter-btn--new:hover {
background: #e53935;
border-color: #ff6b6b;
}
.vid-viewed-filter-btn.is-active {
outline: 2px solid #f5c518;
outline-offset: 1px;
border-color: #f5c518;
}
/* diagonal "Viewed" stamp on a card + hover tooltip */
.vid-viewed-stamp {
display: none;
position: absolute;
right: 8px;
bottom: 40px;
z-index: 10;
padding: 3px 9px;
border: 3px solid currentColor;
border-radius: 3px;
color: rgba(225, 218, 211, 0.62);
background: transparent;
font-size: 20px;
font-weight: 900;
line-height: 1;
letter-spacing: 1px;
white-space: nowrap;
text-transform: uppercase;
transform: rotate(-12deg);
opacity: 0.9;
/* Blend the stamp into the thumbnail */
mix-blend-mode: screen;
/* Distressed, partially missing ink — same treatment as roxfinder */
-webkit-mask-image:
radial-gradient(circle at 12% 25%, transparent 0 1px, #000 2px),
radial-gradient(circle at 65% 68%, transparent 0 2px, #000 3px),
repeating-linear-gradient(7deg, #000 0 7px, rgba(0, 0, 0, 0.55) 8px, #000 11px);
-webkit-mask-size: 14px 16px, 24px 20px, 100% 100%;
-webkit-mask-composite: source-in;
mask-image:
radial-gradient(circle at 12% 25%, transparent 0 1px, #000 2px),
radial-gradient(circle at 65% 68%, transparent 0 2px, #000 3px),
repeating-linear-gradient(7deg, #000 0 7px, rgba(0, 0, 0, 0.55) 8px, #000 11px);
mask-size: 14px 16px, 24px 20px, 100% 100%;
mask-composite: intersect;
pointer-events: none;
user-select: none;
}
.video-card.is-viewed .vid-viewed-stamp { display: block; }
.vid-viewed-tip {
display: none;
position: absolute;
right: 8px;
bottom: 78px;
z-index: 20;
padding: 3px 8px;
border-radius: 5px;
background: rgba(10, 15, 25, 0.92);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
pointer-events: none;
}
.video-card.is-viewed:hover .vid-viewed-tip { display: block; }
/* ==== toolbar / sticky stack — matched to roxfinder ==== */
.vid-sticky-stack {
position: sticky;
top: 0;
z-index: 100;
margin: 0 0 12px;
background: rgba(12, 16, 28, 0.98);
border: 1px solid rgba(90, 100, 120, 0.4);
border-radius: 12px;
overflow: visible;
}
.vid-filters-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 8px 12px 6px;
border-bottom: 1px solid rgba(160, 175, 200, 0.18);
}
.vid-filters-label {
color: rgba(200, 210, 230, 0.7);
font-size: 0.82rem;
font-weight: 700;
}
.vid-filters-chips {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.vid-filter-none {
color: rgba(200, 210, 230, 0.55);
font-size: 0.82rem;
font-weight: 600;
}
.vid-filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 8px 5px 10px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(180, 190, 210, 0.4);
border-radius: 8px;
color: #eef3ff;
font: inherit;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
}
.vid-filter-chip:hover { background: rgba(255, 255, 255, 0.14); }
.vid-filter-chip span { color: #9fd0ec; font-weight: 700; }
.vid-filters-reset {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: auto;
padding: 5px 12px;
background: linear-gradient(180deg, #7a2230, #521722);
border: 1px solid #b5566b;
border-radius: 8px;
color: #ffe2e8;
font: inherit;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
}
.vid-filters-reset:hover { filter: brightness(1.15); }
.vid-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 0;
padding: 8px 12px;
background: transparent;
border: 0;
}
.vid-toolbar-item {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
.vid-toolbar-sep {
width: 1px;
height: 22px;
background: rgba(160, 175, 200, 0.35);
flex: 0 0 auto;
}
.vid-toolbar-count {
color: #82d927;
font-weight: 800;
font-size: 0.95rem;
gap: 5px;
}
.vid-toolbar-count i,
.vid-toolbar-count .ppl-count-num,
.vid-toolbar-count span {
color: #82d927;
font-size: 0.95rem;
}
.vid-cam-glyph {
width: 17px;
height: 12px;
border-radius: 2px;
background: currentColor;
position: relative;
flex: 0 0 auto;
}
.vid-cam-glyph::after {
content: "";
position: absolute;
right: -6px;
top: 1px;
border: 5px solid transparent;
border-left-color: currentColor;
}
.vid-toolbar-thumbs {
margin-left: auto;
}
.vid-toolbar-thumbs .fa-image {
color: #dce4f5;
font-size: 0.95rem;
}
/* "Options" second row: Duration / All time / More, collapsed by default */
.vid-toolbar-extra[hidden] { display: none !important; }
.vid-toolbar-extra {
border-top: 1px solid rgba(160, 175, 200, 0.2);
padding-top: 8px;
margin-top: 0;
}
/* ---- toolbar dropdown buttons + floating popups ---- */
.vid-toolbar-drop {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: #e8eef8;
font: inherit;
font-size: 0.85rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.vid-toolbar-drop:hover,
.vid-toolbar-drop[aria-expanded="true"],
.vid-toolbar-drop.is-filtered {
background: rgba(255, 255, 255, 0.06);
}
.vid-toolbar-drop .vid-drop-ic {
font-style: normal;
color: #dce4f5;
font-size: 0.95em;
}
.vid-drop-caret {
font-style: normal;
font-size: 0.65rem;
opacity: 0.75;
}
.vid-float-popup {
position: fixed;
z-index: 200;
min-width: 190px;
max-width: 320px;
max-height: 60vh;
overflow-y: auto;
padding: 10px 12px 12px;
border: 1px solid rgba(76, 157, 204, 0.6);
border-radius: 10px;
background: rgba(6, 14, 26, 0.98);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.vid-popup-head {
margin: 8px 0 6px;
color: #8fb0c6;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.vid-popup-head:first-child { margin-top: 0; }
.vid-popup-choices {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.vid-popup-choice {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid #2f4a60;
border-radius: 14px;
background: #142c40;
color: #dbe7f0;
font: inherit;
font-size: 12px;
cursor: pointer;
transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.vid-popup-choice .kw-tab-icon-img { height: 1.2em; width: auto; flex: 0 0 auto; }
.vid-popup-choice:hover { border-color: #4c9dcc; color: #fff; }
.vid-popup-choice.is-active {
background: linear-gradient(180deg, #2879aa, #123b56);
border-color: #4c9dcc;
color: #fff;
}
.vid-play-mode-btn {
padding: 3px 10px;
background: linear-gradient(180deg, #21445d, #10283a);
border: 1px solid #29485e;
border-radius: 6px;
color: #aebdca;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.vid-play-mode-btn:hover { color: #fff; }
.vid-play-mode-btn.is-active {
color: #fff;
background: linear-gradient(180deg, #2879aa, #123b56);
border-color: #4c9dcc;
}
/* inline video player overlay */
.vid-player-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
background: rgba(0, 0, 0, 0.88);
}
.vid-player-box {
/* top and bottom bars share one height */
--viewer-bar-h: 44px;
--viewer-line: #0f6fb0;
--viewer-gold: #ffc64d;
--viewer-bar-bg:
radial-gradient(circle at 50% 50%, rgba(32, 111, 183, 0.18) 0%, rgba(0, 0, 0, 0) 60%),
linear-gradient(90deg, #06162a 0%, #082746 20%, #0a3456 50%, #082746 80%, #06162a 100%);
--viewer-btn-bg:
radial-gradient(circle at 50% 38%, rgba(86, 174, 255, 0.18), rgba(0, 0, 0, 0) 60%),
linear-gradient(180deg, rgba(19, 57, 92, 0.95), rgba(7, 24, 42, 0.95));
position: relative;
/* as wide as the screen allows, but never taller than the viewport (two bars + frame) */
width: min(100%, calc((100vh - 2 * var(--viewer-bar-h) - 12px) * 16 / 9));
background: #000;
border: 1px solid #1b5f93;
border-radius: 26px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(60, 170, 255, 0.18), 0 18px 50px rgba(0, 0, 0, 0.55);
}
@media (max-width: 700px) { .vid-player-box { --viewer-bar-h: 40px; } }
.vid-player-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.vid-player-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ?play=&playall=1 gate: browsers block autoplay-with-sound until a real
click happens, so this stands in for the video until the visitor presses
it — then the whole group starts playing, arrows and all. */
.vid-playall-gate {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 24px;
text-align: center;
background-size: cover;
background-position: center;
}
.vid-playall-gate::before {
content: "";
position: absolute;
inset: 0;
background: rgba(5, 14, 26, .62);
z-index: -1;
}
.vid-playall-gate__btn {
display: inline-flex;
align-items: center;
gap: 12px;
max-width: min(90%, 440px);
padding: 16px 28px;
border: 2px solid var(--viewer-gold, #ffc64d);
border-radius: 999px;
background: rgba(8, 24, 42, .85);
color: #fff;
font-size: clamp(15px, 2.4vw, 19px);
font-weight: 700;
line-height: 1.25;
cursor: pointer;
box-shadow: 0 0 0 4px rgba(255, 198, 77, .12), 0 10px 30px rgba(0, 0, 0, .5);
transition: transform .15s ease, box-shadow .15s ease;
}
.vid-playall-gate__btn:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 5px rgba(255, 198, 77, .2), 0 14px 34px rgba(0, 0, 0, .55);
}
.vid-playall-gate__icon {
flex: 0 0 auto;
display: inline-flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--viewer-gold, #ffc64d);
color: #1a1304;
}
.vid-playall-gate__icon svg { width: 20px; height: 20px; fill: currentColor; }
.vid-playall-gate__hint {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
max-width: 320px;
color: rgba(255, 255, 255, .8);
font-size: 13px;
line-height: 1.4;
}
.vid-playall-gate__hintbtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: 50%;
color: #fff;
}
.vid-playall-gate__hintbtn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 480px) {
.vid-playall-gate { gap: 12px; padding: 14px; }
.vid-playall-gate__btn { padding: 12px 18px; gap: 8px; }
.vid-playall-gate__icon { width: 28px; height: 28px; }
.vid-playall-gate__icon svg { width: 15px; height: 15px; }
}
/* Top bar: share icon (left) · centered one-line title · close (right) */
.video-title-bar,
.video-title-bar * { box-sizing: border-box; }
.video-title-bar {
--action-size: 30px;
display: grid;
grid-template-columns: 46px minmax(0, 1fr) var(--action-size);
align-items: center;
gap: 8px;
height: var(--viewer-bar-h);
min-height: var(--viewer-bar-h);
padding: 0 10px;
background: var(--viewer-bar-bg);
border-bottom: 1px solid rgba(73, 183, 255, 0.45);
color: #f2f6fa;
}
@media (max-width: 700px) {
.video-title-bar { --action-size: 26px; padding: 0 6px; gap: 4px; }
}
.video-title-bar .video-title-bar__text {
grid-column: 2;
min-width: 0;
margin: 0;
padding: 0; /* no top/bottom padding inside the text box */
display: flex;
flex-direction: column;
gap: 4px; /* between title and description */
font-size: clamp(13px, 1.9vw, 18px);
text-align: center;
}
.video-title-bar .video-title-bar__title,
.video-title-bar .video-title-bar__desc {
margin: 0;
padding: 0;
min-width: 0;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.video-title-bar .video-title-bar__title {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: inherit;
font-size: 1.2em;
font-weight: 700;
letter-spacing: -0.015em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
overflow: visible; /* the info popover and description tooltip must not be clipped */
}
@media (max-width: 700px) { .video-title-bar .video-title-bar__title { font-size: 15.6px; } }
/* "#001" (or whatever the title is) + its description, shown only as a
tooltip on hover — not a permanently-visible second line. */
.video-title-bar__num {
position: relative;
cursor: default;
}
.video-title-bar .video-title-bar__desc {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%); /* centered under the title, not pinned to its left edge */
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 5px 12px;
border-radius: 6px;
border: 1px solid #29485e;
background: #0a1929;
color: cyan;
/* fixed, independent of the title's own (now larger, 1.2em) font-size —
this box keeps the same size it always has. */
font-size: 16px;
font-weight: 500;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 160ms ease;
z-index: 25;
}
.video-title-bar .video-title-bar__desc img {
width: 16px;
height: 16px;
flex: 0 0 auto;
object-fit: contain;
}
.video-title-bar__num:hover .video-title-bar__desc { opacity: 1; }
/* While the More Info popup is open, it owns that space: no description tooltip */
.video-title-bar__title:has(.vid-player-info-panel:not([hidden])) .video-title-bar__desc { opacity: 0; }
.video-title-bar .video-title-bar__button {
appearance: none;
display: grid;
place-items: center;
width: var(--action-size);
height: var(--action-size);
margin: 0;
padding: 0;
border: 1px solid rgba(64, 177, 255, 0.55);
border-radius: 8px;
background: var(--viewer-btn-bg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 18px rgba(22, 139, 255, 0.12);
color: #d9f2ff;
cursor: pointer;
text-decoration: none;
transition: box-shadow 160ms ease, color 160ms ease;
}
/* Watch-on-YouTube: rounded-rect badge with a drawn white triangle. */
.video-title-bar .video-title-bar__button--share.youtube-play {
grid-column: 1;
grid-row: 1;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 46px;
height: 32px;
padding: 0;
background: #ff0000;
border: 0;
border-radius: 8px;
box-shadow: none;
cursor: pointer;
transition: background 0.2s ease;
}
/* Hide the old SVG icon — the triangle is drawn with ::before instead. */
.video-title-bar .youtube-play > svg,
.video-title-bar .youtube-play > i {
display: none !important;
}
.youtube-play::before {
content: "";
display: block;
width: 0;
height: 0;
margin-left: 3px;
background: none;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 12px solid #fff;
border-right: 0;
border-radius: 0;
box-shadow: none;
}
.youtube-play::after { content: none; }
.video-title-bar .video-title-bar__button--share.youtube-play:hover {
background: #dc0000;
box-shadow: none;
}
.youtube-play:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* Close (X): plain icon, no frame/background either. */
.video-title-bar .vid-player-close {
grid-column: 3;
grid-row: 1;
border: 0;
background: none;
box-shadow: none;
}
.video-title-bar__button svg {
display: block;
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
/* YouTube play triangle is a solid fill, not a stroked icon — override the
generic button-icon treatment above. */
.video-title-bar__yt-icon {
width: 14px;
height: 14px;
fill: #fff;
stroke: none;
}
.video-title-bar .video-title-bar__button:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 22px rgba(57, 183, 255, 0.3);
color: #fff;
}
.video-title-bar .video-title-bar__button:focus-visible {
outline: 2px solid #70cdff;
outline-offset: 2px;
}
/* Bottom bar: [share · camera · play · divider] [keyword cards] [divider · prev/next].
Same height as the top bar. Overflow stays visible so the Video details popup
(which opens upward from the camera pill) isn't clipped; the player box rounds the corners. */
.video-meta-bar {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
height: var(--viewer-bar-h);
min-height: var(--viewer-bar-h);
width: 100%;
margin: 0;
padding: 0 8px;
box-sizing: border-box;
list-style: none;
background: var(--viewer-bar-bg);
border-top: 1px solid rgba(73, 183, 255, 0.38);
}
.video-meta-bar > li {
margin: 0;
min-width: 0;
list-style: none;
}
.video-meta-bar__left,
.video-meta-bar__right {
display: flex;
align-items: center;
height: 100%;
}
.video-meta-bar__left { gap: 6px; justify-content: flex-start; }
.video-meta-bar__right { gap: 6px; justify-content: flex-end; }
/* dividers between the button groups and the keywords */
.video-meta-bar__left::after,
.video-meta-bar__right::before {
content: "";
flex: 0 0 1px;
width: 1px;
height: 26px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(31, 130, 205, 0.75), rgba(0, 0, 0, 0));
}
.video-meta-bar__share,
.video-meta-bar__camera,
.video-meta-bar__play {
position: relative;
display: inline-flex;
align-items: center;
}
/* Share */
.video-meta-bar__share button {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border: 1px solid rgba(64, 177, 255, 0.55);
border-radius: 8px;
background: var(--viewer-btn-bg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 18px rgba(22, 139, 255, 0.12);
color: #d9f2ff;
box-sizing: border-box;
cursor: pointer;
transition: box-shadow 0.18s ease;
}
.video-meta-bar__share button:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 22px rgba(57, 183, 255, 0.3);
}
.video-meta-bar__share svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Camera pill (short camera code; opens Video details) */
.video-meta-bar__camera > button {
position: relative;
height: 30px;
padding: 0 10px;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(60, 170, 255, 0.38);
border-radius: 8px;
background:
radial-gradient(circle at 50% 35%, rgba(255, 200, 70, 0.15), rgba(0, 0, 0, 0) 55%),
linear-gradient(180deg, rgba(18, 46, 75, 0.98), rgba(9, 23, 39, 0.98));
box-shadow: inset 0 0 12px rgba(255, 198, 77, 0.12);
color: var(--viewer-gold);
font-family: Inter, Arial, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.2px;
line-height: 1;
white-space: nowrap;
box-sizing: border-box;
cursor: pointer;
}
/* Chevron — marks the camera pill as a button that opens the Video details
popup, and points up once it's open. */
.camera-info-chevron {
display: inline-block;
width: 6px;
height: 6px;
margin-left: 6px;
margin-top: -2px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 160ms ease, margin-top 160ms ease;
}
.camera-info-btn.is-open .camera-info-chevron {
transform: rotate(225deg);
margin-top: 4px;
}
.video-meta-bar__camera > button:hover {
border-color: #6cc9ff;
background: linear-gradient(180deg, rgba(14, 52, 84, 0.98) 0%, rgba(8, 34, 57, 0.98) 100%);
box-shadow: inset 0 1px 0 rgba(170, 230, 255, 0.16), 0 0 14px rgba(75, 180, 236, 0.18);
transform: translateY(-1px);
color: #ffd15d;
}
/* Play-all-: gold circle with the group's own thumbnail */
.video-meta-bar__play a {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 2px solid rgba(255, 201, 84, 0.85);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 198, 77, 0.28), inset 0 0 10px rgba(255, 198, 77, 0.08);
box-sizing: border-box;
cursor: pointer;
transition: box-shadow 0.18s ease;
}
.video-meta-bar__play a:hover {
box-shadow: 0 0 16px rgba(255, 198, 77, 0.5), inset 0 0 12px rgba(255, 198, 77, 0.12);
}
.video-meta-bar__play a::after {
content: "";
width: 0;
height: 0;
margin-left: 2px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 9px solid var(--viewer-gold);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.video-meta-bar__play a.is-armed {
border-color: #3ddc73;
box-shadow: 0 0 0 2px rgba(61, 220, 115, .45), 0 0 14px rgba(61, 220, 115, .65);
}
/* "Play all" scope picker: whole filtered page vs just this trip-group */
.vid-playall-picker {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 8px;
z-index: 35;
width: max-content;
min-width: 220px;
max-width: min(300px, calc(100vw - 32px));
padding: 10px;
border-radius: 12px;
border: 1px solid #37627c;
background: #0e2235;
box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
}
.vid-playall-picker[hidden] { display: none; }
.vid-playall-picker__title {
margin: 0 2px 8px;
color: #9fc3dc;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.vid-playall-picker__opt {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
margin: 0 0 4px;
border: 0;
border-radius: 9px;
background: rgba(216, 229, 238, .06);
color: #eef7ff;
font-size: 13px;
font-weight: 700;
text-align: left;
cursor: pointer;
transition: background .15s ease;
}
.vid-playall-picker__opt:last-of-type { margin-bottom: 0; }
.vid-playall-picker__opt:hover { background: rgba(53, 201, 243, .16); }
/* Whichever scope is currently armed, shown when the picker is reopened —
otherwise there was no way to tell which one (if either) was playing. */
.vid-playall-picker__opt.is-active {
background: rgba(61, 220, 115, .16);
border: 1px solid rgba(61, 220, 115, .55);
}
.vid-playall-picker__opt.is-active:hover { background: rgba(61, 220, 115, .24); }
.vid-playall-picker__opt img {
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
}
.vid-playall-picker__status {
margin: 8px 2px 0;
padding-top: 8px;
border-top: 1px solid #27455b;
color: #3ddc73;
font-size: 12px;
font-weight: 700;
text-align: center;
}
.vid-playall-picker__status[hidden] { display: none; }
.vid-playall-picker__progress {
margin: 8px 2px 0;
padding-top: 8px;
border-top: 1px solid #27455b;
color: #9fc3dc;
font-size: 12px;
font-weight: 700;
text-align: center;
}
.vid-playall-picker__progress[hidden] { display: none; }
/* "N of M" status for Play-all — floats above the button, auto-hides */
.vid-playall-status {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 8px;
padding: 4px 10px;
border-radius: 8px;
border: 1px solid rgba(255, 201, 84, 0.6);
background: #0a1929;
color: var(--viewer-gold);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
z-index: 30;
pointer-events: none;
}
.vid-playall-status[hidden] { display: none; }
/* Keyword cards: never wrap; shrink first, then icon-only with the name as a hover title */
.video-meta-bar__center {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 8px;
overflow: hidden;
}
.video-meta-bar__title {
flex: 0 0 auto;
color: #f2f7fb;
font-size: 16px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.video-meta-bar__tag {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
height: 30px;
padding: 0 10px 0 6px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid rgba(64, 177, 255, 0.45);
background:
radial-gradient(circle at 50% 30%, rgba(77, 160, 255, 0.2), rgba(0, 0, 0, 0) 55%),
linear-gradient(180deg, rgba(17, 56, 92, 0.98), rgba(7, 24, 42, 0.98));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 14px rgba(0, 123, 255, 0.12);
color: #f2f7fb;
text-decoration: none;
font-size: 16px;
font-weight: 700;
line-height: 1;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
white-space: nowrap;
flex-shrink: 1;
transition: color 160ms ease, box-shadow 160ms ease;
}
.video-meta-bar__tag:hover { color: #ffc85e; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 22px rgba(57, 183, 255, 0.3); }
.video-meta-bar__tag img {
width: 22px;
height: 22px;
flex: 0 0 22px;
object-fit: cover;
}
.video-meta-bar__tag span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
/* Prev / next */
.video-meta-bar__navbtn {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(64, 177, 255, 0.55);
border-radius: 50%;
background: var(--viewer-btn-bg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 18px rgba(22, 139, 255, 0.12);
color: #d9f2ff;
cursor: pointer;
box-sizing: border-box;
transition: box-shadow 0.18s ease;
}
.video-meta-bar__navbtn:hover:not(:disabled) {
color: #9fe4ff;
border-color: #3ab8ff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 18px rgba(58, 184, 255, 0.45);
}
.video-meta-bar__navbtn:disabled { opacity: .3; cursor: default; }
/* No dead-end: at the edge of the list (or a single video), the button still
works — it wraps around — just tinted red to show you've hit the end. */
.video-meta-bar__navbtn.is-end {
border-color: rgba(255, 90, 90, .65);
color: #ffb3b3;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 14px rgba(255, 70, 70, 0.3);
}
.video-meta-bar__navbtn.is-end:hover {
color: #ffd6d6;
border-color: #ff5a5a;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 18px rgba(255, 90, 90, 0.55);
}
.video-meta-bar__navbtn svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 480px) {
.video-meta-bar__center { gap: 6px; }
.video-meta-bar__tag span { display: none; }
.video-meta-bar__tag { gap: 0; padding: 0 6px; flex: 0 0 auto; }
}
/* Mobile: everything scales down to the 40px bars */
@media (max-width: 700px) {
.video-meta-bar { padding: 0 6px; }
.video-meta-bar__left, .video-meta-bar__right { gap: 4px; }
.video-meta-bar__left::after, .video-meta-bar__right::before { height: 22px; }
.video-meta-bar__share button { width: 26px; height: 26px; border-radius: 6px; }
.video-meta-bar__share svg, .video-meta-bar__navbtn svg { width: 14px; height: 14px; }
.video-meta-bar__camera > button { height: 26px; padding: 0 6px; font-size: 12px; border-radius: 6px; }
.video-meta-bar__play a { width: 26px; height: 26px; }
.video-meta-bar__play a::after { border-top-width: 5px; border-bottom-width: 5px; border-left-width: 7px; }
.video-meta-bar__navbtn { width: 26px; height: 26px; }
.video-meta-bar__center { gap: 4px; padding: 0 4px; }
.video-meta-bar__tag { height: 26px; padding: 0 4px; border-radius: 6px; }
.video-meta-bar__tag img { width: 18px; height: 18px; flex-basis: 18px; border-radius: 4px; }
}
@media (max-width: 640px) {
.video-title-bar .video-title-bar__text { font-size: 13px; }
}
.ppl-size-label {
color: #fff;
font-size: 0.78rem;
font-weight: 700;
}
.ppl-cols-btn {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #21445d, #10283a);
border: 1px solid #4c9dcc;
border-radius: 6px;
color: #eaf4fb;
font: 700 16px/1 Arial, sans-serif;
cursor: pointer;
}
.ppl-cols-btn:hover { background: linear-gradient(180deg, #2879aa, #123b56); }
.ppl-cols-btn:active { transform: translateY(1px); }
.ppl-size-slider {
width: 120px;
accent-color: #f58220;
}
.ppl-size-value {
min-width: 1.2em;
text-align: right;
color: #f58220;
font-size: 0.9rem;
font-weight: 700;
}
@media (max-width: 560px) {
.vid-toolbar-thumbs { margin-left: 0; }
.ppl-size-slider { width: 90px; }
}
@media (max-width: 430px) {
.vid-toolbar { gap: 6px 8px; }
.vid-toolbar-sep { display: none; }
.ppl-size-slider { width: 60px; }
.ppl-labels-toggle { margin-left: 4px; }
}
/* ---- video grid (ported from roxfinder /videos) ---- */
.ppl-grid-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
width: 100%;
position: relative;
z-index: 1;
}
/* Hides the raw server-rendered grid (every video, unfiltered) until the page's
JS has applied the real filters/order — otherwise visitors briefly see the
full list "flash" before it corrects itself. Removed by app.blade.php right
after its first apply() call. */
/* Only hidden once we know JS is actually running (html.has-js, set by an
inline script in ) — otherwise, with JS disabled or blocked, nothing
would ever remove .js-pending and the grid would stay invisible forever. */
.has-js .ppl-grid-row.js-pending { visibility: hidden; }
/* thumbnails-per-row: - / slider / + set body.grid-cols-N */
body.grid-cols-1 .ppl-grid-row { grid-template-columns: repeat(1, 1fr); }
body.grid-cols-2 .ppl-grid-row { grid-template-columns: repeat(2, 1fr); }
body.grid-cols-3 .ppl-grid-row { grid-template-columns: repeat(3, 1fr); }
body.grid-cols-4 .ppl-grid-row { grid-template-columns: repeat(4, 1fr); }
body.grid-cols-5 .ppl-grid-row { grid-template-columns: repeat(5, 1fr); }
body.grid-cols-6 .ppl-grid-row { grid-template-columns: repeat(6, 1fr); }
body.grid-cols-7 .ppl-grid-row { grid-template-columns: repeat(7, 1fr); }
body.grid-cols-8 .ppl-grid-row { grid-template-columns: repeat(8, 1fr); }
body.grid-cols-9 .ppl-grid-row { grid-template-columns: repeat(9, 1fr); }
body.grid-cols-10 .ppl-grid-row { grid-template-columns: repeat(10, 1fr); }
@media (max-width: 1100px) { .ppl-grid-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .ppl-grid-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ppl-grid-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ppl-grid-row { grid-template-columns: 1fr; } }
.ppl-grid-item {
position: relative;
z-index: 1;
}
.ppl-grid-item[hidden],
.vid-group-label-wrap[hidden] {
display: none !important;
}
/* ---- group section label ---- */
.vid-group-label-wrap {
grid-column: 1 / -1;
margin: 18px 0 6px;
position: relative;
z-index: 20; /* magnified icon must paint over the cards below */
}
.vid-group-label {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 0;
color: #f5a623; /* text: orange (side lines stay green) */
font-size: clamp(1.15rem, 2.2vw, 1.55rem);
font-weight: 800;
letter-spacing: 0.02em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.vid-group-label::before,
.vid-group-label::after {
content: "";
flex: 1;
max-width: 140px;
height: 2px;
background: linear-gradient(to right, transparent, #82d927);
}
.vid-group-label::after {
background: linear-gradient(to left, transparent, #82d927);
}
.vid-group-label-main {
flex: 0 1 auto;
display: inline-flex;
align-items: center;
gap: 0.45em;
white-space: nowrap;
}
/* Only the text + count is clickable ("Show only X") — the icon next to
it is purely decorative and just magnifies on its own hover. */
.vid-group-label-text {
display: inline-flex;
align-items: center;
gap: 0.45em;
background: none;
border: 0;
padding: 0;
margin: 0;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-shadow: inherit;
text-decoration: none;
cursor: pointer;
}
.vid-group-label-text:hover,
.vid-group-label-text:focus-visible {
color: #ffc85e;
}
.vid-group-label-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 1.7em;
height: 1.7em;
border-radius: 8px;
/* background: rgba(120, 200, 255, 0.12);
border: 1px solid rgba(120, 200, 255, 0.35);
box-shadow: 0 0 10px rgba(120, 200, 255, 0.22);
font-size: 0.8em; */
color: #9fe0ff;
line-height: 1;
}
.vid-group-label-icon > i {
display: block;
font-size: inherit;
line-height: 1;
}
/* coloured PNG icon before a section title ("Snow", "Trails", …) —
decorative only: no click action, just magnifies on its own hover. */
.vid-group-label-icon-img {
height: 1.5em;
width: auto;
flex: 0 0 auto;
object-fit: contain;
vertical-align: middle;
cursor: default;
/* Grow away from the title text (which sits to the right), not over it. */
transform-origin: right center;
transition: transform 160ms ease;
position: relative;
z-index: 1;
}
.vid-group-label-icon-img:hover {
transform: scale(2.6);
}
.vid-group-count {
font-size: 1.2em;
font-weight: 700;
opacity: 0.85;
}
/* ---- card ---- */
.ppl-card {
position: relative;
display: block;
background: #0b1220;
overflow: hidden;
aspect-ratio: 3 / 2; /* card height matches roxfinder */
container-type: size;
container-name: vidcard;
}
/* small cards (~150px tall / 5+ per row): keep only the first two overlay
lines — number/rank, the music·camera·time row and the date — hide the rest */
@container vidcard (max-height: 170px) {
.vid-id-host-row,
.vid-cam-location,
.vid-camera-actual,
.vid-elevation,
.vid-photo-id-mark,
.ppl-label .vis-keywords {
display: none !important;
}
.ppl-label {
padding-top: 16px;
}
}
.ppl-video-trigger {
display: block;
width: 100%;
height: 95%;
position: relative;
}
.ppl-img {
position: absolute;
inset: 0;
width: 100%;
height: 90%;
object-fit: cover;
object-position: center center;
display: block;
transition: transform 0.25s ease, filter 0.25s ease;
}
.ppl-card--video .ppl-video-trigger:hover .ppl-img {
transform: scale(1.06);
filter: brightness(1.12);
}
.related-photo__play {
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
box-sizing: border-box;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(200, 50, 50, 0.45);
border: 2px solid rgba(255, 255, 255, 0.55);
display: flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
transition: transform 0.2s ease, background 0.2s ease;
pointer-events: none;
}
.related-photo__play::after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.85);
margin-left: 2px;
}
.ppl-card--video:hover .related-photo__play {
transform: translate(-50%, -50%) scale(1.1);
background: rgba(200, 50, 50, 0.65);
}
/* big keyword icon (cow = animals, bolt = lightning) — same as roxfinder */
.video-icon {
position: absolute;
left: 12%;
top: 12%;
z-index: 3;
height: 42%;
max-height: 100px;
width: auto;
opacity: 0.55;
pointer-events: none;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
.vid-photo-id-mark {
position: absolute;
right: 10px;
bottom: 6px;
z-index: 3;
font-family: "Permanent Marker", "Arial Black", sans-serif;
font-size: 1.4rem;
line-height: 1;
color: #fff;
opacity: 0.38;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 6px rgba(0, 0, 0, 0.65);
pointer-events: none;
letter-spacing: 0.02em;
}
/* ---- bottom overlay: keywords + title ---- */
.ppl-overlay {
position: absolute;
inset: 0;
z-index: 9;
pointer-events: none;
}
.ppl-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 12;
padding: 26px 8px 28px; /* bottom padding clears the city stripe bar */
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
color: #fff;
font-size: 0.85rem;
font-weight: 600;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
line-height: 1.25;
}
.ppl-card--video .ppl-label .vis-keywords {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-self: flex-start;
gap: 3px;
margin: 0 0 4px;
max-width: 100%;
font-size: 0.85em;
}
.each-keyword {
display: inline-block;
padding: 1px 4px;
background-color: rgba(30, 30, 30, 0.6);
border: 1px solid rgba(98, 205, 205, 0.35);
border-radius: 4px;
text-transform: uppercase;
color: #ffd23f;
}
.each-keyword.kw-click {
pointer-events: auto;
cursor: pointer;
font: inherit;
line-height: 1.4;
text-transform: uppercase;
color: #ffd23f;
transition: filter 0.15s ease, transform 0.15s ease;
}
.each-keyword.kw-click:hover {
filter: brightness(1.3);
transform: translateY(-1px);
}
.each-keyword.kw-click.active {
background-color: rgba(255, 210, 63, 0.9);
color: #1a1a1a;
}
/* Car (rb_videos.car) chip — same shape as the keyword chips, orange text */
.each-car-chip {
display: inline-block;
padding: 1px 4px;
background-color: rgba(30, 30, 30, 0.6);
border: 1px solid rgba(255, 154, 31, 0.45);
border-radius: 4px;
text-transform: uppercase;
color: #ff9a1f;
}
.ppl-label-title {
position: relative;
z-index: 1;
color: #fff;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
/* ---- city stripe under the thumbnail ---- */
.vid-city-stripe {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 13;
display: flex;
text-align: center;
padding: 4px 8px;
color: #fff;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.03em;
background:
radial-gradient(circle at 50% -30%, rgba(91, 255, 126, 0.55), transparent 58%),
linear-gradient(180deg, #176442 0%, #0c3b2a 52%, #061a12 100%);
}
/* The name/title text scrolls inside this inner viewport when it overflows; the
stripe itself stays overflow:visible so the hover tooltip below isn't clipped. */
.vid-city-stripe__viewport {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.vid-city-stripe--tucson {
background:
radial-gradient(circle at 50% -30%, rgba(255, 140, 38, 0.62), transparent 58%),
linear-gradient(180deg, #8a3514 0%, #50200e 52%, #210c06 100%);
}
.vid-city-stripe--phoenix {
background:
radial-gradient(circle at 50% -30%, rgba(61, 132, 224, 0.55), transparent 58%),
linear-gradient(180deg, #194a78 0%, #102e52 52%, #07182e 100%);
}
.vid-city-stripe--ouray {
background:
radial-gradient(circle at 50% -30%, rgba(18, 218, 255, 0.6), transparent 58%),
linear-gradient(180deg, #08718e 0%, #07415f 52%, #071a31 100%);
}
/* The stripe shows the video's short title by default; the city name only
appears as a tooltip on hover, colored to match that city's accent hue. */
.vid-city-stripe__tip {
position: absolute;
left: 50%;
bottom: 100%;
transform: translateX(-50%) translateY(-6px);
padding: 4px 10px;
border-radius: 6px;
background: #0a1929;
border: 1px solid #29485e;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
color: #5bff7e;
opacity: 0;
pointer-events: none;
transition: opacity 160ms ease;
z-index: 20;
}
.vid-city-stripe:hover .vid-city-stripe__tip { opacity: 1; }
.vid-city-stripe--tucson .vid-city-stripe__tip { color: #ff8c26; }
.vid-city-stripe--phoenix .vid-city-stripe__tip { color: #3d84e0; }
.vid-city-stripe--ouray .vid-city-stripe__tip { color: #12daff; }
/* ---- top chrome ---- */
.vid-card-chrome {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
z-index: 12;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
pointer-events: none;
}
.vid-id-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
max-width: 55%;
pointer-events: auto;
}
.vid-id-row-top {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
min-height: 30px;
}
/* line 2 of the id column — the play link */
.vid-id-host-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
min-height: 22px;
}
.vid-right-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
max-width: 55%;
pointer-events: none;
}
.product-number-badge {
box-sizing: border-box;
width: 30px;
height: 30px;
flex: 0 0 30px;
border-radius: 50%;
background: rgba(33, 108, 165, 0.55);
border: 2px solid #35c5ff;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.30), inset 0 1px 2px rgba(255, 255, 255, 0.12);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
line-height: 1;
}
.vid-yt-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 4px;
background: #e62117;
text-decoration: none;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
}
.vid-yt-link:hover { background: #ff2d22; }
.vid-yt-play {
display: block;
width: 0;
height: 0;
margin-left: 1px;
border-style: solid;
border-width: 4px 0 4px 7px;
border-color: transparent transparent transparent #fff;
}
.vid-cam-location {
font-size: 0.78rem;
padding: 3px 7px;
border-radius: 4px;
height: 22px;
display: inline-flex;
align-items: center;
color: #fff;
font-weight: 700;
background: rgba(5, 18, 42, 0.82);
border: 1px solid rgba(93, 145, 215, 0.7);
box-shadow: 0 2px 5px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .13);
}
.vis-meta {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-height: 30px;
font-size: 0.8rem;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
pointer-events: none;
}
.vis-meta .video-music {
position: relative;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: linear-gradient(145deg, #172d4d, #071426);
border: 2px solid #3b587d;
border-radius: 4px;
font-size: 12px;
line-height: 1;
color: #fff;
box-shadow: 0 3px 8px rgba(0, 0, 0, .6), inset 0 1px 2px rgba(255, 255, 255, .08);
}
.vis-meta .video-music.has-music {
color: #ffbd28;
border-color: #ffb514;
text-shadow: 0 0 7px rgba(255, 181, 20, .65);
box-shadow: 0 0 6px rgba(255, 181, 20, .65), 0 0 14px rgba(255, 181, 20, .25), inset 0 0 7px rgba(255, 181, 20, .1);
}
.vis-meta .video-music.no-music::after {
content: "";
position: absolute;
width: 16px;
height: 2px;
background: #c62828;
border: 1px solid rgba(255, 255, 255, .8);
border-radius: 3px;
transform: rotate(45deg);
box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
/* camera device icon (iPhone / GoPro / Pormido) — same as roxfinder */
.vis-meta .vid-camera-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
flex: 0 0 auto;
margin: 0;
padding: 0;
}
.vis-meta .device-icon {
display: block;
vertical-align: middle;
line-height: 1;
}
.vis-meta .iphone-icon,
.vis-meta .gopro-icon,
.vis-meta .pormido-icon {
background: linear-gradient(180deg, #263956 0%, #192941 55%, #111b2d 100%);
border: 1px solid #405979;
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 10px rgba(52, 105, 180, .08), 0 1px 3px rgba(0, 0, 0, .5);
}
.vis-meta .cam-small {
height: 22px;
width: auto;
max-width: 72px;
object-fit: contain;
}
.vis-meta .vid-duration {
display: inline-flex;
align-items: center;
gap: 4px;
height: 22px;
box-sizing: border-box;
font-variant-numeric: tabular-nums;
line-height: 1;
white-space: nowrap;
background: rgba(5, 12, 24, 0.78);
border: 1px solid rgba(100, 125, 160, 0.35);
border-radius: 6px;
padding: 0 7px;
color: #fff;
font-weight: 600;
text-shadow: 0 1px 2px #000;
}
.video-play-icon {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 5px solid #fff;
}
.vid-meta-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
max-width: 100%;
pointer-events: none;
}
.ppl-when2 {
color: #fff;
font-size: 0.72rem;
font-weight: 600;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0.4);
padding: 3px 7px;
border-radius: 4px;
line-height: 1.2;
white-space: nowrap;
height: 22px;
display: inline-flex;
align-items: center;
box-sizing: border-box;
}
.vid-camera-actual {
font-size: 0.72rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
color: #ffc933;
text-shadow: 0 1px 2px #000;
background: rgba(5, 12, 24, 0.78);
border: 1px solid rgba(100, 125, 160, 0.35);
border-radius: 4px;
padding: 3px 7px;
height: 22px;
display: inline-flex;
align-items: center;
box-sizing: border-box;
}
.vid-elevation {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
padding: 3px 7px;
border-radius: 4px;
color: #fff;
font-weight: 700;
background: rgba(5, 18, 42, 0.82);
border: 1px solid rgba(93, 145, 215, 0.7);
box-shadow: 0 2px 5px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .13);
height: 22px;
box-sizing: border-box;
white-space: nowrap;
}
/* elevation icon changes by altitude tier */
.elev-icon {
display: inline-flex;
flex: 0 0 auto;
}
.elev-icon svg {
width: 14px;
height: 14px;
display: block;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.elev-tier-1 { color: #e0913f; } /* 0–3,000 ft — cactus / desert */
.elev-tier-2 { color: #67c56f; } /* 3,000–6,000 — green hills */
.elev-tier-3 { color: #6aa8ff; } /* 6,000–10,000 — forested peaks */
.elev-tier-4 { color: #eef4fa; } /* over 10,000 — high alpine */
/* ---- GoPro ribbon ---- */
.gopro-ribbon {
position: absolute;
z-index: 4;
right: -42px;
bottom: 24px;
width: 165px;
padding: 7px 0;
transform: rotate(-45deg);
background: linear-gradient(180deg, #18212c, #05080c);
border-top: 2px solid #20a9f5;
border-bottom: 2px solid #20a9f5;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.65);
color: #fff;
font: 700 15px/1 Arial, sans-serif;
text-align: center;
letter-spacing: 0.5px;
pointer-events: none;
white-space: nowrap;
}
@media (max-width: 700px) {
.videos-title { font-size: 26px; }
}
/* ==================================================
ROXTRAILS FOOTER
================================================== */
.info-page {
max-width: 760px;
margin: 60px auto 90px;
padding: 0 20px;
text-align: center;
color: #d8e5ee;
}
.info-page__title {
margin: 0 0 12px;
font-size: 34px;
font-weight: 800;
color: #fff;
}
.info-page__body { margin: 0 0 24px; font-size: 18px; color: #9eafbd; }
.info-page__back { color: #62c9ff; font-weight: 700; text-decoration: none; }
.info-page__back:hover { color: #ffb52e; }
/* About / Privacy pages: left-aligned body copy inside the same card */
.about-page,
.privacy-page { text-align: left; }
.about-page .info-page__title,
.privacy-page .info-page__title,
.about-page .info-page__body,
.privacy-page .info-page__body { text-align: center; }
.about-page__header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.about-page__rule {
display: block;
width: 140px;
height: 4px;
margin: 4px 0 14px;
border-radius: 2px;
background: linear-gradient(90deg, #1688c4, #62c9ff);
box-shadow: 0 0 12px rgba(98, 201, 255, 0.45);
}
.about-page__mountain {
width: 42px;
height: auto;
margin-bottom: 20px;
}
.about-page__gallery {
display: flex;
flex-direction: column;
gap: 20px;
margin: 0 0 24px;
}
.about-page__gallery-item {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.about-photo {
display: block;
flex: 0 0 auto;
width: min(320px, 100%);
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(98, 201, 255, 0.3);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
cursor: zoom-in;
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.about-photo img {
display: block;
width: 100%;
height: 220px;
object-fit: cover;
}
.about-page__gallery-caption {
flex: 1 1 220px;
min-width: 220px;
margin: 0;
color: #9eafbd;
font-size: 16px;
line-height: 1.6;
}
.about-photo:hover,
.about-photo:focus-visible {
transform: translateY(-3px);
border-color: #62c9ff;
box-shadow: 0 10px 24px rgba(0, 139, 215, 0.35);
}
.about-page__subhead {
margin: 32px 0 10px;
font-size: 20px;
font-weight: 800;
color: #fff;
}
.about-page__links {
margin: 0 0 18px;
padding-left: 20px;
color: #d8e5ee;
line-height: 1.8;
}
.about-page__links a,
.info-page__body a,
.privacy-section a {
color: #62c9ff;
font-weight: 700;
text-decoration: none;
}
.about-page__links a:hover,
.info-page__body a:hover,
.privacy-section a:hover { color: #ffb52e; }
.privacy-section {
margin: 0 0 28px;
padding: 20px 22px;
background: rgba(8, 26, 42, .55);
border: 1px solid rgba(98, 201, 255, .25);
border-radius: 12px;
}
.privacy-section h2 {
margin: 0 0 12px;
font-size: 18px;
font-weight: 800;
color: #fff;
}
.privacy-section p { margin: 0; color: #d8e5ee; line-height: 1.6; }
.privacy-list {
margin: 0;
padding-left: 20px;
color: #d8e5ee;
line-height: 1.7;
}
.privacy-list strong { color: #9eafbd; }
/* ==================================================
CONTACT BUTTON (matches roxfinder's contact.blade.php)
================================================== */
.about-page__feedback {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.contact-button {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 12px 18px;
vertical-align: middle;
background: linear-gradient(
135deg,
#2e6399 0%,
#193f6a 45%,
#081a35 100%
);
border: 1px solid #789fbe;
border-radius: 8px;
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 15%),
0 4px 12px rgb(8 26 53 / 18%);
color: #fff;
font-family: inherit;
font-size: 18px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.3px;
text-decoration: none;
white-space: nowrap;
transition: box-shadow 180ms ease, border-color 180ms ease;
}
.contact-button svg {
flex-shrink: 0;
fill: none;
stroke: #c5dff2;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.contact-envelope {
width: 26px;
height: 26px;
}
.contact-label {
padding-left: 16px;
border-left: 1px solid rgb(173 208 234 / 45%);
}
.contact-arrow {
width: 18px;
height: 18px;
}
.contact-button:hover {
color: #fff;
text-decoration: none;
border-color: #a6c9e2;
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 20%),
0 6px 16px rgb(8 26 53 / 25%);
}
.contact-button:focus-visible {
outline: 3px solid #548dc1;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.contact-button {
transition: none;
}
}
.contact-form__direct {
margin: 0 0 24px;
font-size: 15px;
color: #9eafbd;
}
.contact-form__direct a {
color: #62c9ff;
font-weight: 700;
text-decoration: none;
}
.contact-form__direct a:hover { color: #ffb52e; }
.contact-form {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0 0 28px;
text-align: left;
}
.contact-form__row { display: flex; flex-direction: column; gap: 6px; }
.contact-form__row label {
font-size: 13px;
font-weight: 700;
letter-spacing: .3px;
color: #9eafbd;
text-transform: uppercase;
}
.contact-form__row input,
.contact-form__row select,
.contact-form__row textarea {
width: 100%;
box-sizing: border-box;
min-height: 48px;
padding: 10px 12px;
background: rgba(8, 26, 42, .7);
border: 1px solid rgba(98, 201, 255, .35);
border-radius: 8px;
color: #eaf1f7;
font: inherit;
font-size: 15px;
}
.contact-form__row select {
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2362c9ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 36px;
}
.contact-form__row input:focus,
.contact-form__row select:focus,
.contact-form__row textarea:focus {
outline: none;
border-color: #62c9ff;
box-shadow: 0 0 0 2px rgba(98, 201, 255, .25);
}
.contact-form__row textarea { resize: vertical; }
/* honeypot — invisible to real visitors, still reachable by simple bots */
.contact-form__honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.contact-form__submit {
align-self: flex-start;
padding: 12px 28px;
background: linear-gradient(180deg, #2879aa, #123b56);
border: 1px solid #4c9dcc;
border-radius: 9px;
color: #fff;
font-weight: 700;
font-size: 15px;
cursor: pointer;
transition: filter .15s ease, transform .15s ease;
}
.contact-form__submit:hover { filter: brightness(1.15); transform: translateY(-1px); }
.contact-form__success {
padding: 12px 16px;
margin: 0 0 16px;
background: rgba(76, 217, 100, .12);
border: 1px solid rgba(76, 217, 100, .5);
border-radius: 8px;
color: #7cf0a0;
font-weight: 700;
}
.contact-form__errors {
padding: 12px 16px;
margin: 0 0 16px;
background: rgba(255, 75, 75, .1);
border: 1px solid rgba(255, 75, 75, .5);
border-radius: 8px;
color: #ffb0b0;
}
.contact-form__errors ul { margin: 0; padding-left: 18px; }
/* ==================================================
FLOATING SCROLL-TO-TOP BUTTON (matches roxfinder)
================================================== */
.scroll-top-btn {
position: fixed;
left: clamp(18px, 2vw, 34px);
bottom: clamp(18px, 3vw, 36px);
width: 76px;
height: 76px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffbd2e;
font-size: 2.3rem;
background: linear-gradient(145deg, #123d78, #071b3b);
border: 3px solid #ffbd2e;
box-shadow:
0 0 0 4px rgba(255, 189, 46, .12),
0 0 22px rgba(255, 189, 46, .55),
inset 0 1px 0 rgba(255, 255, 255, .18);
z-index: 999;
transition: all .22s ease, opacity .22s ease, visibility .22s ease;
text-decoration: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.scroll-top-btn.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.scroll-top-btn:hover {
transform: translateY(-4px);
background: linear-gradient(145deg, #164b90, #09224a);
box-shadow:
0 0 0 6px rgba(255, 189, 46, .16),
0 0 30px rgba(255, 189, 46, .75),
inset 0 1px 0 rgba(255, 255, 255, .22);
}
.scroll-top-btn i { line-height: 1; }
.scroll-top-btn::after {
content: "";
position: absolute;
inset: -7px;
border-radius: inherit;
border: 2px solid rgba(255, 189, 46, .35);
animation: arrowPulse 1.8s ease-out infinite;
}
@keyframes arrowPulse {
0% { transform: scale(.9); opacity: .65; }
100% { transform: scale(1.25); opacity: 0; }
}
@media (max-width: 500px) {
.scroll-top-btn { width: 54px; height: 54px; font-size: 1.6rem; }
.scroll-top-btn::after { inset: -5px; }
}
@media (prefers-reduced-motion: reduce) {
.scroll-top-btn { transition: none; }
.scroll-top-btn::after { animation: none; }
}
.rox-footer {
margin-top: 24px;
color: #d8e5ee;
background: #03111d;
border-top: 3px solid #1688c4;
box-shadow: 0 -5px 20px rgba(0, 139, 215, 0.18);
}
/* ==================================================
HERO (photo band with logo/tagline)
================================================== */
/* Desktop AND tablet (681px+): the scene spans the whole footer (logo + icons),
starting at the top edge — not just the short logo band. Only phones (<=680px)
use the hero-only rule further down. (This used to start at 1051px, which left
681-1050px with no background image at all.) */
@media (min-width: 681px) {
.rox-footer {
background:
linear-gradient(
180deg,
rgba(3, 17, 29, 0.3) 0%,
rgba(3, 17, 29, 0.5) 55%,
rgba(3, 17, 29, 0.8) 100%
),
url("/images/layout/bg/cactus-bg.webp") center bottom / cover no-repeat,
#03111d;
}
}
.rox-footer__brand {
width: min(1400px, calc(100% - 70px));
margin: 0 auto;
padding: 18px 0 6px;
}
.rox-footer__logo {
display: block;
width: min(240px, 100%);
height: auto;
margin-bottom: 8px;
}
.rox-footer__tagline {
max-width: 500px;
margin: 0;
color: #e7eef4;
font-style: italic;
font-size: 17px;
line-height: 1.3;
}
.rox-footer__accent {
display: block;
width: 78px;
height: 3px;
margin-top: 8px;
border-radius: 2px;
background: linear-gradient(90deg, #ff9a1f, #ffb52e);
box-shadow: 0 0 10px rgba(255, 154, 31, 0.5);
}
/* Main footer section */
.rox-footer__main {
display: flex;
align-items: flex-start;
gap: 32px;
width: min(1400px, calc(100% - 70px));
margin: 0 auto;
padding: 0 0 24px;
}
.rox-footer__divider {
align-self: stretch;
width: 1px;
background: rgba(119, 178, 214, 0.3);
}
/* ==================================================
COLUMN HEADINGS
================================================== */
.rox-footer__heading {
margin: 0 0 16px;
color: #9eafbd;
font-size: 15px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.rox-footer__network-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
font-family: inherit;
}
.rox-footer__network-tick {
display: block;
width: 18px;
height: 18px;
object-fit: contain;
transition: transform 0.2s ease;
}
.rox-footer__network-toggle.is-open .rox-footer__network-tick {
transform: rotate(180deg);
}
/* ==================================================
SITE NAV (icon + label + subtitle)
================================================== */
.rox-footer__explore {
display: flex;
gap: 34px;
flex: 1 1 auto;
}
.rox-footer__navitem {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: #cfe6f5;
text-decoration: none;
text-align: center;
}
.rox-footer__navicon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
/* border: 1px solid rgba(98, 201, 255, 0.4); */
border: 1px solid black;
border-radius: 50%;
color: #62c9ff;
font-size: 17px;
transition: border-color 160ms ease;
}
.rox-footer__navicon img {
display: block;
/* width: 26px; height: 26px; */
width: 44px; height: 44px;
object-fit: contain;
}
.rox-footer__navlabel {
font-size: 17px;
font-weight: 600;
color: orange;
}
.rox-footer__navsub {
color: #8fa3b1;
font-size: 12px;
}
.rox-footer__navitem:hover .rox-footer__navicon,
.rox-footer__navitem:focus-visible .rox-footer__navicon {
border-color: #ffb52e;
color: #ffb52e;
}
/* ==================================================
NETWORK SECTION
================================================== */
.rox-footer__network {
flex: 0 0 auto;
}
/* ==================================================
LINK EFFECTS
================================================== */
.rox-footer__bottom a {
transition:
color 160ms ease,
text-shadow 160ms ease;
}
.rox-footer__bottom a:hover,
.rox-footer__bottom a:focus-visible {
color: #ffb52e;
text-shadow: 0 0 10px rgba(255, 181, 46, 0.35);
}
.rox-footer a:focus-visible {
outline: 2px solid #ffb52e;
outline-offset: 5px;
border-radius: 3px;
}
/* ==================================================
BOTTOM FOOTER STRIP
================================================== */
.rox-footer__bottom {
background: rgba(0, 8, 16, 0.78);
border-top: 1px solid #1688c4;
}
.rox-footer__bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
width: min(1400px, calc(100% - 70px));
min-height: 46px;
margin: 0 auto;
}
.rox-footer__copyright {
color: #8fa3b1;
font-size: 15px;
}
/* ==================================================
TABLET
================================================== */
@media (max-width: 1050px) {
.rox-footer__main {
flex-direction: column;
gap: 28px;
}
.rox-footer__divider {
width: 100%;
height: 1px;
}
/* At this width, JS moves the single nav