*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Figtree,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-x-0{left:0;right:0}.inset-x-3{left:.75rem;right:.75rem}.bottom-3{bottom:.75rem}.left-2{left:.5rem}.right-1{right:.25rem}.right-2{right:.5rem}.top-0{top:0}.top-1\/2{top:50%}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.col-span-2{grid-column:span 2/span 2}.\!m-0{margin:0!important}.-mx-4{margin-left:-1rem;margin-right:-1rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-2\.5{margin-top:.625rem;margin-bottom:.625rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.\!mb-0{margin-bottom:0!important}.\!mb-1{margin-bottom:.25rem!important}.\!mt-0{margin-top:0!important}.-ml-2{margin-left:-.5rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.hidden{display:none}.aspect-\[1408\/768\]{aspect-ratio:1408/768}.aspect-\[2712\/832\]{aspect-ratio:2712/832}.h-11{height:2.75rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-40{height:10rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-auto{height:auto}.h-full{height:100%}.max-h-40{max-height:10rem}.max-h-\[340px\]{max-height:340px}.\!min-h-0{min-height:0!important}.min-h-\[200px\]{min-height:200px}.min-h-\[28px\]{min-height:28px}.min-h-\[300px\]{min-height:300px}.min-h-\[34px\]{min-height:34px}.w-11{width:2.75rem}.w-12{width:3rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-2\/5{width:40%}.w-24{width:6rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-full{width:100%}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-6xl{max-width:72rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-none{flex:none}.table-fixed{table-layout:fixed}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-start{scroll-snap-align:start}.\!list-none{list-style-type:none!important}.list-disc{list-style-type:disc}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-\[1\.05rem\]{border-radius:1.05rem}.rounded-\[1\.5rem\]{border-radius:1.5rem}.rounded-\[1\.75rem\]{border-radius:1.75rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.bg-slate-50\/60{background-color:rgba(248,250,252,.6)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.\!px-2\.5{padding-left:.625rem!important;padding-right:.625rem!important}.\!px-3{padding-left:.75rem!important;padding-right:.75rem!important}.\!px-3\.5{padding-left:.875rem!important;padding-right:.875rem!important}.\!px-4{padding-left:1rem!important;padding-right:1rem!important}.\!px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}.\!py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.\!py-1\.5{padding-top:.375rem!important;padding-bottom:.375rem!important}.\!py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.\!py-2\.5{padding-top:.625rem!important;padding-bottom:.625rem!important}.\!py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.\!pl-0{padding-left:0!important}.pb-12{padding-bottom:3rem}.pb-16{padding-bottom:4rem}.pb-28{padding-bottom:7rem}.pb-4{padding-bottom:1rem}.pl-5{padding-left:1.25rem}.pr-10{padding-right:2.5rem}.pr-12{padding-right:3rem}.pr-6{padding-right:1.5rem}.pr-8{padding-right:2rem}.pt-10{padding-top:2.5rem}.pt-14{padding-top:3.5rem}.pt-2\.5{padding-top:.625rem}.pt-3{padding-top:.75rem}.pt-6{padding-top:1.5rem}.pt-\[calc\(4\.75rem\+var\(--safe-t\)\)\]{padding-top:calc(4.75rem + var(--safe-t))}.pt-\[calc\(4rem\+var\(--safe-t\)\)\]{padding-top:calc(4rem + var(--safe-t))}.pt-\[calc\(5rem\+var\(--safe-t\)\)\]{padding-top:calc(5rem + var(--safe-t))}.text-left{text-align:left}.text-center{text-align:center}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.font-display{font-family:Bricolage Grotesque,Figtree,system-ui,sans-serif}.\!text-2xl{font-size:1.5rem!important;line-height:2rem!important}.\!text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.\!text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[clamp\(2\.1rem\2c 8vw\2c 4\.5rem\)\]{font-size:clamp(2.1rem,8vw,4.5rem)}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.\!font-normal{font-weight:400!important}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.leading-\[1\.02\]{line-height:1.02}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-wide{letter-spacing:.025em}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\[overflow-wrap\:anywhere\]{overflow-wrap:anywhere}.last\:border-0:last-child{border-width:0}.hover\:bg-emerald-600:hover{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.hover\:bg-pink-600:hover{--tw-bg-opacity:1;background-color:rgb(219 39 119/var(--tw-bg-opacity,1))}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:640px){.sm\:mt-20{margin-top:5rem}.sm\:mt-8{margin-top:2rem}.sm\:block{display:block}.sm\:inline-block{display:inline-block}.sm\:hidden{display:none}.sm\:max-h-\[380px\]{max-height:380px}.sm\:min-h-\[420px\]{min-height:420px}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:gap-x-12{-moz-column-gap:3rem;column-gap:3rem}.sm\:gap-y-8{row-gap:2rem}.sm\:p-5{padding:1.25rem}.sm\:p-6{padding:1.5rem}.sm\:p-7{padding:1.75rem}.sm\:p-8{padding:2rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:py-20{padding-top:5rem;padding-bottom:5rem}.sm\:pb-24{padding-bottom:6rem}.sm\:pt-12{padding-top:3rem}.sm\:pt-20{padding-top:5rem}.sm\:pt-28{padding-top:7rem}.sm\:pt-36{padding-top:9rem}.sm\:\!text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.sm\:\!text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:sticky{position:sticky}.md\:top-24{top:6rem}.md\:col-span-1{grid-column:span 1/span 1}.md\:mx-0{margin-left:0;margin-right:0}.md\:flex{display:flex}.md\:max-h-\[460px\]{max-height:460px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:gap-10{gap:2.5rem}.md\:gap-4{gap:1rem}.md\:overflow-y-auto{overflow-y:auto}.md\:rounded-\[2rem\]{border-radius:2rem}.md\:px-0{padding-left:0;padding-right:0}}@media (min-width:1024px){.lg\:row-span-2{grid-row:span 2/span 2}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:inline-flex{display:inline-flex}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-\[1\.05fr_1fr\]{grid-template-columns:1.05fr 1fr}.lg\:grid-cols-\[1\.4fr_1fr\]{grid-template-columns:1.4fr 1fr}.lg\:self-start{align-self:flex-start}.lg\:self-end{align-self:flex-end}.lg\:pb-20{padding-bottom:5rem}} /* Joyride custom styles (custom.css) */ @font-face{ font-family:'Google Sans Normal'; font-style:normal; font-weight:400 500; font-display:swap; src:local('Google Sans Normal'), local('Google Sans Regular'), local('Google Sans'), local('Product Sans'), local('Inter'); } @font-face{ font-family:'Google Sans Normal'; font-style:normal; font-weight:600 900; font-display:swap; src:local('Google Sans Bold'), local('Google Sans Medium'), local('Product Sans Bold'), local('Inter Bold'), local('Inter-Bold'), local('SFProDisplay-Bold'); } :root{ --bg:#f4f6fb; --paper:#f4f6fb; --surface:#ffffff; --card:#ffffff; --ink:#131a2b; --ink-soft:#2e3856; --muted:#525b6e; --line:#e3e7f0; --brand:#5338e6; --brand-ink:#5338e6; --violet:#5338e6; --violet-d:#4328d6; --violet-t:#eeeaff; --violet-ink:#3a2aa6; --violet-grad:linear-gradient(135deg,#664aff 0%,#5338e6 55%,#4429d6 100%); --violet-grad-d:linear-gradient(135deg,#5a3df0 0%,#482de0 55%,#3b21c9 100%); --leaf:#126b42; --leaf-t:#e3f6ec; --leaf-ink:#0f5c3a; --ok:#126b42; --sun:#8a4d00; --sun-t:#fff1dc; --sun-ink:#5a3a0d; --rose:#be123c; --rose-t:#ffe4e6; --rose-ink:#881337; --font-brand:'Google Sans Normal','Google Sans','Product Sans','Inter','SF Pro Display','San Francisco',-apple-system,BlinkMacSystemFont,'Roboto','Open Sans',sans-serif; --font-display:'Google Sans Normal','Google Sans','SF Pro Display','San Francisco',-apple-system,BlinkMacSystemFont,'Inter','Roboto',sans-serif; --font-sans:'Inter','SF Pro Text','San Francisco',-apple-system,BlinkMacSystemFont,'Roboto','Open Sans',system-ui,sans-serif; --font-editorial:'Open Sans','Inter','Roboto','SF Pro Text','San Francisco',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --font-data:'Roboto','Inter','SF Pro Text','San Francisco',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --tab-h:4.3rem; } :root[data-theme="dark"]{ color-scheme:dark; --bg:#0f172a; --paper:#0f172a; --surface:#1e293b; --card:#293548; --ink:#e5e7eb; --ink-soft:#f3f4f6; --muted:#cbd5e1; --line:#64748b; --brand:#c4b5fd; --brand-ink:#ede9fe; --violet:#c4b5fd; --violet-d:#f5f3ff; --violet-t:#3b2d72; --violet-ink:#f5f3ff; --leaf:#6ee7b7; --leaf-t:#144636; --leaf-ink:#d1fae5; --ok:#6ee7b7; --sun:#fde68a; --sun-t:#4a3210; --sun-ink:#fef3c7; --rose:#fda4af; --rose-t:#4c162c; --rose-ink:#ffe4e6; } :root[data-theme="dark"][data-contrast="high"]{ color-scheme:dark; --bg:#000000; --paper:#000000; --surface:#0a0a0a; --card:#111111; --ink:#ffffff; --ink-soft:#ffffff; --muted:#fef08a; --line:#ffffff; --brand:#facc15; --brand-ink:#fde047; --violet:#facc15; --violet-d:#fde047; --violet-t:#262005; --violet-ink:#fde047; --violet-grad:linear-gradient(135deg,#fde047 0%,#facc15 100%); --violet-grad-d:linear-gradient(135deg,#facc15 0%,#eab308 100%); --leaf:#4ade80; --leaf-t:#052e16; --leaf-ink:#bbf7d0; --ok:#4ade80; --sun:#fde047; --sun-t:#262005; --sun-ink:#fef08a; --rose:#fda4af; --rose-t:#3b0a18; --rose-ink:#ffe4e6; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:calc(5rem + var(--safe-t)); -webkit-text-size-adjust:100%; } body{ font-family:var(--font-sans); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; -webkit-tap-highlight-color:transparent; touch-action:manipulation; min-height:100dvh; overflow-x:hidden; } @supports (overflow:clip){ body{ overflow-x:clip; } } img,video,iframe{ max-width:100%; } img{ height:auto; } h1,h2,h3,.font-display{ font-family:var(--font-display); letter-spacing:-.02em; overflow-wrap:anywhere; } :root[data-theme="dark"] :is(h1,h2,h3,.font-display,.g-card-title,.reco-title,.jr-related-title,.author-card-name){ color:#ffffff; } .jr-brand-mark,[data-brand-mark],.jr-brand-mark *,[data-brand-mark] *{ font-family:var(--font-brand) !important; font-style:normal; font-weight:400 !important; letter-spacing:-.015em; } .faq-q-inline{ display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; gap:.28rem; vertical-align:middle !important; line-height:1.25 !important; flex-wrap:wrap; } .faq-q-inline > span{ display:inline-flex !important; align-items:center !important; line-height:1.25 !important; vertical-align:middle !important; } .jr-brand-inline{ display:inline-flex !important; align-items:center !important; justify-content:center; gap:.26rem; vertical-align:middle !important; line-height:1.25 !important; color:var(--ink); white-space:nowrap; } .jr-brand-inline-words, .jr-brand-inline > span{ display:inline-flex !important; align-items:center !important; gap:.22rem; line-height:1.25 !important; vertical-align:middle !important; } .jr-brand-inline-words > span{ display:inline-flex !important; align-items:center !important; line-height:1.25 !important; vertical-align:middle !important; } .jr-brand-inline picture{ display:inline-flex !important; align-items:center !important; justify-content:center; line-height:1 !important; margin:0 !important; vertical-align:middle !important; } .jr-brand-inline-logo, .jr-brand-inline img{ width:1.15em !important; height:1.15em !important; max-width:none !important; flex:none; display:block !important; margin:0 !important; vertical-align:middle !important; object-fit:contain; } .prose-j,.g-card-sum,.jr-explorer-popup-sum{ font-family:var(--font-editorial); } .jr-metrics,.wx-box,.good-time-card,.route-stats-strip,.jr-chart{ font-family:var(--font-data); font-variant-numeric:tabular-nums; } [hidden]{ display:none !important; } :focus-visible{ outline:3px solid rgba(106,76,255,.45); outline-offset:2px; border-radius:6px; } :root[data-theme="dark"] :focus-visible{ outline:2.5px solid #ede9fe; outline-offset:2px; box-shadow:0 0 0 4px rgba(196,181,253,.32); } :root[data-theme="dark"][data-contrast="high"] :focus-visible{ outline:3px solid #facc15 !important; outline-offset:2px; box-shadow:0 0 0 5px rgba(250,204,21,.4) !important; } [tabindex="-1"]:focus{ outline:none; } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} } .topbar{ padding-top:var(--safe-t); background:rgba(244,246,251,.85); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line); } :root[data-theme="dark"] .topbar{ background:rgba(15,23,42,.92); border-bottom-color:#334155; } :root[data-theme="dark"][data-contrast="high"] .topbar{ background:#000000; border-bottom:2px solid #ffffff; } .navlink{ position:relative; padding:.35rem 0; color:var(--muted); font-weight:500; font-size:.92rem; } .navlink:hover,.navlink[aria-current]{ color:var(--ink); } .navlink[aria-current]::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--violet); border-radius:2px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.5rem; border-radius:.65rem; font-weight:700; transition:background .15s, transform .15s; -webkit-user-select:none; user-select:none; } /* Purple buttons use a subtle gradient instead of a flat fill */ .btn-primary{ background:var(--violet-grad); color:#fff; box-shadow:0 8px 20px -8px rgba(106,76,255,.7), inset 0 1px 0 rgba(255,255,255,.18); } .btn-primary:hover{ background:var(--violet-grad-d); } .btn-primary:disabled{ opacity:.65; cursor:wait; } .btn-ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--line); } .btn-amz{ background:var(--ink); color:var(--surface); } .btn-amz:hover{ opacity:.92; } .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; border-radius:.6rem; color:var(--ink); } .icon-btn:hover{ background:color-mix(in srgb,var(--ink) 8%,transparent); } footer .text-slate-500{ color:#94a3b8; } .btn:active,.tile:active,.chip span:active,.tabbar a:active,.tabbar button:active{ transform:scale(.97); } .field{ width:100%; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:.65rem; background:var(--surface); color:var(--ink); font-size:1rem; } .field::placeholder{ color:var(--muted); opacity:.75; } .field:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 4px rgba(106,76,255,.14); } .field-label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.35rem; } .chip-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; } .chip-row[data-vibe-chips]{ grid-template-columns:repeat(2,minmax(0,1fr)); } @media (min-width:520px){ .chip-row[data-vibe-chips]{ grid-template-columns:repeat(4,minmax(0,1fr)); } } .chip{ position:relative; min-width:0; } .chip input{ position:absolute; opacity:0; pointer-events:none; } .chip span{ display:flex; width:100%; align-items:center; justify-content:center; gap:.35rem; min-height:44px; padding:.55rem .4rem; border-radius:.6rem; border:1.5px solid var(--line); background:var(--surface); color:var(--muted); font-size:.88rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .15s; -webkit-user-select:none; user-select:none; } .chip input:focus-visible + span{ outline:3px solid rgba(106,76,255,.45); outline-offset:2px; } .chip input:checked + span{ color:#fff; border-color:transparent; background:var(--violet-grad); } /* "Install the app" card for returning visitors (non-blocking; see INSTALLABLE APP in the script) */ .install-card{ position:fixed; z-index:65; left:50%; bottom:calc(1.25rem + var(--safe-b)); translate:-50% 0; width:min(27rem,calc(100% - 1.5rem)); display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1rem 1.1rem; border-radius:1.3rem; background:var(--surface); border:1px solid var(--line); box-shadow:0 26px 50px -22px rgba(19,26,43,.5); animation:installIn .4s cubic-bezier(.2,.7,.2,1); } .install-card[hidden]{ display:none; } .install-card .install-x{ position:absolute; top:.45rem; right:.45rem; width:2.25rem; height:2.25rem; display:flex; align-items:center; justify-content:center; border-radius:999px; color:var(--muted); } .install-card .install-x:hover{ background:var(--card); } @keyframes installIn{ from{ opacity:0; translate:-50% 24px; } } @media (max-width:1023px){ .install-card{ bottom:calc(var(--tab-h) + var(--safe-b) + .6rem); } } .chip[data-tone=leaf] input:checked + span{ background:#126b42; color:#fff; } .chip[data-tone=sky] input:checked + span{ background:linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%) !important; color:#fff !important; } .chip[data-tone=sun] input:checked + span{ background:#9a5200; color:#fff; } .chip[data-tone=rose] input:checked + span{ background:#be123c; color:#fff; } .chip.chip-ink input:checked + span{ background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%) !important; color:#fff !important; } .sugg{ position:absolute; left:0; right:0; top:calc(100% + .35rem); z-index:30; background:var(--surface); border:1px solid var(--line); border-radius:.9rem; box-shadow:0 18px 40px -14px rgba(19,26,43,.3); max-height:15rem; overflow:auto; padding:.3rem; } .sugg li{ display:flex; gap:.6rem; align-items:center; min-height:44px; padding:.6rem .7rem; border-radius:.6rem; cursor:pointer; font-size:.92rem; color:var(--ink-soft); } .sugg li:hover,.sugg li.active{ background:var(--violet-t); color:var(--violet-d); } .panel{ background:var(--surface); border:1px solid var(--line); border-radius:1.75rem; box-shadow:0 24px 60px -28px rgba(40,30,110,.35); } .tile{ background:var(--surface); border:1px solid var(--line); border-radius:1.1rem; } .msg{ display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; border-radius:.85rem; font-size:.9rem; font-weight:500; background:var(--violet-t); color:var(--violet-d); } .msg[data-type=error]{ background:#fde8e8; color:#a31d1d; } :root[data-theme="dark"] .msg[data-type=error]{ background:#3b1822; color:#fca5a5; } .msg[data-type=success]{ background:var(--leaf-t); color:var(--ok); } .spinner{ width:18px; height:18px; border-radius:50%; border:3px solid rgba(106,76,255,.2); border-left-color:var(--violet); animation:spin .8s linear infinite; flex:none; } @keyframes spin{ to{ transform:rotate(360deg) } } #planJourneySection{ overflow:hidden; } @supports (overflow:clip){ #planJourneySection{ overflow:clip; } } .plan-form > * + *{ margin-top:1rem; } .route-line{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .route-dash{ stroke-dasharray:3 14; stroke-linecap:round; animation:march 1.6s linear infinite; } @keyframes march{ to{ stroke-dashoffset:-34 } } .aff-disclosure{ display:flex; gap:.55rem; align-items:flex-start; max-width:52rem; padding:.65rem .9rem; border-radius:.9rem; background:var(--surface); border:1px solid var(--line); color:var(--muted); font-size:.8rem; line-height:1.5; } .aff-disclosure svg{ margin-top:.15rem; color:var(--sun); } .aff-disclosure strong{ color:var(--ink); } /* ---------- Gear: shelf filters + product cards ---------- */ .gear-hero{ position:relative; padding:1.5rem 0 0; } .gear-filters{ display:flex; gap:.5rem; margin-top:1.25rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:.15rem; } .gear-filters::-webkit-scrollbar{ display:none; } .gear-filter{ flex:none; padding:.5rem 1rem; border-radius:.6rem; border:1px solid var(--line); background:var(--surface); font-size:.875rem; font-weight:700; color:var(--ink); transition:background .15s, border-color .15s, color .15s; } .gear-filter:hover{ border-color:#cfc6ff; } .gear-filter[aria-pressed="true"]{ background:var(--violet-grad); border-color:transparent; color:#fff; box-shadow:0 8px 18px -10px rgba(106,76,255,.7); } .gear-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; } @media (min-width:640px){ .gear-grid{ gap:1.25rem; } } @media (min-width:1024px){ .gear-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (min-width:1280px){ .gear-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } } .gear-card{ position:relative; display:flex; flex-direction:column; min-width:0; border-radius:1.35rem; background:var(--surface); border:1px solid var(--line); overflow:hidden; transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s; } .gear-card[hidden]{ display:none; } .gear-card:hover{ transform:translateY(-4px); border-color:#ddd6ff; box-shadow:0 24px 44px -26px rgba(40,30,110,.45); } .gear-card-link{ display:flex; flex:1; flex-direction:column; color:inherit; } .gear-card-media{ position:relative; display:flex; align-items:center; justify-content:center; height:9.5rem; margin:.5rem .5rem 0; border-radius:1rem; background:radial-gradient(circle at 50% 38%,var(--surface) 0,var(--card) 72%); overflow:hidden; } @media (min-width:640px){ .gear-card-media{ height:13rem; margin:.6rem .6rem 0; } } .gear-card-media .gear-card-img{ width:82%; height:82%; object-fit:contain; mix-blend-mode:multiply; transition:transform .45s cubic-bezier(.2,.7,.2,1); } .gear-card:hover .gear-card-img{ transform:scale(1.07); } .gear-card-media .gear-ph{ min-height:0; height:100%; background:none; } .gear-card-cat{ position:absolute; left:.5rem; top:.5rem; padding:.2rem .55rem; border-radius:999px; background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(6px); font-size:.75rem; font-weight:700; color:var(--ink); box-shadow:0 2px 8px -4px rgba(19,26,43,.25); } .gear-card-body{ display:flex; flex:1; flex-direction:column; padding:.75rem .85rem .25rem; } @media (min-width:640px){ .gear-card-body{ padding:1rem 1.1rem .35rem; } } .gear-card-brand{ font-size:.75rem; font-weight:700; text-transform:none; letter-spacing:.01em; color:var(--violet); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gear-card-title{ margin-top:.2rem; font-size:.9rem; font-weight:800; line-height:1.3; letter-spacing:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } @media (min-width:640px){ .gear-card-title{ font-size:1.02rem; } } .gear-card-take{ display:none; margin-top:.3rem; font-size:.82rem; line-height:1.45; color:var(--muted); -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } @media (min-width:640px){ .gear-card-take{ display:-webkit-box; } } .gear-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem .85rem 0; } @media (min-width:640px){ .gear-card-foot{ padding:.75rem 1.1rem 0; } } .gear-card-more{ display:none; align-items:center; gap:.25rem; font-size:.85rem; font-weight:700; color:var(--violet); } .gear-card-more svg{ transition:transform .2s; } .gear-card:hover .gear-card-more svg{ transform:translateX(3px); } @media (min-width:640px){ .gear-card-more{ display:inline-flex; } } .gear-card-amz{ display:inline-flex; flex:1; align-items:center; justify-content:center; gap:.35rem; min-height:2.5rem; padding:.45rem .9rem; border-radius:999px; background:var(--card); color:var(--ink); font-size:.85rem; font-weight:700; transition:background .15s, color .15s; } @media (min-width:640px){ .gear-card-amz{ flex:none; } } .gear-card-amz:hover{ background:var(--ink); color:var(--surface); } .gear-card-aff{ padding:.3rem .85rem .75rem; font-size:.75rem; color:var(--muted); text-align:center; } @media (min-width:640px){ .gear-card-aff{ padding:.35rem 1.1rem .9rem; text-align:right; } } #productView .prod-media{ border-radius:1.5rem; background:radial-gradient(circle at 50% 40%,var(--surface) 0,var(--card) 75%); } #productView #prodMainImg{ mix-blend-mode:multiply; } .gear-card.w-56 .gear-card-media{ height:9rem; } .aff-note{ font-size:.75rem; color:var(--muted); text-align:center; } /* Ads: collapsed until AdSense reports "filled"; unfilled slots are hidden */ .ad-wrap{ max-width:72rem; margin:0 auto; padding:0 1rem; } .ad-wrap.is-filled{ padding:1.5rem 1rem; } .prose-j .ad-wrap{ padding-left:0; padding-right:0; margin:2rem 0; } .ad-label{ display:none; text-align:center; font-size:.75rem; letter-spacing:.02em; text-transform:none; color:var(--muted); margin-bottom:.4rem; } .ad-wrap.is-filled .ad-label{ display:block; } .ad-wrap ins.adsbygoogle[data-ad-status="unfilled"]{ display:none !important; } /* Articles */ .prose-j{ color:var(--muted); font-size:1.05rem; line-height:1.78; } .prose-j h1{ color:var(--ink); font-size:2.25rem; font-weight:800; line-height:1.12; margin-top:.5rem; } .prose-j h2{ color:var(--ink); font-size:1.45rem; font-weight:800; margin:2.25rem 0 .6rem; line-height:1.22; } .prose-j h3{ color:var(--ink); font-size:1.15rem; font-weight:700; margin:1.5rem 0 .4rem; } .prose-j > p, .prose-j > ul, .prose-j > ol, .prose-j > .tip{ max-width:66ch; } #pageShell.max-w-6xl .prose-j > p, #pageShell.max-w-6xl .prose-j > ul, #pageShell.max-w-6xl .prose-j > ol, #pageShell.max-w-6xl .prose-j > .tip{ max-width:100%; } @media (min-width:1024px){ #pageShell.max-w-6xl, #siteNav > div.max-w-6xl, #homeView > .max-w-6xl{ max-width:78rem !important; padding-left:2.25rem; padding-right:2.25rem; } article[data-page-content="guides"]{ padding-left:1.25rem; padding-right:1.25rem; } } @media (min-width:1440px){ #pageShell.max-w-6xl, #siteNav > div.max-w-6xl, #homeView > .max-w-6xl{ max-width:82rem !important; padding-left:2.75rem; padding-right:2.75rem; } article[data-page-content="guides"]{ padding-left:1.5rem; padding-right:1.5rem; } } .prose-j p + p{ margin-top:1.05rem; } .prose-j .jr-photo + p, .prose-j .jr-photo + ul, .prose-j .jr-photo + .tip{ margin-top:1.15rem; } .prose-j ul{ list-style:disc; padding-left:1.25rem; margin-top:.85rem; } .prose-j li{ margin-top:.4rem; } .prose-j a{ color:var(--violet); font-weight:600; text-decoration:underline; } .prose-j strong{ color:var(--ink); } .prose-j figure{ margin:1.75rem 0; } .prose-j figure:not(.jr-photo-hero) img:not(.jr-byline-avatar){ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:1.25rem; background:var(--card); } .prose-j figcaption{ margin-top:.5rem; font-size:.85rem; text-align:center; } .kicker{ font-size:.75rem; font-weight:700; text-transform:none; letter-spacing:.01em; } .uppercase{ text-transform:none !important; letter-spacing:.01em !important; } .byline{ margin-top:.75rem; font-size:.85rem; } .tip{ margin:1.5rem 0; padding:1rem 1.15rem; border-left:4px solid var(--violet); border-radius:.75rem; background:var(--violet-t); color:var(--violet-ink); font-size:.98rem; line-height:1.6; } .tip strong{ color:var(--ink); } .faq details{ background:var(--surface); border:1px solid var(--line); border-radius:1rem; padding:1rem 1.1rem; } .faq summary{ position:relative; cursor:pointer; font-weight:700; list-style:none; display:flex; align-items:center; justify-content:flex-start; gap:.28rem; min-height:1.5rem; padding-right:2rem; line-height:1.35; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.3rem; line-height:1; color:var(--violet); } .faq details[open] summary::after{ content:"–"; } .faq details p{ margin-top:.6rem; color:var(--muted); line-height:1.65; } /* Static (no-JS) product cards */ .static-card{ display:flex; flex-direction:column; gap:.5rem; padding:1rem; background:var(--surface); border:1px solid var(--line); border-radius:1.1rem; } .static-card img{ height:8rem; width:100%; object-fit:contain; } .static-card h3{ font-size:.95rem; font-weight:700; letter-spacing:0; } .static-card p{ font-size:.85rem; color:var(--muted); line-height:1.5; } .static-card a{ margin-top:auto; font-weight:700; color:var(--violet); text-decoration:underline; font-size:.9rem; } .scrim{ position:fixed; inset:0; z-index:55; background:rgba(19,26,43,.45); opacity:0; pointer-events:none; transition:opacity .25s; } .scrim.open{ opacity:1; pointer-events:auto; } .drawer{ position:fixed; top:0; right:0; bottom:0; width:min(22rem,88vw); z-index:60; background:var(--surface); padding:calc(1.25rem + var(--safe-t)) 1.25rem calc(1.25rem + var(--safe-b)); display:flex; flex-direction:column; gap:.25rem; overflow:auto; overscroll-behavior:contain; transform:translateX(100%); visibility:hidden; transition:transform .02s ease, visibility 0s .02s; box-shadow:-20px 0 50px -20px rgba(19,26,43,.35); } .drawer.open{ transform:none; visibility:visible; transition:transform .02s ease, visibility 0s; } .dlink{ display:flex; align-items:center; gap:.75rem; padding:.75rem .5rem; border-radius:.6rem; font-weight:600; color:var(--ink); text-align:left; width:100%; } .dlink:hover,.dlink[aria-current]{ background:var(--violet-t); color:var(--violet-d); } .modal{ position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(19,26,43,.55); backdrop-filter:blur(4px); animation:fadeIn .18s ease-out; } .modal-panel{ position:relative; width:100%; max-width:44rem; max-height:92vh; overflow:auto; overscroll-behavior:contain; background:var(--surface); border-radius:1.5rem; padding:1.5rem; box-shadow:0 30px 80px -20px rgba(19,26,43,.5); } .modal-panel.narrow{ max-width:26rem; } .modal-x{ position:absolute; top:.9rem; right:.9rem; z-index:4; } .route-top-grid{ display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:.85rem; align-items:center; margin-bottom:.75rem; } .route-top-left{ min-width:0; display:flex; flex-direction:column; justify-content:center; gap:.25rem; } .route-metrics-stack{ display:inline-grid; grid-template-columns:max-content; max-width:100%; gap:.45rem; } .route-stats-row{ display:flex; flex-wrap:nowrap; align-items:center; gap:.4rem; white-space:nowrap; } .route-stats-row > span{ flex:none; white-space:nowrap; } .route-metrics-stack > #routeWeather{ width:0; min-width:100%; box-sizing:border-box; overflow:hidden; } .route-top-right{ min-width:0; height:100%; display:flex; align-items:center; justify-content:center; } #mapCanvas{ width:100%; height:100%; min-height:178px; max-height:215px; margin:auto; border-radius:.95rem; border:1px solid var(--line); background:var(--card); } .route-customize-section{ margin:0 0 .85rem; padding:.7rem .85rem; border-radius:1.05rem; border:1.5px solid color-mix(in srgb,var(--violet) 28%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--violet-t) 42%,var(--surface)) 0%,var(--surface) 100%); display:grid; grid-template-columns:minmax(0,1fr); gap:.45rem; min-width:0; max-width:100%; box-sizing:border-box; } .route-customize-section > *{ min-width:0; max-width:100%; } .route-customize-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.15rem .65rem; padding-bottom:.35rem; border-bottom:1px solid var(--line); } .route-customize-title{ margin:0; display:inline-flex; align-items:center; gap:.4rem; font:800 .94rem/1.25 var(--font-display); color:var(--ink); letter-spacing:-.01em; } .route-customize-title svg{ color:var(--violet); } .route-customize-sub{ margin:0; font-size:.76rem; font-weight:600; color:var(--muted); line-height:1.3; } .sheet-actions{ position:sticky; bottom:0; background:var(--surface); padding-top:.75rem; } .thumb{ width:64px; height:64px; flex:none; padding:.3rem; background:var(--surface); border:2px solid var(--line); border-radius:.8rem; display:flex; align-items:center; justify-content:center; } .thumb.active{ border-color:var(--violet); } .thumb img{ max-width:100%; max-height:100%; object-fit:contain; } .hide-scrollbar::-webkit-scrollbar{ display:none; } .hide-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; } .toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(1.25rem + var(--safe-b)); z-index:80; background:var(--ink); color:var(--surface); padding:.7rem 1.1rem; border-radius:999px; font-weight:600; font-size:.9rem; box-shadow:0 12px 30px -10px rgba(0,0,0,.4); animation:fadeIn .2s; max-width:calc(100vw - 2rem); } /* View transitions: re-triggered by the router on every page change */ .view-enter{ animation:viewIn .24s ease-out; } @keyframes viewIn{ from{ transform:translateY(8px) } } @keyframes fadeIn{ from{ opacity:1 } } @keyframes sheetUp{ from{ transform:translateY(100%) } } .tabbar,.buybar{ display:none; } html.standalone body{ overscroll-behavior-y:contain; } @media (max-width:1023px){ :root{ --tab-h:3.45rem; } #backToGearBtn,#prodBuyBtn,#prodBuyNote{ display:none; } footer{ padding-bottom:calc(var(--tab-h) + var(--safe-b)); } #cookieBanner{ top:auto !important; bottom:calc(var(--tab-h) + var(--safe-b) + .4rem) !important; left:.6rem; right:.6rem; padding:.65rem .8rem; border-radius:1rem; } #cookieBanner p{ font-size:.75rem; line-height:1.35; } #cookieBanner #cookieText{ margin-top:.2rem; } #cookieBanner > .grid{ margin-top:.45rem; } #cookieBanner .btn{ min-height:34px; padding:.3rem .7rem !important; font-size:.78rem; } #cookieBanner > .mt-2{ margin-top:.3rem; } #cookieCustomise{ font-size:.75rem; } .toast{ bottom:calc(var(--tab-h) + var(--safe-b) + .6rem); } #planJourneySection{ padding-bottom:calc(var(--tab-h) + var(--safe-b) + 1rem); } .plan-cta{ position:relative; z-index:6; } .tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; gap:.15rem; padding:.22rem .4rem calc(.22rem + var(--safe-b)); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border-top:1px solid var(--line); } .tabbar a,.tabbar button{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.12rem; min-height:2.75rem; border-radius:.7rem; font-size:.75rem; font-weight:600; color:var(--muted); } .tabbar svg{ width:1.22rem; height:1.22rem; } .tabbar [aria-current]{ color:var(--violet); background:var(--violet-t); } .tab-badge{ position:absolute; top:.15rem; right:22%; min-width:1rem; height:1rem; padding:0 .22rem; border-radius:999px; background:#6a4cff; color:#fff; font-size:.75rem; line-height:1rem; text-align:center; } body[data-view=product] .tabbar{ display:none; } body[data-view=product] .buybar{ display:flex; align-items:center; gap:.75rem; position:fixed; left:0; right:0; bottom:0; z-index:45; padding:.7rem 1rem calc(.7rem + var(--safe-b)); background:color-mix(in srgb,var(--surface) 96%,transparent); backdrop-filter:blur(16px); border-top:1px solid var(--line); } body[data-view=product] footer{ padding-bottom:calc(5.5rem + var(--safe-b)); } } @media (max-width:639px){ #siteNav > div{ height:3.25rem; } #planJourneySection{ padding-top:calc(3.35rem + var(--safe-t)) !important; } #planJourneySection > div{ gap:.3rem; } .hero-tagline,.hero-extra{ display:none !important; } .hero-title{ font-size:clamp(1.25rem,5.2vw,1.5rem); line-height:1.12; } #planJourneySection .panel{ padding:.6rem .8rem; border-radius:1.15rem; } #planJourneySection .panel h2{ font-size:.95rem; margin-bottom:.25rem; } .plan-sub{ display:none; } .plan-form > * + *{ margin-top:.32rem; } .plan-form .field-label{ font-size:.75rem; margin-bottom:.1rem; } .plan-form .field{ padding:.42rem .7rem; font-size:.86rem; border-radius:.6rem; } .plan-form .chip span{ min-height:30px; padding:.22rem .3rem; font-size:.75rem; border-radius:.55rem; } #swapBtn{ margin:-13px 0; position:relative; z-index:2; } #planJourneyBtn{ min-height:44px; padding:.5rem 1rem; font-size:.92rem; margin-top:.35rem; } .drawer{ width:min(17.75rem,80vw); padding:calc(.65rem + var(--safe-t)) .85rem calc(.65rem + var(--safe-b)); gap:.1rem; } #drawer > div:first-child{ margin-bottom:.25rem !important; } #drawer .theme-pick{ margin-bottom:.25rem !important; padding:.15rem .25rem; } #drawer .theme-btn{ width:2rem; height:2rem; min-height:2rem; padding:0; } #drawer > .dlink{ padding:.38rem .55rem; font-size:.86rem; border-radius:.5rem; gap:.5rem; } #drawer > div:last-child{ padding-top:.35rem !important; margin-top:.25rem !important; display:grid; grid-template-columns:1fr 1fr; gap:.15rem .35rem; align-items:center; } #drawer > div:last-child .dlink{ padding:.28rem .45rem; font-size:.78rem; gap:.4rem; } #drawer > div:last-child > div{ grid-column:1 / -1; margin-top:.15rem !important; } .modal{ align-items:flex-end; padding:0; } .modal-panel,.modal-panel.narrow{ max-width:none; max-height:94dvh; border-radius:1.25rem 1.25rem 0 0; padding:.55rem .9rem 0; animation:sheetUp .28s cubic-bezier(.2,.8,.2,1); } .modal-panel::before{ content:""; display:block; width:2.2rem; height:.25rem; border-radius:.25rem; background:#d3d8e4; margin:0 auto .4rem; } .modal-x{ top:.45rem; right:.55rem; width:2.25rem; height:2.25rem; } .route-top-grid{ grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:.4rem; align-items:center; margin-bottom:.4rem; } .route-top-left{ gap:.18rem; } .route-metrics-stack{ gap:.3rem; } #routeTitle{ font-size:1.02rem; line-height:1.18; margin-bottom:.05rem; padding-right:1.5rem; } #routeSubtitle{ font-size:.75rem; margin-bottom:.12rem !important; line-height:1.22; } #routePreviewModal .mb-4{ margin-bottom:.35rem !important; } #routeStats{ gap:.22rem !important; font-size:.75rem !important; flex-wrap:nowrap !important; } #routeStats > span{ padding:.18rem .42rem !important; white-space:nowrap; } #routeWeather{ padding:.28rem .42rem !important; font-size:.75rem !important; } #routeWeather .wx-alert,#routeWeather .wx-note{ margin-top:.2rem; padding:.18rem .35rem; font-size:.75rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #routeWeather .wx-more{ margin-top:0; } #routeWeather .wx-more summary{ min-height:22px; padding:.04rem .08rem; font-size:.75rem; gap:.22rem; flex-wrap:nowrap; width:100%; } #routeWeather .wx-more-pill{ padding:.08rem .34rem; font-size:.75rem; white-space:nowrap; } #mapCanvas{ height:100%; min-height:126px; max-height:156px; border-radius:.75rem; margin:auto; } .route-customize-section{ margin:0 0 .45rem; padding:.45rem .55rem; border-radius:.85rem; gap:.3rem; } .route-customize-head{ padding-bottom:.22rem; gap:.1rem .4rem; } .route-customize-title{ font-size:.82rem; gap:.3rem; } .route-customize-sub{ font-size:.75rem; line-height:1.2; } #routeStops{ margin:.2rem 0 !important; } .sheet-actions{ padding:.45rem 0 calc(.55rem + var(--safe-b)); gap:.35rem !important; border-top:1px solid var(--line); } #startNavigationBtn{ min-height:40px; padding:.45rem 1rem; font-size:.9rem; } .sheet-actions .btn-ghost{ min-height:32px; padding:.25rem .5rem !important; font-size:.76rem; } .icon-btn{ width:2.5rem; height:2.5rem; } #menuBtn,#useMyLocationBtn{ width:2.75rem; height:2.75rem; } .chip span{ font-size:.75rem; } #productView .panel{ border:0; box-shadow:none; background:transparent; padding:0; } .prose-j{ font-size:.93rem; line-height:1.6; } .prose-j h1{ font-size:1.45rem; line-height:1.16; } [data-page-content="guides"] > h1,[data-page-content="ready-made-routes"] > h1{ font-size:1.6rem; line-height:1.15; } [data-page-content="guides"] > p:first-of-type,[data-page-content="ready-made-routes"] > p:first-of-type{ font-size:.9rem; line-height:1.45; margin-top:.35rem; } } @media (max-width:639px) and (max-height:760px){ .hero-title{ font-size:1.28rem; } #planJourneySection .panel h2{ font-size:.95rem; margin-bottom:.3rem; } .plan-form > * + *{ margin-top:.35rem; } } @media (max-width:639px) and (max-height:640px){ .hero-title{ font-size:1.2rem; } } /* Multi-page navigation (FULL_PAGE_NAV): smooth cross-page fade in browsers that support it (Chrome/Edge/Safari 18+) */ @media (prefers-reduced-motion:no-preference){ @view-transition{ navigation:auto; } } /* ---------- Image loading: shimmer while loading, fade in when ready, soft placeholder if it fails ---------- Any gets this. initImageSkeletons() (app script) adds .is-loaded / .is-failed. */ /* The build wraps images in (AVIF/WebP sources). display:contents keeps layout exactly as if the were still a direct child (sizing, absolute positioning, flex/grid). */ picture{ display:contents; } picture > source{ display:none; } /* never a box: otherwise they become flex/grid items and add gaps */ @keyframes skel{ to{ background-position:-200% 0 } } img[data-skel]{ background:linear-gradient(100deg,#e9edf5 30%,#f6f8fc 50%,#e9edf5 70%); background-size:200% 100%; animation:skel 1.3s linear infinite; color:transparent; } :root[data-theme="dark"] img[data-skel]{ background:linear-gradient(100deg,#152036 30%,#1e293b 50%,#152036 70%); background-size:200% 100%; } img[data-skel]:not(.is-loaded):not(.is-failed){ min-height:3rem; } img[data-skel].is-loaded{ background:none !important; animation:none !important; opacity:1 !important; } img[data-skel].is-failed{ animation:none; background:#eef1f7; object-fit:contain !important; } :root[data-theme="dark"] img[data-skel].is-failed{ background:#1e293b; } @keyframes imgIn{ from{ opacity:0 } } /* Gear placeholder (shown until a product has a self-hosted or SiteStripe image; Amazon photos are never hot-linked) */ .gear-ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:6rem; border-radius:.9rem; background:radial-gradient(circle at 30% 25%,var(--surface) 0,var(--violet-t) 70%); } .gear-ph svg{ width:3rem; height:3rem; color:var(--ink); opacity:.5; } .gear-ph-sm svg{ width:2.4rem; height:2.4rem; } .gear-ph-lg{ min-height:16rem; } .gear-ph-lg svg{ width:5.5rem; height:5.5rem; } /* Spec card (instead of product photos): shelf icon, brand and two key facts, in the shelf's colour */ .gear-spec{ flex-direction:column; gap:.35rem; padding:.75rem; text-align:center; color:var(--violet-d); background:radial-gradient(circle at 30% 20%,var(--surface) 0,var(--violet-t) 75%); } .gear-spec[data-tone=sun]{ color:var(--sun-ink); background:radial-gradient(circle at 30% 20%,var(--surface) 0,var(--sun-t) 75%); } .gear-spec[data-tone=leaf]{ color:var(--ok); background:radial-gradient(circle at 30% 20%,var(--surface) 0,var(--leaf-t) 75%); } .gear-spec[data-tone=ink]{ color:var(--ink); background:radial-gradient(circle at 30% 20%,var(--surface) 0,var(--card) 75%); } .gear-spec svg{ color:currentColor; opacity:.9; stroke-width:1.8; } .gear-spec-brand{ font:800 .95rem/1.15 var(--font-display); letter-spacing:-.01em; } .gear-spec-facts{ font-size:.75rem; font-weight:600; opacity:.85; line-height:1.3; } .gear-ph-lg .gear-spec-brand{ font-size:1.4rem; } .gear-ph-lg .gear-spec-facts{ font-size:.95rem; } .gear-card-media .gear-spec{ border-radius:.8rem; } .wx-ico{ flex:none; width:1.35rem; height:1.35rem; color:var(--ink); } /* Route preview weather: concise summary + "More weather" pill + Units selector in one compact row */ .wx-box{ position:relative; background:var(--card); border:1px solid var(--line); color:var(--ink); } .wx-summary{ display:inline-flex; align-items:center; gap:.35rem; font-weight:700; color:var(--ink); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wx-alert{ margin-top:.32rem; padding:.32rem .5rem; border-radius:.6rem; background:color-mix(in srgb,var(--surface) 75%,transparent); border:1px solid var(--line); color:var(--ink); font-weight:600; font-size:.76rem; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wx-note{ margin-top:.28rem; padding:.3rem .5rem; border-radius:.6rem; background:color-mix(in srgb,var(--surface) 65%,transparent); color:var(--ink); font-size:.76rem; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wx-link{ font-weight:700; color:var(--violet-d); text-decoration:underline; text-underline-offset:2px; } .wx-best{ margin-top:.3rem; font-weight:700; color:var(--ok); } .wx-dark{ margin-top:.28rem; } .wx-more{ margin-top:0; } .wx-more summary{ list-style:none; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:.4rem; width:100%; min-height:1.85rem; padding:.1rem .15rem; margin:0; border-radius:.5rem; font-size:.82rem; font-weight:700; color:var(--ink); cursor:pointer; -webkit-user-select:none; user-select:none; white-space:nowrap; } .wx-more summary::-webkit-details-marker{ display:none; } .wx-more-pill{ flex:none; display:inline-flex; align-items:center; gap:.22rem; padding:.14rem .48rem; border-radius:.5rem; background:var(--surface); border:1px solid var(--line); color:var(--ink); font-size:.75rem; font-weight:700; line-height:1.25; white-space:nowrap; transition:border-color .15s, color .15s; } .wx-more-pill:hover{ border-color:var(--violet); color:var(--violet-d); } .wx-more-pill::after{ content:"▾"; font-size:.75rem; color:var(--muted); transition:transform .15s; } .wx-more[open] .wx-more-pill::after{ transform:rotate(180deg); } .wx-more-body{ padding-top:.35rem; } .wx-tip{ margin-top:.3rem; font-size:.78rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wx-credit{ margin-top:.45rem; font-size:.75rem; color:var(--muted); } .wx-hours{ display:flex; gap:.35rem; margin:.6rem -.25rem 0; padding:0 .25rem .25rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; } .wx-hours::-webkit-scrollbar{ display:none; } .wx-h{ flex:none; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:.15rem; width:3.15rem; padding:.4rem .2rem .35rem; border-radius:.75rem; background:color-mix(in srgb,var(--surface) 72%,transparent); color:var(--ink); font-size:.75rem; line-height:1.1; text-align:center; } .wx-h .wx-ico{ width:1.15rem; height:1.15rem; color:currentColor; } .wx-h-time{ font-weight:700; } .wx-h-temp{ font-weight:700; color:var(--ink); } .wx-h-rain{ font-size:.75rem; opacity:.85; } .wx-rain{ display:block; width:80%; height:.22rem; border-radius:99px; background:color-mix(in srgb,var(--ink) 12%,transparent); overflow:hidden; } .wx-rain i{ display:block; height:100%; background:#3b82f6; border-radius:inherit; } .wx-h.is-best{ background:var(--surface); box-shadow:inset 0 0 0 2px var(--leaf); } .wx-h.is-dark{ background:color-mix(in srgb,var(--ink) 10%,var(--surface)); } .wx-h.is-dark.is-best{ background:color-mix(in srgb,var(--ink) 6%,var(--surface)); } #saveRouteBtn .heart{ fill:none; stroke:currentColor; } #saveRouteBtn.is-on{ color:var(--violet); } #saveRouteBtn.is-on .heart{ fill:currentColor; } .static-card .gear-ph{ height:8rem; } /* ---------- Scroll motion: parallax + scale (initMotion() in the app script) ---------- Only active when JS adds html.motion (never with prefers-reduced-motion), so content is always visible without JS and for crawlers. Uses the individual translate/scale properties, which compose with the existing transform-based load/hover effects instead of overriding them. */ .px-media{ overflow:hidden; isolation:isolate; } html.motion .px-img{ translate:0 var(--py,0); scale:var(--ps,1); will-change:translate,scale; } html.motion .prose-j .jr-frame img.px-img{ scale:1 !important; } html.motion [data-rv="1"]{ opacity:1; scale:.94; translate:0 26px; transition:scale .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1),box-shadow .15s ease; transition-delay:var(--rvd,0ms); } html.motion [data-rv="1"].rv-in{ opacity:1; scale:1; translate:0 0; } html.motion #planJourneySection .route-line{ translate:0 var(--hy,0); scale:var(--hs,1); opacity:var(--ho,1); transform-origin:50% 35%; } /* ---------- Mini maps, route metrics and "Route at a glance" (routes.js / guides.js) ---------- */ .jr-card-row{ display:flex; gap:1rem; align-items:flex-start; } .jr-minimap{ display:block; width:100%; height:auto; aspect-ratio:160/96; } .jr-card-map{ flex:none; width:7.5rem; border-radius:.8rem; transition:transform .25s ease; } .jr-card-row:hover .jr-card-map{ transform:translateY(-2px) rotate(-1.5deg); } @media (max-width:479px){ .jr-card-map{ width:5.25rem; } } .jr-card-map-strip{ display:none; } /* phones: wide strip (whole route visible), larger screens: the tile */ .jr-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:.6rem; margin:.9rem 0 0; } .jr-metrics > div{ background:var(--surface); border:1px solid var(--line); border-radius:.9rem; padding:.6rem .8rem; } .jr-metrics dt{ font-size:.75rem; font-weight:700; text-transform:none; letter-spacing:.01em; color:var(--muted); } .jr-metrics dt sup{ color:var(--violet); top:-.3em; } .jr-metrics dd{ margin:.2rem 0 0; font-weight:700; font-size:.95rem; line-height:1.35; color:var(--ink); } .jr-metrics-note, .prose-j .jr-metrics-note{ margin:.5rem 0 0; font-size:.75rem; line-height:1.4; color:var(--muted); } .jr-trees{ display:inline-flex; gap:.15rem; vertical-align:middle; } .jr-trees i{ width:1.05rem; height:1.05rem; color:var(--leaf); opacity:.22; } .jr-trees i.on{ opacity:1; } .jr-trees svg{ display:block; width:100%; height:100%; fill:currentColor; } .jr-meter{ display:inline-flex; gap:2px; align-items:flex-end; height:.9rem; vertical-align:-.05em; margin-right:.2rem; } .jr-meter i{ width:.32rem; background:var(--line); border-radius:2px; } .jr-meter i:nth-child(1){ height:40%; } .jr-meter i:nth-child(2){ height:70%; } .jr-meter i:nth-child(3){ height:100%; } .jr-meter i.on{ background:var(--violet); } .jr-dim{ opacity:.25; } .jr-chip{ display:inline-block; margin:.15rem .3rem 0 0; padding:.1rem .55rem; border-radius:999px; background:var(--sun-t); color:var(--sun-ink); font-size:.8rem; font-weight:700; } .jr-card-metric{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:.35rem; font-size:.8rem; font-weight:700; color:var(--ink); } .jr-card-metric > span:first-child{ color:var(--muted); font-weight:600; } .jr-card-metric .jr-chip{ margin:0; } .jr-glance{ display:grid; gap:1.1rem; margin:2rem 0; padding:1.25rem; border-radius:1.4rem; border:1px solid var(--line); background:linear-gradient(135deg,var(--violet-t),var(--surface) 70%); box-shadow:0 18px 40px -28px rgba(40,30,110,.45); } /* The map is a full-width strip on top at every size (no side column, so no empty space under it) */ @media (min-width:640px){ .jr-glance{ padding:1.5rem; } } .jr-glance-map{ display:block; } .jr-glance-map svg{ border-radius:1rem; box-shadow:0 10px 24px -16px rgba(19,26,43,.4); transition:transform .3s ease; } .jr-glance-map:hover svg{ transform:scale(1.01); } .jr-minimap.jr-minimap-wide{ aspect-ratio:400/110; } /* OpenStreetMap route maps (drawn by scripts/fetch-geo.mjs) */ .jr-route-hero{ margin:1.25rem 0 1.5rem; background:var(--surface); border:1px solid var(--line); border-radius:1.15rem; overflow:hidden; box-shadow:0 12px 28px -22px rgba(19,26,43,.28); } .jr-route-hero img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:0; border:0; background:var(--card); } .jr-glance-photo{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:1.1rem; border:1px solid var(--line); background:var(--card); } .jr-route-hero figcaption{ margin:0; padding:.6rem .95rem; background:var(--surface); border-top:1px solid var(--line); font-size:.78rem; color:var(--muted); text-align:left; } .jr-card-photo{ flex:none; width:9rem; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:.8rem; border:1px solid var(--line); background:var(--card); } @media (max-width:639px){ .jr-card-row .jr-card-photo{ width:100%; } } .jr-checked{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.75rem; padding:.3rem .7rem; border-radius:999px; background:var(--leaf-t); color:var(--ok); font-size:.8rem; font-weight:700; line-height:1.35; } .jr-measured{ margin:2rem 0 0; padding:1.25rem; border-radius:1.25rem; border:1px solid var(--line); background:var(--surface); } .prose-j .jr-measured-title, .jr-measured-title{ margin:0 0 .25rem; font:800 1.25rem/1.2 var(--font-display); color:var(--ink); } .jr-elev{ display:block; width:100%; height:auto; margin-top:1rem; } .jr-elev text{ font:600 12px var(--font-sans); fill:var(--muted); } /* " through the year" charts in guides */ .jr-chart{ margin:2.25rem 0 0; padding:1.25rem; border-radius:1.25rem; border:1px solid var(--line); background:var(--surface); } .prose-j .jr-chart-title, .jr-chart-title{ margin:0; font:800 1.25rem/1.2 var(--font-display); color:var(--ink); } .jr-chart-sum{ margin:.35rem 0 .75rem; font-size:.92rem; color:var(--muted); line-height:1.5; } .jr-chart svg{ display:block; width:100%; height:auto; } .jr-chart svg text{ font:600 12px Figtree,system-ui,sans-serif; fill:var(--muted); } .jr-chart svg text.now{ fill:var(--ink); font-weight:800; } .jr-chart svg text.t{ fill:var(--ink); font-size:12px; } .jr-chart-legend{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-top:.5rem; font-size:.78rem; color:var(--muted); } .jr-chart-legend span{ display:inline-flex; align-items:center; gap:.35rem; } .jr-chart-legend i{ display:inline-block; width:.8rem; height:.8rem; border-radius:3px; } .jr-chart-legend i.line{ height:2px; background:var(--ink); border-radius:0; } .jr-chart-legend i.dash{ height:0; border-top:2px dashed; border-radius:0; } .jr-chart-data{ margin-top:.6rem; font-size:.82rem; } .jr-chart-data summary{ cursor:pointer; font-weight:700; color:var(--violet-d); } .jr-chart-data table{ width:100%; margin-top:.5rem; border-collapse:collapse; font-variant-numeric:tabular-nums; } .jr-chart-data th, .jr-chart-data td{ padding:.25rem .4rem; border-bottom:1px solid var(--line); text-align:left; } .jr-chart figcaption{ margin-top:.6rem; font-size:.75rem; color:var(--muted); text-align:left; } /* "Was this helpful?" + report a problem (wrapped card with thumbs-up & thumbs-down) */ .jr-feedback{ display:block; margin:2rem 0 0; } .jr-feedback-card{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.65rem 1.1rem; padding:.9rem 1.15rem; border-radius:1.05rem; border:1px solid color-mix(in srgb,var(--violet) 26%,var(--line)); background:color-mix(in srgb,var(--violet-t) 75%,var(--surface)); color:var(--ink); } :root[data-theme="dark"] .jr-feedback-card{ background:color-mix(in srgb,var(--violet-t) 65%,var(--surface)); border-color:#475569; } :root[data-theme="dark"][data-contrast="high"] .jr-feedback-card{ background:#0a0a0a !important; border:1.5px solid #ffffff !important; } .jr-feedback-vote{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; } .jr-feedback-q{ margin:0; font-size:.82rem !important; font-weight:500 !important; color:var(--ink); } .jr-feedback-btns{ display:inline-flex; align-items:center; gap:.45rem; } .jr-feedback-btns .btn, .jr-feedback-btns .btn.jr-fb-btn{ display:inline-flex; align-items:center; gap:.38rem; min-height:2.1rem; padding:.32rem .78rem; font-size:.78rem !important; font-weight:500 !important; border-radius:.65rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); } .jr-feedback-btns .jr-fb-ico{ width:.95rem; height:.95rem; flex:none; } .jr-feedback-btns .btn.jr-fb-btn:hover, .jr-feedback-btns .btn.jr-fb-btn:focus-visible{ border-color:var(--violet); background:var(--violet-t); color:var(--violet-d); } .jr-feedback-btns .btn.jr-fb-btn[aria-pressed="true"], .jr-feedback-btns .btn.jr-fb-btn.is-active{ background:var(--violet) !important; color:#ffffff !important; border-color:var(--violet) !important; } .jr-feedback-thanks{ margin:0; font-size:.78rem !important; font-weight:500 !important; color:var(--violet-d); } .jr-feedback-report{ margin:0 0 0 auto; font-size:.78rem !important; font-weight:500 !important; } .jr-feedback-report a{ color:var(--violet-d); font-size:.78rem !important; font-weight:500 !important; text-decoration:underline; } .jr-glance .jr-actions .btn{ white-space:nowrap; } .jr-glance .btn{ padding:.6rem 1.1rem; font-size:.95rem; } .prose-j .jr-glance .kicker{ margin:0; } .prose-j .jr-glance-title{ margin:.35rem 0 0; font-size:1.25rem; line-height:1.3; } .prose-j .jr-glance-title a{ color:var(--ink); text-decoration:none; } .prose-j .jr-glance-title a:hover{ text-decoration:underline; } .prose-j .jr-glance-stops{ margin:.35rem 0 0; font-size:.875rem; line-height:1.5; color:var(--muted); } .prose-j .jr-glance .btn-ghost{ color:var(--ink); } .jr-glance-facts{ padding:1rem; border-radius:1.1rem; background:var(--violet-t); } .btn.is-saved{ background:#1f9d63; box-shadow:0 8px 20px -8px rgba(31,157,99,.7); } .btn.is-saved svg path{ fill:currentColor; } /* Abstract icon badges (sprite symbols a-*) */ .ico-badge{ display:inline-flex; align-items:center; justify-content:center; width:3.1rem; height:3.1rem; margin-bottom:.9rem; border-radius:1rem; background:var(--violet-t); color:var(--violet); transition:transform .2s ease; } .ico-badge svg{ width:2rem; height:2rem; } .ico-badge[data-tone=leaf]{ background:var(--leaf-t); color:var(--leaf); } .ico-badge[data-tone=sun]{ background:var(--sun-t); color:var(--sun); } .ico-badge[data-tone=rose]{ background:var(--rose-t); color:var(--rose); } .ico-badge[data-tone=ink]{ background:var(--card); color:var(--ink); } .ico-badge.on-tint{ background:var(--surface); box-shadow:0 8px 20px -12px rgba(19,26,43,.35); } .ico-badge.ico-lg{ width:3.6rem; height:3.6rem; border-radius:1.15rem; margin-bottom:1.1rem; } .ico-badge.ico-lg svg{ width:2.3rem; height:2.3rem; } .tile:hover .ico-badge{ transform:translateY(-2px) rotate(-4deg); } #guidesSection h2, #exploreSection h2, #exploreSection .tile h3{ font-weight:400 !important; } /* Phones: "Explore Joyride" tiles as condensed compact rows (icon beside the text), not tall mostly-empty boxes */ @media (max-width:639px){ #exploreSection{ padding-top:1.5rem !important; padding-bottom:1.5rem !important; } #exploreSection .grid{ margin-top:.75rem !important; gap:.45rem !important; } #exploreSection .tile{ display:grid; grid-template-columns:2.15rem minmax(0,1fr); column-gap:.65rem; align-items:center; padding:.5rem .72rem !important; border-radius:.82rem !important; } #exploreSection .tile .ico-badge{ grid-row:span 2; margin:0; width:2.15rem !important; height:2.15rem !important; border-radius:.62rem !important; align-self:center; } #exploreSection .tile .ico-badge svg{ width:1.3rem !important; height:1.3rem !important; } #exploreSection .tile h3{ align-self:end; font-size:.86rem !important; font-weight:400 !important; line-height:1.2 !important; } #exploreSection .tile p{ margin-top:.08rem !important; align-self:start; font-size:.75rem !important; line-height:1.28 !important; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } /* Gear filter chips scroll sideways: fade the right edge so it's obvious there are more */ .gear-filters{ -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent); padding-right:2.5rem; } } .ico-inline{ display:inline-block; width:1.15em; height:1.15em; vertical-align:-.2em; } .btn .ico-inline{ width:1.25em; height:1.25em; } /* Ready-made route pages */ .jr-route-map{ height:min(52vh,420px); min-height:260px; border-radius:1.25rem; border:1px solid var(--line); background:var(--card); display:flex; align-items:center; justify-content:center; overflow:hidden; } .prose-j .jr-stops{ list-style:none; padding-left:0; counter-reset:none; } .prose-j .jr-stops li{ position:relative; padding:.2rem 0 .9rem 1.6rem; border-left:2px dashed #cfc6ff; margin-left:.45rem; } .prose-j .jr-stops li::before{ content:""; position:absolute; left:-.5rem; top:.45rem; width:.9rem; height:.9rem; border-radius:50%; background:var(--violet); border:3px solid var(--surface); box-shadow:0 0 0 1px #cfc6ff; } .prose-j .jr-stops li:last-child{ border-left-color:transparent; } /* Skip link: hidden until focused with the keyboard */ .skip-link{ position:fixed; left:.75rem; top:-4rem; z-index:100; padding:.6rem 1rem; border-radius:.6rem; background:var(--ink); color:var(--surface); font-weight:700; transition:top .15s; } .skip-link:focus{ top:calc(.75rem + var(--safe-t)); } /* Contact form honeypot: visually hidden but still in the form (not display:none, which some bots skip) */ .hp-field{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; } /* Cookie preferences */ .cookie-opt{ display:flex; gap:.6rem; align-items:flex-start; padding:.55rem .65rem; border:1px solid var(--line); border-radius:.75rem; font-size:.8rem; line-height:1.45; color:var(--muted); cursor:pointer; } .cookie-opt input{ margin-top:.15rem; width:1.05rem; height:1.05rem; flex:none; accent-color:var(--violet); } .cookie-opt strong{ color:var(--ink); } #cookieBanner{ max-height:calc(100dvh - 6rem); overflow:auto; } /* Plan button: spinner while Maps loads or a route is being planned */ .btn.is-busy::before{ content:""; width:1.05rem; height:1.05rem; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-left-color:#fff; animation:spin .8s linear infinite; flex:none; } .btn.is-retry{ background:var(--ink); color:var(--surface); } /* Staging badge (only on staging.* / localhost) */ .staging-badge{ display:none; } html.is-staging .staging-badge{ display:block; position:fixed; left:50%; right:auto; top:calc(var(--safe-t) + .25rem); transform:translateX(-50%); z-index:90; padding:.14rem .45rem; border-radius:999px; background:#e11d48; color:#fff; font:700 .75rem/1.15 system-ui,sans-serif; letter-spacing:.06em; opacity:.88; pointer-events:none; } @media (min-width:1024px){ html.is-staging .staging-badge{ top:auto; right:auto; left:.6rem; bottom:.6rem; transform:none; padding:.3rem .6rem; font-size:.75rem; opacity:1; } } /* ---------- Guide cards (guides.js cardHtml): photo + topic colour, compact row on phones ---------- */ .g-grid{ display:grid; gap:.85rem; } .g-card{ position:relative; display:grid; grid-template-columns:7.25rem minmax(0,1fr); min-height:8.75rem; overflow:hidden; border-radius:.75rem; background:var(--surface); border:0 !important; color:inherit; text-decoration:none; box-shadow:0 10px 24px -14px rgba(19,26,43,.28); transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1); } .g-card::after{ content:none; display:none !important; } .g-card:hover{ transform:translateY(-7px) !important; box-shadow:0 24px 44px -16px rgba(19,26,43,.45) !important; } .g-card-media{ position:relative; display:block; min-height:100%; background:var(--ct); overflow:hidden; } .g-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:none !important; transition:none !important; } .g-card:hover .g-card-media img{ transform:none !important; } .g-card-cat{ position:absolute; left:.45rem; bottom:.5rem; display:inline-flex; align-items:center; gap:.25rem; max-width:calc(100% - .9rem); padding:.2rem .5rem; border-radius:999px; background:var(--surface); backdrop-filter:blur(6px); color:var(--c); font-size:.75rem; font-weight:800; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 4px 12px -6px rgba(19,26,43,.4); } .g-card-cat .ico-inline{ width:1.05em; height:1.05em; flex:none; } /* "Recommended for you": why a guide is near the top, and the sorting note above the list */ .g-card-why{ display:inline-flex; align-self:flex-start; align-items:center; gap:.3rem; max-width:100%; margin-bottom:.35rem; padding:.12rem .5rem; border-radius:999px; background:var(--ct); color:var(--c); font-size:.75rem; font-weight:800; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .g-card-why::before{ content:"✦"; font-size:.75em; } .reco-note{ margin-top:1rem; font-size:.84rem; line-height:1.5; color:var(--muted); } /* Topic badge: each guide's own icon in its topic colour, top-right of the photo */ .g-card-topic{ position:absolute; top:.45rem; right:.45rem; z-index:1; display:flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--surface); color:var(--c); box-shadow:0 6px 16px -8px rgba(19,26,43,.55); transition:transform .3s cubic-bezier(.2,.7,.2,1); } .g-card-topic svg{ width:1.1rem; height:1.1rem; } .g-card:hover .g-card-topic{ transform:rotate(-8deg) scale(1.08); } .jr-kicker-topic{ display:flex; align-items:center; gap:.4rem; } :root[data-theme="dark"] .jr-kicker-topic{ color:var(--violet) !important; } .jr-topic-ico{ width:1.6rem; height:1.6rem; padding:.28rem; flex:none; border-radius:50%; background:color-mix(in srgb,currentColor 12%,var(--surface)); } .g-card-body{ display:flex; flex-direction:column; min-width:0; padding:.8rem .9rem .95rem; } .g-card-title, .prose-j .g-card-title{ margin:0; font:800 1rem/1.25 var(--font-display); font-weight:800 !important; color:var(--ink); letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .g-card-sum{ display:-webkit-box; margin-top:.3rem; font-size:.84rem; line-height:1.45; color:var(--muted); -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .g-card-meta{ display:flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:.55rem; font-size:.75rem; font-weight:600; color:var(--muted); min-width:0; } .g-card-meta img{ flex:none; width:1.35rem; height:1.35rem; border-radius:50%; object-fit:cover; } .g-card-meta > span:first-of-type{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .g-card-route{ display:inline-flex; align-items:center; gap:.2rem; flex:none; margin-left:auto; padding:.12rem .45rem; border-radius:999px; background:var(--ct); color:var(--c); font-size:.75rem; font-weight:800; } @media (min-width:640px){ .g-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; } .g-card{ grid-template-columns:1fr; grid-template-rows:auto 1fr; min-height:0; } .g-card-media{ aspect-ratio:16/9; min-height:0; } .g-card-cat{ left:.7rem; bottom:auto; top:.7rem; font-size:.75rem; padding:.25rem .6rem; } .g-card-topic{ top:.65rem; right:.7rem; width:2.4rem; height:2.4rem; } .g-card-topic svg{ width:1.35rem; height:1.35rem; } .g-card-body{ padding:1rem 1.15rem 1.2rem; } .g-card-title{ font-size:1.15rem; } .g-card-sum{ font-size:.9rem; } } @media (min-width:1024px){ .g-grid-home{ grid-template-columns:repeat(3,minmax(0,1fr)); } } /* ---------- Route cards + "route at a glance" on phones: schematic map as a full-width strip ---------- */ @media (max-width:639px){ .jr-card-row{ flex-direction:column; gap:.75rem; } .jr-card-row .jr-card-map-tile{ display:none; } .jr-card-row .jr-card-map-strip{ display:block; width:100%; } .jr-glance{ gap:.85rem; padding:1rem; } .jr-actions{ display:grid !important; grid-template-columns:1fr 1fr; } .jr-actions > :first-child{ grid-column:1 / -1; } .jr-actions .btn{ min-height:46px; padding:.6rem .5rem; font-size:.85rem; } } /* "From the trail" author stories in guides (only rendered once the author has approved them) */ .jr-story{ margin:1.5rem 0; padding:1.1rem 1.25rem; border-radius:1rem; background:linear-gradient(135deg,var(--leaf-t),var(--surface) 80%); border:1px solid var(--line); font-size:1rem; line-height:1.65; } .prose-j .jr-story p{ margin:0; } .prose-j .jr-story .jr-story-kicker{ margin:0 0 .35rem; font:800 .78rem/1.2 var(--font-sans); letter-spacing:.01em; text-transform:none; color:var(--leaf); } /* ---------- Guides & Routes: "Recommended for you" (.reco-panel.animated-gradient) ---------- */ @keyframes gradient-aurora{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } } .reco-panel.animated-gradient, .jr-related-guides.animated-gradient{ position:relative; background:linear-gradient(125deg, #e2d4f7 0%, #d4baff 22%, #d8e4fb 50%, #cbe9fb 76%, #a6daff 100%) !important; background-size:180% 180% !important; animation:gradient-aurora 5s ease-in-out infinite !important; } .reco-panel{ isolation:isolate; padding:1.25rem; border-radius:1.2rem; border:1px solid color-mix(in srgb,#ccb8f0 55%,var(--line)); box-shadow:0 18px 40px -28px rgba(40,30,110,.24); } .reco-panel > *, .jr-related-guides > *{ position:relative; z-index:1; } .reco-panel.is-off{ padding:.85rem 1.1rem; background:var(--surface) !important; animation:none !important; box-shadow:none; } .reco-kicker{ margin:0; display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; font-weight:400 !important; letter-spacing:.01em; text-transform:none; color:var(--violet); } .reco-kicker::before{ content:"✦"; } .reco-title{ margin:.2rem 0 0; font:400 1.35rem/1.18 var(--font-display); font-weight:400 !important; color:var(--ink); letter-spacing:-.01em; } .reco-based{ display:flex; flex-wrap:wrap; align-items:center; gap:.32rem; margin-top:.55rem; } .reco-based-label{ font-size:.75rem !important; font-weight:400 !important; color:var(--muted); margin-right:.08rem; } .reco-chip{ display:inline-flex; align-items:center; padding:.14rem .48rem !important; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink); font-size:.75rem !important; font-weight:400 !important; line-height:1.25; box-shadow:none; } .reco-grid{ margin-top:1.1rem; } .reco-foot, .reco-offline{ margin:.85rem 0 0; font-size:.75rem !important; font-weight:400 !important; line-height:1.38 !important; color:var(--muted); } .reco-offline{ margin:0; } .reco-link{ padding:0; border:0; background:none; color:var(--violet); font-size:.75rem !important; font-weight:400 !important; text-decoration:underline; text-underline-offset:2px; cursor:pointer; } .reco-based-line{ margin-top:.45rem; font-size:.75rem !important; font-weight:400 !important; line-height:1.38; color:var(--violet); } .reco-based-line::before{ content:"✦ "; } @media (min-width:640px){ .reco-panel{ padding:1.6rem 1.75rem; } .reco-title{ font-size:2rem; } .reco-grid:not(.reco-carousel-track){ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:1rem; align-items:stretch; } .reco-grid:not(.reco-carousel-track) > .g-card:nth-child(1){ grid-column:1; grid-row:1 / span 2; min-height:20.5rem !important; height:100%; } .reco-grid:not(.reco-carousel-track) > .g-card:nth-child(2){ grid-column:2; grid-row:1; min-height:9.75rem !important; } .reco-grid:not(.reco-carousel-track) > .g-card:nth-child(3){ grid-column:2; grid-row:2; min-height:9.75rem !important; } .reco-grid:not(.reco-carousel-track) > .g-card:nth-child(2) .g-card-body, .reco-grid:not(.reco-carousel-track) > .g-card:nth-child(3) .g-card-body{ padding:1.6rem 1rem .85rem !important; } .reco-grid:not(.reco-carousel-track) > .g-card:nth-child(2) .g-card-title, .reco-grid:not(.reco-carousel-track) > .g-card:nth-child(3) .g-card-title{ font-size:1.02rem; line-height:1.2; -webkit-line-clamp:2; } } /* ---------- "Write for us" ---------- */ .jr-write{ display:flex; gap:1.1rem; align-items:flex-start; padding:1.35rem; border-radius:1.5rem; background:linear-gradient(135deg,var(--sun-t),var(--surface) 70%); border:1px solid var(--line); scroll-margin-top:6rem; } .jr-write-ico{ flex:none; display:flex; align-items:center; justify-content:center; width:3rem; height:3rem; border-radius:50%; background:var(--surface); color:var(--violet); box-shadow:0 8px 18px -10px rgba(19,26,43,.5); } .jr-write-ico svg{ width:1.6rem; height:1.6rem; } .jr-write .kicker{ margin:0; color:var(--violet); } .jr-write-title{ margin:.2rem 0 0; font:800 1.4rem/1.2 var(--font-display); color:var(--ink); } .jr-write-text{ margin:.55rem 0 0; font-size:.95rem; line-height:1.6; color:var(--muted); } .jr-write-cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; } .jr-write-cta .btn{ text-decoration:none; } @media (max-width:639px){ .jr-write{ flex-direction:column; padding:1.15rem; } .jr-write-cta .btn{ width:100%; justify-content:center; } } /* ---------- One-tap starts (planner panel) ---------- */ .quick-row{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; } .quick-btn{ display:flex; align-items:center; justify-content:center; gap:.45rem; min-height:46px; padding:.55rem .7rem; border-radius:.65rem; border:1.5px solid rgba(106,76,255,.35); background:var(--violet-t); color:var(--violet-d); font-weight:700; font-size:.9rem; transition:background .15s, transform .15s; } .quick-btn:hover{ background:color-mix(in srgb,var(--violet) 18%,var(--violet-t)); } .quick-btn:active{ transform:scale(.97); } .quick-btn span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .quick-or{ display:flex; align-items:center; gap:.6rem; margin:.85rem 0 .6rem; font-size:.75rem; font-weight:600; color:var(--muted); text-transform:none; letter-spacing:.01em; } .quick-or::before,.quick-or::after{ content:""; flex:1; height:1px; background:var(--line); } .ex-trips{ display:flex; align-items:center; gap:.4rem; margin-top:.8rem; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; } .ex-trips::-webkit-scrollbar{ display:none; } .ex-trips-label{ flex:none; font-size:.78rem; font-weight:700; color:var(--muted); } .ex-chip{ flex:none; display:inline-flex; align-items:center; gap:.3rem; min-height:36px; padding:.35rem .75rem; border-radius:.55rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.8rem; font-weight:600; white-space:nowrap; } .ex-chip:hover{ border-color:var(--violet); color:var(--violet-d); } .ex-chip .ico-inline{ width:1rem; height:1rem; } /* ---------- Example result next to the form ---------- */ .ex-result{ margin:0; padding:.85rem 1.05rem .9rem; border-radius:1.1rem; background:color-mix(in srgb,var(--surface) 88%,transparent); border:1px solid var(--line); box-shadow:0 18px 40px -26px rgba(40,30,110,.35); max-width:34rem; transition:padding .24s ease; } .ex-result-head{ display:flex; flex-direction:column; gap:.1rem; cursor:pointer; user-select:none; } .ex-result-head-top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; } .ex-result-chevron{ display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; border-radius:999px; background:var(--violet-t); color:var(--violet-d); font-size:.82rem; cursor:pointer; transition:transform .25s ease, background .15s ease; } .ex-result-head:hover .ex-result-chevron{ background:color-mix(in srgb,var(--violet) 22%,var(--violet-t)); } .ex-result[data-collapsed="false"] .ex-result-chevron, .ex-result.is-open .ex-result-chevron{ transform:rotate(180deg); } .ex-result-collapsible{ max-height:0; opacity:0; overflow:hidden; transition:max-height .32s cubic-bezier(.2,.8,.2,1), opacity .24s ease; } .ex-result[data-collapsed="false"] .ex-result-collapsible, .ex-result.is-open .ex-result-collapsible{ max-height:24rem; opacity:1; } .ex-result-title{ font-family:var(--font-display); font-weight:400; font-size:1.02rem; letter-spacing:-.01em; } .ex-result-meta{ font-size:.78rem; color:var(--muted); font-weight:400; } .ex-result-body{ display:grid; grid-template-columns:8.5rem 1fr; gap:.9rem; align-items:center; margin-top:.7rem; } .ex-result-map{ width:100%; height:auto; border-radius:.8rem; } .ex-result-stops{ display:grid; gap:.28rem; font-size:.82rem; } .ex-result-stops li{ display:flex; align-items:center; gap:.5rem; min-width:0; } .ex-result-stops li span:last-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ex-dot{ width:.6rem; height:.6rem; flex:none; border-radius:999px; background:var(--violet); } .ex-result-foot{ margin-top:.7rem; font-size:.8rem; color:var(--muted); } @media (max-width:639px){ .ex-result-body{ grid-template-columns:6.5rem 1fr; } .quick-btn{ font-size:.84rem; min-height:44px; } .quick-or{ margin:.6rem 0 .45rem; } } #joyrideAISection .jr-mission-shell .prose-j{ max-width:100% !important; width:100% !important; } #joyrideAISection .prose-j h2{ font-weight:400 !important; } /* ---------- Route sheet: after navigation & location guides ---------- */ .route-more{ margin:-.25rem 0 1rem; display:grid; gap:.6rem; } .route-more-note{ padding:.6rem .8rem; border-radius:.8rem; background:var(--leaf-t); color:var(--ok); font-size:.85rem; font-weight:600; } .route-more-label{ margin-top:.2rem; font-size:.75rem; font-weight:700; color:var(--muted); text-transform:none; letter-spacing:.01em; } .route-useful-box{ display:flex; align-items:center; justify-content:space-between; gap:.45rem; min-height:2.65rem; padding:.38rem .75rem; border-radius:.75rem; border:1px solid color-mix(in srgb,var(--violet) 24%,var(--line)); background:linear-gradient(135deg,color-mix(in srgb,var(--violet-t) 68%,var(--surface)) 0%,var(--surface) 100%); color:var(--ink); font-size:.82rem; font-weight:800; box-shadow:none; transition:border-color .15s, box-shadow .15s; } .route-useful-box:hover{ border-color:color-mix(in srgb,var(--violet) 45%,var(--line)); } .route-useful-q{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); } .route-useful-btns{ display:inline-flex; align-items:center; gap:.3rem; flex:none; } .route-useful-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:1.9rem; padding:.18rem .6rem; border-radius:.5rem; border:1px solid color-mix(in srgb,var(--violet) 26%,var(--line)); background:var(--surface); color:var(--violet-d); font-size:.76rem; font-weight:800; cursor:pointer; box-shadow:none; transition:border-color .15s, color .15s, background .15s, transform .15s, box-shadow .15s; } .route-useful-btn:hover{ border-color:var(--violet); color:#fff; background:var(--violet-grad); transform:translateY(-1px); box-shadow:0 6px 12px -4px rgba(106,76,255,.45); } .route-useful-btn[aria-pressed="true"]{ border-color:var(--violet); color:#fff; background:var(--violet-grad); box-shadow:0 6px 12px -4px rgba(106,76,255,.45); } .route-useful-thanks{ font-size:.78rem; font-weight:800; color:var(--ok); white-space:nowrap; } .route-feedback-cta{ min-height:2.65rem !important; padding:.38rem .75rem !important; border-radius:.75rem !important; border:1px solid color-mix(in srgb,var(--violet) 24%,var(--line)) !important; background:linear-gradient(135deg,color-mix(in srgb,var(--violet-t) 68%,var(--surface)) 0%,var(--surface) 100%) !important; color:var(--violet-d) !important; font-size:.82rem !important; font-weight:800 !important; box-shadow:none; transition:border-color .15s, background .15s, transform .15s, box-shadow .15s; } .route-feedback-cta:hover{ border-color:var(--violet) !important; background:var(--violet-t) !important; transform:translateY(-1px); box-shadow:0 8px 20px -10px rgba(83,56,230,.4); } .route-feedback-cta svg{ color:var(--violet); } .route-loc-guides{ margin-top:.25rem; padding:.65rem .75rem; border-radius:1rem; border:1px solid var(--line); background:var(--card); display:grid; gap:.5rem; } .route-loc-guides-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.3rem .65rem; } .route-loc-guides-all{ font-size:.75rem; font-weight:700; color:var(--violet-d); text-decoration:underline; text-underline-offset:2px; } .route-loc-guides-grid{ gap:.65rem; } .route-loc-guides-grid .g-card{ grid-template-columns:5.75rem minmax(0,1fr); grid-template-rows:none; min-height:6.5rem; border-radius:.95rem; } .route-loc-guides-grid .g-card-media{ aspect-ratio:auto; min-height:100%; } .route-loc-guides-grid .g-card-cat{ left:.4rem; bottom:.4rem; top:auto; font-size:.75rem; padding:.15rem .45rem; } .route-loc-guides-grid .g-card-topic{ top:.35rem; right:.4rem; width:1.65rem; height:1.65rem; } .route-loc-guides-grid .g-card-topic svg{ width:.95rem; height:.95rem; } .route-loc-guides-grid .g-card-body{ padding:.55rem .7rem .6rem; } .route-loc-guides-grid .g-card-title{ font-size:.9rem; line-height:1.22; -webkit-line-clamp:2; } .route-loc-guides-grid .g-card-sum{ font-size:.75rem; line-height:1.32; margin-top:.15rem; -webkit-line-clamp:2; } /* ---------- Units, language and theme pickers ---------- */ .units-pick{ display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; } .units-pick select{ appearance:none; -webkit-appearance:none; background:rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .45rem center/.75rem; color:inherit; border:1px solid rgba(255,255,255,.18); border-radius:.5rem; padding:.3rem 1.6rem .3rem .7rem; font:inherit; font-weight:600; cursor:pointer; } .units-pick select option{ color:var(--ink); background:var(--surface); } .units-pick-light{ font-size:.78rem; font-weight:600; color:var(--muted); } .units-pick-light select{ background-color:var(--surface); border-color:var(--line); color:var(--ink); padding-top:.25rem; padding-bottom:.25rem; } .lang-switch{ display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap; } .lang-switch a{ font-weight:600; } .lang-switch a:hover{ text-decoration:underline; } .lang-switch [aria-current]{ color:#fff; text-decoration:underline; text-underline-offset:3px; } #drawer .lang-switch [aria-current]{ color:var(--violet-d); } .jr-lang-more{ font-size:.74rem; font-weight:600; padding:.15rem .45rem; border-radius:.45rem; border:1px solid rgba(148,163,184,.35); background:rgba(15,23,42,.35); color:inherit; cursor:pointer; max-width:6.8rem; } #drawer .jr-lang-more{ background:var(--surface); border-color:var(--line); color:var(--ink); } .jr-lang-more option{ color:var(--ink); background:var(--surface); } /* Suppress Google Translate injected top banner, floating bar & hover tooltips so they never cover header.topbar or #immTopbar */ .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame, iframe.skiptranslate, body > .skiptranslate, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; max-height: 0 !important; opacity: 0 !important; pointer-events: none !important; border: 0 !important; } html, body { top: 0px !important; } .goog-text-highlight { background-color: transparent !important; box-shadow: none !important; } .theme-pick{ display:inline-flex; align-items:center; justify-content:flex-start; gap:.4rem; flex-wrap:nowrap; } .theme-pick-label{ font-size:.78rem; font-weight:700; color:var(--muted); } .theme-pick-btns{ display:inline-grid; grid-template-columns:repeat(4,minmax(0,auto)); gap:.2rem; padding:.2rem; border-radius:.6rem; background:var(--card); border:1px solid var(--line); } .theme-btn{ display:inline-flex; align-items:center; justify-content:center; width:2.15rem; height:2.15rem; min-height:2.15rem; padding:0; border-radius:.5rem; font-size:.76rem; font-weight:700; color:var(--muted); transition:background .15s, color .15s, border-color .15s; cursor:pointer; border:1px solid transparent; white-space:nowrap; } .theme-btn-ico{ width:1.05rem; height:1.05rem; flex:none; } .theme-btn:hover{ color:var(--ink); } .theme-btn[aria-pressed="true"]{ background:var(--violet-grad); color:#fff; box-shadow:0 4px 12px -4px rgba(106,76,255,.55); border-color:rgba(255,255,255,.35); } :root[data-theme="dark"][data-contrast="high"] .theme-btn[aria-pressed="true"]{ background:#facc15 !important; color:#000000 !important; border-color:#ffffff !important; box-shadow:none; } .theme-pick-footer{ display:inline-flex; gap:.35rem; flex-wrap:nowrap; } .theme-pick-footer .theme-pick-label{ color:#e5e7eb; } .theme-pick-footer .theme-pick-btns{ background:#1e293b; border-color:#475569; } .theme-pick-footer .theme-btn{ width:2.15rem; height:2.15rem; min-height:2.15rem; padding:0; color:#e5e7eb; } .theme-pick-footer .theme-btn:hover{ color:#ffffff; } .theme-pick-footer .theme-btn[aria-pressed="true"]{ background:var(--violet-grad); color:#ffffff; } /* ---------- /authors page ("Our writers") ---------- */ .authors-grid{ display:grid; gap:1rem; margin:1.5rem 0 2rem; } @media (min-width:640px){ .authors-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .author-card{ display:flex; flex-direction:column; gap:.75rem; padding:1.25rem; border-radius:1.35rem; background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .prose-j .author-card{ text-decoration:none; color:var(--ink); } .author-card:hover{ transform:translateY(-3px); border-color:var(--violet); box-shadow:0 20px 36px -24px rgba(40,30,110,.4); } .author-card-head{ display:flex; align-items:center; gap:.85rem; } .author-card-photo{ width:4rem; height:4rem; flex:none; border-radius:999px; object-fit:cover; border:2px solid var(--line); } .author-card-name{ margin:0; font:800 1.15rem/1.2 var(--font-display); color:var(--ink); } .author-card-role{ margin:.15rem 0 0; font-size:.78rem; font-weight:700; color:var(--violet); } .author-card-bio{ margin:0; font-size:.88rem; line-height:1.55; color:var(--muted); flex:1; } .author-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-top:.55rem; border-top:1px solid var(--line); font-size:.8rem; font-weight:700; color:var(--violet); } .author-card-count{ color:var(--muted); font-weight:600; } /* ---------- Dark mode surface overrides for utility classes ---------- */ :root[data-theme="dark"] .bg-white{ background-color:var(--surface) !important; } :root[data-theme="dark"] .bg-slate-50, :root[data-theme="dark"] .bg-slate-100{ background-color:var(--card) !important; } :root[data-theme="dark"] .border-slate-100, :root[data-theme="dark"] .border-slate-200{ border-color:var(--line) !important; } :root[data-theme="dark"] .text-slate-500, :root[data-theme="dark"] .text-slate-600, :root[data-theme="dark"] .text-slate-700{ color:var(--ink-soft) !important; } :root[data-theme="dark"] .text-slate-800, :root[data-theme="dark"] .text-slate-900{ color:#ffffff !important; } :root[data-theme="dark"] :is(.card,.g-card,.reco-card,.jr-route-bento-card,.stop-card,.author-card,.my-stops-details,.wx-box,.route-stats-strip){ background-color:var(--surface); border-color:#475569; box-shadow:none; } :root[data-theme="dark"][data-contrast="high"] :is(.card,.g-card,.reco-card,.jr-route-bento-card,.stop-card,.author-card,.my-stops-details,.wx-box,.route-stats-strip){ background-color:#0a0a0a !important; border:1.5px solid #ffffff !important; box-shadow:none !important; } :root[data-theme="dark"] :is(.prose-j a, .faq-a a, .footer-link:hover){ text-decoration:underline; text-underline-offset:3px; } :root[data-theme="dark"] :is(.chip-vibe[aria-pressed="true"], .filter-pill[aria-pressed="true"], .mode-btn[aria-pressed="true"], .type-chip input:checked + span){ outline:2px solid var(--violet-d); outline-offset:1px; text-decoration:underline; text-underline-offset:3px; } :root[data-theme="dark"] img[data-skel]{ background:linear-gradient(100deg,#1e293b 30%,#334155 50%,#1e293b 70%); background-size:200% 100%; } :root[data-theme="dark"] img[data-skel].is-loaded{ background:none; } :root[data-theme="dark"] img[data-skel].is-failed{ background:var(--card); } :root[data-theme="dark"] .gear-card-media .gear-card-img, :root[data-theme="dark"] #productView #prodMainImg{ mix-blend-mode:normal; border-radius:.65rem; } /* ---------- Release 2: "My stops & filters", rich stop cards & interactive route editing ---------- */ .field-sm{ min-height:44px; padding:.55rem .8rem; font-size:.9rem; border-radius:.75rem; } .my-stops-details{ border:1px solid var(--line); border-radius:1rem; background:var(--card); overflow:hidden; } .my-stops-summary{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:44px; padding:.65rem .95rem; font-size:.88rem; font-weight:400; color:var(--ink); cursor:pointer; list-style:none; user-select:none; } .my-stops-summary::-webkit-details-marker{ display:none; } .my-stops-summary::after{ content:"▾"; font-size:.85rem; color:var(--muted); transition:transform .15s; } .my-stops-details[open] .my-stops-summary{ border-bottom:1px solid var(--line); } .my-stops-details[open] .my-stops-summary::after{ transform:rotate(180deg); } .my-stops-badge{ display:inline-flex; align-items:center; padding:.15rem .55rem; border-radius:999px; background:var(--violet-t); color:var(--violet-d); font-size:.75rem; font-weight:400; } .my-stops-panel{ padding:.9rem .95rem; display:grid; grid-template-columns:minmax(0,1fr); gap:.85rem; background:var(--surface); min-width:0; } .my-stops-grid{ display:grid; gap:.7rem; grid-template-columns:1fr; min-width:0; } .my-stops-grid > div{ min-width:0; } .my-stops-grid select{ width:100%; max-width:100%; min-width:0; } @media (min-width:520px){ .my-stops-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } .my-stops-check{ display:inline-flex; align-items:center; gap:.55rem; min-height:44px; font-size:.88rem; font-weight:400; color:var(--ink); cursor:pointer; } .my-stops-check input{ width:1.15rem; height:1.15rem; accent-color:var(--violet); } .my-stops-types{ border:0; padding:0; margin:0; min-width:0; } .my-stops-type-chips{ display:flex; flex-wrap:wrap; gap:.4rem; } .type-chip{ position:relative; display:inline-flex; } .type-chip input{ position:absolute; opacity:0; pointer-events:none; } .type-chip span{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.35rem .75rem; border-radius:.55rem; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:.8rem; font-weight:400; cursor:pointer; transition:all .15s; } .type-chip input:focus-visible + span{ outline:3px solid rgba(106,76,255,.45); outline-offset:2px; } .type-chip input:checked + span{ background:var(--violet-t); color:var(--violet-d); border-color:var(--violet); font-weight:400 !important; } .my-stops-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; padding-top:.55rem; border-top:1px solid var(--line); } .my-stops-reset{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:.4rem .85rem; border-radius:.55rem; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:.8rem; font-weight:400; cursor:pointer; } .my-stops-reset:hover{ border-color:var(--violet); color:var(--violet-d); } .stop-card{ padding:.75rem .9rem; border-radius:.95rem; border:1px solid var(--line); background:var(--card); display:grid; grid-template-columns:minmax(0,1fr); gap:.45rem; min-width:0; } .stop-head{ display:flex; align-items:center; justify-content:flex-start; gap:.4rem; flex-wrap:wrap; min-width:0; } .stop-title-row{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:.35rem .45rem; min-width:0; } .stop-badges{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:.35rem; } .stop-badge{ display:inline-flex; align-items:center; gap:.25rem; padding:.18rem .55rem; border-radius:999px; font-size:.76rem; font-weight:700; line-height:1.3; border:1px solid var(--line); background:var(--surface); color:var(--ink); } .stop-badge-rating{ background:var(--violet-t); color:var(--violet-d); border-color:color-mix(in srgb,var(--violet) 28%,var(--line)); } .stop-badge-type{ background:color-mix(in srgb,var(--violet-t) 55%,var(--surface)); color:var(--ink-soft); border-color:var(--line); } .stop-badge-open{ background:var(--leaf-t); color:var(--ok); border-color:transparent; } .stop-badge-closed{ background:#fde8e8; color:#a31d1d; border-color:transparent; } :root[data-theme="dark"] .stop-badge-closed{ background:#3b1822; color:#fca5a5; } .stop-badge-price{ background:var(--surface); color:var(--ink-soft); } .stop-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.45rem; margin-top:.2rem; padding-top:.35rem; border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent); } .stop-customize-group{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:.32rem; padding:.18rem .24rem; border-radius:.65rem; background:color-mix(in srgb,var(--surface) 72%,var(--bg)); border:1px dashed color-mix(in srgb,var(--violet) 30%,var(--line)); } .stop-act-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.32rem; min-height:44px; min-width:44px; padding:.35rem .72rem; border-radius:.55rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.78rem; font-weight:700; text-decoration:none; cursor:pointer; transition:border-color .15s, color .15s, background .15s; } .stop-act-ico{ width:.9rem; height:.9rem; flex:none; stroke-width:2; opacity:.88; } .stop-act-btn:hover{ border-color:var(--violet); color:var(--violet-d); } .stop-maps-link,.stop-details-btn{ color:var(--violet-d); background:var(--violet-t); border-color:color-mix(in srgb,var(--violet) 26%,var(--line)); } .stop-customize-btn{ background:var(--surface); color:var(--ink-soft); } .stop-customize-btn[data-stop-remove]:hover,.stop-customize-btn[data-stop-dislike]:hover{ border-color:var(--rose); color:var(--rose); } .add-stop-bar{ margin:-.25rem 0 1rem; display:grid; gap:.5rem; } .add-stop-row{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; } .add-stop-input{ flex:1 1 11rem; min-width:0; } .add-stop-btn{ flex:none; min-height:44px; padding:.5rem 1rem; font-size:.85rem; } .add-stop-candidates{ display:grid; gap:.35rem; padding:.5rem; border-radius:.85rem; border:1px solid var(--line); background:var(--card); } .add-stop-cand{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:44px; padding:.45rem .75rem; border-radius:.65rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.82rem; text-align:left; cursor:pointer; } .add-stop-cand:hover{ border-color:var(--violet); color:var(--violet-d); } #swapBtn{ min-height:44px; min-width:44px; padding:0 .5rem; } /* ---------- Release 3: Offline banner, Good time card, Your routes, Stop feedback, Search & Guides layout ---------- */ .offline-banner{ display:flex; align-items:center; gap:.5rem; padding:.65rem .9rem; border-radius:.85rem; background:var(--sun-t); color:var(--sun-ink); border:1px solid var(--line); font-size:.85rem; font-weight:600; line-height:1.4; } .good-time-card{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:.45rem; padding:.55rem .72rem; border-radius:1rem; background:var(--leaf-t); color:var(--leaf-ink); border:1px solid color-mix(in srgb,var(--leaf) 24%,var(--line)); } .good-time-main{ min-width:0; flex:1 1 auto; overflow:hidden; } .good-time-kicker{ display:block; font-size:.75rem; font-weight:800; text-transform:none; letter-spacing:.01em; color:var(--ok); white-space:nowrap; line-height:1.15; } .good-time-text{ margin:.1rem 0 0; font-size:.75rem; letter-spacing:-.01em; font-weight:600; color:var(--ink); line-height:1.25; white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; } .good-time-cta{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-height:32px; min-width:0; padding:.25rem .58rem; border-radius:.5rem; background:var(--surface); color:var(--ok); border:1px solid color-mix(in srgb,var(--leaf) 35%,var(--line)); font-size:.75rem; font-weight:700; white-space:nowrap; cursor:pointer; transition:border-color .15s, transform .15s; } .good-time-cta:hover{ border-color:var(--ok); } .your-routes{ border-top:1px solid var(--line); padding-top:1rem; } .your-route-item{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem .85rem; padding:.65rem .85rem; border-radius:.95rem; background:var(--card); border:1px solid var(--line); } .your-route-info{ min-width:0; flex:1 1 11rem; } .your-route-title{ display:flex; align-items:center; gap:.45rem; font-size:.88rem; color:var(--ink); margin:0; } .your-route-dot{ width:.55rem; height:.55rem; flex:none; border-radius:999px; } .your-route-meta{ margin:.15rem 0 0; } .your-route-actions{ display:flex; align-items:center; gap:.4rem; flex:none; } .your-route-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:.35rem .75rem; border-radius:.55rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.78rem; font-weight:700; cursor:pointer; transition:border-color .15s, color .15s; } .your-route-btn:hover{ border-color:var(--violet); color:var(--violet-d); } .stop-fb-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.2rem; padding-top:.4rem; border-top:1px dashed var(--line); } .stop-fb-label{ font-size:.75rem; font-weight:700; color:var(--muted); margin-right:.15rem; } .stop-fb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.3rem; min-height:44px; min-width:44px; padding:.3rem .7rem; border-radius:.55rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.76rem; font-weight:700; cursor:pointer; transition:all .15s; } .stop-fb-btn:hover{ border-color:var(--violet); color:var(--violet-d); } .stop-fb-btn.is-active, .stop-fb-btn[aria-pressed="true"]{ background:var(--violet-t); color:var(--violet-d); border-color:var(--violet); } .jr-search-bar{ max-width:38rem; } .jr-search-wrap{ display:flex; align-items:center; gap:.5rem; } .jr-search-input{ flex:1; min-width:0; min-height:44px; padding:.65rem 1rem; border-radius:.65rem; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font-size:.95rem; } .jr-search-input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 4px rgba(106,76,255,.14); } .jr-search-clear{ flex:none; min-height:44px; min-width:44px; padding:.45rem .95rem; border-radius:.6rem; font-size:.85rem; } .jr-country-group + .jr-country-group{ margin-top:2rem; } .jr-country-heading{ color:var(--ink); letter-spacing:-.01em; } .jr-city-cta{ display:inline-block; padding:.45rem .8rem; border-radius:.75rem; background:var(--surface); border:1px dashed var(--violet); line-height:1.4; } .prose-j .jr-lead{ font-size:1.14rem; line-height:1.68; color:var(--ink); font-weight:500; margin:1.1rem 0 1.4rem; } .prose-j figure.jr-photo-hero{ margin:1.35rem 0 2rem; } .prose-j figure.jr-photo-inline{ margin:1.2rem auto 1.5rem; max-width:34rem; } /* ---------- Google Sign-In & Cloud Sync ---------- */ .auth-nav-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.42rem; min-height:2.25rem; padding:.38rem .85rem; border-radius:.55rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.82rem; font-weight:700; transition:border-color .15s, background .15s; } .auth-nav-btn:hover{ border-color:var(--violet); background:var(--violet-t); color:var(--violet-d); } .auth-user-pill{ display:inline-flex; align-items:center; gap:.45rem; min-height:2.25rem; padding:.22rem .65rem .22rem .28rem; border-radius:.55rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.82rem; font-weight:700; transition:border-color .15s; } .auth-user-pill:hover{ border-color:var(--violet); } .auth-user-name{ max-width:7.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .auth-avatar{ display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; border-radius:999px; background:#5338e6; color:#ffffff; font-size:.76rem; font-weight:800; flex:none; overflow:hidden; } .auth-avatar img{ width:100%; height:100%; object-fit:cover; } .auth-avatar-lg{ width:2.5rem; height:2.5rem; font-size:.95rem; } .auth-badge-icon{ display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:.75rem; background:var(--card); border:1px solid var(--line); } .btn-google{ background:var(--surface); color:var(--ink); border:1.5px solid var(--line); box-shadow:0 4px 12px -6px rgba(19,26,43,.15); } .btn-google:hover{ border-color:var(--violet); background:var(--violet-t); color:var(--violet-d); } .auth-sync-badge{ display:inline-flex; align-items:center; gap:.25rem; padding:.15rem .55rem; border-radius:999px; background:var(--leaf-t); color:var(--leaf-ink); font-size:.75rem; font-weight:700; } .drawer-auth-box{ margin-top:.2rem; padding:.2rem .25rem; } .drawer-auth-btn{ display:flex; width:100%; align-items:center; justify-content:center; gap:.5rem; min-height:2.35rem; padding:.45rem .75rem; border-radius:.65rem; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:.84rem; font-weight:700; transition:border-color .15s; } .drawer-auth-btn:hover{ border-color:var(--violet); } .drawer-user-bar{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; padding:.35rem .5rem; border-radius:.65rem; border:1px solid var(--line); background:var(--card); } .drawer-user-info{ display:flex; align-items:center; gap:.5rem; } .drawer-signout-btn{ padding:.28rem .55rem; border-radius:.45rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.75rem; font-weight:700; flex:none; } .drawer-signout-btn:hover{ border-color:var(--violet); color:var(--violet-d); } .auth-account-option{ display:flex; width:100%; align-items:center; gap:.75rem; padding:.6rem .75rem; border-radius:.85rem; border:1px solid var(--line); background:var(--card); color:var(--ink); transition:border-color .15s, background .15s; } .auth-account-option:hover{ border-color:var(--violet); background:var(--violet-t); } @media (max-width:639px){ .quick-btn{ min-height:44px; padding:.38rem .55rem; font-size:.78rem; gap:.32rem; } .quick-or{ margin:.28rem 0 .2rem; font-size:.75rem; } .good-time-card{ margin-top:.3rem !important; padding:.34rem .55rem; border-radius:.7rem; flex-wrap:nowrap; gap:.4rem; } .good-time-main{ flex:1 1 auto; min-width:0; overflow:hidden; } .good-time-kicker{ font-size:.75rem; line-height:1.1; white-space:nowrap; } .good-time-text{ font-size:.75rem; line-height:1.2; margin-top:.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .good-time-cta{ min-height:28px; min-width:0; padding:.2rem .5rem; font-size:.75rem; white-space:nowrap; } .my-stops-summary{ min-height:32px; padding:.3rem .65rem; font-size:.76rem; } .my-stops-panel{ padding:.65rem .75rem; gap:.55rem; } .my-stops-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; } .field-sm{ min-height:34px; padding:.32rem .55rem; font-size:.78rem; border-radius:.55rem; } .my-stops-check{ min-height:32px; font-size:.78rem; } .type-chip span{ min-height:28px; padding:.18rem .5rem; font-size:.75rem; } .my-stops-reset{ min-height:30px; min-width:0; padding:.22rem .6rem; font-size:.75rem; } .stop-card{ padding:.55rem .7rem; border-radius:.75rem; gap:.3rem; } .stop-badge{ padding:.1rem .42rem; font-size:.75rem; } .stop-actions{ gap:.28rem; margin-top:.08rem; } .stop-act-btn{ min-height:28px; min-width:0; padding:.2rem .5rem; font-size:.75rem; } .stop-fb-row{ margin-top:.08rem; padding-top:.25rem; gap:.28rem; } .stop-fb-label{ font-size:.75rem; } .stop-fb-btn{ min-height:26px; min-width:0; padding:.15rem .45rem; font-size:.75rem; } .add-stop-btn{ min-height:34px; padding:.35rem .75rem; font-size:.78rem; } .your-route-item{ padding:.5rem .7rem; gap:.45rem .6rem; } .your-route-btn{ min-height:32px; min-width:0; padding:.25rem .6rem; font-size:.75rem; } .reco-panel{ padding:.85rem .95rem; border-radius:1.15rem; margin-top:1rem !important; } .reco-title{ font-size:1.25rem; } .reco-chip{ padding:.15rem .5rem; font-size:.75rem; } .g-card{ grid-template-columns:5.75rem minmax(0,1fr); min-height:7.25rem; border-radius:1rem; } .g-card-body{ padding:.6rem .75rem .65rem; } .g-card-title{ font-size:.92rem; line-height:1.22; -webkit-line-clamp:2; } .g-card-sum{ font-size:.76rem; line-height:1.35; margin-top:.18rem; } .g-card-why{ font-size:.75rem; padding:.08rem .4rem; margin-bottom:.2rem; } .jr-search-input{ min-height:38px; padding:.45rem .85rem; font-size:.86rem; } .jr-search-clear{ min-height:38px; min-width:0; padding:.35rem .75rem; font-size:.78rem; } .prose-j h2{ font-size:1.22rem; margin:1.35rem 0 .4rem; } .prose-j .jr-lead{ font-size:.96rem; line-height:1.56; margin:.65rem 0 .9rem; } .prose-j figure.jr-photo-hero{ margin:.75rem 0 1.2rem; } .author-card{ padding:.85rem 1rem; gap:.5rem; border-radius:1.1rem; } .author-card-photo{ width:3.1rem; height:3.1rem; } .author-card-name{ font-size:1rem; } .author-card-bio{ font-size:.8rem; line-height:1.45; } .auth-nav-btn{ min-height:2rem; padding:.28rem .62rem; font-size:.76rem; gap:.3rem; } .auth-user-pill{ min-height:2rem; padding:.18rem .5rem .18rem .22rem; font-size:.76rem; } .auth-user-name{ max-width:4.8rem; } .drawer-auth-box{ margin-top:.1rem; padding:.1rem .15rem; } .drawer-auth-btn{ min-height:1.95rem; padding:.28rem .55rem; font-size:.76rem; } .drawer-user-bar{ padding:.22rem .4rem; } } /* ---------- Bookmarks, Check-In & Printable Pocket Itinerary ---------- */ .jr-walked-btn.is-walked{ background:var(--leaf-t); color:var(--leaf-ink); border-color:var(--leaf); font-weight:700; } .jr-save-guide-btn.is-saved{ background:var(--violet-t); color:var(--violet-d); border-color:var(--violet); font-weight:700; } .jr-save-guide-btn.is-saved .jr-save-ico path{ fill:currentColor; } /* ---------- Interactive Guide Storytelling Hubs ---------- */ .jr-story-chapters{ display:flex; align-items:center; gap:.55rem; margin:.85rem 0 1.25rem; padding:.5rem .75rem; border-radius:.95rem; background:var(--card); border:1px solid var(--line); overflow-x:auto; } .jr-chapters-label{ flex:none; font-size:.75rem; font-weight:800; text-transform:none; letter-spacing:.01em; color:var(--muted); } .jr-chapters-list{ display:flex; align-items:center; gap:.4rem; flex-wrap:nowrap; } .jr-chapter-pill{ flex:none; display:inline-flex; align-items:center; gap:.32rem; padding:.28rem .65rem; border-radius:.55rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.76rem; font-weight:600; text-decoration:none; white-space:nowrap; transition:border-color .15s, color .15s, background .15s; } .jr-chapter-pill:hover{ border-color:var(--violet); color:var(--violet-d); background:var(--violet-t); } .jr-chapter-num{ display:inline-flex; align-items:center; justify-content:center; width:1.15rem; height:1.15rem; border-radius:999px; background:var(--violet-t); color:var(--violet-d); font-size:.75rem; font-weight:800; } .jr-chapter-map-pill{ background:var(--violet-t); color:var(--violet-d); border-color:color-mix(in srgb,var(--violet) 32%,var(--line)); font-weight:700; } .jr-story-hub{ border:1.5px solid color-mix(in srgb,var(--violet) 26%,var(--line)); background:linear-gradient(145deg,var(--surface) 0%,var(--card) 100%); } .jr-story-hub-grid{ display:grid; gap:1rem; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:768px){ .jr-story-hub-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr); gap:1.15rem; } } .jr-story-poi-list{ display:grid; gap:.45rem; } .jr-story-poi-btn{ display:flex; width:100%; align-items:flex-start; gap:.65rem; padding:.6rem .75rem; border-radius:.85rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-align:left; cursor:pointer; transition:border-color .15s, background .15s, transform .15s; } .jr-story-poi-btn:hover{ border-color:var(--violet); } .jr-story-poi-btn.is-active{ border-color:var(--violet); background:var(--violet-t); box-shadow:0 4px 14px -8px rgba(83,56,230,.35); } .jr-story-poi-num{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:1.55rem; height:1.55rem; margin-top:.08rem; border-radius:999px; background:var(--card); color:var(--ink); border:1px solid var(--line); font-size:.75rem; font-weight:800; } .jr-story-poi-btn.is-active .jr-story-poi-num{ background:var(--violet); color:#fff; border-color:var(--violet); } .jr-story-poi-body{ flex:1; min-width:0; display:grid; gap:.15rem; } .jr-story-poi-top{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; flex-wrap:wrap; } .jr-story-poi-title{ font-size:.86rem; font-weight:700; color:var(--ink); line-height:1.25; } .jr-story-poi-badge{ font-size:.75rem; font-weight:700; padding:.1rem .45rem; border-radius:999px; background:var(--card); color:var(--muted); border:1px solid var(--line); } .jr-story-poi-btn.is-active .jr-story-poi-badge{ background:var(--surface); color:var(--violet-d); border-color:color-mix(in srgb,var(--violet) 30%,var(--line)); } .jr-story-poi-meta{ font-size:.75rem; color:var(--muted); line-height:1.3; } .jr-story-map-col{ display:grid; gap:.65rem; } .jr-companion-map-wrap{ position:relative; border-radius:1rem; overflow:hidden; border:1px solid var(--line); background:var(--card); } .jr-companion-svg{ display:block; width:100%; height:auto; max-height:190px; } .jr-map-pin{ cursor:pointer; transition:transform .15s; } .jr-live-poi-canvas{ width:100%; height:205px; border-radius:1rem; } .jr-poi-spotlight{ padding:.75rem .9rem; border-radius:.95rem; background:var(--surface); border:1px solid var(--line); } .jr-inline-poi{ margin:1rem 0 1.25rem; padding:.75rem .95rem; border-radius:.95rem; background:var(--card); border:1px solid color-mix(in srgb,var(--violet) 26%,var(--line)); border-left:4px solid var(--violet); transition:box-shadow .2s, border-color .2s; } .jr-inline-poi.is-highlighted{ box-shadow:0 0 0 3px rgba(106,76,255,.22); border-color:var(--violet); } .jr-inline-poi-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; flex-wrap:wrap; } .jr-inline-poi-pin{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:1.45rem; height:1.45rem; border-radius:999px; background:var(--violet); color:#fff; font-size:.75rem; font-weight:800; } .jr-inline-poi-actions{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; } /* ---------- Cross-Language AI Translation Disclaimer & Card Badges ---------- */ .g-card-badges-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.32rem; margin-bottom:.32rem; } .g-card-loc{ display:inline-flex; align-items:center; gap:.25rem; padding:.14rem .52rem; border-radius:999px; background:var(--card); color:var(--ink-soft); border:1px solid var(--line); font-size:.75rem; font-weight:700; line-height:1.25; white-space:nowrap; } .jr-guide-loc-badge{ display:inline-flex; align-items:center; gap:.25rem; padding:.14rem .55rem; border-radius:999px; background:var(--card); color:var(--ink); border:1px solid var(--line); font-size:.75rem; font-weight:700; line-height:1.25; } .g-card-ai-badge{ display:inline-flex; align-items:center; gap:.25rem; padding:.14rem .52rem; border-radius:999px; background:var(--violet-t); color:var(--violet-d); border:1px solid color-mix(in srgb,var(--violet) 26%,var(--line)); font-size:.75rem; font-weight:700; line-height:1.25; white-space:nowrap; } .jr-ai-disclaimer{ display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; margin:.85rem 0 1.15rem; padding:.75rem 1rem; border-radius:1rem; background:var(--card); border:1px solid color-mix(in srgb,var(--violet) 32%,var(--line)); border-left:4px solid var(--violet); } .jr-ai-disclaimer-body{ flex:1 1 16rem; min-width:0; display:grid; gap:.2rem; } .jr-ai-disclaimer-badge{ justify-self:start; display:inline-flex; align-items:center; gap:.3rem; padding:.14rem .55rem; border-radius:999px; background:var(--violet-t); color:var(--violet-d); font-size:.75rem; font-weight:800; } .jr-ai-disclaimer-text{ margin:0; font-size:.82rem; line-height:1.45; color:var(--muted); } .jr-ai-disclaimer-actions{ flex:none; display:flex; align-items:center; gap:.4rem; } /* ---------- Bottom Compact "Recommended for you" Section in Guide Articles ---------- */ .jr-related-guides{ position:relative; overflow:hidden; isolation:isolate; padding:.9rem 1.05rem; border-radius:1.15rem; border:1px solid color-mix(in srgb,#ccb8f0 55%,var(--line)); background:linear-gradient(128deg, #e2d4f7 0%, #dcc6ff 24%, #d8e4fb 50%, #cbe9fb 75%, #b3e0ff 100%) !important; background-size:180% 180% !important; animation:gradient-aurora 3.4s ease-in-out alternate infinite !important; box-shadow:0 12px 26px -22px rgba(40,30,110,.22); } .jr-related-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.35rem .85rem; } .jr-related-title{ margin:.1rem 0 0; font:400 1.2rem/1.2 var(--font-display); font-weight:400 !important; color:var(--ink); letter-spacing:-.01em; } .jr-related-more-link{ font-size:.8rem; font-weight:400 !important; color:var(--violet-d); text-decoration:underline; text-underline-offset:2px; } .jr-related-compact-grid{ display:grid; gap:.6rem; grid-template-columns:1fr; } @media (min-width:768px){ .jr-related-compact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:.65rem; align-items:stretch; } .jr-related-compact-grid > .g-card.g-card-compact:nth-child(1){ grid-column:1; grid-row:1 / span 2; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; height:100%; } .jr-related-compact-grid > .g-card.g-card-compact:nth-child(2){ grid-column:2; grid-row:1; } .jr-related-compact-grid > .g-card.g-card-compact:nth-child(3){ grid-column:2; grid-row:2; } } .g-card.g-card-compact{ grid-template-columns:4.75rem minmax(0,1fr); grid-template-rows:none; min-height:5.4rem; border-radius:.9rem; } .jr-related-guides .g-card.g-card-compact{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; grid-template-rows:none !important; min-height:6.6rem; border-radius:.95rem; } .g-card.g-card-compact .g-card-media{ aspect-ratio:auto; min-height:100%; width:100%; } .jr-related-guides .g-card.g-card-compact .g-card-media{ position:relative !important; inset:auto !important; width:100% !important; height:100% !important; min-height:100% !important; } .g-card.g-card-compact .g-card-cat{ left:.3rem; bottom:.3rem; top:auto; font-size:.75rem; padding:.1rem .38rem; } .jr-related-guides .g-card.g-card-compact .g-card-body .g-card-cat{ position:static !important; left:auto !important; bottom:auto !important; top:auto !important; display:inline-flex !important; align-items:center; gap:.2rem; font-size:.75rem; padding:.1rem .4rem; border-radius:999px; } .g-card.g-card-compact .g-card-body{ padding:.45rem .6rem .5rem; } .jr-related-guides .g-card.g-card-compact .g-card-body{ padding:.55rem .72rem .6rem; display:flex; flex-direction:column; justify-content:space-between; min-width:0; width:100%; } .g-card.g-card-compact .g-card-why{ font-size:.75rem; padding:.06rem .38rem; margin-bottom:.18rem; } .g-card.g-card-compact .g-card-badges-row{ margin-bottom:.16rem; gap:.2rem; } .g-card.g-card-compact .g-card-loc{ font-size:.75rem; padding:.08rem .4rem; } .g-card.g-card-compact .g-card-title{ font-size:.84rem; line-height:1.22; -webkit-line-clamp:2; } .g-card.g-card-compact .g-card-meta{ padding-top:.25rem; font-size:.75rem; } @media (max-width:639px){ .jr-related-guides{ padding:.75rem .85rem; border-radius:1rem; } .jr-related-title{ font-size:1.08rem; } } /* ---------- Interactive & Animated 3D Flip "Three ways to make a route yours" Cards + Compact Route Cards ---------- */ #choicesSection .kicker, #choicesSection h1, #choicesSection .vibe-choice-card h3, #choicesSection .vibe-front-hint, #choicesSection .vibe-face-back .kicker, #choicesSection .vibe-choice-tags .stop-badge, #choicesSection .vibe-choice-cta{ font-weight:400 !important; } @media (min-width:1024px){ .vibe-choice-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } } .vibe-choice-card{ position:relative; display:flex; flex-direction:column; min-height:17.25rem; perspective:1200px; cursor:pointer; background:transparent; border:0; transition:transform .32s cubic-bezier(.2,.8,.2,1); } .vibe-choice-card[data-tone="leaf"]{ --vc-accent:var(--leaf); --vc-ink:var(--leaf-ink); } .vibe-choice-card[data-tone="violet"]{ --vc-accent:var(--violet); --vc-ink:var(--violet-ink); } .vibe-choice-card[data-tone="sun"]{ --vc-accent:var(--sun); --vc-ink:var(--sun-ink); } .vibe-choice-card[data-tone="rose"]{ --vc-accent:var(--rose); --vc-ink:var(--rose-ink); } .vibe-choice-card:hover, .vibe-choice-card:focus-visible, .vibe-choice-card.is-active{ transform:translateY(-6px); } .vibe-flip-inner{ position:relative; width:100%; height:100%; min-height:17.25rem; flex:1; transform-style:preserve-3d; transition:transform .68s cubic-bezier(.2,.8,.2,1); } .vibe-choice-card:hover .vibe-flip-inner, .vibe-choice-card:focus-visible .vibe-flip-inner, .vibe-choice-card:focus-within .vibe-flip-inner, .vibe-choice-card.is-flipped .vibe-flip-inner{ transform:rotateY(180deg); } .vibe-face{ position:absolute; inset:0; display:flex; flex-direction:column; padding:1.65rem; border-radius:2rem; border:.75px solid color-mix(in srgb,var(--vc-accent) 28%,var(--line)) !important; box-shadow:0 22px 44px -26px rgba(19,26,43,.32); backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; } .vibe-face-front{ transform:rotateY(0deg); z-index:2; justify-content:space-between; } .vibe-face-back{ transform:rotateY(180deg); pointer-events:none; justify-content:space-between; } .vibe-choice-card:hover .vibe-face-front, .vibe-choice-card:focus-visible .vibe-face-front, .vibe-choice-card:focus-within .vibe-face-front, .vibe-choice-card.is-flipped .vibe-face-front{ pointer-events:none; } .vibe-choice-card:hover .vibe-face-back, .vibe-choice-card:focus-visible .vibe-face-back, .vibe-choice-card:focus-within .vibe-face-back, .vibe-choice-card.is-flipped .vibe-face-back{ pointer-events:auto; z-index:3; border-color:color-mix(in srgb,var(--vc-accent) 52%,var(--line)); } .vibe-front-hint{ margin-top:auto; padding-top:.85rem; display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:400; opacity:.82; } .vibe-choice-top{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1.1rem; } .vibe-choice-top .ico-badge.ico-lg{ margin-bottom:0; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; } .vibe-choice-card:hover .ico-badge.ico-lg, .vibe-choice-card.is-active .ico-badge.ico-lg{ transform:translateY(-3px) rotate(-6deg) scale(1.08); box-shadow:0 12px 24px -10px rgba(19,26,43,.45); } .vibe-choice-mini{ width:6.75rem; height:2.5rem; flex:none; color:var(--vc-accent); overflow:visible; } .vibe-path-bg{ stroke:color-mix(in srgb,var(--vc-accent) 24%,transparent); stroke-width:3; stroke-linecap:round; } .vibe-path-anim{ stroke:var(--vc-accent); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:6 7; animation:vibePathFlow 2.2s linear infinite; animation-play-state:paused; opacity:.55; transition:opacity .25s ease; } .vibe-choice-card:hover .vibe-path-anim, .vibe-choice-card:focus-visible .vibe-path-anim, .vibe-choice-card.is-active .vibe-path-anim{ animation-play-state:running; opacity:1; } .vibe-pin{ fill:var(--surface); stroke:var(--vc-accent); stroke-width:2.5; transform-box:fill-box; transform-origin:center; transition:transform .3s cubic-bezier(.2,.8,.2,1); } .vibe-choice-card:hover .vibe-pin-1, .vibe-choice-card.is-active .vibe-pin-1{ animation:vibePinPulse 1.6s ease-in-out infinite; } .vibe-choice-card:hover .vibe-pin-2, .vibe-choice-card.is-active .vibe-pin-2{ animation:vibePinPulse 1.6s ease-in-out .4s infinite; } @keyframes vibePathFlow{ to{ stroke-dashoffset:-26; } } @keyframes vibePinPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.28); } } .vibe-choice-tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.75rem; } .vibe-choice-tags .stop-badge{ background:color-mix(in srgb,var(--surface) 88%,transparent); color:var(--vc-ink); border-color:color-mix(in srgb,var(--vc-accent) 22%,var(--line)); font-size:.75rem; font-weight:400; padding:.14rem .52rem; transition:transform .25s ease, border-color .25s ease; } .vibe-choice-card:hover .vibe-choice-tags .stop-badge, .vibe-choice-card.is-active .vibe-choice-tags .stop-badge{ border-color:color-mix(in srgb,var(--vc-accent) 45%,var(--line)); } .vibe-choice-cta{ margin-top:auto; padding-top:.75rem; display:inline-flex; align-items:center; gap:.35rem; font-size:.86rem; font-weight:400; color:var(--vc-ink); text-decoration:none; transition:transform .2s ease; } .vibe-choice-card:hover .vibe-choice-cta, .vibe-choice-card.is-active .vibe-choice-cta{ transform:translateX(3px); text-decoration:underline; text-underline-offset:3px; } @media (max-width:767px){ #choicesSection .kicker{ font-size:.75rem !important; font-weight:400 !important; } #choicesSection h1{ font-size:1.32rem !important; line-height:1.18 !important; font-weight:400 !important; margin-top:.2rem !important; } #choicesSection .vibe-choice-grid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:.55rem !important; margin:.7rem 0 0 !important; padding:0 !important; overflow:visible !important; } #choicesSection .vibe-choice-card{ width:100% !important; min-width:0 !important; min-height:8.1rem !important; height:8.1rem !important; border-radius:1.05rem !important; } #choicesSection .vibe-choice-card:hover, #choicesSection .vibe-choice-card:focus-visible, #choicesSection .vibe-choice-card.is-active{ transform:none !important; } #choicesSection .vibe-flip-inner{ min-height:8.1rem !important; height:8.1rem !important; } #choicesSection .vibe-face{ padding:.68rem .75rem !important; border-radius:1.05rem !important; } #choicesSection .vibe-choice-top{ margin-bottom:.25rem !important; gap:.35rem !important; } #choicesSection .vibe-choice-top .ico-badge.ico-lg{ width:2rem !important; height:2rem !important; border-radius:.62rem !important; } #choicesSection .vibe-choice-top .ico-badge.ico-lg svg{ width:1.25rem !important; height:1.25rem !important; } #choicesSection .vibe-choice-mini{ width:3.8rem !important; height:1.45rem !important; } #choicesSection .vibe-choice-card h3{ font-size:.94rem !important; line-height:1.16 !important; font-weight:400 !important; margin-bottom:.1rem !important; } #choicesSection .vibe-front-hint{ padding-top:.15rem !important; font-size:.75rem !important; font-weight:400 !important; gap:.22rem !important; } #choicesSection .vibe-face-back .kicker{ font-size:.75rem !important; line-height:1.1 !important; } #choicesSection .vibe-face-back p{ margin-top:.14rem !important; font-size:.75rem !important; line-height:1.22 !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } #choicesSection .vibe-choice-tags{ gap:.18rem !important; margin-top:.22rem !important; } #choicesSection .vibe-choice-tags .stop-badge{ font-size:.75rem !important; padding:.06rem .32rem !important; line-height:1.15 !important; } #choicesSection .vibe-choice-cta{ padding-top:.18rem !important; font-size:.75rem !important; } } .jr-compact-route-img, .jr-compact-route-svg{ width:100%; height:100%; object-fit:cover; display:block; } /* ---------- Shorter Scrollable Recent Journeys & Your Routes in Planner ---------- */ #searchHistoryContainer > div:first-child, #yourRoutesSection > div:first-child{ margin-left:1.75rem !important; margin-right:1.75rem !important; } .jr-short-scroll{ max-height:6.25rem; overflow-y:scroll !important; overscroll-behavior:contain; scrollbar-gutter:stable; margin-left:1.75rem !important; margin-right:1.75rem !important; padding:.38rem .5rem .38rem .45rem; border:1px solid color-mix(in srgb,var(--violet) 26%,var(--line)); border-radius:.82rem; background:#F8F9FA; box-shadow:inset 0 1px 3px rgba(19,26,43,.06); } @media (max-width:639px){ #searchHistoryContainer > div:first-child, #yourRoutesSection > div:first-child, .jr-short-scroll{ margin-left:2.15rem !important; margin-right:2.15rem !important; } } :root[data-theme="dark"] .jr-short-scroll{ background:#17223a; border-color:var(--line); } .jr-short-scroll::-webkit-scrollbar{ -webkit-appearance:none; width:7px; height:7px; display:block !important; } .jr-short-scroll::-webkit-scrollbar-track{ background:color-mix(in srgb,var(--line) 82%,var(--surface)); border-radius:999px; margin:4px 0; } .jr-short-scroll::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--violet) 52%,var(--muted)); border-radius:999px; min-height:24px; border:1px solid color-mix(in srgb,var(--surface) 60%,transparent); } .jr-short-scroll::-webkit-scrollbar-thumb:hover{ background:var(--violet); } #joyrideAISection.jr-compact-mission .prose-j p{ margin:.45rem 0; font-size:.94rem; line-height:1.55; } .jr-mission-banner-wrap{ position:relative; border-radius:1.5rem; overflow:hidden; background:#eef3fd; box-shadow:0 16px 36px -18px rgba(19,26,43,.22); perspective:900px; } :root[data-theme="dark"] .jr-mission-banner-wrap{ background:#17223a; box-shadow:0 16px 36px -18px rgba(0,0,0,.55); } .jr-mission-banner, img[src*="logo-banner"]{ background:#eef3fd; border-radius:1.5rem !important; transform:translate3d(0,var(--jr-banner-parallax-y,0px),0) scale(var(--jr-banner-parallax-scale,1)); transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .45s ease; will-change:transform; } :root[data-theme="dark"] .jr-mission-banner, :root[data-theme="dark"] img[src*="logo-banner"]{ background:#17223a !important; } /* ---------- Clean Guides Header & Dynamic Bento-Box Grids (.jr-guides-hero-header, .g-magazine-spread, .jr-bento-grid) ---------- */ .jr-guides-hero-header{ position:relative; padding:0; border-radius:0; background:transparent !important; color:var(--ink); box-shadow:none !important; } .jr-guides-hero-media, .jr-guides-hero-scrim{ display:none !important; } .jr-guides-hero-content{ position:relative; max-width:none; } .jr-guides-hero-content h1{ color:var(--ink) !important; font-weight:400 !important; text-shadow:none !important; } .jr-guides-hero-content .jr-guides-first-line, .jr-guides-hero-content p:not(.kicker){ color:var(--muted) !important; } .jr-guides-hero-content [data-write-cta]{ color:var(--violet) !important; } @media (max-width:639px){ .g-grid.g-magazine-spread{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; align-items:stretch; } .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:nth-child(3n+1), .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:nth-child(3n+2):last-child{ grid-column:1 / -1; min-height:13.25rem; } .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:nth-child(3n+2):not(:last-child), .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:nth-child(3n+3){ grid-column:span 1; min-height:10.5rem; } .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:nth-child(3n+2):not(:last-child) .g-card-body, .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:nth-child(3n+3) .g-card-body{ padding:2.6rem .65rem .65rem; } .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:nth-child(3n+2):not(:last-child) .g-card-title, .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:nth-child(3n+3) .g-card-title{ font-size:.84rem; line-height:1.18; -webkit-line-clamp:2; } } @media (min-width:640px){ .g-grid.g-magazine-spread{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:1.15rem; align-items:stretch; grid-auto-flow:dense; } .g-grid.g-magazine-spread > .g-card{ grid-column:span 6; border-radius:.75rem; } .g-grid.g-magazine-spread > .g-card:nth-child(5n+1){ grid-column:span 12; min-height:20.5rem; height:20.5rem; } .g-grid.g-magazine-spread > .g-card:nth-child(5n+2){ grid-column:span 7; min-height:17rem; height:17rem; } .g-grid.g-magazine-spread > .g-card:nth-child(5n+3){ grid-column:span 5; min-height:17rem; height:17rem; } .g-grid.g-magazine-spread > .g-card:nth-child(5n+4){ grid-column:span 5; min-height:17rem; height:17rem; } .g-grid.g-magazine-spread > .g-card:nth-child(5n+5){ grid-column:span 7; min-height:17rem; height:17rem; } .g-grid.g-magazine-spread > .g-card .g-card-body{ padding:1.15rem 1.35rem 1.3rem; } } @media (min-width:1024px){ /* Desktop Dynamic 2D Bento-Box Grid + Full-Bleed Top-Tier Atmospheric Cards (15-card cycle): Bento Box 1 (1..3): Tall 2-row Hero Left (span 7, row span 2) + 2 Stacked Bento Tiles Right (span 5 each) Top-Tier Banner (4): Full-width 12-col atmospheric visual header card (span 12) Asymmetric Split (5..6): Compact Bento Left (span 4) + Wide Panorama Right (span 8) Bento Box 2 (7..9): 2 Stacked Bento Tiles Left (span 5 each) + Tall 2-row Hero Right (col 6 / span 7, row span 2) Asymmetric Trio (10..12): 3-col + 6-col center feature + 3-col Top-Tier Banner (13): Full-width 12-col atmospheric visual header card (span 12) Asymmetric Split (14..15): Wide Panorama Left (span 8) + Companion Right (span 4) */ .g-grid.g-magazine-spread > .g-card:nth-child(n){ grid-row:auto; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+1){ grid-column:span 7; grid-row:span 2; min-height:24.5rem !important; height:100% !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+2), .g-grid.g-magazine-spread > .g-card:nth-child(15n+3){ grid-column:span 5; min-height:11.65rem !important; height:11.65rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+4){ grid-column:span 12; min-height:21.5rem !important; height:21.5rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+5){ grid-column:span 4; min-height:16.75rem !important; height:16.75rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+6){ grid-column:span 8; min-height:16.75rem !important; height:16.75rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+7){ grid-column:1 / span 5; min-height:11.65rem !important; height:11.65rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+8){ grid-column:6 / span 7; grid-row:span 2; min-height:24.5rem !important; height:100% !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+9){ grid-column:1 / span 5; min-height:11.65rem !important; height:11.65rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+10){ grid-column:span 3; min-height:16.25rem !important; height:16.25rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+11){ grid-column:span 6; min-height:16.25rem !important; height:16.25rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+12){ grid-column:span 3; min-height:16.25rem !important; height:16.25rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+13){ grid-column:span 12; min-height:21.5rem !important; height:21.5rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+14){ grid-column:span 8; min-height:16.75rem !important; height:16.75rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+15){ grid-column:span 4; min-height:16.75rem !important; height:16.75rem !important; } /* Clean full-row completions so trailing rows never leave empty columns */ .g-grid.g-magazine-spread > .g-card:nth-child(15n+1):last-child, .g-grid.g-magazine-spread > .g-card:nth-child(15n+5):last-child, .g-grid.g-magazine-spread > .g-card:nth-child(15n+7):last-child, .g-grid.g-magazine-spread > .g-card:nth-child(15n+10):last-child, .g-grid.g-magazine-spread > .g-card:nth-child(15n+14):last-child{ grid-column:1 / -1; grid-row:auto; min-height:19.5rem !important; height:19.5rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+1):nth-last-child(2){ grid-row:auto; min-height:17.5rem !important; height:17.5rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+2):last-child{ min-height:17.5rem !important; height:17.5rem !important; } /* Compact stacked Bento tiles (2, 3, 7, 9, 10, 12) */ .g-grid.g-magazine-spread > .g-card:nth-child(15n+2) .g-card-body, .g-grid.g-magazine-spread > .g-card:nth-child(15n+3) .g-card-body, .g-grid.g-magazine-spread > .g-card:nth-child(15n+7) .g-card-body, .g-grid.g-magazine-spread > .g-card:nth-child(15n+9) .g-card-body{ padding:2.2rem 1.05rem .85rem !important; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+2) .g-card-title, .g-grid.g-magazine-spread > .g-card:nth-child(15n+3) .g-card-title, .g-grid.g-magazine-spread > .g-card:nth-child(15n+7) .g-card-title, .g-grid.g-magazine-spread > .g-card:nth-child(15n+9) .g-card-title, .g-grid.g-magazine-spread > .g-card:nth-child(15n+10) .g-card-title, .g-grid.g-magazine-spread > .g-card:nth-child(15n+12) .g-card-title{ font-size:clamp(1.02rem,1.2vw,1.18rem); line-height:1.18; -webkit-line-clamp:2; } /* Top-tier & Tall Bento Hero cards (1, 4, 6, 8, 11, 13, 14) */ .g-grid.g-magazine-spread > .g-card:nth-child(15n+1) .g-card-title, .g-grid.g-magazine-spread > .g-card:nth-child(15n+4) .g-card-title, .g-grid.g-magazine-spread > .g-card:nth-child(15n+6) .g-card-title, .g-grid.g-magazine-spread > .g-card:nth-child(15n+8) .g-card-title, .g-grid.g-magazine-spread > .g-card:nth-child(15n+13) .g-card-title, .g-grid.g-magazine-spread > .g-card:nth-child(15n+14) .g-card-title{ font-size:clamp(1.38rem,1.9vw,1.72rem); line-height:1.14; max-width:38ch; } /* Horizontal layout inside full-width & wide panorama cards (4, 6, 13, 14) */ .g-grid.g-magazine-spread > .g-card:nth-child(15n+4) .g-card-body, .g-grid.g-magazine-spread > .g-card:nth-child(15n+6) .g-card-body, .g-grid.g-magazine-spread > .g-card:nth-child(15n+13) .g-card-body, .g-grid.g-magazine-spread > .g-card:nth-child(15n+14) .g-card-body{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:1.5rem; row-gap:.35rem; padding:3.5rem 1.45rem 1.15rem; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+4) .g-card-badges-row, .g-grid.g-magazine-spread > .g-card:nth-child(15n+6) .g-card-badges-row, .g-grid.g-magazine-spread > .g-card:nth-child(15n+13) .g-card-badges-row, .g-grid.g-magazine-spread > .g-card:nth-child(15n+14) .g-card-badges-row{ grid-column:1 / -1; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+4) .g-card-title, .g-grid.g-magazine-spread > .g-card:nth-child(15n+6) .g-card-title, .g-grid.g-magazine-spread > .g-card:nth-child(15n+13) .g-card-title, .g-grid.g-magazine-spread > .g-card:nth-child(15n+14) .g-card-title{ grid-column:1; margin:0; } .g-grid.g-magazine-spread > .g-card:nth-child(15n+4) .g-card-meta, .g-grid.g-magazine-spread > .g-card:nth-child(15n+6) .g-card-meta, .g-grid.g-magazine-spread > .g-card:nth-child(15n+13) .g-card-meta, .g-grid.g-magazine-spread > .g-card:nth-child(15n+14) .g-card-meta{ grid-column:2; border-top:0 !important; padding-top:0 !important; margin-top:0 !important; justify-content:flex-end; white-space:nowrap; } } /* ---------- Interactive Map Explorer (Guides & Ready-Made Routes) ---------- */ .jr-view-toggle{ display:inline-flex; align-items:center; gap:.25rem; padding:.22rem; border-radius:.8rem; background:var(--card); border:1px solid var(--line); } .jr-view-btn{ display:inline-flex; align-items:center; gap:.35rem; padding:.38rem .75rem; border-radius:.6rem; border:0; background:transparent; color:var(--muted); font-size:.78rem; font-weight:700; cursor:pointer; transition:all .15s ease; } .jr-view-btn:hover{ color:var(--ink); } .jr-view-btn.is-active{ background:var(--violet-grad); color:#fff; box-shadow:0 6px 14px -6px rgba(83,56,230,.55); } .jr-explorer-shell{ padding:1rem; border-radius:1.45rem; background:var(--surface); border:1px solid var(--line); box-shadow:0 22px 48px -28px rgba(19,26,43,.38); } .jr-explorer-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; padding-bottom:.85rem; border-bottom:1px solid var(--line); } .jr-explorer-regions{ display:flex; flex-wrap:wrap; gap:.35rem; } .jr-region-pill{ display:inline-flex; align-items:center; gap:.3rem; padding:.32rem .7rem; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); font-size:.76rem; font-weight:700; cursor:pointer; transition:all .15s; } .jr-region-pill.is-active{ background:var(--violet-t); color:var(--violet-d); border-color:color-mix(in srgb,var(--violet) 40%,var(--line)); } .jr-region-count{ padding:.05rem .38rem; border-radius:999px; background:var(--surface); font-size:.75rem; font-weight:800; color:var(--muted); } .jr-explorer-zoom{ display:inline-flex; align-items:center; gap:.25rem; } .jr-zoom-btn{ min-width:2rem; height:2rem; padding:0 .5rem; border-radius:.55rem; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:.86rem; font-weight:800; cursor:pointer; } .jr-zoom-btn:hover{ border-color:var(--violet); color:var(--violet-d); } .jr-zoom-reset{ font-size:.75rem; padding:0 .6rem; } .jr-explorer-body{ display:grid; gap:1rem; margin-top:.9rem; grid-template-columns:1fr; } @media (min-width:860px){ .jr-explorer-body{ grid-template-columns:minmax(0,1.35fr) minmax(17.5rem,.85fr); align-items:stretch; } } .jr-explorer-viewport{ position:relative; min-height:310px; border-radius:1.15rem; border:1px solid var(--line); background:radial-gradient(circle at 50% 45%,var(--surface) 0%,var(--card) 100%); overflow:hidden; cursor:grab; user-select:none; } .jr-explorer-viewport.is-dragging{ cursor:grabbing; } .jr-explorer-stage{ position:absolute; inset:0; transform-origin:50% 50%; transition:transform .16s ease-out; } .jr-explorer-viewport.is-dragging .jr-explorer-stage{ transition:none; } .jr-explorer-vector{ width:100%; height:100%; display:block; } .jr-vector-zone-label{ font:800 13px/1 var(--font-sans); letter-spacing:.08em; fill:var(--muted); opacity:.72; } .jr-explorer-pins{ position:absolute; inset:0; pointer-events:none; } .jr-explorer-pin{ position:absolute; transform:translate(-50%,-50%); pointer-events:auto; display:inline-flex; align-items:center; gap:.28rem; padding:0; border:0; background:transparent; cursor:pointer; z-index:2; transition:transform .2s cubic-bezier(.2,.8,.2,1); } .jr-explorer-pin:hover, .jr-explorer-pin.is-active{ z-index:10; transform:translate(-50%,-50%) scale(1.14); } .jr-explorer-pin-pulse{ position:absolute; left:.95rem; top:50%; width:2.1rem; height:2.1rem; transform:translate(-50%,-50%); border-radius:999px; background:var(--pin-c,var(--violet)); opacity:0; pointer-events:none; } .jr-explorer-pin.is-active .jr-explorer-pin-pulse{ opacity:.25; animation:jrPinRipple 1.8s ease-out infinite; } @keyframes jrPinRipple{ 0%{ transform:translate(-50%,-50%) scale(.8); opacity:.38; } 100%{ transform:translate(-50%,-50%) scale(1.75); opacity:0; } } .jr-explorer-pin-head{ width:1.9rem; height:1.9rem; border-radius:999px; background:var(--surface); border:2.5px solid var(--pin-c,var(--violet)); color:var(--pin-c,var(--violet)); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 14px -6px rgba(19,26,43,.5); } .jr-explorer-pin.is-active .jr-explorer-pin-head{ background:var(--pin-c,var(--violet)); color:#fff; } .jr-explorer-pin-ico{ width:1rem; height:1rem; } .jr-explorer-pin-dot{ width:.55rem; height:.55rem; border-radius:999px; background:currentColor; } .jr-explorer-pin-tag{ max-width:8.5rem; padding:.14rem .48rem; border-radius:999px; background:color-mix(in srgb,var(--surface) 92%,transparent); border:1px solid var(--line); color:var(--ink); font-size:.75rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 4px 10px -6px rgba(19,26,43,.35); } .jr-explorer-pin.is-active .jr-explorer-pin-tag{ border-color:var(--pin-c,var(--violet)); font-weight:800; } .jr-explorer-hint{ position:absolute; left:.65rem; bottom:.5rem; margin:0; padding:.18rem .55rem; border-radius:999px; background:color-mix(in srgb,var(--surface) 86%,transparent); backdrop-filter:blur(6px); font-size:.75rem; font-weight:600; color:var(--muted); pointer-events:none; } .jr-explorer-popup{ display:flex; flex-direction:column; border-radius:1.15rem; border:1px solid var(--line); background:var(--card); overflow:hidden; } .jr-explorer-popup-media{ position:relative; aspect-ratio:16/9; max-height:9.5rem; background:var(--violet-t); overflow:hidden; } .jr-explorer-popup-img{ width:100%; height:100%; object-fit:cover; display:block; } .jr-explorer-popup-cat{ position:absolute; left:.55rem; bottom:.55rem; padding:.18rem .55rem; border-radius:999px; background:var(--surface); color:var(--c,var(--violet)); font-size:.75rem; font-weight:800; } .jr-explorer-popup-body{ display:flex; flex-direction:column; flex:1; padding:.85rem 1rem 1rem; gap:.45rem; } .jr-explorer-popup-title{ margin:0; font:800 1.05rem/1.25 var(--font-display); color:var(--ink); } .jr-explorer-popup-sum{ margin:0; font-size:.82rem; line-height:1.45; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .jr-explorer-popup-stops{ padding:.45rem .6rem; border-radius:.75rem; background:var(--surface); border:1px solid var(--line); } .jr-explorer-popup-stops-list{ margin:.15rem 0 0; font-size:.75rem; font-weight:600; color:var(--ink-soft); line-height:1.35; } .jr-explorer-popup-actions{ margin-top:auto; padding-top:.35rem; display:flex; flex-wrap:wrap; gap:.45rem; } /* ---------- Country & City Filter Bar (.jr-location-filter) + 5-Pillar Native App UI ---------- */ /* Pillar 1: Fixed Top Header & Hidden Web Remnants */ #siteNav.topbar{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:50 !important; } .skip-link:not(:focus):not(:focus-visible){ position:fixed !important; top:-6rem !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; opacity:0 !important; pointer-events:none !important; } #pageBackLink{ display:none !important; } /* Pillar 2: Floating Input Labels & Enclosed Card Elements (#F8F9FA) */ #planJourneySection .panel h2, #planJourneySection .panel h3, #planJourneySection .panel .field-label, #planJourneySection .panel .quick-or, #planJourneySection .panel .jr-floating-label, #planJourneySection .panel .jr-floating-input.field, #planJourneySection .panel .jr-swap-pill, #planJourneySection .panel .chip span, #planJourneySection .panel .chip input:checked + span, #planJourneySection .panel .my-stops-summary, #planJourneySection .panel .my-stops-summary-title, #planJourneySection .panel .my-stops-badge, #planJourneySection .panel #myStopsSummaryBadge, #planJourneySection .panel .my-stops-check, #planJourneySection .panel .my-stops-check span, #planJourneySection .panel .type-chip span, #planJourneySection .panel .type-chip input:checked + span, #planJourneySection .panel .my-stops-reset, #planJourneySection .panel .your-route-btn, #planJourneySection .panel .ex-trips-label, #planJourneySection .panel .ex-chip{ font-weight:400 !important; } .jr-app-group-card{ margin:0; padding:.78rem .88rem; border-radius:.82rem !important; background:#F8F9FA; border:1px solid color-mix(in srgb,var(--line) 88%,transparent); box-shadow:0 6px 18px -12px rgba(19,26,43,.14), inset 0 1px 0 rgba(255,255,255,.75); } :root[data-theme="dark"] .jr-app-group-card{ background:#17223a; border-color:var(--line); box-shadow:0 8px 22px -12px rgba(0,0,0,.45); } .jr-app-group-card > legend.field-label{ padding:0; margin-bottom:.42rem; font-size:.76rem; font-weight:400; color:var(--ink-soft); letter-spacing:-.005em; } .jr-endpoints-card{ display:flex; flex-direction:column; gap:.35rem; } .jr-floating-field{ position:relative; } .jr-floating-label{ position:absolute; top:.36rem; left:.88rem; z-index:2; margin:0 !important; font-size:.75rem !important; font-weight:400 !important; line-height:1.15; color:var(--muted); letter-spacing:.01em; pointer-events:none; transition:color .15s ease; } .jr-floating-field:focus-within .jr-floating-label{ color:var(--violet); } .jr-floating-input.field{ padding:1.32rem .92rem .42rem !important; min-height:3.1rem; border-radius:.82rem !important; background:var(--surface); font-size:.94rem; font-weight:400; line-height:1.28; } .jr-floating-input.field.pr-12{ padding-right:3rem !important; } .jr-endpoints-divider{ position:relative; display:flex; align-items:center; justify-content:flex-end; min-height:1.25rem; margin:-.18rem 0; z-index:3; } .jr-endpoints-line{ position:absolute; left:.75rem; right:4.8rem; top:50%; height:1px; background:color-mix(in srgb,var(--line) 85%,transparent); pointer-events:none; } .jr-swap-pill{ position:relative; z-index:2; min-height:1.65rem !important; min-width:0 !important; padding:.16rem .62rem !important; border-radius:.82rem !important; background:var(--surface); border:1px solid var(--line); box-shadow:0 3px 10px -4px rgba(19,26,43,.16); transition:border-color .15s, transform .15s; } .jr-swap-pill:hover{ border-color:var(--violet); transform:translateY(-1px); } /* Pillar 3: Segmented Controls & Full-Width Capsule Action Button */ .chip-row.jr-segmented-control{ display:grid; gap:.2rem !important; padding:.22rem; border-radius:.82rem !important; background:color-mix(in srgb,var(--line) 58%,var(--surface)); border:1px solid var(--line); } :root[data-theme="dark"] .chip-row.jr-segmented-control{ background:#0f172a; border-color:var(--line); } .chip-row.jr-segmented-control[data-vibe-chips]{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } .chip-row.jr-segmented-control[data-mode-chips]{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } .chip-row.jr-segmented-control .chip{ min-width:0; } .chip-row.jr-segmented-control .chip span{ min-height:2.2rem; padding:.32rem .22rem; border:0 !important; border-radius:.82rem !important; background:transparent; color:var(--ink-soft); font-size:clamp(.75rem, 1.85vw, .78rem); font-weight:400 !important; gap:.22rem; box-shadow:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chip-row.jr-segmented-control .chip input:checked + span{ font-weight:400 !important; } .chip-row.jr-segmented-control .chip span svg.ico-inline{ width:1em; height:1em; flex:none; } .chip-row.jr-segmented-control .chip span svg.jr-cam-bw{ fill:none !important; stroke:currentColor !important; stroke-width:2; color:#111827; } :root[data-theme="dark"] .chip-row.jr-segmented-control .chip span svg.jr-cam-bw{ color:#f8fafc; } .chip-row.jr-segmented-control .chip input:checked + span svg.jr-cam-bw{ color:#ffffff !important; } .chip-row.jr-segmented-control .chip input:checked + span{ box-shadow:0 4px 12px -4px rgba(19,26,43,.28); } #modeFieldset.jr-app-group-card{ padding:.58rem .76rem; } #modeFieldset.jr-app-group-card > legend.field-label{ margin-bottom:.3rem; } #modeFieldset [data-mode-chips].jr-segmented-control{ background:color-mix(in srgb,#2563eb 7%,var(--surface)); border-color:color-mix(in srgb,#2563eb 18%,var(--line)); } :root[data-theme="dark"] #modeFieldset [data-mode-chips].jr-segmented-control{ background:#0f172a; border-color:color-mix(in srgb,#3b82f6 26%,var(--line)); } #planForm .my-stops-details, #planForm .my-stops-summary{ border-radius:.82rem !important; } #planJourneyBtn.jr-capsule-cta{ width:100% !important; border-radius:.82rem !important; min-height:3rem; padding:.72rem 1.3rem; font-weight:400 !important; letter-spacing:-.005em; background:linear-gradient(135deg, #8b5cf6 0%, #7c3aed 52%, #6d28d9 100%) !important; color:#ffffff !important; box-shadow:0 12px 26px -10px rgba(124,58,237,.55), inset 0 1px 0 rgba(255,255,255,.26); } #planJourneyBtn.jr-capsule-cta:hover{ background:linear-gradient(135deg, #9366f9 0%, #8344f0 52%, #7432df 100%) !important; } /* Pillar 4: Fixed Bottom Navigation Bar & Pill Active State */ @media (max-width:1023px){ #tabbar.tabbar{ position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:48 !important; padding:.28rem .5rem calc(.28rem + var(--safe-b)) !important; background:color-mix(in srgb,var(--surface) 95%,transparent); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-top:1px solid var(--line); box-shadow:0 -8px 26px -14px rgba(19,26,43,.22); } #tabbar.tabbar a, #tabbar.tabbar button{ border-radius:999px !important; padding:.22rem .35rem; transition:background .18s ease, color .18s ease, transform .15s ease; } #tabbar.tabbar [aria-current], #tabbar.tabbar [aria-current="page"]{ color:var(--violet-d) !important; background:var(--violet-t) !important; border-radius:999px !important; font-weight:800 !important; box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--violet) 32%,transparent); } } /* Pillar 5: Single-Row Quick Trio (Explore + Surprise + Good time) & In-App Scrollable Bottom Sheet */ .quick-row.jr-quick-trio{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:.38rem !important; align-items:stretch !important; } .quick-row.jr-quick-trio > .quick-btn{ min-height:2.35rem !important; height:100%; padding:.32rem .45rem !important; border-radius:.82rem !important; border:.75px solid rgba(106,76,255,.22) !important; font-size:clamp(.75rem, 1.8vw, .78rem) !important; font-weight:400 !important; gap:.26rem !important; min-width:0; white-space:nowrap; overflow:hidden; } .quick-row.jr-quick-trio > .quick-btn svg{ width:.95rem !important; height:.95rem !important; flex:none; } #goodTimeCard.jr-status-badge{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:center !important; gap:.28rem !important; margin-top:0 !important; min-height:2.35rem !important; height:100%; padding:.28rem .48rem !important; border-radius:.82rem !important; background:var(--leaf-t); border:.75px solid color-mix(in srgb,var(--leaf) 26%,var(--line)) !important; box-shadow:0 4px 12px -8px rgba(18,107,66,.22); cursor:pointer; min-width:0; overflow:hidden; transition:background .15s ease, transform .15s ease, border-color .15s ease; } #goodTimeCard.jr-status-badge:hover{ border-color:var(--leaf); transform:translateY(-1px); } #goodTimeCard.jr-status-badge .good-time-main{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:.26rem !important; min-width:0; flex:1 1 auto; overflow:hidden; } .good-time-clock{ width:.9rem !important; height:.9rem !important; color:var(--ok); flex:none; } #goodTimeCard.jr-status-badge .good-time-kicker{ display:inline-block !important; flex:0 1 auto; font-size:clamp(.75rem, 1.65vw, .75rem) !important; font-weight:400 !important; color:var(--ok); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #goodTimeCard.jr-status-badge .good-time-text{ position:absolute !important; width:1px !important; height:1.25rem !important; line-height:1.25rem !important; padding:0 !important; margin:0 !important; font-size:.75rem !important; font-weight:400; color:var(--ink); white-space:nowrap !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; border:0 !important; } #goodTimeCard.jr-status-badge .good-time-cta{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:0 !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; border:0 !important; } /* Non-bold Hierarchy for Recent Journeys & Your Routes (content font <= heading label font) */ .jr-stream-heading{ margin:0; font-family:var(--font-display); font-size:.86rem !important; font-weight:400 !important; letter-spacing:.01em; color:var(--ink); } .jr-stream-action{ font-family:var(--font-sans); font-size:.75rem !important; font-weight:400 !important; color:var(--muted); background:transparent; border:0; padding:0; cursor:pointer; } .jr-history-item{ border-radius:.82rem !important; font-family:var(--font-sans); font-size:.8rem !important; font-weight:400 !important; min-height:2.05rem !important; padding:.32rem .65rem !important; } .jr-history-label, .your-route-title{ font-family:var(--font-display); font-size:.8rem !important; font-weight:400 !important; color:var(--ink); line-height:1.22; } .jr-route-primary{ font-family:var(--font-display); font-size:.8rem !important; font-weight:400 !important; color:var(--ink); } .jr-route-connector{ font-family:var(--font-sans); font-size:.75rem !important; font-weight:400 !important; color:var(--muted); margin:0 .12rem; } .jr-route-secondary{ font-family:var(--font-sans); font-size:.75rem !important; font-weight:400 !important; color:var(--ink-soft); } .your-routes{ padding-top:.55rem !important; margin-top:.55rem !important; } .your-route-item{ border-radius:.82rem !important; padding:.36rem .58rem !important; display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; gap:.4rem !important; } .your-route-info{ min-width:0 !important; flex:1 1 0% !important; overflow:hidden; } .your-route-meta{ font-family:var(--font-data); font-size:.75rem !important; font-weight:400 !important; color:var(--muted) !important; letter-spacing:.005em; } .your-route-actions{ display:inline-flex !important; align-items:center !important; gap:.28rem !important; flex:none !important; } .your-route-btn{ border-radius:.82rem !important; font-family:var(--font-sans); font-size:.75rem !important; font-weight:400 !important; min-height:1.65rem !important; padding:.14rem .46rem !important; color:var(--violet-d) !important; white-space:nowrap; } [data-page-content="dashboard"] h2, [data-page-content="dashboard"] #dashClearHistoryBtn, [data-page-content="dashboard"] .tile p{ font-weight:400 !important; } .jr-planner-stream{ max-height:none !important; overflow:visible !important; } .jr-planner-stream:not(:has(> :not([hidden]))){ display:none !important; } .jr-bottom-sheet{ position:relative; z-index:10; margin-top:-1.1rem; border-radius:1.85rem 1.85rem 0 0; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -16px 40px -20px rgba(19,26,43,.22); overflow:hidden; } .jr-bottom-sheet-handle{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.28rem; padding:.6rem 1rem .35rem; background:var(--surface); border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent); } .jr-sheet-pill{ display:block; width:2.75rem; height:.3rem; border-radius:999px; background:color-mix(in srgb,var(--muted) 38%,var(--line)); } .jr-sheet-title{ font-size:.75rem; font-weight:400; color:var(--muted); letter-spacing:.01em; } @media (max-width:639px){ #planJourneySection{ --jr-mobile-gap:clamp(.22rem, calc((100dvh - 38.2rem) / 7), 1.5rem); --jr-mobile-pad-extra:clamp(0px, calc((100dvh - 41.5rem) / 14), 8px); padding-top:calc(3.6rem + var(--safe-t)) !important; padding-bottom:calc(var(--tab-h) + var(--safe-b) + .4rem) !important; } #planJourneySection > div{ gap:.52rem !important; width:100%; align-items:stretch !important; } .hero-title{ font-size:clamp(1.1rem, 4.5vw, 1.28rem) !important; font-weight:400 !important; line-height:1.15 !important; margin:.38rem auto .32rem !important; text-align:center !important; } #planJourneySection .panel{ width:100% !important; padding:.55rem .72rem !important; border-radius:1.05rem !important; display:flex !important; flex-direction:column !important; justify-content:flex-start !important; align-items:stretch !important; } .planner-title-row{ margin-bottom:var(--jr-mobile-gap) !important; } #planJourneySection .panel h2{ font-size:.98rem !important; margin-bottom:0 !important; } .quick-row.jr-quick-trio{ gap:.34rem !important; margin-bottom:var(--jr-mobile-gap) !important; } .quick-row.jr-quick-trio > .quick-btn, #goodTimeCard.jr-status-badge{ min-height:calc(2.52rem + var(--jr-mobile-pad-extra)) !important; padding:calc(.28rem + var(--jr-mobile-pad-extra) * .35) .44rem !important; font-size:.84rem !important; border-radius:.75rem !important; border-width:.75px !important; } #goodTimeCard.jr-status-badge .good-time-kicker{ font-size:.84rem !important; } .quick-or{ display:none !important; margin:0 !important; } .plan-form{ display:flex !important; flex-direction:column !important; gap:var(--jr-mobile-gap) !important; } .plan-form > * + *{ margin-top:0 !important; } .jr-app-group-card{ padding:calc(.42rem + var(--jr-mobile-pad-extra)) .55rem !important; border-radius:.75rem !important; } #vibeFieldset.jr-app-group-card, #modeFieldset.jr-app-group-card{ padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; border-radius:.75rem !important; } .jr-app-group-card > legend.field-label, #vibeFieldset.jr-app-group-card > legend.field-label, #modeFieldset.jr-app-group-card > legend.field-label{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0, 0, 0, 0) !important; white-space:nowrap !important; border:0 !important; } .jr-endpoints-card{ gap:calc(.22rem + var(--jr-mobile-pad-extra) * .4) !important; } .jr-floating-input.field{ padding:.98rem .72rem .22rem !important; min-height:calc(2.55rem + var(--jr-mobile-pad-extra)) !important; font-size:.92rem !important; border-radius:.75rem !important; } .jr-floating-label{ top:.22rem !important; left:.72rem !important; font-size:.76rem !important; } .jr-endpoints-divider{ min-height:.95rem !important; margin:-.14rem 0 !important; } .jr-swap-pill{ min-height:1.48rem !important; padding:.12rem .52rem !important; font-size:.78rem !important; border-radius:.75rem !important; } .chip-row.jr-segmented-control{ padding:.24rem !important; gap:.22rem !important; border-radius:.75rem !important; } .chip-row.jr-segmented-control .chip span{ min-height:calc(2.65rem + var(--jr-mobile-pad-extra)) !important; padding:.34rem .2rem !important; font-size:.84rem !important; gap:.2rem !important; border-radius:.75rem !important; } [data-mode-chips].jr-segmented-control .chip span{ font-size:.92rem !important; padding:.34rem .36rem !important; gap:.28rem !important; } #planForm .my-stops-details, #planForm .my-stops-summary{ min-height:calc(2.38rem + var(--jr-mobile-pad-extra) * .8) !important; padding:.32rem .66rem !important; font-size:.86rem !important; border-radius:.75rem !important; } #planJourneyBtn.jr-capsule-cta{ min-height:calc(2.9rem + var(--jr-mobile-pad-extra)) !important; padding:.52rem 1rem !important; font-size:.98rem !important; margin-top:0 !important; border-radius:.75rem !important; } #planJourneySection .ex-result{ margin-top:.75rem !important; } } @media (max-width:639px) and (max-height:700px){ #planJourneySection{ padding-top:calc(3.3rem + var(--safe-t)) !important; } #planJourneySection > div{ gap:.26rem !important; } .hero-title{ font-size:1.05rem !important; line-height:1.1 !important; margin:.18rem auto .14rem !important; text-align:center !important; } #planJourneySection .panel{ padding:.46rem .62rem !important; } .quick-row.jr-quick-trio > .quick-btn, #goodTimeCard.jr-status-badge{ min-height:2.15rem !important; padding:.22rem .36rem !important; } .jr-app-group-card{ padding:.34rem .46rem !important; } #vibeFieldset.jr-app-group-card, #modeFieldset.jr-app-group-card{ padding:0 !important; } .jr-floating-input.field{ min-height:2.28rem !important; padding:.88rem .64rem .18rem !important; } .chip-row.jr-segmented-control .chip span{ min-height:2.25rem !important; } #planForm .my-stops-details, #planForm .my-stops-summary{ min-height:2.05rem !important; padding:.24rem .56rem !important; } #planJourneyBtn.jr-capsule-cta{ min-height:2.55rem !important; } } /* Country, City & Vibe Single-Row Bordered Filter Bar + Integrated Search (Guides & Ready-Made Routes) */ .jr-location-filter.jr-minimal-filter-bar{ padding:.45rem 0; border-radius:0; background:transparent !important; border:0; border-bottom:.75px solid color-mix(in srgb,var(--line) 80%,transparent); box-shadow:none !important; } .jr-minimal-filter-row, .jr-loc-filter-row.jr-all-guides-toolbar{ display:flex; flex-wrap:nowrap !important; align-items:center; justify-content:space-between; gap:.5rem; width:100%; } .jr-inline-dropdowns{ display:inline-flex; flex-wrap:nowrap !important; align-items:center; gap:.4rem; flex:0 1 auto; min-width:0; } .jr-minimal-select-wrap{ position:relative; display:inline-flex; align-items:center; min-width:0; } .jr-minimal-select{ appearance:none; -webkit-appearance:none; padding:.26rem 1.38rem .26rem .62rem; border:1px solid color-mix(in srgb,var(--violet) 38%,var(--line)) !important; border-radius:999px; background:color-mix(in srgb,var(--surface) 88%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 4.6L6 7.4l2.8-2.8' fill='none' stroke='%2364748b' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .44rem center/.66rem; color:var(--ink); font-size:.78rem; font-weight:400; line-height:1.25; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .jr-minimal-select:hover, .jr-minimal-select:focus-visible, .jr-minimal-select.is-filtered{ color:var(--violet-d); border-color:var(--violet) !important; background-color:color-mix(in srgb,var(--violet-t) 55%,var(--surface)); box-shadow:0 0 0 2px color-mix(in srgb,var(--violet) 14%,transparent); outline:none; } .jr-dropdown-sep{ display:none; } .jr-minimal-search, .jr-loc-filter-row .jr-loc-filter-search{ flex:0 1 auto; min-width:6.5rem; margin-left:auto; } .jr-minimal-search-wrap, .jr-loc-filter-row .jr-search-wrap{ position:relative; display:inline-flex; align-items:center; gap:.35rem; width:100%; } .jr-minimal-search-input{ width:13.5rem; max-width:100%; min-height:1.95rem !important; padding:.28rem .72rem !important; border-radius:999px !important; border:1px solid color-mix(in srgb,var(--violet) 38%,var(--line)) !important; background:color-mix(in srgb,var(--surface) 88%,transparent); color:var(--ink); font-size:.78rem !important; font-weight:400 !important; line-height:1.3; transition:width .24s cubic-bezier(.22,1,.36,1), border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } .jr-minimal-search-input::placeholder{ color:var(--muted); opacity:.82; } .jr-minimal-search-input:focus, .jr-minimal-search-input.is-filtered{ width:17.5rem; background:var(--surface); border-color:var(--violet) !important; box-shadow:0 0 0 2px color-mix(in srgb,var(--violet) 14%,transparent); outline:none; } @media (max-width:639px){ .jr-minimal-filter-row, .jr-loc-filter-row.jr-all-guides-toolbar{ flex-wrap:nowrap !important; gap:.24rem; } .jr-inline-dropdowns{ gap:.2rem; flex:0 1 auto; } .jr-minimal-select{ font-size:.75rem; padding:.2rem 1rem .2rem .42rem; background-position:right .28rem center; max-width:5.3rem; } .jr-minimal-search, .jr-loc-filter-row .jr-loc-filter-search{ flex:1 1 5.2rem; min-width:4.8rem; width:auto; margin-left:auto; } .jr-minimal-search-wrap, .jr-loc-filter-row .jr-search-wrap{ width:100%; } .jr-minimal-search-input, .jr-minimal-search-input:focus, .jr-minimal-search-input.is-filtered{ width:100%; font-size:.75rem !important; padding:.22rem .52rem !important; min-height:1.75rem !important; } } .jr-results-counter{ font-size:.76rem; font-weight:400; color:var(--muted); letter-spacing:.01em; } .jr-country-heading .jr-group-count{ opacity:0; font-size:.78rem; font-weight:400; color:var(--muted); transition:opacity .18s ease; } .jr-country-group:hover .jr-country-heading .jr-group-count, .jr-country-group:focus-within .jr-country-heading .jr-group-count, .jr-country-heading:hover .jr-group-count{ opacity:1; } /* ---------- Google Maps Place Details Tooltip (.stop-details-tooltip) ---------- */ .stop-act-btn.stop-maps-link.is-active{ background:var(--violet-t); color:var(--violet-d); border-color:color-mix(in srgb,var(--violet) 48%,var(--line)); } .stop-details-tooltip{ position:relative; margin-top:.55rem; padding:.75rem .85rem; border-radius:.95rem; background:var(--surface); border:1.5px solid color-mix(in srgb,var(--violet) 38%,var(--line)); box-shadow:0 16px 34px -18px rgba(19,26,43,.42); animation:jrTooltipPop .18s cubic-bezier(.2,.8,.2,1); } .stop-details-tooltip[hidden]{ display:none !important; } @keyframes jrTooltipPop{ from{ opacity:0; transform:translateY(-4px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } } .stop-tooltip-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.3rem; } .stop-tooltip-close{ width:1.5rem; height:1.5rem; flex:none; border-radius:.45rem; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:.75rem; font-weight:800; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .stop-tooltip-close:hover{ color:var(--ink); border-color:var(--violet); } .stop-tooltip-title{ display:inline-flex; align-items:center; gap:.35rem; margin:0; font:800 .92rem/1.25 var(--font-display); color:var(--ink); min-width:0; } .stop-tooltip-pin{ color:var(--violet-d); flex:none; } .stop-tooltip-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; margin-top:.35rem; } .stop-tooltip-summary{ margin:.45rem 0 0; font-size:.78rem; line-height:1.45; color:var(--ink-soft); } .stop-tooltip-info{ margin-top:.45rem; padding-top:.45rem; border-top:1px dashed var(--line); display:grid; gap:.22rem; font-size:.75rem; color:var(--muted); } .stop-tooltip-row{ line-height:1.35; } .stop-tooltip-k{ font-weight:700; color:var(--ink-soft); } .stop-tooltip-foot{ margin-top:.5rem; padding-top:.42rem; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.75rem; } .stop-tooltip-cost{ font-weight:700; color:var(--ink-soft); } .stop-tooltip-website{ font-weight:800; color:var(--violet-d); text-decoration:none; } .stop-tooltip-website:hover{ text-decoration:underline; } /* ---------- First-Time User Animated Walkthrough & Replay (?) Buttons ---------- */ .tour-help-btn{ display:inline-flex; align-items:center; gap:.32rem; padding:.24rem .58rem .24rem .32rem; border-radius:999px; border:1.5px solid color-mix(in srgb,var(--violet) 34%,var(--line)); background:color-mix(in srgb,var(--violet-t) 68%,var(--surface)); color:var(--violet-d); font-size:.75rem; font-weight:800; line-height:1; cursor:pointer; transition:all .16s ease; flex:none; } .tour-help-btn:hover{ border-color:var(--violet); background:var(--violet-t); transform:translateY(-1px); box-shadow:0 6px 14px -6px rgba(83,56,230,.38); } #plannerTourBtn.tour-help-btn, #customizeTourBtn.tour-help-btn{ padding:.08rem .12rem !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:var(--muted) !important; font-size:.75rem !important; font-weight:400 !important; line-height:1.15 !important; text-decoration:none; transform:none !important; display:inline-flex !important; align-items:center !important; gap:.22rem !important; } #plannerTourBtn.tour-help-btn:hover, #customizeTourBtn.tour-help-btn:hover{ color:var(--ink) !important; background:transparent !important; box-shadow:none !important; text-decoration:underline; } #plannerTourBtn .tour-help-q, #customizeTourBtn .tour-help-q{ display:inline-flex !important; align-items:center; justify-content:center; width:.78rem !important; height:.78rem !important; border-radius:999px !important; border:1px solid currentColor !important; background:transparent !important; color:inherit !important; font-size:.75rem !important; font-weight:400 !important; line-height:1 !important; } .tour-help-q{ width:1.2rem; height:1.2rem; border-radius:999px; background:var(--violet-grad); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:400; } .jr-tour-overlay{ position:fixed; inset:0; z-index:85; pointer-events:none; display:flex; align-items:flex-start; justify-content:flex-start; padding:5.25rem 1rem 1rem max(1rem,calc((100vw - 72rem)/2 + 1rem)); } .jr-tour-overlay[hidden]{ display:none !important; } .jr-tour-overlay[data-tour-mode="manual"]{ pointer-events:auto; align-items:center; justify-content:center; padding:1rem; background:rgba(15,20,34,.52); backdrop-filter:blur(6px); } .jr-tour-card{ pointer-events:auto; width:min(26rem,calc(100vw - 1.5rem)); border-radius:1.35rem; background:var(--surface); border:1.5px solid color-mix(in srgb,var(--violet) 42%,var(--line)); box-shadow:0 26px 60px -22px rgba(19,26,43,.58); padding:1rem 1.05rem 1rem; animation:jrTourCardIn .26s cubic-bezier(.2,.8,.2,1); font-weight:400; overflow:hidden; } .jr-tour-card *, .jr-tour-card strong, .jr-tour-card b{ font-weight:400 !important; } .jr-tour-overlay[data-tour-mode="manual"] .jr-tour-card{ width:min(28rem,calc(100vw - 1.5rem)); } @media (max-width:1023px){ html[data-webdriver="1"] .jr-tour-overlay[data-tour-mode="auto"]:not([data-tour-interactive="1"]) .jr-tour-card{ pointer-events:none; } } @keyframes jrTourCardIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } } .jr-tour-top{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-bottom:.6rem; flex-wrap:nowrap !important; width:100%; overflow:hidden; } .jr-tour-kicker{ font-size:.75rem; font-weight:400 !important; color:var(--violet-d); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto; } .jr-tour-top-right{ display:inline-flex; align-items:center; gap:.32rem; flex-wrap:nowrap !important; flex:none; } .jr-tour-step-pill{ padding:.14rem .46rem; border-radius:999px; background:var(--violet-t); color:var(--violet-d); font-size:.75rem; font-weight:400 !important; white-space:nowrap; flex:none; } .jr-tour-close{ width:1.55rem; height:1.55rem; border-radius:.45rem; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:.75rem; font-weight:400 !important; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none; } .jr-tour-close:hover{ color:var(--ink); border-color:var(--violet); } .jr-tour-stage{ border-radius:1rem; background:var(--card); border:1px solid var(--line); padding:.6rem; overflow:hidden; } .jr-tour-svg{ width:100%; height:5.6rem; display:block; } .jr-tour-svg text{ font-weight:400 !important; } .jr-tour-route-draw{ stroke-dasharray:280; stroke-dashoffset:280; animation:jrTourDraw 2.2s cubic-bezier(.35,0,.25,1) infinite; } @keyframes jrTourDraw{ 0%{ stroke-dashoffset:280; } 55%,85%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; } } .jr-tour-stop-pop{ transform-box:fill-box; transform-origin:center; animation:jrTourPop 2.2s cubic-bezier(.2,.8,.2,1) infinite; } .jr-pop-1{ animation-delay:.15s; } .jr-pop-2{ animation-delay:.45s; } .jr-pop-3{ animation-delay:.75s; } @keyframes jrTourPop{ 0%,10%{ transform:scale(0); opacity:0; } 30%,85%{ transform:scale(1); opacity:1; } 100%{ transform:scale(.92); opacity:.9; } } .jr-tour-pills-demo{ display:flex; flex-wrap:nowrap !important; align-items:center; justify-content:center; gap:.25rem; margin-top:.45rem; width:100%; overflow:hidden; } .jr-tour-demo-pill{ padding:.15rem .42rem; border-radius:.45rem; font-size:.75rem; font-weight:400 !important; border:1px solid var(--line); background:var(--surface); color:var(--ink); white-space:nowrap; flex:0 1 auto; min-width:0; text-overflow:ellipsis; overflow:hidden; } .jr-tour-demo-pill.is-green{ background:var(--leaf-t); color:var(--leaf-ink); border-color:color-mix(in srgb,var(--leaf) 35%,transparent); } .jr-tour-demo-pill.is-violet{ background:var(--violet-t); color:var(--violet-d); border-color:color-mix(in srgb,var(--violet) 35%,transparent); } .jr-tour-demo-pill.is-amber{ background:var(--sun-t); color:var(--sun-ink); border-color:color-mix(in srgb,var(--sun) 35%,transparent); } .jr-tour-demo-pill.is-rose{ background:var(--rose-t); color:var(--rose-ink); border-color:color-mix(in srgb,var(--rose) 35%,transparent); } .jr-tour-mini-card{ padding:.5rem .56rem; border-radius:.8rem; background:var(--surface); border:1px solid var(--line); display:grid; gap:.38rem; font-size:.75rem; overflow:hidden; } .jr-tour-mini-head{ display:flex; flex-wrap:nowrap !important; align-items:center; gap:.26rem; color:var(--ink); white-space:nowrap; overflow:hidden; width:100%; } .jr-tour-stop-name{ font-family:var(--font-display); font-size:.75rem; font-weight:400 !important; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto; } .jr-tour-mini-head .stop-badge{ flex:none; font-weight:400 !important; white-space:nowrap; font-size:.75rem !important; padding:.1rem .34rem !important; } .jr-tour-mini-acts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:center; gap:.22rem; width:100%; overflow:hidden; } .jr-tour-mini-btn{ padding:.16rem .24rem; border-radius:.42rem; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); font-size:.75rem; font-weight:400 !important; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; display:inline-flex; align-items:center; justify-content:center; text-align:center; } .jr-tour-mini-btn.is-pulse{ background:var(--violet-t); color:var(--violet-d); border-color:var(--violet); font-weight:400 !important; animation:jrBtnPulse 1.5s ease-in-out infinite; } @keyframes jrBtnPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.03); } } .jr-tour-mini-tooltip{ padding:.34rem .46rem; border-radius:.55rem; background:color-mix(in srgb,var(--violet-t) 55%,var(--surface)); border:1px solid color-mix(in srgb,var(--violet) 38%,var(--line)); display:flex; flex-wrap:nowrap !important; align-items:center; justify-content:space-between; gap:.26rem; font-size:.75rem; color:var(--ink); white-space:nowrap; overflow:hidden; animation:jrTooltipPop .4s ease; } .jr-tour-mini-tip-badge{ font-weight:400 !important; color:var(--violet-d); flex:none; } .jr-tour-body{ margin-top:.6rem; } .jr-tour-title{ margin:0; font:400 .96rem/1.25 var(--font-display); color:var(--ink); } .jr-tour-desc{ margin:.28rem 0 0; font-size:.78rem; font-weight:400 !important; line-height:1.45; color:var(--muted); } .jr-tour-foot{ margin-top:.7rem; padding-top:.55rem; border-top:1px solid var(--line); display:flex; flex-wrap:nowrap !important; align-items:center; justify-content:space-between; gap:.35rem; width:100%; overflow:hidden; } .jr-tour-dots{ display:inline-flex; align-items:center; gap:.26rem; flex:none; } .jr-tour-dot{ width:.46rem; height:.46rem; padding:0; border-radius:999px; border:0; background:color-mix(in srgb,var(--muted) 38%,transparent); cursor:pointer; transition:all .18s ease; } .jr-tour-dot.is-active{ width:1.15rem; background:var(--violet); } .jr-tour-actions{ display:inline-flex; flex-wrap:nowrap !important; align-items:center; justify-content:flex-end; gap:.24rem; flex:1 1 auto; min-width:0; overflow:hidden; } .jr-tour-btn{ padding:.28rem .52rem !important; font-size:.75rem !important; font-weight:400 !important; border-radius:.52rem !important; min-height:1.8rem !important; white-space:nowrap !important; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; } /* ---------- Hero Overlay Guide Cards (.g-card.g-card-hero-overlay) ---------- */ .g-card .g-card-cat, .g-card .g-card-loc, .g-card .g-card-ai-badge, .g-card .g-card-route{ font-family:var(--font-sans) !important; font-size:.75rem !important; font-weight:400 !important; line-height:1.2 !important; letter-spacing:0 !important; min-height:1.55rem !important; height:1.55rem !important; padding:0 .55rem !important; display:inline-flex !important; align-items:center !important; gap:.26rem; box-sizing:border-box; } .g-card.g-card-compact .g-card-cat, .g-card.g-card-compact .g-card-loc, .g-card.g-card-compact .g-card-ai-badge, .g-card.g-card-compact .g-card-route{ font-size:.75rem !important; font-weight:400 !important; min-height:1.3rem !important; height:1.3rem !important; padding:0 .45rem !important; background:color-mix(in srgb,var(--surface) 62%,transparent) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .g-card.g-card-compact, .g-card.g-card-compact .g-card-media{ border-radius:.55rem !important; border:0 !important; } .g-card.g-card-hero-overlay:not(.g-card-compact){ position:relative; display:flex; flex-direction:column; justify-content:flex-end; grid-template-columns:none; grid-template-rows:none; min-height:15.5rem; border-radius:.75rem !important; background:transparent !important; border:0 !important; color:#ffffff; overflow:hidden; isolation:isolate; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0); box-shadow:0 10px 24px -14px rgba(19,26,43,.32); transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1) !important; } .g-card.g-card-hero-overlay:not(.g-card-compact):hover{ transform:translateY(-7px) !important; box-shadow:0 24px 44px -16px rgba(19,26,43,.48) !important; } .g-card.g-card-hero-overlay .g-card-media img, .g-card.g-card-hero-overlay:hover .g-card-media img{ transform:none !important; transition:none !important; } @media (min-width:640px){ .g-card.g-card-hero-overlay:not(.g-card-compact){ min-height:16.5rem; border-radius:.75rem !important; } .reco-grid:not(.reco-carousel-track) > .g-card.g-card-hero-overlay:nth-child(1){ min-height:20.5rem !important; height:100% !important; } .reco-grid:not(.reco-carousel-track) > .g-card.g-card-hero-overlay:nth-child(2), .reco-grid:not(.reco-carousel-track) > .g-card.g-card-hero-overlay:nth-child(3){ min-height:9.75rem !important; height:100% !important; } } .g-card.g-card-top-tier:not(.g-card-compact) .g-card-scrim, .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:nth-child(15n+1) .g-card-scrim, .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:nth-child(15n+4) .g-card-scrim, .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:nth-child(15n+8) .g-card-scrim, .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:nth-child(15n+13) .g-card-scrim{ background: radial-gradient(circle at 82% 20%, rgba(96,165,250,.22) 0%, transparent 54%), linear-gradient(180deg, rgba(10,15,28,.04) 0%, rgba(15,23,42,.22) 48%, rgba(10,15,28,.78) 100%) !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-media{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-height:100% !important; aspect-ratio:auto !important; border-radius:.75rem !important; z-index:0; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-scrim{ position:absolute; inset:0; z-index:1; border-radius:.75rem !important; background:linear-gradient(180deg, rgba(10,15,28,0) 0%, rgba(10,15,28,.05) 50%, rgba(10,15,28,.58) 100%); pointer-events:none; transition:opacity .3s ease; } .g-card.g-card-hero-overlay:not(.g-card-compact):hover .g-card-scrim{ background:linear-gradient(180deg, rgba(10,15,28,0) 0%, rgba(10,15,28,.04) 46%, rgba(10,15,28,.66) 100%); } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-cat{ z-index:2; left:.85rem; top:.85rem; bottom:auto; background:rgba(15,23,42,.38) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#ffffff !important; border:1px solid rgba(255,255,255,.22) !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-topic{ z-index:2; top:.8rem; right:.85rem; background:rgba(15,23,42,.38) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#ffffff !important; border:1px solid rgba(255,255,255,.22) !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-body{ position:relative; z-index:2; margin-top:auto; padding:4.5rem 1.15rem 1.05rem; background:transparent; color:#ffffff; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-title{ color:#ffffff !important; font-weight:800 !important; text-shadow:0 2px 10px rgba(0,0,0,.55); } .g-card[data-guide-card] .g-card-why{ display:none !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-sum{ display:none !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta{ color:rgba(226,232,240,.92) !important; border-top:1px solid rgba(255,255,255,.16); padding-top:.55rem; margin-top:.55rem; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-loc{ background:rgba(15,23,42,.38) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#f8fafc !important; border:1px solid rgba(255,255,255,.22) !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-ai-badge{ background:rgba(15,23,42,.38) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#ffffff !important; border:1px solid rgba(255,255,255,.22) !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-route{ background:rgba(15,23,42,.38) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#ffffff !important; border:1px solid rgba(255,255,255,.22) !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-why{ background:rgba(15,23,42,.38) !important; backdrop-filter:blur(8px); color:#ffffff !important; border:1px solid rgba(255,255,255,.22) !important; } .g-card-loc .g-card-loc-city{ display:none; } @media (max-width:639px){ .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-cat{ display:none !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-topic{ display:flex !important; top:.45rem !important; right:.45rem !important; width:1.65rem !important; height:1.65rem !important; z-index:2 !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-topic svg{ width:.95rem !important; height:.95rem !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-body{ position:static !important; padding:2.35rem .65rem .5rem !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-badges-row{ position:static !important; margin-bottom:.15rem !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-badges-row:not(:has(.g-card-ai-badge)){ margin-bottom:0 !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-loc{ position:absolute !important; top:.45rem !important; left:.45rem !important; z-index:2 !important; min-height:1.25rem !important; height:1.25rem !important; padding:0 .42rem !important; font-size:.75rem !important; max-width:calc(100% - 2.6rem); overflow:hidden; text-overflow:ellipsis; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-loc .g-card-loc-full{ display:none !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-loc .g-card-loc-city{ display:inline !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-ai-badge{ position:relative; z-index:2; min-height:1.15rem !important; height:1.15rem !important; padding:0 .38rem !important; font-size:.75rem !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-title{ position:relative; z-index:2; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta{ position:relative; z-index:2; padding-top:.2rem !important; margin-top:.22rem !important; font-size:.75rem !important; line-height:1.1 !important; gap:.24rem !important; min-height:0 !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta img{ width:.95rem !important; height:.95rem !important; } .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-route{ min-height:1.08rem !important; height:1.08rem !important; padding:0 .34rem !important; font-size:.75rem !important; line-height:1.05 !important; } } /* ---------- Ready-Made Routes Bento-Box Card Grid (.jr-routes-bento-grid & .jr-route-bento-card) ---------- */ #routesRecoPanel .jr-related-compact-grid > .g-card.g-card-compact{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; grid-template-rows:none !important; min-height:6.6rem; border-radius:.95rem; } #routesRecoPanel .jr-related-compact-grid > .g-card.g-card-compact .g-card-media{ position:relative !important; inset:auto !important; width:100% !important; height:100% !important; min-height:100% !important; } #routesRecoPanel .jr-related-compact-grid > .g-card.g-card-compact .g-card-body{ padding:.55rem .72rem .6rem; display:flex; flex-direction:column; justify-content:space-between; min-width:0; width:100%; } .jr-routes-bento-grid{ display:grid; gap:.85rem; grid-template-columns:1fr; } .jr-routes-bento-grid > .jr-route-bento-card, html.motion .jr-routes-bento-grid > .jr-route-bento-card[data-rv="1"]{ margin:0 !important; border-radius:.95rem; overflow:hidden; height:100%; box-sizing:border-box; scale:1 !important; translate:0 0 !important; } .jr-route-bento-body{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; } @media (max-width:639px){ .jr-routes-bento-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; align-items:stretch; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(3n+1), .jr-routes-bento-grid > .jr-route-bento-card:nth-child(3n+2):last-child{ grid-column:1 / -1; padding:.85rem !important; gap:.65rem !important; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(3n+2):not(:last-child), .jr-routes-bento-grid > .jr-route-bento-card:nth-child(3n+3){ grid-column:span 1; padding:.65rem !important; gap:.45rem !important; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(3n+2):not(:last-child) h3, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(3n+3) h3{ font-size:.9rem !important; line-height:1.2 !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(3n+2):not(:last-child) p, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(3n+3) p{ font-size:.76rem !important; line-height:1.3 !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } } @media (min-width:640px){ .jr-routes-bento-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:1.1rem; align-items:stretch; grid-auto-flow:dense; } .jr-routes-bento-grid > .jr-route-bento-card{ grid-column:span 6; display:flex; flex-direction:row; align-items:center; gap:1.05rem; padding:1.1rem 1.25rem; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1){ grid-column:span 7; grid-row:span 2; flex-direction:column; align-items:stretch; justify-content:space-between; padding:1.25rem 1.35rem 1.35rem; gap:1rem; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1) picture, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1) .jr-card-photo, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1) .jr-card-map-tile{ width:100% !important; max-height:14rem; aspect-ratio:16/9; object-fit:cover; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1) h3{ font-size:1.35rem; line-height:1.2; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+2), .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+3){ grid-column:span 5; padding:1rem 1.15rem; gap:.9rem; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+2) .jr-card-photo, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+3) .jr-card-photo{ width:7.5rem; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+2) h3, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+3) h3{ font-size:1.05rem; line-height:1.22; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+2) p, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+3) p{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+4){ grid-column:span 5; padding:1.05rem 1.15rem; gap:.95rem; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+5){ grid-column:span 7; padding:1.1rem 1.3rem; gap:1.15rem; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+5) .jr-card-photo{ width:11.5rem; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+4):last-child{ grid-column:1 / -1; padding:1.15rem 1.35rem; gap:1.25rem; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+4):last-child .jr-card-photo{ width:13.5rem; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):last-child{ grid-column:1 / -1; grid-row:auto; flex-direction:row; align-items:center; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):last-child picture, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):last-child .jr-card-photo{ width:13.5rem !important; max-height:none; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):nth-last-child(2){ grid-row:auto; } } /* ---------- Real Geographic Web Mercator Map Tiles (.jr-real-map-layer) ---------- */ .jr-real-map-layer{ position:absolute; inset:0; overflow:hidden; background:#dce8f2; z-index:0; } :root[data-theme="dark"] .jr-real-map-layer{ background:#0f172a; } .jr-real-map-split, .jr-real-map-full{ position:absolute; inset:0; width:100%; height:100%; } .jr-real-map-pane{ position:absolute; top:0; bottom:0; overflow:hidden; border-right:2px solid var(--surface); background:#e2ecf4; } .jr-real-map-pane:last-child{ border-right:0; } .jr-real-map-tiles{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; } .jr-map-tile{ position:absolute; max-width:none !important; object-fit:cover; pointer-events:none; user-select:none; filter:saturate(1.06) contrast(1.02); } :root[data-theme="dark"] .jr-map-tile{ filter:invert(.88) hue-rotate(180deg) brightness(.92) contrast(1.05); } .jr-real-map-pane-label{ position:absolute; top:.55rem; left:.55rem; z-index:3; display:inline-flex; align-items:center; gap:.28rem; padding:.2rem .55rem; border-radius:999px; background:color-mix(in srgb,var(--surface) 90%,transparent); backdrop-filter:blur(6px); border:1px solid var(--line); color:var(--ink); font-size:.75rem; font-weight:800; letter-spacing:.01em; pointer-events:none; box-shadow:0 4px 12px -4px rgba(19,26,43,.28); } .jr-real-map-attrib{ position:absolute; right:.6rem; bottom:.48rem; z-index:3; padding:.14rem .45rem; border-radius:999px; background:color-mix(in srgb,var(--surface) 84%,transparent); font-size:.75rem; font-weight:600; color:var(--muted); pointer-events:none; } .jr-route-lines-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; } .jr-explorer-popup-coords{ margin:0; font-family:var(--font-data); font-size:.75rem; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; } @media print { body.is-printing-itinerary > *:not(#routePreviewModal) { display: none !important; } body.is-printing-itinerary #routePreviewModal { position: static !important; display: block !important; background: #fff !important; padding: 0 !important; overflow: visible !important; } body.is-printing-itinerary #routePreviewModal .modal-panel { max-height: none !important; box-shadow: none !important; border: 0 !important; padding: 1rem !important; background: #fff !important; color: #000 !important; } body.is-printing-itinerary #mapCanvas, body.is-printing-itinerary #modalMyStopsSlot, body.is-printing-itinerary #addStopRow, body.is-printing-itinerary .stop-actions, body.is-printing-itinerary .stop-fb-row, body.is-printing-itinerary #routePreviewModal [data-close], body.is-printing-itinerary #routePreviewModal details { display: none !important; } } /* ---------- 1. Single-Row "Recommended for you" ("Based on:") Chips + Overflow "+N more" Tooltip ---------- */ .reco-panel{ overflow:visible !important; } .reco-head{ position:relative; z-index:10; } .reco-based{ position:relative; display:flex; flex-wrap:nowrap !important; align-items:center; gap:.32rem; margin-top:.45rem; max-width:min(100%, 24rem); } .reco-based-label{ flex:none; white-space:nowrap; } .reco-chip{ flex:none; white-space:nowrap; } .reco-more-wrap{ position:relative; display:inline-flex; align-items:center; flex:none; } .reco-chip-more{ cursor:pointer; background:var(--violet-t) !important; color:var(--violet-d) !important; border:1px solid color-mix(in srgb,var(--violet) 38%,var(--line)) !important; transition:background .15s ease,transform .15s ease; } .reco-chip-more:hover, .reco-chip-more:focus-visible, .reco-chip-more[aria-expanded="true"]{ background:color-mix(in srgb,var(--violet) 22%,var(--violet-t)) !important; transform:translateY(-1px); } .reco-more-tooltip{ position:absolute; top:calc(100% + .38rem); left:0; z-index:50; min-width:14rem; max-width:min(20rem,86vw); padding:.55rem .65rem; border-radius:.75rem; background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:0 16px 36px -12px rgba(19,26,43,.38); display:grid; gap:.35rem; white-space:normal; } .reco-more-tooltip[hidden]{ display:none !important; } .reco-more-tooltip-title{ margin:0; font-size:.75rem; font-weight:400; color:var(--muted); } .reco-more-tooltip-list{ display:flex; flex-wrap:wrap; gap:.28rem; } /* ---------- 2. Guides & Routes Non-Hero Cards: 50% Image / 50% Content Split ---------- */ .g-card.g-card-compact, #routesRecoPanel .jr-related-compact-grid > .g-card.g-card-compact, .jr-related-routes .jr-related-compact-grid > .g-card.g-card-compact, .jr-related-guides .g-card.g-card-compact, .route-loc-guides-grid .g-card:not(.g-card-hero-overlay){ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; grid-template-rows:none !important; align-items:stretch !important; min-height:6.6rem; } .g-card.g-card-compact .g-card-media, #routesRecoPanel .jr-related-compact-grid > .g-card.g-card-compact .g-card-media, .jr-related-routes .jr-related-compact-grid > .g-card.g-card-compact .g-card-media, .jr-related-guides .g-card.g-card-compact .g-card-media, .route-loc-guides-grid .g-card:not(.g-card-hero-overlay) .g-card-media{ position:relative !important; inset:auto !important; width:100% !important; height:100% !important; min-height:100% !important; aspect-ratio:auto !important; background:var(--card) !important; overflow:hidden; } .g-card.g-card-compact .g-card-media picture, #routesRecoPanel .jr-related-compact-grid > .g-card.g-card-compact .g-card-media picture, .jr-related-routes .jr-related-compact-grid > .g-card.g-card-compact .g-card-media picture, .jr-related-guides .g-card.g-card-compact .g-card-media picture{ display:block !important; width:100% !important; height:100% !important; } .g-card.g-card-compact .g-card-media img, #routesRecoPanel .jr-related-compact-grid > .g-card.g-card-compact .g-card-media img, .jr-related-routes .jr-related-compact-grid > .g-card.g-card-compact .g-card-media img, .jr-related-guides .g-card.g-card-compact .g-card-media img, .jr-compact-route-img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; background:var(--card) !important; } .g-card.g-card-compact .g-card-body, #routesRecoPanel .jr-related-compact-grid > .g-card.g-card-compact .g-card-body, .jr-related-routes .jr-related-compact-grid > .g-card.g-card-compact .g-card-body{ width:100% !important; min-width:0 !important; display:flex; flex-direction:column; justify-content:space-between; } @media (min-width:640px){ .jr-glance{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; align-items:center !important; } .jr-routes-bento-grid > .jr-route-bento-card:not(:nth-child(5n+1)), .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):last-child, .jr-card-row:not(.jr-route-bento-card){ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; grid-template-rows:none !important; align-items:center !important; } .jr-routes-bento-grid > .jr-route-bento-card:not(:nth-child(5n+1)) > picture, .jr-routes-bento-grid > .jr-route-bento-card:not(:nth-child(5n+1)) > .jr-card-photo, .jr-routes-bento-grid > .jr-route-bento-card:not(:nth-child(5n+1)) > .jr-card-map-tile, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):last-child > picture, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):last-child > .jr-card-photo, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):last-child > .jr-card-map-tile, .jr-card-row:not(.jr-route-bento-card) > picture, .jr-card-row:not(.jr-route-bento-card) > .jr-card-photo{ display:block !important; width:100% !important; height:100% !important; max-height:none !important; aspect-ratio:16/10 !important; object-fit:cover !important; object-position:center !important; background:var(--card); } .jr-routes-bento-grid > .jr-route-bento-card:not(:nth-child(5n+1)) > picture > .jr-card-photo, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):last-child > picture > .jr-card-photo, .jr-card-row:not(.jr-route-bento-card) > picture > .jr-card-photo{ display:block !important; width:100% !important; height:100% !important; max-height:none !important; aspect-ratio:16/10 !important; object-fit:cover !important; object-position:center !important; background:var(--card); } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):not(:last-child){ display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:minmax(0,1fr) minmax(0,1fr) !important; align-items:stretch !important; } .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):not(:last-child) > picture, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):not(:last-child) > .jr-card-photo, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):not(:last-child) > .jr-card-map-tile, .jr-routes-bento-grid > .jr-route-bento-card:nth-child(5n+1):not(:last-child) > picture > .jr-card-photo{ display:block !important; width:100% !important; height:100% !important; max-height:none !important; aspect-ratio:auto !important; object-fit:cover !important; object-position:center !important; background:var(--card); } .jr-routes-bento-grid > .jr-route-bento-card > .jr-route-bento-body, .jr-card-row:not(.jr-route-bento-card) > div.min-w-0{ width:100% !important; min-width:0 !important; } } /* ---------- 3. Sitewide Reduced Title & First Introductory Paragraph Sizes (Plus Extra Mobile Reduction) ---------- */ article[data-page-content] h1:not(.jr-profile-name), .jr-guides-hero-content h1, .prose-j h1, #choicesSection h1{ font-size:1.6rem !important; line-height:1.18 !important; font-weight:400 !important; } #guidesSection h2, #exploreSection h2, #allGuidesSection h2, article[data-page-content="ready-made-routes"] h2, #howItWorksSection h2, #goodStopSection h2, .reco-title{ font-size:1.22rem !important; line-height:1.22 !important; font-weight:400 !important; } .jr-guides-first-line, .jr-guides-hero-content > p:not(.kicker):first-of-type, article[data-page-content] > h1 + p:not(.kicker):not(.byline), article[data-page-content] > p:not(.kicker):not(.byline):first-of-type, article[data-page-content] > section:not(.reco-panel) > h1 + p:not(.kicker):not(.reco-foot), article[data-page-content] > section:not(.reco-panel) > p:not(.kicker):not(.reco-foot):first-of-type, article[data-page-content] > header > p:not(.kicker):first-of-type, #howItWorksSection > div > p:first-of-type, #contactUsSection > div > p:first-of-type, #dashSubtitle, #exploreSection > div > div > p:first-of-type, .prose-j > p.jr-lead, .prose-j > h1 + p:not(.byline){ font-size:.86rem !important; line-height:1.46 !important; } @media (max-width:639px){ article[data-page-content] h1:not(.jr-profile-name), .jr-guides-hero-content h1, .prose-j h1, #choicesSection h1{ font-size:1.25rem !important; line-height:1.16 !important; } .jr-guides-first-line, .jr-guides-hero-content > p:not(.kicker):first-of-type, article[data-page-content] > h1 + p:not(.kicker):not(.byline), article[data-page-content] > p:not(.kicker):not(.byline):first-of-type, article[data-page-content] > section:not(.reco-panel) > h1 + p:not(.kicker):not(.reco-foot), article[data-page-content] > section:not(.reco-panel) > p:not(.kicker):not(.reco-foot):first-of-type, article[data-page-content] > header > p:not(.kicker):first-of-type, #howItWorksSection > div > p:first-of-type, #contactUsSection > div > p:first-of-type, #dashSubtitle, #exploreSection > div > div > p:first-of-type, .prose-j > p.jr-lead, .prose-j > h1 + p:not(.byline){ font-size:.75rem !important; line-height:1.36 !important; margin-top:.25rem !important; } /* Small screen: crop ai-map-data.avif to 50% height showing the middle 50% in the center */ #howItWorksSection .px-media{ overflow:hidden; border-radius:1.25rem !important; aspect-ratio:293 / 80 !important; } #howItWorksSection .px-media img, img[src*="ai-map-data"]{ aspect-ratio:293 / 80 !important; height:auto !important; width:100% !important; object-fit:cover !important; object-position:center 50% !important; border-radius:1.25rem !important; } } /* ---------- 4. Guides: compact side-by-side "Try this vibe" + "Plan in " pair ---------- */ .jr-guide-action-pair{ display:grid; gap:.75rem; grid-template-columns:minmax(0,1fr); } @media (min-width:768px){ .jr-guide-action-pair{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; } } .jr-guide-action-pair > .tile{ margin:0 !important; padding:.85rem 1rem !important; border-radius:.9rem; border:1px solid var(--line); background:var(--surface) !important; box-shadow:none; display:flex; flex-direction:column; gap:.35rem; } .jr-guide-action-pair .kicker{ margin:0; font-size:.75rem; } .jr-guide-pair-heading{ margin:0 !important; font-size:.98rem !important; line-height:1.25 !important; font-weight:400 !important; color:var(--ink); } .jr-guide-pair-sub{ margin:0 !important; font-size:.76rem !important; line-height:1.4 !important; color:var(--muted); } .jr-try-vibe-chips{ display:flex; flex-wrap:wrap; gap:.3rem; } .jr-try-chip{ min-height:0 !important; padding:.2rem .6rem !important; font-size:.75rem !important; font-weight:400 !important; border-radius:999px !important; } .jr-guide-pair-actions{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:.3rem; } .jr-guide-pair-btn{ min-height:2rem !important; padding:.3rem .8rem !important; font-size:.76rem !important; font-weight:500 !important; } .jr-place-compact{ display:flex !important; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.35rem .8rem; padding:.6rem .9rem !important; border-radius:.85rem; font-size:.78rem; color:var(--muted); } .jr-place-compact .kicker{ margin:0 .3rem 0 0; font-size:.75rem; } .jr-place-compact-link{ flex:none; color:var(--violet-d); font-size:.78rem; text-decoration:underline; } /* ---------- 5. Contact Us: postal mail note + square location map & square map container in the left column ---------- */ .jr-contact-postal-note{ margin:1.5rem 0 0; color:var(--ink); line-height:1.5; max-width:20rem; } .jr-contact-postal-card{ width:100%; max-width:20rem; aspect-ratio:1 / 1; padding:.5rem !important; border-radius:1rem; display:flex; align-items:stretch; justify-content:center; box-sizing:border-box; } .jr-contact-map-wrap{ width:100%; height:100%; aspect-ratio:1 / 1; display:block; } .jr-contact-map-svg{ display:block; width:100%; height:100%; aspect-ratio:1 / 1; border-radius:.75rem; border:1px solid var(--line); } :root[data-theme="dark"] .jr-contact-map-svg{ filter:invert(.9) hue-rotate(180deg) brightness(.95); } /* ---------- 6. About Joyride AI: no bold anywhere ---------- */ article[data-page-content="about"], article[data-page-content="about"] :is(h1,h2,h3,p,li,a,strong,b){ font-weight:400 !important; } #joyrideAISection :is(h2,p,a,strong,b){ font-weight:400 !important; } /* ---------- 7. Stop cards: name + meta on one row (wrap together), one-row customize actions, no dashed cut line ---------- */ #routeStops .stop-title-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .45rem; width:100%; } #routeStops .stop-name{ flex:0 1 auto; min-width:0; font-weight:500; } #routeStops .stop-badges{ display:inline-flex; flex-wrap:nowrap; align-items:center; gap:.3rem; flex:0 1 auto; min-width:0; max-width:100%; overflow-x:auto; scrollbar-width:none; } #routeStops .stop-badges::-webkit-scrollbar{ display:none; } #routeStops .stop-badge{ font-weight:500; white-space:nowrap; } #routeStops .stop-badges .stop-details-btn{ min-height:1.6rem; min-width:0; padding:.12rem .55rem; font-size:.75rem; font-weight:500; border-radius:.55rem; } #routeStops .stop-actions{ justify-content:flex-start; border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent); } #routeStops .stop-customize-group{ display:flex; flex-wrap:nowrap; width:100%; gap:.3rem; padding:0; border:0; background:transparent; } #routeStops .stop-customize-group .stop-act-btn{ flex:1 1 0; min-width:0; min-height:2rem; padding:.22rem .4rem; font-size:.75rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .stop-fb-row{ border-top-style:solid !important; } @media (max-width:639px){ #routeStops .stop-customize-group .stop-act-btn{ font-size:.75rem; padding:.18rem .3rem; gap:.2rem; } } /* ---------- 8. Ready-made routes bento: groups of 3 = 1 tall vertical card + 2 stacked horizontal cards, the vertical card alternating left / right on every other group (desktop & tablet) ---------- */ @media (min-width:640px){ article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid]{ grid-template-columns:repeat(12,minmax(0,1fr)) !important; grid-auto-rows:minmax(10.5rem,auto); grid-auto-flow:row dense !important; gap:1rem !important; align-items:stretch !important; } /* Shared reset: every card fills its cell, no inner padding (the image bleeds to the card edge) */ article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card{ grid-row:auto !important; padding:0 !important; gap:0 !important; overflow:hidden; border-radius:1rem !important; } article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card > .jr-card-photo, article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card > .jr-card-map-tile, article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card > picture{ /* height:0 + min-height:100%: the image fills its grid cell but never inflates the row (rows follow the text) */ display:block !important; width:100% !important; height:0 !important; min-height:100% !important; max-height:none !important; aspect-ratio:auto !important; object-fit:cover !important; object-position:center !important; border:0 !important; border-radius:0 !important; background:var(--card); overflow:hidden; } article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card > picture > .jr-card-photo{ display:block !important; width:100% !important; height:100% !important; max-height:none !important; aspect-ratio:auto !important; object-fit:cover !important; object-position:center !important; border:0 !important; border-radius:0 !important; } article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card > .jr-route-bento-body{ padding:.9rem 1.05rem 1rem; justify-content:center; width:100% !important; min-width:0 !important; } article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card h3{ font-size:1.02rem !important; line-height:1.25 !important; font-weight:500 !important; } article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card p{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* Horizontal cards (default): image left half, text right half */ article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; grid-template-rows:minmax(0,1fr) !important; align-items:stretch !important; } /* Group A (6n+1..6n+3): vertical card on the LEFT, two horizontal cards stacked on the right */ article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card:nth-child(6n+1){ grid-column:1 / span 5 !important; grid-row:span 2 !important; } article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card:nth-child(6n+2), article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card:nth-child(6n+3){ grid-column:6 / span 7 !important; } /* Group B (6n+4..6n+6): vertical card on the RIGHT, two horizontal cards stacked on the left */ article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card:nth-child(6n+4){ grid-column:8 / span 5 !important; grid-row:span 2 !important; } article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card:nth-child(6n+5), article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card:nth-child(6n+6){ grid-column:1 / span 7 !important; } /* Vertical cards: image on top (taking the spare height), text below */ article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card:nth-child(3n+1){ grid-template-columns:minmax(0,1fr) !important; grid-template-rows:minmax(11rem,1fr) auto !important; } article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card:nth-child(3n+1) h3{ font-size:1.2rem !important; } /* Incomplete last group: 1 leftover card = full-width horizontal; 2 leftover cards = two half-width horizontals */ article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card:nth-child(3n+1):last-child{ grid-column:1 / -1 !important; grid-row:auto !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; grid-template-rows:minmax(0,1fr) !important; } article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card:nth-child(3n+1):nth-last-child(2), article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card:nth-child(3n+2):last-child{ grid-column:span 6 !important; grid-row:auto !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; grid-template-rows:minmax(0,1fr) !important; } article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card:nth-child(3n+1):nth-last-child(2) h3, article[data-page-content] .jr-routes-bento-grid[data-routes-bento-grid] > .jr-route-bento-card:nth-child(3n+1):last-child h3{ font-size:1.02rem !important; } } /* ---------- 9. Route preview ("your journey") card: Interactive Horizontal Guide Carousel + Quick-Filter Chips ---------- */ #routeLocationGuides{ margin-top:.65rem; padding-top:.55rem; } #routeLocationGuides .route-loc-guides-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; margin-bottom:.45rem; } #routeLocationGuides .route-loc-guides-titles{ min-width:0; flex:1 1 auto; } #routeLocationGuides [data-route-guides-heading]{ font-size:.92rem !important; font-weight:600 !important; line-height:1.25 !important; color:var(--ink) !important; letter-spacing:-.01em; text-transform:none !important; } #routeLocationGuides .route-loc-guides-sub{ margin:.12rem 0 0; font-size:.75rem; line-height:1.35; color:var(--muted); } #routeLocationGuides .route-loc-guides-all{ flex:0 0 auto; font-size:.75rem; font-weight:500; color:var(--violet); white-space:nowrap; padding-top:.1rem; } /* Interactive Quick-Filter Chips above the guide carousel */ #routeLocationGuides .route-guides-filters{ display:flex; align-items:center; gap:.38rem; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding:.1rem 0 .5rem; margin-bottom:.15rem; } #routeLocationGuides .route-guides-filters::-webkit-scrollbar{ display:none; } #routeLocationGuides .route-guide-filter-chip{ flex:0 0 auto; display:inline-flex; align-items:center; padding:.26rem .68rem; border-radius:999px; font-size:.75rem; font-weight:500; line-height:1.2; color:var(--muted); background:var(--surface); border:1px solid color-mix(in srgb,var(--line) 85%,transparent); cursor:pointer; transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease; white-space:nowrap; } #routeLocationGuides .route-guide-filter-chip:hover{ color:var(--ink); border-color:color-mix(in srgb,var(--violet) 38%,var(--line)); } #routeLocationGuides .route-guide-filter-chip.is-active{ background:var(--violet); color:#ffffff; border-color:var(--violet); box-shadow:0 2px 8px -2px rgba(106,76,255,.4); } :root[data-theme="dark"] #routeLocationGuides .route-guide-filter-chip{ background:#1e293b; color:#cbd5e1; border-color:rgba(148,163,184,.24); } :root[data-theme="dark"] #routeLocationGuides .route-guide-filter-chip.is-active{ background:#7c5dfa; color:#ffffff; border-color:#7c5dfa; } /* Smooth Horizontal-Scrolling Card Carousel */ #routeLocationGuides .route-loc-guides-grid{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; scroll-snap-type:x mandatory !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; gap:.68rem !important; padding-bottom:.2rem; } #routeLocationGuides .route-loc-guides-grid::-webkit-scrollbar{ display:none; } /* Mobile (~360-400px): ~1.25 cards visible (78% width) so the next card peeks into view */ @media (max-width:639px){ #routeLocationGuides .route-loc-guides-grid > .g-card.route-carousel-card{ flex:0 0 78% !important; max-width:78% !important; min-width:230px !important; aspect-ratio:16 / 11 !important; min-height:178px !important; scroll-snap-align:start; } } /* Desktop/Tablet (>=640px): 3 portrait cards visible side-by-side in the horizontal carousel */ @media (min-width:640px){ #routeLocationGuides .route-loc-guides-grid{ gap:.65rem !important; } #routeLocationGuides .route-loc-guides-grid > .g-card.route-carousel-card{ flex:0 0 calc((100% - 1.3rem) / 3) !important; max-width:calc((100% - 1.3rem) / 3) !important; aspect-ratio:4 / 5 !important; scroll-snap-align:start; } } #routeLocationGuides .route-loc-guides-grid > .g-card.g-card-hero-overlay{ display:flex !important; flex-direction:column; justify-content:flex-end; grid-template-columns:none !important; min-height:0 !important; height:auto !important; border-radius:.95rem !important; border:none !important; box-shadow:0 4px 14px -4px rgba(15,23,42,.18); } #routeLocationGuides .route-loc-guides-grid > .g-card.g-card-hero-overlay .route-card-ambient-scrim{ background:linear-gradient(180deg,rgba(15,23,42,.08) 0%,rgba(15,23,42,.42) 45%,rgba(15,23,42,.92) 100%) !important; } #routeLocationGuides .route-loc-guides-grid > .g-card.g-card-hero-overlay .route-guide-pill{ position:absolute; top:.55rem; left:.55rem; z-index:3; display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600; line-height:1.2; color:#ffffff; background:rgba(15,23,42,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2); } #routeLocationGuides .route-loc-guides-grid > .g-card.g-card-hero-overlay .g-card-body{ padding:2.4rem .75rem .7rem !important; } #routeLocationGuides .route-loc-guides-grid > .g-card.g-card-hero-overlay .g-card-title{ font-size:.86rem !important; line-height:1.26 !important; font-weight:600 !important; color:#ffffff !important; display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; overflow:hidden !important; } #routeLocationGuides .route-loc-guides-grid > .g-card.g-card-hero-overlay :is(.g-card-cat,.g-card-sum,.g-card-why,.g-card-ai-badge,.g-card-topic){ display:none !important; } #routeLocationGuides .route-loc-guides-grid > .g-card.g-card-hero-overlay .route-carousel-card-foot{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:.4rem !important; padding-top:.42rem !important; margin-top:.38rem !important; border-top:1px solid rgba(255,255,255,.16) !important; } #routeLocationGuides .route-loc-guides-grid > .g-card.g-card-hero-overlay .route-guide-readtime{ font-size:.75rem !important; font-weight:500 !important; color:rgba(255,255,255,.86) !important; white-space:nowrap; } #routeLocationGuides .route-loc-guides-grid > .g-card.g-card-hero-overlay .route-guide-micro-cta{ display:inline-flex; align-items:center; padding:.22rem .56rem; border-radius:999px; font-size:.75rem; font-weight:600; line-height:1.15; color:#ffffff; background:rgba(106,76,255,.86); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); white-space:nowrap; cursor:pointer; transition:background-color .15s ease,transform .15s ease; } #routeLocationGuides .route-loc-guides-grid > .g-card.g-card-hero-overlay .route-guide-micro-cta:hover{ background:#5a3cf0; transform:translateY(-1px); } #routeLocationGuides .route-loc-guides-grid > .g-card.g-card-hero-overlay .route-guide-micro-cta.is-added{ background:rgba(16,185,129,.92); border-color:rgba(255,255,255,.4); } /* Streamlined Persistent Floating Bottom Action Bar (.sheet-actions) */ #routePreviewModal .sheet-actions[data-floating-action-bar="true"]{ position:sticky; bottom:0; z-index:20; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:.55rem !important; padding:.6rem 0 calc(.55rem + var(--safe-b, 0px)) !important; background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent); } #routePreviewModal .sheet-actions .sheet-primary-cta{ flex:1 1 auto !important; min-width:0; min-height:42px !important; padding:.55rem 1rem !important; border-radius:.85rem !important; font-size:.9rem !important; font-weight:600 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:.45rem !important; } #routePreviewModal .sheet-actions .sheet-secondary-actions{ display:flex; align-items:center; gap:.38rem; flex:0 0 auto; } #routePreviewModal .sheet-actions .sheet-icon-btn{ width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; padding:0 !important; border-radius:.78rem !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; color:var(--ink); background:var(--surface); border:1px solid color-mix(in srgb,var(--line) 85%,transparent) !important; } #routePreviewModal .sheet-actions .sheet-icon-btn:hover{ border-color:color-mix(in srgb,var(--violet) 45%,var(--line)) !important; color:var(--violet); } #routePreviewModal .sheet-actions .sheet-icon-btn.is-on{ color:var(--violet); border-color:color-mix(in srgb,var(--violet) 55%,var(--line)) !important; background:var(--violet-t); } /* ---------- 10. Custom journey (route preview) polish ---------- */ /* "Was this useful?" and "Share feedback": regular weight, no bold, and thin delicate border */ #routePreviewModal :is(.route-useful-box,.route-useful-q,.route-useful-btn,.route-useful-thanks,.route-feedback-cta,.route-feedback-cta span){ font-weight:400 !important; } #routePreviewModal :is(.route-useful-box,.route-useful-btn,.route-feedback-cta){ border-width:1px !important; border-style:solid !important; border-color:color-mix(in srgb,var(--violet) 24%,var(--line)) !important; box-shadow:none !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #routePreviewModal :is(.route-useful-box,.route-useful-btn,.route-feedback-cta){ border-width:1px !important; border-color:rgba(148,163,184,.55) !important; } /* "Start navigation": purple → light purple gradient */ #startNavigationBtn, #startNavigationBtn.btn-primary{ background:linear-gradient(135deg,#6a4cff 0%,#7d62ff 55%,#9580ff 100%) !important; border-color:transparent !important; color:#ffffff !important; box-shadow:0 10px 22px -12px rgba(106,76,255,.6); } #startNavigationBtn:hover, #startNavigationBtn:focus-visible{ background:linear-gradient(135deg,#5a3cf0 0%,#6d52f5 55%,#856ff8 100%) !important; } :root[data-theme="dark"][data-contrast="high"] #startNavigationBtn{ background:#facc15 !important; color:#000000 !important; } /* ---------- 11. Author social links (author profile header + "Written by" box) ---------- */ .jr-social-links{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 0 !important; } .jr-social-link{ display:inline-flex; align-items:center; gap:.35rem; min-height:2rem; padding:.25rem .7rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--violet) 30%,var(--line)); background:var(--surface); color:var(--violet-d) !important; font-size:.78rem; font-weight:400 !important; text-decoration:none !important; transition:border-color .15s, background .15s; } .jr-social-link:hover,.jr-social-link:focus-visible{ border-color:var(--violet); background:var(--violet-t); } .jr-social-ico{ width:1rem; height:1rem; flex:none; } .jr-social-links-sm{ margin-top:.45rem !important; } .jr-social-links-sm .jr-social-link{ min-height:1.7rem; padding:.15rem .6rem; font-size:.75rem; } /* ---------- 12. Joyride AI Immersive (Beta): full-screen map UI (/immersive) ---------- */ .jr-beta-pill{ display:inline-flex; align-items:center; margin-left:.3rem; padding:.02rem .4rem; border-radius:999px; background:rgba(139,114,255,.22); color:#c9bdff; font-size:.75rem; font-weight:500; letter-spacing:.02em; vertical-align:middle; } html.is-immersive, html.is-immersive body{ overflow:hidden !important; overscroll-behavior:none; } html.is-immersive :is(#siteNav, footer, #tabbar, #pageBackLink, [data-ad-mount], .ad-slot, #offlineBanner){ display:none !important; } html.is-immersive #pageView{ padding:0 !important; margin:0 !important; } .jr-imm{ position:fixed; inset:0; z-index:60; height:100vh; height:100dvh; width:100vw; overflow:hidden; background:#e8eef5; color:var(--ink); font-family:var(--font-sans); } :root[data-theme="dark"] .jr-imm{ background:#0f172a; } .jr-imm-map{ position:absolute; inset:0; width:100%; height:100%; } .jr-imm-top{ position:absolute; z-index:3; top:calc(env(safe-area-inset-top,0px) + .6rem); left:.6rem; right:.6rem; display:grid; gap:.5rem; pointer-events:none; } .jr-imm-top > *{ pointer-events:auto; } .jr-imm-search-row{ display:flex; align-items:center; gap:.45rem; } .jr-imm-round,.jr-imm-logo{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:2.9rem; padding:0 .75rem; border:0; border-radius:999px; background:var(--surface); color:var(--ink); box-shadow:0 2px 6px rgba(15,23,42,.18), 0 6px 18px -8px rgba(15,23,42,.35); text-decoration:none; cursor:pointer; } .jr-imm-logo img{ width:1.65rem; height:1.65rem; border-radius:.45rem; object-fit:contain; flex:none; } .jr-imm-logo-word{ font-size:.86rem; line-height:1; white-space:nowrap; display:inline-flex; align-items:center; gap:.2rem; } @media (max-width:420px){ .jr-imm-logo{ padding:0; width:2.9rem; height:2.9rem; } .jr-imm-logo-word{ display:none; } } .jr-imm-search{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:.45rem; height:2.9rem; padding:0 .55rem 0 .45rem; border-radius:999px; background:var(--surface); box-shadow:0 2px 6px rgba(15,23,42,.18), 0 6px 18px -8px rgba(15,23,42,.35); } .jr-imm-search:focus-within{ outline:2px solid var(--violet); outline-offset:1px; } .jr-imm-menu-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border-radius:999px; border:0; background:transparent; color:var(--ink); cursor:pointer; } .jr-imm-menu-btn:hover{ background:var(--card); } .jr-imm-bar-icon{ flex:none; width:1.45rem !important; height:1.45rem !important; border-radius:.38rem; object-fit:contain; } .jr-imm-search-ico{ flex:none; color:var(--muted); } .jr-imm-search input{ flex:1 1 auto; min-width:0; height:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:1rem; font-weight:400; } .jr-imm-search input::placeholder{ color:var(--muted); } .jr-imm-search input::-webkit-search-cancel-button{ display:none; } .jr-imm-clear{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:999px; border:0; background:transparent; color:var(--muted); cursor:pointer; } .jr-imm-quick-chips{ display:flex; align-items:center; gap:.35rem; overflow-x:auto; scrollbar-width:none; padding:.05rem .1rem .15rem; } .jr-imm-quick-chips::-webkit-scrollbar{ display:none; } .jr-imm-return-btn{ flex:none; display:inline-flex; align-items:center; gap:.28rem; min-height:1.85rem; padding:.2rem .72rem; border-radius:999px; border:1.5px solid var(--violet); background:var(--violet-t); color:var(--violet-d) !important; font-size:.76rem; font-weight:600; text-decoration:none !important; box-shadow:0 2px 6px rgba(15,23,42,.15); cursor:pointer; transition:all .15s; } .jr-imm-return-btn:hover{ background:var(--violet); color:#fff !important; } .jr-imm-drawer-return-btn{ display:flex; align-items:center; justify-content:center; gap:.45rem; min-height:2.55rem; padding:.45rem .85rem; border-radius:.75rem; background:linear-gradient(135deg,#6a4cff 0%,#7d62ff 55%,#9580ff 100%); color:#fff !important; font-size:.84rem; font-weight:600; text-decoration:none !important; box-shadow:0 8px 18px -10px rgba(106,76,255,.6); } .jr-imm-quick-chip{ flex:none; display:inline-flex; align-items:center; gap:.3rem; min-height:1.85rem; padding:.2rem .68rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--violet) 26%,var(--line)); background:var(--surface); color:var(--ink); font-size:.76rem; font-weight:400; box-shadow:0 2px 6px rgba(15,23,42,.15); cursor:pointer; transition:all .15s; } .jr-imm-quick-chip[aria-pressed="true"]{ background:linear-gradient(135deg,#6a4cff 0%,#7d62ff 55%,#9580ff 100%); color:#fff; border-color:transparent; } .jr-imm-suggest{ margin:0; padding:.35rem; list-style:none; border-radius:1rem; background:var(--surface); border:1px solid var(--line); box-shadow:0 10px 28px -10px rgba(15,23,42,.45); max-height:42vh; overflow:auto; } .jr-imm-suggest-head{ padding:.3rem .65rem .15rem; font-size:.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; } .jr-imm-suggest-item{ display:flex; align-items:center; gap:.6rem; width:100%; min-height:2.6rem; padding:.4rem .68rem; border:0; border-radius:.7rem; background:transparent; color:var(--ink); font-size:.88rem; text-align:left; cursor:pointer; } .jr-imm-suggest-item:hover,.jr-imm-suggest-item:focus-visible{ background:var(--violet-t); } .jr-imm-suggest-item svg{ flex:none; color:var(--muted); } .jr-imm-chips{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.28rem; margin:0; padding:0; overflow:visible; } .jr-imm-chips::-webkit-scrollbar{ display:none; } .jr-imm-chip{ min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:.22rem; min-height:1.75rem; padding:.18rem .32rem; border-radius:.48rem; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:.75rem; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:none; cursor:pointer; transition:background .15s, color .15s, border-color .15s; } .jr-imm-chip svg{ width:12px; height:12px; flex:none; } .jr-imm-chip[aria-pressed="true"]{ background:linear-gradient(135deg,#6a4cff 0%,#7d62ff 55%,#9580ff 100%); color:#fff; border-color:transparent; } .jr-imm-chip:focus-visible,.jr-imm-mode:focus-visible,.jr-imm-go:focus-visible,.jr-imm-loop:focus-visible,.jr-imm-fab:focus-visible,.jr-imm-round:focus-visible,.jr-imm-logo:focus-visible,.jr-imm-menu-btn:focus-visible,.jr-imm-layers-btn:focus-visible,.jr-imm-ctrl-btn:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; } .jr-imm-sheet.jr-imm-top-options{ position:relative; z-index:4; display:grid; gap:.5rem; padding:.7rem .8rem; border-radius:1.1rem; background:var(--surface); border:1px solid var(--line); box-shadow:0 12px 30px -10px rgba(15,23,42,.38); animation:jrTooltipPop .18s cubic-bezier(.2,.8,.2,1); max-width:34rem; } .jr-imm-sheet.jr-imm-top-options[hidden]{ display:none !important; } .jr-imm-sheet.jr-imm-top-options .jr-imm-chips{ margin:0; padding:0; } .jr-imm-sheet-head{ display:grid; gap:.1rem; padding-top:.15rem; border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent); } .jr-imm-kicker{ margin:0; font-size:.75rem; color:var(--violet-d); font-weight:500; } .jr-imm-beta{ display:inline-flex; margin-left:.22rem; padding:.01rem .36rem; border-radius:999px; background:var(--violet-t); color:var(--violet-d); font-size:.75rem; font-weight:500; vertical-align:middle; } .jr-imm-status{ margin:0; font-size:.75rem; line-height:1.3; color:var(--muted); min-height:1.1em; } .jr-imm-status[data-type="error"]{ color:#b42318; } .jr-imm-status[data-type="success"]{ color:var(--ok); } .jr-imm-status.is-busy::before{ content:""; display:inline-block; width:.72rem; height:.72rem; margin-right:.35rem; vertical-align:-.08rem; border-radius:999px; border:2px solid var(--violet-t); border-top-color:var(--violet); animation:jrImmSpin .8s linear infinite; } @keyframes jrImmSpin{ to{ transform:rotate(360deg); } } .jr-imm-modes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; padding:.22rem; border-radius:.82rem; background:var(--card); } .jr-imm-mode{ display:inline-flex; align-items:center; justify-content:center; gap:.32rem; min-height:2.35rem; border:1.5px solid transparent; border-radius:.65rem; background:transparent; color:var(--ink); font-size:.8rem; font-weight:500; cursor:pointer; transition:all .15s; } .jr-imm-mode[aria-pressed="true"]{ background:var(--violet-t); color:var(--violet-d); border-color:#6a4cff; box-shadow:0 2px 8px rgba(106,76,255,.25); } :root[data-theme="dark"] .jr-imm-mode[aria-pressed="true"]{ background:rgba(124,93,250,.28); color:#ffffff; border-color:#a78bfa; } .jr-imm-actions{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:.5rem; } .jr-imm-go{ min-height:3rem; border:0; border-radius:999px; background:linear-gradient(135deg,#6a4cff 0%,#7d62ff 55%,#9580ff 100%); color:#fff; font-size:.95rem; font-weight:500; cursor:pointer; box-shadow:0 10px 22px -12px rgba(106,76,255,.65); } .jr-imm-go.is-busy{ opacity:.75; cursor:progress; } .jr-imm-loop{ min-height:3rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--violet) 35%,var(--line)); background:var(--surface); color:var(--violet-d); font-size:.88rem; font-weight:400; cursor:pointer; } :root[data-theme="dark"][data-contrast="high"] :is(.jr-imm-go,.jr-imm-chip[aria-pressed="true"],.jr-imm-quick-chip[aria-pressed="true"]){ background:#facc15 !important; color:#000 !important; } /* Collapsible Joyride AI Maps Drawer Menu (#immDrawer) */ .jr-imm-drawer-backdrop{ position:fixed; inset:0; z-index:68; background:rgba(15,23,42,.42); backdrop-filter:blur(2px); } .jr-imm-drawer-backdrop[hidden]{ display:none !important; } .jr-imm-drawer{ position:fixed; top:0; left:0; bottom:0; z-index:69; width:min(20.5rem, 86vw); background:var(--surface); border-right:1px solid var(--line); box-shadow:16px 0 40px -16px rgba(15,23,42,.5); display:flex; flex-direction:column; overflow-y:auto; animation:jrTooltipPop .18s ease-out; } .jr-imm-drawer[hidden]{ display:none !important; } .jr-imm-drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:1rem 1.05rem; border-bottom:1px solid var(--line); } .jr-imm-drawer-brand{ font-size:1.05rem; } .jr-imm-drawer-close{ width:2rem; height:2rem; border-radius:.55rem; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:.82rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .jr-imm-drawer-body{ padding:1rem 1.05rem; display:grid; gap:1.15rem; } .jr-imm-drawer-group{ display:grid; gap:.45rem; } .jr-imm-drawer-label{ margin:0; font-size:.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } .jr-imm-drawer-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; } .jr-imm-opt-btn{ min-height:2.2rem; padding:.3rem .65rem; border-radius:.65rem; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:.78rem; font-weight:500; cursor:pointer; transition:all .15s; } .jr-imm-opt-btn[aria-pressed="true"]{ background:var(--violet-t); color:var(--violet-d); border-color:var(--violet); } .jr-imm-drawer-nav{ display:grid; gap:.25rem; } .jr-imm-drawer-link{ display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:.7rem; color:var(--ink); font-size:.86rem; text-decoration:none; transition:background .15s; } .jr-imm-drawer-link:hover{ background:var(--card); color:var(--violet-d); } .jr-imm-drawer-link svg{ flex:none; color:var(--violet); } /* Bottom-left Square Layers Control (#immLayersWrap) */ .jr-imm-layers-wrap{ position:absolute; z-index:5; left:.8rem; bottom:calc(env(safe-area-inset-bottom,0px) + 1rem); } .jr-imm-layers-btn{ width:3.6rem; height:3.6rem; border-radius:.9rem; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); box-shadow:0 4px 14px rgba(15,23,42,.26); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; font-size:.75rem; font-weight:600; cursor:pointer; transition:transform .15s, border-color .15s; } .jr-imm-layers-btn:hover,.jr-imm-layers-btn[aria-expanded="true"]{ border-color:var(--violet); transform:translateY(-1px); } .jr-imm-layers-btn svg{ color:var(--violet-d); } .jr-imm-layers-popover{ position:absolute; left:0; bottom:calc(100% + .55rem); width:16.5rem; padding:.75rem .85rem; border-radius:1rem; background:var(--surface); border:1px solid var(--line); box-shadow:0 14px 34px -10px rgba(15,23,42,.45); animation:jrTooltipPop .16s ease-out; } .jr-imm-layers-popover[hidden]{ display:none !important; } .jr-imm-layers-heading{ margin:0 0 .35rem; font-size:.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; } .jr-imm-layers-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; } /* Bottom-right Standard Google Maps Controls Stack (.jr-imm-right-controls) */ .jr-imm-right-controls{ position:absolute; z-index:5; right:.8rem; bottom:calc(env(safe-area-inset-bottom,0px) + 1rem); display:flex; flex-direction:column; align-items:center; gap:.45rem; } .jr-imm-ctrl-btn{ width:2.75rem; height:2.75rem; border-radius:.78rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); box-shadow:0 3px 10px rgba(15,23,42,.22); display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem; font-weight:600; line-height:1; cursor:pointer; transition:all .15s; } .jr-imm-ctrl-btn:hover,.jr-imm-ctrl-btn[aria-pressed="true"]{ border-color:var(--violet); color:var(--violet-d); background:var(--violet-t); } .jr-imm-fab.jr-imm-ctrl-btn{ position:static; color:#1a73e8; border-radius:999px; width:2.85rem; height:2.85rem; } .jr-imm-zoom-group{ display:flex; flex-direction:column; border-radius:.78rem; overflow:hidden; border:1px solid var(--line); background:var(--surface); box-shadow:0 3px 10px rgba(15,23,42,.22); } .jr-imm-zoom-group .jr-imm-ctrl-btn{ border:0; border-radius:0; box-shadow:none; width:2.65rem; height:2.35rem; } .jr-imm-zoom-group .jr-imm-ctrl-btn + .jr-imm-ctrl-btn{ border-top:1px solid var(--line); } /* Route sheet over the immersive map: match the exact Home page #routePreviewModal appearance & height, and never show the leaving banner in immersive mode */ html.is-immersive #navOpenedNote{ display:none !important; } /* Tablet / desktop: floating search + sheet as a left-hand panel, like a maps app on a big screen */ @media (min-width:768px){ .jr-imm-top{ left:1rem; right:auto; width:25rem; top:1rem; } .jr-imm-chips{ margin:0; padding-left:0; padding-right:0; flex-wrap:wrap; overflow:visible; } .jr-imm-logo{ position:fixed; top:1rem; right:1rem; } .jr-imm-layers-wrap{ left:1rem; bottom:1.25rem; } .jr-imm-right-controls{ right:1rem; bottom:1.25rem; } } /* Cookie consent (and toasts) must stay usable above the full-screen immersive map */ html.is-immersive #cookieBanner{ z-index:75 !important; bottom:calc(env(safe-area-inset-bottom,0px) + .6rem) !important; } html.is-immersive :is(.toast,#toast){ z-index:76 !important; } /* ---------- 13. Comprehensive High-Clarity Dark Mode Redesign (Multi-Tier Surface & Contrast Hierarchy) ---------- */ :root[data-theme="dark"]:not([data-contrast="high"]) :is(.panel,.modal-panel){ background-color:#1e293b !important; border:1.5px solid #64748b !important; box-shadow:0 24px 60px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.jr-app-group-card,#modeFieldset.jr-app-group-card){ background-color:#28354a !important; border:1px solid #64748b !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-app-group-card > legend.field-label{ color:#f8fafc !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.field,.jr-floating-input.field,.jr-search-input,.jr-minimal-search-input,.add-stop-input){ background-color:#0f172a !important; color:#ffffff !important; border:1.5px solid #94a3b8 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.field,.jr-floating-input.field,.jr-search-input,.jr-minimal-search-input,.add-stop-input)::placeholder{ color:#cbd5e1 !important; opacity:.9 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.field,.jr-floating-input.field,.jr-search-input,.jr-minimal-search-input,.add-stop-input):focus{ border-color:#c4b5fd !important; box-shadow:0 0 0 3px rgba(196,181,253,.35) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-floating-label{ color:#cbd5e1 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .chip-row.jr-segmented-control, :root[data-theme="dark"]:not([data-contrast="high"]) #modeFieldset [data-mode-chips].jr-segmented-control{ background-color:#131c2e !important; border:1px solid #64748b !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .chip-row.jr-segmented-control .chip span{ color:#f1f5f9 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .chip-row.jr-segmented-control .chip input:not(:checked) + span:hover{ background-color:#28354a !important; color:#ffffff !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .quick-row.jr-quick-trio > .quick-btn{ background:linear-gradient(135deg,#3b2d72 0%,#2e225c 100%) !important; border:1.5px solid #a78bfa !important; color:#ffffff !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .quick-row.jr-quick-trio > .quick-btn:hover{ background:linear-gradient(135deg,#4c3a91 0%,#3b2d72 100%) !important; border-color:#ddd6fe !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #goodTimeCard.jr-status-badge{ background:linear-gradient(135deg,#144636 0%,#0f3529 100%) !important; border:1.5px solid #34d399 !important; color:#ecfdf5 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #goodTimeCard.jr-status-badge .good-time-kicker, :root[data-theme="dark"]:not([data-contrast="high"]) #goodTimeCard.jr-status-badge .good-time-clock{ color:#6ee7b7 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.btn-ghost,.jr-swap-pill,.ex-chip,.my-stops-summary,.my-stops-reset,.your-route-btn,.stop-act-btn,.jr-fb-btn,.jr-minimal-select,.route-useful-btn,.route-feedback-cta,.type-chip span){ background-color:#334155 !important; color:#ffffff !important; border:1px solid #94a3b8 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.btn-ghost,.jr-swap-pill,.ex-chip,.my-stops-summary,.my-stops-reset,.your-route-btn,.stop-act-btn,.jr-fb-btn,.jr-minimal-select,.route-useful-btn,.route-feedback-cta,.type-chip span):hover{ background-color:#475569 !important; border-color:#c4b5fd !important; color:#ffffff !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.tile,.card,.g-card:not(.g-card-hero-overlay),.jr-route-bento-card,.stop-card,.author-card,.my-stops-details,.wx-box,.route-stats-strip,.faq details,.ex-result,.your-route-item,.jr-history-item){ background-color:#28354a !important; border:1px solid #64748b !important; color:#f3f4f6 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .route-customize-section{ background:linear-gradient(180deg,#242f46 0%,#1e293b 100%) !important; border:1.5px solid #818cf8 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-card{ background-color:#2d3b52 !important; border:1px solid #94a3b8 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-name, :root[data-theme="dark"]:not([data-contrast="high"]) .faq summary, :root[data-theme="dark"]:not([data-contrast="high"]) .prose-j :is(h1,h2,h3,h4,strong){ color:#ffffff !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .prose-j, :root[data-theme="dark"]:not([data-contrast="high"]) .faq details p{ color:#e2e8f0 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .stop-badge{ background-color:#3b4a63 !important; color:#ffffff !important; border-color:#94a3b8 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .stop-badge-rating, :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-details-btn{ background-color:#433282 !important; color:#f5f3ff !important; border-color:#a78bfa !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .stop-badge-open{ background-color:#144636 !important; color:#a7f3d0 !important; border-color:#34d399 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-home-reco-panel, :root[data-theme="dark"]:not([data-contrast="high"]) .reco-panel.animated-gradient, :root[data-theme="dark"]:not([data-contrast="high"]) .jr-related-guides.animated-gradient, :root[data-theme="dark"]:not([data-contrast="high"]) .jr-related-routes{ background:linear-gradient(128deg, #161f3d 0%, #241d4e 26%, #182a56 52%, #132f4c 78%, #271e54 100%) !important; background-size:180% 180% !important; border:1.5px solid rgba(167,139,250,.44) !important; box-shadow:0 24px 48px -24px rgba(4,8,22,.82), inset 0 1px 0 rgba(196,181,253,.22) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.reco-panel.animated-gradient,.jr-related-guides.animated-gradient,.jr-related-routes) :is(.reco-title,.jr-related-title){ color:#f8fafc !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.reco-panel.animated-gradient,.jr-related-guides.animated-gradient,.jr-related-routes) :is(.reco-kicker,.reco-link,.jr-related-more-link,.reco-based-line){ color:#ddd6fe !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.reco-panel.animated-gradient,.jr-related-guides.animated-gradient,.jr-related-routes) :is(.reco-based-label,.reco-foot,.reco-offline){ color:#cbd5e1 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-panel.animated-gradient :is(.reco-chip,.reco-more-btn){ background-color:rgba(15,23,42,.76) !important; color:#f1f5f9 !important; border:1px solid rgba(167,139,250,.42) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .vibe-choice-card[data-tone="leaf"] .vibe-face{ background:linear-gradient(145deg,#153e31 0%,#1e293b 90%) !important; border:1.5px solid #34d399 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .vibe-choice-card[data-tone="violet"] .vibe-face{ background:linear-gradient(145deg,#342763 0%,#1e293b 90%) !important; border:1.5px solid #a78bfa !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .vibe-choice-card[data-tone="sun"] .vibe-face{ background:linear-gradient(145deg,#473012 0%,#1e293b 90%) !important; border:1.5px solid #fbbf24 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .vibe-choice-card[data-tone="rose"] .vibe-face{ background:linear-gradient(145deg,#4a192c 0%,#1e293b 90%) !important; border:1.5px solid #fb7185 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .vibe-choice-tags .stop-badge{ background-color:rgba(15,23,42,.75) !important; color:#ffffff !important; border-color:rgba(255,255,255,.35) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-bottom-sheet, :root[data-theme="dark"]:not([data-contrast="high"]) .jr-bottom-sheet-handle{ background-color:#172133 !important; border-color:#64748b !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #joyrideAISection{ background-color:#172133 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #exploreSection{ background-color:#0f172a !important; } /* ---------- 14. Joyride AI Maps (Beta) Interactive Home Showcase Section ---------- */ .jr-app-showcase-card{ display:flex; flex-direction:column; justify-content:space-between; min-width:0; max-width:100%; overflow:hidden; border-radius:1.35rem; border:1.5px solid color-mix(in srgb,var(--violet) 32%,var(--line)); background:linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(245,243,255,.94) 52%, rgba(236,253,245,.92) 100%); box-shadow:0 20px 44px -18px rgba(106,76,255,.22), 0 4px 12px -4px rgba(15,23,42,.06); } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-app-showcase-card{ background:linear-gradient(135deg, #161f3d 0%, #241d4e 48%, #132f4c 100%) !important; border:1.5px solid rgba(167,139,250,.48) !important; box-shadow:0 24px 52px -20px rgba(4,8,22,.82), inset 0 1px 0 rgba(196,181,253,.22) !important; } .jr-maps-showcase-split{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; align-items:center; min-width:0; width:100%; } .jr-maps-showcase-copy{ min-width:0; width:100%; } @media (min-width:960px){ .jr-maps-showcase-split{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:2.25rem; } } .jr-app-showcase-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; } .jr-app-kicker-pill{ display:inline-flex; align-items:center; padding:.2rem .65rem; border-radius:999px; font-size:.75rem; font-weight:700; background:var(--violet-t); color:var(--violet-d); border:1px solid color-mix(in srgb,var(--violet) 30%,transparent); } .jr-app-kicker-pill[data-tone="leaf"]{ background:var(--leaf-t); color:var(--leaf-ink); border-color:color-mix(in srgb,var(--leaf) 35%,transparent); } .jr-app-platform-tag{ font-size:.75rem; font-weight:600; color:var(--muted); } .jr-showcase-playground{ padding:.75rem .85rem; border-radius:1rem; background:color-mix(in srgb,var(--surface) 88%,transparent); border:1px solid color-mix(in srgb,var(--violet) 24%,var(--line)); backdrop-filter:blur(8px); } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-showcase-playground{ background:rgba(15,23,42,.68) !important; border-color:rgba(167,139,250,.38) !important; } .jr-showcase-playground-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.45rem; } .jr-showcase-playground-label{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--violet); } :root[data-theme="dark"] .jr-showcase-playground-label{ color:#c4b5fd; } .jr-showcase-live-badge{ display:inline-flex; align-items:center; padding:.16rem .58rem; border-radius:999px; font-size:.75rem; font-weight:700; background:var(--violet-t); color:var(--violet-d); font-variant-numeric:tabular-nums; } :root[data-theme="dark"] .jr-showcase-live-badge{ background:rgba(124,93,250,.28); color:#f5f3ff; } .jr-showcase-vibe-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; } @media (min-width:520px){ .jr-showcase-vibe-row{ grid-template-columns:repeat(4,minmax(0,1fr)); } } .jr-showcase-vibe-btn, .jr-showcase-mode-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.32rem; min-height:2.05rem; padding:.28rem .55rem; border-radius:.65rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.75rem; font-weight:600; cursor:pointer; transition:transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease; } .jr-showcase-vibe-btn:hover, .jr-showcase-mode-btn:hover{ border-color:var(--violet); transform:translateY(-1px); } .jr-showcase-vibe-btn.is-active, .jr-showcase-vibe-btn[aria-pressed="true"], .jr-showcase-mode-btn.is-active, .jr-showcase-mode-btn[aria-pressed="true"]{ background:linear-gradient(135deg,#6a4cff 0%,#8b5cf6 100%) !important; color:#ffffff !important; border-color:#6a4cff !important; box-shadow:0 6px 14px -4px rgba(106,76,255,.45); } .jr-vibe-dot{ width:.38rem; height:.38rem; border-radius:999px; flex-shrink:0; background:currentColor; opacity:.75; } .jr-showcase-mode-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; } .jr-app-feature-pills{ display:flex; flex-wrap:wrap; gap:.35rem; list-style:none; padding:0; margin:0; } .jr-app-feature-pills li{ display:inline-flex; align-items:center; padding:.22rem .62rem; border-radius:999px; font-size:.75rem; font-weight:500; background:var(--surface); color:var(--ink-soft); border:1px solid var(--line); } .jr-showcase-launch-btn{ background:linear-gradient(135deg,#6a4cff 0%,#7c3aed 55%,#9333ea 100%) !important; box-shadow:0 10px 24px -8px rgba(106,76,255,.58) !important; transition:transform .18s ease, box-shadow .18s ease !important; } .jr-showcase-launch-btn:hover{ transform:translateY(-1.5px) !important; box-shadow:0 14px 28px -8px rgba(106,76,255,.72) !important; } /* Interactive Phone Device Frame */ .jr-showcase-phone-col{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; width:100%; } .jr-showcase-phone-frame{ position:relative; width:100%; max-width:min(100%, 25.5rem); min-width:0; box-sizing:border-box; overflow:hidden; padding:.7rem; border-radius:1.65rem; background:#0f172a; border:3px solid #334155; box-shadow:0 24px 48px -16px rgba(15,23,42,.42), 0 0 0 1px rgba(255,255,255,.08) inset; color:#f8fafc; display:flex; flex-direction:column; gap:.5rem; } .jr-showcase-phone-notch{ width:4.4rem; height:.32rem; border-radius:999px; background:#334155; margin:0 auto .1rem; } .jr-showcase-phone-hud{ display:flex; align-items:center; justify-content:space-between; gap:.45rem; min-width:0; width:100%; box-sizing:border-box; padding:.42rem .68rem; border-radius:.85rem; background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%); border:1px solid rgba(167,139,250,.42); font-size:.75rem; font-weight:600; color:#f8fafc; } .jr-showcase-hud-turn{ display:inline-flex; align-items:center; justify-content:center; width:1.45rem; height:1.45rem; border-radius:.45rem; background:#6a4cff; color:#ffffff; font-weight:800; flex-shrink:0; } .jr-showcase-hud-text{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .jr-showcase-hud-step{ padding:.12rem .45rem; border-radius:999px; background:rgba(124,93,250,.28); color:#ddd6fe; font-size:.75rem; font-weight:700; flex-shrink:0; } .jr-app-preview-box{ padding:.3rem; border-radius:1rem; background:#1e293b; border:1px solid #334155; overflow:hidden; min-width:0; width:100%; box-sizing:border-box; } .jr-maps-mini-svg{ display:block; width:100%; height:auto; border-radius:.78rem; } .jr-showcase-pin{ cursor:pointer; transition:transform .18s ease; } .jr-showcase-pin:hover circle{ stroke-width:3.5px; } .jr-showcase-phone-sheet{ padding:.55rem .65rem; border-radius:.95rem; background:#1e293b; border:1px solid #334155; display:grid; grid-template-columns:minmax(0,1fr); min-width:0; width:100%; box-sizing:border-box; overflow:hidden; gap:.45rem; } .jr-showcase-stop-pill-row{ display:flex; gap:.32rem; min-width:0; width:100%; max-width:100%; overflow-x:auto; scrollbar-width:none; } .jr-showcase-stop-pill-row::-webkit-scrollbar{ display:none; } .jr-showcase-stop-chip{ flex:none; padding:.22rem .55rem; border-radius:999px; border:1px solid #475569; background:#0f172a; color:#cbd5e1; font-size:.75rem; font-weight:600; cursor:pointer; transition:all .15s ease; } .jr-showcase-stop-chip.is-active{ background:#6a4cff; border-color:#a78bfa; color:#ffffff; } .jr-showcase-stop-detail{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-width:0; width:100%; padding-top:.15rem; } .jr-showcase-stop-info{ display:flex; flex-direction:column; flex:1 1 0%; min-width:0; overflow:hidden; gap:.08rem; } .jr-showcase-stop-badge{ font-size:.75rem; font-weight:700; color:#a78bfa; text-transform:uppercase; letter-spacing:.03em; } .jr-showcase-stop-name{ font-size:.82rem; font-weight:700; color:#ffffff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jr-showcase-stop-note{ font-size:.75rem; color:#cbd5e1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jr-showcase-mini-go{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; padding:.38rem .75rem; border-radius:999px; background:linear-gradient(135deg,#10b981 0%,#059669 100%); color:#ffffff !important; font-size:.75rem; font-weight:700; text-decoration:none !important; box-shadow:0 4px 12px -2px rgba(16,185,129,.45); transition:transform .15s ease; } .jr-showcase-mini-go:hover{ transform:translateY(-1px); } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-app-feature-pills li{ background-color:#293548 !important; border-color:#64748b !important; color:#f1f5f9 !important; } :root[data-theme="dark"] .jr-maps-mini-svg{ filter:invert(.88) hue-rotate(180deg) brightness(.95); } /* ---------- 15. Home Page Travel Guides Section (#guidesSection) — Same Format & Style as "Recommended for you" (.reco-grid) on /guides ---------- */ #guidesSection .g-grid-home > .g-card.g-card-hero-overlay{ transform:none !important; translate:0 0 !important; scale:1 !important; will-change:auto !important; backface-visibility:visible !important; -webkit-backface-visibility:visible !important; transition:box-shadow .22s ease, transform .22s ease !important; } #guidesSection .g-grid-home > .g-card.g-card-hero-overlay:hover{ transform:translateY(-3px) !important; } #guidesSection .g-grid-home > .g-card.g-card-hero-overlay :is(.g-card-cat,.g-card-topic,.g-card-loc,.g-card-route,.g-card-why,.g-card-ai-badge){ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(15,23,42,.74) !important; } @media (min-width:640px){ #guidesSection .g-grid-home.reco-grid:not(.reco-carousel-track){ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; grid-template-rows:repeat(2,minmax(0,1fr)) !important; gap:1rem !important; align-items:stretch !important; grid-auto-flow:row !important; } #guidesSection .g-grid-home.reco-grid:not(.reco-carousel-track) > .g-card:nth-child(1){ grid-column:1 !important; grid-row:1 / span 2 !important; min-height:20.5rem !important; height:100% !important; } #guidesSection .g-grid-home.reco-grid:not(.reco-carousel-track) > .g-card:nth-child(2){ grid-column:2 !important; grid-row:1 !important; min-height:9.75rem !important; height:100% !important; } #guidesSection .g-grid-home.reco-grid:not(.reco-carousel-track) > .g-card:nth-child(3){ grid-column:2 !important; grid-row:2 !important; min-height:9.75rem !important; height:100% !important; } #guidesSection .g-grid-home.reco-grid:not(.reco-carousel-track) > .g-card:nth-child(2) .g-card-body, #guidesSection .g-grid-home.reco-grid:not(.reco-carousel-track) > .g-card:nth-child(3) .g-card-body{ padding:1.6rem 1rem .85rem !important; } #guidesSection .g-grid-home.reco-grid:not(.reco-carousel-track) > .g-card:nth-child(2) .g-card-title, #guidesSection .g-grid-home.reco-grid:not(.reco-carousel-track) > .g-card:nth-child(3) .g-card-title{ font-size:1.02rem !important; line-height:1.2 !important; -webkit-line-clamp:2 !important; } } /* ---------- 15b. Leaving Joyride AI Banner (#navOpenedNote.jr-leaving-banner) ---------- */ .jr-leaving-banner{ margin-bottom:.65rem; padding:.75rem .9rem; border-radius:.95rem; border:1.5px solid color-mix(in srgb,var(--violet) 42%,var(--line)); background:linear-gradient(135deg, #f5f0ff 0%, #eef6ff 100%); color:var(--ink); box-shadow:0 12px 26px -16px rgba(106,76,255,.32); animation:jrTooltipPop .2s cubic-bezier(.2,.8,.2,1); } .jr-leaving-banner[hidden]{ display:none !important; } .jr-leaving-banner-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; } .jr-leaving-banner-title{ margin:0; font-size:.86rem; font-weight:600; line-height:1.4; color:var(--ink); display:flex; flex-wrap:wrap; align-items:center; gap:.28rem; } .jr-leaving-banner-close{ width:1.45rem; height:1.45rem; flex:none; border-radius:.45rem; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:.75rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .jr-leaving-banner-close:hover{ color:var(--ink); border-color:var(--violet); } .jr-leaving-banner-msg{ margin:.35rem 0 0; font-size:.78rem; line-height:1.45; color:var(--ink-soft); } .jr-leaving-banner-actions{ margin-top:.55rem; display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; } .jr-leaving-continue-btn{ padding:.38rem .85rem !important; font-size:.76rem !important; border-radius:.6rem !important; } .jr-leaving-stay-btn{ padding:.36rem .75rem !important; font-size:.75rem !important; border-radius:.6rem !important; border-color:#7c5dfa !important; color:#6a4cff !important; } :root[data-theme="dark"] .jr-leaving-banner{ background:linear-gradient(135deg, rgba(46,29,92,.88) 0%, rgba(23,37,84,.88) 100%); border-color:rgba(167,139,250,.55); color:#f8fafc; } :root[data-theme="dark"] .jr-leaving-banner-title{ color:#ffffff; } :root[data-theme="dark"] .jr-leaving-banner-msg{ color:#e2e8f0; } :root[data-theme="dark"] .jr-leaving-stay-btn{ border-color:#a78bfa !important; color:#ddd6fe !important; } /* ---------- 15c. Guide Card Image Sharpness & Guide POI Details Tooltip ---------- */ .g-card .g-card-media picture, .g-card .g-card-media img{ width:100% !important; height:100% !important; max-width:100% !important; object-fit:cover !important; object-position:center !important; } .jr-poi-details-tooltip{ margin-top:.65rem; text-align:left; } /* ---------- 15d. Desktop Guide Body Images (Alternating Left/Right Wrap), Half-Size Weather Chart & "Recommended for you" Coherent Compact Cards (No Underline) ---------- */ @media (min-width:768px){ .prose-j .jr-photo.jr-photo-inline{ width:47% !important; max-width:34rem !important; clear:both; } .prose-j .jr-photo.jr-photo-inline.jr-photo-left, .prose-j .jr-photo.jr-photo-inline:not(.jr-photo-right){ float:left !important; margin:.35rem 1.5rem 1rem 0 !important; } .prose-j .jr-photo.jr-photo-inline.jr-photo-right{ float:right !important; margin:.35rem 0 1rem 1.5rem !important; } .prose-j :is(.jr-inline-poi,.jr-chart,.jr-place-compact,.jr-guide-action-pair,.jr-author,.jr-feedback,.jr-related-guides){ clear:both !important; } .prose-j figure.jr-chart, figure.jr-chart{ width:50% !important; max-width:25rem !important; margin-left:auto !important; margin-right:auto !important; padding:.85rem 1rem !important; } figure.jr-chart .jr-chart-title{ font-size:1rem !important; } figure.jr-chart .jr-chart-sum{ font-size:.76rem !important; line-height:1.4 !important; } figure.jr-chart .jr-chart-legend, figure.jr-chart figcaption{ font-size:.75rem !important; } } /* Remove underlines across all "Recommended for you" sections and distribute text coherently inside the 50% text column */ .jr-related-guides a, .jr-related-guides a *, .jr-related-routes a, .jr-related-routes a *, #routesRecoPanel a, #routesRecoPanel a *, .reco-panel a, .reco-panel a *, .jr-related-more-link, .reco-link{ text-decoration:none !important; } .g-card.g-card-compact .g-card-body, .jr-related-guides .g-card.g-card-compact .g-card-body, .jr-related-routes .g-card.g-card-compact .g-card-body, #routesRecoPanel .g-card.g-card-compact .g-card-body{ display:flex !important; flex-direction:column !important; justify-content:center !important; gap:.32rem !important; padding:.68rem .85rem !important; } .g-card.g-card-compact .g-card-title{ margin:0 !important; font-size:.9rem !important; line-height:1.25 !important; -webkit-line-clamp:2 !important; } .g-card.g-card-compact .g-card-compact-sum{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.75rem; line-height:1.38; color:var(--muted); } @media (min-width:768px){ .jr-related-compact-grid > .g-card.g-card-compact:nth-child(1) .g-card-body{ justify-content:center !important; gap:.48rem !important; padding:.95rem 1.05rem !important; } .jr-related-compact-grid > .g-card.g-card-compact:nth-child(1) .g-card-title{ font-size:1.05rem !important; line-height:1.28 !important; -webkit-line-clamp:3 !important; } .jr-related-compact-grid > .g-card.g-card-compact:nth-child(1) .g-card-compact-sum{ -webkit-line-clamp:4; font-size:.8rem; line-height:1.45; } } .g-card.g-card-compact .g-card-meta{ margin-top:.1rem !important; padding-top:.28rem !important; } /* ---------- 16. Custom Journey Card (#routePreviewModal) Stop Badges, Actions & Add-Stop Polish ---------- */ /* 16a. Rating: no chip background/border, purple text, yellow star */ #routeStops .stop-badge-rating, :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-badge-rating{ background:transparent !important; background-color:transparent !important; border:0 !important; border-color:transparent !important; box-shadow:none !important; padding:0 .18rem !important; color:var(--violet-d) !important; display:inline-flex !important; align-items:center; gap:.08rem; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-badge-rating{ color:#c4b5fd !important; } #routeStops .stop-badge-rating .stop-rating-star{ color:#f59e0b !important; margin:0 .04rem; } :root[data-theme="dark"] #routeStops .stop-badge-rating .stop-rating-star{ color:#fbbf24 !important; } /* 16b. Place Type Chip (.stop-badge-type): semantic colors by place category */ #routeStops .stop-badge-type[data-type-tone="leaf"]{ background-color:#d1fae5 !important; color:#065f46 !important; border:1px solid #6ee7b7 !important; } #routeStops .stop-badge-type[data-type-tone="teal"]{ background-color:#ccfbf1 !important; color:#115e59 !important; border:1px solid #5eead4 !important; } #routeStops .stop-badge-type[data-type-tone="blue"]{ background-color:#dbeafe !important; color:#1e40af !important; border:1px solid #93c5fd !important; } #routeStops .stop-badge-type[data-type-tone="sun"]{ background-color:#fef3c7 !important; color:#92400e !important; border:1px solid #fcd34d !important; } #routeStops .stop-badge-type[data-type-tone="rose"]{ background-color:#ffe4e6 !important; color:#9f1239 !important; border:1px solid #fda4af !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-badge-type[data-type-tone="leaf"]{ background-color:#144636 !important; color:#a7f3d0 !important; border:1px solid #34d399 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-badge-type[data-type-tone="teal"]{ background-color:#134e4a !important; color:#99f6e4 !important; border:1px solid #2dd4bf !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-badge-type[data-type-tone="blue"]{ background-color:#1e3a8a !important; color:#bfdbfe !important; border:1px solid #60a5fa !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-badge-type[data-type-tone="sun"]{ background-color:#452c0c !important; color:#fde68a !important; border:1px solid #fbbf24 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-badge-type[data-type-tone="rose"]{ background-color:#4c162c !important; color:#fecdd3 !important; border:1px solid #fb7185 !important; } /* 16c. Details Chip (.stop-details-btn): slightly lighter purple */ #routeStops .stop-badges .stop-details-btn, #routeStops .stop-details-btn{ background-color:#f3effe !important; color:#7c5dfa !important; border:1px solid #c4b5fd !important; } #routeStops .stop-details-btn:hover, #routeStops .stop-details-btn.is-active{ background-color:#ebe4ff !important; color:#6a4cff !important; border-color:#a78bfa !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-details-btn{ background-color:#55429e !important; color:#f5f3ff !important; border:1px solid #c4b5fd !important; } /* 16d. Swap, Remove & Not interested buttons: purple border, elevated relevance & landing/hover animations */ @keyframes jrSwapUpDown{ 0%, 100%{ transform:translateY(0); } 25%{ transform:translateY(-3px); } 75%{ transform:translateY(3px); } } @keyframes jrRemoveCollapse{ 0%, 100%{ transform:scale(1); } 45%{ transform:scale(0.55) rotate(-12deg); } 75%{ transform:scale(1.08); } } @keyframes jrNotInterestedDisappear{ 0%, 100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.12; transform:scale(0.78); } } #routeStops .stop-customize-group .stop-act-btn{ border:1.5px solid #7c5dfa !important; color:var(--ink) !important; background:var(--surface) !important; font-weight:500 !important; transition:border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important; } #routeStops .stop-customize-group .stop-act-btn .stop-act-ico{ color:#6a4cff; opacity:1; } #routeStops .stop-customize-group .stop-act-btn:hover, #routeStops .stop-customize-group .stop-act-btn:focus-visible{ border-color:#6a4cff !important; background-color:#f3effe !important; color:#5b3df5 !important; box-shadow:0 6px 14px -8px rgba(106,76,255,.45); } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-customize-group .stop-act-btn{ background-color:#334155 !important; border:1.5px solid #a78bfa !important; color:#ffffff !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-customize-group .stop-act-btn .stop-act-ico{ color:#c4b5fd; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-customize-group .stop-act-btn:hover, :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-customize-group .stop-act-btn:focus-visible{ background-color:#433282 !important; border-color:#c4b5fd !important; color:#ffffff !important; } /* Play signature animations when landing in #routePreviewModal and when hovering/focusing each button */ #routePreviewModal:not([hidden]) #routeStops .stop-customize-group [data-stop-swap] .stop-act-ico{ animation:jrSwapUpDown .9s ease-in-out .15s 2; } #routePreviewModal:not([hidden]) #routeStops .stop-customize-group [data-stop-remove] .stop-act-ico{ animation:jrRemoveCollapse .9s ease-in-out .25s 2; } #routePreviewModal:not([hidden]) #routeStops .stop-customize-group [data-stop-hide] .stop-act-ico{ animation:jrNotInterestedDisappear 1s ease-in-out .35s 2; } #routeStops .stop-customize-group [data-stop-swap]:is(:hover,:focus-visible) .stop-act-ico{ animation:jrSwapUpDown .65s ease-in-out infinite !important; } #routeStops .stop-customize-group [data-stop-remove]:is(:hover,:focus-visible) .stop-act-ico{ animation:jrRemoveCollapse .65s ease-in-out infinite !important; } #routeStops .stop-customize-group [data-stop-hide]:is(:hover,:focus-visible) .stop-act-ico{ animation:jrNotInterestedDisappear .75s ease-in-out infinite !important; } /* 16e. "+ Add a stop" button (#addStopBtn): purple border and purple font color */ #addStopBtn, .add-stop-btn{ border:1.5px solid #6a4cff !important; color:#6a4cff !important; background:var(--surface) !important; font-weight:500 !important; } #addStopBtn:hover, .add-stop-btn:hover{ background:#f3effe !important; border-color:#5b3df5 !important; color:#5b3df5 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #addStopBtn, :root[data-theme="dark"]:not([data-contrast="high"]) .add-stop-btn{ background-color:#293548 !important; border:1.5px solid #a78bfa !important; color:#c4b5fd !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #addStopBtn:hover, :root[data-theme="dark"]:not([data-contrast="high"]) .add-stop-btn:hover{ background-color:#3b2d72 !important; border-color:#c4b5fd !important; color:#ffffff !important; } /* ---------- 17. Custom Journey Card Redesign: Clutter-Free Header, Context Menu, Soft Elevation & List/Map Toggle ---------- */ /* 17a. Merged inline bullet-separated subtitle stats ("4.7 km • 1 hr 6 min walk • 3 stops") */ #routeStats.route-stats-row{ display:inline-flex; flex-wrap:nowrap; align-items:center; gap:0 !important; min-width:17.5rem; padding:.1rem 0; color:var(--muted); font-size:.82rem; font-weight:400 !important; letter-spacing:-.005em; } #routeStats .route-stat-item{ display:inline-flex; align-items:center; background:transparent !important; border:0 !important; padding:0 !important; color:var(--muted) !important; font-weight:400 !important; white-space:nowrap; } #routeStats .route-stat-sep{ display:inline-block; margin:0 .42rem; color:var(--muted); opacity:.65; } /* 17b. Compact weather & dark-outside alert utility strip */ :root:not([data-contrast="high"]) #routeWeather.wx-box{ background:#F9FAFB !important; border:0 !important; box-shadow:none !important; padding:.35rem .65rem !important; border-radius:.75rem !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeWeather.wx-box{ background:#162032 !important; border:0 !important; box-shadow:none !important; } #routeWeather .wx-more summary{ min-height:1.65rem; padding:.05rem .1rem; font-weight:500; } #routeWeather .wx-more-pill{ background:transparent !important; border:0 !important; padding:.08rem .25rem !important; color:var(--violet-d) !important; font-weight:500 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeWeather .wx-more-pill{ color:#c4b5fd !important; } #routeWeather .wx-alert, #routeWeather .wx-note{ display:flex; align-items:center; gap:.28rem; background:transparent !important; border:0 !important; padding:.12rem .1rem !important; margin-top:.12rem !important; font-size:.75rem; font-weight:400; color:var(--muted) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #routeWeather .wx-alert-ico-wrap{ display:inline-flex; align-items:center; flex:none; color:var(--violet); } #routeWeather .wx-alert-ico{ width:.85rem; height:.85rem; } /* 17c. Softened visual hierarchy: #F9FAFB layout canvas, borderless shadow-sm stop cards & thin timeline */ :root:not([data-contrast="high"]) #routeCustomizeSection.route-customize-section{ background:#F9FAFB !important; border:0 !important; box-shadow:none !important; padding:.8rem .9rem; border-radius:1.05rem; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeCustomizeSection.route-customize-section{ background:#131c2e !important; border:0 !important; box-shadow:none !important; } .route-customize-head{ border-bottom:0 !important; padding-bottom:.2rem !important; } #routeStops{ position:relative; } #routeStops::before{ content:""; position:absolute; left:4.25px; top:.65rem; bottom:.65rem; width:1.5px; background:color-mix(in srgb,var(--violet) 26%,var(--line)); pointer-events:none; } #routeStops .route-node-dot{ position:relative; z-index:1; width:10px; height:10px; border-radius:999px; box-shadow:0 0 0 3px #F9FAFB; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .route-node-dot{ box-shadow:0 0 0 3px #131c2e; } #routeStops .route-node-start{ background:var(--ink); } #routeStops .route-node-stop{ background:#6a4cff; } #routeStops .route-node-finish{ background:var(--ok); } #routeStops .route-endpoint-text{ font-size:.8rem; font-weight:400; color:var(--muted); } :root:not([data-contrast="high"]) #routeStops .stop-card{ position:relative; background:#ffffff !important; border:0 !important; border-radius:.85rem; padding:.65rem .8rem; box-shadow:0 1px 3px 0 rgba(15,23,42,.08),0 1px 2px -1px rgba(15,23,42,.05) !important; cursor:pointer; transition:box-shadow .18s ease, transform .18s ease; } :root:not([data-contrast="high"]) #routeStops .stop-card:hover{ box-shadow:0 4px 12px -2px rgba(15,23,42,.11),0 2px 4px -2px rgba(15,23,42,.06) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-card{ position:relative; background:#1e293b !important; border:0 !important; box-shadow:0 2px 6px -1px rgba(0,0,0,.35) !important; cursor:pointer; } /* 17d. Interactive stop card header, subtle right-chevron (>) & top-right 3-dot context menu (⋮) */ #routeStops .stop-head{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; flex-wrap:nowrap; } #routeStops .stop-title-row{ flex:1 1 auto; min-width:0; } #routeStops .stop-badges .stop-details-btn.stop-chevron-ind, #routeStops .stop-details-btn.stop-chevron-ind, :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-details-btn.stop-chevron-ind{ background:transparent !important; background-color:transparent !important; border:0 !important; box-shadow:none !important; min-width:1.55rem !important; min-height:1.55rem !important; width:1.55rem; height:1.55rem; padding:0 !important; color:var(--muted) !important; border-radius:.55rem !important; } #routeStops .stop-details-btn.stop-chevron-ind .stop-chevron-svg{ width:.95rem; height:.95rem; transition:transform .18s ease, color .18s ease; } #routeStops .stop-card.is-expanded .stop-details-btn.stop-chevron-ind .stop-chevron-svg, #routeStops .stop-details-btn.stop-chevron-ind.is-active .stop-chevron-svg{ transform:rotate(90deg); color:#6a4cff; } #routeStops .stop-edge-controls{ display:inline-flex; align-items:center; gap:.15rem; flex:none; } #routeStops .stop-menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:1.85rem; height:1.85rem; border-radius:.48rem; border:0; background:transparent; color:var(--muted); cursor:pointer; transition:background-color .15s ease, color .15s ease; } #routeStops .stop-menu-btn:hover, #routeStops .stop-menu-btn.is-active{ background:rgba(106,76,255,.1); color:var(--ink); } #routeStops .stop-menu-ico{ width:1.05rem; height:1.05rem; } #routeStops .stop-actions.stop-context-menu[hidden]{ display:none !important; } #routeStops .stop-actions.stop-context-menu:not([hidden]){ position:absolute; top:2.35rem; left:.4rem; right:.4rem; width:auto; min-width:0; z-index:25; margin:0 !important; padding:.35rem !important; border-radius:.75rem; background:var(--surface); border:1px solid color-mix(in srgb,var(--line) 85%,transparent) !important; box-shadow:0 12px 28px -6px rgba(15,23,42,.18),0 4px 10px -3px rgba(15,23,42,.08); } #routeStops .stop-actions.stop-context-menu:not([hidden]) .stop-customize-group{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; width:100% !important; gap:.3rem !important; } #routeStops .stop-actions.stop-context-menu:not([hidden]) .stop-customize-group .stop-act-btn{ width:100% !important; min-width:0 !important; min-height:2.05rem !important; padding:.24rem .22rem !important; gap:.22rem !important; font-size:.75rem !important; line-height:1.15 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; } #routeStops .stop-actions.stop-context-menu:not([hidden]) .stop-customize-group .stop-act-btn .stop-act-ico{ width:.76rem !important; height:.76rem !important; flex:0 0 auto !important; display:inline-block !important; } @media (max-width:420px){ #routeStops .stop-actions.stop-context-menu:not([hidden]) .stop-customize-group .stop-act-btn{ font-size:.75rem !important; padding:.2rem .12rem !important; gap:.14rem !important; } #routeStops .stop-actions.stop-context-menu:not([hidden]) .stop-customize-group .stop-act-btn .stop-act-ico{ width:.7rem !important; height:.7rem !important; } } :root[data-theme="dark"]:not([data-contrast="high"]) #routeStops .stop-actions.stop-context-menu:not([hidden]){ background:#0f172a; border-color:#334155 !important; box-shadow:0 14px 30px -6px rgba(0,0,0,.55); } /* 17e. Segmented List View / Map View Toggle in Modal Header */ .route-view-toggle{ display:inline-flex; align-items:center; gap:.12rem; padding:.14rem; border-radius:.55rem; background:rgba(15,23,42,.06); } :root[data-theme="dark"] .route-view-toggle{ background:rgba(255,255,255,.08); } .route-view-btn{ display:inline-flex; align-items:center; gap:.24rem; min-height:1.55rem; padding:.18rem .48rem; border-radius:.42rem; border:0; background:transparent; color:var(--muted); font-size:.75rem; font-weight:500; line-height:1.2; cursor:pointer; white-space:nowrap; transition:background-color .15s ease, color .15s ease, box-shadow .15s ease; } .route-view-btn.is-active{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(15,23,42,.08); } #routePreviewModal[data-route-view="map"] #routeTopGrid{ grid-template-columns:minmax(0,1fr) !important; gap:.55rem; } #routePreviewModal[data-route-view="map"] #mapCanvas{ min-height:300px !important; max-height:380px !important; height:42vh !important; width:100% !important; } #routePreviewModal[data-route-view="map"] #routeCustomizeSection{ max-height:220px; overflow-y:auto; } @media (max-width:639px){ #routeStats.route-stats-row{ min-width:12.5rem; font-size:.75rem !important; } #routeStats .route-stat-sep{ margin:0 .26rem; } .route-view-btn span{ font-size:.75rem; } .route-view-btn{ padding:.14rem .36rem; } .tour-help-btn .tour-help-label{ display:none !important; } } #customizeTourBtn .tour-help-label{ display:none !important; } #customizeTourBtn .tour-help-q{ width:1.25rem !important; height:1.25rem !important; font-size:.75rem !important; } /* 17f. Navigation App Chooser Pop-Up (Joyride AI Preferred vs Google Maps) */ @keyframes jrNavPopupIn{ 0%{ opacity:0; transform:scale(.95) translateY(8px); } 100%{ opacity:1; transform:scale(1) translateY(0); } } #navOpenedNote.jr-nav-chooser:not([hidden]){ position:fixed !important; inset:0 !important; z-index:95 !important; margin:0 !important; padding:1.15rem !important; border:0 !important; border-radius:0 !important; background:rgba(15,23,42,.56) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex !important; align-items:center !important; justify-content:center !important; box-shadow:none !important; } #navOpenedNote.jr-nav-chooser .jr-nav-chooser-dialog{ width:100%; max-width:23.5rem; padding:1.25rem 1.3rem; border-radius:1.25rem; background:var(--surface); border:1px solid color-mix(in srgb,var(--violet) 26%,var(--line)); box-shadow:0 24px 48px -12px rgba(15,23,42,.38),0 0 0 1px rgba(106,76,255,.12); animation:jrNavPopupIn .18s cubic-bezier(.16,1,.3,1); } :root[data-theme="dark"] #navOpenedNote.jr-nav-chooser .jr-nav-chooser-dialog{ background:#1e293b; border-color:rgba(167,139,250,.35); box-shadow:0 26px 52px -12px rgba(0,0,0,.65); } #navOpenedNote.jr-nav-chooser .jr-leaving-banner-actions{ display:flex !important; flex-direction:column !important; gap:.55rem !important; margin-top:.9rem !important; } #navOpenedNote.jr-nav-chooser .jr-leaving-banner-actions > *{ width:100% !important; justify-content:center !important; } .jr-nav-choice-joyride{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:.45rem !important; min-height:44px !important; background:linear-gradient(135deg,#6a4cff 0%,#7d62ff 55%,#9580ff 100%) !important; border-color:transparent !important; color:#ffffff !important; box-shadow:0 10px 22px -10px rgba(106,76,255,.55); } .jr-nav-choice-joyride .jr-brand-inline-words{ color:#ffffff !important; } .jr-nav-preferred-pill{ display:inline-flex; align-items:center; padding:.12rem .42rem; border-radius:999px; font-size:.75rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; background:rgba(255,255,255,.22); color:#ffffff; border:1px solid rgba(255,255,255,.35); } #routeStops .stop-card.stop-card-just-added{ box-shadow:0 0 0 2px #6a4cff, 0 6px 18px -4px rgba(106,76,255,.28) !important; transition:box-shadow .25s ease; } /* 17g. Active Preloaded Route Bar in Joyride AI Maps (#immRouteBar) */ .jr-imm-route-bar:not([hidden]){ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(1rem + env(safe-area-inset-bottom)); width:min(32rem, calc(100vw - 9.5rem)); z-index:6; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid color-mix(in srgb,var(--violet) 22%,var(--line)); border-radius:1rem; padding:.7rem .85rem; box-shadow:0 16px 36px -12px rgba(15,23,42,.32); display:flex; flex-direction:column; gap:.5rem; } :root[data-theme="dark"] .jr-imm-route-bar:not([hidden]){ background:rgba(15,23,42,.92); border-color:rgba(167,139,250,.32); box-shadow:0 18px 40px -12px rgba(0,0,0,.65); } @media (max-width:639px){ .jr-imm-route-bar:not([hidden]){ left:.75rem; right:3.8rem; transform:none; width:auto; bottom:calc(4.6rem + env(safe-area-inset-bottom)); padding:.6rem .75rem; } } .jr-imm-route-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; } .jr-imm-route-title{ font-size:.82rem; font-weight:600; color:var(--ink); line-height:1.25; } .jr-imm-route-stats{ font-size:.75rem; color:var(--muted); margin-top:.1rem; } .jr-imm-route-actions{ display:inline-flex; align-items:center; gap:.35rem; flex:none; } .jr-imm-route-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.3rem; min-height:32px; padding:.3rem .65rem; border-radius:.65rem; font-size:.75rem; font-weight:500; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; transition:border-color .15s ease,background-color .15s ease; } .jr-imm-route-btn-primary{ background:linear-gradient(135deg,#6a4cff 0%,#836bff 100%); border-color:transparent; color:#ffffff; } .jr-imm-route-stops{ display:flex; align-items:center; gap:.38rem; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:.05rem; } .jr-imm-route-stops::-webkit-scrollbar{ display:none; } .jr-imm-stop-pill{ display:inline-flex; align-items:center; gap:.35rem; flex:0 0 auto; max-width:12.5rem; padding:.22rem .55rem .22rem .28rem; border-radius:999px; font-size:.75rem; background:var(--bg); border:1px solid var(--line); color:var(--ink); cursor:pointer; transition:border-color .15s ease,background-color .15s ease; } .jr-imm-stop-pill:hover, .jr-imm-stop-pill.is-active{ border-color:#6a4cff; background:var(--violet-t); } .jr-imm-stop-num{ display:inline-flex; align-items:center; justify-content:center; width:1.15rem; height:1.15rem; border-radius:999px; font-size:.75rem; font-weight:600; background:#6a4cff; color:#ffffff; flex:none; } .jr-imm-stop-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 17h. UX/UI 4-Track Decluttering & Features (Tracks A–D, F1–F5) */ /* Track A: Desktop "More" dropdown (#desktopMoreNav) & Global Search Pill (#globalSearchBtn) */ .jr-nav-more{ position:relative; display:inline-block; } .jr-nav-more > summary.jr-nav-more-btn{ list-style:none; display:inline-flex; align-items:center; gap:.28rem; cursor:pointer; user-select:none; } .jr-nav-more > summary.jr-nav-more-btn::-webkit-details-marker{ display:none; } .jr-nav-more-chev{ font-size:.75rem; opacity:.72; transition:transform .16s ease; } .jr-nav-more[open] .jr-nav-more-chev{ transform:rotate(180deg); } .jr-nav-more-menu{ position:absolute; top:calc(100% + .45rem); right:0; min-width:11.5rem; padding:.4rem; border-radius:.9rem; background:var(--surface); border:1px solid var(--line); box-shadow:0 18px 38px -12px rgba(15,23,42,.28); display:flex; flex-direction:column; gap:.12rem; z-index:60; } .jr-nav-more-menu .navlink{ display:flex; align-items:center; width:100%; padding:.48rem .72rem; border-radius:.6rem; font-size:.86rem; white-space:nowrap; } .jr-nav-more-menu .navlink:hover{ background:var(--violet-t); color:var(--violet-d); } .jr-global-search-btn{ display:inline-flex; align-items:center; gap:.35rem; height:2.15rem; padding:0 .62rem; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); font-size:.76rem; font-weight:500; cursor:pointer; transition:border-color .15s ease, color .15s ease, background-color .15s ease; } .jr-global-search-btn:hover{ border-color:var(--violet); color:var(--violet-d); background:var(--surface); } .jr-global-search-kbd{ display:none; padding:.08rem .34rem; border-radius:.38rem; background:var(--surface); border:1px solid var(--line); font-family:var(--font-sans); font-size:.75rem; font-weight:600; color:var(--muted); } @media (min-width:640px){ .jr-global-search-kbd{ display:inline-block; } } /* Track A: Mobile Drawer Grouping (.jr-drawer-primary-group & .jr-drawer-more) */ .jr-drawer-primary-group{ display:flex; flex-direction:column; gap:.12rem; } .jr-drawer-group-label{ margin:0 0 .15rem; padding:0 .55rem; font-size:.75rem; font-weight:600; color:var(--muted); letter-spacing:.01em; } .jr-drawer-more{ margin-top:.2rem; border-top:1px solid var(--line); padding-top:.25rem; } .jr-drawer-more-summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; padding:.42rem .55rem; border-radius:.65rem; font-size:.82rem; font-weight:600; color:var(--ink-soft); cursor:pointer; user-select:none; } .jr-drawer-more-summary::-webkit-details-marker{ display:none; } .jr-drawer-more-summary:hover{ background:var(--card); } .jr-drawer-more-chev{ font-size:.75rem; color:var(--muted); transition:transform .16s ease; } .jr-drawer-more[open] .jr-drawer-more-chev{ transform:rotate(180deg); } .jr-drawer-more-list{ display:flex; flex-direction:column; gap:.08rem; padding-top:.12rem; } .units-pick-drawer{ min-width:4.4rem; font-size:.75rem; padding:.24rem .45rem; } /* Track B & C: Leave-At Weather Popover (#leaveAtPopover) */ .jr-leave-at-popover[hidden]{ display:none !important; } .jr-leave-at-popover:not([hidden]){ margin-bottom:.65rem; padding:.68rem .82rem; border-radius:.85rem; background:var(--surface); border:1px solid color-mix(in srgb,var(--violet) 28%,var(--line)); box-shadow:0 12px 26px -14px rgba(15,23,42,.22); display:flex; flex-direction:column; gap:.48rem; } .jr-leave-at-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; } .jr-leave-at-title{ font-size:.75rem; font-weight:600; color:var(--ink); } .jr-leave-at-close{ width:1.5rem; height:1.5rem; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:.75rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .jr-leave-at-pills{ display:flex; flex-wrap:wrap; gap:.35rem; } .jr-leave-pill{ padding:.28rem .65rem; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); font-size:.75rem; font-weight:500; cursor:pointer; transition:all .15s ease; } .jr-leave-pill.is-active, .jr-leave-pill[aria-pressed="true"]{ background:var(--violet-t); border-color:var(--violet); color:var(--violet-d); font-weight:600; } .jr-leave-at-hint{ margin:0; font-size:.75rem; color:var(--muted); line-height:1.35; } /* Track B & C: Two-Tier Progressive Disclosure in #myStopsDetails (.jr-stops-tier1 / .jr-stops-tier2) */ .jr-stops-tier1{ display:flex; flex-direction:column; gap:.62rem; } .jr-stops-quick-toggles, .jr-stops-quick-checks{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .75rem; } .jr-stops-tier1-bar, .jr-stops-smart-row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.65rem; padding-top:.35rem; border-top:1px dashed var(--line); } .jr-detour-budget-group, .jr-detour-budget-box, .jr-leave-at-inline, .jr-leave-when-box{ display:flex; flex-direction:column; gap:.25rem; } .jr-detour-pills{ display:inline-flex; align-items:center; gap:.22rem; padding:.18rem; border-radius:.68rem; background:var(--surface); border:1px solid var(--line); } .jr-detour-pill{ padding:.24rem .58rem; border-radius:.5rem; border:0; background:transparent; color:var(--ink-soft); font-size:.75rem; font-weight:500; cursor:pointer; transition:all .14s ease; } .jr-detour-pill.is-active, .jr-detour-pill[aria-pressed="true"]{ background:var(--violet-t); color:var(--violet-d); font-weight:600; } .jr-leave-select{ min-height:2.1rem !important; padding:.26rem 1.8rem .26rem .6rem !important; font-size:.76rem !important; border-radius:.65rem !important; } .jr-stops-tier2{ margin-top:.65rem; padding-top:.55rem; border-top:1px solid var(--line); } .jr-stops-adv-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:.38rem .55rem; border-radius:.65rem; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-size:.76rem; font-weight:500; cursor:pointer; } .jr-stops-adv-toggle:hover{ border-color:var(--violet); color:var(--violet-d); } .jr-stops-adv-chev{ font-size:.75rem; transition:transform .16s ease; } .jr-stops-adv-toggle[aria-expanded="false"] .jr-stops-adv-chev{ transform:rotate(-90deg); } .jr-stops-adv-body{ margin-top:.55rem; } .jr-stops-adv-body[hidden]{ display:none !important; } /* Track C (F1): Stop Reordering Row inside #stopMenu_${i} */ .stop-reorder-group{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.35rem; width:100%; margin-top:.35rem; padding-top:.35rem; border-top:1px solid var(--line); } .stop-reorder-group .stop-customize-btn[disabled]{ opacity:.42; cursor:not-allowed; } /* Track B: Dashboard Segmented Workspace Filter Tabs (#dashViewTabs) */ .jr-dash-tabs{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; padding:.28rem; border-radius:.9rem; background:var(--card); border:1px solid var(--line); } .jr-dash-tab{ padding:.38rem .78rem; border-radius:.65rem; border:0; background:transparent; color:var(--muted); font-size:.78rem; font-weight:600; cursor:pointer; transition:all .15s ease; } .jr-dash-tab:hover{ color:var(--ink); } .jr-dash-tab.is-active, .jr-dash-tab[aria-selected="true"]{ background:var(--surface); color:var(--violet-d); box-shadow:0 4px 12px -6px rgba(15,23,42,.22); } /* Track B: Immersive Map Drawer Collapsible Layers (#immDrawerLayersDetails) & Dynamic Control Docking */ .jr-imm-drawer-layers{ border:1px solid var(--line); border-radius:.85rem; padding:.45rem .65rem; background:var(--card); } .jr-imm-drawer-layers-summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; font-size:.8rem; font-weight:600; color:var(--ink); cursor:pointer; user-select:none; } .jr-imm-drawer-layers-summary::-webkit-details-marker{ display:none; } .jr-imm-drawer-layers-body{ margin-top:.6rem; padding-top:.55rem; border-top:1px solid var(--line); } @media (max-width:639px){ #immersiveShell:has(#immRouteBar:not([hidden])) .jr-imm-right-controls{ bottom:calc(10.5rem + env(safe-area-inset-bottom)) !important; transition:bottom .2s ease; } } /* Track B: Guide Post-Article Reference Bar (.jr-post-article-bar) & Route Telemetry Toggle (.jr-measured-head) */ .jr-post-article-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; padding:.55rem .78rem; border-radius:.9rem; background:var(--card); border:1px solid var(--line); } .jr-post-article-label{ font-size:.76rem; font-weight:600; color:var(--muted); } .jr-post-article-pills{ display:flex; flex-wrap:wrap; gap:.28rem; } .jr-post-tab{ padding:.28rem .65rem; border-radius:999px; border:1px solid transparent; background:transparent; color:var(--ink-soft); font-size:.75rem; font-weight:600; cursor:pointer; transition:all .14s ease; } .jr-post-tab.is-active, .jr-post-tab[aria-pressed="true"]{ background:var(--surface); border-color:var(--violet); color:var(--violet-d); } .jr-measured-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.45rem; } .jr-measured-head .jr-measured-title{ margin:0 !important; } .jr-measured-toggle{ display:inline-flex; align-items:center; gap:.32rem; padding:.26rem .62rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-size:.75rem; font-weight:600; cursor:pointer; } .jr-measured-toggle:hover{ border-color:var(--violet); color:var(--violet-d); } .jr-measured-toggle[aria-expanded="false"] .jr-measured-chev{ transform:rotate(-90deg); } /* Track C (F5): Custom Route Export Row in #navOpenedNote (.jr-nav-export-row) */ .jr-nav-export-row{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.45rem; width:100%; } .jr-nav-export-btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:.38rem !important; flex-wrap:nowrap !important; white-space:nowrap !important; min-height:38px !important; padding:.35rem .6rem !important; font-size:.76rem !important; line-height:1.2 !important; text-decoration:none !important; } .jr-nav-export-btn svg{ display:inline-block !important; flex-shrink:0 !important; width:14px !important; height:14px !important; vertical-align:middle !important; } .jr-nav-export-btn span{ display:inline-block !important; line-height:1.2 !important; vertical-align:middle !important; } /* AdSense Policy Guard: Never display ad containers or Google Auto Ads on non-eligible screens or full-screen Maps */ html.is-immersive .ad-wrap, html.is-immersive .google-auto-placed, html.is-immersive ins.adsbygoogle, html.is-immersive #google_pedestal_container, body[data-ad-eligible="false"] .ad-wrap, body[data-ad-eligible="false"] .google-auto-placed, body[data-ad-eligible="false"] ins.adsbygoogle, body[data-ad-eligible="false"] #google_pedestal_container{ display:none !important; visibility:hidden !important; height:0 !important; overflow:hidden !important; pointer-events:none !important; } /* Track C (F4): Universal Command Palette Modal (#cmdPaletteModal) */ .jr-cmd-palette[hidden], .jr-cmd-modal[hidden]{ display:none !important; } .jr-cmd-palette:not([hidden]), .jr-cmd-modal:not([hidden]){ position:fixed; inset:0; z-index:130; display:flex; align-items:flex-start; justify-content:center; padding:max(3.5rem, 8vh) 1rem 1.5rem; } .jr-cmd-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.58); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .jr-cmd-dialog, .jr-cmd-panel{ position:relative; z-index:1; width:min(36rem, 100%); max-height:min(30rem, 80vh); display:flex; flex-direction:column; border-radius:1.2rem; background:var(--surface); border:1px solid color-mix(in srgb,var(--violet) 28%,var(--line)); box-shadow:0 26px 56px -14px rgba(15,23,42,.45); overflow:hidden; padding:0 !important; } .jr-cmd-head, .jr-cmd-search-bar{ display:flex; align-items:center; gap:.55rem; padding:.75rem .95rem; border-bottom:1px solid var(--line); } .jr-cmd-search-ico{ color:var(--muted); flex:none; } .jr-cmd-input{ flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font-size:.95rem; font-weight:500; outline:none; } .jr-cmd-close, .jr-cmd-esc-btn{ padding:.22rem .5rem; border-radius:.45rem; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:.75rem; font-weight:700; cursor:pointer; } .jr-cmd-scopes, .jr-cmd-scope-row{ display:flex; flex-wrap:wrap; gap:.3rem; padding:.48rem .95rem; background:var(--card); border-bottom:1px solid var(--line); } .jr-cmd-scope{ padding:.22rem .62rem; border-radius:999px; border:1px solid transparent; background:transparent; color:var(--muted); font-size:.75rem; font-weight:600; cursor:pointer; } .jr-cmd-scope.is-active, .jr-cmd-scope[aria-pressed="true"]{ background:var(--surface); border-color:var(--violet); color:var(--violet-d); } .jr-cmd-results{ list-style:none; margin:0; padding:.45rem; overflow-y:auto; max-height:21rem; display:flex; flex-direction:column; gap:.18rem; } .jr-cmd-item{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:.65rem; padding:.55rem .72rem; border-radius:.75rem; border:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; transition:background-color .12s ease; } .jr-cmd-item:hover, .jr-cmd-item.is-selected{ background:var(--violet-t); } .jr-cmd-item-main{ display:flex; flex-direction:column; min-width:0; } .jr-cmd-item-title{ font-size:.85rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jr-cmd-item-sub{ font-size:.75rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jr-cmd-item-badge{ flex:none; padding:.14rem .48rem; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--ink-soft); font-size:.75rem; font-weight:600; } .jr-cmd-empty{ padding:1.25rem; text-align:center; font-size:.82rem; color:var(--muted); } /* ---------- 18. "Recommended for you" UX Redesign — Daylight & Midnight Aurora (Light Mode, Dark Mode & Controls) ---------- */ /* 18a. Daylight Aurora Panel (Light Mode) */ .reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-related-routes{ background:linear-gradient(128deg, #e2d4f7 0%, #dcd0ff 24%, #d8e4fb 52%, #cbe9fb 78%, #bde3ff 100%) !important; background-size:180% 180% !important; animation:gradient-aurora 5s ease-in-out infinite !important; border:1.5px solid rgba(106,76,255,.26) !important; box-shadow:0 20px 44px -26px rgba(55,38,128,.26), inset 0 1px 0 rgba(255,255,255,.82) !important; } /* 18b. Midnight Aurora Panel (Dark Mode) */ :root[data-theme="dark"]:not([data-contrast="high"]) :is(.reco-panel.animated-gradient,.jr-related-guides.animated-gradient,.jr-related-routes,.jr-home-reco-panel){ background:linear-gradient(128deg, #161f3d 0%, #241d4e 26%, #182a56 52%, #132f4c 78%, #271e54 100%) !important; background-size:180% 180% !important; border:1.5px solid rgba(167,139,250,.44) !important; box-shadow:0 24px 48px -24px rgba(4,8,22,.82), inset 0 1px 0 rgba(196,181,253,.22) !important; } :root[data-theme="dark"][data-contrast="high"] :is(.reco-panel.animated-gradient,.jr-related-guides.animated-gradient,.jr-related-routes,.jr-home-reco-panel){ background:#0a0a0a !important; border:2px solid #facc15 !important; box-shadow:none !important; animation:none !important; } /* 18c. Kicker Pill, Header Title & "Explore all →" CTA */ :is(.reco-panel,.jr-related-guides,.jr-related-routes) .reco-kicker{ display:inline-flex; align-items:center; gap:.32rem; padding:.16rem .56rem; border-radius:999px; background:rgba(255,255,255,.76); border:1px solid rgba(106,76,255,.24); color:#4f32e0 !important; font-size:.75rem !important; font-weight:400 !important; box-shadow:0 2px 8px -4px rgba(67,50,130,.18); } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.reco-panel,.jr-related-guides,.jr-related-routes) .reco-kicker{ background:rgba(124,93,250,.22) !important; border-color:rgba(196,181,253,.42) !important; color:#ddd6fe !important; box-shadow:0 4px 12px -4px rgba(0,0,0,.45); } :is(.reco-panel,.jr-related-guides,.jr-related-routes) :is(.reco-title,.jr-related-title){ color:#0f172a; letter-spacing:-.015em; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.reco-panel,.jr-related-guides,.jr-related-routes) :is(.reco-title,.jr-related-title){ color:#f8fafc !important; } .jr-related-more-link{ display:inline-flex; align-items:center; gap:.25rem; padding:.22rem .66rem; border-radius:999px; background:rgba(255,255,255,.82); border:1px solid rgba(106,76,255,.26); color:#4f32e0 !important; font-size:.76rem !important; font-weight:400 !important; transition:transform .16s ease, box-shadow .16s ease; } .jr-related-more-link:hover, .jr-related-more-link:focus-visible{ background:#ffffff; border-color:#6a4cff; transform:translateY(-1px); box-shadow:0 6px 14px -6px rgba(106,76,255,.35); } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-related-more-link{ background:rgba(30,41,59,.86) !important; border-color:rgba(167,139,250,.44) !important; color:#ddd6fe !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-related-more-link:hover, :root[data-theme="dark"]:not([data-contrast="high"]) .jr-related-more-link:focus-visible{ background:#312e81 !important; border-color:#c4b5fd !important; color:#ffffff !important; } /* 18d. Personalization Signal Chips ("Based on:") & Overflow Tooltip */ .reco-based-label{ color:#334155 !important; font-size:.75rem !important; font-weight:400 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-based-label{ color:#cbd5e1 !important; } .reco-chip{ background:rgba(255,255,255,.88) !important; border:1px solid rgba(106,76,255,.24) !important; color:#1e1b4b !important; font-size:.75rem !important; font-weight:400 !important; box-shadow:0 2px 6px -2px rgba(40,30,110,.1); transition:border-color .15s ease, transform .15s ease, background-color .15s ease; } .reco-chip.reco-chip-more{ background:rgba(106,76,255,.14) !important; border-color:rgba(106,76,255,.38) !important; color:#4328cc !important; } .reco-chip.reco-chip-more:hover, .reco-chip.reco-chip-more:focus-visible{ background:rgba(106,76,255,.22) !important; border-color:#6a4cff !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-panel .reco-chip{ background:rgba(15,23,42,.78) !important; border:1px solid rgba(167,139,250,.42) !important; color:#f1f5f9 !important; box-shadow:0 4px 10px -4px rgba(0,0,0,.45); } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-panel .reco-chip.reco-chip-more{ background:rgba(124,93,250,.28) !important; border-color:rgba(196,181,253,.58) !important; color:#ede9fe !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-more-tooltip{ background:#1e293b !important; border:1px solid rgba(167,139,250,.45) !important; color:#f8fafc !important; box-shadow:0 18px 38px -12px rgba(0,0,0,.75) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-more-tooltip-title{ color:#cbd5e1 !important; } /* 18e. Compact Recommendation Cards (.g-card.g-card-compact in #routesRecoPanel, .jr-related-guides, .jr-related-routes) */ :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact{ background:linear-gradient(145deg, rgba(255,255,255,.97) 0%, rgba(248,246,255,.95) 100%) !important; border:1px solid rgba(106,76,255,.2) !important; box-shadow:0 10px 24px -16px rgba(35,24,88,.22) !important; overflow:hidden; transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, box-shadow .22s ease !important; } :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact:hover, :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact:focus-visible{ transform:translateY(-2px); border-color:rgba(106,76,255,.52) !important; box-shadow:0 16px 32px -16px rgba(83,56,230,.34) !important; } :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact .g-card-media img{ transition:transform .38s cubic-bezier(.2,.8,.2,1); } :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact:hover .g-card-media img{ transform:scale(1.04); } :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact .g-card-title{ color:#0f172a !important; font-weight:700 !important; } :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact:hover .g-card-title{ color:#4f32e0 !important; } :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact .g-card-compact-sum{ color:#475569 !important; } :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact .g-card-meta{ color:#64748b !important; border-top:1px solid rgba(106,76,255,.12); } :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact .g-card-why{ background:linear-gradient(135deg, #f3effe 0%, #e9e2ff 100%) !important; color:#4f32e0 !important; border:1px solid rgba(106,76,255,.28) !important; border-radius:999px; font-weight:600; } /* Dark Mode Compact Recommendation Cards */ :root[data-theme="dark"]:not([data-contrast="high"]) :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact{ background:linear-gradient(145deg, #1e293b 0%, #152033 100%) !important; border:1px solid rgba(148,163,184,.3) !important; box-shadow:0 14px 28px -16px rgba(0,0,0,.62) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact:hover, :root[data-theme="dark"]:not([data-contrast="high"]) :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact:focus-visible{ border-color:#a78bfa !important; box-shadow:0 16px 32px -14px rgba(106,76,255,.45) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact .g-card-title{ color:#f8fafc !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact:hover .g-card-title{ color:#ddd6fe !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact .g-card-compact-sum{ color:#cbd5e1 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact .g-card-meta{ color:#94a3b8 !important; border-top-color:rgba(148,163,184,.18) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact .g-card-cat{ background:rgba(15,23,42,.82) !important; color:#f8fafc !important; border:1px solid rgba(167,139,250,.38) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact .g-card-loc, :root[data-theme="dark"]:not([data-contrast="high"]) :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact .g-card-route{ background:rgba(30,41,59,.9) !important; color:#e2e8f0 !important; border:1px solid rgba(148,163,184,.34) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(#routesRecoPanel,.jr-related-guides,.jr-related-routes) .g-card.g-card-compact .g-card-why{ background:linear-gradient(135deg, rgba(106,76,255,.32) 0%, rgba(79,70,229,.28) 100%) !important; color:#ddd6fe !important; border:1px solid rgba(167,139,250,.48) !important; } /* 18f. Structured & Scannable Guide Cards in #recoPanel & #guidesSection (.reco-grid > .g-card.g-card-hero-overlay) */ /* Header hierarchy & subtle inline "Based on..." context meta */ .reco-header-main{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.75rem 1.25rem; padding-bottom:.85rem; border-bottom:1px solid rgba(106,76,255,.15); } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-header-main{ border-bottom-color:rgba(167,139,250,.22); } .reco-header-titles{ flex:1 1 20rem; min-width:0; } .reco-kicker-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .65rem; margin-bottom:.35rem; } .reco-kicker-row .reco-kicker{ margin:0 !important; } .reco-kicker-row .reco-based{ margin-top:0 !important; padding-left:.6rem; border-left:1px solid rgba(106,76,255,.24); } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-kicker-row .reco-based{ border-left-color:rgba(167,139,250,.32); } .reco-subtitle{ color:#475569 !important; line-height:1.45; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-subtitle{ color:#cbd5e1 !important; } .reco-see-all-cta, #guidesSection .reco-header-main > a[data-page="guides"]{ align-self:center; display:inline-flex; align-items:center; gap:.25rem; padding:.28rem .72rem; border-radius:999px; background:rgba(255,255,255,.82); border:1px solid rgba(106,76,255,.26); color:#4f32e0 !important; font-size:.78rem !important; font-weight:500 !important; text-decoration:none !important; transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease; } #guidesSection .reco-header-main > a[data-page="guides"]:hover{ background:#ffffff; border-color:#6a4cff; transform:translateY(-1px); box-shadow:0 6px 14px -6px rgba(106,76,255,.35); } :root[data-theme="dark"]:not([data-contrast="high"]) #guidesSection .reco-header-main > a[data-page="guides"]{ background:rgba(30,41,59,.86) !important; border-color:rgba(167,139,250,.44) !important; color:#ddd6fe !important; } /* Subtle non-competing metadata styling for "Based on..." chips so they don't compete with category filter pills */ .reco-based.reco-context-meta .reco-chip:not(.reco-chip-more):not(.reco-tooltip-chip){ background:rgba(255,255,255,.45) !important; border:1px solid rgba(106,76,255,.14) !important; box-shadow:none !important; padding:.1rem .42rem !important; font-size:.75rem !important; color:#334155 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-panel .reco-based.reco-context-meta .reco-chip:not(.reco-chip-more):not(.reco-tooltip-chip){ background:rgba(15,23,42,.52) !important; border:1px solid rgba(167,139,250,.24) !important; box-shadow:none !important; color:#f1f5f9 !important; } /* Structured 2-Zone Card Layout inside #guidesSection & #recoPanel Carousels */ .reco-panel .reco-grid > .g-card.g-card-hero-overlay, #guidesSection .reco-grid > .g-card.g-card-hero-overlay{ border:0 !important; box-shadow:0 0 0 1px rgba(255,255,255,.72), 0 16px 34px -16px rgba(15,23,42,.38) !important; transition:transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease !important; } .reco-panel .reco-grid > .g-card.g-card-hero-overlay:hover, .reco-panel .reco-grid > .g-card.g-card-hero-overlay:focus-visible, #guidesSection .reco-grid > .g-card.g-card-hero-overlay:hover, #guidesSection .reco-grid > .g-card.g-card-hero-overlay:focus-visible{ transform:translateY(-4px) !important; box-shadow:0 0 0 1.5px rgba(106,76,255,.75), 0 22px 42px -16px rgba(49,34,118,.5) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-panel .reco-grid > .g-card.g-card-hero-overlay, :root[data-theme="dark"]:not([data-contrast="high"]) #guidesSection .reco-grid > .g-card.g-card-hero-overlay{ border:0 !important; box-shadow:0 0 0 1px rgba(167,139,250,.42), 0 18px 36px -18px rgba(0,0,0,.72) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-panel .reco-grid > .g-card.g-card-hero-overlay:hover, :root[data-theme="dark"]:not([data-contrast="high"]) .reco-panel .reco-grid > .g-card.g-card-hero-overlay:focus-visible, :root[data-theme="dark"]:not([data-contrast="high"]) #guidesSection .reco-grid > .g-card.g-card-hero-overlay:hover, :root[data-theme="dark"]:not([data-contrast="high"]) #guidesSection .reco-grid > .g-card.g-card-hero-overlay:focus-visible{ box-shadow:0 0 0 1.5px #c4b5fd, 0 22px 44px -16px rgba(106,76,255,.48) !important; } /* Full-Bleed Photo + Smooth Bottom-to-Top Gradient Scrim (Option A) + Frosted Glass Pills (Option B) */ .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-scrim, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-scrim{ background:linear-gradient(to top, rgba(2,6,23,.88) 0%, rgba(15,23,42,.64) 28%, rgba(15,23,42,.24) 54%, rgba(15,23,42,0) 78%, rgba(15,23,42,.14) 100%) !important; } /* Focus photo cleanly across the full card */ .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-media img, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-media img{ object-position:center 35% !important; } /* Category badge: crisp frosted-glass pill in top-left of image */ .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-cat, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-cat{ top:.75rem !important; left:.75rem !important; background:rgba(15,23,42,.52) !important; backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); border:1px solid rgba(255,255,255,.24) !important; color:#ffffff !important; box-shadow:0 4px 12px -3px rgba(0,0,0,.35); } .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-topic, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-topic{ top:.72rem !important; right:.75rem !important; background:rgba(15,23,42,.52) !important; backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); border:1px solid rgba(255,255,255,.24) !important; } /* Clean transparent overlay body over the smooth bottom gradient scrim (no solid block cutting the photo) */ .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-body, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-body, .reco-panel .reco-grid.reco-carousel-track > .g-card:nth-child(n) .g-card-body, #guidesSection .reco-grid.reco-carousel-track > .g-card:nth-child(n) .g-card-body{ position:relative !important; z-index:2 !important; margin-top:auto !important; padding:.65rem .95rem .8rem !important; background:transparent !important; border-top:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:.26rem !important; } /* Frosted-glass Location pill above title */ .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-badges-row, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-badges-row{ margin:0 !important; display:flex !important; align-items:center !important; gap:.35rem !important; } .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-loc, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-loc{ background:rgba(15,23,42,.48) !important; backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%); border:1px solid rgba(255,255,255,.24) !important; color:#f8fafc !important; } /* High-contrast scannable card title (clamped to 2 lines with WCAG AAA contrast over scrim) */ .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-title, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-title, .reco-panel .reco-grid.reco-carousel-track > .g-card:nth-child(n) .g-card-title, #guidesSection .reco-grid.reco-carousel-track > .g-card:nth-child(n) .g-card-title{ color:#ffffff !important; font-size:1.02rem !important; font-weight:700 !important; line-height:1.26 !important; letter-spacing:-.01em !important; margin:.04rem 0 !important; text-shadow:0 2px 10px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.55) !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; max-width:none !important; } /* Clearly delineated metadata footer: Avatar + Author · Read time on left, Route/Guide format badge on right */ .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-meta, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-meta, .reco-panel .reco-grid.reco-carousel-track > .g-card:nth-child(n) .g-card-meta, #guidesSection .reco-grid.reco-carousel-track > .g-card:nth-child(n) .g-card-meta{ margin-top:.18rem !important; padding-top:.42rem !important; border-top:1px solid rgba(255,255,255,.18) !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:.45rem !important; color:#f1f5f9 !important; font-size:.75rem !important; text-shadow:0 1px 4px rgba(0,0,0,.55); justify-self:auto !important; } .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-meta > span:first-of-type, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-meta > span:first-of-type{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-route, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-route{ flex:0 0 auto; margin-left:auto; background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.26) !important; color:#f8fafc !important; } .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-route[data-guide-type-chip="route"], #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-route[data-guide-type-chip="route"]{ background:rgba(16,185,129,.24) !important; border-color:rgba(110,231,183,.45) !important; color:#ecfdf5 !important; } @media (max-width:639px){ .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-body, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-body, .reco-panel .reco-grid.reco-carousel-track > .g-card:nth-child(n) .g-card-body, #guidesSection .reco-grid.reco-carousel-track > .g-card:nth-child(n) .g-card-body{ position:static !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; padding:.65rem .75rem .65rem !important; gap:.2rem !important; } .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-meta, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-meta, .reco-panel .reco-grid.reco-carousel-track > .g-card:nth-child(n) .g-card-meta, #guidesSection .reco-grid.reco-carousel-track > .g-card:nth-child(n) .g-card-meta{ padding-top:.18rem !important; margin-top:.18rem !important; font-size:.75rem !important; line-height:1.1 !important; } .reco-panel .reco-grid > .g-card.g-card-hero-overlay .g-card-route, #guidesSection .reco-grid > .g-card.g-card-hero-overlay .g-card-route, .reco-panel .reco-grid.reco-carousel-track > .g-card:nth-child(n) .g-card-route, #guidesSection .reco-grid.reco-carousel-track > .g-card:nth-child(n) .g-card-route{ min-height:1.08rem !important; height:1.08rem !important; padding:0 .34rem !important; font-size:.75rem !important; } } /* 18g. Personalization Privacy & Controls Bar (.reco-foot, .reco-link, .reco-panel.is-off) */ .reco-panel .reco-foot{ margin-top:.75rem !important; padding-top:.58rem; border-top:1px solid rgba(106,76,255,.16); color:#334155 !important; font-size:.75rem !important; font-weight:400 !important; line-height:1.38 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-panel .reco-foot{ border-top-color:rgba(167,139,250,.22); color:#cbd5e1 !important; } .reco-panel .reco-link{ color:#4f32e0 !important; font-size:.75rem !important; font-weight:400 !important; padding:.08rem .36rem; border-radius:.4rem; background:rgba(255,255,255,.55); border:1px solid rgba(106,76,255,.22); } .reco-panel .reco-link:hover, .reco-panel .reco-link:focus-visible{ background:#ffffff; border-color:#6a4cff; color:#3b1fc9 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-panel .reco-link{ background:rgba(15,23,42,.68); border-color:rgba(167,139,250,.38); color:#ddd6fe !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-panel .reco-link:hover, :root[data-theme="dark"]:not([data-contrast="high"]) .reco-panel .reco-link:focus-visible{ background:#312e81; border-color:#c4b5fd; color:#ffffff !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-panel.is-off{ background:#1e293b !important; border:1px solid rgba(148,163,184,.35) !important; } /* 18h. Quick Filters + Interactive Horizontal Carousel Track + Balanced Bottom Navigation Bar */ .reco-toolbar{ margin-top:.75rem !important; margin-bottom:.75rem !important; } .reco-toolbar:empty{ display:none !important; } .reco-toolbar-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem .75rem; } .reco-quick-filters{ display:flex; flex-wrap:nowrap; align-items:center; gap:.4rem; overflow-x:auto; max-width:100%; padding:.12rem 0 .2rem; scrollbar-width:none; -ms-overflow-style:none; } .reco-quick-filters::-webkit-scrollbar{ display:none; } .reco-filter-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.25rem; padding:.3rem .78rem; border-radius:999px; border:1px solid rgba(106,76,255,.22); background:rgba(255,255,255,.88); color:#334155; font-size:.75rem; font-weight:600; line-height:1.2; cursor:pointer; white-space:nowrap; box-shadow:0 2px 6px -2px rgba(15,23,42,.06); transition:transform .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease; } .reco-filter-chip:hover, .reco-filter-chip:focus-visible{ background:#ffffff; border-color:#6a4cff; color:#4f32e0; transform:translateY(-1px); } .reco-filter-chip.is-active, .reco-filter-chip[aria-pressed="true"]{ background:linear-gradient(135deg, #6a4cff 0%, #7c5dfa 100%) !important; border-color:transparent !important; color:#ffffff !important; box-shadow:0 6px 14px -4px rgba(106,76,255,.45); } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-filter-chip{ background:rgba(15,23,42,.82); border-color:rgba(167,139,250,.32); color:#e2e8f0; box-shadow:0 2px 8px -2px rgba(0,0,0,.35); } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-filter-chip:hover, :root[data-theme="dark"]:not([data-contrast="high"]) .reco-filter-chip:focus-visible{ background:#1e1b4b; border-color:#a78bfa; color:#ffffff; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-filter-chip.is-active, :root[data-theme="dark"]:not([data-contrast="high"]) .reco-filter-chip[aria-pressed="true"]{ background:linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important; border-color:rgba(196,181,253,.55) !important; color:#ffffff !important; box-shadow:0 8px 18px -4px rgba(124,58,237,.55); } /* Unified Carousel Bottom Navigation Bar: [8 picks] (left) — [ • • • ] (center) — [ ‹ › ] (right) */ .reco-carousel-nav-bar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.75rem; margin-top:.75rem; padding:.35rem .15rem .1rem; } .reco-carousel-status{ display:flex; align-items:center; justify-self:start; } .reco-carousel-controls{ display:inline-flex; align-items:center; gap:.42rem; justify-self:end; } .reco-carousel-count{ display:inline-flex; align-items:center; font-size:.75rem; font-weight:600; color:#475569; padding:.18rem .58rem; border-radius:999px; background:rgba(255,255,255,.66); border:1px solid rgba(106,76,255,.18); white-space:nowrap; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-carousel-count{ background:rgba(15,23,42,.68); border-color:rgba(167,139,250,.28); color:#cbd5e1; } .reco-carousel-btn{ width:2rem; height:2rem; border-radius:999px; border:1px solid rgba(106,76,255,.28); background:rgba(255,255,255,.94); color:#4f32e0; display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700; line-height:1; cursor:pointer; box-shadow:0 4px 10px -3px rgba(15,23,42,.14); transition:transform .14s ease, background-color .14s ease, border-color .14s ease, opacity .14s ease; } .reco-carousel-btn:hover:not(:disabled), .reco-carousel-btn:focus-visible:not(:disabled){ background:#6a4cff; border-color:#6a4cff; color:#ffffff; transform:scale(1.06); } .reco-carousel-btn:disabled{ opacity:.38; cursor:default; box-shadow:none; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-carousel-btn{ background:rgba(15,23,42,.9); border-color:rgba(167,139,250,.42); color:#ddd6fe; box-shadow:0 4px 12px -3px rgba(0,0,0,.45); } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-carousel-btn:hover:not(:disabled), :root[data-theme="dark"]:not([data-contrast="high"]) .reco-carousel-btn:focus-visible:not(:disabled){ background:#7c3aed; border-color:#c4b5fd; color:#ffffff; } /* Horizontal scroll-snap carousel track */ .reco-carousel-track, #guidesSection .reco-grid.reco-carousel-track, .reco-panel .reco-grid.reco-carousel-track, .jr-related-compact-grid.reco-carousel-track{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:.95rem !important; overflow-x:auto !important; overflow-y:hidden !important; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:.2rem .1rem .35rem !important; scrollbar-width:none; -ms-overflow-style:none; } .reco-carousel-track::-webkit-scrollbar{ display:none; } .reco-carousel-track > .g-card{ scroll-snap-align:start; flex-shrink:0 !important; } /* Equal-height, uniform-width cards across all breakpoints (#homeGuidesGrid & #recoPanel on /guides) */ #guidesSection .reco-grid.reco-carousel-track > .g-card, #guidesSection .g-grid-home.reco-grid.reco-carousel-track > .g-card:nth-child(n), .reco-panel .reco-grid.reco-carousel-track > .g-card, .reco-panel .reco-grid.reco-carousel-track > .g-card:nth-child(n){ flex:0 0 85% !important; width:85% !important; max-width:85% !important; min-height:15.75rem !important; height:15.75rem !important; grid-column:auto !important; grid-row:auto !important; } @media (min-width: 640px) and (max-width: 1023px){ #guidesSection .reco-grid.reco-carousel-track > .g-card, #guidesSection .g-grid-home.reco-grid.reco-carousel-track > .g-card:nth-child(n), .reco-panel .reco-grid.reco-carousel-track > .g-card, .reco-panel .reco-grid.reco-carousel-track > .g-card:nth-child(n){ flex:0 0 calc((100% - .95rem) / 2) !important; width:calc((100% - .95rem) / 2) !important; max-width:calc((100% - .95rem) / 2) !important; min-height:18rem !important; height:18rem !important; } } @media (min-width: 1024px){ #guidesSection .reco-grid.reco-carousel-track > .g-card, #guidesSection .g-grid-home.reco-grid.reco-carousel-track > .g-card:nth-child(n), .reco-panel .reco-grid.reco-carousel-track > .g-card, .reco-panel .reco-grid.reco-carousel-track > .g-card:nth-child(n){ flex:0 0 calc((100% - 1.9rem) / 3) !important; width:calc((100% - 1.9rem) / 3) !important; max-width:calc((100% - 1.9rem) / 3) !important; min-height:18.5rem !important; height:18.5rem !important; } } /* Compact 50/50 cards inside carousel (/ready-made-routes & Guide/Route Footers) */ .jr-related-compact-grid.reco-carousel-track > .g-card.g-card-compact, #routesRecoPanel .jr-related-compact-grid.reco-carousel-track > .g-card.g-card-compact{ flex:0 0 86% !important; width:86% !important; max-width:86% !important; grid-column:auto !important; grid-row:auto !important; min-height:8.4rem !important; height:8.8rem !important; max-height:155px !important; } @media (min-width: 768px){ .jr-related-compact-grid.reco-carousel-track > .g-card.g-card-compact, #routesRecoPanel .jr-related-compact-grid.reco-carousel-track > .g-card.g-card-compact{ flex:0 0 calc((100% - .95rem) / 2) !important; width:calc((100% - .95rem) / 2) !important; max-width:calc((100% - .95rem) / 2) !important; min-height:8.8rem !important; height:9.2rem !important; max-height:155px !important; } } /* Carousel Pagination Dots (Centered inside .reco-carousel-nav-bar) */ .reco-dots{ display:flex; align-items:center; justify-content:center; justify-self:center; gap:.4rem; margin:0; padding:.28rem .65rem; border-radius:999px; background:rgba(255,255,255,.55); border:1px solid rgba(106,76,255,.14); } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-dots{ background:rgba(15,23,42,.58); border-color:rgba(167,139,250,.22); } .reco-dots[hidden], .reco-dots:empty{ display:none !important; } .reco-dot{ width:.46rem; height:.46rem; border-radius:999px; border:0; padding:0; background:rgba(106,76,255,.28); cursor:pointer; transition:width .18s ease, background-color .18s ease; } .reco-dot.is-active{ width:1.35rem; background:#6a4cff; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-dot{ background:rgba(167,139,250,.32); } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-dot.is-active{ background:#a78bfa; } /* ========================================================================== Item 34 — Interactive Split-Screen Map & Guide View ("All guides" on /guides) ========================================================================== */ .reco-map-toggle-btn{ display:inline-flex; align-items:center; gap:.38rem; padding:.34rem .78rem; border-radius:999px; font-size:.75rem; font-weight:600; line-height:1.15; border:1px solid rgba(106,76,255,.24); background:rgba(255,255,255,.82); color:#4c1d95; cursor:pointer; transition:all .16s ease; white-space:nowrap; } .reco-map-toggle-btn:hover{ background:#ffffff; border-color:rgba(106,76,255,.45); transform:translateY(-1px); } .reco-map-toggle-btn.is-active{ background:linear-gradient(135deg,#6a4cff 0%,#7c3aed 100%); color:#ffffff; border-color:transparent; box-shadow:0 4px 12px rgba(106,76,255,.26); } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-map-toggle-btn{ background:rgba(30,41,59,.78); border-color:rgba(167,139,250,.28); color:#e2e8f0; } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-map-toggle-btn.is-active{ background:linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%); color:#ffffff; border-color:rgba(196,181,253,.4); } .jr-all-guides-split-layout{ display:block; position:relative; } .jr-all-guides-split-layout:not(.is-split-active) .jr-all-guides-map-col{ display:none !important; } .jr-all-guides-split-layout:not(.is-split-active) .g-card-pin-num{ display:none !important; } .jr-all-guides-split-layout.is-split-active{ display:flex; flex-direction:column; gap:1.25rem; } .jr-all-guides-split-layout.is-split-active .jr-all-guides-map-col{ order:-1; width:100%; height:23rem; } @media (min-width: 1024px){ article[data-page-content="guides"], #allGuidesSection, .jr-all-guides-split-layout.is-split-active{ overflow:visible !important; } .jr-all-guides-split-layout.is-split-active{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(320px, 1fr); gap:2rem; align-items:start; } .jr-all-guides-split-layout.is-split-active .jr-all-guides-list-col{ min-width:0; order:1; } .jr-all-guides-split-layout.is-split-active .jr-all-guides-map-col{ order:2; align-self:start; position:sticky; top:5.25rem; height:calc(100vh - 6.5rem); min-height:28rem; max-height:36.5rem; padding:.35rem; border-radius:1.15rem; background:color-mix(in srgb,var(--surface) 75%,transparent); border:1px solid color-mix(in srgb,var(--line) 75%,transparent); box-shadow:0 14px 34px -16px rgba(15,23,42,.12); z-index:12; } :root[data-theme="dark"] .jr-all-guides-split-layout.is-split-active .jr-all-guides-map-col{ background:rgba(15,23,42,.65); border-color:rgba(148,163,184,.18); box-shadow:0 18px 40px -16px rgba(0,0,0,.55); } } /* Numbered Pin Badge on Guide Cards inside #guideList */ .g-card-pin-num{ display:inline-flex; align-items:center; justify-content:center; min-width:1.35rem; height:1.35rem; padding:0 .36rem; border-radius:999px; font-size:.75rem; font-weight:700; line-height:1; background:var(--c, #7c3aed); color:#ffffff; border:1.5px solid rgba(255,255,255,.88); box-shadow:0 2px 6px rgba(15,23,42,.35); flex:none; } /* Map Card Container */ .reco-map-card{ position:relative; width:100%; height:100%; border-radius:1rem; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(160deg,#eef2ff 0%,#e0f2fe 48%,#ecfdf5 100%); border:1px solid rgba(106,76,255,.22); box-shadow:0 12px 30px -10px rgba(30,27,75,.16); } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-map-card{ background:linear-gradient(160deg,#0f172a 0%,#131c31 52%,#0f292a 100%); border-color:rgba(167,139,250,.28); box-shadow:0 14px 34px -10px rgba(2,6,23,.68); } :root[data-contrast="high"] .reco-map-card{ background:#000000; border:2px solid #facc15; } /* Map Top Bar & Region Switcher Tabs */ .reco-map-head{ position:relative; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:.4rem; padding:.55rem .65rem; pointer-events:none; } .jr-map-region-tabs{ pointer-events:auto; display:inline-flex; align-items:center; gap:.22rem; padding:.18rem; border-radius:999px; background:rgba(15,23,42,.76); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16); max-width:calc(100% - 5.2rem); overflow-x:auto; scrollbar-width:none; } .jr-map-region-tabs::-webkit-scrollbar{ display:none; } .jr-map-region-tab{ display:inline-flex; align-items:center; gap:.2rem; padding:.22rem .52rem; border-radius:999px; border:0; background:transparent; color:rgba(241,245,249,.78); font-size:.75rem; font-weight:600; white-space:nowrap; cursor:pointer; transition:all .15s ease; } .jr-map-region-tab span{ opacity:.75; font-weight:500; } .jr-map-region-tab:hover{ color:#ffffff; background:rgba(255,255,255,.1); } .jr-map-region-tab.is-active{ background:#7c3aed; color:#ffffff; box-shadow:0 2px 6px rgba(0,0,0,.28); } .reco-map-region-pill{ pointer-events:auto; display:inline-flex; align-items:center; gap:.38rem; padding:.26rem .62rem; border-radius:999px; font-size:.75rem; font-weight:600; background:rgba(15,23,42,.74); color:#f8fafc; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16); } .reco-map-live-dot{ width:.44rem; height:.44rem; border-radius:999px; background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.25); } .reco-map-locate-btn{ pointer-events:auto; display:inline-flex; align-items:center; gap:.28rem; padding:.26rem .58rem; border-radius:999px; font-size:.75rem; font-weight:600; background:rgba(255,255,255,.92); color:#1e293b; border:1px solid rgba(15,23,42,.12); cursor:pointer; box-shadow:0 2px 8px rgba(15,23,42,.12); transition:all .15s ease; flex:none; } .reco-map-locate-btn:hover{ background:#ffffff; color:#6a4cff; } .reco-map-locate-btn.is-located{ background:#ecfdf5; color:#047857; border-color:rgba(16,185,129,.35); } :root[data-theme="dark"]:not([data-contrast="high"]) .reco-map-locate-btn{ background:rgba(30,41,59,.92); color:#f1f5f9; border-color:rgba(255,255,255,.16); } /* Map Stage & Live Google Map Canvas */ .reco-map-stage{ position:absolute; inset:0; z-index:1; overflow:hidden; } .reco-gmap-canvas{ width:100%; height:100%; position:absolute; inset:0; } .reco-gmap-canvas .gm-bundled-control-on-bottom{ margin-bottom:5.8rem !important; } .reco-map-svg{ width:100%; height:100%; display:block; } .reco-map-grid-line{ color:rgba(100,116,139,.15); } :root[data-theme="dark"] .reco-map-grid-line{ color:rgba(148,163,184,.1); } .reco-map-park{ fill:rgba(16,185,129,.13); } :root[data-theme="dark"] .reco-map-park{ fill:rgba(16,185,129,.1); } .reco-map-water{ stroke:rgba(56,189,248,.26); } .reco-map-water-hi{ stroke:rgba(14,165,233,.36); } :root[data-theme="dark"] .reco-map-water{ stroke:rgba(56,189,248,.16); } :root[data-theme="dark"] .reco-map-water-hi{ stroke:rgba(56,189,248,.28); } .reco-map-road{ stroke:rgba(148,163,184,.28); } :root[data-theme="dark"] .reco-map-road{ stroke:rgba(148,163,184,.15); } .reco-map-route-line{ opacity:.32; transition:opacity .2s ease, stroke-width .2s ease; } .reco-map-route-line.is-active{ opacity:.95; filter:drop-shadow(0 2px 5px rgba(106,76,255,.35)); } /* "You" Location Reference Marker */ .reco-map-you{ position:absolute; transform:translate(-50%,-50%); z-index:2; display:inline-flex; align-items:center; justify-content:center; pointer-events:none; } .reco-map-you-dot{ width:.58rem; height:.58rem; border-radius:999px; background:#3b82f6; border:2px solid #ffffff; box-shadow:0 0 0 2px rgba(59,130,246,.35); } .reco-map-you-ring{ position:absolute; width:1.45rem; height:1.45rem; border-radius:999px; background:rgba(59,130,246,.22); animation:recoMapPulse 2.4s ease-out infinite; } .reco-map-you-tag{ position:absolute; top:100%; margin-top:.12rem; padding:.05rem .32rem; border-radius:999px; font-size:.75rem; font-weight:700; background:rgba(37,99,235,.9); color:#ffffff; letter-spacing:.02em; white-space:nowrap; } /* Interactive Guide Map Pins */ .reco-map-pin{ position:absolute; transform:translate(-50%,-50%); z-index:3; border:0; background:transparent; padding:0; cursor:pointer; display:inline-flex; flex-direction:column; align-items:center; transition:transform .18s cubic-bezier(.22,1,.36,1), z-index 0s; } .reco-map-pin:hover, .reco-map-pin:focus-visible, .reco-map-pin.is-active{ z-index:6; transform:translate(-50%,-56%) scale(1.14); outline:none; } .reco-map-pin-Dot{ width:1.68rem; height:1.68rem; border-radius:999px; background:var(--pin-color,#6a4cff); color:#ffffff; border:2px solid #ffffff; box-shadow:0 4px 10px rgba(15,23,42,.32); display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; transition:box-shadow .18s ease, background-color .18s ease; } .reco-map-pin.is-active .reco-map-pin-Dot{ box-shadow:0 0 0 3px rgba(255,255,255,.92), 0 6px 16px rgba(15,23,42,.48); } .reco-map-pin-pulse{ position:absolute; top:.84rem; left:50%; width:2.35rem; height:2.35rem; margin-left:-1.175rem; margin-top:-1.175rem; border-radius:999px; background:var(--pin-color,#6a4cff); opacity:0; pointer-events:none; } .reco-map-pin.is-active .reco-map-pin-pulse, .reco-map-pin:hover .reco-map-pin-pulse{ opacity:.34; animation:recoMapPulse 1.6s ease-out infinite; } .reco-map-pin-label{ margin-top:.16rem; padding:.1rem .4rem; border-radius:999px; font-size:.75rem; font-weight:600; max-width:7.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:rgba(15,23,42,.82); color:#f8fafc; border:1px solid rgba(255,255,255,.16); opacity:0; transform:translateY(-2px); transition:opacity .15s ease, transform .15s ease; pointer-events:none; } .reco-map-pin.is-active .reco-map-pin-label, .reco-map-pin:hover .reco-map-pin-label{ opacity:1; transform:translateY(0); } @keyframes recoMapPulse{ 0%{ transform:scale(.68); opacity:.52; } 100%{ transform:scale(1.65); opacity:0; } } /* Bottom Floating Active Guide Dock inside Map */ .reco-map-dock{ position:relative; z-index:4; margin:.5rem .5rem 1.35rem .5rem; padding:.62rem .75rem; border-radius:.82rem; background:rgba(15,23,42,.86); color:#f8fafc; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:space-between; gap:.65rem; box-shadow:0 8px 20px rgba(2,6,23,.38); } .reco-map-dock-body{ min-width:0; flex:1 1 auto; } .reco-map-dock-top{ display:flex; align-items:center; flex-wrap:wrap; gap:.36rem; margin-bottom:.16rem; } .reco-map-dock-badge{ display:inline-flex; align-items:center; padding:.1rem .44rem; border-radius:999px; font-size:.75rem; font-weight:700; background:var(--badge-color,#7c3aed); color:#ffffff; } .reco-map-dock-dist{ display:inline-flex; align-items:center; padding:.1rem .46rem; border-radius:999px; font-size:.75rem; font-weight:600; background:rgba(52,211,153,.18); color:#6ee7b7; border:1px solid rgba(52,211,153,.32); } .reco-map-dock-title{ margin:0 !important; font-size:.8rem !important; font-weight:600 !important; line-height:1.25 !important; color:#ffffff !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .reco-map-dock-meta{ margin:.12rem 0 0 !important; font-size:.75rem !important; color:rgba(226,232,240,.84) !important; display:flex; align-items:center; gap:.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .reco-map-dock-cta{ flex:none; display:inline-flex; align-items:center; padding:.38rem .68rem; border-radius:999px; font-size:.75rem; font-weight:600; background:linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%); color:#ffffff !important; text-decoration:none !important; border:1px solid rgba(255,255,255,.22); transition:transform .15s ease, box-shadow .15s ease; white-space:nowrap; } .reco-map-dock-cta:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(124,58,237,.45); } /* Highlighted card state when hovering/clicking its pin on the map */ #guideList .g-card.is-map-highlighted{ outline:2.5px solid #7c3aed !important; outline-offset:2px !important; box-shadow:0 16px 34px -8px rgba(106,76,255,.42) !important; transform:translateY(-3px); } :root[data-theme="dark"] #guideList .g-card.is-map-highlighted{ outline-color:#a78bfa !important; box-shadow:0 16px 34px -8px rgba(167,139,250,.48) !important; } /* ========================================================================== 4-PILLAR EDITORIAL DESKTOP REDESIGN ("APPLE MAPS MEETS MONOCLE") 1. Floating Glassmorphism Map Controls & Zoom-Tier Density Pill 2. Decoupled Guide Card Layouts & Editorial Typography Hierarchy 3. Streamlined Command Center Header & Breathing Room 4. Generous Section Rhythm & Segmented Vibe Pill Filter Bar ========================================================================== */ /* --- Pillar 1: Floating Glassmorphism Controls & Density Pill on Map --- */ .jr-map-glass-controls{ position:absolute; top:3.1rem; right:.68rem; z-index:5; display:flex; flex-direction:column; align-items:center; padding:.22rem; border-radius:999px; background:rgba(255,255,255,.82); backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%); border:1px solid rgba(255,255,255,.72); box-shadow:0 10px 26px -6px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.08); transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease; } :root[data-theme="dark"] .jr-map-glass-controls{ background:rgba(15,23,42,.82); border-color:rgba(255,255,255,.18); box-shadow:0 12px 28px -6px rgba(0,0,0,.55); } .jr-map-glass-btn{ width:2rem; height:2rem; border-radius:999px; border:0; background:transparent; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .16s ease, color .16s ease, transform .16s ease; } .jr-map-glass-btn:hover{ background:rgba(106,76,255,.12); color:var(--violet); transform:scale(1.06); } :root[data-theme="dark"] .jr-map-glass-btn:hover{ background:rgba(167,139,250,.18); color:#c4b5fd; } .jr-map-glass-btn:active{ transform:scale(.95); } .jr-map-glass-divider{ width:1.1rem; height:1px; background:color-mix(in srgb,var(--line) 80%,transparent); margin:.1rem 0; } .jr-map-density-pill{ position:absolute; top:3.1rem; left:.68rem; z-index:5; display:inline-flex; align-items:center; gap:.35rem; padding:.24rem .64rem; border-radius:999px; font-size:.75rem; font-weight:600; letter-spacing:.01em; background:rgba(255,255,255,.82); color:var(--ink); backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%); border:1px solid rgba(255,255,255,.72); box-shadow:0 6px 18px -6px rgba(15,23,42,.18); pointer-events:none; } :root[data-theme="dark"] .jr-map-density-pill{ background:rgba(15,23,42,.82); color:#f8fafc; border-color:rgba(255,255,255,.18); } /* --- Pillar 2 & 3: Decluttered Guide Cards, Soft Badges & Balanced 2/3 Grid --- */ @media (min-width:640px){ .jr-all-guides-list-col .g-grid.g-magazine-spread{ gap:1.35rem !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact){ display:flex !important; flex-direction:column !important; justify-content:flex-start !important; background:var(--surface) !important; border:1px solid color-mix(in srgb,var(--line) 72%,transparent) !important; border-radius:.75rem !important; padding:.45rem .45rem 0 !important; color:var(--ink) !important; text-decoration:none !important; cursor:pointer !important; box-shadow:0 4px 18px -10px rgba(15,23,42,.08) !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-media, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-body{ pointer-events:auto; } :root[data-theme="dark"] .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact){ background:#0f172a !important; border-color:rgba(148,163,184,.16) !important; box-shadow:0 10px 26px -12px rgba(0,0,0,.42) !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):hover{ transform:translateY(-3px) !important; border-color:color-mix(in srgb,var(--violet) 38%,var(--line)) !important; box-shadow:0 16px 32px -14px rgba(15,23,42,.15) !important; } /* Uncompromised top photo frame with subtle rounded corner & zero scrim */ .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-media{ position:relative !important; inset:auto !important; width:100% !important; flex:1 1 55% !important; min-height:9rem !important; height:auto !important; border-radius:.38rem !important; overflow:hidden !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-scrim, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-topic, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-ai-badge{ display:none !important; } /* Soft, borderless category tag on photo corner */ .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-cat{ top:.58rem !important; left:.58rem !important; background:rgba(248,250,252,.92) !important; color:#1e293b !important; border:0 !important; box-shadow:0 2px 8px rgba(15,23,42,.12) !important; backdrop-filter:blur(8px) !important; font-weight:600 !important; font-size:.75rem !important; padding:0 .58rem !important; min-height:1.45rem !important; } :root[data-theme="dark"] .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-cat{ background:rgba(15,23,42,.88) !important; color:#f1f5f9 !important; border:0 !important; } /* Crisp card footer below the photograph with generous padding */ .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-body{ position:relative !important; flex:0 0 auto !important; margin-top:0 !important; padding:1.05rem 1.15rem 1.15rem !important; background:transparent !important; color:var(--ink) !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-title{ color:var(--ink) !important; font-weight:700 !important; line-height:1.32 !important; letter-spacing:-.015em !important; text-shadow:none !important; margin-top:.28rem !important; } :root[data-theme="dark"] .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-title{ color:#f8fafc !important; } /* Standardized soft slate pills (bg-slate-100 / dark bg-slate-800) with zero heavy borders */ .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-loc, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-route{ background:#f1f5f9 !important; color:#475569 !important; border:0 !important; font-weight:500 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } :root[data-theme="dark"] .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-loc, :root[data-theme="dark"] .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-route{ background:#1e293b !important; color:#cbd5e1 !important; border:0 !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta{ color:var(--muted) !important; border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent) !important; padding-top:.6rem !important; margin-top:.65rem !important; font-size:.76rem !important; } } @media (min-width:1024px){ /* Bento Box 1 (cards 1..3): Tall Hero Left (span 7, row span 2) + 2 Horizontal Split Cards Right (span 5 each) */ .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+1){ min-height:24.35rem !important; height:100% !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+1) .g-card-body, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+4) .g-card-body, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+13) .g-card-body{ padding:1.25rem 1.3rem 1.3rem !important; } /* Horizontal side-by-side layout for stacked side cards (:nth-child(15n+2), :nth-child(15n+3)) so text never clips */ .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+2), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+3){ flex-direction:row !important; align-items:stretch !important; min-height:11.5rem !important; height:11.5rem !important; padding:.45rem !important; gap:.85rem !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+2) .g-card-media, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+3) .g-card-media{ flex:0 0 40% !important; width:40% !important; min-width:0 !important; min-height:100% !important; height:100% !important; border-radius:.42rem !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+2) .g-card-body, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+3) .g-card-body{ flex:1 1 60% !important; min-width:0 !important; display:flex !important; flex-direction:column !important; justify-content:space-between !important; padding:.35rem .45rem .35rem 0 !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+2) .g-card-title, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+3) .g-card-title{ font-size:.92rem !important; line-height:1.28 !important; -webkit-line-clamp:2 !important; margin-top:.18rem !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+2) .g-card-meta, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+3) .g-card-meta{ padding-top:.4rem !important; margin-top:.35rem !important; font-size:.75rem !important; } /* Replace cramped 3-col masonry tiles (cards 7..12) with balanced 2-column (span 6) cards in the 2/3 split view */ .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+7), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+8), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+9), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+10), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+11), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+12){ grid-column:span 6 !important; grid-row:auto !important; min-height:19.25rem !important; height:auto !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+5), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+6), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+14), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+15){ min-height:19.5rem !important; height:auto !important; } } /* --- Pillar 3: Streamlined Command Center Header & Breathing Room --- */ @media (min-width:1024px){ header#siteNav.glass-nav > div{ padding-left:1.75rem !important; padding-right:1.75rem !important; gap:1.25rem !important; } header#siteNav #brandLogo{ margin-right:.5rem; } header#siteNav #globalSearchBtn{ display:inline-flex !important; align-items:center !important; flex-direction:row !important; gap:.38rem !important; padding:.34rem .68rem !important; border-radius:999px !important; white-space:nowrap !important; background:color-mix(in srgb,var(--surface-2) 82%,transparent); border:1px solid color-mix(in srgb,var(--line) 90%,transparent); backdrop-filter:blur(10px); transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } header#siteNav #globalSearchBtn:hover{ border-color:color-mix(in srgb,var(--violet) 45%,var(--line)); box-shadow:0 4px 14px -4px rgba(106,76,255,.18); transform:translateY(-1px); } } /* --- Pillar 4: Above-the-Fold Hierarchy, Unified Filter Deck & Standardized Soft Pills --- */ article[data-page-content="guides"] > .jr-guides-hero-header{ padding:.15rem 0 .75rem !important; border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent) !important; } article[data-page-content="guides"] > #allGuidesSection{ margin-top:.85rem !important; padding-top:0 !important; border-top:0 !important; } @media (min-width:1024px){ article[data-page-content="guides"] > #recoPanel{ margin-top:2.25rem !important; } article[data-page-content="guides"] > #allGuidesSection{ margin-top:.85rem !important; padding-top:0 !important; border-top:0 !important; } article[data-page-content="guides"] .jr-country-group + .jr-country-group{ margin-top:3.5rem !important; padding-top:2rem !important; border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent); } article[data-page-content="guides"] > .jr-write-banner, article[data-page-content="guides"] > a.tile{ margin-top:3.25rem !important; } } /* Unified Filter & Category Pill Deck (#guidesLocationFilter) */ #guidesLocationFilter.jr-location-filter{ margin-top:1.15rem !important; margin-bottom:1.5rem !important; padding:.85rem 1.05rem !important; border-radius:1rem !important; background:var(--surface) !important; border:1px solid color-mix(in srgb,var(--line) 75%,transparent) !important; box-shadow:0 4px 16px -10px rgba(15,23,42,.06) !important; } :root[data-theme="dark"] #guidesLocationFilter.jr-location-filter{ background:rgba(15,23,42,.72) !important; border-color:rgba(148,163,184,.18) !important; } .jr-vibe-pill-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; margin-top:.75rem; padding-top:.75rem; border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent); background:transparent; } :root[data-theme="dark"] .jr-vibe-pill-bar{ border-top-color:rgba(148,163,184,.15); } .jr-vibe-pill{ display:inline-flex; align-items:center; gap:.38rem; padding:.36rem .82rem; border-radius:999px; border:1px solid transparent; background:#f1f5f9; color:#475569; font-size:.76rem; font-weight:500; line-height:1.2; white-space:nowrap; cursor:pointer; transition:background-color .18s cubic-bezier(.22,1,.36,1), color .18s ease, transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease; } :root[data-theme="dark"] .jr-vibe-pill{ background:#1e293b; color:#94a3b8; } .jr-vibe-pill:hover{ color:#0f172a; background:#e2e8f0; transform:translateY(-1px); } :root[data-theme="dark"] .jr-vibe-pill:hover{ color:#f8fafc; background:#334155; } .jr-vibe-pill.is-active{ background:#0f172a; color:#ffffff; font-weight:600; box-shadow:0 4px 12px -4px rgba(15,23,42,.24); } :root[data-theme="dark"] .jr-vibe-pill.is-active{ background:#f8fafc; color:#0f172a; box-shadow:0 4px 12px -3px rgba(0,0,0,.48); } .jr-vibe-pill-dot{ width:.44rem; height:.44rem; border-radius:999px; background:var(--pill-accent,#6a4cff); opacity:.85; transition:transform .18s ease, opacity .18s ease; } .jr-vibe-pill.is-active .jr-vibe-pill-dot, .jr-vibe-pill:hover .jr-vibe-pill-dot{ opacity:1; transform:scale(1.2); } /* ========================================================================== TASK 38: /immersive 8-Function Upgrade (Origin/Swap, Live Nav HUD, Curated Map Overlays, Rich Stop Card, Save/Share/GPX, Weather & Filters) ========================================================================== */ .jr-imm-origin-row{ display:flex; align-items:center; gap:.4rem; padding:.35rem .55rem; margin-bottom:.45rem; border-radius:.75rem; border:1px solid color-mix(in srgb,var(--line) 85%,transparent); background:color-mix(in srgb,var(--bg) 72%,var(--card)); } .jr-imm-origin-dot{ width:.5rem; height:.5rem; border-radius:999px; background:#1a73e8; box-shadow:0 0 0 3px rgba(26,115,232,.18); flex-shrink:0; } #immOrigin{ flex:1 1 auto; min-width:0; border:0; background:transparent; color:var(--ink); font-size:.82rem; padding:.18rem .2rem; outline:none; } .jr-imm-origin-chip, .jr-imm-swap-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.26rem; padding:.24rem .58rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--line) 85%,transparent); background:var(--card); color:var(--ink-2); font-size:.75rem; font-weight:600; white-space:nowrap; cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } .jr-imm-origin-chip{ border:1.5px solid color-mix(in srgb,var(--violet) 55%,var(--line)); background:color-mix(in srgb,var(--violet) 12%,var(--card)); color:var(--ink); font-weight:700; box-shadow:0 2px 8px -2px rgba(106,76,255,.22); } .jr-imm-origin-chip svg, .btn-loc svg{ color:#6a4cff !important; stroke:#6a4cff !important; flex-shrink:0; } :root[data-theme="dark"] .jr-imm-origin-chip svg, :root[data-theme="dark"] .btn-loc svg{ color:#a78bfa !important; stroke:#a78bfa !important; } .jr-imm-origin-chip:hover, .jr-imm-swap-btn:hover{ border-color:var(--violet); color:var(--ink); transform:translateY(-1px); } /* 8. Stop Filters Row, 6a. Leave-At Row & 6b. Hourly Forecast Row inside #immSheet (Unified 3-button #immMetaRow) */ .jr-imm-meta-row{ container-type:inline-size; display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:space-between; gap:clamp(.2rem,1cqi,.34rem); margin-top:.1rem; } .jr-imm-meta-btn{ flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:clamp(.16rem,.7cqi,.26rem); min-height:2.05rem; min-width:0; padding:.22rem clamp(.28rem,1.2cqi,.5rem); border-radius:.68rem; border:1px solid color-mix(in srgb,var(--line) 78%,transparent); background:color-mix(in srgb,var(--bg) 65%,var(--card)); color:var(--ink-2); font-size:clamp(.75rem,2.3vw,.75rem); font-size:clamp(.75rem,2.75cqi,.75rem); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:all .15s ease; } .jr-imm-meta-btn:hover, .jr-imm-meta-btn.is-open, .jr-imm-meta-btn[aria-expanded="true"]{ background:color-mix(in srgb,var(--violet) 13%,var(--card)); border-color:color-mix(in srgb,var(--violet) 55%,var(--line)); color:var(--ink); } .jr-imm-meta-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:1rem; height:1rem; padding:0 .26rem; border-radius:999px; background:var(--violet); color:#fff; font-size:.75rem; font-weight:700; line-height:1; flex-shrink:0; } .jr-imm-meta-sub{ font-size:.75rem; font-weight:600; color:var(--violet-d); flex-shrink:0; } .jr-imm-meta-badge[hidden], .jr-imm-meta-sub[hidden], .jr-imm-stop-filters[hidden], .jr-imm-weather-row[hidden], .jr-imm-forecast-row[hidden]{ display:none !important; } .jr-imm-forecast-row{ margin-top:.1rem; padding:.35rem .45rem; border-radius:.68rem; background:color-mix(in srgb,var(--bg) 70%,var(--card)); border:1px solid color-mix(in srgb,var(--line) 65%,transparent); overflow-x:auto; scrollbar-width:none; } .jr-imm-forecast-row::-webkit-scrollbar{ display:none; } .jr-imm-forecast-hours.wx-hours{ margin:0 !important; padding:0 !important; } .jr-imm-stop-filters{ container-type:inline-size; display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:clamp(.16rem,.9cqi,.28rem); margin-top:.1rem; } .jr-imm-filter-pill{ flex:1 1 auto; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:clamp(.14rem,.6cqi,.24rem); padding:.22rem clamp(.22rem,1cqi,.42rem); border-radius:999px; border:1px solid color-mix(in srgb,var(--line) 80%,transparent); background:color-mix(in srgb,var(--bg) 60%,var(--card)); color:var(--ink-2); font-size:clamp(.75rem,2.4vw,.75rem); font-size:clamp(.75rem,2.65cqi,.75rem); font-weight:600; white-space:nowrap; cursor:pointer; transition:all .15s ease; } .jr-imm-filter-pill svg{ width:clamp(10px,2.8cqi,12px); height:clamp(10px,2.8cqi,12px); flex-shrink:0; } .jr-imm-filter-pill[aria-pressed="true"], .jr-imm-filter-pill.is-active{ background:color-mix(in srgb,var(--violet) 14%,var(--card)); border-color:color-mix(in srgb,var(--violet) 55%,var(--line)); color:var(--ink); } .jr-imm-weather-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:.4rem; margin-top:.1rem; padding:.3rem .52rem; border-radius:.68rem; background:color-mix(in srgb,var(--bg) 70%,var(--card)); border:1px solid color-mix(in srgb,var(--line) 65%,transparent); min-width:0; } .jr-imm-leave-label{ font-size:.75rem; font-weight:600; color:var(--muted); white-space:nowrap; } .jr-imm-weather-pill{ display:inline-flex; align-items:center; justify-content:center; gap:.26rem; font-size:clamp(.75rem,2.2vw,.75rem); font-weight:600; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .jr-imm-weather-pill svg, .jr-imm-meta-btn svg, .jr-imm-top-wx svg{ flex-shrink:0; } .jr-imm-leave-pills{ display:inline-flex; align-items:center; gap:.2rem; flex-shrink:0; } .jr-imm-leave-pill{ padding:.18rem .46rem; border-radius:999px; border:1px solid transparent; background:transparent; color:var(--muted); font-size:.75rem; font-weight:600; cursor:pointer; } .jr-imm-leave-pill.is-active, .jr-imm-leave-pill[aria-pressed="true"]{ background:var(--violet); color:#fff; } .jr-imm-top-wx{ display:inline-flex; align-items:center; gap:.25rem; padding:.42rem .68rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--line) 85%,transparent); background:color-mix(in srgb,var(--card) 92%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:var(--ink); font-size:.76rem; font-weight:700; white-space:nowrap; flex-shrink:0; box-shadow:0 8px 22px -10px rgba(15,23,42,.28); cursor:pointer; transition:transform .15s ease, border-color .15s ease; } .jr-imm-top-wx:hover{ border-color:var(--violet); transform:translateY(-1px); } [data-wx-compact="true"] .jr-wx-extra{ display:none !important; } /* 2. Active Turn-by-Turn Navigation HUD (#immNavHud) — collapsed pill by default, click to expand */ .jr-imm-nav-hud{ position:fixed; top:calc(env(safe-area-inset-top, 0px) + .65rem); left:50%; transform:translateX(-50%); z-index:38; width:min(480px,calc(100vw - 1.25rem)); padding:.68rem .82rem; border-radius:1rem; background:color-mix(in srgb,var(--card) 94%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid color-mix(in srgb,var(--violet) 42%,var(--line)); box-shadow:0 16px 36px -12px rgba(15,23,42,.38); color:var(--ink); transition:border-radius .18s ease, padding .18s ease, width .18s ease; } .jr-imm-nav-hud[data-imm-nav-expanded="false"]{ width:min(440px,calc(100vw - 1.25rem)); padding:.38rem .52rem .38rem .46rem; border-radius:999px; } /* When live navigation is active, hide all other floating UI/overlays so only the map, selected route path, and navigation HUD remain */ #immersiveView[data-imm-nav-active="true"] .jr-imm-top, #immersiveView[data-imm-nav-active="true"] #immRouteBar, #immersiveView[data-imm-nav-active="true"] #immLayersWrap, #immersiveView[data-imm-nav-active="true"] #immSheet, #immersiveView[data-imm-nav-active="true"] #immOverlayCard, #immersiveView[data-imm-nav-active="true"] #immStopCard, #immersiveView[data-imm-nav-active="true"] #immExploreGuidesBtn, #immersiveView[data-imm-nav-active="true"] #immStreetViewBtn, #immersiveView[data-imm-nav-active="true"] #immSuggest{ display:none !important; } .jr-imm-nav-main{ display:flex; align-items:center; gap:.52rem; cursor:pointer; } .jr-imm-nav-icon{ width:2rem; height:2rem; border-radius:999px; background:var(--violet); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.05rem; font-weight:700; flex-shrink:0; } .jr-imm-nav-hud[data-imm-nav-expanded="false"] .jr-imm-nav-icon{ width:1.85rem; height:1.85rem; } .jr-imm-nav-step-kicker{ font-size:.75rem; font-weight:700; letter-spacing:.02em; color:var(--violet); margin:0; } .jr-imm-nav-hud[data-imm-nav-expanded="false"] .jr-imm-nav-step-kicker{ display:none !important; } .jr-imm-nav-instruction{ font-size:.86rem; font-weight:700; line-height:1.25; color:var(--ink); margin:.06rem 0; } .jr-imm-nav-hud[data-imm-nav-expanded="false"] .jr-imm-nav-instruction{ font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; } .jr-imm-nav-meta{ font-size:.75rem; color:var(--muted); margin:0; } .jr-imm-nav-hud[data-imm-nav-expanded="false"] .jr-imm-nav-meta{ font-size:.75rem; white-space:nowrap; } .jr-imm-nav-head-actions{ display:inline-flex; align-items:center; gap:.26rem; flex-shrink:0; } .jr-imm-nav-voice-btn, .jr-imm-nav-expand-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.18rem; min-width:1.75rem; height:1.75rem; padding:0 .38rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--violet) 42%,var(--line)); background:color-mix(in srgb,var(--violet) 10%,var(--card)); color:var(--violet-d); font-size:.75rem; font-weight:700; cursor:pointer; } .jr-imm-nav-voice-btn{ width:1.75rem; padding:0; border-color:color-mix(in srgb,var(--line) 80%,transparent); background:color-mix(in srgb,var(--bg) 70%,var(--card)); color:var(--ink-2); } .jr-imm-nav-step-pill{ line-height:1; white-space:nowrap; } .jr-imm-nav-voice-btn[aria-pressed="true"]{ background:color-mix(in srgb,var(--violet) 16%,var(--card)); border-color:var(--violet); color:var(--violet); } .jr-imm-nav-end-btn{ padding:.26rem .56rem; border-radius:999px; border:1px solid rgba(239,68,68,.38); background:rgba(239,68,68,.12); color:#ef4444; font-size:.75rem; font-weight:700; cursor:pointer; } .jr-imm-nav-details[hidden]{ display:none !important; } .jr-imm-nav-steps-list{ display:flex; flex-direction:column; gap:.24rem; max-height:7.5rem; overflow-y:auto; margin-top:.5rem; padding-top:.45rem; border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent); } .jr-imm-nav-step-item{ display:flex; align-items:center; gap:.42rem; width:100%; padding:.26rem .42rem; border-radius:.55rem; border:1px solid transparent; background:transparent; color:var(--ink-2); font-size:.75rem; font-weight:500; text-align:left; cursor:pointer; } .jr-imm-nav-step-item.is-current{ background:color-mix(in srgb,var(--violet) 14%,var(--card)); border-color:color-mix(in srgb,var(--violet) 45%,var(--line)); color:var(--ink); font-weight:700; } .jr-imm-nav-step-num{ display:inline-flex; align-items:center; justify-content:center; width:1.15rem; height:1.15rem; border-radius:999px; background:color-mix(in srgb,var(--line) 65%,transparent); font-size:.75rem; font-weight:700; flex-shrink:0; } .jr-imm-nav-step-item.is-current .jr-imm-nav-step-num{ background:var(--violet); color:#fff; } .jr-imm-nav-step-txt{ flex:1 1 auto; min-width:0; } .jr-imm-nav-step-dist{ font-size:.75rem; color:var(--muted); flex-shrink:0; } .jr-imm-nav-controls{ display:flex; align-items:center; justify-content:space-between; gap:.45rem; margin-top:.48rem; padding-top:.45rem; border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent); } .jr-imm-nav-ctrl{ padding:.28rem .68rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--line) 85%,transparent); background:var(--bg); color:var(--ink-2); font-size:.75rem; font-weight:600; cursor:pointer; } .jr-imm-nav-ctrl:disabled{ opacity:.42; cursor:not-allowed; } .jr-imm-nav-ctrl-primary{ background:var(--violet); border-color:var(--violet); color:#fff; flex:1 1 auto; text-align:center; } /* 3 & 4. Floating Stop Card (#immStopCard) & Curated Overlay Card (#immOverlayCard) */ .jr-imm-stop-card, .jr-imm-overlay-card{ position:fixed; left:50%; transform:translateX(-50%); bottom:6.6rem; z-index:37; width:min(540px,calc(100vw - 1.5rem)); padding:.75rem .9rem; border-radius:1rem; background:color-mix(in srgb,var(--card) 95%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid color-mix(in srgb,var(--line) 85%,transparent); box-shadow:0 16px 36px -12px rgba(15,23,42,.34); color:var(--ink); } .jr-imm-stop-card-head, .jr-imm-overlay-card-top{ display:flex; align-items:flex-start; gap:.55rem; } .jr-imm-stop-card-title, .jr-imm-overlay-title{ font-size:.9rem; font-weight:700; color:var(--ink); margin:0; } .jr-imm-overlay-kicker{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--violet); margin:0 0 .12rem; } .jr-imm-stop-card-badges{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.22rem; } .jr-imm-badge{ display:inline-flex; align-items:center; padding:.12rem .45rem; border-radius:999px; background:color-mix(in srgb,var(--bg) 75%,var(--card)); border:1px solid color-mix(in srgb,var(--line) 75%,transparent); font-size:.75rem; font-weight:600; color:var(--ink-2); } .jr-imm-badge-rating{ color:#d97706; } .jr-imm-badge-open{ color:#16a34a; } .jr-imm-stop-card-note{ font-size:.76rem; color:var(--muted); margin:.4rem 0 0; line-height:1.38; } .jr-imm-stop-card-close{ width:1.65rem; height:1.65rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--line) 75%,transparent); background:var(--bg); color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; cursor:pointer; flex-shrink:0; } .jr-imm-stop-card-actions, .jr-imm-overlay-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; margin-top:.55rem; padding-top:.5rem; border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent); } .jr-imm-stop-act-btn{ display:inline-flex; align-items:center; gap:.25rem; padding:.28rem .62rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--line) 85%,transparent); background:var(--bg); color:var(--ink); font-size:.75rem; font-weight:600; text-decoration:none; cursor:pointer; } .jr-imm-stop-act-btn:disabled{ opacity:.4; cursor:not-allowed; } .jr-imm-stop-act-primary, .jr-imm-route-btn-nav{ background:var(--violet) !important; border-color:var(--violet) !important; color:#fff !important; } .jr-imm-overlay-pills{ display:flex; align-items:center; gap:.32rem; overflow-x:auto; margin-top:.45rem; padding-bottom:.15rem; } .jr-imm-overlay-pill{ display:inline-flex; align-items:center; gap:.25rem; max-width:11rem; padding:.22rem .55rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--line) 80%,transparent); background:var(--bg); color:var(--ink-2); font-size:.75rem; font-weight:600; white-space:nowrap; cursor:pointer; flex-shrink:0; } .jr-imm-overlay-pill.is-active{ border-color:var(--violet); background:color-mix(in srgb,var(--violet) 15%,var(--card)); color:var(--ink); } /* 7. Drawer Quick-Load Route Lists */ .jr-imm-drawer-routes-list{ display:flex; flex-direction:column; gap:.35rem; } .jr-imm-drawer-route-btn{ display:flex; flex-direction:column; align-items:flex-start; width:100%; padding:.45rem .65rem; border-radius:.65rem; border:1px solid color-mix(in srgb,var(--line) 80%,transparent); background:color-mix(in srgb,var(--bg) 65%,var(--card)); color:var(--ink); text-align:left; cursor:pointer; transition:border-color .15s ease; } .jr-imm-drawer-route-btn:hover{ border-color:var(--violet); } .jr-imm-drawer-route-title{ font-size:.79rem; font-weight:600; width:100%; } .jr-imm-drawer-route-meta{ font-size:.75rem; color:var(--muted); } .jr-imm-drawer-empty{ font-size:.75rem; color:var(--muted); margin:0; } /* ========================================================================== Item 41 — Comprehensive Mobile UX & Visual Redesign (Apple Maps x Editorial) ========================================================================== */ /* 1. Bottom-Sheet Feed & Multi-State Ergonomic Snap Bar (< 1024px) */ .jr-mobile-guides-sheet-handle{ display:none; } @media (max-width: 1023px){ .jr-mobile-guides-sheet-handle{ display:flex; flex-direction:column; align-items:center; gap:.45rem; padding:.55rem .85rem .65rem; margin-bottom:.75rem; border-radius:1rem; background:color-mix(in srgb,var(--card) 94%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid color-mix(in srgb,var(--line) 85%,transparent); box-shadow:0 8px 22px -12px rgba(15,23,42,.18); touch-action:pan-y; } .jr-mobile-sheet-grabber{ width:100%; min-height:1.5rem; display:flex; align-items:center; justify-content:center; background:transparent; border:0; padding:.2rem 0; cursor:grab; } .jr-mobile-sheet-pill{ width:2.5rem; height:.3rem; border-radius:999px; background:color-mix(in srgb,var(--muted) 48%,transparent); } .jr-mobile-sheet-snaps{ display:inline-flex; align-items:center; gap:.25rem; padding:.2rem; border-radius:999px; background:color-mix(in srgb,var(--bg) 82%,var(--card)); border:1px solid color-mix(in srgb,var(--line) 80%,transparent); } .jr-mobile-sheet-snap-btn{ min-height:2.25rem; padding:.28rem .85rem; border-radius:999px; border:0; background:transparent; color:var(--muted); font-size:.75rem; font-weight:700; cursor:pointer; transition:background-color .16s ease, color .16s ease, box-shadow .16s ease; } .jr-mobile-sheet-snap-btn.is-active{ background:var(--violet); color:#ffffff; box-shadow:0 2px 8px rgba(106,76,255,.32); } /* Sheet snap states: peek (map expanded), half (balanced), full (feed priority) */ .jr-all-guides-split-layout.is-split-active[data-mobile-sheet-state="peek"] .jr-all-guides-map-col{ height:62vh; min-height:24rem; max-height:36rem; transition:height .24s cubic-bezier(.22,1,.36,1); } .jr-all-guides-split-layout.is-split-active[data-mobile-sheet-state="half"] .jr-all-guides-map-col{ height:23rem; transition:height .24s cubic-bezier(.22,1,.36,1); } .jr-all-guides-split-layout.is-split-active[data-mobile-sheet-state="full"] .jr-all-guides-map-col{ height:12.5rem; transition:height .24s cubic-bezier(.22,1,.36,1); } } /* 2. Floating Glassmorphism "Search this area" Pill & Map Controls */ .jr-map-search-area-pill{ position:absolute; top:3.1rem; left:50%; transform:translateX(-50%); z-index:5; display:inline-flex; align-items:center; gap:.38rem; padding:.36rem .82rem; border-radius:999px; font-size:.75rem; font-weight:600; line-height:1.15; color:#0f172a; background:rgba(255,255,255,.86); backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%); border:1px solid rgba(15,23,42,.12); box-shadow:0 8px 20px -6px rgba(15,23,42,.22); cursor:pointer; white-space:nowrap; transition:transform .16s ease, background-color .16s ease, box-shadow .16s ease; } .jr-map-search-area-pill:hover{ background:#ffffff; transform:translateX(-50%) translateY(-1px); box-shadow:0 10px 24px -6px rgba(106,76,255,.28); } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-map-search-area-pill{ background:rgba(15,23,42,.84); color:#f8fafc; border-color:rgba(255,255,255,.16); box-shadow:0 10px 24px -6px rgba(0,0,0,.55); } /* 3. Mobile Card & Typography Optimization (< 640px on /guides #guideList) Clean vertical cards: top 60% uncompromised photography + bottom 40% padded white/dark footer */ @media (max-width: 639px){ .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(n){ display:flex !important; flex-direction:column !important; justify-content:flex-start !important; min-height:18.25rem !important; height:auto !important; max-height:none !important; padding:0 !important; background:#ffffff !important; color:#0f172a !important; border:1px solid rgba(226,232,240,.92) !important; border-radius:1rem !important; box-shadow:0 4px 16px -4px rgba(15,23,42,.07) !important; overflow:hidden !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact), :root[data-theme="dark"]:not([data-contrast="high"]) .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(n){ background:#0f172a !important; color:#f8fafc !important; border-color:rgba(51,65,85,.85) !important; box-shadow:0 10px 26px -10px rgba(0,0,0,.55) !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-media{ position:relative !important; inset:auto !important; width:100% !important; height:10.75rem !important; min-height:10.75rem !important; flex:0 0 60% !important; overflow:hidden !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-scrim, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-topic{ display:none !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-cat{ display:inline-flex !important; top:.7rem !important; left:.75rem !important; right:auto !important; padding:.22rem .62rem !important; font-size:.75rem !important; font-weight:600 !important; border-radius:999px !important; background:rgba(255,255,255,.92) !important; color:#0f172a !important; backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important; border:1px solid rgba(15,23,42,.08) !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-cat{ background:rgba(15,23,42,.88) !important; color:#f1f5f9 !important; border-color:rgba(255,255,255,.14) !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-body{ position:relative !important; z-index:2 !important; flex:1 1 40% !important; display:flex !important; flex-direction:column !important; justify-content:space-between !important; gap:.4rem !important; padding:1rem 1.05rem 1.05rem !important; background:transparent !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-loc{ position:static !important; align-self:flex-start !important; margin:0 0 .1rem 0 !important; padding:.18rem .52rem !important; font-size:.75rem !important; font-weight:600 !important; background:#f1f5f9 !important; color:#334155 !important; border:1px solid rgba(148,163,184,.28) !important; box-shadow:none !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-loc{ background:rgba(30,41,59,.9) !important; color:#cbd5e1 !important; border-color:rgba(148,163,184,.22) !important; } /* Dynamic Mobile Type Scale: text-lg (1.0625rem) for card titles, text-xs (0.75rem) for metadata */ .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) h2, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) h3{ font-size:1.0625rem !important; line-height:1.32 !important; font-weight:700 !important; color:#0f172a !important; text-shadow:none !important; margin:0 !important; -webkit-line-clamp:2 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) h2, :root[data-theme="dark"]:not([data-contrast="high"]) .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) h3{ color:#f8fafc !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta{ margin-top:.3rem !important; padding-top:.5rem !important; border-top:1px solid rgba(226,232,240,.8) !important; font-size:.75rem !important; color:#475569 !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta{ border-top-color:rgba(51,65,85,.75) !important; color:#cbd5e1 !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-time{ font-size:.75rem !important; color:#475569 !important; text-shadow:none !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-time{ color:#cbd5e1 !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-cta{ font-size:.75rem !important; font-weight:700 !important; color:#6a4cff !important; text-shadow:none !important; } :root[data-theme="dark"]:not([data-contrast="high"]) .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-cta{ color:#a78bfa !important; } /* 4. Thumb-Friendly Touch Targets (>= 48px / 3rem) in Mobile Thumb Zone & Joyride AI Maps */ .jr-imm-go, .jr-imm-loop, .jr-imm-route-btn-nav{ min-height:3rem !important; } #cmdPaletteModal .jr-cmd-dialog{ margin-top:.5rem !important; width:calc(100vw - 1rem) !important; border-radius:1.1rem !important; } } /* ========================================================================== Item 43 — Mobile /maps UX & Ergonomics Improvements (375x667 – 390x844) ========================================================================== */ /* 1. Quick-Explore Floating Pill Strip (#immQuickExploreBar) & Stop Card Stepper */ .jr-imm-quick-explore{ position:absolute; z-index:4; left:4.8rem; right:4.1rem; bottom:calc(env(safe-area-inset-bottom,0px) + 1.15rem); display:flex; align-items:center; gap:.35rem; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding:.15rem .1rem; pointer-events:auto; transition:opacity .18s ease, transform .18s ease; } .jr-imm-quick-explore::-webkit-scrollbar{ display:none; } /* Auto-hide quick-explore pills when route bar, stop card, nav HUD, or planner sheet is open (keep visible when #immOverlayCard is open so multiple chips can be toggled) */ #immersiveView:has(#immRouteBar:not([hidden])) .jr-imm-quick-explore, #immersiveView:has(#immStopCard:not([hidden])) .jr-imm-quick-explore, #immersiveView[data-imm-nav-active="true"] .jr-imm-quick-explore, #immersiveView:has(#immSheet:not([hidden])) .jr-imm-quick-explore{ opacity:0; pointer-events:none; transform:translateY(8px); } .jr-imm-quick-explore-pill{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.28rem; min-height:2.2rem; padding:.26rem .68rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--line) 85%,transparent); background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--ink); font-size:.75rem; font-weight:600; white-space:nowrap; box-shadow:0 4px 12px rgba(15,23,42,.2); cursor:pointer; transition:transform .14s ease, border-color .14s ease, background-color .14s ease; } .jr-imm-quick-explore-pill[aria-pressed="true"]{ background:linear-gradient(135deg,#6a4cff 0%,#7d62ff 100%); color:#ffffff; border-color:transparent; } /* Stop Card Prev / Next Stepper (< 1/3 >) */ .jr-imm-stop-card-stepper{ display:inline-flex; align-items:center; gap:.2rem; padding:.1rem .22rem; border-radius:999px; background:color-mix(in srgb,var(--bg) 80%,var(--card)); border:1px solid color-mix(in srgb,var(--line) 80%,transparent); flex-shrink:0; } .jr-imm-stop-step-btn{ width:1.45rem; height:1.45rem; border-radius:999px; border:0; background:transparent; color:var(--ink); font-size:.95rem; font-weight:700; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; } .jr-imm-stop-step-btn:disabled{ opacity:.35; cursor:not-allowed; } .jr-imm-stop-step-count{ font-size:.75rem; font-weight:700; color:var(--muted); padding:0 .15rem; } /* 2–6. Mobile Viewport Ergonomics for /maps (< 640px) */ @media (max-width: 639px){ /* Fix #1: Full-width mobile bottom dock for #immRouteBar + lift Layers & Right Controls above it */ .jr-imm-route-bar:not([hidden]){ left:.65rem !important; right:.65rem !important; bottom:calc(.75rem + env(safe-area-inset-bottom,0px)) !important; width:auto !important; transform:none !important; padding:.65rem .78rem !important; gap:.48rem !important; } #immersiveView:has(#immRouteBar:not([hidden])) .jr-imm-right-controls, #immersiveView:has(#immRouteBar:not([hidden])) .jr-imm-layers-wrap{ bottom:calc(10.6rem + env(safe-area-inset-bottom,0px)) !important; transition:bottom .2s cubic-bezier(.22,1,.36,1); } /* Fix #2: Compact #immSheet & #immDrawer on mobile so they never overflow the screen */ .jr-imm-top:has(#immSuggest:not([hidden])) #immSheet .jr-imm-stop-filters, .jr-imm-top:has(#immSuggest:not([hidden])) #immSheet .jr-imm-weather-row, .jr-imm-top:has(#immSuggest:not([hidden])) #immSheet .jr-imm-sheet-head{ display:none !important; } .jr-imm-top{ max-height:calc(100dvh - 1.2rem); } .jr-imm-sheet.jr-imm-top-options{ max-height:calc(100dvh - 5.2rem); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; gap:.38rem !important; padding:.58rem .68rem !important; box-sizing:border-box; width:100%; max-width:calc(100vw - 1.2rem); } .jr-imm-origin-row{ margin-bottom:.1rem !important; padding:.28rem .45rem !important; gap:.3rem !important; } .jr-imm-stop-filters{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; scrollbar-width:none; -ms-overflow-style:none; margin-top:.1rem !important; gap:.28rem !important; padding-bottom:.05rem; } .jr-imm-stop-filters::-webkit-scrollbar{ display:none; } .jr-imm-filter-pill{ flex:0 0 auto; white-space:nowrap; padding:.22rem .52rem !important; font-size:.75rem !important; } .jr-imm-weather-row{ flex-wrap:nowrap !important; margin-top:.1rem !important; padding:.26rem .45rem !important; gap:.3rem !important; overflow:hidden; } .jr-imm-leave-pills{ flex-shrink:0; } .jr-imm-leave-pill{ padding:.14rem .36rem !important; font-size:.75rem !important; } .jr-imm-go, .jr-imm-loop{ min-height:2.55rem !important; font-size:.86rem !important; } .jr-imm-sheet-head{ padding-top:.1rem !important; } .jr-imm-drawer{ width:min(19.5rem, 84vw) !important; max-width:calc(100vw - 2.2rem) !important; height:100dvh !important; max-height:100dvh !important; overflow:hidden !important; box-sizing:border-box !important; } .jr-imm-drawer-head{ padding:.75rem .9rem !important; flex-shrink:0; } .jr-imm-drawer-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:.75rem .9rem calc(1rem + env(safe-area-inset-bottom,0px)) !important; gap:.75rem !important; } .jr-imm-drawer-grid{ gap:.32rem !important; } .jr-imm-drawer .jr-imm-opt-btn{ min-height:1.95rem !important; padding:.24rem .48rem !important; font-size:.75rem !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jr-imm-drawer-link{ padding:.4rem .55rem !important; font-size:.8rem !important; gap:.48rem !important; } .jr-imm-layers-popover{ width:min(16.5rem, calc(100vw - 1.6rem)) !important; max-height:calc(100dvh - 8rem) !important; overflow-y:auto !important; } /* Fix #3: Lift #immStopCard & #immOverlayCard above #immRouteBar so stop pills stay tappable */ #immersiveView:has(#immRouteBar:not([hidden])) .jr-imm-stop-card, #immersiveView:has(#immRouteBar:not([hidden])) .jr-imm-overlay-card{ bottom:calc(10.6rem + env(safe-area-inset-bottom,0px)) !important; } /* Fix #4: Responsive single-row mobile Vibe chips (.jr-imm-chip) & clean horizontal action strip in #immRouteBar */ .jr-imm-chip{ min-height:2.05rem !important; font-size:clamp(.75rem,2.4vw,.75rem) !important; font-size:clamp(.75rem,2.85cqi,.75rem) !important; font-weight:500 !important; padding:.2rem clamp(.18rem,.95cqi,.34rem) !important; } .jr-imm-route-head{ flex-direction:column !important; align-items:stretch !important; gap:.45rem !important; } .jr-imm-route-actions{ width:100% !important; overflow-x:auto !important; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:.08rem; } .jr-imm-route-actions::-webkit-scrollbar{ display:none; } .jr-imm-route-btn, .jr-imm-route-btn-nav{ min-height:2.25rem !important; flex:0 0 auto; white-space:nowrap; } .jr-imm-stop-pill{ min-height:2.15rem !important; } /* Fix #5: Auto-hide top search bar (.jr-imm-top) during active Turn-by-Turn Navigation (#immNavHud) */ #immersiveView[data-imm-nav-active="true"] .jr-imm-top{ opacity:0; pointer-events:none; transform:translateY(-12px); transition:opacity .18s ease, transform .18s ease; } #immersiveView[data-imm-nav-active="true"] .jr-imm-nav-hud{ top:calc(env(safe-area-inset-top,0px) + .65rem) !important; } } /* ========================================================================== Item 44 — Declutter /maps UI & Minimalist Monoline SVG Iconography ========================================================================== */ /* 1. Minimalist Inline SVG Alignment Across All /maps Pills & Buttons */ #immersiveView :is(.jr-imm-opt-btn,.jr-imm-quick-explore-pill,.jr-imm-filter-pill,.jr-imm-origin-chip,.jr-imm-route-btn,.jr-imm-stop-act-btn,.jr-imm-top-wx,.jr-imm-weather-pill,.jr-imm-overlay-pill){ display:inline-flex; align-items:center; gap:.32rem; } #immersiveView :is(.jr-imm-opt-btn,.jr-imm-quick-explore-pill,.jr-imm-filter-pill,.jr-imm-origin-chip,.jr-imm-route-btn,.jr-imm-stop-act-btn,.jr-imm-top-wx,.jr-imm-weather-pill,.jr-imm-overlay-pill,.jr-imm-ctrl-btn,.jr-imm-layers-btn) svg{ flex-shrink:0; stroke-width:1.75; } /* 2. Sleek Frosted-Glass Top Search Bar & Weather Pill */ .jr-imm-search{ height:2.75rem !important; padding:0 .5rem 0 .4rem !important; background:color-mix(in srgb,var(--surface) 92%,transparent) !important; backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); border:1px solid color-mix(in srgb,var(--line) 75%,transparent); box-shadow:0 8px 24px -10px rgba(15,23,42,.24) !important; } .jr-imm-bar-icon{ width:1.25rem !important; height:1.25rem !important; opacity:.88; } .jr-imm-top-wx{ height:2.75rem; padding:0 .68rem !important; border:1px solid color-mix(in srgb,var(--line) 75%,transparent) !important; background:color-mix(in srgb,var(--surface) 92%,transparent) !important; backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); box-shadow:0 8px 24px -10px rgba(15,23,42,.24) !important; font-size:.75rem !important; font-weight:600 !important; } .jr-imm-logo{ min-height:2.75rem !important; background:color-mix(in srgb,var(--surface) 92%,transparent) !important; backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); border:1px solid color-mix(in srgb,var(--line) 75%,transparent) !important; box-shadow:0 8px 24px -10px rgba(15,23,42,.24) !important; } @media (max-width:420px){ .jr-imm-logo{ width:2.75rem !important; height:2.75rem !important; } } /* 3. Declutter #immSheet (Planner Sheet): Hide idle status disclaimer & soften borders */ .jr-imm-sheet.jr-imm-top-options{ background:color-mix(in srgb,var(--surface) 95%,transparent) !important; backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); border:1px solid color-mix(in srgb,var(--line) 72%,transparent) !important; box-shadow:0 16px 36px -14px rgba(15,23,42,.32) !important; } /* Hide the redundant "Joyride AI Maps Beta / Search for a place..." footer unless busy or showing an error/success message */ #immSheet .jr-imm-sheet-head:not(:has(.jr-imm-status.is-busy)):not(:has(.jr-imm-status[data-type="error"])):not(:has(.jr-imm-status[data-type="success"])){ display:none !important; } .jr-imm-origin-row{ border:1px solid color-mix(in srgb,var(--line) 68%,transparent) !important; background:color-mix(in srgb,var(--bg) 55%,var(--card)) !important; } .jr-imm-filter-pill{ font-weight:500 !important; border-color:color-mix(in srgb,var(--line) 68%,transparent) !important; } .jr-imm-weather-row{ border-color:color-mix(in srgb,var(--line) 60%,transparent) !important; background:color-mix(in srgb,var(--bg) 50%,var(--card)) !important; } /* 4. Declutter Bottom-Left Layers Button & Compact Bottom-Right Floating Map Controls */ .jr-imm-layers-wrap{ left:.55rem !important; bottom:calc(env(safe-area-inset-bottom,0px) + .65rem) !important; } .jr-imm-layers-bar{ display:inline-flex; align-items:center; gap:.35rem; } .jr-imm-layers-btn{ width:auto !important; min-width:2.2rem; height:2.1rem !important; padding:0 .58rem !important; border-radius:999px !important; border:1px solid color-mix(in srgb,var(--line) 78%,transparent) !important; background:color-mix(in srgb,var(--surface) 90%,transparent) !important; backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); box-shadow:0 6px 18px -6px rgba(15,23,42,.24) !important; flex-direction:row !important; gap:.28rem !important; font-size:.75rem !important; font-weight:600 !important; text-decoration:none !important; } .jr-imm-back-app-chip{ padding:0 .64rem !important; white-space:nowrap; } .jr-imm-back-app-chip:hover{ border-color:var(--violet) !important; transform:translateY(-1px); } .jr-imm-layers-btn svg{ width:14px !important; height:14px !important; } .jr-imm-right-controls{ right:.55rem !important; bottom:calc(env(safe-area-inset-bottom,0px) + .65rem) !important; gap:.14rem !important; padding:.16rem !important; border-radius:999px; background:color-mix(in srgb,var(--surface) 84%,transparent); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); border:1px solid color-mix(in srgb,var(--line) 72%,transparent); box-shadow:0 6px 18px -8px rgba(15,23,42,.24); } #immExploreGuidesBtn{ display:none !important; } .jr-imm-ctrl-btn, .jr-imm-fab.jr-imm-ctrl-btn{ width:1.85rem !important; height:1.85rem !important; border-radius:999px !important; border:0 !important; background:transparent !important; box-shadow:none !important; color:var(--ink) !important; } .jr-imm-right-controls .jr-imm-ctrl-btn svg{ width:14px !important; height:14px !important; } .jr-imm-ctrl-btn:hover, .jr-imm-ctrl-btn[aria-pressed="true"]{ background:var(--violet-t) !important; color:var(--violet-d) !important; } .jr-imm-zoom-group{ border:0 !important; border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; padding-top:.1rem; } .jr-imm-zoom-group .jr-imm-ctrl-btn{ width:1.85rem !important; height:1.7rem !important; border-radius:999px !important; } .jr-imm-zoom-group .jr-imm-ctrl-btn + .jr-imm-ctrl-btn{ border-top:0 !important; } /* On mobile (< 640px), hide redundant #immExploreGuidesBtn & #immFullscreenBtn to keep the right stack ultra-clean */ @media (max-width: 639px){ #immExploreGuidesBtn, #immFullscreenBtn{ display:none !important; } .jr-imm-quick-explore{ left:6.1rem !important; right:3.6rem !important; bottom:calc(env(safe-area-inset-bottom,0px) + 1rem) !important; } .jr-imm-quick-explore-pill{ min-height:2rem !important; padding:.2rem .55rem !important; font-size:.75rem !important; font-weight:500 !important; box-shadow:0 4px 14px -4px rgba(15,23,42,.18) !important; } } /* Floating "Search here" chip shown when user moves the map */ .jr-imm-search-here-row{ display:flex; justify-content:center; margin-top:.2rem; pointer-events:none; } .jr-imm-search-here-row[hidden], .jr-imm-search-here-btn[hidden], .jr-imm-top:has(#immSheet:not([hidden])) .jr-imm-search-here-row, .jr-imm-top:has(#immSuggest:not([hidden])) .jr-imm-search-here-row, #immersiveView[data-imm-nav-active="true"] .jr-imm-search-here-row{ display:none !important; } .jr-imm-search-here-btn{ pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; gap:.32rem; min-height:1.95rem; padding:.24rem .78rem; border-radius:999px; border:1.5px solid color-mix(in srgb,var(--violet) 55%,var(--line)); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); color:var(--ink); font-size:.75rem; font-weight:700; white-space:nowrap; box-shadow:0 8px 22px -6px rgba(15,23,42,.28); cursor:pointer; transition:transform .15s ease, border-color .15s ease, background-color .15s ease; } .jr-imm-search-here-btn svg{ color:#6a4cff !important; stroke:#6a4cff !important; flex-shrink:0; } :root[data-theme="dark"] .jr-imm-search-here-btn svg{ color:#a78bfa !important; stroke:#a78bfa !important; } .jr-imm-search-here-btn:hover{ border-color:var(--violet); transform:translateY(-1px); } /* Location permission prompt banner (#immLocPermBanner) */ .jr-imm-loc-banner{ display:flex; align-items:center; gap:.45rem; padding:.38rem .52rem .38rem .65rem; border-radius:999px; border:1.5px solid color-mix(in srgb,var(--violet) 45%,var(--line)); background:color-mix(in srgb,var(--surface) 95%,transparent); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); box-shadow:0 8px 22px -6px rgba(15,23,42,.24); pointer-events:auto; color:var(--ink); font-size:.75rem; font-weight:600; } .jr-imm-loc-banner[hidden], .jr-imm-top:has(#immSheet:not([hidden])) .jr-imm-loc-banner, #immersiveView[data-imm-nav-active="true"] .jr-imm-loc-banner{ display:none !important; } .jr-imm-loc-banner-icon{ display:inline-flex; align-items:center; justify-content:center; color:#6a4cff; flex-shrink:0; } :root[data-theme="dark"] .jr-imm-loc-banner-icon{ color:#a78bfa; } .jr-imm-loc-banner-text{ flex:1 1 auto; min-width:0; line-height:1.25; } .jr-imm-loc-grant-btn{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; padding:.24rem .68rem; border-radius:999px; border:none; background:linear-gradient(135deg,#6a4cff 0%,#7d62ff 100%); color:#ffffff; font-size:.75rem; font-weight:700; white-space:nowrap; cursor:pointer; transition:transform .14s ease, filter .14s ease; } .jr-imm-loc-grant-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); } .jr-imm-loc-dismiss-btn{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:1.45rem; height:1.45rem; border-radius:999px; border:none; background:transparent; color:var(--muted); cursor:pointer; } .jr-imm-loc-dismiss-btn:hover{ color:var(--ink); background:color-mix(in srgb,var(--line) 45%,transparent); } /* ========================================================================== TASK 46: Minimalist, User-Friendly Guides Overlay Card (#immOverlayCard) ========================================================================== */ .jr-imm-overlay-card{ bottom:calc(env(safe-area-inset-bottom,0px) + .75rem) !important; width:min(390px,calc(100vw - 1.25rem)) !important; padding:.56rem .72rem !important; border-radius:.95rem !important; background:color-mix(in srgb,var(--card) 92%,transparent) !important; backdrop-filter:blur(18px) saturate(150%) !important; -webkit-backdrop-filter:blur(18px) saturate(150%) !important; border:1px solid color-mix(in srgb,var(--line) 65%,transparent) !important; box-shadow:0 14px 32px -12px rgba(15,23,42,.26) !important; } .jr-imm-overlay-meta-row{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:.18rem; } .jr-imm-overlay-tag{ display:inline-flex; align-items:center; padding:.1rem .46rem; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; } .jr-imm-overlay-area{ font-size:.75rem; font-weight:500; color:var(--muted); } .jr-imm-overlay-title{ font-size:.92rem !important; font-weight:700 !important; line-height:1.25 !important; color:var(--ink) !important; margin:0 !important; } .jr-imm-overlay-sub{ font-size:.75rem; line-height:1.35; color:var(--muted); margin:.18rem 0 0; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } .jr-imm-overlay-head-controls{ display:inline-flex; align-items:center; gap:.22rem; flex-shrink:0; } .jr-imm-overlay-pills{ gap:.28rem !important; margin-top:.48rem !important; padding-bottom:.1rem !important; scrollbar-width:none; } .jr-imm-overlay-pills::-webkit-scrollbar{ display:none; } .jr-imm-overlay-pill{ padding:.2rem .52rem !important; border-radius:999px !important; border:1px solid color-mix(in srgb,var(--line) 65%,transparent) !important; background:color-mix(in srgb,var(--bg) 60%,transparent) !important; font-size:.75rem !important; font-weight:500 !important; gap:.32rem !important; transition:border-color .15s ease, background .15s ease, color .15s ease; } .jr-imm-overlay-pill.is-active{ border-color:var(--violet) !important; background:var(--violet-t) !important; color:var(--violet-d) !important; font-weight:600 !important; } .jr-imm-overlay-dot{ width:6px; height:6px; border-radius:999px; flex-shrink:0; } .jr-imm-overlay-actions{ margin-top:.48rem !important; padding-top:.45rem !important; border-top:1px solid color-mix(in srgb,var(--line) 50%,transparent) !important; gap:.4rem !important; } /* Task 48: Quick-explore category pills right underneath the search bar, Go to Joyride AI at drawer bottom, Street View drop mode, Compass hidden, zero Google Maps outbound links in /maps */ .jr-imm-top .jr-imm-quick-explore{ position:static !important; inset:auto !important; bottom:auto !important; left:auto !important; right:auto !important; transform:none !important; margin-top:.42rem !important; width:100% !important; max-width:100% !important; justify-content:flex-start !important; display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; gap:.36rem !important; padding:.1rem .08rem !important; scrollbar-width:none; pointer-events:auto !important; } .jr-imm-top .jr-imm-quick-explore::-webkit-scrollbar{ display:none; } .jr-imm-top:has(#immSheet:not([hidden])) .jr-imm-quick-explore, .jr-imm-top:has(#immSuggest:not([hidden])) .jr-imm-quick-explore{ display:none !important; } #immCompassBtn{ touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; } #immCompassBtn:active{ cursor:grabbing; } #immCompassBtn [data-imm-compass-needle]{ transition:transform 120ms ease-out; will-change:transform; } #immCompassBtn[aria-pressed="true"]{ border-color:rgba(106,76,255,.55) !important; box-shadow:0 0 0 2px rgba(106,76,255,.18); } #immMap{ transform-origin:50% 50%; transition:transform 110ms ease-out; } #immMap.is-rotated-canvas{ inset:auto !important; left:calc(50% - 73vmax) !important; top:calc(50% - 73vmax) !important; width:146vmax !important; height:146vmax !important; } #immStreetViewBtn{ cursor:grab; } #immStreetViewBtn:active{ cursor:grabbing; } #immersiveView[data-imm-sv-drop="true"] #immMap, #immersiveView[data-imm-sv-drop="true"] #immMap *{ cursor:crosshair !important; } .jr-imm-drawer-foot{ margin-top:auto; padding-top:.75rem; border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent); } .jr-imm-drawer-foot .jr-imm-drawer-return{ margin-bottom:0 !important; width:100%; justify-content:space-between; } html.is-immersive #navOpenedNote, html.is-immersive #leavingContinueMapsBtn, html.is-immersive #openAppleMapsBtn{ display:none !important; } #immMap a[href*="google.com/maps"], #immMap a[href*="maps.google.com"]{ pointer-events:none !important; display:none !important; } /* Task 49: Spacious, Minimalist Menu & Chip Typography (No Text Overflow in #immDrawer, #immLayersPopover, #immSheet, #immQuickExploreBar) */ .jr-imm-drawer .jr-imm-opt-btn, .jr-imm-layers-popover .jr-imm-opt-btn{ display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; gap:.36rem !important; min-height:2.05rem !important; padding:.26rem .56rem !important; border-radius:999px !important; font-size:.75rem !important; font-weight:500 !important; line-height:1.15 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .jr-imm-drawer .jr-imm-opt-btn svg, .jr-imm-layers-popover .jr-imm-opt-btn svg{ flex-shrink:0 !important; } .jr-imm-drawer .jr-imm-opt-btn span, .jr-imm-layers-popover .jr-imm-opt-btn span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .jr-imm-drawer-grid, .jr-imm-layers-row{ display:flex !important; flex-wrap:wrap !important; gap:.36rem !important; } .jr-imm-drawer-grid > .jr-imm-opt-btn, .jr-imm-layers-row > .jr-imm-opt-btn{ flex:0 1 auto !important; max-width:100% !important; } .jr-imm-chips, .jr-imm-modes{ container-type:inline-size; display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important; justify-content:space-between !important; gap:clamp(.12rem,.65cqi,.22rem) !important; width:100% !important; min-height:2.05rem !important; height:2.05rem !important; padding:0 !important; background:transparent !important; overflow:hidden !important; } .jr-imm-chip, .jr-imm-mode{ flex:1 1 auto !important; min-width:0 !important; min-height:2.05rem !important; height:2.05rem !important; padding:.18rem clamp(.12rem,.65cqi,.32rem) !important; border-radius:.48rem !important; border:1px solid var(--line) !important; background:var(--card) !important; font-size:.75rem !important; font-weight:500 !important; letter-spacing:-.025em !important; gap:clamp(.08rem,.45cqi,.16rem) !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; } .jr-imm-chip[aria-pressed="true"]{ background:linear-gradient(135deg,#6a4cff 0%,#7d62ff 55%,#9580ff 100%) !important; color:#ffffff !important; border-color:#6a4cff !important; box-shadow:0 2px 8px rgba(106,76,255,.28) !important; } .jr-imm-mode[aria-pressed="true"]{ background:var(--violet-t) !important; color:var(--violet-d) !important; border-color:#6a4cff !important; } :root[data-theme="dark"] .jr-imm-mode[aria-pressed="true"]{ background:rgba(124,93,250,.28) !important; color:#ffffff !important; border-color:#a78bfa !important; } .jr-imm-chip svg, .jr-imm-mode svg{ width:11px !important; height:11px !important; flex-shrink:0 !important; } .jr-imm-stop-filters{ container-type:inline-size; display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; gap:clamp(.16rem,.85cqi,.26rem) !important; overflow-x:auto !important; scrollbar-width:none; padding-bottom:.05rem; } .jr-imm-stop-filters::-webkit-scrollbar{ display:none; } .jr-imm-filter-pill{ flex:1 1 auto !important; min-width:0 !important; white-space:nowrap !important; padding:.2rem clamp(.2rem,.95cqi,.4rem) !important; font-size:clamp(.75rem,2.3vw,.75rem) !important; font-size:clamp(.75rem,2.6cqi,.75rem) !important; gap:clamp(.12rem,.55cqi,.2rem) !important; } /* Task 51: Minimalist, User-Friendly Quick Routes List (Saved & recent + Ready routes) & Zero All-Caps Labels in /maps */ .jr-imm-suggest-head, .jr-imm-drawer-label, .jr-imm-layers-heading, .jr-imm-nav-step-kicker, .jr-imm-overlay-kicker, .jr-imm-overlay-tag{ text-transform:none !important; letter-spacing:0 !important; } #immDrawerQuickLoad{ border:1px solid color-mix(in srgb,var(--line) 55%,transparent) !important; border-radius:.78rem !important; padding:.38rem .55rem !important; background:color-mix(in srgb,var(--card) 65%,transparent) !important; min-width:0; max-width:100%; overflow:hidden; } #immDrawerQuickLoad .jr-imm-drawer-layers-body{ margin-top:.42rem !important; padding-top:.42rem !important; border-top:1px solid color-mix(in srgb,var(--line) 45%,transparent) !important; display:grid; gap:.55rem; min-width:0; } .jr-imm-drawer-group{ min-width:0 !important; max-width:100% !important; } .jr-imm-drawer-routes-list{ display:flex !important; flex-direction:column !important; gap:.24rem !important; min-width:0 !important; max-width:100% !important; } .jr-imm-drawer-route-btn{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:.45rem !important; width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; padding:.34rem .48rem !important; border-radius:.55rem !important; border:1px solid color-mix(in srgb,var(--line) 50%,transparent) !important; background:color-mix(in srgb,var(--surface) 85%,transparent) !important; overflow:hidden !important; transition:background-color .15s ease, border-color .15s ease !important; } .jr-imm-drawer-route-btn:hover{ border-color:color-mix(in srgb,var(--violet) 60%,var(--line)) !important; background:var(--violet-t) !important; } .jr-imm-drawer-route-copy{ display:flex; flex-direction:column; min-width:0 !important; flex:1 1 0% !important; overflow:hidden !important; } .jr-imm-drawer-route-title{ display:block !important; font-size:.75rem !important; font-weight:500 !important; line-height:1.25 !important; color:var(--ink) !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:100% !important; } .jr-imm-drawer-route-meta{ display:block !important; font-size:.75rem !important; line-height:1.2 !important; color:var(--muted) !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:100% !important; } .jr-imm-drawer-route-chev{ flex-shrink:0; color:var(--muted); opacity:.65; } /* ========================================================================== Item 53 — Radical Minimalism Guide Card Architecture (Strict Upper Image + Minimalist 3-Item Footer + Hover Arrow + WCAG AAA) ========================================================================== */ .g-card-hover-arrow{ margin-left:auto; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); opacity:0; transform:translateX(-4px); transition:opacity .2s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1), color .2s ease; pointer-events:none; } .g-card:hover .g-card-hover-arrow, .g-card:focus-visible .g-card-hover-arrow{ opacity:1; transform:translateX(0); color:var(--ink); } /* Strictly separated upper rounded-xl image + breathing minimalist footer on /guides (#guideList, #recoPanel), topic hubs & author pages */ .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact), #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact), article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact), article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact){ display:flex !important; flex-direction:column !important; justify-content:flex-start !important; padding:.5rem !important; border-radius:.95rem !important; background:#ffffff !important; color:#0f172a !important; border:1px solid rgba(226,232,240,.85) !important; box-shadow:0 1px 3px rgba(15,23,42,.04) !important; transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s cubic-bezier(.22,1,.36,1), border-color .22s ease !important; } :root[data-theme="dark"] .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact), :root[data-theme="dark"] #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact), :root[data-theme="dark"] article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact), :root[data-theme="dark"] article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact){ background:#0f172a !important; color:#f8fafc !important; border-color:rgba(51,65,85,.75) !important; } .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact):hover, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact):hover, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact):hover, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact):hover{ transform:scale(1.02) !important; box-shadow:0 10px 24px -6px rgba(15,23,42,.12), 0 4px 10px -4px rgba(15,23,42,.06) !important; } /* Upper image block: uncompromised container with rounded-xl corners and zero overlays */ .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-media, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-media, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-media, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-media{ position:relative !important; inset:auto !important; width:100% !important; border-radius:.75rem !important; overflow:hidden !important; } .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-scrim, .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-topic, .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-cat, .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-route, .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta > img, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-scrim, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-topic, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-cat, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-route, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta > img, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-scrim, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-topic, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-cat, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-route, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta > img, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-scrim, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-topic, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-cat, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-route, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta > img{ display:none !important; } /* Minimalist Footer: Full-width vertical stack so text uses 100% of available card width before wrapping */ .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-body, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(n) > .g-card-body, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-body, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-body, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-body{ display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; padding:.75rem .65rem .6rem !important; } @media (min-width:1024px){ /* Ensure stacked side cards (2, 3, 5, 6, 14, 15) in the 2/3 split layout use full-width vertical card bodies instead of narrow 40/60 or span-4 columns */ .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+2), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+3){ flex-direction:column !important; min-height:11.65rem !important; height:auto !important; gap:0 !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+2) > .g-card-media, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(15n+3) > .g-card-media{ flex:0 0 auto !important; width:100% !important; min-height:5.8rem !important; height:5.8rem !important; border-radius:.75rem !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+5), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+6), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+14), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(15n+15){ grid-column:span 6 !important; } } .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-badges-row, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(n) .g-card-badges-row{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:.32rem !important; width:100% !important; max-width:100% !important; margin-bottom:.28rem !important; } .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-title, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(n) .g-card-title, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-title, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-title, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-title{ color:#0f172a !important; font-weight:700 !important; line-height:1.32 !important; width:100% !important; max-width:100% !important; text-wrap:pretty !important; overflow-wrap:normal !important; word-break:normal !important; display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; overflow:hidden !important; text-shadow:none !important; } :root[data-theme="dark"] .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-title, :root[data-theme="dark"] .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(n) .g-card-title, :root[data-theme="dark"] #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-title, :root[data-theme="dark"] article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-title, :root[data-theme="dark"] article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-title{ color:#f8fafc !important; } .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(n) .g-card-meta, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta{ display:flex !important; align-items:center !important; justify-content:flex-start !important; width:100% !important; max-width:100% !important; gap:.45rem !important; color:#475569 !important; font-size:.78rem !important; font-weight:500 !important; border-top:0 !important; padding-top:.25rem !important; margin-top:auto !important; } .jr-all-guides-list-col .g-card .g-card-meta-text{ flex:1 1 auto !important; min-width:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } :root[data-theme="dark"] .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta, :root[data-theme="dark"] .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card:nth-child(n) .g-card-meta, :root[data-theme="dark"] #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta, :root[data-theme="dark"] article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta, :root[data-theme="dark"] article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta{ color:#cbd5e1 !important; } /* Travel Guides (/guides): Hide separate #recoPanel unless user signals exist, and style recommended guide cards with a subtle accent + soft shadow + minimalist badge */ article[data-page-content="guides"] #recoPanel:not([data-has-user-signals="true"]){ display:none !important; } #guideList .g-card.is-recommended-guide, .jr-all-guides-list-col .g-card.is-recommended-guide{ border:1px solid rgba(139,92,246,.28) !important; box-shadow:0 8px 22px -8px rgba(109,40,217,.12), 0 2px 6px -2px rgba(15,23,42,.04) !important; } :root[data-theme="dark"] #guideList .g-card.is-recommended-guide, :root[data-theme="dark"] .jr-all-guides-list-col .g-card.is-recommended-guide{ border:1px solid rgba(167,139,250,.28) !important; box-shadow:0 10px 26px -10px rgba(139,92,246,.22), 0 2px 8px -2px rgba(0,0,0,.35) !important; } .jr-guide-reco-badge{ display:inline-flex !important; align-items:center !important; gap:.24rem !important; padding:.14rem .52rem !important; border-radius:999px !important; background:rgba(139,92,246,.10) !important; color:#6d28d9 !important; border:1px solid rgba(139,92,246,.22) !important; font-size:.75rem !important; font-weight:600 !important; letter-spacing:.01em !important; box-shadow:none !important; } :root[data-theme="dark"] .jr-guide-reco-badge{ background:rgba(139,92,246,.16) !important; color:#ddd6fe !important; border:1px solid rgba(167,139,250,.28) !important; } /* Shared Travel Guide Likes button & counter */ .jr-guide-like-btn{ display:inline-flex !important; align-items:center !important; gap:.28rem !important; min-height:26px !important; padding:.24rem .58rem !important; border-radius:999px !important; border:1px solid color-mix(in srgb,var(--line) 85%,transparent) !important; background:color-mix(in srgb,var(--surface) 92%,transparent) !important; color:var(--muted) !important; font-size:.75rem !important; font-weight:600 !important; line-height:1.1 !important; cursor:pointer !important; transition:transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease !important; margin-left:auto !important; flex-shrink:0 !important; } .jr-article-like-btn.jr-guide-like-btn{ margin-left:0 !important; padding:.375rem .875rem !important; font-size:.78rem !important; } .jr-guide-like-btn:hover{ border-color:rgba(225,29,72,.45) !important; color:#e11d48 !important; transform:translateY(-1px) !important; } .jr-guide-like-btn .jr-like-ico path{ fill:none; transition:fill .16s ease, stroke .16s ease; } .jr-guide-like-btn.is-liked, .jr-guide-like-btn[aria-pressed="true"]{ border-color:rgba(225,29,72,.5) !important; background:rgba(244,63,94,.12) !important; color:#e11d48 !important; } :root[data-theme="dark"] .jr-guide-like-btn.is-liked, :root[data-theme="dark"] .jr-guide-like-btn[aria-pressed="true"]{ border-color:rgba(251,113,133,.55) !important; background:rgba(244,63,94,.2) !important; color:#fb7185 !important; } .jr-guide-like-btn.is-liked .jr-like-ico path, .jr-guide-like-btn[aria-pressed="true"] .jr-like-ico path{ fill:currentColor !important; } .jr-guide-like-btn .jr-like-count{ font-variant-numeric:tabular-nums; font-weight:700; } .reco-map-dock-actions{ display:flex; align-items:center; gap:.45rem; flex-shrink:0; } .reco-map-dock-maps-cta{ display:inline-flex; align-items:center; gap:.25rem; padding:.36rem .62rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--violet) 42%,transparent); background:color-mix(in srgb,var(--violet-t) 85%,transparent); color:var(--violet); font-size:.75rem; font-weight:700; text-decoration:none; white-space:nowrap; transition:transform .16s ease, background-color .16s ease; } .reco-map-dock-maps-cta:hover{ transform:translateY(-1px); background:color-mix(in srgb,var(--violet) 16%,transparent); } .jr-play-store-btn{ display:inline-flex; align-items:center; gap:.45rem; border-radius:999px; border:1.5px solid color-mix(in srgb,var(--leaf,#10b981) 48%,var(--line)); background:color-mix(in srgb,var(--leaf,#10b981) 12%,var(--card)); color:var(--ink); font-weight:700; text-decoration:none; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease; } .jr-play-store-btn svg{ color:#10b981; flex-shrink:0; } .jr-play-store-btn:hover{ transform:translateY(-1px); border-color:#10b981; background:color-mix(in srgb,#10b981 18%,var(--card)); box-shadow:0 8px 20px -10px rgba(16,185,129,.45); } /* Guide Article reading measure (~72ch max-width) & Toolbar Reset Pill */ #pageShell article.prose-j[data-page-content^="guide-"] > p, #pageShell article.prose-j[data-page-content^="guide-"] > ul, #pageShell article.prose-j[data-page-content^="guide-"] > ol, #pageShell article.prose-j[data-page-content^="guide-"] > h2, #pageShell article.prose-j[data-page-content^="guide-"] > h3, #pageShell article.prose-j[data-page-content^="guide-"] > .tip, #pageShell article.prose-j[data-page-content^="guide-"] > .jr-story{ max-width:72ch !important; } @media (max-width: 767px){ #pageShell:has(> article[data-page-content="guides"]:not([hidden])){ padding-top:.35rem !important; } article[data-page-content="guides"] > .jr-guides-hero-header{ padding:.15rem 0 .45rem !important; margin-bottom:.35rem !important; min-height:0 !important; } article[data-page-content="guides"] > .jr-guides-hero-header .jr-guides-hero-content{ padding:0 !important; } article[data-page-content="guides"] > .jr-guides-hero-header h1{ font-size:1.45rem !important; line-height:1.15 !important; margin:0 !important; } article[data-page-content="guides"] > .jr-guides-hero-header .jr-guides-first-line{ margin-top:.2rem !important; font-size:.78rem !important; line-height:1.32 !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } article[data-page-content="guides"] > #allGuidesSection{ margin-top:.35rem !important; } article[data-page-content="guides"] > #allGuidesSection > div:first-child h2{ font-size:1.1rem !important; line-height:1.2 !important; } #guidesLocationFilter.jr-location-filter{ margin-top:.45rem !important; margin-bottom:.45rem !important; padding:.48rem .62rem !important; } .jr-vibe-pill-bar{ flex-wrap:nowrap !important; overflow-x:auto !important; scrollbar-width:none !important; -webkit-overflow-scrolling:touch; margin-top:.38rem !important; padding-top:.38rem !important; padding-bottom:.08rem !important; } .jr-vibe-pill-bar::-webkit-scrollbar{ display:none; } .jr-all-guides-split-layout.is-split-active{ margin-top:.45rem !important; gap:.45rem !important; } .jr-all-guides-split-layout.is-split-active[data-mobile-sheet-state="peek"] .jr-all-guides-map-col{ display:block !important; height:58vh !important; min-height:22rem !important; max-height:32rem !important; } .jr-all-guides-split-layout.is-split-active:not([data-mobile-sheet-state]) .jr-all-guides-map-col, .jr-all-guides-split-layout.is-split-active[data-mobile-sheet-state="half"] .jr-all-guides-map-col{ display:block !important; height:11.5rem !important; min-height:11.5rem !important; max-height:11.5rem !important; } .jr-all-guides-split-layout.is-split-active[data-mobile-sheet-state="full"] .jr-all-guides-map-col{ display:none !important; height:0 !important; min-height:0 !important; max-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:hidden !important; } .jr-mobile-guides-sheet-handle{ flex-direction:row !important; justify-content:space-between !important; padding:.25rem .55rem !important; margin-bottom:.3rem !important; } .jr-mobile-sheet-grabber{ width:auto !important; min-height:1.25rem !important; padding:.12rem .35rem !important; } .jr-mobile-sheet-snap-btn{ min-height:1.65rem !important; padding:.15rem .6rem !important; font-size:.75rem !important; } #guideList > .jr-country-group:first-of-type{ margin-top:.15rem !important; } #guideList > .jr-country-group:first-of-type > .jr-country-heading{ margin:0 !important; padding:0 !important; font-size:1rem !important; line-height:1.2 !important; } #guideList > .jr-country-group:first-of-type > .g-grid{ margin-top:.3rem !important; } #guideList .g-card.jr-reveal{ transform:none !important; opacity:1 !important; } } .jr-reset-filters-pill{ border-color:color-mix(in srgb,var(--violet) 42%,var(--line)) !important; color:var(--violet) !important; font-weight:700 !important; } .jr-reset-filters-pill[hidden]{ display:none !important; } /* ========================================================================== Editorial Hero Header Transformation (Full-Bleed Edge-to-Edge Guide Header) ========================================================================== */ #pageView:has(#pageShell > article.prose-j[data-page-content^="guide-"]:not([hidden])){ overflow-x:clip !important; } #pageShell:has(> article.prose-j[data-page-content^="guide-"]:not([hidden])){ padding-top:0 !important; } #pageShell:has(> article.prose-j[data-page-content^="guide-"]:not([hidden])) > #pageBackLink{ display:none !important; } .prose-j figure.jr-photo-hero, .prose-j figure.jr-photo-hero.jr-editorial-hero{ width:100vw !important; max-width:100vw !important; margin:0 calc(50% - 50vw) 1.25rem !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:0 24px 48px -20px rgba(13,20,36,.56) !important; } .prose-j figure.jr-photo-hero .jr-frame, .prose-j figure.jr-photo-hero.jr-editorial-hero .jr-frame{ width:100% !important; aspect-ratio:21 / 9 !important; min-height:clamp(22rem, 52vh, 34rem) !important; max-height:36rem !important; padding:0 !important; border:0 !important; border-radius:0 !important; cursor:default !important; } .prose-j figure.jr-photo-hero .jr-frame > picture, .prose-j figure.jr-photo-hero .jr-frame > img, .prose-j figure.jr-photo-hero .jr-frame > picture > img, .prose-j figure.jr-photo-hero img[data-hero]{ border-radius:0 !important; padding:0 !important; border:0 !important; margin:0 !important; } .prose-j figure.jr-photo-hero.jr-editorial-hero.is-no-photo .jr-frame{ background:radial-gradient(circle at 18% 20%, rgba(124,58,237,.45) 0%, rgba(15,23,42,.96) 68%, #090d16 100%) !important; animation:none !important; cursor:default !important; } .prose-j figure.jr-photo-hero .jr-frame::after, .prose-j figure.jr-photo-hero.jr-editorial-hero .jr-frame::after, .prose-j figure.jr-photo-hero.jr-editorial-hero.is-no-photo .jr-frame::after{ display:none !important; content:none !important; opacity:0 !important; visibility:hidden !important; } .prose-j figure.jr-photo-hero.jr-editorial-hero .jr-photo-vignette{ background:linear-gradient(180deg, rgba(8,12,24,0) 0%, rgba(8,12,24,.1) 36%, rgba(8,12,24,.66) 68%, rgba(8,12,24,.95) 100%) !important; } .prose-j figure.jr-photo-hero.jr-editorial-hero > figcaption{ padding:.68rem max(1.5rem, calc((100vw - 78rem) / 2 + 2.25rem)) !important; border-radius:0 !important; } .prose-j .jr-editorial-hero-overlay{ position:absolute !important; inset:0 !important; z-index:3 !important; display:flex !important; flex-direction:column !important; justify-content:flex-end !important; gap:.6rem !important; padding:1.5rem max(1.5rem, calc((100vw - 78rem) / 2 + 2.25rem)) 2rem !important; box-sizing:border-box !important; pointer-events:none !important; } .prose-j .jr-editorial-hero-overlay a, .prose-j .jr-editorial-hero-overlay button{ pointer-events:auto !important; } .prose-j .jr-editorial-hero-top{ display:flex !important; align-items:flex-start !important; justify-content:flex-start !important; gap:.75rem !important; padding-right:0 !important; } .prose-j .jr-editorial-hero-overlay .jr-editorial-kicker, :root[data-theme="dark"] .prose-j .jr-editorial-hero-overlay .jr-editorial-kicker{ margin:0 !important; padding:.32rem .78rem !important; border-radius:999px !important; background:rgba(15,23,42,.68) !important; backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; border:1px solid rgba(255,255,255,.18) !important; color:#f8fafc !important; font-size:.75rem !important; font-weight:700 !important; letter-spacing:.03em !important; line-height:1.3 !important; display:inline-flex !important; flex-wrap:wrap !important; align-items:center !important; gap:.32rem .48rem !important; box-shadow:0 4px 14px rgba(0,0,0,.25) !important; } .prose-j .jr-editorial-hero-overlay .jr-editorial-kicker .jr-topic-ico{ color:var(--cat-c, #a78bfa) !important; } .prose-j .jr-editorial-hero-overlay .jr-editorial-kicker .jr-guide-loc-badge{ background:transparent !important; border:0 !important; padding:0 !important; color:#e2e8f0 !important; font-size:inherit !important; } .prose-j .jr-editorial-hero-bottom{ margin-top:0 !important; max-width:54rem !important; display:flex !important; flex-direction:column !important; gap:.5rem !important; } .prose-j .jr-editorial-hero-overlay h1.jr-editorial-title, article[data-page-content] .jr-editorial-hero-overlay h1.jr-editorial-title{ margin:0 !important; color:#ffffff !important; font-family:var(--font-display) !important; font-size:clamp(1.5rem, 3.2vw, 2.45rem) !important; font-weight:800 !important; line-height:1.12 !important; letter-spacing:-.02em !important; text-wrap:balance !important; text-shadow:0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45) !important; } .prose-j .jr-editorial-hero-overlay .jr-editorial-byline{ margin:0 !important; display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:.25rem .45rem !important; color:rgba(241,245,249,.92) !important; font-size:.83rem !important; line-height:1.38 !important; font-weight:500 !important; text-shadow:0 1px 6px rgba(0,0,0,.5) !important; } .prose-j .jr-editorial-hero-overlay .jr-editorial-byline a{ color:#ffffff !important; font-weight:700 !important; text-decoration:underline !important; text-decoration-color:rgba(255,255,255,.55) !important; text-underline-offset:3px !important; } .prose-j .jr-editorial-hero-overlay .jr-editorial-byline picture{ display:inline-flex !important; width:1.75rem !important; height:1.75rem !important; flex:0 0 1.75rem !important; margin:0 .2rem 0 0 !important; padding:0 !important; border:0 !important; vertical-align:middle !important; } .prose-j .jr-editorial-hero-overlay img.jr-byline-avatar, .prose-j .jr-editorial-hero-overlay .jr-byline-avatar{ width:1.75rem !important; height:1.75rem !important; min-width:1.75rem !important; max-width:1.75rem !important; min-height:1.75rem !important; max-height:1.75rem !important; aspect-ratio:1 / 1 !important; border-radius:50% !important; object-fit:cover !important; object-position:center !important; display:inline-block !important; flex:0 0 1.75rem !important; opacity:1 !important; border:1.5px solid rgba(255,255,255,.85) !important; box-shadow:0 2px 8px rgba(0,0,0,.35) !important; margin:0 !important; } @media (max-width: 639px){ .prose-j figure.jr-photo-hero.jr-editorial-hero{ width:100vw !important; max-width:100vw !important; margin:0 calc(50% - 50vw) .95rem !important; border-radius:0 !important; } .prose-j figure.jr-photo-hero.jr-editorial-hero .jr-frame{ min-height:16.5rem !important; max-height:22rem !important; border-radius:0 !important; } .prose-j figure.jr-photo-hero.jr-editorial-hero > figcaption{ padding:.52rem 1rem !important; } .prose-j .jr-editorial-hero-overlay{ padding:.9rem 1rem 1.05rem !important; } .prose-j .jr-editorial-hero-top{ padding-right:0 !important; } .prose-j .jr-editorial-hero-overlay .jr-editorial-kicker, :root[data-theme="dark"] .prose-j .jr-editorial-hero-overlay .jr-editorial-kicker{ padding:.22rem .6rem !important; font-size:.75rem !important; gap:.22rem .38rem !important; } .prose-j .jr-editorial-hero-bottom{ gap:.3rem !important; } .prose-j .jr-editorial-hero-overlay h1.jr-editorial-title, article[data-page-content] .jr-editorial-hero-overlay h1.jr-editorial-title{ font-size:clamp(1.18rem, 5vw, 1.5rem) !important; line-height:1.14 !important; } .prose-j .jr-editorial-hero-overlay .jr-editorial-byline{ font-size:.75rem !important; line-height:1.3 !important; } .prose-j .jr-editorial-hero-overlay .jr-editorial-byline picture{ width:1.3rem !important; height:1.3rem !important; flex:0 0 1.3rem !important; } .prose-j .jr-editorial-hero-overlay img.jr-byline-avatar, .prose-j .jr-editorial-hero-overlay .jr-byline-avatar{ width:1.3rem !important; height:1.3rem !important; min-width:1.3rem !important; max-width:1.3rem !important; min-height:1.3rem !important; max-height:1.3rem !important; flex:0 0 1.3rem !important; } } /* ========================================================================== Content Flow, Whitespace Optimization & Zig-Zag Split-Column Editorial Rhythm ========================================================================== */ .prose-j .jr-editorial-intro-band{ display:grid; grid-template-columns:minmax(0, 1fr); gap:1rem; margin:.65rem 0 1.35rem; align-items:start; } .prose-j .jr-editorial-intro-main{ display:flex; flex-direction:column; gap:.65rem; min-width:0; } .prose-j .jr-editorial-intro-main .jr-lead{ margin:0 !important; max-width:none !important; font-size:clamp(1.03rem, 1.35vw, 1.15rem) !important; line-height:1.68 !important; } .prose-j .jr-editorial-intro-side{ display:flex; flex-direction:column; gap:.65rem; min-width:0; padding:.95rem 1.05rem; border-radius:1.15rem; background:linear-gradient(155deg, var(--surface) 0%, var(--card) 100%); border:1px solid var(--line); box-shadow:0 12px 28px -18px rgba(15,23,42,.22); } .prose-j .jr-editorial-intro-side .jr-editorial-actions-bar{ margin:0 !important; } .prose-j .jr-editorial-intro-side .jr-story-chapters{ margin:0 !important; padding:.55rem 0 0 !important; border:0 !important; border-top:1px dashed var(--line) !important; border-radius:0 !important; background:transparent !important; flex-direction:column !important; align-items:flex-start !important; gap:.42rem !important; overflow:visible !important; } .prose-j .jr-editorial-intro-side .jr-chapters-list{ flex-wrap:wrap !important; gap:.38rem !important; } .prose-j .jr-editorial-body-flow{ display:flex; flex-direction:column; gap:1.85rem; margin-top:1.35rem; } .prose-j .jr-editorial-section{ display:grid; grid-template-columns:minmax(0, 1fr); gap:.85rem; padding-bottom:1.65rem; border-bottom:1px solid color-mix(in srgb, var(--line) 72%, transparent); } .prose-j .jr-editorial-section:last-child{ border-bottom:0; padding-bottom:0; } .prose-j .jr-editorial-section > :is(h2, h3, p, ul, ol, .tip, .jr-story, .jr-gear-card){ max-width:none !important; } .prose-j .jr-editorial-data-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:1.15rem; align-items:stretch; } .prose-j .jr-editorial-data-grid[hidden], .prose-j [data-post-ref][hidden]{ display:none !important; } .prose-j .jr-editorial-data-grid > figure.jr-chart{ width:100% !important; max-width:none !important; margin:0 !important; } .prose-j .jr-editorial-data-grid > aside.jr-place-compact{ margin:0 !important; display:flex !important; flex-direction:column !important; justify-content:space-between !important; gap:.85rem !important; padding:1.15rem 1.25rem !important; } .prose-j .jr-place-compact-heading{ margin:.25rem 0 .35rem !important; font-family:var(--font-display) !important; font-size:1.12rem !important; font-weight:800 !important; line-height:1.25 !important; color:var(--ink) !important; } .prose-j .jr-place-compact-sub{ margin:0 !important; font-size:.86rem !important; line-height:1.55 !important; color:var(--muted) !important; } @media (min-width: 768px){ .prose-j .jr-editorial-intro-band{ grid-template-columns:minmax(0, 1fr); gap:1rem; align-items:center; margin:.85rem 0 1.6rem; } /* Zig-zag staggered split-column sections with photography & POI spotlight cards */ .prose-j .jr-editorial-section.has-visual{ grid-template-columns:minmax(0, 1.14fr) minmax(0, 0.86fr); column-gap:2.1rem; row-gap:.75rem; align-items:start; grid-auto-flow:dense; } .prose-j .jr-editorial-section.has-visual.is-zigzag-left{ grid-template-columns:minmax(0, 0.86fr) minmax(0, 1.14fr); } .prose-j .jr-editorial-section.has-visual > :is(h2, h3, p, ul, ol, .tip, .jr-story, .jr-gear-card){ grid-column:1; margin-top:0 !important; margin-bottom:0 !important; } .prose-j .jr-editorial-section.has-visual.is-zigzag-left > :is(h2, h3, p, ul, ol, .tip, .jr-story, .jr-gear-card){ grid-column:2; } .prose-j .jr-editorial-section.has-visual > h2{ padding-top:.15rem; } .prose-j .jr-editorial-section.has-visual > :is(figure.jr-photo-inline, aside.jr-inline-poi){ grid-column:2; float:none !important; clear:none !important; width:100% !important; max-width:none !important; margin:0 !important; align-self:start; } .prose-j .jr-editorial-section.has-visual.is-zigzag-left > :is(figure.jr-photo-inline, aside.jr-inline-poi){ grid-column:1; } .prose-j .jr-editorial-section.has-visual.has-photo.has-poi > figure.jr-photo-inline{ grid-row:1 / span 2; } .prose-j .jr-editorial-section.has-visual.has-photo.has-poi > aside.jr-inline-poi{ grid-row:3 / span 3; } .prose-j .jr-editorial-section.has-visual:not(.has-photo) > aside.jr-inline-poi, .prose-j .jr-editorial-section.has-visual:not(.has-poi) > figure.jr-photo-inline{ grid-row:1 / span 4; } /* Text-only sections: asymmetric 2-column sticky heading + narrative body */ .prose-j .jr-editorial-section.is-text-split{ grid-template-columns:minmax(14rem, 0.36fr) minmax(0, 0.64fr); column-gap:2.1rem; row-gap:.75rem; align-items:start; } .prose-j .jr-editorial-section.is-text-split > h2{ grid-column:1; grid-row:1 / span 5; margin:0 !important; position:sticky; top:5.25rem; padding-top:.45rem; border-top:2px solid color-mix(in srgb, var(--violet) 45%, var(--line)); } .prose-j .jr-editorial-section.is-text-split > :not(h2){ grid-column:2; margin-top:0 !important; margin-bottom:0 !important; } /* Paired Climate Data Graphic + Place Destination Card */ .prose-j .jr-editorial-data-grid:has(> aside.jr-place-compact){ grid-template-columns:minmax(0, 1.38fr) minmax(0, 0.82fr); gap:1.35rem; } } /* ========================================================================== Routes Section Editorial Flow, Asymmetric Pairing & Zig-Zag Rhythm ========================================================================== */ .jr-route-overview-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:1.25rem; align-items:start; margin:1.35rem 0 1.65rem; } .jr-route-overview-main{ display:flex; flex-direction:column; gap:.85rem; min-width:0; } .jr-route-overview-main .jr-route-intro-prose p{ margin:0 !important; max-width:none !important; font-size:1.03rem; line-height:1.68; } .jr-route-overview-main .jr-glance-facts{ margin:0 !important; } .jr-route-overview-main .jr-actions{ margin:0 !important; } .jr-route-overview-main figure.jr-route-hero{ margin:.25rem 0 0 !important; border-radius:1.1rem; overflow:hidden; border:1px solid var(--line); background:var(--card); box-shadow:var(--sh-sm); } .jr-route-overview-main figure.jr-route-hero img{ max-height:13.5rem; object-fit:cover; width:100%; display:block; } .jr-route-overview-main figure.jr-route-hero figcaption{ padding:.55rem .85rem; margin:0 !important; font-size:.78rem; line-height:1.4; color:var(--muted); border-top:1px solid var(--line); } .jr-route-overview-map-col{ display:flex; flex-direction:column; gap:.55rem; min-width:0; padding:.75rem; border-radius:1.25rem; background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-sm); } .jr-route-overview-map-col .jr-route-map{ height:23.5rem; border-radius:.95rem; } .jr-route-overview-map-col .jr-route-stats-bar{ margin:0 !important; padding:.35rem .55rem; border-radius:.65rem; background:var(--card); border:1px solid var(--line); } /* Measured Route Facts: Balanced Two-Column Metrics + Elevation Profile Split */ .jr-measured-split{ display:grid; grid-template-columns:minmax(0, 1fr); gap:1.25rem; align-items:stretch; } .jr-measured-metrics-col{ display:flex; flex-direction:column; justify-content:center; min-width:0; } .jr-measured-metrics-col .jr-metrics{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:.65rem !important; margin:0 !important; } .jr-measured-metrics-col .jr-metrics > div{ padding:.7rem .85rem !important; border-radius:.85rem !important; background:var(--card) !important; border:1px solid var(--line) !important; display:flex !important; flex-direction:column !important; gap:.2rem !important; } .jr-measured-elev-pane{ display:flex; flex-direction:column; justify-content:space-between; gap:.65rem; padding:.95rem 1.05rem; border-radius:1rem; background:var(--card); border:1px solid var(--line); min-width:0; } .jr-elev-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; } .jr-elev-label{ font-size:.76rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); } .jr-gpx-btn{ padding:.32rem .75rem !important; min-height:0 !important; font-size:.78rem !important; border-radius:999px !important; } .jr-measured-elev-pane .jr-elev{ margin:0 !important; } /* Stop-by-Stop Itinerary: Staggered Zig-Zag Two-Column Rhythm with Paired Stop Photography */ .prose-j ol.jr-stops.jr-stops-zigzag{ list-style:none !important; padding:0 !important; margin:1.15rem 0 2rem !important; display:grid; grid-template-columns:minmax(0, 1fr); gap:1rem; counter-reset:none; } .prose-j ol.jr-stops.jr-stops-zigzag > li.jr-stop-item{ position:relative; margin:0 !important; padding:1rem 1.1rem !important; border-radius:1.15rem; background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .prose-j ol.jr-stops.jr-stops-zigzag > li.jr-stop-item::before{ display:none !important; content:none !important; } .prose-j ol.jr-stops.jr-stops-zigzag > li.jr-stop-item:hover{ transform:translateY(-2px); box-shadow:var(--sh); border-color:color-mix(in srgb, var(--violet) 38%, var(--line)); } .jr-stop-card-inner{ display:grid; grid-template-columns:minmax(0, 1fr); gap:.85rem; align-items:center; } .jr-stop-item.has-stop-photo .jr-stop-card-inner{ grid-template-columns:minmax(0, 1.2fr) minmax(7.2rem, 0.8fr); } .jr-stop-copy{ display:flex; flex-direction:column; gap:.45rem; min-width:0; } .jr-stop-meta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; } .jr-stop-step-pill{ display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .58rem; border-radius:999px; font-size:.75rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:var(--violet-t); color:var(--violet); } .jr-stop-dist-pill{ display:inline-flex; align-items:center; padding:.18rem .55rem; border-radius:999px; font-size:.75rem; font-weight:700; background:var(--card); color:var(--muted); border:1px solid var(--line); } .jr-stop-narrative{ font-size:.94rem; line-height:1.56; color:var(--ink-2); } .jr-stop-narrative strong{ color:var(--ink); font-weight:800; font-size:.98rem; } figure.jr-stop-photo{ margin:0 !important; border-radius:.85rem; overflow:hidden; border:1px solid var(--line); background:var(--card); align-self:stretch; display:flex; flex-direction:column; } figure.jr-stop-photo img{ width:100% !important; height:6.4rem !important; object-fit:cover !important; display:block !important; margin:0 !important; border-radius:0 !important; } figure.jr-stop-photo .jr-stop-photo-cap{ padding:.3rem .5rem !important; margin:0 !important; font-size:.75rem !important; line-height:1.25 !important; color:var(--muted) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-top:1px solid var(--line); } /* Paired Route Tips + Author/Feedback Split Grid */ .jr-route-tips-author-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:1.25rem; align-items:start; margin:1.75rem 0; } .jr-route-tips-panel{ padding:1.15rem 1.3rem; border-radius:1.2rem; background:linear-gradient(155deg, var(--surface) 0%, var(--card) 100%); border:1px solid var(--line); box-shadow:var(--sh-sm); } .jr-route-tips-panel > h2{ margin-top:0 !important; margin-bottom:.65rem !important; font-size:1.2rem !important; } .jr-route-tips-panel > ul{ margin:0 !important; max-width:none !important; } .jr-route-author-col{ display:flex; flex-direction:column; gap:.95rem; min-width:0; } .jr-route-author-col .jr-authorbox{ margin:0 !important; } @media (min-width: 860px){ .jr-route-overview-grid{ grid-template-columns:minmax(0, 1.04fr) minmax(0, 0.96fr); gap:1.65rem; align-items:stretch; } .jr-route-overview-map-col{ position:sticky; top:5.25rem; } .jr-route-overview-map-col .jr-route-map{ height:26.5rem; flex:1 1 auto; } .jr-measured-split{ grid-template-columns:minmax(0, 1.06fr) minmax(0, 0.94fr); gap:1.45rem; } .prose-j ol.jr-stops.jr-stops-zigzag{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:1.35rem; row-gap:1.25rem; padding-bottom:1.15rem !important; } .prose-j ol.jr-stops.jr-stops-zigzag > li.jr-stop-item.is-zigzag-right{ transform:translateY(1.15rem); } .prose-j ol.jr-stops.jr-stops-zigzag > li.jr-stop-item.is-zigzag-right:hover{ transform:translateY(calc(1.15rem - 2px)); } .jr-route-tips-author-grid{ grid-template-columns:minmax(0, 1.06fr) minmax(0, 0.94fr); gap:1.45rem; } } /* ========================================================================== High-Impact App Promotion & Conversion Redesign (#joyrideAppsSection) ========================================================================== */ .jr-showcase-trust-cluster, .jr-showcase-callouts{ display:none !important; } @media (max-width:959px){ #joyrideAppsSection .jr-maps-showcase-copy{ display:contents; } #joyrideAppsSection .jr-app-showcase-meta{ order:1; } #joyrideAppsSection .jr-maps-showcase-copy > h3{ order:2; margin-top:.15rem !important; } #joyrideAppsSection .jr-maps-showcase-copy > p{ order:3; margin-top:0 !important; } #joyrideAppsSection .jr-showcase-playground{ order:4; margin-top:.25rem !important; } #joyrideAppsSection .jr-showcase-phone-col{ order:5; margin-top:.15rem !important; } #joyrideAppsSection .jr-app-showcase-actions{ order:6; margin-top:.35rem !important; } } @media (max-width:639px){ #joyrideAppsSection .jr-apps-head > p:last-child{ display:none !important; } #joyrideAppsSection .jr-apps-grid{ margin-top:.85rem !important; } #joyrideAppsSection .jr-app-showcase-card{ padding:1rem !important; border-radius:1.15rem !important; } #joyrideAppsSection .jr-maps-showcase-split{ gap:.7rem !important; } #joyrideAppsSection .jr-showcase-playground{ padding:.65rem .72rem !important; margin-top:.15rem !important; } #joyrideAppsSection .jr-showcase-playground-head{ justify-content:center !important; gap:.35rem !important; } #joyrideAppsSection .jr-showcase-playground-label{ display:none !important; } #joyrideAppsSection .jr-showcase-vibe-btn, #joyrideAppsSection .jr-showcase-mode-btn{ min-height:2.25rem !important; font-size:.82rem !important; padding:.32rem .45rem !important; } #joyrideAppsSection .jr-app-showcase-actions{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:.5rem !important; margin-top:.25rem !important; width:100% !important; } #joyrideAppsSection .jr-app-showcase-actions > a{ width:100% !important; justify-content:center !important; text-align:center !important; } #joyrideAppsSection .jr-showcase-phone-frame{ padding:.55rem !important; border-radius:1.35rem !important; gap:.42rem !important; } #joyrideAppsSection .jr-showcase-sim-bar{ justify-content:center !important; padding:.38rem .55rem !important; margin-top:.15rem !important; } #joyrideAppsSection .jr-showcase-sim-btn{ width:100% !important; justify-content:center !important; padding:.36rem .75rem !important; font-size:.8rem !important; } #joyrideAppsSection .jr-showcase-sim-hint{ display:none !important; } } .jr-showcase-launch-btn{ display:inline-flex !important; align-items:center !important; gap:.5rem !important; font-weight:700 !important; border-radius:.85rem !important; } .jr-showcase-launch-btn::before{ content:""; width:.42rem; height:.42rem; border-radius:999px; background:currentColor; opacity:.85; display:inline-block; flex-shrink:0; } .jr-play-store-badge{ background:#0f172a !important; color:#ffffff !important; border:1px solid rgba(255,255,255,.22) !important; border-radius:.85rem !important; font-weight:700 !important; box-shadow:0 8px 20px -10px rgba(15,23,42,.45) !important; display:inline-flex !important; align-items:center !important; gap:.5rem !important; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; } .jr-play-store-badge:hover{ transform:translateY(-1.5px); border-color:rgba(255,255,255,.45) !important; box-shadow:0 12px 24px -10px rgba(15,23,42,.6) !important; } .jr-play-badge-svg{ flex-shrink:0; } .jr-showcase-callouts{ display:flex; flex-wrap:wrap; justify-content:center; gap:.38rem; margin-bottom:.55rem; } .jr-showcase-callout-pill{ display:inline-flex; align-items:center; gap:.32rem; padding:.22rem .58rem; border-radius:999px; font-size:.75rem; font-weight:600; background:var(--surface); color:var(--ink-2); border:1px solid var(--line); cursor:pointer; user-select:none; transition:transform .15s ease, border-color .15s ease; } .jr-showcase-callout-pill svg, .jr-showcase-mode-btn svg, .jr-imm-saved-chip svg{ flex-shrink:0; color:currentColor; } .jr-imm-saved-chip{ display:inline-flex; align-items:center; gap:.28rem; } .jr-showcase-callout-pill:hover{ transform:translateY(-1px); border-color:var(--violet); } .jr-showcase-sim-bar{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.55rem; padding:.42rem .65rem; border-radius:.75rem; background:rgba(15,23,42,.72); border:1px solid rgba(148,163,184,.22); } .jr-showcase-sim-btn{ display:inline-flex; align-items:center; gap:.38rem; padding:.26rem .68rem; border-radius:999px; font-size:.75rem; font-weight:800; color:#ffffff; background:linear-gradient(135deg, #2563eb, #6a4cff); border:0; cursor:pointer; transition:transform .15s ease, filter .15s ease; } .jr-showcase-sim-btn.is-active{ background:linear-gradient(135deg, #059669, #10b981); } .jr-showcase-sim-btn:hover{ filter:brightness(1.08); } .jr-showcase-sim-hint{ font-size:.75rem; color:#cbd5e1; font-weight:600; } .jr-showcase-gps-group{ transition:transform .55s cubic-bezier(.22, 1, .36, 1); } /* ========================================================================== Item 56 — AI Breathing & Glowing Aurora Background for "Recommended for you" (.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg) ========================================================================== */ @keyframes jr-ai-breathing-glow{ 0%, 100%{ box-shadow: 0 20px 44px -24px rgba(106,76,255,.28), 0 0 28px -8px rgba(139,92,246,.22), inset 0 1px 0 rgba(255,255,255,.85); border-color:rgba(106,76,255,.28); } 50%{ box-shadow: 0 26px 56px -18px rgba(106,76,255,.46), 0 0 46px -4px rgba(56,189,248,.34), inset 0 1px 0 rgba(255,255,255,.96); border-color:rgba(124,58,237,.54); } } @keyframes jr-ai-breathing-glow-dark{ 0%, 100%{ box-shadow: 0 24px 48px -22px rgba(4,8,22,.82), 0 0 32px -8px rgba(124,93,250,.28), inset 0 1px 0 rgba(196,181,253,.22); border-color:rgba(167,139,250,.44); } 50%{ box-shadow: 0 28px 60px -16px rgba(106,76,255,.48), 0 0 52px -4px rgba(56,189,248,.36), inset 0 1px 0 rgba(221,214,254,.44); border-color:rgba(196,181,253,.76); } } @keyframes jr-ai-orb-breathe-a{ 0%, 100%{ transform:translate3d(-6%, -5%, 0) scale(.94); opacity:.46; } 50%{ transform:translate3d(7%, 6%, 0) scale(1.12); opacity:.86; } } @keyframes jr-ai-orb-breathe-b{ 0%, 100%{ transform:translate3d(6%, 5%, 0) scale(1.06); opacity:.42; } 50%{ transform:translate3d(-7%, -6%, 0) scale(.92); opacity:.82; } } @keyframes jr-ai-sparkle-breathe{ 0%, 100%{ transform:scale(1); opacity:.85; filter:drop-shadow(0 0 2px rgba(106,76,255,.35)); } 50%{ transform:scale(1.22); opacity:1; filter:drop-shadow(0 0 8px rgba(106,76,255,.75)); } } :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg){ position:relative; overflow:hidden; isolation:isolate; animation:gradient-aurora 5s ease-in-out infinite, jr-ai-breathing-glow 4.2s ease-in-out infinite !important; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg){ animation:gradient-aurora 5s ease-in-out infinite, jr-ai-breathing-glow-dark 4.2s ease-in-out infinite !important; } :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg)::before, :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg)::after{ content:""; position:absolute; inset:-18%; border-radius:inherit; pointer-events:none; z-index:0; will-change:transform, opacity; } :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg)::before{ background: radial-gradient(circle at 22% 28%, rgba(139,92,246,.38) 0%, rgba(139,92,246,0) 48%), radial-gradient(circle at 80% 72%, rgba(56,189,248,.34) 0%, rgba(56,189,248,0) 50%); animation:jr-ai-orb-breathe-a 5.6s ease-in-out infinite; } :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg)::after{ background: radial-gradient(circle at 76% 24%, rgba(192,132,252,.34) 0%, rgba(192,132,252,0) 46%), radial-gradient(circle at 26% 78%, rgba(99,102,241,.28) 0%, rgba(99,102,241,0) 48%); animation:jr-ai-orb-breathe-b 6.8s ease-in-out infinite; } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg)::before{ background: radial-gradient(circle at 22% 28%, rgba(139,92,246,.32) 0%, rgba(139,92,246,0) 50%), radial-gradient(circle at 80% 72%, rgba(56,189,248,.26) 0%, rgba(56,189,248,0) 52%); } :root[data-theme="dark"]:not([data-contrast="high"]) :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg)::after{ background: radial-gradient(circle at 76% 24%, rgba(167,139,250,.28) 0%, rgba(167,139,250,0) 48%), radial-gradient(circle at 26% 78%, rgba(59,130,246,.24) 0%, rgba(59,130,246,0) 50%); } :is(.reco-panel, .jr-related-guides, .jr-related-routes) .reco-kicker::before{ display:inline-block; animation:jr-ai-sparkle-breathe 2.8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg), :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg)::before, :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg)::after, :is(.reco-panel, .jr-related-guides, .jr-related-routes) .reco-kicker::before{ animation:none !important; } } :root[data-contrast="high"] :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg), :root[data-contrast="high"] :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg)::before, :root[data-contrast="high"] :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg)::after{ animation:none !important; background-image:none !important; } :root[data-contrast="high"] :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg)::before, :root[data-contrast="high"] :is(.reco-panel.animated-gradient, .jr-related-guides.animated-gradient, .jr-ai-breathing-bg)::after{ display:none !important; } /* ========================================================================== Item 57 — GSC Technical SEO & 17-Clause UX/CRO/a11y Enhancements (Breadcrumbs, Sticky Mobile Maps CTA, Inline Lead Capture, Contrast & Content-Visibility) ========================================================================== */ .jr-breadcrumb{ margin:0 0 .65rem; font-size:.78rem; line-height:1.4; color:var(--muted); } .jr-breadcrumb-list{ display:flex; flex-wrap:wrap; align-items:center; gap:.32rem .45rem; margin:0; padding:0; list-style:none; } .jr-breadcrumb-list a{ color:var(--muted); font-weight:600; text-decoration:none; transition:color .15s ease; } .jr-breadcrumb-list a:hover{ color:var(--violet); text-decoration:underline; } .jr-breadcrumb-current{ color:var(--ink); font-weight:700; max-width:28ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Topic Hub Bar on /guides */ .jr-topic-hubs-bar{ padding:.75rem 1rem; border-radius:.9rem; background:var(--surface); border:1px solid var(--line); } /* Sticky Mobile Article Maps CTA Bar (Clause 1.4) */ .jr-sticky-article-cta{ position:fixed; left:.75rem; right:.75rem; bottom:calc(4.15rem + env(safe-area-inset-bottom, 0px)); z-index:38; border-radius:1rem; background:rgba(15, 23, 42, .94); color:#f8fafc; border:1px solid rgba(167, 139, 250, .38); box-shadow:0 16px 36px -12px rgba(8, 12, 24, .65); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:.55rem .75rem; } .jr-sticky-article-cta[hidden]{ display:none !important; } @media (min-width: 1024px){ .jr-sticky-article-cta{ left:auto; right:1.5rem; bottom:1.5rem; width:24rem; } } .jr-sticky-article-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; } .jr-sticky-cta-kicker{ margin:0; font-size:.75rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#c4b5fd; } .jr-sticky-cta-title{ margin:.1rem 0 0; font-size:.82rem; font-weight:700; color:#ffffff; } .jr-sticky-cta-btn{ flex:0 0 auto; min-height:2.25rem !important; padding:.4rem .85rem !important; font-size:.78rem !important; font-weight:800 !important; border-radius:999px !important; white-space:nowrap; } /* Inline Lead Capture & Route/GPX Handoff Card (Clause 6.2) */ .jr-email-popup[hidden], .jr-lead-capture-card[hidden]{ display:none !important; } .jr-email-guide-btn.is-active, .jr-email-guide-btn[aria-expanded="true"]{ background:var(--violet-t); color:var(--violet-d); border-color:var(--violet); font-weight:700; } .jr-lead-capture-card{ border:1px solid rgba(106, 76, 255, .24); background:linear-gradient(135deg, var(--surface) 0%, var(--violet-t) 100%); } .jr-lead-capture-inner{ display:grid; gap:1rem; align-items:center; } @media (min-width: 768px){ .jr-lead-capture-inner{ grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:1.5rem; } } .jr-lead-capture-row{ display:flex; flex-wrap:wrap; gap:.5rem; } .jr-lead-email-input{ flex:1 1 13rem; min-height:2.6rem; } .jr-lead-submit-btn{ flex:0 0 auto; min-height:2.6rem !important; padding:.5rem 1rem !important; font-size:.84rem !important; } .jr-lead-status[data-type="error"]{ color:#dc2626; } .jr-lead-status[data-type="success"]{ color:#15803d; } :root[data-theme="dark"] .jr-lead-status[data-type="error"]{ color:#fca5a5; } :root[data-theme="dark"] .jr-lead-status[data-type="success"]{ color:#86efac; } /* Light-Mode Contrast Boost on Tinted Surfaces (Clause 5.2: > 5.4:1 contrast) */ :root:not([data-theme="dark"]) :is(.reco-panel, .jr-glance-facts, .jr-stop-dist-pill, .jr-lead-capture-card){ --muted:#475569; } /* Below-the-Fold Rendering Optimization (Clause 2.2) */ .jr-country-group:nth-of-type(n+2), .jr-route-area-group:nth-of-type(n+2), [data-related-guides-section], [data-related-routes-section]{ content-visibility:auto; contain-intrinsic-size:auto 520px; } /* Mobile Sub-Choice inside #navOpenedNote ("Install / Open App" vs "Continue in web version") */ .jr-nav-mobile-subchoice[hidden]{ display:none !important; } .jr-nav-mobile-subchoice{ margin-top:.65rem; padding:.7rem .8rem; border-radius:.8rem; border:1.5px solid color-mix(in srgb,var(--violet) 48%,var(--line)); background:color-mix(in srgb,var(--surface) 92%,var(--violet-t)); animation:jrTooltipPop .18s cubic-bezier(.2,.8,.2,1); } .jr-nav-mobile-subchoice-title{ margin:0 0 .5rem; font-size:.78rem; font-weight:700; line-height:1.35; color:var(--ink); } .jr-nav-mobile-subchoice-btns{ display:flex; flex-direction:column; gap:.42rem; } .jr-nav-choice-install, .jr-nav-choice-web{ width:100%; justify-content:center; min-height:2.55rem !important; } /* ========================================================================== Task 95 — Global Minimum 12px (0.75rem) Font Size & Proportional Hierarchy ========================================================================== */ /* Tier 2 (0.8125rem–0.85rem / 13px–13.6px): Secondary items, drawer routes, descriptions & subtitles above 0.75rem badges */ .jr-imm-drawer-route-title{ font-size:.82rem !important; } .jr-imm-overlay-pill{ font-size:.8125rem !important; } .jr-imm-route-meta{ font-size:.8rem !important; } .jr-imm-stop-card-desc{ font-size:.82rem !important; } .jr-imm-forecast-temp{ font-size:.82rem !important; } #routeStops .stop-why, #routeStops .stop-note, .stop-tooltip-summary{ font-size:.82rem !important; } .jr-nav-mobile-subchoice-title{ font-size:.84rem !important; } /* Tier 3 (0.88rem–0.98rem / 14.1px–15.7px): Primary inputs, buttons, stop titles, card titles & map HUD headers */ #immDest, #immOrigin{ font-size:.88rem !important; } #immGoBtn, #immLoopBtn{ font-size:.86rem !important; } .jr-imm-route-title{ font-size:.9rem !important; } .jr-imm-overlay-title{ font-size:.94rem !important; } .jr-imm-stop-card-title{ font-size:.96rem !important; } .jr-imm-nav-instruction{ font-size:.94rem !important; } #routeStops .stop-name, .stop-tooltip-title{ font-size:.94rem !important; } .route-customize-title{ font-size:.98rem !important; } .g-card.g-card-compact .g-card-title{ font-size:.94rem !important; } .jr-sticky-cta-title{ font-size:.88rem !important; } .jr-sticky-cta-btn{ font-size:.82rem !important; } /* Mobile planner & segmented controls: large functional menu chips (vibe & mode) with hidden filler labels */ @media (max-width:639px){ .chip-row.jr-segmented-control .chip span{ font-size:.84rem !important; padding:.34rem .18rem !important; gap:.18rem !important; letter-spacing:-.02em !important; } .chip-row.jr-segmented-control .chip span svg{ width:14px !important; height:14px !important; flex-shrink:0 !important; } [data-mode-chips].jr-segmented-control .chip span{ font-size:.92rem !important; padding:.34rem .36rem !important; gap:.28rem !important; letter-spacing:-.01em !important; } [data-mode-chips].jr-segmented-control .chip span svg{ width:16px !important; height:16px !important; flex-shrink:0 !important; } .jr-floating-input.field{ font-size:.92rem !important; } #planJourneyBtn.jr-capsule-cta{ font-size:.98rem !important; } #planJourneySection .panel h2{ font-size:1.05rem !important; } #guidesSection .g-grid-home > .g-card .g-card-meta{ padding-top:0 !important; margin-top:.12rem !important; min-height:0 !important; max-height:22px !important; } #guidesSection .g-grid-home > .g-card .jr-guide-like-btn{ min-height:20px !important; height:20px !important; padding:0 .38rem !important; } } /* ========================================================================== Task 96 — Mobile Bottom Tabbar Guarantee, Guide Cards Fit & Image Height ========================================================================== */ html:not(.is-immersive), body:not([data-view="product"]){ max-width:100vw; overflow-x:clip; } #pageView, #pageShell, #pageShell > article[data-page-content], #routesRecoPanel, .reco-panel, .reco-toolbar, .reco-filter-bar{ max-width:100%; min-width:0; box-sizing:border-box; } #pageView{ overflow-x:clip; } #dashBookmarksList, #dashCompletedList, #savedList, #historyList{ grid-template-columns:minmax(0,1fr); max-width:100%; min-width:0; } @media (min-width:640px){ #dashBookmarksList, #dashCompletedList{ grid-template-columns:repeat(2,minmax(0,1fr)); } } #dashBookmarksList > li, #dashCompletedList > li, #savedList > li, #historyList > li{ min-width:0 !important; max-width:100% !important; overflow:hidden; } @media (max-width:1023px){ html:not(.is-immersive) body:not([data-view="product"]) #tabbar.tabbar{ display:flex !important; width:100% !important; max-width:100vw !important; left:0 !important; right:0 !important; bottom:0 !important; box-sizing:border-box !important; } #tabbar.tabbar a, #tabbar.tabbar button{ padding:.2rem .15rem !important; min-width:0 !important; } } /* Topic hubs & author pages: prevent .g-card-media min-height:100% from pushing .g-card-body out of fixed card height */ article[data-page-content^="guides-"] .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact), article[data-page-content^="author-"] .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact){ height:auto !important; min-height:0 !important; max-height:none !important; } article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-media, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-media{ flex:0 0 auto !important; height:9.5rem !important; min-height:9.5rem !important; max-height:9.5rem !important; } article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-body, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-body{ flex:1 1 auto !important; height:auto !important; min-height:0 !important; } /* Mobile Guide Cards (< 768px): reduced image height + auto-height card body so author & likes chip fit cleanly */ @media (max-width:767px){ .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(n), #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact), article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact), article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact){ height:auto !important; min-height:0 !important; max-height:none !important; overflow:hidden !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-media, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(n) > .g-card-media, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-media, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-media, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-media{ flex:0 0 auto !important; height:7.5rem !important; min-height:7.5rem !important; max-height:7.5rem !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(3n+2):not(:last-child) > .g-card-media, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(3n+3) > .g-card-media, article[data-page-content^="guides-"] .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(3n+2):not(:last-child) > .g-card-media, article[data-page-content^="guides-"] .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(3n+3) > .g-card-media, article[data-page-content^="author-"] .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(3n+2):not(:last-child) > .g-card-media, article[data-page-content^="author-"] .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(3n+3) > .g-card-media{ flex:0 0 auto !important; height:6.25rem !important; min-height:6.25rem !important; max-height:6.25rem !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-body, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(n) > .g-card-body, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-body, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-body, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-body{ flex:1 1 auto !important; height:auto !important; min-height:0 !important; justify-content:flex-start !important; padding:.55rem .62rem .65rem !important; gap:.24rem !important; } .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(n) .g-card-meta, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta{ margin-top:auto !important; padding-top:.36rem !important; display:flex !important; align-items:center !important; justify-content:space-between !important; flex-wrap:nowrap !important; gap:.25rem !important; width:100% !important; min-width:0 !important; } .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta .g-card-meta-text, .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta > span:first-of-type, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta > span:first-of-type, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta > span:first-of-type, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta > span:first-of-type{ flex:1 1 0% !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } .jr-all-guides-list-col .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta .jr-guide-like-btn, #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta .jr-guide-like-btn, article[data-page-content^="guides-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta .jr-guide-like-btn, article[data-page-content^="author-"] .g-card.g-card-hero-overlay:not(.g-card-compact) .g-card-meta .jr-guide-like-btn{ min-height:22px !important; height:22px !important; padding:0 .42rem !important; gap:.2rem !important; font-size:.75rem !important; flex-shrink:0 !important; margin-left:auto !important; } } /* ========================================================================== Task 97 — Increase Font Size Across All Chips in Maps (/maps & Map Overlays) ========================================================================== */ /* 1. Top Quick-Explore Category Chips (Cafés, Parks, Photo spots, Guides, Routes) */ .jr-imm-quick-explore-pill{ font-size:.86rem !important; min-height:2.25rem !important; padding:.28rem .74rem !important; gap:.32rem !important; } /* 2. Bottom-Left Layers Chip & Joyride AI Return Chip */ .jr-imm-layers-btn, .jr-imm-back-app-chip{ font-size:.85rem !important; height:2.25rem !important; padding:0 .68rem !important; gap:.32rem !important; } #immBackToAppChip .jr-brand-inline-words{ font-size:.86rem !important; } /* 3. Floating "Search here" Chip & Location Permission Banner Chips */ .jr-imm-search-here-btn{ font-size:.85rem !important; padding:.38rem .88rem !important; } .jr-imm-loc-banner{ font-size:.84rem !important; padding:.38rem .5rem .38rem .78rem !important; } .jr-imm-loc-grant-btn{ font-size:.83rem !important; padding:.26rem .64rem !important; } /* 4. Planner Sheet (#immSheet): Origin Chip, Vibe Chips, Travel Mode Chips, Meta Row, Filter & Leave-At Chips */ .jr-imm-origin-chip{ font-size:.84rem !important; padding:.26rem .62rem !important; } .jr-imm-chips, .jr-imm-modes{ min-height:2.2rem !important; height:2.2rem !important; } .jr-imm-chip{ min-height:2.2rem !important; height:2.2rem !important; font-size:.84rem !important; padding:.18rem .22rem !important; gap:.18rem !important; letter-spacing:-.015em !important; } .jr-imm-mode{ min-height:2.2rem !important; height:2.2rem !important; font-size:.85rem !important; padding:.22rem .36rem !important; gap:.22rem !important; } .jr-imm-meta-btn, .jr-imm-weather-pill{ font-size:.84rem !important; min-height:2.2rem !important; padding:.3rem .52rem !important; } .jr-imm-meta-sub, .jr-imm-meta-badge{ font-size:.8rem !important; } .jr-imm-filter-pill{ font-size:.84rem !important; padding:.26rem .52rem !important; } .jr-imm-leave-label{ font-size:.83rem !important; } .jr-imm-leave-pill{ font-size:.84rem !important; padding:.22rem .52rem !important; } .jr-imm-go-btn, .jr-imm-loop-btn{ font-size:.88rem !important; min-height:2.3rem !important; } /* 5. Active Route Bar (#immRouteBar): Action Chips & Stop Pills */ .jr-imm-route-btn, .jr-imm-route-btn-nav, .jr-imm-route-btn-primary{ font-size:.85rem !important; min-height:2.25rem !important; padding:.28rem .68rem !important; } .jr-imm-stop-pill{ font-size:.84rem !important; min-height:2.15rem !important; padding:.28rem .58rem !important; } .jr-imm-stop-name{ font-size:.84rem !important; } .jr-imm-stop-num, .jr-imm-route-stats, .jr-wx-chip{ font-size:.82rem !important; } /* 6. In-Map Stop Card (#immStopCard) & Curated Overlay Card (#immOverlayCard) Chips */ .jr-imm-badge, .jr-imm-overlay-tag, .jr-imm-overlay-area, .jr-imm-overlay-sub, .jr-imm-stop-step-count{ font-size:.82rem !important; } .jr-imm-stop-act-btn, .jr-imm-overlay-pill{ font-size:.84rem !important; padding:.26rem .62rem !important; } /* 7. Maps Drawer (#immDrawer) & Layers Popover (#immLayersPopover) Chips */ .jr-imm-drawer .jr-imm-opt-btn, .jr-imm-layers-popover .jr-imm-opt-btn{ font-size:.84rem !important; min-height:2.15rem !important; padding:.28rem .62rem !important; } .jr-imm-drawer-label, .jr-imm-layers-heading{ font-size:.8125rem !important; } .jr-imm-drawer-layers-summary, .jr-imm-drawer-link{ font-size:.86rem !important; } .jr-imm-drawer-return-btn{ font-size:.88rem !important; } .jr-imm-drawer-route-title{ font-size:.85rem !important; } .jr-imm-drawer-route-meta{ font-size:.8rem !important; } /* 8. Live Turn-by-Turn Navigation HUD (#immNavHud) Chips */ .jr-imm-nav-expand-btn, .jr-imm-nav-end-btn, .jr-imm-nav-ctrl, .jr-imm-nav-step-item, .jr-imm-nav-meta, .jr-imm-nav-step-kicker{ font-size:.84rem !important; } /* 9. Interactive Map Chips on /guides & Custom Journey Map */ .jr-map-density-pill, .jr-map-search-area-pill, .jr-mobile-sheet-snap-btn, .jr-map-region-tab, .reco-map-region-pill, .reco-map-locate-btn, .reco-map-dock-cta, .reco-map-dock-maps-cta, .jr-route-FilterChip, .jr-stop-type-chip, .jr-stop-details-chip{ font-size:.83rem !important; } /* Mobile (< 640px) responsive fit so 4-column vibe chips and meta row chips stay on 1 row without overflow */ @media (max-width: 639px){ .jr-imm-quick-explore-pill{ font-size:.82rem !important; min-height:2.1rem !important; padding:.24rem .62rem !important; } .jr-imm-layers-btn, .jr-imm-back-app-chip{ font-size:.82rem !important; height:2.15rem !important; padding:0 .58rem !important; } #immBackToAppChip .jr-brand-inline-words{ font-size:.82rem !important; } .jr-imm-chips, .jr-imm-modes{ min-height:2.1rem !important; height:2.1rem !important; } .jr-imm-chip{ min-height:2.1rem !important; height:2.1rem !important; font-size:.8125rem !important; padding:.12rem .08rem !important; gap:.06rem !important; letter-spacing:-.04em !important; } .jr-imm-mode{ min-height:2.1rem !important; height:2.1rem !important; font-size:.83rem !important; padding:.18rem .28rem !important; } .jr-imm-meta-btn, .jr-imm-weather-pill{ font-size:.8125rem !important; min-height:2.1rem !important; padding:.24rem .42rem !important; } .jr-imm-filter-pill{ font-size:.82rem !important; padding:.24rem .52rem !important; } .jr-imm-leave-pill{ font-size:.82rem !important; padding:.2rem .48rem !important; } } /* ========================================================================== * Task 98: Interactive Place / Business Selection & Rich Place Details Card * ========================================================================== */ .jr-imm-place-details-meta{ display:grid; gap:.32rem; margin-top:.12rem; padding:.48rem .62rem; border-radius:.75rem; background:rgba(15,23,42,.045); border:1px solid rgba(15,23,42,.08); } [data-theme="dark"] .jr-imm-place-details-meta{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); } .jr-imm-place-meta-row{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; font-size:.8125rem; line-height:1.38; } .jr-imm-place-meta-label{ font-weight:700; color:var(--muted, #475569); white-space:nowrap; flex-shrink:0; } .jr-imm-place-meta-val{ color:var(--fg, #0f172a); font-weight:600; text-align:right; overflow:hidden; text-overflow:ellipsis; } .jr-imm-badge-closed{ background:rgba(239,68,68,.13) !important; color:#b91c1c !important; } [data-theme="dark"] .jr-imm-badge-closed{ background:rgba(239,68,68,.22) !important; color:#fca5a5 !important; } #immStopCard[data-active-place-id] .jr-imm-stop-card-actions{ display:flex; flex-wrap:wrap; gap:.4rem; } #immStopCard[data-active-place-id] [data-imm-place-route]{ flex:1 1 auto; justify-content:center; } /* ========================================================================== * Task 99: Street View Pegman Drag-and-Drop (#immStreetViewBtn & #immSvDragGhost) * ========================================================================== */ #immStreetViewBtn{ touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; } #immStreetViewBtn:active{ cursor:grabbing; } #immersiveView[data-imm-sv-drop="true"] #immMap{ cursor:crosshair !important; } .jr-imm-sv-drag-ghost{ position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%, -100%); display:flex; flex-direction:column; align-items:center; gap:2px; } .jr-imm-sv-drag-ghost[hidden]{ display:none !important; } .jr-imm-sv-ghost-figure{ display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:999px; background:linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); color:#ffffff; box-shadow:0 8px 20px -4px rgba(234,88,12,.55), 0 0 0 2.5px #ffffff; transform:rotate(-8deg); } .jr-imm-sv-ghost-dot{ width:12px; height:6px; border-radius:999px; background:rgba(37,99,235,.75); box-shadow:0 0 0 4px rgba(59,130,246,.32); } /* ========================================================================== * Task 101: 8 Google Maps Parity Features (Place Photos/Reviews/Save/Call, * Transit + Multi-Modal ETAs, Alt Routes, Elevation Badge, Voice Search, * Saved Places Chips, Right-Click Context Menu, Distance Measurement & My Location) * ========================================================================== */ .jr-imm-modes{ display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:.24rem !important; } .jr-imm-mode{ min-width:0 !important; overflow:hidden !important; white-space:nowrap !important; justify-content:center !important; } .jr-imm-mode-eta{ font-size:.75rem; font-weight:700; opacity:.86; margin-left:.12rem; } .jr-imm-mode-eta[hidden]{ display:none !important; } @media (max-width: 639px){ .jr-imm-modes{ gap:.14rem !important; } .jr-imm-mode{ font-size:.8125rem !important; padding:.14rem .12rem !important; gap:.12rem !important; letter-spacing:-.02em !important; } .jr-imm-mode svg{ width:13px !important; height:13px !important; flex-shrink:0 !important; } .jr-imm-mode-eta{ display:none !important; } } /* Voice Search Mic Button (#immVoiceSearchBtn) */ .jr-imm-voice-btn{ display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:999px; border:0; background:transparent; color:var(--muted, #64748b); cursor:pointer; flex-shrink:0; transition:background-color .15s ease, color .15s ease, transform .15s ease; } .jr-imm-voice-btn:hover, .jr-imm-voice-btn[aria-pressed="true"]{ background:color-mix(in srgb,var(--violet) 16%,transparent); color:var(--violet, #6a4cff); } /* Saved Places Quick Chips inside #immSuggest */ .jr-imm-suggest-saved-row{ padding:.38rem .55rem .28rem; border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent); list-style:none; } .jr-imm-saved-chips{ display:flex; align-items:center; gap:.32rem; overflow-x:auto; scrollbar-width:none; } .jr-imm-saved-chips::-webkit-scrollbar{ display:none; } .jr-imm-saved-chip{ display:inline-flex; align-items:center; gap:.22rem; padding:.22rem .56rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--line) 82%,transparent); background:color-mix(in srgb,var(--bg) 72%,var(--card)); color:var(--ink); font-size:.78rem; font-weight:600; white-space:nowrap; cursor:pointer; flex-shrink:0; } .jr-imm-saved-chip:hover{ border-color:var(--violet); color:var(--violet); } /* Place Photos Carousel & Top User Review inside #immStopCard */ .jr-imm-place-photos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.35rem; margin:.35rem 0 .25rem; } .jr-imm-place-photo{ width:100%; height:3.6rem; object-fit:cover; border-radius:.52rem; border:1px solid rgba(15,23,42,.08); background:var(--bg); } .jr-imm-place-review{ margin:.22rem 0 .28rem; padding:.36rem .55rem; border-radius:.58rem; background:color-mix(in srgb,var(--violet) 7%,var(--card)); border-left:2.5px solid var(--violet, #6a4cff); font-size:.78rem; line-height:1.35; color:var(--ink-2); display:flex; flex-direction:column; gap:.12rem; } .jr-imm-review-author{ font-style:normal; font-weight:700; font-size:.75rem; color:var(--muted); } /* Alternative Routes Switcher & Elevation Badge inside #immRouteBar */ .jr-imm-elev-badge{ display:inline-flex; align-items:center; padding:.08rem .42rem; border-radius:999px; background:color-mix(in srgb,var(--violet) 12%,var(--card)); color:var(--ink); font-size:.78rem; font-weight:600; } .jr-imm-alt-routes{ display:flex; align-items:center; gap:.38rem; margin-top:.34rem; overflow-x:auto; scrollbar-width:none; } .jr-imm-alt-pill{ display:inline-flex; align-items:center; gap:.34rem; padding:.22rem .58rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--line) 85%,transparent); background:color-mix(in srgb,var(--bg) 75%,var(--card)); color:var(--ink-2); font-size:.78rem; font-weight:600; white-space:nowrap; cursor:pointer; transition:all .15s ease; } .jr-imm-alt-pill.is-active, .jr-imm-alt-pill[aria-pressed="true"]{ border-color:var(--violet); background:color-mix(in srgb,var(--violet) 15%,var(--card)); color:var(--ink); font-weight:700; } .jr-imm-alt-meta{ opacity:.82; font-size:.75rem; } /* Right-Click / Long-Press Context Menu (#immContextMenu) & Distance Ruler (#immMeasureBar) */ .jr-imm-context-menu{ position:absolute; z-index:35; min-width:12.5rem; padding:.35rem; border-radius:.82rem; background:color-mix(in srgb,var(--card) 96%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid color-mix(in srgb,var(--line) 85%,transparent); box-shadow:0 14px 32px -8px rgba(15,23,42,.28); display:flex; flex-direction:column; gap:.12rem; } .jr-imm-context-menu[hidden], .jr-imm-measure-bar[hidden]{ display:none !important; } .jr-imm-ctx-head{ padding:.28rem .52rem; font-size:.75rem; font-weight:700; color:var(--muted); border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent); margin-bottom:.12rem; } .jr-imm-ctx-item{ width:100%; text-align:left; padding:.38rem .56rem; border-radius:.52rem; border:0; background:transparent; color:var(--ink); font-size:.82rem; font-weight:600; cursor:pointer; transition:background-color .12s ease; } .jr-imm-ctx-item:hover{ background:color-mix(in srgb,var(--violet) 14%,transparent); } .jr-imm-measure-bar{ position:absolute; bottom:4.4rem; left:50%; transform:translateX(-50%); z-index:28; width:min(92vw, 27rem); padding:.52rem .75rem; border-radius:.9rem; background:color-mix(in srgb,var(--card) 95%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid color-mix(in srgb,var(--line) 85%,transparent); box-shadow:0 12px 28px -8px rgba(15,23,42,.28); display:flex; flex-direction:column; gap:.28rem; } .jr-imm-measure-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; } .jr-imm-measure-title{ font-size:.82rem; font-weight:700; color:var(--ink); } .jr-imm-measure-dist{ font-size:.88rem; font-weight:800; color:var(--violet, #6a4cff); } .jr-imm-measure-actions{ display:inline-flex; align-items:center; gap:.28rem; } .jr-imm-measure-btn{ padding:.22rem .52rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--line) 85%,transparent); background:var(--bg); color:var(--ink); font-size:.76rem; font-weight:600; cursor:pointer; } .jr-imm-measure-hint{ margin:0; font-size:.82rem; color:var(--muted); } /* ========================================================================== * Task 102: Vision-Friendly & Minimalist Typography Scale (Especially Mobile) * Comfortable, high-legibility font sizes across Maps, Planner, Cards & Mobile Chrome * ========================================================================== */ /* 1. Joyride AI Maps (/maps): Search Inputs, Primary CTAs & Quick-Explore Chips */ #immDest, #immOrigin{ font-size:1rem !important; line-height:1.35 !important; } #immGoBtn, #immLoopBtn, .jr-imm-go-btn, .jr-imm-loop-btn{ font-size:.95rem !important; min-height:2.4rem !important; } .jr-imm-quick-explore-pill{ font-size:.9rem !important; min-height:2.3rem !important; padding:.3rem .78rem !important; gap:.34rem !important; } .jr-imm-layers-btn, .jr-imm-back-app-chip{ font-size:.88rem !important; height:2.32rem !important; padding:0 .72rem !important; } #immBackToAppChip .jr-brand-inline-words{ font-size:.88rem !important; } .jr-imm-search-here-btn, .jr-imm-loc-banner, .jr-imm-loc-grant-btn, .jr-imm-origin-chip{ font-size:.88rem !important; } /* 2. Maps Planner Sheet (#immSheet): Vibe Chips, Travel Modes, Meta Row & Filters */ .jr-imm-chips, .jr-imm-modes{ min-height:2.32rem !important; height:2.32rem !important; } .jr-imm-chip{ min-height:2.32rem !important; height:2.32rem !important; font-size:.88rem !important; } .jr-imm-mode{ min-height:2.32rem !important; height:2.32rem !important; font-size:.88rem !important; } .jr-imm-meta-btn, .jr-imm-weather-pill, .jr-imm-filter-pill, .jr-imm-leave-pill, .jr-imm-leave-label{ font-size:.88rem !important; min-height:2.25rem !important; } .jr-imm-meta-sub, .jr-imm-meta-badge, .jr-imm-forecast-temp{ font-size:.84rem !important; } /* 3. Maps Route Bar (#immRouteBar), Stop/Place Card (#immStopCard), Overlay Card & Live Nav HUD */ .jr-imm-route-title{ font-size:1.02rem !important; } .jr-imm-route-stats, .jr-imm-stop-num, .jr-wx-chip, .jr-imm-elev-badge{ font-size:.86rem !important; } .jr-imm-route-btn, .jr-imm-route-btn-nav, .jr-imm-route-btn-primary{ font-size:.9rem !important; min-height:2.32rem !important; } .jr-imm-stop-pill, .jr-imm-stop-name, .jr-imm-alt-pill{ font-size:.88rem !important; min-height:2.22rem !important; } .jr-imm-alt-meta{ font-size:.82rem !important; } .jr-imm-stop-card-title, .jr-imm-overlay-title{ font-size:1.05rem !important; line-height:1.3 !important; } .jr-imm-stop-card-note, .jr-imm-stop-card-desc, .jr-imm-overlay-desc, .jr-imm-place-review, .jr-imm-place-meta-row{ font-size:.88rem !important; line-height:1.45 !important; } .jr-imm-badge, .jr-imm-overlay-tag, .jr-imm-overlay-area, .jr-imm-overlay-sub, .jr-imm-stop-step-count, .jr-imm-review-author{ font-size:.84rem !important; } .jr-imm-stop-act-btn, .jr-imm-overlay-pill, .jr-imm-overlay-cta{ font-size:.88rem !important; min-height:2.22rem !important; padding:.28rem .66rem !important; } .jr-imm-nav-instruction{ font-size:1.04rem !important; } .jr-imm-nav-expand-btn, .jr-imm-nav-end-btn, .jr-imm-nav-ctrl, .jr-imm-nav-step-item, .jr-imm-nav-meta, .jr-imm-nav-step-kicker{ font-size:.88rem !important; } /* 4. Maps Autocomplete, Saved Chips, Drawer (#immDrawer), Context Menu & Measure Bar */ .jr-imm-suggest-item{ font-size:.94rem !important; min-height:2.55rem !important; } .jr-imm-saved-chip{ font-size:.86rem !important; padding:.28rem .64rem !important; } .jr-imm-suggest-head{ font-size:.82rem !important; } .jr-imm-drawer-brand{ font-size:1.02rem !important; } .jr-imm-drawer-layers-summary, .jr-imm-drawer-link, .jr-imm-drawer-return-btn{ font-size:.94rem !important; } .jr-imm-drawer .jr-imm-opt-btn, .jr-imm-layers-popover .jr-imm-opt-btn{ font-size:.88rem !important; min-height:2.22rem !important; } .jr-imm-drawer-label, .jr-imm-layers-heading{ font-size:.84rem !important; } .jr-imm-ctx-head{ font-size:.82rem !important; } .jr-imm-ctx-item{ font-size:.9rem !important; padding:.44rem .62rem !important; } .jr-imm-measure-title{ font-size:.9rem !important; } .jr-imm-measure-dist{ font-size:.96rem !important; } .jr-imm-measure-btn{ font-size:.84rem !important; } /* 5. Route Preview Modal, Stop Cards & Reading Typography */ .route-customize-title{ font-size:1.08rem !important; } #routeStops .stop-name, .stop-tooltip-title{ font-size:1rem !important; } #routeStops .stop-why, #routeStops .stop-note, .stop-tooltip-summary{ font-size:.88rem !important; line-height:1.45 !important; } #routeStops .stop-badge, #routeStops .stop-badges .stop-details-btn, #routeStops .stop-customize-group .stop-act-btn{ font-size:.84rem !important; } #addStopSearchInput{ font-size:.95rem !important; } #addStopBtn{ font-size:.88rem !important; } .faq details summary{ font-size:1.04rem !important; } .faq details p{ font-size:.96rem !important; line-height:1.6 !important; } /* 6. Mobile (< 1024px & < 640px) Low-Vision Readability & Single-Row Fit */ @media (max-width: 1023px){ #tabbar.tabbar a, #tabbar.tabbar button{ font-size:.82rem !important; gap:.14rem !important; } #tabbar.tabbar svg{ width:1.28rem !important; height:1.28rem !important; } #cookieBanner p{ font-size:.85rem !important; line-height:1.42 !important; } #cookieBanner .btn, #cookieCustomise{ font-size:.86rem !important; } } @media (max-width: 639px){ .jr-imm-quick-explore-pill{ font-size:.88rem !important; min-height:2.22rem !important; padding:.28rem .7rem !important; } .jr-imm-layers-btn, .jr-imm-back-app-chip, #immBackToAppChip .jr-brand-inline-words{ font-size:.86rem !important; height:2.22rem !important; } .jr-imm-chips, .jr-imm-modes{ min-height:2.22rem !important; height:2.22rem !important; } .jr-imm-chip{ min-height:2.22rem !important; height:2.22rem !important; font-size:.85rem !important; padding:.12rem .06rem !important; gap:.06rem !important; letter-spacing:-.035em !important; } .jr-imm-chip svg{ width:12px !important; height:12px !important; flex-shrink:0 !important; } .jr-imm-mode{ min-height:2.22rem !important; height:2.22rem !important; font-size:.85rem !important; padding:.14rem .12rem !important; gap:.12rem !important; } .jr-imm-meta-btn, .jr-imm-weather-pill, .jr-imm-filter-pill, .jr-imm-leave-pill{ font-size:.86rem !important; min-height:2.18rem !important; } #drawer > .dlink{ font-size:.95rem !important; padding:.44rem .6rem !important; } #drawer > div:last-child .dlink{ font-size:.85rem !important; } #routeTitle{ font-size:1.14rem !important; } #routeSubtitle{ font-size:.86rem !important; } #routeStats, #routeWeather, #routeWeather .wx-alert, #routeWeather .wx-note, #routeWeather .wx-more summary, #routeWeather .wx-more-pill{ font-size:.83rem !important; } #startNavigationBtn{ font-size:.96rem !important; } .prose-j{ font-size:1.02rem !important; line-height:1.65 !important; } } /* ============================================================ Task 104 & 105: Google Maps-Grade Smoothness, Auto-Clearance & Stop Options Selector ============================================================ */ #immMap{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; } #immLayersWrap, .jr-imm-right-controls{ transition:bottom 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1); } #immContextMenu{ z-index:46 !important; } /* Automatically lift bottom-left Layers chip & bottom-right map controls above #immRouteBar / #immOverlayCard so they never overlap */ #immersiveView[data-imm-route-loaded="true"] #immLayersWrap, #immersiveView:has(#immOverlayCard:not([hidden])) #immLayersWrap{ bottom:calc(env(safe-area-inset-bottom, 0px) + 9.4rem); } #immersiveView[data-imm-route-loaded="true"] .jr-imm-right-controls, #immersiveView:has(#immOverlayCard:not([hidden])) .jr-imm-right-controls{ bottom:calc(env(safe-area-inset-bottom, 0px) + 9.4rem); } /* Position #immStopCard cleanly above #immRouteBar when a route is loaded so both are visible and clickable with zero overlap */ #immersiveView[data-imm-route-loaded="true"] #immStopCard{ bottom:calc(env(safe-area-inset-bottom, 0px) + 9.8rem); max-height:min(42vh, 16rem); overflow-y:auto; overscroll-behavior:contain; } @media (max-width: 639px){ #immersiveView[data-imm-route-loaded="true"] #immStopCard{ bottom:calc(env(safe-area-inset-bottom, 0px) + 10.6rem); max-height:min(38vh, 14.5rem); } } /* Stop Options Selector strip inside #immStopCard ([data-imm-stop-options]) */ .jr-imm-stop-options{ margin-top:.45rem; padding:.38rem .5rem; border-radius:.72rem; background:color-mix(in srgb,var(--bg) 76%,var(--card)); border:1px solid color-mix(in srgb,var(--violet) 32%,var(--line)); } .jr-imm-stop-options-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.26rem; } .jr-imm-stop-options-label{ font-size:.76rem; font-weight:700; color:var(--ink-2); } .jr-imm-stop-options-pills{ display:flex; align-items:center; gap:.3rem; overflow-x:auto; scrollbar-width:none; padding-bottom:.08rem; } .jr-imm-stop-options-pills::-webkit-scrollbar{ display:none; } .jr-imm-stop-opt-pill{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.22rem; max-width:12.5rem; padding:.22rem .58rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--line) 85%,transparent); background:var(--card); color:var(--ink-2); font-size:.76rem; font-weight:600; white-space:nowrap; cursor:pointer; transition:border-color .15s ease, background-color .15s ease, color .15s ease; } .jr-imm-stop-opt-pill:hover{ border-color:var(--violet); color:var(--ink); } .jr-imm-stop-opt-pill.is-active, .jr-imm-stop-opt-pill[aria-pressed="true"]{ background:linear-gradient(135deg,#6a4cff 0%,#7d62ff 100%); border-color:transparent; color:#ffffff; box-shadow:0 2px 8px rgba(106,76,255,.28); } #immSheet:not([hidden]), #immSuggest:not([hidden]){ animation:jrImmSheetIn 160ms cubic-bezier(0.22, 1, 0.36, 1); } #immRouteBar:not([hidden]), #immStopCard:not([hidden]), #immOverlayCard:not([hidden]){ animation:jrImmCenteredCardIn 160ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes jrImmSheetIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } } @keyframes jrImmCenteredCardIn{ from{ opacity:0; transform:translate(-50%, 6px); } to{ opacity:1; transform:translate(-50%, 0); } } @media (max-width: 639px){ #immRouteBar:not([hidden]){ animation:jrImmSheetIn 160ms cubic-bezier(0.22, 1, 0.36, 1); } } /* ========================================================================== * Task 121: Fix Inner Purple Border & Corner Radius Clipping Inside #immSheet on /maps * ========================================================================== */ .jr-imm-sheet.jr-imm-top-options{ grid-template-columns:minmax(0, 1fr) !important; min-width:0 !important; } .jr-imm-sheet.jr-imm-top-options > *{ min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; } .jr-imm-origin-row{ min-width:0 !important; max-width:100% !important; border-radius:.75rem !important; box-sizing:border-box !important; } #immOrigin{ flex:1 1 0% !important; width:0 !important; min-width:0 !important; } .jr-imm-origin-chip{ flex:0 0 auto !important; border-radius:.55rem !important; } .jr-imm-swap-btn{ flex:0 0 auto !important; border-radius:.55rem !important; } .jr-imm-chips, .jr-imm-modes{ display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:.28rem !important; width:100% !important; min-width:0 !important; max-width:100% !important; height:auto !important; min-height:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; overflow:visible !important; } .jr-imm-chip, .jr-imm-mode{ min-width:0 !important; max-width:100% !important; min-height:2.28rem !important; height:auto !important; padding:.22rem .14rem !important; gap:.14rem !important; font-size:.825rem !important; letter-spacing:-.02em !important; border-radius:.62rem !important; border:1.5px solid color-mix(in srgb,var(--line) 88%,transparent) !important; background:var(--card) !important; box-sizing:border-box !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } .jr-imm-chip[aria-pressed="true"]{ background:linear-gradient(135deg,#6a4cff 0%,#7d62ff 55%,#9580ff 100%) !important; color:#ffffff !important; border-color:#6a4cff !important; box-shadow:0 2px 8px rgba(106,76,255,.28) !important; } .jr-imm-mode[aria-pressed="true"]{ background:var(--violet-t) !important; color:var(--violet-d) !important; border:1.5px solid #6a4cff !important; box-shadow:0 2px 8px rgba(106,76,255,.22) !important; } :root[data-theme="dark"] .jr-imm-mode[aria-pressed="true"]{ background:rgba(124,93,250,.28) !important; color:#ffffff !important; border-color:#a78bfa !important; } .jr-imm-meta-row{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:.28rem !important; width:100% !important; min-width:0 !important; max-width:100% !important; overflow:visible !important; } .jr-imm-meta-btn, .jr-imm-weather-pill{ min-width:0 !important; max-width:100% !important; border-radius:.62rem !important; box-sizing:border-box !important; } .jr-imm-actions{ grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr) !important; gap:.42rem !important; width:100% !important; min-width:0 !important; max-width:100% !important; } .jr-imm-go, .jr-imm-loop{ min-width:0 !important; max-width:100% !important; border-radius:.78rem !important; padding:0 .65rem !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; box-sizing:border-box !important; } @media (max-width: 639px){ .jr-imm-chips, .jr-imm-modes{ gap:.22rem !important; height:auto !important; min-height:0 !important; } .jr-imm-chip, .jr-imm-mode{ min-height:2.18rem !important; height:auto !important; font-size:.8125rem !important; padding:.16rem .1rem !important; gap:.1rem !important; letter-spacing:-.025em !important; border-radius:.58rem !important; } .jr-imm-origin-chip{ padding:.22rem .48rem !important; font-size:.8125rem !important; } .jr-imm-swap-btn{ padding:.22rem .42rem !important; } .jr-imm-meta-row{ gap:.22rem !important; } .jr-imm-meta-btn, .jr-imm-weather-pill{ padding:.22rem .32rem !important; font-size:.8125rem !important; } } /* Guide & Route FAQ Accordion (.jr-guide-faq) + Sticky Maps Conversion Bar (.jr-sticky-maps-bar) */ .jr-guide-faq-item{ border:1px solid color-mix(in srgb,var(--line) 88%,transparent); border-radius:.85rem; background:color-mix(in srgb,var(--surface) 75%,var(--card)); padding:.75rem 1rem; transition:border-color .16s ease, background-color .16s ease; } .jr-guide-faq-item[open]{ border-color:color-mix(in srgb,var(--violet) 38%,var(--line)); background:var(--card); } .jr-guide-faq-q{ font-size:.95rem; font-weight:700; color:var(--ink); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:.75rem; } .jr-guide-faq-q::-webkit-details-marker{ display:none; } .jr-guide-faq-q::after{ content:"+"; font-weight:800; color:var(--violet); flex-shrink:0; } .jr-guide-faq-item[open] .jr-guide-faq-q::after{ content:"−"; } .jr-guide-faq-a{ margin:.55rem 0 0; font-size:.875rem; line-height:1.58; color:var(--ink-2); } .jr-sticky-maps-bar{ position:sticky; bottom:1rem; z-index:45; margin-top:1.75rem; padding:.75rem 1rem; border-radius:1rem; background:color-mix(in srgb,var(--card) 94%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid color-mix(in srgb,var(--violet) 42%,var(--line)); box-shadow:0 14px 32px -12px rgba(15,23,42,.28); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; } #cookieBanner:not([hidden]){ bottom:5.5rem !important; } @media (max-width: 767px){ #cookieBanner:not([hidden]){ bottom:calc(env(safe-area-inset-bottom, 0px) + 8.2rem) !important; } } .jr-sticky-maps-copy{ display:flex; flex-direction:column; gap:.12rem; flex:1 1 220px; } .jr-sticky-maps-kicker{ display:inline-flex; align-items:center; gap:.32rem; font-size:.75rem; font-weight:700; color:var(--violet); } .jr-sticky-maps-title{ font-size:.9rem; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jr-sticky-maps-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; } .jr-sticky-maps-bar > .jr-email-popup{ flex:1 1 100%; width:100%; margin:0 0 .35rem 0 !important; } .jr-sticky-maps-bar > .jr-email-popup[hidden]{ display:none !important; } .jr-sticky-maps-btn, .jr-sticky-plan-btn, .jr-sticky-gpx-btn{ min-height:2.25rem !important; padding:.38rem .85rem !important; font-size:.8125rem !important; font-weight:700 !important; border-radius:999px !important; } .jr-sticky-maps-btn{ background:var(--violet) !important; color:#ffffff !important; border-color:var(--violet) !important; display:inline-flex !important; align-items:center !important; gap:.38rem !important; white-space:nowrap !important; } .jr-sticky-maps-btn .jr-maps-always-label{ display:inline !important; } @media (max-width: 767px){ .jr-sticky-maps-bar{ bottom:calc(env(safe-area-inset-bottom, 0px) + 4.4rem); padding:.55rem .65rem; gap:.4rem; } .jr-sticky-maps-copy{ display:none; } .jr-sticky-maps-actions{ width:100%; justify-content:space-around; flex-wrap:nowrap; gap:.35rem; } .jr-sticky-maps-bar .jr-btn-label{ display:none !important; } .jr-sticky-maps-actions > .btn{ flex:1 1 0; justify-content:center; min-height:2.35rem !important; padding:.4rem .5rem !important; } .jr-sticky-maps-actions > .jr-sticky-maps-btn{ flex:1.35 1 auto; padding:.4rem .85rem !important; } } #stickyArticleMapsCta{ display:none !important; } .jr-home-dir-bar{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; align-items:start; } @media (max-width:639px){ .jr-home-dir-bar{ grid-template-columns:minmax(0,1fr); } } .jr-dir-details{ border:1px solid color-mix(in srgb,var(--line) 80%,transparent); border-radius:.68rem; background:color-mix(in srgb,var(--card) 75%,transparent); overflow:hidden; } .jr-dir-summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.48rem .78rem; font-size:.8125rem; font-weight:500; color:var(--ink-2); cursor:pointer; user-select:none; } .jr-dir-summary::-webkit-details-marker{ display:none; } .jr-dir-summary:hover{ color:var(--violet); } .jr-dir-caret{ font-size:.75rem; color:var(--muted); transition:transform .18s ease; } .jr-dir-details[open] .jr-dir-caret{ transform:rotate(180deg); } .jr-dir-grid{ margin:0; padding:.35rem .78rem .65rem; border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent); list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.28rem .85rem; max-height:14rem; overflow-y:auto; } .jr-dir-link{ display:block; font-size:.78rem; line-height:1.38; color:var(--ink-2); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jr-dir-link:hover{ color:var(--violet); text-decoration:underline; } /* ========================================================================== Task 129 — Clean "Recommended for you" Cards & Panels Remove cramped/semi-invisible subtitle/subcontent (.g-card-compact-sum, .g-card-why, .reco-subtitle) and fix card media/body proportions across #recoPanel, #routesRecoPanel, #guidesSection, [data-related-guides-section], [data-related-routes-section], and #guideList ========================================================================== */ .g-card-compact-sum, .g-card.g-card-compact .g-card-why, .reco-subtitle{ display:none !important; } .g-card.g-card-compact .g-card-body, .jr-related-guides .g-card.g-card-compact .g-card-body, .jr-related-routes .g-card.g-card-compact .g-card-body, #routesRecoPanel .g-card.g-card-compact .g-card-body{ display:flex !important; flex-direction:column !important; justify-content:space-between !important; gap:.35rem !important; padding:.72rem .9rem !important; } .g-card.g-card-compact .g-card-title, .jr-related-compact-grid > .g-card.g-card-compact:nth-child(n) .g-card-title{ margin:0 !important; font-size:.94rem !important; line-height:1.3 !important; -webkit-line-clamp:3 !important; } .g-card.g-card-compact .g-card-meta{ margin-top:auto !important; padding-top:.32rem !important; } /* Fix #recoPanel & #guideList cards on Desktop/Tablet so .g-card-media never pushes .g-card-body out of the card */ #recoPanel .reco-grid.reco-carousel-track > .g-card.g-card-hero-overlay:not(.g-card-compact), #recoPanel .reco-grid.reco-carousel-track > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(n), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact), .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(n){ height:auto !important; min-height:0 !important; max-height:none !important; } #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-media, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(n) > .g-card-media{ flex:0 0 auto !important; height:9.5rem !important; min-height:9.5rem !important; max-height:9.5rem !important; } @media (max-width:767px){ #recoPanel .g-card.g-card-hero-overlay:not(.g-card-compact) > .g-card-media, .jr-all-guides-list-col .g-grid.g-magazine-spread > .g-card.g-card-hero-overlay:not(.g-card-compact):nth-child(n) > .g-card-media{ height:7.5rem !important; min-height:7.5rem !important; max-height:7.5rem !important; } } /* Ensure #guidesSection carousel cards always stack their body vertically (never 2-column grid from .g-magazine-spread) */ #guidesSection .reco-grid.reco-carousel-track > .g-card:nth-child(n) .g-card-body{ display:flex !important; flex-direction:column !important; align-items:stretch !important; grid-template-columns:none !important; } /* ========================================================================== Task 132 — Live Social Proof Badges, 1-Tap Reaction Bar, Offline Walk Pinning & Send-to-Phone QR Modal ========================================================================== */ .jr-live-walkers-pill{ display:inline-flex; align-items:center; gap:.32rem; padding:.16rem .52rem; border-radius:999px; font-size:.73rem; font-weight:500; line-height:1.2; color:var(--ink-2); background:color-mix(in srgb,var(--violet) 9%,var(--card)); border:1px solid color-mix(in srgb,var(--violet) 22%,var(--line)); white-space:nowrap; } .jr-live-walkers-dot{ width:6px; height:6px; border-radius:999px; background:#10b981; box-shadow:0 0 0 2px rgba(16,185,129,.22); flex-shrink:0; } .jr-offline-walk-btn[aria-pressed="true"]{ background:color-mix(in srgb,#10b981 14%,var(--card)); border-color:color-mix(in srgb,#10b981 42%,var(--line)); color:#059669; } :root[data-theme="dark"] .jr-offline-walk-btn[aria-pressed="true"]{ color:#34d399; } .jr-reaction-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.65rem; margin:1.25rem 0 .85rem; padding:.75rem 1rem; border-radius:.85rem; background:color-mix(in srgb,var(--card) 94%,var(--bg)); border:1px solid var(--line); } .jr-reaction-label{ font-size:.82rem; font-weight:500; color:var(--ink-2); } .jr-reaction-pills{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; } .jr-react-pill{ display:inline-flex; align-items:center; gap:.34rem; padding:.32rem .68rem; border-radius:999px; font-size:.78rem; font-weight:500; color:var(--ink); background:var(--bg); border:1px solid var(--line); cursor:pointer; transition:transform .14s ease, border-color .14s ease, background .14s ease; } .jr-react-pill:hover{ border-color:var(--violet); transform:translateY(-1px); } .jr-react-pill.is-active, .jr-react-pill[aria-pressed="true"]{ background:color-mix(in srgb,var(--violet) 14%,var(--card)); border-color:var(--violet); color:var(--violet); } .jr-react-count{ font-variant-numeric:tabular-nums; font-size:.74rem; opacity:.86; } .jr-qr-modal{ position:fixed; inset:0; z-index:2600; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(15,23,42,.62); backdrop-filter:blur(4px); } .jr-qr-modal[hidden]{ display:none !important; } .jr-qr-panel{ width:100%; max-width:22.5rem; padding:1.25rem; border-radius:1.1rem; background:var(--card); border:1px solid var(--line); box-shadow:0 22px 48px rgba(15,23,42,.32); text-align:center; } .jr-qr-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; text-align:left; } .jr-qr-kicker{ margin:0; font-size:.74rem; font-weight:600; color:var(--violet); } .jr-qr-title{ margin:.15rem 0 0; font-size:1rem; font-weight:600; color:var(--ink); } .jr-qr-close{ padding:.28rem .5rem; border-radius:.5rem; border:1px solid var(--line); background:transparent; color:var(--ink-2); cursor:pointer; } .jr-qr-sub{ margin:.65rem 0 .85rem; font-size:.82rem; color:var(--ink-2); text-align:left; } .jr-qr-box{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:216px; height:216px; padding:8px; border-radius:.85rem; background:#ffffff; border:1px solid var(--line); margin:0 auto .95rem; } .jr-qr-svg{ width:200px; height:200px; display:block; } .jr-qr-img{ position:absolute; inset:8px; width:200px; height:200px; border-radius:.45rem; background:#ffffff; } .jr-qr-actions{ display:flex; justify-content:center; } .jr-qr-copy-btn{ width:100%; justify-content:center; }