/* Generated by scripts/build-site-css.mjs. Do not edit this bundle directly. */
/* ===== static/css/main.css ===== */
*,: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.19 | 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:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;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}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}select:where([multiple]),select:where([size]:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}input:where([type=checkbox]),input:where([type=radio]){-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}input:where([type=checkbox]):checked,input:where([type=radio]):checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}input:where([type=checkbox]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=checkbox]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=radio]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=radio]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):checked:focus,input:where([type=checkbox]):checked:hover,input:where([type=radio]):checked:focus,input:where([type=radio]):checked:hover{border-color:transparent;background-color:currentColor}input:where([type=checkbox]):indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}@media (forced-colors:active) {input:where([type=checkbox]):indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):indeterminate:focus,input:where([type=checkbox]):indeterminate:hover{border-color:transparent;background-color:currentColor}input:where([type=file]){background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}input:where([type=file]):focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}[dir=rtl]{font-family:Noto Sans Arabic,Inter,sans-serif}[dir=rtl] .font-headline{font-family:Noto Sans Arabic,"Noto Serif",serif}[dir=rtl] .font-label{font-family:Noto Sans Arabic,Plus Jakarta Sans,sans-serif}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-3{left:.75rem;right:.75rem}.-bottom-10{bottom:-2.5rem}.-left-\[2\.65rem\]{left:-2.65rem}.-right-10{right:-2.5rem}.bottom-0{bottom:0}.bottom-10{bottom:2.5rem}.bottom-3{bottom:.75rem}.end-0{inset-inline-end:0}.end-10{inset-inline-end:2.5rem}.left-0{left:0}.left-4{left:1rem}.right-0{right:0}.right-3{right:.75rem}.right-4{right:1rem}.start-10{inset-inline-start:2.5rem}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-10{top:2.5rem}.top-3{top:.75rem}.top-32{top:8rem}.top-4{top:1rem}.top-full{top:100%}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[110\]{z-index:110}.z-\[1\]{z-index:1}.z-\[90\]{z-index:90}.-m-1{margin:-.25rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-12{margin-top:3rem;margin-bottom:3rem}.-ml-1{margin-left:-.25rem}.-mt-4{margin-top:-1rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{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-11{margin-left:2.75rem}.ml-2{margin-left:.5rem}.mr-1{margin-right:.25rem}.mr-1\.5{margin-right:.375rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-2,.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-3{-webkit-line-clamp:3}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[4\/5\]{aspect-ratio:4/5}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.h-0\.5{height:.125rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.max-h-\[360px\]{max-height:360px}.max-h-\[75vh\]{max-height:75vh}.max-h-\[85vh\]{max-height:85vh}.min-h-\[400px\]{min-height:400px}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[160px\]{min-width:160px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-\[90vw\]{max-width:90vw}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-prose{max-width:65ch}.max-w-screen-2xl{max-width:1536px}.max-w-screen-xl{max-width:1280px}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.translate-y-full{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))}.translate-y-full{--tw-translate-y:100%}.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}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.scroll-mt-24{scroll-margin-top:6rem}.list-none{list-style-type:none}.columns-1{-moz-columns:1;column-count:1}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.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-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.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-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem*var(--tw-space-y-reverse))}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem*var(--tw-space-y-reverse))}.space-y-16>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(4rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(4rem*var(--tw-space-y-reverse))}.space-y-24>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(6rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(6rem*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))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[2rem\]{border-radius:2rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-r-xl{border-top-right-radius:.75rem;border-bottom-right-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-2{border-left-width:2px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-dashed{border-style:dashed}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-amber-200\/40{border-color:hsla(48,97%,77%,.4)}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-green-200\/60{border-color:rgba(187,247,208,.6)}.border-on-surface\/10{border-color:rgba(28,27,27,.1)}.border-outline-variant\/10{border-color:hsla(142,9%,77%,.1)}.border-outline-variant\/20{border-color:hsla(142,9%,77%,.2)}.border-outline-variant\/30{border-color:hsla(142,9%,77%,.3)}.border-outline-variant\/40{border-color:hsla(142,9%,77%,.4)}.border-outline-variant\/60{border-color:hsla(142,9%,77%,.6)}.border-primary{--tw-border-opacity:1;border-color:rgb(0 75 56/var(--tw-border-opacity,1))}.border-primary\/15{border-color:rgba(0,75,56,.15)}.border-primary\/20{border-color:rgba(0,75,56,.2)}.border-primary\/30{border-color:rgba(0,75,56,.3)}.border-primary\/40{border-color:rgba(0,75,56,.4)}.border-red-200\/60{border-color:hsla(0,96%,89%,.6)}.border-surface{--tw-border-opacity:1;border-color:rgb(252 249 248/var(--tw-border-opacity,1))}.border-surface-container-highest{--tw-border-opacity:1;border-color:rgb(229 226 225/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-l-outline-variant{--tw-border-opacity:1;border-left-color:rgb(190 201 194/var(--tw-border-opacity,1))}.border-l-outline-variant\/20{border-left-color:hsla(142,9%,77%,.2)}.border-l-primary{--tw-border-opacity:1;border-left-color:rgb(0 75 56/var(--tw-border-opacity,1))}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-amber-50\/60{background-color:rgba(255,251,235,.6)}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-black\/90{background-color:rgba(0,0,0,.9)}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-green-50\/70{background-color:rgba(240,253,244,.7)}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-highlight\/30{background-color:rgba(249,196,228,.3)}.bg-outline-variant\/20{background-color:hsla(142,9%,77%,.2)}.bg-primary{--tw-bg-opacity:1;background-color:rgb(0 75 56/var(--tw-bg-opacity,1))}.bg-primary\/10{background-color:rgba(0,75,56,.1)}.bg-primary\/5{background-color:rgba(0,75,56,.05)}.bg-primary\/60{background-color:rgba(0,75,56,.6)}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-50\/60{background-color:hsla(0,86%,97%,.6)}.bg-red-50\/70{background-color:hsla(0,86%,97%,.7)}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-secondary\/10{background-color:rgba(157,66,40,.1)}.bg-surface{--tw-bg-opacity:1;background-color:rgb(252 249 248/var(--tw-bg-opacity,1))}.bg-surface-container{--tw-bg-opacity:1;background-color:rgb(240 237 237/var(--tw-bg-opacity,1))}.bg-surface-container-high{--tw-bg-opacity:1;background-color:rgb(234 231 231/var(--tw-bg-opacity,1))}.bg-surface-container-highest{--tw-bg-opacity:1;background-color:rgb(229 226 225/var(--tw-bg-opacity,1))}.bg-surface-container-highest\/50{background-color:hsla(15,7%,89%,.5)}.bg-surface-container-highest\/60{background-color:hsla(15,7%,89%,.6)}.bg-surface-container-highest\/70{background-color:hsla(15,7%,89%,.7)}.bg-surface-container-low{--tw-bg-opacity:1;background-color:rgb(246 243 242/var(--tw-bg-opacity,1))}.bg-surface-container\/80{background-color:hsla(0,9%,94%,.8)}.bg-surface-variant\/40{background-color:hsla(15,7%,89%,.4)}.bg-surface\/80{background-color:hsla(15,40%,98%,.8)}.bg-transparent{background-color:transparent}.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\/70{background-color:hsla(0,0%,100%,.7)}.bg-white\/80{background-color:hsla(0,0%,100%,.8)}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.bg-white\/95{background-color:hsla(0,0%,100%,.95)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-on-background\/80{--tw-gradient-from:rgba(28,27,27,.8) var(--tw-gradient-from-position);--tw-gradient-to:rgba(28,27,27,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-primary\/10{--tw-gradient-from:rgba(0,75,56,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,75,56,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-surface\/90{--tw-gradient-from:hsla(15,40%,98%,.9) var(--tw-gradient-from-position);--tw-gradient-to:hsla(15,40%,98%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-inverse-primary\/10{--tw-gradient-to:rgba(134,214,184,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(134,214,184,.1) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-surface\/50{--tw-gradient-to:hsla(15,40%,98%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(15,40%,98%,.5) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-primary-fixed\/15{--tw-gradient-to:rgba(161,243,211,.15) var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.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}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.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-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-1{padding-bottom:.25rem}.pb-10{padding-bottom:2.5rem}.pb-12{padding-bottom:3rem}.pb-14{padding-bottom:3.5rem}.pb-16{padding-bottom:4rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pl-6{padding-left:1.5rem}.pl-8{padding-left:2rem}.pt-1{padding-top:.25rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.pt-20{padding-top:5rem}.pt-28{padding-top:7rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-body{font-family:Inter}.font-headline{font-family:Noto Serif}.font-label{font-family:Plus Jakarta Sans}.font-serif{font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif}.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-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[0\.65rem\]{font-size:.65rem}.text-\[0\.7rem\]{font-size:.7rem}.text-\[0\.85rem\]{font-size:.85rem}.text-\[0\.9rem\]{font-size:.9rem}.text-\[1\.05rem\]{font-size:1.05rem}.text-\[1\.1rem\]{font-size:1.1rem}.text-\[1\.2rem\]{font-size:1.2rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[14px\]{font-size:14px}.text-\[16px\]{font-size:16px}.text-\[20px\]{font-size:20px}.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-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.italic{font-style:italic}.leading-\[1\.05\]{line-height:1.05}.leading-\[1\.1\]{line-height:1.1}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.15em\]{letter-spacing:.15em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.1em\]{letter-spacing:.1em}.tracking-\[0\.28em\]{letter-spacing:.28em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-amber-700\/80{color:rgba(180,83,9,.8)}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-on-primary{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-on-primary-container{--tw-text-opacity:1;color:rgb(143 223 193/var(--tw-text-opacity,1))}.text-on-primary-container\/60{color:rgba(143,223,193,.6)}.text-on-surface{--tw-text-opacity:1;color:rgb(28 27 27/var(--tw-text-opacity,1))}.text-on-surface-variant{--tw-text-opacity:1;color:rgb(63 73 68/var(--tw-text-opacity,1))}.text-on-surface-variant\/60{color:rgba(63,73,68,.6)}.text-on-surface-variant\/70{color:rgba(63,73,68,.7)}.text-outline{--tw-text-opacity:1;color:rgb(111 122 116/var(--tw-text-opacity,1))}.text-outline\/70{color:hsla(147,5%,46%,.7)}.text-primary{--tw-text-opacity:1;color:rgb(0 75 56/var(--tw-text-opacity,1))}.text-primary-container{--tw-text-opacity:1;color:rgb(0 101 77/var(--tw-text-opacity,1))}.text-primary\/80{color:rgba(0,75,56,.8)}.text-purple-700{--tw-text-opacity:1;color:rgb(126 34 206/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-red-900{--tw-text-opacity:1;color:rgb(127 29 29/var(--tw-text-opacity,1))}.text-secondary{--tw-text-opacity:1;color:rgb(157 66 40/var(--tw-text-opacity,1))}.text-stone-500{--tw-text-opacity:1;color:rgb(120 113 108/var(--tw-text-opacity,1))}.text-stone-600{--tw-text-opacity:1;color:rgb(87 83 78/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/65{color:hsla(0,0%,100%,.65)}.text-white\/80{color:hsla(0,0%,100%,.8)}.text-white\/85{color:hsla(0,0%,100%,.85)}.text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.decoration-1{text-decoration-thickness:1px}.underline-offset-2{text-underline-offset:2px}.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-5{opacity:.05}.opacity-60{opacity:.6}.opacity-90{opacity:.9}.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)}.shadow-\[0_24px_70px_-28px_rgba\(28\2c 27\2c 27\2c 0\.28\)\]{--tw-shadow:0 24px 70px -28px rgba(28,27,27,.28);--tw-shadow-colored:0 24px 70px -28px var(--tw-shadow-color)}.shadow-\[0_24px_70px_-28px_rgba\(28\2c 27\2c 27\2c 0\.28\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--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)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-blur-md{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-blur-xl{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.selection\:bg-primary-fixed ::-moz-selection{--tw-bg-opacity:1;background-color:rgb(161 243 211/var(--tw-bg-opacity,1))}.selection\:bg-primary-fixed ::selection{--tw-bg-opacity:1;background-color:rgb(161 243 211/var(--tw-bg-opacity,1))}.selection\:text-on-primary-fixed ::-moz-selection{--tw-text-opacity:1;color:rgb(0 33 23/var(--tw-text-opacity,1))}.selection\:text-on-primary-fixed ::selection{--tw-text-opacity:1;color:rgb(0 33 23/var(--tw-text-opacity,1))}.selection\:bg-primary-fixed::-moz-selection{--tw-bg-opacity:1;background-color:rgb(161 243 211/var(--tw-bg-opacity,1))}.selection\:bg-primary-fixed::selection{--tw-bg-opacity:1;background-color:rgb(161 243 211/var(--tw-bg-opacity,1))}.selection\:text-on-primary-fixed::-moz-selection{--tw-text-opacity:1;color:rgb(0 33 23/var(--tw-text-opacity,1))}.selection\:text-on-primary-fixed::selection{--tw-text-opacity:1;color:rgb(0 33 23/var(--tw-text-opacity,1))}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:-translate-y-0\.5:hover,.hover\:-translate-y-1:hover{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))}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:-translate-y-1\.5:hover{--tw-translate-y:-0.375rem}.hover\:-translate-y-1\.5:hover,.hover\:scale-105:hover{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))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-95:hover{--tw-scale-x:.95;--tw-scale-y:.95;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))}.hover\:border-primary\/40:hover{border-color:rgba(0,75,56,.4)}.hover\:border-secondary:hover{--tw-border-opacity:1;border-color:rgb(157 66 40/var(--tw-border-opacity,1))}.hover\:bg-primary-container:hover{--tw-bg-opacity:1;background-color:rgb(0 101 77/var(--tw-bg-opacity,1))}.hover\:bg-primary\/10:hover{background-color:rgba(0,75,56,.1)}.hover\:bg-stone-50:hover{--tw-bg-opacity:1;background-color:rgb(250 250 249/var(--tw-bg-opacity,1))}.hover\:bg-surface-container-high:hover{--tw-bg-opacity:1;background-color:rgb(234 231 231/var(--tw-bg-opacity,1))}.hover\:bg-surface-container-highest:hover{--tw-bg-opacity:1;background-color:rgb(229 226 225/var(--tw-bg-opacity,1))}.hover\:bg-surface-container\/50:hover{background-color:hsla(0,9%,94%,.5)}.hover\:bg-white\/20:hover{background-color:hsla(0,0%,100%,.2)}.hover\:text-primary:hover{--tw-text-opacity:1;color:rgb(0 75 56/var(--tw-text-opacity,1))}.hover\:text-secondary:hover{--tw-text-opacity:1;color:rgb(157 66 40/var(--tw-text-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)}.hover\:shadow-lg:hover,.hover\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--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(2px + 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)}.focus\:ring-primary:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(0 75 56/var(--tw-ring-opacity,1))}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95}.active\:scale-95:active,.disabled\:scale-100:disabled{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))}.disabled\:scale-100:disabled{--tw-scale-x:1;--tw-scale-y:1}.disabled\:opacity-50:disabled{opacity:.5}.group[open] .group-open\:rotate-180{--tw-rotate:180deg}.group:hover .group-hover\:translate-x-0\.5,.group[open] .group-open\:rotate-180{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))}.group:hover .group-hover\:translate-x-0\.5{--tw-translate-x:0.125rem}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;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))}.group:hover .group-hover\:text-primary{--tw-text-opacity:1;color:rgb(0 75 56/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:inline{display:inline}.sm\:inline-flex{display:inline-flex}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}}@media (min-width:768px){.md\:order-1{order:1}.md\:order-2{order:2}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-8{grid-column:span 8/span 8}.md\:mx-8{margin-left:2rem;margin-right:2rem}.md\:mb-14{margin-bottom:3.5rem}.md\:mb-16{margin-bottom:4rem}.md\:mb-20{margin-bottom:5rem}.md\:mb-24{margin-bottom:6rem}.md\:mb-6{margin-bottom:1.5rem}.md\:mb-8{margin-bottom:2rem}.md\:mt-20{margin-top:5rem}.md\:mt-3{margin-top:.75rem}.md\:mt-5{margin-top:1.25rem}.md\:block{display:block}.md\:flex{display:flex}.md\:columns-2{-moz-columns:2;column-count:2}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.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\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-12{gap:3rem}.md\:gap-16{gap:4rem}.md\:gap-4{gap:1rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:rounded-\[3rem\]{border-radius:3rem}.md\:p-10{padding:2.5rem}.md\:p-12{padding:3rem}.md\:p-4{padding:1rem}.md\:p-6{padding:1.5rem}.md\:p-7{padding:1.75rem}.md\:p-8{padding:2rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:py-32{padding-top:8rem;padding-bottom:8rem}.md\:py-4{padding-top:1rem;padding-bottom:1rem}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:pb-12{padding-bottom:3rem}.md\:pb-20{padding-bottom:5rem}.md\:pb-24{padding-bottom:6rem}.md\:pb-6{padding-bottom:1.5rem}.md\:pt-20{padding-top:5rem}.md\:pt-36{padding-top:9rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:block{display:block}.lg\:hidden{display:none}.lg\:aspect-\[5\/4\]{aspect-ratio:5/4}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.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-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:gap-12{gap:3rem}.lg\:gap-14{gap:3.5rem}.lg\:gap-16{gap:4rem}.lg\:gap-20{gap:5rem}.lg\:gap-24{gap:6rem}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-6xl{font-size:3.75rem;line-height:1}.lg\:text-8xl{font-size:6rem;line-height:1}}@media (min-width:1536px){.\32xl\:inline{display:inline}}.rtl\:-left-10:where([dir=rtl],[dir=rtl] *){left:-2.5rem}.rtl\:right-auto:where([dir=rtl],[dir=rtl] *){right:auto}.rtl\:bg-gradient-to-l:where([dir=rtl],[dir=rtl] *){background-image:linear-gradient(to left,var(--tw-gradient-stops))}.rtl\:\[transform\:scaleX\(-1\)\]:where([dir=rtl],[dir=rtl] *){transform:scaleX(-1)}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}
/* ===== static/css/redesign.css ===== */
/* ===================================================================
AUDIALA — Website redesign (aligned with mobile app)
===================================================================
Palette is straight from the mobile app's brand system:
- Cream is paper (the field everything sits on)
- Deep teal is ink (text only)
- Coral is the joy — used for italic display words, play buttons,
active states
- Sun yellow for the hand-drawn underline highlight
- Mint teal for soft secondary details
=================================================================== */
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-italic-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-italic-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-italic-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-italic-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-italic-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-italic-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* ---- Brand palette (from the mobile app) ---- */
--cream: #FAF2E2; /* paper */
--cream-2: #F4E6C2; /* warm cream, second surface */
--cream-3: #ECE0B8;
--ink: #1D3935; /* deep teal — primary text */
--ink-2: #465C58; /* secondary text, icon strokes */
--ink-3: #7C928E; /* tertiary, muted */
--ink-4: #BBC9C5; /* hairlines, soft details */
--coral: #E85F33; /* warm orange — the brand accent */
--coral-deep: #C8451F;
--coral-soft: #F8D8C8; /* coral wash */
--sun: #F3C43D; /* golden highlight */
--sun-soft: #FBE89A;
--mint: #7FC0B6; /* soft teal accent */
--paper-deep: #131C1F; /* dark-theme paper */
/* ---- Hairlines ---- */
--line: rgba(29, 57, 53, 0.14);
--line-soft: rgba(29, 57, 53, 0.07);
/* ---- Type ---- */
--serif: "Fraunces", "Source Serif 4", Georgia, serif;
--serif-body: "Source Serif 4", "Fraunces", Georgia, serif;
--sans: "Inter", -apple-system, "Helvetica Neue", system-ui, sans-serif;
}
/* ---------- Page scoping ---------- */
.audiala-page * { box-sizing: border-box; margin: 0; padding: 0; }
.audiala-page {
font-family: var(--sans);
font-size: 15px; line-height: 1.55;
color: var(--ink);
background: var(--cream);
width: 100%;
max-width: 1280px;
/* Float the cream page as a card on the dark surround, mirroring the
design mock's `.review-page` (1280px cream card, radius 24, big soft
shadow, sitting on the dark stage). */
margin: 40px auto 80px;
border-radius: 24px;
box-shadow:
0 30px 80px -30px rgba(29, 57, 53, 0.25),
0 1px 0 rgba(29, 57, 53, 0.08);
position: relative;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
/* Surround behind the floating page — cream-3 (#ECE0B8), the deeper cream
band from the mock. `:has()` scopes it to redesign pages so unported
Tailwind pages keep their own body background. */
html:has(> body > .audiala-page),
body:has(> .audiala-page) {
background: var(--cream-3) !important;
margin: 0;
}
/* Mock was fixed-width 1280px; basic responsive scaffolding for
tablet + mobile. Per-section breakpoints added as pages are ported. */
@media (max-width: 1024px) {
.audiala-page { font-size: 14.5px; }
}
@media (max-width: 768px) {
.audiala-page { font-size: 14px; }
}
/* Edge-to-edge on phones — a floating card with margins wastes space and the
radius/shadow read as a bug at small widths. */
@media (max-width: 700px) {
.audiala-page { margin: 0 auto; border-radius: 0; box-shadow: none; }
}
.audiala-page img { display: block; max-width: 100%; }
.audiala-page a { color: inherit; text-decoration: none; }
.audiala-page button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.audiala-page p { text-wrap: pretty; }
/* ---------- Type primitives ---------- */
.f-display {
font-family: var(--serif);
font-weight: 700;
letter-spacing: -0.025em;
font-variation-settings: "opsz" 144, "SOFT" 30;
line-height: 0.95;
color: var(--ink);
}
.f-display-it {
font-family: var(--serif);
font-style: italic;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--coral);
}
.f-serif {
font-family: var(--serif-body);
font-weight: 400;
color: var(--ink);
}
.f-serif-it {
font-family: var(--serif-body);
font-style: italic;
font-weight: 400;
color: var(--ink-2);
}
.f-eyebrow {
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-2);
}
.f-eyebrow .sep { color: var(--ink-3); margin: 0 8px; }
.f-eyebrow .dot {
display: inline-block; width: 4px; height: 4px;
background: var(--ink-3); border-radius: 50%;
vertical-align: middle; margin: 0 10px;
transform: translateY(-2px);
}
/* Numbered section prefix "01 The set" */
.section-no {
font-family: var(--sans);
font-weight: 400;
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ink-3);
vertical-align: super;
margin-right: 14px;
}
/* Coral italic display word — signature joy element */
.joy { font-family: var(--serif); font-style: italic; color: var(--coral); font-weight: 700; }
/* Hand-drawn underline highlight (sun yellow) */
.hl-under {
position: relative;
display: inline-block;
white-space: nowrap;
}
.hl-under::after {
content: "";
position: absolute;
left: -2px; right: -2px;
bottom: 0.06em;
height: 0.18em;
background: var(--sun);
border-radius: 100px;
z-index: -1;
transform: skewY(-1deg);
opacity: 0.85;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-radius: 100px;
font-family: var(--sans); font-size: 14px; font-weight: 500;
letter-spacing: -0.005em;
transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
/* Use .audiala-page prefix to outrank `.audiala-page a { color: inherit }`
(specificity 0,1,1) and Tailwind utility classes on body. Without this,
ink/coral buttons inherit the page text color and the cream label becomes
invisible (most painfully on `.btn-ink` where bg matches the ink text). */
.audiala-page .btn-coral, .btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: var(--coral-deep); }
.audiala-page .btn-ink, .btn-ink { background: var(--ink); color: var(--cream); }
.audiala-page .btn-cream, .btn-cream { background: var(--cream); color: var(--ink); }
.btn-ghost {
background: transparent; color: var(--ink);
border: 1px solid var(--line);
}
.btn-lg { padding: 16px 26px; font-size: 14.5px; }
/* Play button — round coral disc */
.play-btn {
width: 56px; height: 56px; border-radius: 50%;
background: var(--coral); color: #fff;
display: grid; place-items: center;
font-size: 18px;
flex-shrink: 0;
transition: transform .15s ease, background .15s ease;
}
.play-btn:hover { transform: scale(1.04); background: var(--coral-deep); }
.play-btn.sm { width: 44px; height: 44px; font-size: 14px; }
.play-btn.lg { width: 72px; height: 72px; font-size: 22px; }
.audio-toggle-icon {
display: inline-grid;
place-items: center;
line-height: 0;
}
.audio-toggle-icon-pause { display: none; }
.is-audio-playing .audio-toggle-icon-play { display: none; }
.is-audio-playing .audio-toggle-icon-pause { display: inline-grid; }
.audio-preview-strip {
margin-top: 20px;
max-width: 520px;
display: grid;
gap: 10px;
}
.audio-preview-copy {
display: grid;
gap: 6px;
}
.audio-preview-copy p {
font-size: 18px;
line-height: 1.35;
color: var(--ink-2);
}
.audio-preview-progress {
width: 100%;
height: 5px;
border-radius: 999px;
overflow: hidden;
background: rgba(29, 57, 53, 0.11);
}
.audio-preview-progress span {
display: block;
width: 0%;
height: 100%;
border-radius: inherit;
background: var(--coral);
transition: width .12s linear;
}
.audio-preview-status {
min-height: 18px;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
}
.is-audio-playing .audio-preview-status { color: var(--coral); }
/* ---------- Cards ---------- */
.card {
background: var(--cream);
border-radius: 24px;
/* Strong shadow + soft outline so cards floating over hero photos
(.card.position:absolute over .ph) stay visually lifted instead of
blending into the cream-toned imagery behind. */
box-shadow:
0 1px 0 rgba(29, 57, 53, 0.08),
0 2px 6px rgba(29, 57, 53, 0.08),
0 18px 40px -16px rgba(29, 57, 53, 0.28);
}
.card-2 {
background: var(--cream-2);
border-radius: 24px;
}
.card-ink {
background: var(--ink);
color: var(--cream);
border-radius: 24px;
}
.card-tight { border-radius: 16px; }
/* ---------- Pill / chip ---------- */
.pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
border-radius: 100px;
background: var(--cream-2);
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-2);
border: 1px solid transparent;
}
.pill.is-on { background: var(--ink); color: var(--cream); }
.pill.is-coral { background: var(--coral); color: #fff; }
.pill .avatar {
width: 20px; height: 20px; border-radius: 50%;
background: var(--coral); color: #fff;
display: grid; place-items: center;
font-size: 10px; font-weight: 600;
}
/* ---------- Nav ---------- */
.nav {
display: flex; align-items: center; justify-content: space-between;
padding: 22px 48px;
position: relative; z-index: 5;
background: var(--cream);
}
.nav.sticky-top { border-bottom: 1px solid var(--line); }
.logo {
display: inline-flex; align-items: center; gap: 10px;
color: var(--ink);
}
.logo-mark {
width: 34px; height: 30px;
background-color: var(--coral);
-webkit-mask: url("/assets/audiala-logo-mark.svg") no-repeat center / contain;
mask: url("/assets/audiala-logo-mark.svg") no-repeat center / contain;
flex-shrink: 0;
}
.logo-word {
font-family: var(--serif);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144;
}
.nav-links {
display: flex; gap: 32px;
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
}
.nav-links a { position: relative; padding: 4px 0; }
.nav-links a.is-active::after {
content: "";
position: absolute;
left: -2px; right: -2px; bottom: 0;
height: 7px;
background: var(--sun);
border-radius: 100px;
z-index: -1;
opacity: 0.9;
}
.nav-tools {
display: flex; gap: 12px; align-items: center;
}
.nav-search {
display: inline-flex; gap: 10px; align-items: center;
padding: 10px 18px;
border-radius: 100px;
border: 1px solid var(--line);
background: var(--cream);
font-size: 13px;
color: var(--ink-3);
}
/* Language switcher — compact pill trigger + dropdown listbox. Logical
(inset-inline) positioning so it mirrors correctly under dir="rtl" (ar). */
.nav-lang { position: relative; }
.nav-lang-btn {
display: inline-flex; gap: 6px; align-items: center;
padding: 10px 14px;
border-radius: 100px;
border: 1px solid var(--line);
background: var(--cream);
font-size: 13px;
color: var(--ink-2);
cursor: pointer;
transition: border-color .15s ease, color .15s ease;
}
.nav-lang-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.nav-lang-code { font-family: var(--sans); font-weight: 600; letter-spacing: .02em; }
.nav-lang-btn svg { width: 12px; height: 12px; transition: transform .15s ease; }
.nav-lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-lang-menu {
position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 18px 40px -16px rgba(29, 57, 53, 0.28);
padding: 6px;
min-width: 180px; max-height: 360px; overflow-y: auto;
z-index: 60;
}
.nav-lang-menu[hidden] { display: none; }
.nav-lang-menu a {
display: flex; gap: 10px; align-items: center;
padding: 9px 12px;
border-radius: 9px;
font-family: var(--sans); font-size: 13.5px;
color: var(--ink-2);
text-decoration: none;
}
.nav-lang-menu a:hover { background: var(--cream-2); color: var(--ink); }
.nav-lang-menu a.is-current { color: var(--coral); font-weight: 600; background: rgba(232, 95, 51, 0.06); }
/* ---------- Photography placeholder ----------
A warm sky-gradient placeholder (not the harsh striped one).
Variants: dawn, midday, dusk, night, terracotta, ocean
*/
.ph {
background: linear-gradient(180deg, #C5A782 0%, #E5B998 35%, #F0CBA8 65%, #D89868 100%);
position: relative;
/* Isolate so the ::after legibility scrim (z-index:1) stays contained
within the photo and can't paint above sibling overlay cards (e.g. the
"Continue listening" resume card), which have no z-index and would
otherwise be darkened/bled-through by the escaping scrim. */
isolation: isolate;
overflow: hidden;
border-radius: 20px;
display: grid;
place-items: end start;
}
.ph::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(circle at 75% 30%, rgba(255, 235, 200, 0.4), transparent 50%),
radial-gradient(circle at 20% 80%, rgba(29, 57, 53, 0.18), transparent 60%);
pointer-events: none;
}
.ph::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 60%;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.65) 100%);
pointer-events: none;
}
/* When a real ![]()
is wired (`.has-img` added by the partial) we keep the
variant gradient as the background: the opaque photo covers it once
loaded, and it serves as a warm on-brand placeholder while a lazy image
below the fold is still loading (instead of a flat dark-teal flash). Just
drop the sky-highlight ::before so it doesn't tint the photo. The bottom
darken scrim (::after) stays for label/overlay legibility. */
.ph.has-img::before { display: none; }
.ph > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
z-index: 0;
}
.ph::before, .ph::after { z-index: 1; }
.ph .ph-label, .ph .ph-sun { position: relative; z-index: 2; }
.ph .ph-label {
position: relative;
margin: 16px;
padding: 5px 10px;
background: rgba(29, 57, 53, 0.55);
color: rgba(250, 242, 226, 0.9);
font-family: var(--sans);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 100px;
backdrop-filter: blur(4px);
}
/* Placeholder variants */
.ph.dawn { background: linear-gradient(180deg, #E8C5A0 0%, #F3D8AE 40%, #DBA76F 100%); }
.ph.dusk { background: linear-gradient(180deg, #5A4E5C 0%, #C28570 50%, #E69862 100%); }
.ph.night { background: linear-gradient(180deg, #1D3935 0%, #2C5A52 50%, #6B8378 100%); }
.ph.ocean { background: linear-gradient(180deg, #7AAEB0 0%, #B8D4C8 50%, #F4E6C2 100%); }
.ph.stone { background: linear-gradient(180deg, #C9B894 0%, #D6C3A0 50%, #B89D70 100%); }
.ph.forest { background: linear-gradient(180deg, #6B8E78 0%, #95B49A 50%, #D5C9A8 100%); }
.ph.terracotta { background: linear-gradient(180deg, #A85638 0%, #C77554 50%, #E8A875 100%); }
/* A small inset frame for an icon overlay on placeholder */
.ph-sun {
position: absolute;
top: 32px; right: 32px;
width: 60px; height: 60px;
border-radius: 50%;
background: rgba(250, 242, 226, 0.5);
filter: blur(10px);
}
/* ---------- Day-icon strokes (line, 1.5pt, no fill) ---------- */
.line-icon {
display: inline-block;
color: var(--ink-2);
width: 36px; height: 36px;
}
.line-icon.coral { color: var(--coral); }
.line-icon.sm { width: 22px; height: 22px; }
.line-icon.lg { width: 56px; height: 56px; }
/* Vault rule (ios-design-system.md §Buttons): coral surfaces carry WHITE ink,
never the teal/green ink-2. The .line-icon default `color: var(--ink-2)` is a
direct rule that beats inheritance, so an icon inside a coral pill/button
rendered green-on-coral (e.g. the "Editor's pick" sparkle). Force inherit so
icons take the white text color of their coral/ink parent. */
.btn-coral .line-icon,
.pill.is-coral .line-icon,
.pill.is-on .line-icon,
.play-btn .line-icon,
.btn-ink .line-icon { color: inherit; }
/* ---------- Generic layout helpers ---------- */
.section { padding: 88px 48px; position: relative; }
.section.tight { padding: 56px 48px; }
.section.big { padding: 120px 48px; }
.section-head {
display: flex; align-items: end; justify-content: space-between;
gap: 40px; margin-bottom: 48px;
}
.section-head h2 {
font-family: var(--serif); font-weight: 700;
font-size: 64px; line-height: 0.98;
letter-spacing: -0.025em;
color: var(--ink);
max-width: 800px;
}
.section-head .lead {
font-family: var(--serif-body);
font-size: 18px; line-height: 1.45;
color: var(--ink-2);
max-width: 380px;
}
/* ---------- Hairline ---------- */
.hr {
border: 0; height: 1px; background: var(--line); margin: 0;
}
/* ---------- "Continue listening" mini-card pattern ---------- */
.resume-card {
display: flex; align-items: center; gap: 16px;
padding: 14px 18px 14px 14px;
background: var(--cream-2);
border-radius: 20px;
box-shadow: 0 1px 0 rgba(29, 57, 53, 0.05);
}
.resume-card .art {
width: 60px; height: 60px; border-radius: 12px;
flex-shrink: 0;
}
.resume-card .label-row {
font-family: var(--sans); font-size: 10.5px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 4px;
}
.resume-card .title {
font-family: var(--serif); font-weight: 600;
font-size: 18px; color: var(--ink);
letter-spacing: -0.01em;
}
.resume-card .meta {
font-family: var(--sans); font-size: 12px;
color: var(--ink-3); margin-top: 2px;
}
/* ---------- Footer ---------- */
.footer {
background: var(--paper-deep);
color: var(--cream);
padding: 96px 48px 36px;
position: relative;
}
.footer .lead {
font-family: var(--serif);
font-weight: 700;
font-size: 56px;
line-height: 0.98;
letter-spacing: -0.025em;
max-width: 540px;
}
.footer .lead .joy { color: var(--coral); }
.footer .logo { color: var(--cream); }
.footer .logo-mark { background-color: var(--cream); }
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
gap: 48px;
margin-top: 64px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(250, 242, 226, 0.12);
}
.footer h4 {
font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: rgba(250, 242, 226, 0.5);
margin-bottom: 16px; font-weight: 500;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 24px;
font-family: var(--sans); font-size: 12px;
color: rgba(250, 242, 226, 0.4);
}
/* ---------- Stats / numbers ---------- */
.stat {
display: flex; flex-direction: column; gap: 6px;
}
.stat-n {
font-family: var(--serif); font-weight: 700;
font-size: 56px; line-height: 0.95;
letter-spacing: -0.03em;
color: var(--ink);
}
.stat-l {
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--ink-3);
text-transform: uppercase;
}
/* ===================================================================
LOUVRE PAGE COMPONENTS (lv-* + .disc family)
------------------------------------------------------------------
Ported from design/louvre-v1.html (style block 1). Used by the
place-page redesign for hero headline, facts strip, ticket pill,
verified chip, audio-guide CTA, prose, gallery, logistics, tips,
pair, faq, related, sources. Tokens (var(--ink), var(--coral),
var(--cream)…) come from earlier in this file.
=================================================================== */
/* ===================================================================
AUDIALA — Louvre place page · polish layer over styles.css
Page-specific patterns: hero, tickets, gallery, logistics,
tips, history, callouts, FAQ accordion, related grid.
=================================================================== */
/* ---------- Image with graceful fallback ---------- */.lv-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---------- Hero ---------- */
.lv-hero-title {
font-family: var(--serif);
font-weight: 800;
/* Design uses a fixed 150px for short single-word names ("Louvre."). Real
place names vary wildly in length, so scale with the viewport: ~150px at
the 1280px design width, shrinking on narrow screens to avoid overflow. */
font-size: clamp(52px, 11.7vw, 150px);
line-height: 0.84;
letter-spacing: -0.04em;
font-variation-settings: "opsz" 144, "SOFT" 50;
color: var(--ink);
}
.lv-hero-title .it { font-style: italic; color: var(--coral); font-weight: 700; }
/* Place-page narration preview. The compact card sits in the hero beside the
page summary so listening is a first-class action, not a download promise. */
.lv-audio-preview {
margin-top: 18px;
padding: 14px 16px;
border: 1px solid rgba(29, 57, 53, 0.12);
border-radius: 20px;
background:
radial-gradient(circle at 100% 0, rgba(224, 122, 95, 0.14), transparent 38%),
var(--cream-2);
box-shadow: 0 12px 28px -22px rgba(29, 57, 53, 0.4);
}
.lv-audio-preview audio { display: none; }
.lv-audio-preview-main {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
}
.lv-audio-preview-toggle {
border: 0;
cursor: pointer;
box-shadow: 0 9px 22px -8px rgba(224, 122, 95, 0.8);
}
.lv-audio-preview-toggle:focus-visible,
.lv-audio-preview a:focus-visible {
outline: 3px solid rgba(224, 122, 95, 0.42);
outline-offset: 3px;
}
.lv-audio-preview .audio-preview-copy { min-width: 0; }
.lv-audio-preview .audio-preview-copy h2 {
margin: 0;
font-family: var(--serif);
font-size: 18px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
}
.lv-audio-preview .audio-preview-copy .f-eyebrow {
color: var(--coral-deep);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lv-audio-preview-duration {
padding: 7px 10px;
border: 1px solid var(--line);
border-radius: 100px;
background: rgba(255, 255, 255, 0.45);
font: 600 12px/1 var(--sans);
font-variant-numeric: tabular-nums;
color: var(--ink-3);
}
.lv-audio-preview .audio-preview-progress { margin-top: 10px; }
.lv-audio-preview-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 11px;
}
.lv-audio-preview .audio-preview-status {
min-width: 78px;
font-variant-numeric: tabular-nums;
}
.lv-audio-preview-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.lv-audio-preview-actions .btn {
min-height: 32px;
padding: 7px 12px;
font-size: 11.5px;
text-align: center;
}
.lv-audio-preview-open { opacity: 0.88; }
.lv-audio-preview.is-audio-complete .lv-audio-preview-open {
opacity: 1;
box-shadow: 0 8px 22px -10px rgba(224, 122, 95, 0.8);
}
.lv-audio-preview.has-audio-error .lv-audio-preview-toggle {
opacity: 0.45;
pointer-events: none;
}
/* Primary app-conversion CTA — make it unmistakably a button */
.lv-cta-listen {
font-weight: 600;
padding-left: 8px;
box-shadow: 0 8px 22px -6px rgba(224,122,95,0.55), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.lv-cta-listen .disc {
width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center; flex-shrink: 0;
background: rgba(255,255,255,0.22);
color: var(--cream);
}
.lv-cta-listen:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(224,122,95,0.62), inset 0 0 0 1px rgba(255,255,255,0.16); }
.lv-cta-listen:active { transform: translateY(0); box-shadow: 0 4px 12px -4px rgba(224,122,95,0.5); }
/* Quiet ticket line in hero */
.lv-ticket-quiet {
display: inline-flex; align-items: center; gap: 12px;
padding: 9px 9px 9px 16px;
border-radius: 100px;
border: 1px solid var(--line);
background: var(--cream);
font-family: var(--sans); font-size: 13px; color: var(--ink-2);
transition: border-color .15s ease, transform .15s ease;
}
.lv-ticket-quiet:hover { border-color: var(--ink-4); transform: translateY(-1px); }
.lv-ticket-quiet .price { color: var(--coral); font-weight: 600; }
.lv-ticket-quiet .rate { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }
.lv-ticket-quiet .go {
width: 30px; height: 30px; border-radius: 50%;
background: var(--coral); color: var(--cream);
display: grid; place-items: center;
}
.lv-verified {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.04em;
color: var(--ink-3);
}
.lv-verified .dot { width: 14px; height: 14px; color: var(--mint); }
/* Hero quick-facts overlay strip */
.lv-facts {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.lv-facts .fact {
display: flex; gap: 14px; align-items: flex-start;
padding: 0 28px;
}
.lv-facts .fact + .fact { border-left: 1px solid var(--line); }
.lv-facts .fact .k {
font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
.lv-facts .fact .v {
font-family: var(--serif); font-weight: 600; font-size: 17px;
line-height: 1.15; letter-spacing: -0.01em; color: var(--ink);
}
/* ---------- Editorial body type ---------- */
/* Base props live on the container too: markdownify emits bare inline text
(no ) for single-line fields, which otherwise fell back to Inter. */
.lv-prose {
font-family: var(--serif-body);
font-size: 17px; line-height: 1.62; color: var(--ink-2);
}
.lv-prose p {
font-family: var(--serif-body);
font-size: 17px; line-height: 1.62; color: var(--ink-2);
}
.lv-prose p + p { margin-top: 20px; }
.lv-prose em { font-style: italic; color: var(--ink); }
.lv-dropcap::first-letter {
font-family: var(--serif); font-weight: 700;
font-size: 92px; line-height: 0.72;
float: left; color: var(--coral);
margin: 10px 14px 0 0;
}
/* ---------- "What to see" numbered items ---------- */
.lv-see-item {
display: grid; grid-template-columns: 64px 1fr;
gap: 28px;
padding: 36px 0;
border-top: 1px solid var(--line);
}
.lv-see-item .idx {
font-family: var(--serif); font-weight: 700; font-size: 30px;
color: var(--coral); letter-spacing: -0.02em;
font-style: italic;
}
.lv-see-item h3 {
font-family: var(--serif); font-weight: 700; font-size: 30px;
letter-spacing: -0.02em; color: var(--ink); line-height: 1.05;
margin-bottom: 14px;
}
/* ---------- Callouts (Look for this / The Secret) ---------- */
.lv-callout {
display: grid; grid-template-columns: auto 1fr; gap: 22px;
align-items: start;
padding: 30px 34px;
border-radius: 24px;
background: var(--cream-2);
border: 1px solid var(--line);
}
.lv-callout .badge {
width: 52px; height: 52px; border-radius: 50%;
display: grid; place-items: center; flex-shrink: 0;
background: var(--sun-soft); color: var(--ink);
}
.lv-callout.dark { background: var(--ink); border-color: transparent; color: var(--cream); }
.lv-callout.dark .badge { background: rgba(243,196,61,0.18); color: var(--sun); }
.lv-callout .eyebrow {
font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px;
}
.lv-callout.dark .eyebrow { color: var(--sun); }
.lv-callout h4 {
font-family: var(--serif); font-weight: 700; font-size: 22px;
letter-spacing: -0.01em; margin-bottom: 8px;
}
.lv-callout p { font-family: var(--serif-body); font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.lv-callout.dark p { color: rgba(250,242,226,0.82); }
/* ---------- Gallery ---------- */
.lv-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 14px;
}
.lv-gallery figure {
position: relative; overflow: hidden; border-radius: 18px;
background: var(--cream-2);
}
.lv-gallery figure.wide { grid-column: span 2; }
.lv-gallery figure.tall { grid-row: span 2; }
.lv-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lv-gallery figure:hover img { transform: scale(1.04); }
.lv-gallery figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 22px 16px 12px;
font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.06em;
color: rgba(250,242,226,0.92);
background: linear-gradient(180deg, transparent, rgba(19,28,31,0.72));
opacity: 0; transition: opacity .25s ease;
}
.lv-gallery figure:hover figcaption { opacity: 1; }
/* ---------- Phone mockup screen (redesign/phone-card.html) ----------
Stylized rendition of the app's dark player, sized to the 286x620 bezel
opening. Data comes from the page; imagery rides the resize pipeline. */
.lv-phone {
position: relative;
aspect-ratio: 286 / 620;
border-radius: 35px;
overflow: hidden;
background: #141d20;
display: flex;
flex-direction: column;
font-family: var(--sans);
}
.lv-phone .shot {
position: relative;
height: 42%;
flex: none;
background: linear-gradient(160deg, #2b3f44, #141d20);
}
.lv-phone .shot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lv-phone .shot::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20,29,32,0.18), transparent 30%, transparent 55%, #141d20 100%);
}
.lv-phone .statusbar {
position: absolute;
top: 10px; left: 16px; right: 16px;
display: flex; align-items: center; justify-content: space-between;
z-index: 1;
color: #fff;
font-size: 11px; font-weight: 600;
text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.lv-phone .statusbar .notch {
width: 74px; height: 20px;
border-radius: 12px;
background: rgba(10,14,15,0.9);
}
.lv-phone .statusbar .sys { display: inline-flex; gap: 3px; }
.lv-phone .statusbar .sys i {
width: 10px; height: 5px;
border-radius: 2px;
background: rgba(255,255,255,0.85);
}
.lv-phone .screen-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: 10px 14px 12px;
color: var(--cream);
}
.lv-phone .chapters { display: flex; gap: 4px; margin-bottom: 8px; }
.lv-phone .chapters i {
flex: 1; height: 3px; border-radius: 2px;
background: rgba(250,242,226,0.18);
}
.lv-phone .chapters i.on { background: var(--coral); }
.lv-phone .chapter-eyebrow {
font-size: 8.5px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(250,242,226,0.55);
}
.lv-phone .place {
margin-top: 4px;
font-family: var(--serif);
font-weight: 700;
font-size: 21px;
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--cream);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lv-phone .quote {
margin: 7px 0 0;
font-family: var(--serif-body);
font-style: italic;
font-size: 11px;
line-height: 1.5;
color: rgba(250,242,226,0.82);
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.lv-phone .quote::before { content: "\201C\2009"; color: var(--coral); font-weight: 700; }
.lv-phone .sources-line {
margin-top: 7px;
font-size: 8px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(250,242,226,0.45);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lv-phone .track {
margin-top: auto;
height: 4px; border-radius: 3px;
background: rgba(250,242,226,0.18);
overflow: hidden;
}
.lv-phone .track span { display: block; width: 7%; height: 100%; border-radius: 3px; background: var(--coral); }
.lv-phone .times {
display: flex; justify-content: space-between;
margin-top: 4px;
font-size: 8.5px; font-variant-numeric: tabular-nums;
color: rgba(250,242,226,0.55);
}
.lv-phone .controls {
display: flex; align-items: center; justify-content: center;
gap: 26px;
margin-top: 8px;
}
.lv-phone .controls .skip {
width: 26px; height: 26px;
border: 1.5px solid rgba(250,242,226,0.7);
border-radius: 50%;
display: grid; place-items: center;
font-size: 9px; font-weight: 700;
color: rgba(250,242,226,0.85);
}
.lv-phone .controls .disc {
width: 46px; height: 46px;
border-radius: 50%;
background: var(--coral);
color: #fff;
display: grid; place-items: center;
box-shadow: 0 8px 20px -8px rgba(224,122,95,0.7);
}
.lv-phone .tabs {
display: flex; justify-content: space-between;
margin-top: 10px;
padding: 7px 9px;
border-radius: 100px;
background: rgba(250,242,226,0.08);
}
.lv-phone .tabs span {
display: inline-flex; flex-direction: column; align-items: center;
gap: 2px;
font-size: 7.5px; font-weight: 600;
color: rgba(250,242,226,0.6);
}
.lv-phone .tabs span .line-icon { width: 12px; height: 12px; }
.lv-phone .tabs span.on { color: var(--coral); }
/* ---------- Motion experiment (PostHog flag `place-motion`) ----------
Every rule here is inert unless redesign/motion.html adds .motion-on to
(flag variant "test", or ?motion=1 for design-lab preview), and the
whole block is gated on prefers-reduced-motion. Control = no motion. */
.lv-eq {
display: none;
align-items: flex-end;
gap: 2.5px;
height: 13px;
margin-left: 10px;
vertical-align: baseline;
}
.lv-eq i {
width: 3px;
height: 100%;
border-radius: 2px;
background: var(--coral);
transform-origin: bottom;
}
@media (prefers-reduced-motion: no-preference) {
/* 3. Scroll-reveal on section titles — .lv-reveal is added by JS only to
titles below the current viewport, so no-flag/no-JS never hides content. */
.motion-on .lv-reveal { opacity: 0; transform: translateY(12px); }
.motion-on .lv-reveal.is-in {
opacity: 1;
transform: none;
transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .25, 1);
/* per-card stagger, set as --d by motion.html (0 for titles) */
transition-delay: var(--d, 0s);
}
/* Narration progress fills smoothly between timeupdate ticks. */
.motion-on .lv-audio-preview .audio-preview-progress span { transition: width .25s linear; }
/* FAQ accordions ease open instead of snapping. Progressive: needs
interpolate-size + ::details-content (Chromium 131+); elsewhere the
rules are ignored and toggles instantly as before. */
.motion-on { interpolate-size: allow-keywords; }
.motion-on details.lv-faq-item::details-content,
.motion-on details.faq-quick-answer::details-content {
height: 0;
overflow: clip;
transition: height .3s ease, content-visibility .3s allow-discrete;
}
.motion-on details.lv-faq-item[open]::details-content,
.motion-on details.faq-quick-answer[open]::details-content { height: auto; }
/* Tactile press feedback on every pill button. */
.motion-on .btn:active { transform: scale(.97); }
/* 1a. Idle invite — slow breathing glow on the narration play disc. */
.motion-on .lv-audio-preview:not(.is-audio-playing):not(.has-audio-error) .lv-audio-preview-toggle {
animation: lv-breathe 2.6s ease-in-out infinite;
}
/* 1b. Playing — coral ripple on the disc + equalizer bars beside the title. */
.motion-on .lv-audio-preview.is-audio-playing .lv-audio-preview-toggle {
animation: lv-ripple 1.6s ease-out infinite;
}
.motion-on .lv-audio-preview.is-audio-playing .lv-eq { display: inline-flex; }
.motion-on .lv-eq i:nth-child(1) { animation: lv-eq .9s ease-in-out -0.3s infinite; }
.motion-on .lv-eq i:nth-child(2) { animation: lv-eq .9s ease-in-out -0.6s infinite; }
.motion-on .lv-eq i:nth-child(3) { animation: lv-eq .9s ease-in-out 0s infinite; }
/* 2. Sticky ticket bar — one soft emphasis pulse on the Book CTA the first
time the bar reveals (the slide-up itself ships to everyone). */
.motion-on #sticky-ticket-bar.is-revealed a[data-source-tag="mobile_sticky"] {
animation: lv-cta-pop 1.4s ease .4s 2;
}
}
@keyframes lv-breathe {
0%, 100% { box-shadow: 0 9px 22px -8px rgba(224, 122, 95, 0.8); }
50% { box-shadow: 0 9px 26px -6px rgba(224, 122, 95, 0.95), 0 0 0 6px rgba(224, 122, 95, 0.14); }
}
@keyframes lv-ripple {
0% { box-shadow: 0 9px 22px -8px rgba(224, 122, 95, 0.8), 0 0 0 0 rgba(224, 122, 95, 0.35); }
100% { box-shadow: 0 9px 22px -8px rgba(224, 122, 95, 0.8), 0 0 0 16px rgba(224, 122, 95, 0); }
}
@keyframes lv-eq {
0%, 100% { transform: scaleY(0.35); }
50% { transform: scaleY(1); }
}
@keyframes lv-cta-pop {
0%, 100% { transform: scale(1); }
30% { transform: scale(1.06); }
}
/* Render-on-demand for heavy below-fold sections (all visitors, not part of
the motion experiment): the browser skips layout/paint until each section
nears the viewport. contain-intrinsic-size keeps the scrollbar honest;
anchor navigation (e.g. #all-tickets) forces render on jump. */
#photo-gallery,
#video-gallery,
#all-tickets,
#gyg-extras,
#visitor-information,
#tips-for-visitors,
#history-and-significance,
#frequently-asked-questions,
#sources {
content-visibility: auto;
contain-intrinsic-size: auto 900px;
}
/* ---------- Video gallery ---------- */
.lv-videos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
gap: 24px;
margin-top: 40px;
}
.lv-video {
background: var(--cream-2);
border: 1px solid var(--line);
border-radius: 24px;
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease;
}
.lv-video:hover {
transform: translateY(-3px);
box-shadow: 0 20px 44px -20px rgba(29, 57, 53, 0.4);
}
.lv-video .frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.lv-video .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lv-video .frame .pill.tag {
position: absolute; top: 12px; left: 12px;
background: rgba(250, 242, 226, 0.92);
color: var(--ink-2);
pointer-events: none;
}
.lv-video .meta { padding: 16px 18px 18px; }
.lv-video .meta h3 {
margin: 0;
font-family: var(--serif);
font-size: 18px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lv-video .meta .sub {
margin-top: 9px;
color: var(--ink-3);
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 4px;
}
.lv-video .meta .sub > span { display: inline-flex; align-items: center; gap: 4px; }
/* ---------- Tickets — quiet, editorial ---------- */
.lv-tickets {
display: flex; flex-direction: column;
border-top: 1px solid var(--line);
}
.lv-ticket-row {
display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: center;
gap: 28px;
padding: 22px 4px;
border-bottom: 1px solid var(--line);
transition: background .15s ease;
}
.lv-ticket-row:hover { background: rgba(29,57,53,0.025); }
.lv-ticket-row .prov {
font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
display: flex; align-items: center; gap: 8px;
}
.lv-ticket-row .prov .inst {
display: inline-flex; align-items: center; gap: 4px;
color: var(--mint); letter-spacing: 0.06em;
}
.lv-ticket-row .name {
font-family: var(--serif); font-weight: 600; font-size: 18px;
letter-spacing: -0.01em; color: var(--ink); line-height: 1.2;
}
.lv-ticket-row .rate {
display: flex; align-items: center; gap: 6px;
font-family: var(--sans); font-size: 13px; color: var(--ink-2);
white-space: nowrap;
}
.lv-ticket-row .rate .star { color: var(--sun); width: 15px; height: 15px; }
.lv-ticket-row .rate .ct { color: var(--ink-3); font-size: 12px; }
.lv-ticket-row .from {
text-align: right; white-space: nowrap;
}
.lv-ticket-row .from .lbl { font-family: var(--sans); font-size: 11px; color: var(--ink-3); }
.lv-ticket-row .from .amt { font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.lv-ticket-row .book {
display: inline-flex; align-items: center; gap: 7px;
padding: 11px 18px; border-radius: 100px;
border: 1px solid var(--line); background: var(--cream);
font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink);
transition: background .15s ease, color .15s ease, border-color .15s ease;
white-space: nowrap;
}
.lv-ticket-row:hover .book { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.lv-disclosure {
font-family: var(--serif-body); font-style: italic;
font-size: 12.5px; color: var(--ink-3); margin-top: 18px;
max-width: 620px;
}
/* ---------- Logistics cards ---------- */
.lv-logi {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1px; background: var(--line);
border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
}
.lv-logi .cell {
background: var(--cream); padding: 30px 30px 34px;
}
.lv-logi .cell .ic { color: var(--coral); margin-bottom: 16px; }
.lv-logi .cell h4 {
font-family: var(--serif); font-weight: 700; font-size: 21px;
letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px;
}
.lv-logi .cell p { font-family: var(--serif-body); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.lv-logi .cell a { color: var(--coral); text-decoration: underline; text-decoration-color: var(--coral-soft); text-underline-offset: 2px; }
/* ---------- Tips ---------- */
.lv-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lv-tip {
padding: 26px 26px 28px; border-radius: 20px;
background: var(--cream-2);
display: flex; flex-direction: column; gap: 12px;
}
.lv-tip .ic { color: var(--ink-2); }
.lv-tip h4 { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.lv-tip p { font-family: var(--serif-body); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.lv-tip a { color: var(--coral); }
/* ---------- History ---------- */
.lv-theft {
display: grid; grid-template-columns: 150px 1fr;
gap: 28px;
padding: 28px 0;
border-top: 1px solid rgba(250,242,226,0.16);
}
.lv-theft .step {
font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--sun);
padding-top: 4px;
}
.lv-theft p { font-family: var(--serif-body); font-size: 16px; line-height: 1.6; color: rgba(250,242,226,0.84); }
.lv-theft em { font-style: italic; color: var(--cream); }
.lv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.lv-pair .col h4 {
font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--coral); margin-bottom: 14px;
}
.lv-pair .col p { font-family: var(--serif-body); font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
/* ---------- FAQ accordion ---------- */
.lv-faq { border-top: 1px solid var(--line); }
.lv-faq-item { border-bottom: 1px solid var(--line); }
.lv-faq-q {
width: 100%; text-align: left;
display: flex; align-items: center; justify-content: space-between;
gap: 24px; padding: 18px 4px;
font-family: var(--sans); font-weight: 500; font-size: 14px;
letter-spacing: 0; color: var(--ink); cursor: pointer;
}
.lv-faq-q .toggle {
width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
border: 1px solid var(--line);
display: grid; place-items: center; color: var(--ink-2);
font-size: 16px; line-height: 1;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lv-faq-q .toggle::before { content: "+"; }
.lv-faq-item.open .lv-faq-q .toggle { background: var(--coral); color: var(--cream); border-color: var(--coral); }
.lv-faq-item.open .lv-faq-q .toggle::before { content: "\2212"; }
.lv-faq-a {
overflow: hidden; max-height: 0;
transition: max-height .35s ease, opacity .3s ease, padding .35s ease;
opacity: 0;
}
.lv-faq-item.open .lv-faq-a { max-height: 320px; opacity: 1; padding: 0 60px 30px 4px; }
.lv-faq-a p { font-family: var(--serif-body); font-size: 16px; line-height: 1.62; color: var(--ink-2); }
/* ---------- Sources ---------- */
.lv-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.lv-source {
display: grid; grid-template-columns: auto 1fr; gap: 12px;
padding: 16px 0; border-top: 1px solid var(--line);
}
.lv-source .v { color: var(--mint); margin-top: 2px; }
.lv-source .ttl { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); }
.lv-source .ttl a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.lv-source .desc { font-family: var(--serif-body); font-size: 13px; line-height: 1.5; color: var(--ink-3); margin-top: 3px; }
/* ---------- Explore the area (clean map CTA) ---------- */
.lv-map {
display: flex; align-items: center; justify-content: space-between;
gap: 32px; padding: 28px 34px;
border-radius: 24px; border: 1px solid var(--line);
background: var(--cream-2);
}
.lv-map .ttl { font-family: var(--serif); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: var(--ink); }
.lv-map .sub { font-family: var(--serif-body); font-size: 14.5px; color: var(--ink-3); margin-top: 4px; }
/* ---------- Related places ---------- */
.lv-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lv-related .card-place { position: relative; }
.lv-related figure {
width: 100%; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden;
background: var(--cream-2); position: relative;
}
.lv-related img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lv-related .card-place:hover img { transform: scale(1.05); }
.lv-related figure::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(19,28,31,0.6));
}
.lv-related .meta {
position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
color: var(--cream);
}
.lv-related .meta .typ {
font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: rgba(250,242,226,0.78); margin-bottom: 5px;
}
.lv-related .meta h4 { font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; line-height: 1.05; }
/* Pixel-fit overrides — suppress the JS-injected currency-hint span inside
the editorial ticket list (design has a single EUR amount), and force
the related-card title onto its cream gradient overlay (the global
editorial-content rules were specificity-winning over .lv-related .meta). */
.lv-ticket-row [data-ccy-hint] { display: none; }
.lv-related .meta h4 { color: var(--cream); }
/* The global `article a:not(...)` editorial link rule (animated coral underline)
was specificity-winning over `.lv-source .ttl a`, turning source titles coral.
The #sources ID lifts these back to the design's ink title + static hairline
underline. Also kills the gradient-underline background-image. */
#sources .lv-source .ttl a {
color: var(--ink);
text-decoration: underline; text-decoration-color: var(--line);
text-underline-offset: 2px; background-image: none;
}
#sources .lv-source .ttl a:hover { color: var(--coral); text-decoration-color: var(--coral); background-image: none; }
/* Verified/valid check glyph (class "v") — design renders it at ~18px (sm),
not the 36px .line-icon base. */
.line-icon.v { width: 18px; height: 18px; }
/* Ghost button on dark (card-ink) surfaces — cream text + icon, no fill. The
design's "Plan and listen" band uses these understated buttons so the only
loud CTA on the page stays the coral "Download the app" in the app section. */
/* Place page (louvre-original-text design) uses borderless ghost buttons — the
coral glow / soft fill on the hero "Listen" is the only button emphasis; all
secondary buttons (View map, Join, All-N places) are plain text + icon, no
outline. Scoped to .place-redesign so other page types keep their borders. */
.place-redesign .btn-ghost { border-color: transparent; }
/* ---------- Partner / DMC pages (e.g. Beyond the Plains Safaris) ----------
Free-form legacy markdown, but lighten the flow vs the default legacy idiom:
clean single-column lists (not a white card per bullet) and framed, rounded
inline photos. Scoped to .partner-page so other legacy pages are untouched. */
.partner-page .editorial-content ul { display: block; margin: 1.1rem 0; }
.partner-page .editorial-content ul li {
display: flex; gap: 11px; align-items: flex-start;
background: transparent; border: 0; box-shadow: none;
padding: 5px 0; border-radius: 0;
font-family: var(--serif-body); color: var(--ink-2); line-height: 1.55;
}
.partner-page .editorial-content ul li::before {
content: "✓"; font-family: var(--sans); font-weight: 600;
color: var(--coral); font-size: 0.9rem; line-height: 1.5;
margin-top: 1px; flex-shrink: 0;
}
.partner-page .editorial-content img {
display: block; border-radius: 20px; margin: 1.75rem 0;
box-shadow: 0 18px 44px -22px rgba(29,57,53,0.4);
}
.partner-page .editorial-content img[src$="logo.png"] {
max-width: 200px; margin: 0.5rem 0 1.5rem; box-shadow: none; border-radius: 0;
}
.partner-page .editorial-content h2 { margin-top: 3.25rem; }
.btn-ghost-cream { background: transparent; color: var(--cream); padding-left: 0; }
.btn-ghost-cream .line-icon { color: inherit; }
.btn-ghost-cream:hover { color: #fff; opacity: 0.82; }
/* Hero facts strip — coral icon sits beside the label/value block (design v1). */
.lv-facts .fact .line-icon { color: var(--coral); margin-top: 2px; }
/* FAQ question — match the design's rendered 15px / 400 sans. */
.audiala-page .lv-faq-q { font-size: 15px; font-weight: 400; }
/* ---------- Full-bleed section bands ----------
The design alternates cream / cream-2 (#F4E6C2) bands — "In pictures",
"Visitor logistics" and "Frequently asked" sit on cream-2. The article body
lives in a 1184px wrapper centred in the 1280px sheet (48px gutters), so a
band breaks out -48px each side to reach the sheet edges, then re-insets its
content by 48px. !important overrides the Tailwind `.space-y-24` margin that
would otherwise win on specificity. */
.lv-band {
margin: 0 -48px !important;
padding: 88px 48px;
background: var(--cream-2);
}
.space-y-24 > .lv-band + * { margin-top: 0 !important; }
/* Full-bleed ink band (history "theft" story) — same breakout, dark ground. */
.lv-band.ink { background: var(--ink); color: var(--cream); }
.lv-band.ink .lv-prose p { color: rgba(250,242,226,0.85); }
.lv-band.ink .f-eyebrow { color: var(--sun); }
/* Section vertical rhythm — the design gives every section 88px internal
padding (flush boxes); the local article relies on space-y-24 (96px) and the
bare sections had no padding, so transparent→transparent transitions were
~65px too tight. Add internal block padding so content-to-content lands near
the design's ~160px. */
.lv-sec { padding-block: 34px; }
/* A bare section that immediately follows a band sits flush to it (band's
margin-top was zeroed); give it a little more top room. */
.space-y-24 > .lv-band + .lv-sec { padding-top: 64px; }
/* App-CTA two-column grid — design is 1.4fr / 1fr (text wider than the phone),
not the equal auto-fit columns local had. Collapses on narrow viewports. */
.lv-appcta-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem,4vw,3.75rem); align-items: center; }
@media (max-width: 820px) { .lv-appcta-grid { grid-template-columns: 1fr; } }
/* details-based FAQ — mirrors the .open-class selectors above so native
elements get the same open-state styling without JS. */
details.lv-faq-item[open] .lv-faq-q .toggle {
background: var(--coral); color: var(--cream); border-color: var(--coral);
}
details.lv-faq-item[open] .lv-faq-q .toggle::before { content: "\2212"; }
details.lv-faq-item[open] .lv-faq-a {
max-height: 320px; opacity: 1; padding: 0 60px 30px 4px;
}
details.lv-faq-item summary::-webkit-details-marker { display: none; }
details.lv-faq-item summary { list-style: none; }
/* ===================================================================
MOBILE RESPONSIVE LAYER (added 2026-06-16)
------------------------------------------------------------------
redesign.css was authored desktop-first against the fixed 1280px
mock and shipped with almost no phone breakpoints, so on a 390px
viewport the nav links clipped off-screen, the hero titles
(inline 140px / 220px) spanned multiple screens and overflowed,
and every multi-column .lv-* / inline-grid stayed side-by-side and
got squeezed/clipped. This block adds the missing phone rules:
a hamburger nav, fluid hero/heading type, single-column grids and
tightened gutters. Verified at 390px across home/city/country/
place pages. `!important` is used deliberately where the target is
an inline style (inline wins over classes otherwise).
=================================================================== */
/* Hamburger button + mobile menu panel (base appearance; toggled in the
640px query). Markup lives in partials/redesign/nav.html. */
.nav-burger {
display: none; /* desktop: hidden */
place-items: center; gap: 5px;
width: 44px; height: 44px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--cream);
flex-direction: column;
}
.nav-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); }
.nav-mobile-panel {
display: none; /* hidden by default; shown on mobile when .nav.nav-open */
position: absolute; top: 100%; inset-inline: 0;
flex-direction: column;
background: var(--cream);
border-bottom: 1px solid var(--line);
box-shadow: 0 18px 40px -16px rgba(29, 57, 53, 0.28);
padding: 8px 18px 18px;
z-index: 40;
}
.nav-mobile-panel a { padding: 14px 2px; font-family: var(--sans); font-size: 16px; color: var(--ink); border-bottom: 1px solid var(--line); }
.nav-mobile-panel a:last-child { border-bottom: 0; }
.nav-mobile-panel .btn-ink { margin-top: 12px; justify-content: center; padding: 14px; border-bottom: 0; }
.nav-mobile-panel .panel-lang { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 4px; border-bottom: 1px solid var(--line); }
.nav-mobile-panel .panel-lang a { border: 1px solid var(--line); border-radius: 100px; padding: 6px 12px; font-size: 13px; }
/* Mobile sticky "Get the app" CTA (markup in redesign/nav.html). Hidden on
desktop and until the hero scrolls off (.is-visible added by JS). */
.mobile-cta-bar { display: none; }
@media (max-width: 640px) {
html, body { overflow-x: hidden; }
/* Desktop mock relied on fixed 1280px + content-box math; on full-width
phones that overflows. Force border-box so padding stays inside width. */
.audiala-page, .audiala-page *, .audiala-page *::before, .audiala-page *::after { box-sizing: border-box; }
/* Desktop-gutter sections (hero etc.) tighten on phones. */
.audiala-page section.responsive-section-gutters { padding-left: 20px !important; padding-right: 20px !important; }
/* ---- Nav → hamburger ---- */
.nav { padding: 14px 18px; }
.nav-links,
.nav-lang,
.nav-tools > .btn-ink { display: none !important; } /* collapse into panel */
.nav-search { padding: 10px; gap: 0; }
.nav-search > span { display: none; } /* icon-only; drop label + ⌘K */
.nav-burger { display: inline-grid !important; }
.nav-mobile-panel { display: none; }
.nav.nav-open .nav-mobile-panel { display: flex; }
/* ---- Hero + display type: fluid, never wider than the viewport ---- */
.audiala-page h1.f-display { font-size: clamp(42px, 13vw, 92px) !important; line-height: 0.95; overflow-wrap: anywhere; hyphens: auto; }
.lv-hero-title { font-size: clamp(40px, 12vw, 150px); overflow-wrap: anywhere; }
/* Sub-headings carry big inline px sizes (24–88px) that overflow long words.
Cap every non-hero display heading to a phone scale (h1 heroes excluded). */
.audiala-page h2.f-display, .audiala-page h3.f-display, .audiala-page h4.f-display,
.audiala-page div.f-display { font-size: clamp(24px, 7vw, 46px) !important; line-height: 1.02; }
.audiala-page .f-display, .audiala-page .lv-prose h2, .audiala-page .lv-prose h3 { overflow-wrap: anywhere; }
/* Numbered section titles (redesign/section-title.html). */
.audiala-page h2 span.responsive-section-number { font-size: clamp(28px, 7.5vw, 44px) !important; line-height: 1.02; overflow-wrap: anywhere; }
/* ---- Section heads / stats ---- */
.section { padding: 48px 20px; }
.section.tight { padding: 36px 20px; }
.section.big { padding: 60px 20px; }
.section-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(30px, 8vw, 44px); }
/* Stat values are inline 36px display figures; long TEXTUAL values
("Spring (April–May) or Autumn…", currencies) exploded to 4–5 ragged
lines. Cap so numbers stay readable and text stops wrapping wildly. */
.stat-n { font-size: clamp(20px, 6vw, 28px) !important; line-height: 1.1; }
/* ---- Footer ---- */
.footer { padding: 56px 20px 28px; }
.footer .lead { font-size: clamp(30px, 8.5vw, 56px); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; margin-top: 36px; padding-bottom: 36px; }
.footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
/* ---- Collapse multi-column grids (class-based, lv-*) ---- */
.lv-facts, .lv-logi, .lv-tips, .lv-pair, .lv-sources, .lv-see-item, .lv-theft { grid-template-columns: 1fr !important; }
/* Intro body runs as CSS columns on desktop — single column on mobile. */
.u-ab5e6084be { column-count: 1 !important; }
/* Facts strip stacks: vertical rules become row separators, tighter pads. */
.lv-facts .fact { padding: 12px 4px; }
.lv-facts .fact + .fact { border-left: 0; border-top: 1px solid var(--line); }
/* "Explore the Area" map card: stack copy above the button. */
.lv-map { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; }
.lv-gallery .wide { grid-column: auto !important; }
.lv-gallery .tall { grid-row: auto !important; }
.lv-ticket-row { grid-template-columns: 1fr !important; gap: 10px; }
.lv-band { margin: 0 -20px !important; padding: 48px 20px; }
details.lv-faq-item[open] .lv-faq-a { padding: 0 4px 24px 4px !important; }
/* Responsive template grids (incl. sections that ARE grids, e.g. .lv-sec)
collapse to 1 column. Re-widen photo grids to 2-col after. */
.audiala-page .responsive-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
.audiala-page .lv-gallery, .audiala-page .lv-related { grid-template-columns: repeat(2, 1fr) !important; }
.lv-audio-preview {
box-sizing: border-box;
width: 100%;
max-width: calc(100vw - 40px);
min-width: 0;
padding: 16px;
border-radius: 20px;
overflow: hidden;
}
.lv-audio-preview-main { grid-template-columns: auto minmax(0, 1fr); }
.lv-audio-preview-duration { display: none; }
.lv-audio-preview-footer { align-items: stretch; flex-direction: column; }
.lv-audio-preview-actions { align-items: stretch; flex-direction: column; }
.lv-audio-preview-actions .btn { width: 100%; justify-content: center; }
/* City hero stat strip is position:absolute over the photo on desktop; on
mobile un-absolute it so it can't overlap the (now larger-relative) title. */
.audiala-page section .card.responsive-overlay-card {
position: static !important; left: auto !important; right: auto !important; bottom: auto !important;
margin-top: 16px;
}
/* Pricing comparison table → scroll horizontally instead of overflowing page. */
.audiala-page table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Guides search+filter bar → stack the search over wrapped, centered pills
(the [search | pills] flex row is too wide for a phone). */
.audiala-page .card-2:has(.guides-pills) { flex-direction: column; align-items: stretch; border-radius: 24px; }
.guides-pills { flex-wrap: wrap; justify-content: center; }
/* ---- Review pass 2 (2026-06-16) ---- */
/* Editor's-pick / featured "big" cards are `grid-row:span 2; display:flex`
with a height:100% photo. When the grid collapses to 1 col, the span-2
loses meaning and the card height collapses to ~0, so the absolute
overlays (pill + title + meta) pile up on top of each other. Give the
card a real aspect box so the photo fills and overlays sit correctly —
this also caps the card height so 1 fits cleanly per phone screen. */
.audiala-page article.responsive-tall-card {
aspect-ratio: 4 / 5 !important; min-height: 360px;
}
/* Guides region titles are an inline 88px → "Americas" etc. clip off
the right edge with the coral period off-screen. */
.audiala-page .guides-region h2 a { font-size: clamp(36px, 12vw, 88px) !important; overflow-wrap: anywhere; }
/* Drop-caps (place article + about manifesto) are 90px+ and force ragged
orphan wraps on a 390px column — shrink on phones. */
.audiala-page .lv-dropcap::first-letter,
.audiala-page .dropcap::first-letter { font-size: 52px !important; line-height: 0.8 !important; }
/* Pricing comparison table: keep the horizontal-scroll container (set
earlier) but tighten cells so more columns fit before scrolling and
headers stop wrapping mid-word. */
.audiala-page table th, .audiala-page table td { padding: 12px 10px !important; font-size: 12.5px !important; }
/* Cookie consent banner covered ~40% of the hero on first load. Compact it
on phones (smaller heading/copy/padding) so the hero stays visible. */
#audiala-consent-banner { padding: 14px 16px !important; gap: 8px !important; border-radius: 18px !important; }
#audiala-consent-banner .consent-h { font-size: 17px !important; }
#audiala-consent-banner .consent-copy { font-size: 12.5px; line-height: 1.45; }
/* Sticky "Get the app" CTA: floating pill, revealed on scroll. Sits above
the cookie banner is avoided by lower z-index than the banner (z 90). */
.mobile-cta-bar {
position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 60;
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 15px 18px; border-radius: 100px;
background: var(--coral); color: #fff;
font-family: var(--sans); font-weight: 700; font-size: 15px;
box-shadow: 0 14px 32px -8px rgba(224, 122, 95, 0.6);
opacity: 0; transform: translateY(120%); pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
.mobile-cta-bar .line-icon { color: #fff; }
.mobile-cta-bar.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Featured "big" cards (home + guides) carry BOTH the photo's own caption
(.ph-label) and the card's name overlay — redundant, and they collide
once the card is shortened to a mobile aspect box. Drop the photo caption
on these cards (the card overlay already names the destination). */
.audiala-page article.responsive-tall-card .ph-label { display: none; }
/* ---- Home refinements (2026-06-16) ---- */
/* Circular cream backdrop behind the app-section phone mockup bleeds out as
a stray ellipse on a phone (inset:-40px on a now-full-width container) —
hide on mobile; the desktop halo is kept. */
.phone-halo { display: none !important; }
/* Inline section-head titles (e.g. "Where we're listening" at 72px) are too
big on a phone — cap them. */
.audiala-page .section-head h2 span { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.0; }
/* Hero action buttons: stack full-width so each label fits on one line
instead of wrapping in a cramped 2-up row. */
.hero-actions { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
.hero-actions .btn { width: 100%; justify-content: center; }
.audio-preview-strip { max-width: none; }
.audio-preview-copy p { font-size: 16px; }
/* Metric/stat cards more compact: 2-up the home stat strip, tighten padding,
drop the desktop divider rules that look wrong once stacked. */
.audiala-page .card-2:has(.stat) {
grid-template-columns: 1fr 1fr !important;
padding: 20px !important; gap: 16px 14px !important;
}
.audiala-page .card-2:has(.stat) > .f-serif-it { grid-column: 1 / -1; }
.audiala-page .card-2:has(.stat) .stat,
.audiala-page .card-2:has(.stat) > .f-serif-it { border-left: 0 !important; padding-left: 0 !important; }
/* City/country hero stat strip: tighten padding/gap, drop stacked dividers. */
.audiala-page section .card.responsive-overlay-card { padding: 18px 20px !important; gap: 14px !important; }
.audiala-page section .card.responsive-overlay-card .stat { border-left: 0 !important; padding-left: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
.lv-audio-preview *,
.lv-audio-preview *::before,
.lv-audio-preview *::after { transition: none !important; }
}
@media (max-width: 380px) {
.section, .footer, .nav { padding-left: 16px; padding-right: 16px; }
.lv-band { margin: 0 -16px !important; padding-left: 16px; padding-right: 16px; }
.footer-grid { grid-template-columns: 1fr; }
}
/* ===== static/css/modules/components/dynamic-variants.css ===== */
/* Data-driven presentation variants. Templates choose semantic state classes;
every tunable declaration remains in this module. */
.display-title { font-variation-settings: "opsz" 144, "SOFT" 60; }
.audiala-page h1.display-title--country { font-size: 200px; line-height: 0.86; letter-spacing: -0.04em; margin: 0; }
.audiala-page h1.display-title--city { font-size: 220px; line-height: 0.86; letter-spacing: -0.04em; margin: 0; }
.audiala-page h1.display-title--city-legacy { font-size: 104px; line-height: 0.9; letter-spacing: -0.035em; margin: 0; }
.audiala-page h1.display-title--download { font-size: clamp(46px, 11vw, 148px); line-height: 0.92; letter-spacing: -0.04em; }
.audiala-page h2.display-title--download-cta {
font-size: clamp(40px, 10vw, 120px);
line-height: 0.98;
margin: 24px auto 0;
max-width: 1080px;
}
.audiala-page h1.display-title--audience { font-size: 92px; line-height: 0.92; margin-top: 22px; font-variation-settings: "opsz" 144, "SOFT" 50; }
.audiala-page h1.display-title--listing { font-size: 120px; line-height: 0.9; }
.audiala-page h1.display-title--guides { font-size: 132px; line-height: 0.9; }
.audiala-page h1.display-title--pricing { font-size: 124px; line-height: 0.92; }
.audiala-page h1.display-title--region { font-size: 140px; line-height: 0.88; }
.audiala-page h1.display-title--home { font-size: 140px; margin-top: 28px; font-variation-settings: "opsz" 144, "SOFT" 50; }
.stats-overlay {
position: absolute;
left: 32px;
right: 32px;
bottom: 32px;
padding: 20px 28px;
display: grid;
gap: 32px;
align-items: center;
}
.stats-cols-1 { grid-template-columns: repeat(1, 1fr); }
.stats-cols-2 { grid-template-columns: repeat(2, 1fr); }
.stats-cols-3 { grid-template-columns: repeat(3, 1fr); }
.stats-cols-4 { grid-template-columns: repeat(4, 1fr); }
.stats-cols-5 { grid-template-columns: repeat(5, 1fr); }
.stats-cols-6 { grid-template-columns: repeat(6, 1fr); }
.stats-overlay--action.stats-cols-1 { grid-template-columns: repeat(1, 1fr) auto; }
.stats-overlay--action.stats-cols-2 { grid-template-columns: repeat(2, 1fr) auto; }
.stats-overlay--action.stats-cols-3 { grid-template-columns: repeat(3, 1fr) auto; }
.stats-overlay--action.stats-cols-4 { grid-template-columns: repeat(4, 1fr) auto; }
.stats-overlay--action.stats-cols-5 { grid-template-columns: repeat(5, 1fr) auto; }
.stats-overlay--action.stats-cols-6 { grid-template-columns: repeat(6, 1fr) auto; }
.stat--separated { border-left: 1px solid var(--line); padding-left: 24px; }
.stat--wide-separated { padding-left: 32px; }
.history-chapter {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 48px;
align-items: start;
}
.history-chapter.is-separated { border-top: 1px solid #ece0b8; padding-top: 64px; }
.faq-source-grid { display: grid; grid-template-columns: 1fr; gap: 60px; }
.faq-source-grid.has-sources { grid-template-columns: 1.4fr 1fr; }
.ranked-app { padding: 28px 32px; }
.ranked-app.is-audiala { border: 2px solid var(--coral); }
.ranked-app-number { font-size: 40px; color: var(--ink-3); }
.ranked-app.is-audiala .ranked-app-number { color: var(--coral); }
.support-method-icon {
width: 56px;
height: 56px;
border-radius: 16px;
background: #ece0b8;
display: grid;
place-items: center;
}
.support-method-icon.is-coral { background: var(--coral); }
.pricing-plan {
padding: 32px;
border: 1px solid rgba(29, 57, 53, 0.14);
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
min-height: 580px;
}
.pricing-plan.is-featured { border: 0; }
.pricing-plan-tag { color: var(--coral); }
.pricing-plan-name { font-size: 48px; color: var(--ink); }
.pricing-plan-pitch { font-size: 16px; color: var(--ink-2); margin-top: 6px; }
.pricing-plan-price-block {
padding: 20px 0;
border-top: 1px solid rgba(29, 57, 53, 0.14);
border-bottom: 1px solid rgba(29, 57, 53, 0.14);
}
.pricing-plan-price {
font-size: 72px;
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--ink);
}
.pricing-plan-cadence { color: var(--ink-3); margin-top: 6px; }
.pricing-plan-item {
display: flex;
gap: 12px;
align-items: start;
font-family: Inter, sans-serif;
font-size: 14px;
color: var(--ink);
}
.pricing-plan-item-icon {
color: var(--coral);
flex-shrink: 0;
margin-top: 2px;
display: inline-flex;
}
.pricing-plan.is-featured .pricing-plan-tag,
.pricing-plan.is-featured .pricing-plan-item-icon { color: var(--sun); }
.pricing-plan.is-featured .pricing-plan-name,
.pricing-plan.is-featured .pricing-plan-price { color: var(--cream); }
.pricing-plan.is-featured .pricing-plan-pitch { color: rgba(250, 242, 226, 0.7); }
.pricing-plan.is-featured .pricing-plan-price-block {
border-color: rgba(250, 242, 226, 0.18);
}
.pricing-plan.is-featured .pricing-plan-cadence { color: rgba(250, 242, 226, 0.6); }
.pricing-plan.is-featured .pricing-plan-item { color: rgba(250, 242, 226, 0.9); }
.pricing-compare-value {
padding: 16px;
color: #465c58;
font: 14px Inter, -apple-system, "Helvetica Neue", system-ui, sans-serif;
}
.pricing-compare-value.is-mark {
font: 22px Fraunces, "Source Serif 4", Georgia, serif;
}
.feature-section.is-alt { background: #f4e6c2; }
.feature-copy.is-reversed { order: 2; }
.feature-media.is-reversed { order: 1; }
.hours-row { display: flex; gap: 12px; padding: 10px 0; }
.hours-row--plain { display: block; }
.hours-row.is-separated { border-top: 1px solid var(--line-soft); }
.timeline-dot {
position: absolute;
left: 0;
top: 2px;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--coral);
box-shadow: 0 0 0 4px #1d3935;
}
.timeline-dot.is-figure { background: var(--sun); }
.timeline-year { color: var(--coral); }
.timeline-year.is-figure { color: var(--sun); }
.itinerary-day-header {
padding: 32px 28px;
border-right: 1px solid var(--line);
background: var(--cream);
}
.itinerary-day-header.is-alt { background: var(--cream-2); }
.itinerary-stop { display: flex; gap: 14px; align-items: center; padding: 8px 0; }
.itinerary-stop.has-divider { border-bottom: 1px solid var(--line-soft); }
.device-mockup--w-280 { --device-max-width: 280px; }
.device-mockup--w-300 { --device-max-width: 300px; }
.device-mockup--w-320 { --device-max-width: 320px; }
.qf-fact { display: inline-flex; align-items: center; gap: 11px; }
.qf-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(232, 95, 51, 0.1);
color: var(--coral);
flex-shrink: 0;
}
.qf-icon { width: 1.05rem; height: 1.05rem; }
.qf-value { font-size: 0.92rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.faq-quick-answer { padding: 12px 0; }
.faq-quick-answer.is-separated { border-top: 1px solid var(--line); }
.ticket-freshness--dark { color: rgba(250, 242, 226, 0.75); }
.ticket-freshness--light { color: var(--ink-3); }
.hero-gradient-bg { background: #004b38; }
.hero-gradient-bg.is-hidden,
#hero-img.is-hidden { display: none; }
/* Named photo shapes replace the old free-form `style` parameter. */
.ph--hero-wide { width: 100%; aspect-ratio: 21 / 9; border-radius: 32px; }
.ph--landscape-card { width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; }
.ph--landscape-compact { width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; }
.ph--phone-screen { width: 100%; aspect-ratio: 9 / 19.5; border-radius: 22px; }
.ph--portrait { width: 100%; aspect-ratio: 4 / 5; border-radius: 28px; }
.ph--portrait-large { width: 100%; aspect-ratio: 4 / 5; border-radius: 32px; }
.ph--wide-card { width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; }
.ph--fill-large { width: 100%; height: 100%; border-radius: 24px; }
.ph--fill-rounded { width: 100%; height: 100%; border-radius: 28px; }
.ph--landscape-5x4 { width: 100%; aspect-ratio: 5 / 4; border-radius: 14px; }
.ph--landscape-16x10 { width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; }
.ph--wide-hero { width: 100%; aspect-ratio: 16 / 9; border-radius: 28px; }
.ph--square-card { width: 100%; aspect-ratio: 1; border-radius: 18px; }
.ph--landscape-5x3 { width: 100%; aspect-ratio: 5 / 3; border-radius: 16px; }
.ph--wide-feature { width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; }
.ph--wide-compact { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; }
.ph--landscape-3x2 { width: 100%; aspect-ratio: 3 / 2; border-radius: 14px; }
.ph--square-large { width: 100%; aspect-ratio: 1; border-radius: 24px; }
.ph--landscape { width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; }
.ph--landscape-hero { width: 100%; aspect-ratio: 5 / 4; border-radius: 28px; }
.ph--square-ticket { width: 100%; aspect-ratio: 1; border-radius: 18px 18px 0 0; }
/* ===== static/css/modules/templates/layouts--_default--single.css ===== */
/* Extracted from layouts/_default/single.html; edit this module directly. */
.legal-content > p { color: #3f4944; line-height: 1.75; margin-bottom: 1.25rem; }
.legal-content > h2 { font-family: 'Noto Serif', serif; font-size: 1.5rem; font-weight: 700; color: #1c1b1b; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.legal-content > h3 { font-family: 'Noto Serif', serif; font-size: 1.125rem; font-weight: 600; color: #1c1b1b; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.legal-content > ul, .legal-content > ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.legal-content > ul > li, .legal-content > ol > li { color: #3f4944; line-height: 1.75; margin-bottom: 0.375rem; }
.legal-content > ul { list-style: disc; }
.legal-content > ol { list-style: decimal; }
.legal-content a { color: #004b38; text-decoration: underline; }
.legal-content a:hover { text-decoration: none; }
.legal-content strong { color: #1c1b1b; }
.legal-content > table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: 0.875rem; }
.legal-content > table th { text-align: left; font-weight: 600; color: #1c1b1b; padding: 0.625rem 0.75rem; border-bottom: 2px solid #c5ccc7; }
.legal-content > table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid #e0e3df; color: #3f4944; }
.legal-content > blockquote { border-left: 4px solid #004b38; padding-left: 1.5rem; font-style: italic; color: #3f4944; margin: 1.5rem 0; }
.legal-content > .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.25rem; }
.legal-toc a { color: #3f4944; text-decoration: none; transition: color 0.15s; }
.legal-toc a:hover { color: #004b38; }
.legal-toc li { padding: 0.25rem 0; }
@media (min-width: 768px) {
.legal-content > h2 { font-size: 1.75rem; }
.legal-content > h3 { font-size: 1.25rem; }
}
/* ===== static/css/modules/templates/layouts--about--list.css ===== */
/* Extracted from layouts/about/list.html; edit this module directly. */
.prose-redesign p { font-family: var(--serif-body); font-size: 18px; line-height: 1.65; color: var(--ink-2); margin-bottom: 20px; }
.prose-redesign h2 { font-family: var(--serif); font-weight: 700; font-size: 36px; letter-spacing: -0.02em; color: var(--ink); margin: 48px 0 18px; line-height: 1.05; }
.prose-redesign h3 { font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--ink); margin: 32px 0 12px; }
.prose-redesign a { color: var(--coral); border-bottom: 1px solid var(--coral); }
.prose-redesign ul { margin: 0 0 20px 0; padding-left: 22px; list-style: disc; }
.prose-redesign li { font-family: var(--serif-body); font-size: 17px; line-height: 1.6; color: var(--ink-2); margin-bottom: 8px; }
/* ===== static/css/modules/templates/layouts--ambassadors--single.css ===== */
/* Extracted from layouts/ambassadors/single.html; edit this module directly. */
.amb-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px }
.amb-step { padding:30px;border:1px solid rgba(29,57,53,.14);border-radius:18px;background:var(--cream) }
.amb-number { font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--coral);text-transform:uppercase }
.amb-rate { font-family:var(--serif);font-size:56px;line-height:1;color:var(--ink) }
.amb-detail { font-family:var(--serif-body);font-size:16px;line-height:1.55;color:var(--ink-2) }
@media(max-width:860px){
.amb-grid { grid-template-columns:1fr }
.amb-hero { padding:36px 22px 28px !important;text-align:left !important }
.amb-hero h1 { font-size:58px !important }
.amb-section { padding:68px 22px !important }
.amb-cta { padding:76px 22px !important }
.amb-cta h2 { font-size:48px !important }
}
/* ===== static/css/modules/templates/layouts--changelog--single.css ===== */
/* Extracted from layouts/changelog/single.html; edit this module directly. */
.cl-tag { display:inline-flex; align-items:center; padding:3px 11px; border-radius:100px; font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; flex-shrink:0; }
.cl-tag.new { background:#E85F33; color:#fff; }
.cl-tag.improved { background:#F3C43D; color:#1D3935; }
.cl-tag.fixed { background:transparent; color:var(--ink-3); border:1px solid #1D393530; }
.cl-entry { position:relative; padding-left:36px; padding-bottom:52px; }
.cl-entry::before { content:""; position:absolute; left:5px; top:8px; bottom:0; width:2px; background:#1D393520; }
.cl-entry:last-child::before { display:none; }
.cl-dot { position:absolute; left:0; top:4px; width:12px; height:12px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px var(--cream); }
/* ===== static/css/modules/templates/layouts--country--section.css ===== */
/* Extracted from layouts/country/section.html; edit this module directly. */
.audiala-country .editorial-content h2 {
font-family: var(--sans); color: #E85F33; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8rem;
margin: 3rem 0 1.25rem;
}
.audiala-country .editorial-content h2:first-child { margin-top: 0; }
.audiala-country .editorial-content h3 {
font-family: var(--serif); font-size: 1.9rem; font-weight: 700;
color: #1D3935; margin: 2.25rem 0 0.9rem; line-height: 1.15; letter-spacing: -0.02em;
}
.audiala-country .editorial-content p {
font-family: var(--serif-body); color: #465C58; line-height: 1.7;
font-size: 1.05rem; margin-bottom: 1.2rem;
}
.audiala-country .editorial-content em { color: #7C928E; font-style: italic; }
.audiala-country .editorial-content blockquote {
border-left: 3px solid #E85F33; padding-left: 1.25rem; margin: 2rem 0;
color: #1D3935; font-style: italic; font-family: var(--serif); font-size: 1.2rem;
}
.audiala-country .editorial-content a { color: #E85F33; text-decoration: underline; }
/* ---- Country timeline (section 06) ---- */
.audiala-country .ctl-list {
list-style: none; margin: 32px 0 0; padding: 0;
position: relative; max-width: 760px;
}
.audiala-country .ctl-list::before {
content: ""; position: absolute; left: 17px; top: 6px; bottom: 6px;
width: 2px; background: #465C58;
}
.audiala-country .ctl-item {
position: relative; padding: 0 0 36px 56px;
}
.audiala-country .ctl-item:last-child { padding-bottom: 0; }
.audiala-country .ctl-dot {
position: absolute; left: 0; top: 0; width: 36px; height: 36px;
border-radius: 50%; background: #F3C43D;
display: flex; align-items: center; justify-content: center;
}
/* ---- Reskinned video embeds (section 12) ---- */
.audiala-country .ctry-video {
background: #FAF2E2; border: 1px solid #ECE0B8; border-radius: 18px;
overflow: hidden;
}
.audiala-country .ctry-video-frame {
position: relative; aspect-ratio: 16/9; background: #1D3935;
}
.audiala-country .ctry-video-frame iframe {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.audiala-country .ctry-video-meta {
padding: 14px 18px; display: flex; align-items: center;
justify-content: space-between; gap: 12px;
}
/* ===== static/css/modules/templates/layouts--download--single.css ===== */
/* Extracted from layouts/download/single.html; edit this module directly. */
@media (max-width: 880px) {
.dl-page .dl-hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
.dl-page .dl-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
.dl-page .dl-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
.dl-page .dl-fineprint-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}
@media (max-width: 560px) {
.dl-page .dl-cols-3, .dl-page .dl-cols-4 { grid-template-columns: 1fr !important; }
.dl-page section { padding-left: 22px !important; padding-right: 22px !important; }
}
/* ===== static/css/modules/templates/layouts--faq--single.css ===== */
/* Extracted from layouts/faq/single.html; edit this module directly. */
.faq-q { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 18px 0; font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); letter-spacing: -0.01em; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q .mark { font-family: var(--sans); font-size: 22px; color: var(--coral); flex-shrink: 0; transition: transform .2s ease; line-height: 1; }
details[open] > .faq-q .mark { transform: rotate(45deg); }
.faq-a { font-family: var(--serif-body); font-size: 16px; line-height: 1.6; color: var(--ink-2); padding: 0 0 20px; max-width: 720px; }
.faq-row { border-top: 1px solid #1D393524; }
.faq-row:first-child { border-top: 0; }
/* ===== static/css/modules/templates/layouts--features--single--2.css ===== */
/* Extracted from layouts/features/single.html; edit this module directly. */
@media (max-width: 860px){
.cmp-desktop{ display:none !important; }
.cmp-mobile{ display:flex !important; }
}
/* ===== static/css/modules/templates/layouts--features--single.css ===== */
/* Extracted from layouts/features/single.html; edit this module directly. */
.cmp-table { width: 100%; border-collapse: collapse; }
.cmp-table th, .cmp-table td { padding: 18px 20px; text-align: start; vertical-align: top; }
.cmp-table thead th { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.cmp-table tbody tr { border-top: 1px solid #1D393524; }
.cmp-table .row-name { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--ink); }
.cmp-col-aud { background: #F8D8C8; }
.cmp-table thead .cmp-col-aud { border-radius: 18px 18px 0 0; }
.cmp-table tbody tr:last-child .cmp-col-aud { border-radius: 0 0 18px 18px; }
.cmp-val { font-family: var(--serif-body); font-size: 15.5px; color: var(--ink); font-weight: 600; }
.cmp-note { font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.cmp-card { background: var(--cream); border-radius: 18px; padding: 18px 20px; box-shadow: 0 2px 6px rgba(29,57,53,0.08), 0 18px 40px -16px rgba(29,57,53,0.28); }
/* ===== static/css/modules/templates/layouts--page--single.css ===== */
/* Extracted from layouts/page/single.html; edit this module directly. */
.prose-redesign p { font-family: var(--serif-body); font-size: 18px; line-height: 1.65; color: var(--ink-2); margin-bottom: 20px; }
.prose-redesign h2 { font-family: var(--serif); font-weight: 700; font-size: 36px; letter-spacing: -0.02em; color: var(--ink); margin: 48px 0 18px; line-height: 1.05; }
.prose-redesign h3 { font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--ink); margin: 32px 0 12px; }
.prose-redesign a { color: var(--coral); border-bottom: 1px solid var(--coral); }
.prose-redesign ul, .prose-redesign ol { margin: 0 0 20px 0; padding-left: 22px; }
.prose-redesign ul { list-style: disc; }
.prose-redesign ol { list-style: decimal; }
.prose-redesign li { font-family: var(--serif-body); font-size: 17px; line-height: 1.6; color: var(--ink-2); margin-bottom: 8px; }
.prose-redesign em { font-style: italic; }
.prose-redesign strong { color: var(--ink); font-weight: 700; }
.prose-redesign blockquote { border-left: 3px solid var(--coral); padding-left: 22px; margin: 28px 0; font-family: var(--serif-it); font-style: italic; color: var(--ink); }
/* ===== static/css/modules/templates/layouts--partials--city-highlights.css ===== */
/* Extracted from layouts/partials/city-highlights.html; edit this module directly. */
.city-highlights-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) {
.city-highlights-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.city-highlight-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0, 75, 56, 0.08);
border-radius: 1.5rem;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* ===== static/css/modules/templates/layouts--partials--city-tickets-carousel.css ===== */
/* Extracted from layouts/partials/city-tickets-carousel.html; edit this module directly. */
.ticket-card { transition: transform .15s ease, box-shadow .15s ease; }
.ticket-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -16px rgba(29,57,53,0.28); }
@media (max-width: 1024px) { #city-top-tickets [data-city-tickets-grid] { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 560px) { #city-top-tickets [data-city-tickets-grid] { grid-template-columns: repeat(2,1fr) !important; } }
/* ===== static/css/modules/templates/layouts--partials--city-timeline.css ===== */
/* Extracted from layouts/partials/city-timeline.html; edit this module directly. */
/* ── Timeline layout ───────────────────────────────────── */
.timeline {
position: relative;
max-width: 56rem;
margin: 0 auto;
}
/* Vertical spine — visible on desktop, hidden on mobile (border-left used instead) */
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, transparent, #004b38 3%, #004b38 97%, transparent);
transform: translateX(-50%);
}
/* ── Era headers ───────────────────────────────────────── */
.timeline-era {
display: flex;
align-items: center;
gap: 1rem;
margin: 2.5rem 0 1.5rem;
position: relative;
z-index: 2;
}
.timeline-era__line {
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, #004b38, transparent);
opacity: 0.3;
}
.timeline-era__label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #004b38;
background: #fcf9f8;
padding: 0.35rem 1rem;
border-radius: 9999px;
border: 1px solid rgba(0, 75, 56, 0.2);
white-space: nowrap;
}
/* ── Entry layout (desktop: alternating grid) ──────────── */
.timeline-entry {
display: grid;
grid-template-columns: 1fr 3rem 1fr;
align-items: start;
margin-bottom: 1.5rem;
position: relative;
}
/* Dot column — always centered */
.timeline-dot-col {
display: flex;
justify-content: center;
grid-column: 2;
grid-row: 1;
z-index: 2;
padding-top: 0.25rem;
}
/* Left entries: card in col 1 */
.timeline-entry--left .timeline-card {
grid-column: 1;
grid-row: 1;
text-align: right;
padding-right: 1.5rem;
}
/* Right entries: card in col 3 */
.timeline-entry--right .timeline-card {
grid-column: 3;
grid-row: 1;
text-align: left;
padding-left: 1.5rem;
}
/* ── Dot ────────────────────────────────────────────────── */
.timeline-dot {
width: 2rem;
height: 2rem;
border-radius: 9999px;
background: #004b38;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 4px #fcf9f8, 0 0 0 5px rgba(0, 75, 56, 0.2);
flex-shrink: 0;
}
.timeline-dot--figure {
background: #9d4228;
box-shadow: 0 0 0 4px #fcf9f8, 0 0 0 5px rgba(157, 66, 40, 0.2);
}
.timeline-dot--end {
background: #6f7a74;
box-shadow: 0 0 0 4px #fcf9f8, 0 0 0 5px rgba(111, 122, 116, 0.2);
}
/* ── Card ───────────────────────────────────────────────── */
.timeline-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 1rem;
padding: 1.25rem 1.5rem;
border: 1px solid rgba(190, 201, 194, 0.3);
transition: box-shadow 0.3s ease;
}
.timeline-card:hover {
box-shadow: 0 4px 20px rgba(0, 75, 56, 0.08);
}
/* Accent bar */
.timeline-entry--left .timeline-card {
border-right: 3px solid #004b38;
}
.timeline-entry--right .timeline-card {
border-left: 3px solid #004b38;
}
.timeline-entry--figure.timeline-entry--left .timeline-card {
border-right-color: #9d4228;
}
.timeline-entry--figure.timeline-entry--right .timeline-card {
border-left-color: #9d4228;
}
/* Year badge */
.timeline-year {
display: inline-block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #004b38;
background: rgba(0, 75, 56, 0.08);
padding: 0.2rem 0.6rem;
border-radius: 9999px;
}
.timeline-entry--figure .timeline-year {
color: #9d4228;
background: rgba(157, 66, 40, 0.08);
}
/* ── Terminal dot ──────────────────────────────────────── */
.timeline-end {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
padding-top: 1rem;
}
/* ── Scroll animation ─────────────────────────────────── */
.timeline-entry {
opacity: 0;
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.timeline-entry--left {
transform: translateX(-30px);
}
.timeline-entry--right {
transform: translateX(30px);
}
.timeline-entry.tl-visible {
opacity: 1;
transform: translateX(0);
}
/* ── Responsive: mobile single-column ─────────────────── */
@media (max-width: 767px) {
.timeline::before {
left: 1rem;
transform: none;
}
.timeline-entry {
display: flex;
gap: 0;
padding-left: 0;
}
.timeline-dot-col {
flex-shrink: 0;
width: 2rem;
margin-right: 1rem;
justify-content: center;
align-self: flex-start;
padding-top: 0.25rem;
}
.timeline-entry--left .timeline-card,
.timeline-entry--right .timeline-card {
text-align: left;
padding-left: 0;
padding-right: 0;
border-left: 3px solid #004b38;
border-right: none;
flex: 1;
}
.timeline-entry--figure .timeline-card {
border-left-color: #9d4228 !important;
border-right: none !important;
}
/* Mobile animation: slide up instead of left/right */
.timeline-entry--left,
.timeline-entry--right {
transform: translateY(20px);
}
.timeline-entry.tl-visible {
transform: translateY(0);
}
.timeline-era {
margin-left: 0;
}
.timeline-era__line:first-child {
display: none;
}
}
/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.timeline-entry {
opacity: 1;
transform: none;
transition: none;
}
}
/* ===== static/css/modules/templates/layouts--partials--cookie-banner.css ===== */
/* Extracted from layouts/partials/cookie-banner.html; edit this module directly. */
/* Scoped to the consent UI; redesign tokens (cream/ink/coral). */
#audiala-consent-root { font-family: var(--sans); }
/* Layout display lives here, NOT inline — inline display:flex would beat the
.hidden class the JS toggles (inline > class), leaving the modal overlay
permanently covering the page and swallowing every click. ID+.hidden
(specificity 1,1,0) overrides the ID display rule (1,0,0). */
#audiala-consent-banner { display: flex; flex-direction: column; }
#audiala-consent-modal { display: flex; align-items: center; justify-content: center; }
#audiala-consent-banner.hidden, #audiala-consent-modal.hidden { display: none !important; }
#audiala-consent-banner, #audiala-consent-modal .consent-card {
background: var(--cream);
border: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(29,57,53,0.08), 0 2px 6px rgba(29,57,53,0.08), 0 24px 60px -20px rgba(29,57,53,0.35);
}
.consent-eyebrow {
font-family: var(--sans); font-weight: 500; font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
}
.consent-h { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.0; margin: 0; }
.consent-copy { font-family: var(--serif-body); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
/* Secondary actions: ghost-text pill. Primary "accept/save" reuse .btn.btn-coral (white ink). */
.consent-btn-text {
padding: 11px 18px; border-radius: 100px; font-family: var(--sans);
font-size: 13.5px; font-weight: 500; color: var(--ink-2);
background: transparent; transition: background .15s ease, color .15s ease;
}
.consent-btn-text:hover { background: var(--cream-3); color: var(--ink); }
.consent-cat { background: var(--cream-2); border: 1px solid var(--line-soft); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
/* Switch — off ink-4, on coral; knob white (per [[ios-design-system]]). */
.consent-switch {
position: relative; display: inline-flex; height: 24px; width: 44px; flex-shrink: 0;
cursor: pointer; border-radius: 100px; border: none; padding: 0;
background: var(--ink-4); transition: background .15s ease;
}
.consent-switch[aria-checked="true"] { background: var(--coral); }
.consent-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.consent-switch .knob {
position: absolute; top: 3px; left: 3px; height: 18px; width: 18px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(29,57,53,0.3);
transition: transform .15s ease;
}
.consent-switch[aria-checked="true"] .knob { transform: translateX(20px); }
.consent-close {
width: 34px; height: 34px; border-radius: 50%; background: var(--cream-2);
color: var(--ink-2); font-size: 14px; transition: background .15s ease;
}
.consent-close:hover { background: var(--cream-3); }
/* ===== static/css/modules/templates/layouts--partials--editorial-attribution--2.css ===== */
/* Extracted from layouts/partials/editorial-attribution.html; edit this module directly. */
.editorial-attribution .attr-link:hover { color: var(--coral); }
/* ===== static/css/modules/templates/layouts--partials--editorial-attribution.css ===== */
/* Extracted from layouts/partials/editorial-attribution.html; edit this module directly. */
.editorial-provenance .attr-link:hover { color: var(--coral); }
/* ===== static/css/modules/templates/layouts--partials--famous-figures.css ===== */
/* Extracted from layouts/partials/famous-figures.html; edit this module directly. */
.famous-figure-card {
border-left: 3px solid var(--md-sys-color-primary, #004b38);
padding: 1.5rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 0 1rem 1rem 0;
}
/* ===== static/css/modules/templates/layouts--partials--global-search.css ===== */
/* Extracted from layouts/partials/global-search.html; edit this module directly. */
/* 2026 redesign reskin. Cream paper card, deep-teal ink, coral accent.
Tokens (--cream, --ink, --coral, --line, --serif, --sans) come from
static/css/redesign.css. No `display:` is set on .global-search-modal,
so the JS-toggled Tailwind `.hidden` (display:none) keeps working. */
.global-search-modal {
position: fixed;
inset: 0;
z-index: 80;
font-family: var(--sans);
}
.global-search-backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(19, 28, 31, 0.5);
backdrop-filter: blur(8px);
}
.global-search-dialog {
position: relative;
z-index: 1;
width: min(92vw, 54rem);
margin: clamp(4.5rem, 10vh, 7rem) auto 0;
animation: global-search-pop 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.global-search-shell {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 24px;
background: var(--cream);
box-shadow:
0 1px 0 rgba(29, 57, 53, 0.06),
0 30px 80px -30px rgba(29, 57, 53, 0.35);
}
.global-search-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem 1.5rem 1rem;
}
.global-search-eyebrow {
margin: 0 0 0.4rem;
color: var(--ink-3);
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.global-search-title {
margin: 0;
color: var(--ink);
font-family: var(--serif);
font-size: clamp(1.4rem, 2vw, 1.85rem);
font-weight: 700;
line-height: 1.0;
letter-spacing: -0.02em;
}
.global-search-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: 0;
border-radius: 999px;
background: var(--cream-2);
color: var(--ink-2);
transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.global-search-close:hover,
.global-search-close:focus-visible {
background: var(--cream-3);
color: var(--ink);
transform: translateY(-1px);
outline: none;
}
.global-search-close .material-symbols-outlined {
font-size: 1.25rem;
}
.global-search-input-shell {
position: relative;
margin: 0 1.5rem;
}
.global-search-input-icon {
position: absolute;
top: 50%;
left: 1.15rem;
transform: translateY(-50%);
color: var(--ink-3);
font-size: 1.4rem;
pointer-events: none;
}
.global-search-input {
width: 100%;
min-height: 4rem;
padding: 1.1rem 4rem 1.1rem 3.5rem;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
box-shadow: 0 1px 2px rgba(29, 57, 53, 0.04);
color: var(--ink);
font-family: var(--sans);
font-size: clamp(1rem, 2vw, 1.15rem);
font-weight: 500;
line-height: 1.2;
}
.global-search-input::placeholder {
color: var(--ink-3);
}
.global-search-input:focus {
outline: none;
border-color: var(--coral);
box-shadow: 0 0 0 4px rgba(232, 95, 51, 0.16);
}
.global-search-clear {
position: absolute;
top: 50%;
right: 0.9rem;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border: 0;
border-radius: 999px;
background: var(--cream-2);
color: var(--ink-2);
transition: background-color 150ms ease, color 150ms ease;
}
.global-search-clear:hover,
.global-search-clear:focus-visible {
background: var(--cream-3);
color: var(--ink);
outline: none;
}
.global-search-clear .material-symbols-outlined {
font-size: 1.1rem;
}
.global-search-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.5rem 0;
}
.global-search-status {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-height: 1.75rem;
color: var(--ink-3);
font-family: var(--sans);
font-size: 0.85rem;
font-weight: 500;
line-height: 1.3;
}
.global-search-status-dot {
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
background: var(--ink-4);
box-shadow: 0 0 0 0 rgba(232, 95, 51, 0.2);
flex-shrink: 0;
}
.global-search-status.is-loading .global-search-status-dot {
background: var(--coral);
animation: global-search-pulse 1.4s ease infinite;
}
.global-search-status.is-ready .global-search-status-dot {
background: var(--coral);
}
.global-search-status.is-error .global-search-status-dot {
background: var(--coral-deep);
}
.global-search-shortcuts {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.global-search-shortcut-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 1.65rem;
padding: 0 0.55rem;
border-radius: 999px;
background: var(--cream-3);
color: var(--ink-2);
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
}
.global-search-results {
margin: 1rem 1rem 0;
max-height: min(55vh, 36rem);
overflow-y: auto;
padding: 0.3rem;
}
.global-search-results::-webkit-scrollbar {
width: 0.6rem;
}
.global-search-results::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 999px;
background-clip: padding-box;
background-color: var(--ink-4);
}
.global-search-placeholder {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.05rem;
border: 1px dashed var(--ink-4);
border-radius: 18px;
background: var(--cream-2);
}
.global-search-placeholder-icon {
width: 3rem;
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: rgba(232, 95, 51, 0.12);
color: var(--coral);
font-size: 1.5rem;
flex-shrink: 0;
}
.global-search-placeholder-copy {
min-width: 0;
}
.global-search-placeholder-title {
margin: 0;
color: var(--ink);
font-family: var(--sans);
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
}
.global-search-placeholder-body {
margin: 0.3rem 0 0;
color: var(--ink-3);
font-size: 0.9rem;
line-height: 1.5;
}
.global-search-loading-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.global-search-spinner {
width: 1rem;
height: 1rem;
border: 2px solid rgba(232, 95, 51, 0.2);
border-top-color: var(--coral);
border-radius: 999px;
animation: global-search-spin 0.9s linear infinite;
flex-shrink: 0;
}
.global-search-list {
display: grid;
gap: 0.4rem;
}
.global-search-hit {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
border: 1px solid transparent;
border-left: 3px solid transparent;
border-radius: 14px;
background: transparent;
transition: border-color 150ms ease, background-color 150ms ease;
}
.global-search-hit:hover,
.global-search-hit:focus-visible {
background: var(--cream-2);
outline: none;
}
.global-search-hit.is-active {
background: rgba(232, 95, 51, 0.1);
border-left-color: var(--coral);
outline: none;
}
.global-search-hit-main {
display: flex;
align-items: flex-start;
gap: 0.9rem;
min-width: 0;
}
.global-search-hit-icon {
width: 2.6rem;
height: 2.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--cream-3);
color: var(--ink-2);
font-size: 1.3rem;
flex-shrink: 0;
}
.global-search-hit.is-active .global-search-hit-icon {
background: rgba(232, 95, 51, 0.18);
color: var(--coral-deep);
}
.global-search-hit-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.18rem;
}
.global-search-hit-kicker {
color: var(--ink-3);
font-family: var(--sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
line-height: 1.2;
text-transform: uppercase;
}
.global-search-hit-title {
color: var(--ink);
font-family: var(--sans);
font-size: 1rem;
font-weight: 600;
line-height: 1.25;
}
.global-search-hit-meta {
color: var(--ink-3);
font-size: 0.9rem;
line-height: 1.45;
}
.global-search-hit-trailing {
display: flex;
align-items: center;
gap: 0.55rem;
flex-shrink: 0;
}
.global-search-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.9rem;
min-height: 1.9rem;
padding: 0 0.65rem;
border-radius: 999px;
background: var(--coral);
color: #fff;
font-family: var(--sans);
font-size: 0.82rem;
font-weight: 600;
line-height: 1;
}
.global-search-arrow {
color: var(--ink-4);
font-size: 1.1rem;
transition: color 150ms ease;
}
.global-search-hit:hover .global-search-arrow,
.global-search-hit.is-active .global-search-arrow {
color: var(--coral);
}
.global-search-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.5rem 1.25rem;
border-top: 1px solid var(--line);
margin-top: 0.75rem;
}
.global-search-footer-copy {
margin: 0;
color: var(--ink-3);
font-size: 0.85rem;
line-height: 1.45;
}
.global-search-footer-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--coral-deep);
font-family: var(--sans);
font-size: 0.88rem;
font-weight: 600;
line-height: 1;
transition: color 150ms ease;
}
.global-search-footer-link:hover {
color: var(--coral);
}
@keyframes global-search-spin {
to {
transform: rotate(360deg);
}
}
@keyframes global-search-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(232, 95, 51, 0.2);
}
50% {
box-shadow: 0 0 0 8px rgba(232, 95, 51, 0);
}
}
@keyframes global-search-pop {
from {
opacity: 0;
transform: translateY(-10px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 768px) {
.global-search-dialog {
width: min(96vw, 40rem);
margin-top: 5.25rem;
}
.global-search-head,
.global-search-meta,
.global-search-footer {
padding-inline: 1rem;
}
.global-search-input-shell {
margin-inline: 1rem;
}
.global-search-meta,
.global-search-footer,
.global-search-hit {
flex-direction: column;
align-items: flex-start;
}
.global-search-shortcuts,
.global-search-hit-trailing {
justify-content: flex-start;
}
.global-search-results {
margin-inline: 0.7rem;
}
}
/* ===== static/css/modules/templates/layouts--partials--gyg-extras.css ===== */
/* Extracted from layouts/partials/gyg-extras.html; edit this module directly. */
/* Redesign idiom for the "Also on GetYourGuide" annex — cream cards with
hairline borders matching .lv-video, coral arrow-disc Book affordance
echoing the hero .lv-ticket-quiet teaser. */
.lv-gyg-extras { margin-block: 56px; }
.lv-gyg-extras .head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.lv-gyg-extras .head .kicker { color: var(--coral-deep); margin: 0 0 8px; }
.lv-gyg-extras .head .ttl {
margin: 0;
font-size: 34px;
letter-spacing: -0.02em;
line-height: 1.05;
color: var(--ink);
}
.lv-gyg-extras .head .note {
margin: 0;
max-width: 300px;
font-size: 14px;
line-height: 1.5;
color: var(--ink-3);
}
.lv-gyg-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: 20px;
}
.lv-gyg {
display: flex;
flex-direction: column;
background: var(--cream-2);
border: 1px solid var(--line);
border-radius: 24px;
overflow: hidden;
text-decoration: none;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lv-gyg:hover {
transform: translateY(-3px);
border-color: var(--coral);
box-shadow: 0 20px 44px -20px rgba(29, 57, 53, 0.4);
}
.lv-gyg .frame {
position: relative;
aspect-ratio: 16 / 10;
background: var(--ink);
overflow: hidden;
}
.lv-gyg .frame img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.lv-gyg:hover .frame img { transform: scale(1.05); }
.lv-gyg .frame .pill.tag {
position: absolute;
top: 12px;
left: 12px;
padding: 6px 12px;
background: rgba(250, 242, 226, 0.92);
color: var(--ink-2);
font-size: 11px;
pointer-events: none;
}
.lv-gyg .body {
display: flex;
flex-direction: column;
flex: 1;
padding: 16px 18px 18px;
}
.lv-gyg .body h3 {
margin: 0;
font-family: var(--serif);
font-size: 17px;
font-weight: 700;
line-height: 1.28;
letter-spacing: -0.015em;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lv-gyg .body .sub {
margin-top: 9px;
color: var(--ink-3);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.lv-gyg .body .sub > span { display: inline-flex; align-items: center; gap: 4px; }
.lv-gyg .body .sub .dot { display: none; }
.lv-gyg .body .sub .rate .line-icon { color: var(--coral); }
.lv-gyg .foot {
margin-top: auto;
padding-top: 14px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--line);
}
.lv-gyg .foot > div { min-width: 0; }
.lv-gyg .foot .from { margin: 0 0 2px; color: var(--ink-3); font-size: 10px; }
.lv-gyg .foot .price {
margin: 0;
font-family: var(--serif);
font-size: 22px;
font-weight: 700;
color: var(--ink);
line-height: 1;
}
.lv-gyg .foot .book {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
color: var(--ink-2);
white-space: nowrap;
}
.lv-gyg .foot .book .go {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--coral);
color: #fff;
transition: transform .25s ease;
}
.lv-gyg:hover .foot .book .go { transform: translateX(3px); }
.lv-gyg-extras .disclosure {
margin: 18px 0 0;
text-align: center;
font-size: 12px;
color: var(--ink-3);
}
/* ===== static/css/modules/templates/layouts--partials--head-home.css ===== */
/* Extracted from layouts/partials/head-home.html; edit this module directly. */
/* Self-hosted Inter (body font) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('/assets/fonts/Inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('/assets/fonts/Inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('/assets/fonts/Inter-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Self-hosted Plus Jakarta Sans (label/heading font) */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('/assets/fonts/PlusJakartaSans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('/assets/fonts/PlusJakartaSans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Self-hosted Agrandir */
@font-face {
font-family: 'Agrandir';
src: url('/assets/fonts/Agrandir-TextBold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Self-hosted Material Symbols */
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/MaterialSymbolsOutlined.woff2') format('woff2');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: 'liga';
-moz-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.editorial-shadow {
box-shadow: 0 30px 60px -12px rgba(28, 27, 27, 0.08);
}
@keyframes hero-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes best-value-pulse {
0%, 100% {
transform: translateY(0) scale(1);
box-shadow: 0 8px 18px -12px rgba(0, 75, 56, 0.45);
}
50% {
transform: translateY(-1px) scale(1.03);
box-shadow: 0 14px 28px -14px rgba(0, 75, 56, 0.55);
}
}
@keyframes best-value-sheen {
0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
18% { opacity: 0.18; }
40%, 100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-float { animation: none !important; }
.best-value-pill { animation: none !important; }
.best-value-pill::after { animation: none !important; }
}
/* iPhone 17 Pro Device Mockup */
.device-mockup { display: inline-block; width: 100%; max-width: var(--device-max-width, 280px); }
.device-mockup__body {
position: relative; aspect-ratio: 719 / 1500;
border-radius: 11% / 5.28%; padding: 2.4%;
background: var(--frame-color);
box-shadow: inset 0 1px 0 0 var(--frame-highlight), inset 0 -1px 0 0 var(--frame-shadow),
0 20px 60px -15px rgba(0,0,0,0.35), 0 8px 24px -8px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.12);
}
.device-mockup__button { position: absolute; background: var(--frame-color); border-radius: 2px; }
.device-mockup__button--power { right: -2.5px; top: 22%; width: 2.5px; height: 12%; border-radius: 0 2px 2px 0; box-shadow: 1px 0 2px rgba(0,0,0,0.15); }
.device-mockup__button--vol-up { left: -2.5px; top: 18%; width: 2.5px; height: 7%; border-radius: 2px 0 0 2px; box-shadow: -1px 0 2px rgba(0,0,0,0.15); }
.device-mockup__button--vol-down { left: -2.5px; top: 27%; width: 2.5px; height: 7%; border-radius: 2px 0 0 2px; box-shadow: -1px 0 2px rgba(0,0,0,0.15); }
.device-mockup__screen { position: relative; width: 100%; height: 100%; border-radius: 9% / 4.2%; overflow: hidden; background: #000; }
.device-mockup__dynamic-island { position: absolute; top: 1.2%; left: 50%; transform: translateX(-50%); width: 28%; height: 2.4%; min-height: 10px; background: #000; border-radius: 100px; z-index: 10; display: flex; align-items: center; justify-content: flex-end; padding-right: 20%; }
.device-mockup__di-camera { width: 18%; aspect-ratio: 1; min-width: 4px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #1a1a2e 0%, #0a0a15 100%); box-shadow: inset 0 0 1px rgba(255,255,255,0.1); }
.device-mockup__image { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.best-value-col {
position: relative;
box-shadow: inset 0 1px 0 rgba(0, 75, 56, 0.04);
}
.best-value-col--head {
box-shadow:
inset 0 1px 0 rgba(0, 75, 56, 0.06),
0 10px 24px -24px rgba(0, 75, 56, 0.3);
}
.best-value-pill {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #004b38 0%, #0a6b52 100%);
animation: best-value-pulse 2.8s ease-in-out infinite;
}
.best-value-pill::after {
content: "";
position: absolute;
inset: -20% auto -20% -30%;
width: 36%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
animation: best-value-sheen 3.8s ease-in-out infinite;
pointer-events: none;
}
/* Colors */
.device-mockup--silver { --frame-color: linear-gradient(145deg, #E2E2E7 0%, #C8C8CD 15%, #D8D8DD 50%, #B8B8BD 85%, #D0D0D5 100%); --frame-highlight: rgba(255,255,255,0.6); --frame-shadow: rgba(0,0,0,0.15); }
.device-mockup--cosmic-orange { --frame-color: linear-gradient(145deg, #E8935A 0%, #D4743B 15%, #DC8350 50%, #C06830 85%, #D87D48 100%); --frame-highlight: rgba(255,200,150,0.5); --frame-shadow: rgba(120,60,20,0.25); }
.device-mockup--deep-blue { --frame-color: linear-gradient(145deg, #3B4F7A 0%, #1C2541 15%, #2B3A67 50%, #15203A 85%, #253260 100%); --frame-highlight: rgba(100,140,200,0.3); --frame-shadow: rgba(10,15,30,0.4); }
@media (max-width: 768px) { .device-mockup { max-width: min(var(--device-max-width, 280px), 240px); } }
@media (max-width: 480px) { .device-mockup { max-width: min(var(--device-max-width, 280px), 200px); } .device-mockup__button { display: none; } }
/* Trip Briefing animation */
.briefing-animation {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 3.75rem 0.82rem 0.78rem;
background:
radial-gradient(circle at 20% 15%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 32%),
radial-gradient(circle at 82% 20%, rgba(253, 209, 187, 0.75) 0%, rgba(253, 209, 187, 0) 34%),
linear-gradient(180deg, #fff8f4 0%, #f7ece6 42%, #f2e7de 100%);
overflow: hidden;
isolation: isolate;
}
.briefing-animation__backdrop {
position: absolute;
inset: -10% -18% auto auto;
width: 78%;
height: 44%;
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 58%),
conic-gradient(from 180deg at 50% 50%, rgba(0, 75, 56, 0.08), rgba(0, 75, 56, 0.02), rgba(157, 66, 40, 0.14), rgba(0, 75, 56, 0.08));
filter: blur(6px);
opacity: 0.9;
animation: briefing-ambient 6.8s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.briefing-animation__header,
.briefing-animation__cards,
.briefing-animation__footer {
position: relative;
z-index: 1;
}
.briefing-animation__header {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-bottom: 0.65rem;
}
.briefing-animation__eyebrow {
align-self: flex-start;
padding: 0.45rem 0.8rem;
border: 1px solid rgba(0, 75, 56, 0.12);
border-radius: 999px;
background: rgba(255,255,255,0.76);
color: #004b38;
font: 700 0.62rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.16em;
text-transform: uppercase;
box-shadow: 0 12px 28px -18px rgba(0, 75, 56, 0.28);
opacity: 0;
transform: translateY(10px);
animation: briefing-reveal 6.8s infinite;
}
.briefing-animation__title-block {
opacity: 0;
transform: translateY(18px);
animation: briefing-reveal 6.8s infinite 180ms;
}
.briefing-animation__kicker {
margin: 0 0 0.25rem;
color: rgba(28, 27, 27, 0.58);
font: 600 0.68rem/1.2 'Inter', sans-serif;
letter-spacing: 0.01em;
}
.briefing-animation__title {
margin: 0;
color: #1c1b1b;
font: 700 1rem/1.08 'Agrandir', 'Noto Serif', serif;
letter-spacing: -0.03em;
}
.briefing-animation__progress {
height: 0.35rem;
border-radius: 999px;
background: rgba(0, 75, 56, 0.09);
overflow: hidden;
opacity: 0;
animation: briefing-reveal 6.8s infinite 360ms;
}
.briefing-animation__progress-fill {
width: 0;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #9d4228 0%, #c95b37 42%, #004b38 100%);
animation: briefing-progress 6.8s infinite;
}
.briefing-animation__cards {
display: flex;
flex-direction: column;
gap: 0.42rem;
margin-top: 0.1rem;
}
.briefing-animation__card {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.52rem;
padding: 0.62rem 0.64rem;
border: 1px solid rgba(0, 75, 56, 0.08);
border-radius: 1rem;
background: rgba(255,255,255,0.84);
box-shadow:
0 14px 30px -22px rgba(28, 27, 27, 0.24),
inset 0 1px 0 rgba(255,255,255,0.65);
backdrop-filter: blur(10px);
opacity: 0;
transform: translateY(18px) scale(0.97);
animation: briefing-card-reveal 6.8s infinite;
}
.briefing-animation__card:nth-child(2) { animation-delay: 260ms; }
.briefing-animation__card:nth-child(3) { animation-delay: 520ms; }
.briefing-animation__card-index {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.55rem;
height: 1.55rem;
border-radius: 999px;
background: linear-gradient(135deg, rgba(0,75,56,0.12), rgba(157,66,40,0.18));
color: #004b38;
font: 700 0.58rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.08em;
}
.briefing-animation__card-copy {
min-width: 0;
}
.briefing-animation__card-label {
margin: 0 0 0.2rem;
color: #1c1b1b;
font: 700 0.68rem/1.2 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.01em;
}
.briefing-animation__card-text {
margin: 0;
color: rgba(28, 27, 27, 0.72);
font: 500 0.58rem/1.32 'Inter', sans-serif;
}
.briefing-animation__footer {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-top: auto;
padding-top: 0.5rem;
}
.briefing-animation__chip {
padding: 0.3rem 0.46rem;
border-radius: 999px;
background: rgba(0, 75, 56, 0.08);
color: #004b38;
font: 700 0.5rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0;
transform: translateY(12px);
animation: briefing-chip-reveal 6.8s infinite;
}
.briefing-animation__chip:nth-child(2) { animation-delay: 180ms; }
.briefing-animation__chip:nth-child(3) { animation-delay: 360ms; }
@keyframes briefing-ambient {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-5%, 4%, 0) scale(1.06); }
}
@keyframes briefing-reveal {
0%, 10% { opacity: 0; transform: translateY(16px); }
18%, 84% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes briefing-progress {
0%, 12% { width: 0; }
34%, 84% { width: 100%; }
100% { width: 100%; }
}
@keyframes briefing-card-reveal {
0%, 18% { opacity: 0; transform: translateY(18px) scale(0.97); }
28%, 84% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-8px) scale(0.985); }
}
@keyframes briefing-chip-reveal {
0%, 40% { opacity: 0; transform: translateY(12px); }
52%, 84% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
.briefing-animation__backdrop,
.briefing-animation__eyebrow,
.briefing-animation__title-block,
.briefing-animation__progress,
.briefing-animation__progress-fill,
.briefing-animation__card,
.briefing-animation__chip {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.briefing-animation__progress-fill { width: 100% !important; }
}
/* Plan My Trip animation */
.plantrip-animation {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 3.55rem 0.76rem 0.72rem;
background:
radial-gradient(circle at 22% 14%, rgba(134, 214, 184, 0.2) 0%, rgba(134, 214, 184, 0) 34%),
radial-gradient(circle at 82% 18%, rgba(161, 243, 211, 0.2) 0%, rgba(161, 243, 211, 0) 36%),
linear-gradient(180deg, #f5f8fb 0%, #edf2f7 46%, #e5edf4 100%);
overflow: hidden;
isolation: isolate;
}
.plantrip-animation__glow {
position: absolute;
inset: auto -12% 42% auto;
width: 72%;
height: 36%;
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 56%),
conic-gradient(from 180deg at 50% 50%, rgba(59, 79, 122, 0.14), rgba(0, 75, 56, 0.08), rgba(134, 214, 184, 0.18), rgba(59, 79, 122, 0.14));
filter: blur(8px);
animation: plantrip-glow 6.8s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.plantrip-animation__header,
.plantrip-animation__chips,
.plantrip-animation__route,
.plantrip-animation__footer {
position: relative;
z-index: 1;
}
.plantrip-animation__header {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-bottom: 0.45rem;
}
.plantrip-animation__eyebrow {
align-self: flex-start;
padding: 0.4rem 0.74rem;
border-radius: 999px;
border: 1px solid rgba(59, 79, 122, 0.12);
background: rgba(255,255,255,0.78);
color: #2b3a67;
font: 700 0.58rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0;
transform: translateY(12px);
animation: plantrip-rise 6.8s infinite;
box-shadow: 0 10px 26px -18px rgba(28, 37, 65, 0.35);
}
.plantrip-animation__title-block {
opacity: 0;
transform: translateY(14px);
animation: plantrip-rise 6.8s infinite 160ms;
}
.plantrip-animation__kicker {
margin: 0 0 0.2rem;
color: rgba(28, 37, 65, 0.58);
font: 600 0.68rem/1.2 'Inter', sans-serif;
}
.plantrip-animation__title {
margin: 0;
color: #1c2541;
font: 700 0.9rem/1.06 'Agrandir', 'Noto Serif', serif;
letter-spacing: -0.03em;
}
.plantrip-animation__chips {
display: flex;
flex-wrap: wrap;
gap: 0.26rem;
margin-bottom: 0.46rem;
}
.plantrip-animation__chip {
padding: 0.3rem 0.48rem;
border-radius: 999px;
background: rgba(43, 58, 103, 0.08);
color: #2b3a67;
font: 700 0.5rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.09em;
text-transform: uppercase;
opacity: 0;
transform: translateY(10px);
animation: plantrip-chip 6.8s infinite;
}
.plantrip-animation__chip:nth-child(2) { animation-delay: 180ms; }
.plantrip-animation__chip:nth-child(3) { animation-delay: 360ms; }
.plantrip-animation__route {
position: relative;
display: flex;
flex-direction: column;
gap: 0.32rem;
padding-left: 0.84rem;
}
.plantrip-animation__line {
position: absolute;
left: 0.33rem;
top: 0.45rem;
bottom: 0.9rem;
width: 2px;
border-radius: 999px;
background: rgba(43, 58, 103, 0.12);
overflow: hidden;
}
.plantrip-animation__line::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 0;
border-radius: inherit;
background: linear-gradient(180deg, #86d6b8 0%, #3b4f7a 100%);
animation: plantrip-line 6.8s infinite;
}
.plantrip-animation__stop {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.42rem;
opacity: 0;
transform: translateY(14px);
animation: plantrip-stop 6.8s infinite;
}
.plantrip-animation__stop:nth-child(2) { animation-delay: 780ms; }
.plantrip-animation__stop:nth-child(3) { animation-delay: 1120ms; }
.plantrip-animation__stop:nth-child(4) { animation-delay: 1460ms; }
.plantrip-animation__stop:nth-child(5) { animation-delay: 1800ms; }
.plantrip-animation__dot {
position: absolute;
left: -0.9rem;
top: 0.55rem;
width: 0.68rem;
height: 0.68rem;
border-radius: 50%;
background: linear-gradient(135deg, #86d6b8 0%, #3b4f7a 100%);
box-shadow: 0 0 0 4px rgba(252,249,248,0.95);
}
.plantrip-animation__stop-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem;
width: 100%;
padding: 0.58rem 0.58rem;
border-radius: 0.95rem;
border: 1px solid rgba(43, 58, 103, 0.08);
background: rgba(255,255,255,0.82);
box-shadow: 0 12px 28px -22px rgba(28, 37, 65, 0.35), inset 0 1px 0 rgba(255,255,255,0.65);
backdrop-filter: blur(10px);
}
.plantrip-animation__time {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.22rem;
height: 1.26rem;
padding: 0 0.38rem;
border-radius: 999px;
background: rgba(134, 214, 184, 0.22);
color: #1c2541;
font: 700 0.46rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.08em;
}
.plantrip-animation__label {
margin: 0 0 0.18rem;
color: #1c2541;
font: 700 0.62rem/1.2 'Plus Jakarta Sans', sans-serif;
}
.plantrip-animation__text {
margin: 0;
color: rgba(28, 37, 65, 0.72);
font: 500 0.52rem/1.26 'Inter', sans-serif;
}
.plantrip-animation__footer {
display: flex;
flex-direction: column;
gap: 0.28rem;
margin-top: auto;
padding-top: 0.38rem;
}
.plantrip-animation__summary {
align-self: flex-start;
padding: 0.3rem 0.46rem;
border-radius: 999px;
background: rgba(28, 37, 65, 0.88);
color: #fcf9f8;
font: 700 0.46rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0;
transform: translateY(10px);
animation: plantrip-chip 6.8s infinite 2.1s;
}
.plantrip-animation__summary:nth-child(2) {
animation-delay: 2.35s;
background: rgba(0, 75, 56, 0.9);
}
@keyframes plantrip-glow {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-4%, 5%, 0) scale(1.08); }
}
@keyframes plantrip-rise {
0%, 10% { opacity: 0; transform: translateY(14px); }
18%, 84% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes plantrip-chip {
0%, 16% { opacity: 0; transform: translateY(10px); }
24%, 84% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes plantrip-line {
0%, 24% { height: 0; }
54%, 84% { height: 100%; }
100% { height: 100%; }
}
@keyframes plantrip-stop {
0%, 26% { opacity: 0; transform: translateY(14px); }
36%, 84% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
.plantrip-animation__glow,
.plantrip-animation__eyebrow,
.plantrip-animation__title-block,
.plantrip-animation__chip,
.plantrip-animation__line::after,
.plantrip-animation__stop,
.plantrip-animation__summary {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.plantrip-animation__line::after { height: 100% !important; }
}
/* Research pipeline animation */
.pipeline-animation {
position: relative;
width: min(100%, 40rem);
padding: 1.15rem;
border-radius: 2rem;
border: 1px solid rgba(0, 75, 56, 0.08);
background:
radial-gradient(circle at 14% 16%, rgba(161, 243, 211, 0.34) 0%, rgba(161, 243, 211, 0) 26%),
radial-gradient(circle at 88% 18%, rgba(249, 196, 228, 0.22) 0%, rgba(249, 196, 228, 0) 24%),
linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(246,243,242,0.96) 100%);
box-shadow: 0 28px 60px -34px rgba(28, 27, 27, 0.22);
overflow: hidden;
isolation: isolate;
}
.pipeline-animation__halo {
position: absolute;
inset: auto auto -18% -12%;
width: 56%;
height: 52%;
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 58%),
conic-gradient(from 180deg at 50% 50%, rgba(0, 75, 56, 0.16), rgba(134, 214, 184, 0.12), rgba(157, 66, 40, 0.14), rgba(0, 75, 56, 0.16));
filter: blur(12px);
opacity: 0.85;
animation: pipeline-halo 7s ease-in-out infinite;
z-index: 0;
pointer-events: none;
}
.pipeline-animation__header,
.pipeline-animation__canvas,
.pipeline-animation__personalization {
position: relative;
z-index: 1;
}
.pipeline-animation__header {
max-width: 24rem;
margin-bottom: 1rem;
}
.pipeline-animation__eyebrow {
margin: 0 0 0.35rem;
color: #004b38;
font: 700 0.66rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0;
transform: translateY(10px);
animation: pipeline-rise 7s infinite;
}
.pipeline-animation__title {
margin: 0;
color: #1c1b1b;
font: 700 1.28rem/1.08 'Agrandir', 'Noto Serif', serif;
letter-spacing: -0.03em;
opacity: 0;
transform: translateY(14px);
animation: pipeline-rise 7s infinite 180ms;
}
.pipeline-animation__canvas {
position: relative;
display: grid;
grid-template-columns: minmax(13rem, 1fr) auto minmax(13rem, 1fr);
gap: 1.35rem;
align-items: center;
min-height: 18.5rem;
padding: 1rem;
border-radius: 1.5rem;
background: rgba(255,255,255,0.58);
border: 1px solid rgba(0, 75, 56, 0.06);
backdrop-filter: blur(10px);
}
.pipeline-animation__stage-label {
margin: 0 0 0.6rem;
color: rgba(28, 27, 27, 0.52);
font: 700 0.62rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.pipeline-animation__stage--sources,
.pipeline-animation__stage--output {
display: flex;
flex-direction: column;
gap: 0.52rem;
}
.pipeline-animation__source-card,
.pipeline-animation__guide-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.58rem;
align-items: start;
padding: 0.78rem 0.82rem;
border-radius: 1.1rem;
background: rgba(255,255,255,0.82);
border: 1px solid rgba(0, 75, 56, 0.08);
box-shadow: 0 14px 28px -24px rgba(28, 27, 27, 0.2);
opacity: 0;
transform: translateY(14px) scale(0.98);
animation: pipeline-card 7s infinite;
}
.pipeline-animation__source-card:nth-child(2) { animation-delay: 560ms; }
.pipeline-animation__source-card:nth-child(3) { animation-delay: 820ms; }
.pipeline-animation__source-card:nth-child(4) { animation-delay: 1080ms; }
.pipeline-animation__guide-card:nth-child(2) { animation-delay: 2.9s; }
.pipeline-animation__guide-card:nth-child(3) { animation-delay: 3.15s; }
.pipeline-animation__guide-card:nth-child(4) { animation-delay: 3.4s; }
.pipeline-animation__guide-card {
grid-template-columns: 1fr;
}
.pipeline-animation__guide-card--accent {
border-color: rgba(0, 75, 56, 0.14);
background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(161, 243, 211, 0.22) 100%);
}
.pipeline-animation__source-dot {
display: inline-flex;
width: 0.75rem;
height: 0.75rem;
margin-top: 0.2rem;
border-radius: 50%;
background: linear-gradient(135deg, #86d6b8 0%, #004b38 100%);
box-shadow: 0 0 0 4px rgba(161, 243, 211, 0.2);
}
.pipeline-animation__source-title,
.pipeline-animation__guide-label {
margin: 0 0 0.18rem;
color: #1c1b1b;
font: 700 0.78rem/1.2 'Plus Jakarta Sans', sans-serif;
}
.pipeline-animation__source-text,
.pipeline-animation__guide-text {
margin: 0;
color: rgba(28, 27, 27, 0.7);
font: 500 0.68rem/1.38 'Inter', sans-serif;
}
.pipeline-animation__spine {
position: relative;
width: 6.5rem;
height: 100%;
min-height: 14rem;
}
.pipeline-animation__beam {
position: absolute;
top: 50%;
width: 100%;
height: 2px;
border-radius: 999px;
background: rgba(0, 75, 56, 0.08);
overflow: hidden;
transform: translateY(-50%);
}
.pipeline-animation__beam::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -34%;
width: 34%;
border-radius: inherit;
background: linear-gradient(90deg, rgba(161,243,211,0), rgba(0,75,56,0.8), rgba(157,66,40,0));
animation: pipeline-beam 7s linear infinite;
}
.pipeline-animation__beam--right::after {
animation-delay: 2.2s;
}
.pipeline-animation__core {
position: absolute;
left: 50%;
top: 50%;
width: 8.4rem;
height: 8.4rem;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
pointer-events: none;
}
.pipeline-animation__core-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(0, 75, 56, 0.12);
opacity: 0;
transform: scale(0.88);
animation: pipeline-ring 7s infinite;
}
.pipeline-animation__core-ring--outer {
inset: 0;
}
.pipeline-animation__core-ring--inner {
inset: 0.8rem;
animation-delay: 280ms;
}
.pipeline-animation__core-body {
position: relative;
width: 5.9rem;
height: 5.9rem;
padding: 0.95rem 0.72rem;
border-radius: 1.7rem;
background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(161, 243, 211, 0.16) 100%);
border: 1px solid rgba(0, 75, 56, 0.12);
box-shadow: 0 22px 38px -28px rgba(0, 75, 56, 0.45);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
opacity: 0;
transform: scale(0.92);
animation: pipeline-core 7s infinite 1.4s;
}
.pipeline-animation__core-kicker {
margin: 0 0 0.24rem;
color: #004b38;
font: 700 0.62rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.pipeline-animation__core-text {
margin: 0;
color: #1c1b1b;
font: 600 0.66rem/1.34 'Inter', sans-serif;
}
.pipeline-animation__personalization {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.8rem;
}
.pipeline-animation__profile-chip {
padding: 0.42rem 0.68rem;
border-radius: 999px;
background: rgba(0, 75, 56, 0.08);
color: #004b38;
font: 700 0.58rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0;
transform: translateY(10px);
animation: pipeline-chip 7s infinite 3.8s;
}
.pipeline-animation__profile-chip:nth-child(2) { animation-delay: 4s; }
.pipeline-animation__profile-chip:nth-child(3) { animation-delay: 4.2s; }
.pipeline-animation__profile-chip:nth-child(4) { animation-delay: 4.4s; }
@keyframes pipeline-halo {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(6%, -5%, 0) scale(1.08); }
}
@keyframes pipeline-rise {
0%, 10% { opacity: 0; transform: translateY(12px); }
18%, 86% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes pipeline-card {
0%, 12% { opacity: 0; transform: translateY(14px) scale(0.98); }
24%, 86% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-8px) scale(0.985); }
}
@keyframes pipeline-beam {
0%, 16% { left: -34%; opacity: 0; }
24%, 42% { left: 100%; opacity: 1; }
100% { left: 100%; opacity: 0; }
}
@keyframes pipeline-ring {
0%, 18% { opacity: 0; transform: scale(0.88); }
30%, 54% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(1.12); }
}
@keyframes pipeline-core {
0%, 18% { opacity: 0; transform: scale(0.92); }
32%, 86% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(1.04); }
}
@keyframes pipeline-chip {
0%, 42% { opacity: 0; transform: translateY(10px); }
52%, 86% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-6px); }
}
@media (max-width: 768px) {
.pipeline-animation {
width: min(100%, 28rem);
padding: 0.9rem;
}
.pipeline-animation__title {
font-size: 1.06rem;
}
.pipeline-animation__canvas {
grid-template-columns: 1fr;
gap: 0.8rem;
min-height: auto;
padding: 0.85rem;
}
.pipeline-animation__spine {
order: 2;
width: 100%;
min-height: 4rem;
}
.pipeline-animation__beam {
top: 50%;
width: 100%;
}
.pipeline-animation__core {
position: relative;
left: auto;
top: auto;
width: 7rem;
height: 7rem;
margin: 0 auto;
transform: none;
order: 3;
}
.pipeline-animation__stage--output {
order: 4;
}
}
@media (prefers-reduced-motion: reduce) {
.pipeline-animation__halo,
.pipeline-animation__eyebrow,
.pipeline-animation__title,
.pipeline-animation__source-card,
.pipeline-animation__guide-card,
.pipeline-animation__beam::after,
.pipeline-animation__core-ring,
.pipeline-animation__core-body,
.pipeline-animation__profile-chip {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* Ask Anything concierge animation */
.concierge-animation {
position: relative;
width: min(100%, 40rem);
padding: 1.15rem;
border-radius: 2rem;
border: 1px solid rgba(0, 75, 56, 0.08);
background:
radial-gradient(circle at 14% 16%, rgba(161, 243, 211, 0.34) 0%, rgba(161, 243, 211, 0) 26%),
radial-gradient(circle at 88% 18%, rgba(249, 196, 228, 0.22) 0%, rgba(249, 196, 228, 0) 24%),
linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(246,243,242,0.96) 100%);
box-shadow: 0 28px 60px -34px rgba(28, 27, 27, 0.22);
overflow: hidden;
isolation: isolate;
}
.concierge-animation__glow {
position: absolute;
width: 14rem;
height: 14rem;
filter: blur(18px);
opacity: 0.8;
z-index: 0;
animation: concierge-drift 7s ease-in-out infinite;
}
.concierge-animation__glow--left {
left: -3rem;
bottom: -3rem;
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 58%),
conic-gradient(from 180deg at 50% 50%, rgba(0, 75, 56, 0.16), rgba(134, 214, 184, 0.12), rgba(157, 66, 40, 0.14), rgba(0, 75, 56, 0.16));
}
.concierge-animation__glow--right {
right: -3rem;
top: -3rem;
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 56%),
conic-gradient(from 180deg at 50% 50%, rgba(157, 66, 40, 0.16), rgba(249, 196, 228, 0.1), rgba(134, 214, 184, 0.12), rgba(157, 66, 40, 0.16));
animation-delay: 1.1s;
}
.concierge-animation__header,
.concierge-animation__canvas,
.concierge-animation__chips {
position: relative;
z-index: 1;
}
.concierge-animation__header {
max-width: 24rem;
margin-bottom: 1rem;
}
.concierge-animation__eyebrow {
margin: 0 0 0.35rem;
color: #004b38;
font: 700 0.66rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0;
transform: translateY(10px);
animation: concierge-rise 7s infinite;
}
.concierge-animation__title {
margin: 0;
color: #1c1b1b;
font: 700 1.28rem/1.08 'Agrandir', 'Noto Serif', serif;
letter-spacing: -0.03em;
opacity: 0;
transform: translateY(14px);
animation: concierge-rise 7s infinite 180ms;
}
.concierge-animation__canvas {
display: grid;
gap: 0.72rem;
padding: 1rem;
border-radius: 1.5rem;
background: rgba(255,255,255,0.58);
border: 1px solid rgba(0, 75, 56, 0.06);
backdrop-filter: blur(10px);
}
.concierge-animation__query,
.concierge-animation__response,
.concierge-animation__card {
opacity: 0;
transform: translateY(14px) scale(0.985);
animation: concierge-card 7s infinite;
}
.concierge-animation__query {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.62rem;
align-items: start;
padding: 0.78rem 0.82rem;
border-radius: 1.1rem;
background: rgba(255,255,255,0.82);
border: 1px solid rgba(0, 75, 56, 0.08);
box-shadow: 0 14px 28px -24px rgba(28, 27, 27, 0.2);
}
.concierge-animation__query-dot {
width: 0.75rem;
height: 0.75rem;
margin-top: 0.2rem;
border-radius: 50%;
background: linear-gradient(135deg, #86d6b8 0%, #004b38 100%);
box-shadow: 0 0 0 4px rgba(161, 243, 211, 0.2);
}
.concierge-animation__query-text {
margin: 0;
color: rgba(28, 27, 27, 0.74);
font: 600 0.74rem/1.42 'Inter', sans-serif;
}
.concierge-animation__response {
padding: 1rem 1rem 0.95rem;
border-radius: 1.1rem;
background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(161, 243, 211, 0.22) 100%);
border: 1px solid rgba(0, 75, 56, 0.14);
color: #1c1b1b;
box-shadow: 0 14px 28px -24px rgba(28, 27, 27, 0.2);
animation-delay: 780ms;
}
.concierge-animation__response-head {
display: flex;
flex-wrap: wrap;
gap: 0.42rem;
margin-bottom: 0.58rem;
}
.concierge-animation__response-badge {
padding: 0.32rem 0.55rem;
border-radius: 999px;
background: rgba(0, 75, 56, 0.08);
color: #004b38;
font: 700 0.54rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.concierge-animation__response-badge--soft {
background: rgba(249, 196, 228, 0.18);
color: #7e2c13;
}
.concierge-animation__response-title {
margin: 0 0 0.34rem;
color: #1c1b1b;
font: 700 0.98rem/1.2 'Plus Jakarta Sans', sans-serif;
letter-spacing: -0.02em;
}
.concierge-animation__response-copy {
margin: 0;
color: rgba(28, 27, 27, 0.7);
font: 500 0.68rem/1.38 'Inter', sans-serif;
}
.concierge-animation__cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.62rem;
}
.concierge-animation__card {
padding: 0.78rem 0.82rem;
border-radius: 1.1rem;
border: 1px solid rgba(0, 75, 56, 0.08);
box-shadow: 0 14px 28px -24px rgba(28, 27, 27, 0.2);
}
.concierge-animation__card--rose {
background: rgba(255,255,255,0.82);
animation-delay: 1.45s;
}
.concierge-animation__card--mint {
background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(161, 243, 211, 0.18) 100%);
animation-delay: 1.7s;
}
.concierge-animation__card--gold {
background: rgba(255,255,255,0.82);
animation-delay: 1.95s;
}
.concierge-animation__card-kicker {
margin: 0 0 0.2rem;
color: rgba(28, 27, 27, 0.52);
font: 700 0.58rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.concierge-animation__card-title {
margin: 0 0 0.24rem;
color: #1c1b1b;
font: 700 0.82rem/1.16 'Plus Jakarta Sans', sans-serif;
}
.concierge-animation__card-copy {
margin: 0;
color: rgba(28, 27, 27, 0.72);
font: 500 0.68rem/1.38 'Inter', sans-serif;
}
.concierge-animation__chips {
display: flex;
flex-wrap: wrap;
gap: 0.42rem;
margin-top: 0.78rem;
}
.concierge-animation__chip {
padding: 0.42rem 0.68rem;
border-radius: 999px;
background: rgba(0, 75, 56, 0.08);
color: #004b38;
font: 700 0.58rem/1 'Plus Jakarta Sans', sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
border: 1px solid rgba(0, 75, 56, 0.08);
opacity: 0;
transform: translateY(10px);
animation: concierge-chip 7s infinite 2.35s;
}
.concierge-animation__chip:nth-child(2) { animation-delay: 2.55s; }
.concierge-animation__chip:nth-child(3) { animation-delay: 2.75s; }
.concierge-animation__chip:nth-child(4) { animation-delay: 2.95s; }
@keyframes concierge-drift {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(5%, -4%, 0) scale(1.08); }
}
@keyframes concierge-rise {
0%, 10% { opacity: 0; transform: translateY(12px); }
18%, 86% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes concierge-card {
0%, 14% { opacity: 0; transform: translateY(14px) scale(0.985); }
24%, 86% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-8px) scale(0.99); }
}
@keyframes concierge-chip {
0%, 30% { opacity: 0; transform: translateY(10px); }
40%, 86% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-6px); }
}
@media (max-width: 768px) {
.concierge-animation {
width: min(100%, 28rem);
padding: 0.95rem;
}
.concierge-animation__title {
font-size: 1.04rem;
}
.concierge-animation__canvas {
padding: 0.82rem;
}
.concierge-animation__cards {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.concierge-animation__glow,
.concierge-animation__eyebrow,
.concierge-animation__title,
.concierge-animation__query,
.concierge-animation__response,
.concierge-animation__card,
.concierge-animation__chip {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ===== static/css/modules/templates/layouts--partials--head.css ===== */
/* Extracted from layouts/partials/head.html; edit this module directly. */
/* Self-hosted Inter (body font) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('/assets/fonts/Inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('/assets/fonts/Inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('/assets/fonts/Inter-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Self-hosted Plus Jakarta Sans (label/heading font) */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('/assets/fonts/PlusJakartaSans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('/assets/fonts/PlusJakartaSans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Self-hosted Agrandir */
@font-face {
font-family: 'Agrandir';
src: url('/assets/fonts/Agrandir-TextBold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Self-hosted Material Symbols */
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/MaterialSymbolsOutlined.woff2') format('woff2');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: 'liga';
-moz-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.serif-dropcap::first-letter {
float: left;
font-family: 'Noto Serif', serif;
font-size: 5rem;
line-height: 0.8;
padding-right: 0.75rem;
padding-top: 0.25rem;
color: #004b38;
font-weight: 700;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
.scroll-indicator { animation: float 2s ease-in-out infinite; }
/* ===== static/css/modules/templates/layouts--partials--hero-ticket-strip.css ===== */
/* Extracted from layouts/partials/hero-ticket-strip.html; edit this module directly. */
.tkt-strip { display:inline-flex; align-items:center; gap:16px; padding:8px 8px 8px 22px; border-radius:100px; background:#fff; border:1px solid var(--line); box-shadow:0 12px 30px -14px rgba(29,57,53,0.34); text-decoration:none; max-width:100%; transition:transform .18s ease, box-shadow .18s ease; }
.tkt-strip:hover { transform:translateY(-2px); box-shadow:0 18px 42px -16px rgba(29,57,53,0.46); }
.tkt-strip-ic { color:var(--coral); font-size:1.25rem; flex-shrink:0; }
.tkt-strip-txt { display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:0.9rem; color:var(--ink-3); min-width:0; }
.tkt-strip-from { white-space:nowrap; }
.tkt-strip-from strong { font-family:var(--serif); font-weight:700; font-size:1.18rem; color:var(--ink); margin-left:3px; }
.tkt-strip-rt { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; color:var(--ink-2); }
.tkt-strip-rt .material-symbols-outlined { font-size:1rem; }
.tkt-strip-skip { white-space:nowrap; }
.tkt-strip-sep { width:4px; height:4px; border-radius:50%; background:var(--ink-3); opacity:.4; flex-shrink:0; }
.tkt-strip-cta { display:inline-flex; align-items:center; gap:5px; background:var(--coral); color:#fff; font-family:var(--sans); font-weight:600; font-size:0.85rem; padding:11px 20px; border-radius:100px; white-space:nowrap; flex-shrink:0; transition:background .18s ease; }
.tkt-strip:hover .tkt-strip-cta { background:var(--coral-deep); }
.tkt-strip-cta .ar { font-size:1.05rem; transition:transform .18s ease; }
.tkt-strip:hover .tkt-strip-cta .ar { transform:translateX(3px); }
@media (max-width:640px) { .tkt-strip { gap:12px; padding-left:18px; } .tkt-strip-sep-sm, .tkt-strip-skip { display:none; } }
/* ===== static/css/modules/templates/layouts--partials--nav.css ===== */
/* Extracted from layouts/partials/nav.html; edit this module directly. */
.global-search-trigger {
display: inline-flex;
align-items: center;
gap: 0.65rem;
min-height: 2.75rem;
padding: 0.7rem 0.95rem;
border-radius: 999px;
border: 1px solid rgba(22, 101, 52, 0.12);
background: rgba(255, 255, 255, 0.72);
color: rgb(68, 64, 60);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease, color 180ms ease;
}
.global-search-trigger:hover,
.global-search-trigger:focus-visible {
border-color: rgba(22, 101, 52, 0.24);
background: rgba(255, 255, 255, 0.96);
color: rgb(22, 101, 52);
transform: translateY(-1px);
outline: none;
}
.global-search-trigger-label {
max-width: 17rem;
overflow: hidden;
font-family: 'Agrandir', sans-serif;
font-size: 0.95rem;
font-weight: 500;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.global-search-trigger-key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.75rem;
height: 1.75rem;
padding: 0 0.5rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.06);
color: rgb(87, 83, 78);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
}
@media (max-width: 1023px) {
.global-search-trigger {
padding-inline: 0.8rem;
}
}
@media (max-width: 639px) {
.global-search-trigger {
min-width: 2.75rem;
padding-inline: 0.8rem;
gap: 0;
}
}
/* ===== static/css/modules/templates/layouts--partials--opening-hours-card.css ===== */
/* Extracted from layouts/partials/opening-hours-card.html; edit this module directly. */
.opening-hours-summary:hover { background: var(--cream-2); }
/* ===== static/css/modules/templates/layouts--partials--places-grid--2.css ===== */
/* Extracted from layouts/partials/places-grid.html; edit this module directly. */
@media (max-width: 1024px) { .places-grid { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 640px) { .places-grid { grid-template-columns: repeat(2,1fr) !important; } }
/* ===== static/css/modules/templates/layouts--partials--places-grid.css ===== */
/* Extracted from layouts/partials/places-grid.html; edit this module directly. */
.places-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; }
.places-pager .pill { min-width: 42px; justify-content: center; text-align: center; }
.places-pager .pager-step { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; }
.places-pager .pager-prev .line-icon { transform: rotate(180deg); }
[dir="rtl"] .places-pager .pager-prev .line-icon { transform: rotate(0deg); }
[dir="rtl"] .places-pager .pager-next .line-icon { transform: rotate(180deg); }
@media (max-width: 640px) { .places-pager .pager-step span { display: none; } }
/* ===== static/css/modules/templates/layouts--partials--quick-facts.css ===== */
/* Extracted from layouts/partials/quick-facts.html; edit this module directly. */
.qf-strip {
display: inline-grid;
grid-template-columns: auto auto;
gap: 16px clamp(28px, 4vw, 52px);
align-items: center;
text-align: left;
max-width: 100%;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(8px);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 6px 22px -8px rgba(29, 57, 53, 0.16);
padding: 18px clamp(24px, 3vw, 40px);
}
@media (max-width: 600px) { .qf-strip { grid-template-columns: 1fr; } }
/* ===== static/css/modules/templates/layouts--partials--ticket-status-capsule.css ===== */
/* Extracted from layouts/partials/ticket-status-capsule.html; edit this module directly. */
.tkt-status-capsule { display:flex; gap:14px; align-items:flex-start; margin:20px 0 4px;
padding:16px 18px; border:1px solid var(--line); border-left:3px solid var(--coral);
border-radius:14px; background:rgba(232,95,51,0.05); }
.tkt-status-icon { color:var(--coral); font-size:1.4rem; margin-top:1px; }
.tkt-status-lead { font-weight:600; color:var(--ink); margin:0; }
.tkt-status-price { color:var(--ink-2); font-size:0.9rem; margin:4px 0 0; }
.tkt-status-link { display:inline-flex; align-items:center; gap:4px; margin-top:6px;
font-size:0.85rem; font-weight:600; color:var(--coral); text-decoration:none; }
.tkt-status-link:hover { text-decoration:underline; }
/* ===== static/css/modules/templates/layouts--partials--tickets-sidebar.css ===== */
/* Extracted from layouts/partials/tickets-sidebar.html; edit this module directly. */
.tkt-side-card { display:block; padding:15px 17px; border:1px solid var(--line); border-radius:16px; background:#fff; text-decoration:none; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.tkt-side-card + .tkt-side-card { margin-top:12px; }
.tkt-side-card:hover { border-color:var(--coral); box-shadow:0 12px 26px -14px rgba(29,57,53,0.32); transform:translateY(-2px); }
.tkt-side-title { font-family:var(--serif); font-weight:700; font-size:1rem; line-height:1.3; color:var(--ink); margin:0 0 9px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; transition:color .18s ease; }
.tkt-side-card:hover .tkt-side-title { color:var(--coral); }
.tkt-side-meta { display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px; font-size:0.76rem; margin-bottom:7px; }
.tkt-side-rt { display:inline-flex; align-items:center; gap:3px; color:var(--ink-2); font-weight:600; }
.tkt-side-rt .material-symbols-outlined { color:var(--sun); font-size:0.95rem; }
.tkt-side-instant { display:inline-flex; align-items:center; color:#2F7D52; font-weight:600; }
.tkt-side-trust { display:flex; align-items:center; gap:5px; font-size:0.72rem; color:var(--ink-3); margin-bottom:13px; }
.tkt-side-trust .material-symbols-outlined { color:#2F7D52; font-size:0.9rem; font-variation-settings:'FILL' 1; }
.tkt-side-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--line-soft); }
.tkt-side-price { font-family:var(--serif); font-weight:700; font-size:1.3rem; line-height:1; color:var(--coral); }
.tkt-side-book { display:inline-flex; align-items:center; gap:4px; font-family:var(--sans); font-weight:600; font-size:0.82rem; color:var(--coral); white-space:nowrap; }
.tkt-side-book .ar { font-size:0.95rem; transition:transform .18s ease; }
.tkt-side-card:hover .tkt-side-book .ar { transform:translateX(3px); }
/* ===== static/css/modules/templates/layouts--partners--single.css ===== */
/* Extracted from layouts/partners/single.html; edit this module directly. */
.partner-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.benefit-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px 56px; }
@media (max-width: 860px){
.partner-grid, .benefit-grid { grid-template-columns:1fr !important; }
}
/* ===== static/css/modules/templates/layouts--place--single.css ===== */
/* Extracted from layouts/place/single.html; edit this module directly. */
/* Editorial markdown styling — H1s are stripped at the template level (see above),
not hidden with CSS, so there is no .editorial-content h1 rule here. */
.editorial-content h2 {
font-family: 'Plus Jakarta Sans', sans-serif;
color: #004b38; font-weight: 700; letter-spacing: 0.15em;
text-transform: uppercase; font-size: 0.875rem;
margin-bottom: 1.5rem; margin-top: 4rem;
}
.editorial-content h2:first-child { margin-top: 0; }
/* Legacy pages: H2 headers are major section titles (not labels).
Override the label style so they read as proper section headings.
Applies to both legacy intro and legacy body sections. */
.legacy-content h2 {
font-family: 'Noto Serif', serif;
font-size: 2.25rem; font-weight: 700;
text-transform: none; letter-spacing: 0;
color: #1c1b1b; margin-top: 4rem; margin-bottom: 1.25rem;
line-height: 1.15;
}
.legacy-content h2:first-child { margin-top: 0; }
/* Legacy H3 / H4 differentiation — the base editorial-content rules are
too flat for legacy markdown where H4 is commonly used for major
sub-sections. Lift H3 and H4 sizes so the hierarchy reads clearly. */
.editorial-content.legacy-content h3 {
font-size: 2.25rem;
letter-spacing: -0.01em;
margin-top: 3rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(190, 201, 194, 0.3);
}
.editorial-content.legacy-content h4 {
font-size: 1.75rem;
letter-spacing: -0.005em;
color: #1c1b1b;
margin-top: 2.25rem;
margin-bottom: 0.75rem;
padding-left: 0.875rem;
border-left: 3px solid #004b38;
}
/* Legacy Table of Contents — rendered as a sidebar-style panel with
compact links. The exporter wraps the TOC section in