/* tailwind.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.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family: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}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-left-4{left:-1rem}.-top-4{top:-1rem}.bottom-0{bottom:0}.bottom-1{bottom:.25rem}.bottom-8{bottom:2rem}.left-0{left:0}.left-1\/2{left:50%}.left-3{left:.75rem}.right-0{right:0}.right-3{right:.75rem}.right-6{right:1.5rem}.right-8{right:2rem}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-4{top:1rem}.top-6{top:1.5rem}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-\[100\]{z-index:100}.z-\[1\]{z-index:1}.z-\[200\]{z-index:200}.z-\[90\]{z-index:90}.col-span-1{grid-column:span 1/span 1}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.mr-0{margin-right:0}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.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}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-0\.5{height:.125rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2\.5{height:.625rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-96{height:24rem}.h-\[500px\]{height:500px}.h-\[68px\]{height:68px}.h-auto{height:auto}.h-full{height:100%}.max-h-\[350px\]{max-height:350px}.min-h-\[600px\]{min-height:600px}.min-h-full{min-height:100%}.min-h-screen{min-height:100vh}.w-0{width:0}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2\.5{width:.625rem}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-96{width:24rem}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{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-1\/2{--tw-translate-y:-50%}.-translate-y-10{--tw-translate-y:-2.5rem}.-translate-y-10,.translate-x-1\/2{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-x-1\/2{--tw-translate-x:50%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-1\/2{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-1\/2{--tw-translate-y:50%}.translate-y-20{--tw-translate-y:5rem}.transform,.translate-y-20{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))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.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-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-y-3\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.875rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.875rem*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))}.overflow-hidden{overflow:hidden}.scroll-smooth{scroll-behavior:smooth}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-t{border-top-width:1px}.border-\[var\(--brand-indigo\)\]{border-color:var(--brand-indigo)}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-white\/50{border-color:hsla(0,0%,100%,.5)}.border-t-\[var\(--brand-indigo\)\]{border-top-color:var(--brand-indigo)}.bg-\[\#E9F5FF\]{--tw-bg-opacity:1;background-color:rgb(233 245 255/var(--tw-bg-opacity,1))}.bg-\[\#EEF2FF\]{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity,1))}.bg-\[\#F1F0FB\]{--tw-bg-opacity:1;background-color:rgb(241 240 251/var(--tw-bg-opacity,1))}.bg-\[var\(--brand-indigo\)\]{background-color:var(--brand-indigo)}.bg-black\/20{background-color:rgba(0,0,0,.2)}.bg-black\/60{background-color:rgba(0,0,0,.6)}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/80{background-color:hsla(0,0%,100%,.8)}.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-tr{background-image:linear-gradient(to top right,var(--tw-gradient-stops))}.from-\[var\(--brand-indigo\)\]{--tw-gradient-from:var(--brand-indigo) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gray-50{--tw-gradient-from:#f9fafb var(--tw-gradient-from-position);--tw-gradient-to:rgba(249,250,251,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gray-900{--tw-gradient-from:#111827 var(--tw-gradient-from-position);--tw-gradient-to:rgba(17,24,39,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-white{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#fff var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[var\(--brand-lavender\)\]{--tw-gradient-to:var(--brand-lavender) var(--tw-gradient-to-position)}.to-gray-100{--tw-gradient-to:#f3f4f6 var(--tw-gradient-to-position)}.to-gray-800{--tw-gradient-to:#1f2937 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-10{padding:2.5rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-12{padding-left:3rem;padding-right:3rem}.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}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.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-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-12{padding-bottom:3rem}.pb-24{padding-bottom:6rem}.pl-6{padding-left:1.5rem}.pr-6{padding-right:1.5rem}.pt-24{padding-top:6rem}.pt-40{padding-top:10rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.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-6xl{font-size:3.75rem;line-height:1}.text-9xl{font-size:8rem;line-height:1}.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-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.text-\[var\(--brand-indigo\)\]{color:var(--brand-indigo)}.text-\[var\(--brand-lavender\)\]{color:var(--brand-lavender)}.text-gray-200\/50{color:rgba(229,231,235,.5)}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/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-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/80{color:hsla(0,0%,100%,.8)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-5{opacity:.05}.opacity-60{opacity:.6}.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-2xl,.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)}.blur-3xl{--tw-blur:blur(64px)}.blur-3xl,.drop-shadow{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)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1))}.drop-shadow-lg,.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-sm{--tw-backdrop-blur:blur(4px);-webkit-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-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)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.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}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem;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\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.hover\:bg-black\/40:hover{background-color:rgba(0,0,0,.4)}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:text-\[var\(--brand-indigo\)\]:hover{color:var(--brand-indigo)}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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-gray-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(209 213 219/var(--tw-ring-opacity,1))}.group[open] .group-open\:rotate-180{--tw-rotate:180deg;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\:mr-2{margin-right:.5rem}.group:hover .group-hover\:w-2{width:.5rem}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.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\:gap-4{gap:1rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-24{padding-top:6rem;padding-bottom:6rem}.sm\:py-32{padding-top:8rem;padding-bottom:8rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-7xl{font-size:4.5rem;line-height:1}}@media (min-width:768px){.md\:mt-0{margin-top:0}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:text-left{text-align:left}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}}@media (min-width:1024px){.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:row-span-2{grid-row:span 2/span 2}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;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))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:gap-12{gap:3rem}.lg\:gap-16{gap:4rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-8xl{font-size:6rem;line-height:1}}@media (min-width:1280px){.xl\:text-9xl{font-size:8rem;line-height:1}}@media (prefers-color-scheme:dark){.dark\:bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.dark\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}} /* site.css */ :root { --heading-color: #111827; --body-text-color: #374151; --brand-yellow: #fecb3a; --brand-indigo: #6468af; --brand-lavender: #a5a8d4; --bg-light-1: #ffffff; --bg-light-2: #f9fafb; --bg-light-lilac: #f8f6fc; --dark-card-start: #111827; --dark-card-end: #1f2937; /* Midnight palette tokens */ --midnight-900: #0b1220; --midnight-800: #0f1b2d; --midnight-700: #13223a; --midnight-600: #183255; --dark-heading: #e6ecff; --dark-body: #c7d2fe; --dark-muted: #9fb1d6; --dark-border: #23314d; --dark-surface-1: #0e1b2e; --dark-surface-2: #0b1526; --dark-surface-3: #14213a; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; background-color: var(--bg-light-1); color: var(--body-text-color); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { color: var(--heading-color); text-transform: uppercase; font-weight: 300 !important; } /* Hero Section Styling */ .hero-gradient { background: linear-gradient(135deg, var(--brand-yellow), var(--brand-indigo), var(--brand-lavender)); } @keyframes hover-float { 0%, 100% { transform: translateY(0) rotate(var(--initial-rotate, 0deg)); } 50% { transform: translateY(-20px) rotate(var(--initial-rotate, 0deg)); } } @keyframes magical-fade-in { 0% { opacity: 0; transform: translateY(30px) scale(0.8) rotate(calc(var(--initial-rotate, 0deg) + 10deg)); filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)) blur(8px); } 60% { opacity: 0.8; transform: translateY(-10px) scale(1.05) rotate(calc(var(--initial-rotate, 0deg) - 5deg)); filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)) blur(2px); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--initial-rotate, 0deg)); filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)) blur(0px); } } .hover-bottle { animation: hover-float 6s ease-in-out infinite; animation-delay: calc(var(--fade-delay, 0s) * -1); position: absolute; filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)); will-change: transform, opacity; opacity: 1; } /* Ritual Section Animations */ @keyframes gentle-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } } .ritual-card-1:hover .ritual-image-bottle { animation: gentle-shake 0.5s ease-in-out infinite alternate; } .ritual-card-2:hover .ritual-image-bottle { transform: scale(1.5) translateY(20px) rotate(25deg); transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .ritual-card-3 .glow-overlay { position: absolute; inset: 0; background: radial-gradient(circle, rgba(165, 168, 212, 0.6) 0%, rgba(254, 203, 58, 0.4) 100%); opacity: 0; transition: opacity 0.5s ease-in-out; z-index: 25; } .ritual-card-3:hover .glow-overlay { opacity: 1; } .ritual-image, .ritual-image-bottle { transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Bento Grid & Card Hovers */ .bento-card:hover img { transform: scale(1.05); } .bento-card img, .shop-card img { transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .shop-card:hover img { transform: scale(1.05); } .science-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .science-card:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(100, 104, 175, 0.1), 0 8px 10px -6px rgba(100, 104, 175, 0.1); } /* FAQ Accordion */ details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } details > summary .accordion-icon { transition: transform 0.3s ease; } details[open] > summary .accordion-icon { transform: rotate(180deg); } /* Scroll-Reveal Animations */ .reveal-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* Modal Styles */ #modal { overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } #modal.is-visible { opacity: 1; pointer-events: auto; } #modal.is-visible #modal-content { transform: translateY(0); opacity: 1; } /* Modal content sizing - refined design */ #modal-content { max-width: 7xl; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; } @media (max-width: 1023px) { #modal-content { max-width: 95vw; width: 100%; } } /* Modal typography - matching reference design exactly */ #modal-body { font-size: 1rem; line-height: 1.6; color: #ffffff; } #modal-body p { margin: 0 0 1rem 0; color: #e5e7eb; font-weight: 400; } #modal-body strong { color: #ffffff; font-weight: 600; } #modal-body h2 { color: #ffffff; font-weight: 800; font-size: 2.25rem; margin: 0 0 0.75rem 0; letter-spacing: -0.025em; text-transform: uppercase; } #modal-body h3 { color: #ffffff; font-weight: 600; font-size: 1.125rem; margin: 1rem 0 0.75rem 0; letter-spacing: -0.025em; } #modal-body h4 { color: #ffffff; font-weight: 600; font-size: 1rem; margin: 1rem 0 0.5rem 0; letter-spacing: -0.025em; } #modal-body ul { margin: 0.75rem 0 1rem 1.5rem; padding: 0; } #modal-body li { margin: 0.375rem 0; list-style: disc; color: #e5e7eb; line-height: 1.5; font-size: 1rem; } /* Special styling for scientific content */ #modal-body .modal-subtitle { color: #a1a1aa; font-size: 0.875rem; font-weight: 500; margin-bottom: 1.5rem; text-transform: lowercase; font-style: italic; } /* Modal layout - two column structure matching reference */ #modal-main-content { display: flex; min-height: auto; } /* Left panel - visual content */ #modal-visual-panel { flex: 1; background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); padding: 3rem; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } /* Right panel - text content */ #modal-text-panel { flex: 1; background: linear-gradient(135deg, #111827 0%, #1f2937 100%); padding: 3rem; display: flex; flex-direction: column; justify-content: center; position: relative; } /* Image container styling */ #modal-image-container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } #modal-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.75rem; transition: transform 0.3s ease; } #modal-image:hover { transform: scale(1.02); } #modal-caption { font-size: 0.875rem; color: #6b7280; margin-top: 1.5rem; text-align: center; font-style: italic; line-height: 1.5; } /* Mobile responsive layout - stack panels */ @media (max-width: 1023px) { #modal-main-content { flex-direction: column; min-height: auto; max-height: none; } #modal-visual-panel { flex: none; min-height: 250px; max-height: none; height: auto; padding: 2rem; } #modal-text-panel { flex: none; min-height: auto; max-height: none; height: auto; padding: 2rem; overflow-y: visible; justify-content: flex-start; } #modal-body { font-size: 1rem; } #modal-body h2 { font-size: 1.75rem; } } /* Tablet responsive */ @media (max-width: 768px) { #modal-visual-panel { padding: 1.5rem; max-height: none; } #modal-text-panel { padding: 1.5rem; max-height: none; } } /* Ingredient mode overrides (applies only when #modal-content has .modal--ingredient) */ #modal-content.modal--ingredient { max-width: 6xl; } #modal-content.modal--ingredient #modal-main-content { min-height: 520px; } #modal-content.modal--ingredient #modal-visual-panel { flex: 1.5; /* ~60% */ padding: 1.5rem; } #modal-content.modal--ingredient #modal-text-panel { flex: 1; /* ~40% */ padding: 1.25rem 1.5rem; /* tighter */ justify-content: center; /* vertical centering */ } #modal-content.modal--ingredient #modal-text-content { max-width: 42ch; /* prevent overly wide single-line sentences */ margin: 0 auto; } #modal-content.modal--ingredient #modal-body { font-size: 0.95rem; line-height: 1.55; } #modal-content.modal--ingredient #modal-body p { margin: 0 0 0.75rem 0; } #modal-content.modal--ingredient #modal-body h2 { font-size: 1.75rem; margin-bottom: 0.5rem; letter-spacing: -0.02em; text-transform: uppercase; } #modal-content.modal--ingredient #modal-body h3 { margin: 0.75rem 0 0.5rem 0; } #modal-content.modal--ingredient #modal-image-container { padding: 0; /* reduce white margins around image */ } /* Soft divider for very short content */ #modal-content.modal--ingredient.short-text #modal-text-panel::before { content: ''; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(100, 104, 175, 0.35), transparent); z-index: 2; } html.dark #modal-content.modal--ingredient.short-text #modal-text-panel::before { background: linear-gradient(90deg, transparent, rgba(165, 168, 212, 0.35), transparent); } /* Ingredient mode responsive tweaks */ @media (max-width: 1023px) { #modal-content.modal--ingredient #modal-main-content { min-height: auto; } #modal-content.modal--ingredient #modal-visual-panel { min-height: 200px; max-height: none; height: auto; padding: 1rem; } #modal-content.modal--ingredient #modal-text-panel { min-height: auto; max-height: none; height: auto; padding: 1rem 1.25rem; } #modal-content.modal--ingredient #modal-text-content { max-width: 46ch; } #modal-content.modal--ingredient #modal-body { font-size: 0.95rem; } #modal-content.modal--ingredient #modal-body h2 { font-size: 1.5rem; } } @media (max-width: 768px) { #modal-content.modal--ingredient #modal-visual-panel { padding: 0.75rem; max-height: none; min-height: 180px; } #modal-content.modal--ingredient #modal-text-panel { padding: 0.75rem 1rem; } } /* Special handling for content with inline figures */ #modal-body .two-images { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 1.5rem 0; } @media (min-width: 768px) { #modal-body .two-images { grid-template-columns: 1fr 1fr; } } #modal-body figure { margin: 1.5rem 0; text-align: center; } #modal-body figure img { width: 100%; height: auto; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } /* Science Modal Styles */ .modal-backdrop { background-color: rgba(0, 0, 0, 0.75); transition: opacity 0.3s ease-in-out; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } .modal { transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; margin: 2rem auto; } .modal.hidden { transform: scale(0.95); opacity: 0; pointer-events: none; } .info-panel { transition: opacity 0.3s ease-in-out; } /* Ensure science modals content is fully visible */ @media (max-width: 1023px) { .modal { margin: 1rem auto; } } #modal-body figcaption { font-size: 0.875rem; color: #a1a1aa; margin-top: 0.75rem; text-align: center; font-style: italic; line-height: 1.5; } /* Enhanced content styling */ #modal-body blockquote { border-left: 4px solid #3b82f6; padding-left: 1rem; margin: 1.5rem 0; font-style: italic; color: #d1d5db; } #modal-body code { background-color: rgba(255, 255, 255, 0.1); padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-family: inherit; font-size: 0.875rem; } #modal-body pre { background-color: rgba(0, 0, 0, 0.3); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1rem 0; } #modal-body pre code { background: none; padding: 0; } /* Dark mode modal styling */ html.dark #modal-text-panel { background: linear-gradient(135deg, var(--midnight-900) 0%, var(--midnight-800) 100%); } html.dark #modal-visual-panel { background: linear-gradient(135deg, var(--dark-surface-2) 0%, var(--dark-surface-3) 100%); } html.dark #modal-caption { color: var(--dark-muted); } html.dark #modal-body figure img { border-color: var(--dark-border); } html.dark #modal-body figcaption { color: var(--dark-muted); } html.dark #modal-close { background: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.2); } html.dark #modal-close:hover { background: rgba(0, 0, 0, 0.5); } html.dark #modal-body { color: var(--dark-body); } html.dark #modal-body strong, html.dark #modal-body h4 { color: var(--dark-heading); } .nav-link.active { color: var(--heading-color) !important; } /* Active color should always contrast the white sliding capsule */ header:not(.nav-on-white) .nav-link.active { color: #111827 !important; } header.nav-on-white .nav-link.active { color: #111827 !important; } /* Hide sliding capsule until a link is active */ #sliding-capsule { opacity: 0; } .nav-link, .mobile-nav-link { text-transform: uppercase; font-weight: 400 !important; /* regular */ letter-spacing: 0.02em; transition: color 0.2s ease; } /* Default to white nav text; switch to dark when header has nav-on-white */ header:not(.nav-on-white) .nav-link { color: #ffffff !important; } /* On hover, the sliding capsule moves under the link → text must turn dark for contrast */ header:not(.nav-on-white) .nav-link:hover { color: #111827 !important; } header.nav-on-white .nav-link { color: #111827 !important; } header.nav-on-white .nav-link:hover { color: #000000 !important; } /* Ensure dark mode respects section-based color switching */ html.dark header:not(.nav-on-white) .nav-link { color: #ffffff !important; } /* In dark mode on dark backgrounds, keep links white on hover for contrast */ html.dark header:not(.nav-on-white) .nav-link:hover { color: #ffffff !important; } html.dark header.nav-on-white .nav-link { color: #111827 !important; } html.dark header.nav-on-white .nav-link:hover { color: #000000 !important; } html.dark header:not(.nav-on-white) .nav-link.active { color: #ffffff !important; } html.dark header.nav-on-white .nav-link.active { color: #111827 !important; } /* Final override: only force dark text when header is on white */ header.nav-on-white .nav-link.active, header.nav-on-white .nav-link.active:hover { color: #111827 !important; } /* Dark mode: always keep nav text white regardless of section background */ html.dark header .nav-link { color: #ffffff !important; } html.dark header .nav-link:hover { color: #ffffff !important; } html.dark header .nav-link.active, html.dark header .nav-link.active:hover { color: #ffffff !important; } html.dark header.nav-on-white .nav-link { color: #ffffff !important; } html.dark header.nav-on-white .nav-link:hover { color: #ffffff !important; } html.dark header.nav-on-white .nav-link.active, html.dark header.nav-on-white .nav-link.active:hover { color: #ffffff !important; } .glass-capsule { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } /* Mobile Navigation - Modern & Beautiful Design */ #mobile-nav.is-open { opacity: 1; pointer-events: auto; } #mobile-nav.is-open #mobile-nav-panel { transform: translateY(0); opacity: 1; } /* Premium gradient backdrop */ #mobile-nav { background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(100, 104, 175, 0.2)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Mobile nav panel - Ultra-modern glass morphism */ #mobile-nav-panel { transform: translateY(-100%); opacity: 0; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 4px 16px rgba(100, 104, 175, 0.08); position: relative; overflow-y: auto; overflow-x: hidden; width: 100%; height: 100vh; } /* Elegant animated gradient overlay */ #mobile-nav-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 300px; background: linear-gradient(180deg, rgba(100, 104, 175, 0.05) 0%, rgba(165, 168, 212, 0.03) 50%, transparent 100%); animation: gentle-float 8s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes gentle-float { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(20px); opacity: 0.7; } } /* Mobile nav content */ #mobile-nav-content { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; padding: 1.5rem; } /* Mobile nav header - Elevated design */ #mobile-nav-header { padding: 0 0 1.5rem; margin-bottom: 2rem; position: relative; } #mobile-nav-header::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--brand-indigo) 50%, transparent 100%); border-radius: 999px; } /* Mobile nav links - Modern card-based design */ #mobile-nav-links { padding: 0; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; } .mobile-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; color: #1f2937; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(100, 104, 175, 0.12); border-radius: 16px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); opacity: 0; transform: translateX(-30px); animation: slideInFromLeft 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.8) inset; } .mobile-nav-link::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--brand-lavender), var(--brand-indigo)); opacity: 0; transition: opacity 0.3s ease; } .mobile-nav-link::after { content: '→'; opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; color: var(--brand-indigo); font-weight: 700; font-size: 1.2rem; } .mobile-nav-link:nth-child(1) { animation-delay: 0.05s; } .mobile-nav-link:nth-child(2) { animation-delay: 0.1s; } .mobile-nav-link:nth-child(3) { animation-delay: 0.15s; } .mobile-nav-link:nth-child(4) { animation-delay: 0.2s; } .mobile-nav-link:nth-child(5) { animation-delay: 0.25s; } .mobile-nav-link:nth-child(6) { animation-delay: 0.3s; } @keyframes slideInFromLeft { to { opacity: 1; transform: translateX(0); } } .mobile-nav-link:hover { background: rgba(255, 255, 255, 0.95); border-color: rgba(100, 104, 175, 0.25); transform: translateX(4px); box-shadow: 0 8px 20px rgba(100, 104, 175, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.9) inset; } .mobile-nav-link:hover::before { opacity: 1; } .mobile-nav-link:hover::after { opacity: 1; transform: translateX(0); } .mobile-nav-link.active { background: linear-gradient(135deg, var(--brand-indigo) 0%, var(--brand-lavender) 100%); color: #ffffff; border-color: transparent; box-shadow: 0 12px 24px rgba(100, 104, 175, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.2) inset; transform: scale(1.02); } .mobile-nav-link.active::before { opacity: 0; } .mobile-nav-link.active::after { color: #ffffff; } /* Language and Contact sections - Modern card design */ #mobile-nav-language, #mobile-nav-contact { padding: 1.25rem; margin: 0 0 1rem 0; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(100, 104, 175, 0.1); border-radius: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.7) inset; } .language-section-title, .contact-title { color: var(--brand-indigo); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 1rem; text-align: center; position: relative; display: inline-block; width: 100%; } .language-section-title::after, .contact-title::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 30px; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--brand-indigo) 50%, transparent 100%); } .language-buttons { display: flex; justify-content: center; gap: 1.25rem; } .language-btn { width: 3.5rem; height: 3.5rem; border-radius: 18px; border: 2px solid rgba(100, 104, 175, 0.15); background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; position: relative; overflow: hidden; } .language-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--brand-lavender), var(--brand-indigo)); opacity: 0; transition: opacity 0.3s ease; } .language-btn img { width: 2rem; height: 2rem; border-radius: 12px; object-fit: cover; position: relative; z-index: 1; transition: transform 0.3s ease; } .language-btn:hover { transform: translateY(-4px) scale(1.05); border-color: var(--brand-indigo); box-shadow: 0 12px 24px rgba(100, 104, 175, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.8) inset; } .language-btn:hover::before { opacity: 0.1; } .language-btn:hover img { transform: scale(1.08); } .language-btn:active { transform: translateY(-2px) scale(1); } /* Language button active state styling */ #lang-de-header, #lang-en-header, #lang-de-mobile, #lang-en-mobile { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; position: relative; } #lang-de-header:hover, #lang-en-header:hover, #lang-de-mobile:hover, #lang-en-mobile:hover { transform: scale(1.05); } #lang-de-header:active, #lang-en-header:active, #lang-de-mobile:active, #lang-en-mobile:active { transform: scale(0.95); } /* Prevent image from blocking clicks */ #lang-de-header img, #lang-en-header img, #lang-de-mobile img, #lang-en-mobile img { pointer-events: none; user-select: none; -webkit-user-drag: none; } /* Contact section */ .contact-card { background: transparent; border: none; padding: 0; box-shadow: none; } .contact-title { color: var(--brand-indigo); font-size: 0.7rem; font-weight: 700; margin-bottom: 1rem; display: block; text-align: center; } .contact-title::before { content: ''; display: none; } .contact-info { color: #4b5563; font-size: 0.8rem; line-height: 1.6; text-align: center; } .contact-info p { margin: 0.25rem 0; } .contact-email { color: var(--brand-indigo); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; padding: 0.75rem 1.5rem; background: rgba(100, 104, 175, 0.08); border-radius: 12px; transition: all 0.3s ease; width: 100%; } .contact-email::before { content: '✉'; font-size: 1rem; } .contact-email:hover { background: var(--brand-indigo); color: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(100, 104, 175, 0.2); } /* Close button - Modern floating design */ #mobile-nav-close { width: 3rem; height: 3rem; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 2px solid rgba(100, 104, 175, 0.15); color: #6b7280; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; } #mobile-nav-close:hover { transform: rotate(90deg) scale(1.1); color: #ef4444; border-color: rgba(239, 68, 68, 0.3); background: rgba(254, 226, 226, 0.95); box-shadow: 0 12px 24px rgba(239, 68, 68, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.8) inset; } #mobile-nav-close:active { transform: rotate(90deg) scale(0.95); } /* Smooth scrollbar styling */ #mobile-nav-panel::-webkit-scrollbar { width: 6px; } #mobile-nav-panel::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.02); } #mobile-nav-panel::-webkit-scrollbar-thumb { background: rgba(100, 104, 175, 0.2); border-radius: 999px; } #mobile-nav-panel::-webkit-scrollbar-thumb:hover { background: rgba(100, 104, 175, 0.4); } /* Variants */ .logo-capsule { background: #ffffff; } .glass-panel { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.88)); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.25), 0 10px 12px -6px rgba(0, 0, 0, 0.15); } /* Dark mode (midnight) overrides */ html.dark body { background-color: var(--midnight-900); color: var(--dark-body); } /* Logos: black in light, white in dark */ .logo-img { filter: none; transition: filter 0.2s ease; } html.dark .logo-img { filter: brightness(0) invert(1); } html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: var(--dark-heading); } html.dark .hero-gradient { background: linear-gradient(135deg, #0b1220 0%, #11203a 50%, #1b2b4a 100%); } html.dark .glass-capsule { background: linear-gradient(to bottom, rgba(17, 24, 39, 0.65), rgba(17, 24, 39, 0.35)); border: 1px solid rgba(148, 163, 184, 0.22); color: #e5e7eb; } html.dark .logo-capsule { background: rgba(255, 255, 255, 0.06); } html.dark #sliding-capsule { background: rgba(255, 255, 255, 0.10) !important; border: 1px solid rgba(148, 163, 184, 0.18); } /* Global dark-mode color for links that use the nav-link class outside header (if any) */ html.dark .nav-link { color: #cbd5e1 !important; } /* Do not force active to white here — header-specific rules above handle contrast */ html.dark .nav-link:hover { color: #e8efff !important; } /* Sections and cards */ html.dark section.bg-white { background-color: var(--midnight-900) !important; } html.dark section.bg-gray-50 { background-color: var(--midnight-800) !important; } html.dark .bg-white { background-color: var(--dark-surface-1) !important; } html.dark .bg-gray-50 { background-color: var(--dark-surface-2) !important; } html.dark .border-gray-200, html.dark .border-gray-100 { border-color: var(--dark-border) !important; } /* Text contrasts */ html.dark .text-gray-900, html.dark .text-gray-800 { color: #e5e7eb !important; } html.dark .text-gray-700, html.dark .text-gray-600 { color: #cbd5e1 !important; } html.dark .text-gray-500 { color: #9fb1d6 !important; } html.dark .text-gray-400 { color: #8aa0c7 !important; } html.dark a:hover { color: #ffffff; } html.dark .accordion-icon svg path, html.dark .accordion-icon path { stroke: #a3b6da !important; } /* Ingredient badges (titles) - match science card typography */ html.dark .ingredient-title { background: rgba(11, 18, 32, 0.85) !important; color: #e5e7eb !important; /* match science card text color */ font-weight: 700 !important; /* font-bold - matches science card h3 */ font-size: 1.125rem !important; /* text-lg - matches science card h3 */ letter-spacing: 0.025em !important; /* match science card letter spacing */ box-shadow: 0 2px 8px rgba(2, 6, 23, 0.45); border: 1px solid rgba(148, 163, 184, 0.22); } /* Science cards */ html.dark .science-card { background-color: var(--dark-surface-2) !important; box-shadow: 0 20px 25px -5px rgba(18, 32, 58, 0.35), 0 8px 10px -6px rgba(18, 32, 58, 0.3) !important; } html.dark .science-card p, html.dark .science-card h3 { color: #e5e7eb; } /* Shop cards */ html.dark .shop-card { background-color: var(--dark-surface-2) !important; } html.dark .shop-card .text-gray-500 { color: #9fb1d6 !important; } html.dark .shop-card .text-gray-900 { color: #e5e7eb !important; } html.dark .shop-card a { background-color: #253b63 !important; } html.dark .shop-card a:hover { background-color: #1d2f50 !important; } /* Modal */ html.dark #modal-content { background-color: var(--dark-surface-1); color: var(--dark-body); } html.dark #modal-close { color: #a5b4fc; } /* Mobile nav panel - Dark mode - Ultra premium */ html.dark #mobile-nav { background: linear-gradient(135deg, rgba(11, 18, 32, 0.6), rgba(19, 34, 58, 0.4)); } html.dark #mobile-nav-panel { background: linear-gradient(165deg, rgba(11, 18, 32, 0.98) 0%, rgba(15, 27, 45, 0.96) 100%); backdrop-filter: blur(40px) saturate(150%); -webkit-backdrop-filter: blur(40px) saturate(150%); border: 1px solid rgba(165, 168, 212, 0.15); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 4px 16px rgba(100, 104, 175, 0.1); } html.dark #mobile-nav-panel::before { background: linear-gradient(180deg, rgba(165, 168, 212, 0.08) 0%, rgba(100, 104, 175, 0.05) 50%, transparent 100%); } html.dark #mobile-nav-header::after { background: linear-gradient(90deg, transparent 0%, var(--brand-lavender) 50%, transparent 100%); } html.dark .mobile-nav-link { color: #e5e7eb; background: rgba(255, 255, 255, 0.05); border-color: rgba(165, 168, 212, 0.12); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; } html.dark .mobile-nav-link::after { color: var(--brand-lavender); } html.dark .mobile-nav-link:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(165, 168, 212, 0.25); color: #ffffff; box-shadow: 0 8px 20px rgba(100, 104, 175, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; } html.dark .mobile-nav-link.active { background: linear-gradient(135deg, var(--brand-lavender) 0%, var(--brand-indigo) 100%); color: #ffffff; border-color: transparent; } html.dark #mobile-nav-language, html.dark #mobile-nav-contact { background: rgba(255, 255, 255, 0.04); border-color: rgba(165, 168, 212, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; } html.dark .language-section-title, html.dark .contact-title { color: var(--brand-lavender); } html.dark .language-section-title::after, html.dark .contact-title::after { background: linear-gradient(90deg, transparent 0%, var(--brand-lavender) 50%, transparent 100%); } html.dark .language-btn { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%); border-color: rgba(165, 168, 212, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; } html.dark .language-btn:hover { border-color: var(--brand-lavender); box-shadow: 0 12px 24px rgba(165, 168, 212, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; } html.dark .language-btn::before { background: linear-gradient(135deg, var(--brand-lavender), var(--brand-indigo)); } html.dark .contact-info { color: #cbd5e1; } html.dark .contact-email { color: var(--brand-lavender); background: rgba(165, 168, 212, 0.1); } html.dark .contact-email:hover { background: var(--brand-lavender); color: #111827; box-shadow: 0 8px 16px rgba(165, 168, 212, 0.3); } html.dark #mobile-nav-close { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%); border-color: rgba(165, 168, 212, 0.2); color: #cbd5e1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; } html.dark #mobile-nav-close:hover { background: rgba(254, 226, 226, 0.15); color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); box-shadow: 0 12px 24px rgba(239, 68, 68, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; } html.dark #mobile-menu-button { background-color: rgba(255, 255, 255, 0.08); color: #e5e7eb; } html.dark #mobile-nav-panel::-webkit-scrollbar-thumb { background: rgba(165, 168, 212, 0.3); } html.dark #mobile-nav-panel::-webkit-scrollbar-thumb:hover { background: rgba(165, 168, 212, 0.5); } /* Footer - Modern Design */ footer { position: relative; } /* Footer link animations */ footer a { position: relative; } footer a span { display: inline-block; } /* Footer dark mode */ html.dark footer { background: var(--midnight-900); } html.dark footer .absolute.inset-0 { background: linear-gradient(135deg, var(--midnight-800) 0%, var(--midnight-900) 50%, var(--midnight-800) 100%); opacity: 1; } html.dark footer .absolute.top-0 { background: radial-gradient(circle at top right, rgba(165, 168, 212, 0.08) 0%, transparent 70%); } html.dark footer .absolute.bottom-0 { background: radial-gradient(circle at bottom left, rgba(254, 203, 58, 0.06) 0%, transparent 70%); } html.dark footer p:not([data-i18n="text135"]) { color: var(--dark-body); } html.dark footer h3 { color: var(--dark-heading); } html.dark footer a:not(.legal-trigger):not([href="mailto:info@sirtfood.com"]) { color: var(--dark-body); } html.dark footer a:hover { color: var(--brand-lavender); } html.dark footer .border-gray-200 { border-color: var(--dark-border); } html.dark footer .bg-gradient-to-br.from-gray-50 { background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); border-color: var(--dark-border); } html.dark footer [data-i18n="text135"] { color: var(--dark-muted); } html.dark footer .text-gray-400 { color: var(--dark-muted); } html.dark footer .bg-gray-300 { background-color: var(--dark-border); } /* Footer logo handling - black in light mode, white in dark mode */ .footer-logo { filter: none; opacity: 0.85; transition: filter 0.2s ease, opacity 0.2s ease; } .footer-main-logo { filter: none; opacity: 1; transition: filter 0.2s ease, opacity 0.2s ease; } html.dark .footer-logo { filter: brightness(0) invert(1); opacity: 0.95; } html.dark .footer-main-logo { filter: brightness(0) invert(1); opacity: 1; } /* Quality badges dark mode */ html.dark footer .bg-gray-100 { background-color: rgba(255, 255, 255, 0.05); border-color: var(--dark-border); } html.dark footer .text-gray-600:not(a) { color: var(--dark-body); } html.dark footer input, html.dark footer button[type="submit"] { background-color: rgba(255, 255, 255, 0.05); border-color: var(--dark-border); color: var(--dark-heading); } html.dark footer input::placeholder { color: var(--dark-muted); } html.dark footer button[type="submit"] { background-color: var(--brand-lavender); color: var(--midnight-900); } html.dark footer button[type="submit"]:hover { background-color: var(--brand-indigo); } /* Social icons dark mode */ html.dark footer .bg-gray-100:has(svg) { background-color: rgba(255, 255, 255, 0.08); } html.dark footer .bg-gray-100:has(svg):hover { background-color: var(--brand-lavender); } /* Footer mobile responsiveness */ @media (max-width: 640px) { footer { padding-top: 3rem; } footer .grid.lg\\:grid-cols-12 { gap: 3rem; } footer .grid.sm\\:grid-cols-3 { grid-template-columns: 1fr; gap: 2.5rem; } footer h3 { font-size: 0.875rem; margin-bottom: 1.25rem; } footer .quality-badges { justify-content: center; } footer .partner-badge { width: 100%; justify-content: center; } } /* Theme toggle button */ #theme-toggle { transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } #theme-toggle:hover { transform: translateY(-1px); } html.dark #theme-toggle { background: rgba(255, 255, 255, 0.10); border-color: rgba(148, 163, 184, 0.25); color: #e5e7eb; } /* Ritual card 3 readability overlay Light mode: remove overlay for better contrast. Dark mode: keep gradient for legibility. */ .ritual-gradient-overlay { display: none; } html.dark .ritual-gradient-overlay { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 20; background: linear-gradient(to top, rgba(5, 10, 20, 0.92), rgba(5, 10, 20, 0.6), rgba(5, 10, 20, 0)); } /* Ensure strong typography contrast in light mode for card 03 */ html:not(.dark) .ritual-card-3 h3 { color: var(--heading-color) !important; } html:not(.dark) .ritual-card-3 p { color: var(--body-text-color) !important; } /* Benefits section: editorial product layout */ /* Mobile-only layout refinements */ @media (max-width: 640px) { @keyframes floatIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* 03 Ritual card: match desktop layout on mobile */ .ritual-card-3 > span { display: block; } .ritual-card-3 h3, .ritual-card-3 p { text-shadow: none; } /* Better mobile composition matching desktop */ .ritual-card-3 { min-height: 240px; } .ritual-card-3 img { object-position: center center; } .ritual-card-3 .relative.z-30 { justify-content: flex-end; align-items: center; padding: 2rem; } /* Remove the light panel behind text so it mirrors desktop */ html:not(.dark) .ritual-card-3 .relative.z-30::before { content: none !important; } } /* Extra small screens refinement (iPhone SE, etc.) */ /* Dark mode bento grid */ /* Hero primary CTA contrast in dark mode */ html.dark .order-now-btn { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.28) !important; box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } /* Shop slider dots active state */ #shop-slider .shop-dots button.is-active { background: #111827; } /* Loading states */ .loading { opacity: 0.6; pointer-events: none; } .loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid #f3f3f3; border-top: 2px solid var(--brand-indigo); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Enhanced focus states */ .focus-visible:focus-visible { outline: 2px solid var(--brand-indigo); outline-offset: 2px; } /* Smooth scroll behavior */ html { scroll-behavior: smooth; } /* Hero network canvas */ #hero-network-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } /* Image loading optimization */ img[loading="lazy"] { opacity:1; } /* Respect accessibility preferences without hiding animated content. */ :focus-visible { outline: 3px solid var(--brand-indigo); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal-on-scroll { opacity: 1 !important; transform: none !important; } .hover-bottle { opacity: 1 !important; } } /* refinement.css */ /* Cohesive, code-native redesign. Photography is limited to original product and editorial assets. Layout, decoration, text and controls are HTML/CSS. */ :root { --paper:#fff; --wash:#f6f6fa; --ink:#171a2d; --muted:#687083; --line:#e2e3ed; --accent:#6262a8; --radius:24px; } html { scroll-padding-top:110px; } html.dark { --paper:#111a2b; --wash:#0c1423; --ink:#edf0fa; --muted:#b1bdd2; --line:#2b3650; } body { color:var(--ink); } main > section:not(#hero) { scroll-margin-top:20px; } main > section:not(#hero):not(#benefits) { padding:100px 0; } main > section:not(#hero):not(#benefits) > div { max-width:1400px; margin-inline:auto; padding-inline:48px; } main > section:not(#hero):not(#benefits) h2 { font-size:clamp(32px,3.7vw,56px); line-height:1.1; letter-spacing:-.045em; font-weight:300!important; color:var(--ink); overflow-wrap:anywhere; hyphens:auto; } main > section:not(#hero):not(#benefits) > div > .text-center { max-width:850px; margin-bottom:54px; } main > section:not(#hero):not(#benefits) > div > .text-center > p { color:var(--muted); font-size:17px; margin-top:20px; } body > header .glass-capsule { background:color-mix(in srgb,var(--paper) 94%,transparent)!important; border:1px solid var(--line); box-shadow:0 5px 20px #11182708; } body > header .nav-link { color:var(--ink)!important; font-weight:500; font-size:12px; letter-spacing:.04em; } body > header .nav-link.active { color:var(--accent)!important; } #hero { height:100vh; height:100dvh; min-height:min-content; padding:clamp(96px,12dvh,160px) 0 clamp(20px,6dvh,80px); background:linear-gradient(125deg,#aea8d5,#7270aa 60%,#4d548d); } #hero > div { max-width:1440px; margin:auto; padding-inline:64px; height:100%; min-height:0; } #hero .hero-layout { height:100%; min-height:0; align-items:center; gap:clamp(24px,4vw,64px); } #hero .hero-copy { min-width:0; } #hero h1 { font-size:clamp(40px,min(6.6vw,10dvh),106px); letter-spacing:-.065em; text-shadow:none!important; } #hero h1 + p { font-size:clamp(15px,min(1.6vw,2.6dvh),24px); max-width:560px; line-height:1.5; margin-top:clamp(12px,3dvh,32px); } #hero .hero-actions { margin-top:clamp(16px,4dvh,40px); } #hero .hero-visual { height:min(100%,500px); min-height:0; margin-top:0; } #hero .hero-stage { height:100%; min-height:120px; } #hero .hero-stage > img:not(.hover-bottle) { width:auto; height:auto; max-width:min(100%,448px); max-height:100%; object-fit:contain; } #hero .order-now-btn { padding:17px 36px; font-size:13px; letter-spacing:.08em; box-shadow:0 10px 25px #20244818; } #active-ingredients { background:var(--paper); border-bottom:1px solid var(--line); } #active-ingredients ul { max-width:1100px; gap:8px; } #active-ingredients li span { color:var(--muted); background:var(--wash); border:0; box-shadow:none; font-size:13px; padding:10px 16px; } #ritual { background:var(--paper); } #ritual [class*="ritual-card-"] { border-radius:var(--radius); background:var(--wash); min-height:470px; border:1px solid var(--line); } #ritual [class*="ritual-card-"] > span { top:22px; left:24px; font-size:16px; color:var(--accent); font-weight:400; } #ritual .ritual-image-bottle { max-height:260px; } #ritual h3 { font-size:24px; letter-spacing:-.03em; } #ritual p { font-size:15px; } #science { background:var(--wash); } #science .text-center > div { display:none; } #science .science-card { border-radius:var(--radius); border:1px solid var(--line); background:var(--paper); padding:30px; box-shadow:none; min-height:205px; } #science .science-card h3 { color:var(--ink); letter-spacing:-.035em; font-size:24px; line-height:1.25; } #science .science-card p { color:var(--muted); font-size:15px; } #science .science-card :is(h3,p) { overflow-wrap:anywhere; hyphens:auto; } #science .science-card > p:first-child { font-size:10px; letter-spacing:.14em; color:var(--accent); margin-bottom:22px; } #science .science-card:first-child { background:#292b4d; border-color:#292b4d; padding:38px; } #science .science-card:first-child h3 { color:#fff!important; font-size:36px; } #science .science-card:first-child p { color:#c4c4dd!important; } #science .science-card:first-child span { color:#dad8fa; } #science .science-card:hover { border-color:#aaa7d0; transform:translateY(-3px); } #studies { background:var(--paper); } #studies .grid > div { border-radius:var(--radius); border:1px solid var(--line); box-shadow:none; background:var(--wash); overflow:hidden; } #shop { background:var(--wash); } #shop .shop-card { border-radius:var(--radius); padding:28px; background:var(--paper); border:1px solid var(--line); box-shadow:none; } #shop .shop-card h3 { font-size:24px; letter-spacing:-.03em; color:var(--ink); } #shop .shop-card a { font-size:13px; letter-spacing:.04em; padding:15px; } #faq { background:var(--paper); } #faq details { border:0; border-bottom:1px solid var(--line); padding:25px 0; border-radius:0; background:transparent; } #faq summary { color:var(--ink); font-size:18px; font-weight:400; gap:20px; } #faq details > div { color:var(--muted); max-width:720px; line-height:1.75; } footer { background:var(--wash)!important; border-top:1px solid var(--line); } footer > .absolute { display:none; } footer > .relative { max-width:1400px; padding:80px 48px 30px; } footer h3 { color:var(--accent)!important; font-size:11px!important; letter-spacing:.12em; font-weight:500!important; } footer p, footer a { color:var(--muted); } footer :is(.text-gray-400,.text-gray-500) { color:var(--muted)!important; } footer a:hover { color:var(--accent); } footer .border-t { border-color:var(--line); } /* All detail dialogs share the same readable, responsive editorial layout. */ .modal-backdrop, #modal { background:#12172b80!important; backdrop-filter:blur(14px); z-index:100!important; padding:32px!important; } .modal-backdrop .modal, #modal-content { width:min(1100px,100%); max-width:1100px!important; border-radius:26px!important; border:1px solid var(--line); background:var(--paper)!important; box-shadow:0 40px 100px #12172b33; overflow:hidden; margin:24px auto; } .modal-backdrop .modal { color:var(--muted); } .modal-backdrop .modal > button, #modal-close { width:40px; height:40px; top:16px; right:16px; padding:9px; border:1px solid var(--line); border-radius:50%; color:var(--ink)!important; background:var(--paper)!important; box-shadow:0 4px 15px #1118270a; z-index:20; } .modal-backdrop .modal > div > div:first-child { background:var(--wash); padding:36px; display:flex; align-items:center; justify-content:center; border-radius:0; } .modal-backdrop .modal > div > div:first-child img { object-fit:contain!important; width:100%; height:auto!important; max-height:580px; } .modal-backdrop .modal > div > div:last-child { padding:62px 42px 42px; max-height:calc(100svh - 115px); overflow:auto; } .modal-backdrop .modal h1, .modal-backdrop .modal h2 { font-size:clamp(28px,2.5vw,40px); line-height:1.1; letter-spacing:-.045em; color:var(--ink)!important; } .modal-backdrop .modal h3, .modal-backdrop .modal h4 { color:var(--accent)!important; font-size:15px; font-weight:500!important; line-height:1.45; } .modal-backdrop .modal p, .modal-backdrop .modal li { color:var(--muted)!important; font-size:15px; line-height:1.8; } .modal-backdrop .modal ul { list-style-position:outside; padding-left:18px; } .modal-backdrop .modal li { padding-left:5px; margin-top:10px; } #modal-main-content { min-height:0!important; } #modal-text-panel { background:var(--paper)!important; padding:58px!important; } #modal-text-panel > .absolute { display:none; } #modal-body { color:var(--muted); } #modal-body h2 { color:var(--ink)!important; font-size:38px; letter-spacing:-.04em; } #modal-body p, #modal-body li { color:var(--muted); } #modal-content.modal--legal { max-width:760px!important; } #modal-content.modal--legal #modal-visual-panel { display:none!important; } #modal-content.modal--legal #modal-text-panel { width:100%; } #modal-content.modal--legal #modal-body > h4 { display:none; } #modal-content.modal--contact #modal-body > h2 { margin-bottom:15px; } .contact-form { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px; } .contact-form label { color:var(--ink); font-size:12px; font-weight:500; display:flex; flex-direction:column; gap:8px; } .contact-form input, .contact-form textarea { width:100%; min-width:0; color:var(--ink); background:var(--wash); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font:inherit; font-size:16px; outline-offset:3px; color-scheme:light; } .contact-form textarea { resize:vertical; min-height:130px; } .contact-message, .contact-form button, .contact-note { grid-column:1/-1; } .contact-form button { background:var(--accent); color:#fff; border-radius:12px; padding:15px; font-size:14px; font-weight:500; } #modal-body .contact-note { margin:0; font-size:12px; } .contact-address { border-top:1px solid var(--line); margin-top:28px; padding-top:24px; display:flex; justify-content:space-between; gap:24px; font-size:13px; } #modal-body .contact-address p { font-size:13px; margin:6px 0 0; } .contact-address a { color:var(--accent); } @media(max-width:1000px) { main > section:not(#hero):not(#benefits) > div { padding-inline:28px; } #hero > div { padding-inline:32px; } .modal-backdrop .modal > div > div:last-child { padding:60px 28px 28px; } } @media(max-width:767px) { main > section:not(#hero):not(#benefits) { padding:66px 0; } main > section:not(#hero):not(#benefits) > div { padding-inline:20px; } main > section:not(#hero):not(#benefits) > div > .text-center { margin-bottom:32px; } #hero { padding:clamp(92px,12dvh,116px) 0 clamp(16px,2.5dvh,28px); } #hero > div { padding-inline:24px; } #hero .hero-layout { grid-template-columns:1fr; grid-template-rows:auto minmax(120px,1fr); gap:clamp(12px,2.5dvh,24px); align-items:stretch; } #hero h1 { font-size:clamp(30px,min(13.5vw,6.5dvh),54px); } #hero h1 + p { font-size:clamp(14px,min(4.5vw,2.6dvh),18px); margin-top:clamp(12px,2.4dvh,20px); } #hero .hero-actions { margin-top:clamp(16px,2.8dvh,24px); } #hero .order-now-btn { padding:13px 28px; } #hero .hero-visual, #hero .hero-stage { height:100%; } #hero .hover-bottle { max-height:clamp(64px,18dvh,140px); width:auto; } #science .science-card:first-child h3 { font-size:30px; } #ritual [class*="ritual-card-"] { min-height:420px; } #faq summary { font-size:16px; } footer > .relative { padding:60px 24px 25px; } .modal-backdrop, #modal { padding:12px!important; } .modal-backdrop .modal, #modal-content { margin:8px auto; border-radius:20px!important; max-height:calc(100svh - 40px); overflow:auto; } .modal-backdrop .modal > div > div:first-child { padding:24px; max-height:260px; } .modal-backdrop .modal > div > div:first-child img { max-height:210px; width:auto; max-width:100%; } .modal-backdrop .modal > div > div:last-child { padding:30px 24px; max-height:none; overflow:visible; } .modal-backdrop .modal > button { position:sticky; float:right; margin:12px 12px -52px 0; } #modal-text-panel { padding:62px 24px 30px!important; } #modal-body h2 { font-size:32px; } .contact-form { grid-template-columns:1fr; gap:16px; } .contact-address { flex-direction:column; gap:12px; } } @media(max-height:500px) and (min-width:600px) { #hero { padding-block:88px 16px; } #hero .hero-layout { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); grid-template-rows:1fr; gap:24px; align-items:center; } #hero h1 { font-size:clamp(26px,7dvh,36px); } #hero h1 + p { font-size:13px; line-height:1.4; margin-top:12px; } #hero .hero-actions { margin-top:12px; } #hero .order-now-btn { padding:10px 24px; } } @media(prefers-reduced-motion:reduce) { #science .science-card:hover { transform:none; } } html body > header #nav-container .nav-link { color:var(--ink)!important; } html body > header #nav-container .nav-link.active { color:var(--accent)!important; } html.dark #sliding-capsule { background:#263149; } #modal-body strong { color:var(--ink); } #modal-close svg, .modal-backdrop .modal > button svg { width:20px; height:20px; } html.dark #studies h3, html.dark #shop .text-gray-900, html.dark #ritual h3 { color:var(--ink); } @media(max-width:767px) { #modal #modal-content { width:100%!important; margin:8px auto!important; max-height:calc(100svh - 40px)!important; min-height:0!important; overflow-y:auto!important; } #modal { align-items:flex-start; } } @media(max-width:767px) { #modal > .min-h-full { padding:0; } } /* Contact dialog: translucent glass, with a clear surface for typing. */ #modal:has(#modal-content.modal--contact) { background:rgb(12 10 28 / .3)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } #modal #modal-content.modal--contact { background:linear-gradient(135deg,rgb(255 255 255 / .16),transparent 52%),color-mix(in srgb,var(--paper) 68%,transparent)!important; backdrop-filter:blur(28px) saturate(145%); -webkit-backdrop-filter:blur(28px) saturate(145%); border:1px solid rgb(255 255 255 / .35)!important; box-shadow:0 28px 90px rgb(9 7 25 / .3),inset 0 1px 0 rgb(255 255 255 / .45)!important; } #modal #modal-content.modal--contact #modal-text-panel { background:transparent!important; } #modal-content.modal--contact .contact-form input, #modal-content.modal--contact .contact-form textarea { background:color-mix(in srgb,var(--paper) 48%,transparent); border-color:color-mix(in srgb,var(--ink) 15%,transparent); box-shadow:inset 0 1px 2px rgb(0 0 0 / .04); } #modal-content.modal--contact .contact-form input:focus, #modal-content.modal--contact .contact-form textarea:focus { background:color-mix(in srgb,var(--paper) 82%,transparent); outline:2px solid var(--accent); } @supports not (backdrop-filter:blur(1px)) { #modal #modal-content.modal--contact { background:var(--paper)!important; } } @media(prefers-reduced-transparency:reduce) { #modal #modal-content.modal--contact { background:var(--paper)!important; backdrop-filter:none; -webkit-backdrop-filter:none; } } /* sections.css */ /* Redesigned Benefits stage and in-place Ingredient gallery. Nothing moves on its own: every change answers the cursor, a click or a scroll. */ /* ================= Benefits: nutrient elements orbiting the product ================= */ #benefits { --bn-bg:#12132a; --bn-ink:#f4f3ff; --bn-muted:#aeb0d4; --bn-line:rgb(255 255 255 / .1); position:relative; overflow:hidden; isolation:isolate; color:var(--bn-ink); background: radial-gradient(60% 50% at 50% 38%, #3b3a7a 0%, transparent 70%), radial-gradient(40% 40% at 90% 100%, #2a2560 0%, transparent 70%), var(--bn-bg); } html.dark #benefits { --bn-bg:#0a0c1c; } /* Fine grid texture, masked to fade out at the edges */ #benefits::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(var(--bn-line) 1px,transparent 1px),linear-gradient(90deg,var(--bn-line) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(70% 60% at 50% 45%,#000 20%,transparent 75%); opacity:.5; } .bn-shell { max-width:1360px; margin:auto; padding:clamp(80px,10vw,150px) clamp(20px,4vw,48px) clamp(60px,7vw,100px); } .bn-head { text-align:center; max-width:1100px; margin:0 auto clamp(40px,6vw,80px); } .bn-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.22em; color:var(--bn-muted); margin-bottom:22px; } .bn-eyebrow::before, .bn-eyebrow::after { content:""; width:28px; height:1px; background:currentColor; opacity:.5; } #benefits h2 { font-size:clamp(52px,9vw,148px); line-height:.9; font-weight:200; letter-spacing:-.06em; margin:0; background:linear-gradient(180deg,#fff 30%,#b9b5f5 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } html[lang="de"] #benefits h2 { font-size:clamp(40px,6.4vw,104px); overflow-wrap:anywhere; } .bn-sub { margin-top:22px; font-size:clamp(17px,1.5vw,22px); color:var(--bn-muted); } /* Stage: product in the centre, five element tiles around it */ .bn-stage { position:relative; display:grid; gap:16px; align-items:center; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr); grid-template-areas:"a p c" "b p d" ". e ."; } .bn-elements { display:contents; list-style:none; margin:0; padding:0; } .bn-a { grid-area:a; --hue:#f2b857; } .bn-b { grid-area:b; --hue:#5fd0c0; } .bn-c { grid-area:c; --hue:#5fd0c0; } .bn-d { grid-area:d; --hue:#ff9a6b; } .bn-e { grid-area:e; --hue:#b7a8ff; } .bn-product { grid-area:p; position:relative; align-self:stretch; display:grid; place-items:center; perspective:1200px; min-height:420px; } .bn-halo { position:absolute; width:92%; aspect-ratio:1; border-radius:50%; z-index:-1; background:radial-gradient(circle at 50% 45%, color-mix(in srgb,var(--glow,#8f89ff) 55%,transparent) 0%, transparent 62%); transition:background .6s var(--ease-out); } .bn-halo::after { content:""; position:absolute; inset:8%; border-radius:50%; border:1px solid rgb(255 255 255 / .12); } .bn-product img { width:112%; max-width:none; height:auto; filter:drop-shadow(0 40px 50px rgb(0 0 0 / .45)); transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)); transition:transform .8s var(--ease-out); } .bn-el { position:relative; padding:22px 22px 24px; border-radius:22px; min-height:190px; background:linear-gradient(160deg,rgb(255 255 255 / .07),rgb(255 255 255 / .02)); border:1px solid var(--bn-line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto 1fr; column-gap:12px; transition:border-color .35s, background .35s, transform .5s var(--ease-out), opacity .7s var(--ease-out)!important; cursor:default; } .bn-sym { grid-column:1; font-size:clamp(44px,4.4vw,64px); line-height:1; font-weight:200; letter-spacing:-.04em; color:var(--hue); } .bn-num { grid-column:2; grid-row:1; align-self:start; font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--bn-muted); } .bn-name { grid-column:1 / -1; margin-top:6px; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--bn-muted); } .bn-el p { hyphens:auto; -webkit-hyphens:auto; grid-column:1 / -1; align-self:end; margin-top:16px; font-size:15px; line-height:1.5; color:#dedcf5; } .bn-el::after { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0; box-shadow:0 0 0 1px var(--hue), 0 20px 50px -20px var(--hue); transition:opacity .35s; } .bn-el:hover { background:linear-gradient(160deg,rgb(255 255 255 / .11),rgb(255 255 255 / .03)); } .bn-el:hover::after { opacity:.9; } /* Hovering one element dims the rest and tints the product halo (set in JS). */ .bn-stage.is-focusing .bn-el:not(:hover) { opacity:.45; } .bn-usage { margin-top:clamp(40px,5vw,72px); padding-top:28px; border-top:1px solid var(--bn-line); display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:center; text-align:center; color:var(--bn-muted); font-size:15px; line-height:1.55; } .bn-usage p { max-width:720px; margin:0; } .bn-contents { padding:9px 18px; border-radius:999px; border:1px solid var(--bn-line); color:var(--bn-ink); font-weight:500; white-space:nowrap; } @media (max-width:1023px) { .bn-stage { grid-template-columns:1fr 1fr; grid-template-areas:"p p" "a b" "c d" "e e"; } .bn-product { min-height:0; } .bn-product img { width:100%; } .bn-el { min-height:0; } } @media (max-width:560px) { .bn-stage { gap:10px; } .bn-el { padding:18px; border-radius:18px; } .bn-el p { font-size:14px; } .bn-sym { font-size:40px; } } /* ================= Ingredients: expanding in-place gallery ================= */ #ingredients { background:var(--wash); } .ing-gallery { display:flex; align-items:stretch; gap:12px; min-height:clamp(520px,44vw,620px); max-width:1400px; margin:0 auto; } .ing-tile { --bg:color-mix(in srgb,var(--tint) 16%,var(--paper)); position:relative; flex:1 1 0; min-width:0; overflow:hidden; border-radius:28px; background:var(--bg); border:1px solid color-mix(in srgb,var(--tint) 22%,var(--line)); transition:flex-grow .7s var(--ease-out), background-color .4s, box-shadow .4s, opacity .7s var(--ease-out), transform .7s var(--ease-out)!important; } html.dark .ing-tile { --bg:color-mix(in srgb,var(--tint) 12%,var(--paper)); } .ing-tile.is-active { flex-grow:4.2; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); grid-template-rows:auto 1fr; gap:28px 16px; align-items:start; box-shadow:0 30px 60px -30px color-mix(in srgb,var(--tint) 55%,transparent); } @media (hover:hover) { .ing-tile:not(.is-active):hover { flex-grow:1.35; --bg:color-mix(in srgb,var(--tint) 26%,var(--paper)); } } .ing-trigger { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:24px; text-align:left; background:none; border:0; cursor:pointer; color:var(--ink); border-radius:inherit; } .ing-index { position:absolute; top:22px; left:24px; font-size:12px; font-weight:600; letter-spacing:.14em; color:color-mix(in srgb,var(--tint) 35%,var(--ink)); } .ing-name { font-size:15px; font-weight:500; letter-spacing:.04em; line-height:1.15; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; overflow-wrap:anywhere; hyphens:auto; transition:font-size .5s var(--ease-out); } .ing-compound { display:none; } .ing-close { position:absolute; top:16px; right:16px; z-index:6; display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px solid color-mix(in srgb,var(--tint) 28%,var(--line)); background:var(--paper); color:var(--ink); cursor:pointer; transition:background-color .2s, transform .2s; } .ing-close svg { width:18px; height:18px; } .ing-tile.is-active .ing-close { display:flex; } .ing-close:hover { background:color-mix(in srgb,var(--tint) 18%,var(--paper)); } .ing-img { position:absolute; left:50%; top:38%; width:150%; max-width:none; height:40%; object-fit:contain; translate:-50% -50%; pointer-events:none; transition:left .7s var(--ease-out), top .7s var(--ease-out), width .7s var(--ease-out), height .7s var(--ease-out), transform .6s var(--ease-out); } @media (hover:hover) { .ing-tile:not(.is-active):hover .ing-img { transform:scale(1.06); } } .ing-panel { display:none; min-width:0; z-index:4; } .ing-tile.is-active .ing-panel { display:block; grid-column:1; grid-row:2; padding:0 0 40px 40px; animation:faq-in .35s var(--ease-out); } .ing-short { font-size:17px; line-height:1.5; color:var(--ink); margin-bottom:18px; } .ing-lead { font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:color-mix(in srgb,var(--tint) 35%,var(--ink)); margin-bottom:10px; } .ing-panel ul { list-style:none; margin:0; padding:0; max-height:none; overflow:visible; } .ing-panel li { position:relative; padding:8px 0 8px 20px; font-size:14px; line-height:1.5; color:var(--muted); border-top:1px solid color-mix(in srgb,var(--tint) 20%,var(--line)); } .ing-panel li::before { content:""; position:absolute; left:2px; top:15px; width:7px; height:7px; border-radius:50%; background:var(--tint); } /* Active tile: header top-left, copy bottom-left, large image on the right */ .ing-tile.is-active .ing-trigger { position:relative; inset:auto; grid-column:1/-1; grid-row:1; width:100%; justify-content:flex-start; padding:64px 80px 0 40px; } .ing-tile.is-active .ing-index { left:40px; top:30px; } .ing-tile.is-active .ing-name { writing-mode:horizontal-tb; transform:none; white-space:normal; font-size:clamp(28px,2.8vw,44px); font-weight:300; letter-spacing:-.04em; text-transform:uppercase; } .ing-tile.is-active .ing-compound { display:inline-block; margin-top:12px; padding:6px 12px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; background:color-mix(in srgb,var(--tint) 28%,var(--paper)); color:color-mix(in srgb,var(--tint) 45%,var(--ink)); animation:faq-in .5s .25s both var(--ease-out); } .ing-tile.is-active .ing-img { position:relative; grid-column:2; grid-row:2; left:auto; top:auto; translate:none; width:calc(100% - 20px); height:clamp(220px,24vw,360px); align-self:center; justify-self:start; } @media (max-width:900px) { .ing-gallery { flex-direction:column; min-height:0; gap:10px; } .ing-tile { flex:none; height:96px; transition:height .6s var(--ease-out), background-color .4s, box-shadow .4s, opacity .7s var(--ease-out), transform .7s var(--ease-out)!important; } .ing-tile.is-active { height:auto; grid-template-columns:1fr; grid-template-rows:auto auto 1fr; gap:0; } .ing-trigger { justify-content:center; padding:0 110px 0 24px; } .ing-index { position:static; margin-bottom:4px; } .ing-name { writing-mode:horizontal-tb; transform:none; white-space:normal; font-size:17px; } .ing-img { left:auto; right:-10px; top:50%; width:130px; height:80px; translate:0 -50%; } .ing-tile.is-active .ing-trigger { position:relative; inset:auto; padding:24px 76px 0 24px; } .ing-tile.is-active .ing-index { position:static; } .ing-tile.is-active .ing-name { font-size:28px; } .ing-tile.is-active .ing-img { position:relative; grid-column:1; grid-row:2; display:block; left:auto; right:auto; top:auto; translate:none; width:100%; height:220px; margin:10px 0; } .ing-tile.is-active .ing-panel { grid-column:1; grid-row:3; padding:0 24px 24px; } .ing-panel ul { max-height:none; } } /* Leave room above the cards for the savings labels inside the clipping viewport. */ #shop-slider .shop-viewport { padding-block:20px 12px; } #shop-slider .shop-track { will-change:transform; } #shop-slider .shop-dots { gap:0; } #shop-slider .shop-dots button { display:grid; place-items:center; width:44px; height:44px; background:transparent!important; } #shop-slider .shop-dots button::before { content:""; width:10px; height:10px; border-radius:50%; background:#a0a4ae; } #shop-slider .shop-dots button.is-active::before { background:var(--ink); } @media (prefers-reduced-motion: reduce) { .bn-product img { transform:none!important; } } /* ================= Science: bento that expands a card into one large tile ================= */ .sci-bento { position:relative; } .sci-grid[hidden] { display:none; } #science .science-card { border:1px solid var(--line); transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s!important; } #science .science-card[aria-expanded="true"] { border-color:var(--accent); } .sci-detail { position:relative; z-index:5; border-radius:24px; overflow:clip; padding:clamp(24px,4vw,56px); color:#e9e8fb; background: radial-gradient(70% 90% at 100% 0%, #3e3c86 0%, transparent 60%), radial-gradient(60% 60% at 0% 100%, #24345e 0%, transparent 70%), #15162f; } .sci-detail[hidden] { display:none; } .sci-detail-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start; } .sci-detail.is-open .sci-detail-layout { animation:sci-content-in .35s var(--ease-out); } @keyframes sci-content-in { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } } .sci-toolbar { position:sticky; top:100px; z-index:8; display:flex; justify-content:flex-end; margin-bottom:20px; pointer-events:none; } .sci-close { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:10px; pointer-events:auto; border:0; background:none; color:#fff; box-shadow:none; cursor:pointer; transition:color .2s, transform .2s; } .sci-close svg { width:24px; height:24px; } .sci-close:hover { color:#c4bfff; transform:scale(1.08); } .sci-close:focus-visible { outline:2px solid #c4bfff; outline-offset:4px; } .sci-detail-copy { min-width:0; } .sci-eyebrow { font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#aaa6f5; margin-bottom:18px; } .sci-detail h3 { font-size:clamp(30px,3.8vw,60px)!important; line-height:1.08; font-weight:200!important; letter-spacing:-.045em; text-transform:uppercase; margin:0 0 clamp(24px,3vw,36px); overflow-wrap:anywhere; background:linear-gradient(180deg,#fff 40%,#b9b5f5); -webkit-background-clip:text; background-clip:text; color:transparent!important; } .sci-body { display:grid; gap:14px; font-size:16px; line-height:1.7; color:#c9c8e6; max-width:62ch; } .sci-body > p:first-child { font-size:clamp(17px,1.35vw,20px); line-height:1.6; color:#f1f0ff; } .sci-body h4 { margin-top:10px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#aaa6f5; } .sci-body ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; } .sci-body li { position:relative; padding:12px 14px 12px 40px; border-radius:14px; background:rgb(255 255 255 / .05); border:1px solid rgb(255 255 255 / .08); } .sci-body li::before { content:""; position:absolute; left:16px; top:20px; width:8px; height:8px; border-radius:50%; background:#aaa6f5; box-shadow:0 0 12px #aaa6f5; } .sci-media { position:sticky; top:168px; display:grid; gap:20px; min-width:0; justify-items:center; align-items:start; } .sci-media figure { margin:0; width:fit-content; max-width:100%; min-width:0; border-radius:18px; overflow:hidden; background:transparent; box-shadow:0 24px 50px -30px #000; } .sci-media img { display:block; width:auto; height:auto; max-width:100%; max-height:min(68svh,620px); object-fit:contain; } .sci-media--duo { grid-template-columns:1fr 1fr; } .sci-media figcaption { background:#1d1f3d; color:#c9c8e6; font-size:13px; line-height:1.55; } .sci-media figcaption summary { cursor:pointer; min-height:44px; padding:12px 16px; font-weight:600; color:#fff; list-style:none; } .sci-media figcaption summary::after { content:"+"; float:right; transition:rotate .3s var(--ease-spring); } .sci-media figcaption details[open] summary::after { rotate:45deg; } .sci-media figcaption details p { padding:0 16px 14px; } /* Image-led topic: full width illustration */ #sci-histone .sci-detail-layout { grid-template-columns:1fr; } #sci-histone .sci-media { position:static; } #sci-histone .sci-media img { max-height:none; } @media (max-width:900px) { .sci-detail-layout { grid-template-columns:1fr; gap:28px; } .sci-media { position:static; } .sci-media img { max-height:600px; } } @media (max-width:599px) { .sci-detail { padding:20px; border-radius:22px; } .sci-toolbar { margin-bottom:28px; } .sci-body { font-size:16px; line-height:1.65; } .sci-body > p:first-child { font-size:17px; } .sci-media--duo { grid-template-columns:1fr; } .sci-media figure { border-radius:14px; } } @media (prefers-reduced-motion:reduce) { .sci-detail.is-open .sci-detail-layout { animation:none; } } /* ================= Ritual: three-step timeline ================= */ #ritual .grid { position:relative; gap:20px!important; counter-reset:step; } /* Connector rail threading through the three step markers */ #ritual .grid::before { content:""; position:absolute; top:36px; left:calc(16.66% - 10px); right:calc(16.66% - 10px); height:1px; z-index:3; pointer-events:none; background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px); opacity:.45; } #ritual [class*="ritual-card-"] { min-height:560px!important; border-radius:28px!important; border:1px solid var(--line)!important; text-align:left!important; background:linear-gradient(180deg,var(--stage-a) 0%,var(--stage-b) 100%)!important; transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out), opacity .8s var(--ease-out)!important; } #ritual .ritual-card-1 { --stage-a:#f7efe0; --stage-b:#fbf8f2; --dot:#e2a64a; } #ritual .ritual-card-2 { --stage-a:#e9e7f8; --stage-b:#f7f6fd; --dot:var(--accent); } #ritual .ritual-card-3 { --stage-a:#f0e6e4; --stage-b:#f0e6e4; --dot:#d9869a; } html.dark #ritual .ritual-card-1 { --stage-a:#2a2619; --stage-b:#141b2b; } html.dark #ritual .ritual-card-2 { --stage-a:#23224a; --stage-b:#141b2b; } /* Step marker: numeral in a ring on the rail, replaces the old faded numeral */ #ritual [class*="ritual-card-"] > span.absolute { position:absolute!important; inset:18px auto auto 50%!important; translate:-50% 0; z-index:40!important; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; font-size:12px!important; font-weight:600!important; letter-spacing:.06em; line-height:1; color:var(--ink)!important; background:var(--paper); border:1px solid var(--line); box-shadow:0 0 0 6px color-mix(in srgb,var(--paper) 70%,transparent); } #ritual [class*="ritual-card-"] > span.absolute::after { content:""; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid var(--dot); clip-path:inset(0 0 50% 0); rotate:-45deg; } #ritual .ritual-card-1 > div, #ritual .ritual-card-2 > div { padding:84px 32px 34px!important; align-items:stretch!important; } #ritual .ritual-image-bottle { max-height:320px!important; filter:drop-shadow(0 30px 30px rgb(40 40 80 / .18)); transition:transform .7s var(--ease-spring)!important; } #ritual .ritual-card-1:hover .ritual-image-bottle { transform:rotate(-8deg) translateY(-8px); } #ritual .ritual-card-2:hover .ritual-image-bottle { transform:rotate(6deg) translateY(-8px); } #ritual [class*="ritual-card-"] h3 { font-size:clamp(24px,2vw,32px)!important; font-weight:300!important; letter-spacing:-.035em; line-height:1.1; text-transform:uppercase; margin-bottom:10px!important; } #ritual [class*="ritual-card-"] p { font-size:15px!important; line-height:1.6; color:var(--muted)!important; max-width:32ch; } #ritual .ritual-card-1 .mt-6, #ritual .ritual-card-2 .mt-6 { width:100%; padding-top:22px; border-top:1px solid color-mix(in srgb,var(--dot) 30%,var(--line)); } #ritual [class*="ritual-card-"]:hover { transform:translateY(-6px); box-shadow:0 30px 60px -30px color-mix(in srgb,var(--dot) 60%,transparent); } /* Step 3: full-bleed portrait with a glass caption */ #ritual .ritual-card-3 > img { transition:transform 1.2s var(--ease-out)!important; } #ritual .ritual-card-3:hover > img { transform:scale(1.05); } #ritual .ritual-card-3 .ritual-gradient-overlay { background:linear-gradient(180deg,transparent 45%,rgb(20 18 40 / .55))!important; z-index:15!important; } #ritual .ritual-card-3 .relative.z-30 { justify-content:flex-end!important; align-items:stretch!important; padding:20px!important; } #ritual .ritual-card-3 .relative.z-30::before { content:none!important; } #ritual .ritual-card-3 .relative.z-30 { gap:0; } #ritual .ritual-card-3 h3, #ritual .ritual-card-3 p { position:relative; color:#fff!important; text-shadow:none!important; } #ritual .ritual-card-3 .relative.z-30 > * { padding-inline:22px; } #ritual .ritual-card-3 .relative.z-30 h3 { padding-top:20px; margin:0!important; border-radius:20px 20px 0 0; background:rgb(24 22 48 / .42); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } #ritual .ritual-card-3 .relative.z-30 p { padding-top:8px; padding-bottom:20px; border-radius:0 0 20px 20px; background:rgb(24 22 48 / .42); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:rgb(255 255 255 / .85)!important; max-width:none; } @media (max-width:767px) { #ritual .grid::before { top:36px; bottom:36px; left:50%; right:auto; width:1px; height:auto; background:repeating-linear-gradient(180deg,var(--accent) 0 6px,transparent 6px 12px); opacity:0; } #ritual [class*="ritual-card-"] { min-height:480px!important; } } /* polish.css */ /* Final polish layer: performance fixes, motion system, micro-interactions. Loaded last; relies on tokens from refinement.css. */ :root { --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.4,.64,1); --focus:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent); } /* Closed overlays must not paint: full-screen backdrop-filter at opacity 0 still composites every frame. */ #modal:not(.is-visible), #mobile-nav:not(.is-open) { visibility:hidden; transition:opacity .35s var(--ease-out), visibility 0s linear .35s; } #modal.is-visible, #mobile-nav.is-open { visibility:visible; transition:opacity .35s var(--ease-out), visibility 0s; } /* ---------- Motion system ---------- */ .reveal-on-scroll { transform:translateY(24px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); } /* Scroll progress hairline */ #scroll-progress { position:fixed; inset:0 0 auto; height:2px; z-index:60; pointer-events:none; transform-origin:0 50%; transform:scaleX(var(--progress,0)); background:linear-gradient(90deg,#a7a3dc,var(--accent),#4d548d); } /* ---------- Header ---------- */ body > header { transition:transform .45s var(--ease-out), top .3s var(--ease-out); } body > header .glass-capsule { backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); transition:box-shadow .3s, background-color .3s; } html.dark body > header .glass-capsule { background:color-mix(in srgb,var(--paper) 82%,transparent)!important; } body.is-scrolled > header { top:10px; } body.is-scrolled > header .glass-capsule { box-shadow:0 10px 30px -12px #11182733; } body.header-hidden > header { transform:translateY(calc(-100% - 20px)); } body.header-hidden > header:focus-within { transform:none; } #sliding-capsule { transition:left .45s var(--ease-spring), width .45s var(--ease-spring), opacity .25s!important; } /* ---------- Interactive cards ---------- */ .science-card, #ritual [class*="ritual-card-"], #shop .rounded-2xl { position:relative; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s; } .science-card:hover, #ritual [class*="ritual-card-"]:hover { transform:translateY(-4px); box-shadow:0 24px 48px -20px #31334d33; } /* Pointer-following spotlight (coordinates set by site.js) */ .has-spotlight { overflow:hidden; } .has-spotlight::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; opacity:0; transition:opacity .4s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--accent) 14%,transparent), transparent 60%); } .has-spotlight:hover::before { opacity:1; } /* ---------- Buttons ---------- */ .order-now-btn, #studies a[href$=".pdf"], #shop a[href*="timeblock"] { transition:transform .35s var(--ease-spring), box-shadow .35s, background-color .25s!important; } .order-now-btn:hover, #studies a[href$=".pdf"]:hover, #shop a[href*="timeblock"]:hover { transform:translateY(-2px); box-shadow:0 14px 28px -10px color-mix(in srgb,var(--accent) 60%,transparent); } .order-now-btn:active, #studies a[href$=".pdf"]:active, #shop a[href*="timeblock"]:active { transform:translateY(0) scale(.98); } #studies a[href$=".pdf"] svg { transition:transform .35s var(--ease-spring); } #studies a[href$=".pdf"]:hover svg { transform:translateY(2px); } /* ---------- FAQ ---------- */ #faq details { transition:border-color .3s, box-shadow .3s, background-color .3s; } #faq details:hover { border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); } #faq details[open] { box-shadow:0 18px 40px -24px #31334d40; border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); } #faq details[open] > summary ~ * { animation:faq-in .45s var(--ease-out); } #faq summary .accordion-icon { transition:transform .45s var(--ease-spring)!important; } @keyframes faq-in { from { opacity:0; transform:translateY(-6px); } } /* ---------- Details ---------- */ ::selection { background:color-mix(in srgb,var(--accent) 30%,transparent); } :focus-visible { outline:none; box-shadow:var(--focus)!important; border-radius:12px; } html { scrollbar-color:color-mix(in srgb,var(--accent) 40%,transparent) transparent; } /* Images paint immediately; scroll reveals handle section entrances. */ footer a { transition:color .2s, transform .3s var(--ease-out); } footer ul a:hover { color:var(--accent)!important; } html.dark ::selection { background:#6262a870; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; transition-delay:0s!important; } #scroll-progress, .has-spotlight::before { display:none; } body.header-hidden > header { transform:none; } } /* Header: smaller logo; actions float as standalone round buttons (no capsule). */ body > header .logo-capsule { padding-inline:18px!important; } body > header .logo-img { height:34px!important; width:auto; } body > header .glass-capsule:last-child { background:none!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; padding:0!important; gap:8px; } body > header .glass-capsule:last-child > * { margin:0!important; } body > header .glass-capsule:last-child > div { gap:8px; } body > header .glass-capsule:last-child button { width:44px; height:44px; padding:3px; border-radius:50%; background:color-mix(in srgb,var(--paper) 88%,transparent)!important; border:1px solid var(--line)!important; backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); box-shadow:0 6px 18px -8px #11182740; transition:transform .3s var(--ease-spring), box-shadow .3s; } body > header .glass-capsule:last-child button:hover { box-shadow:0 10px 22px -8px #11182755; } /* Header v3: standalone capsules, static; only the hovered item inflates. */ body > header .glass-capsule:nth-child(2) { background:none!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; padding:0!important; } body > header #nav-container { gap:10px; } body > header #nav-container > * + * { margin-left:0!important; } body > header #sliding-capsule { display:none; } body > header .logo-capsule, body > header .nav-link { background:color-mix(in srgb,var(--paper) 88%,transparent)!important; border:1px solid var(--line); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); box-shadow:0 8px 22px -10px #11182740; } body > header .nav-link { display:flex; align-items:center; height:44px; padding:0 20px!important; border-radius:999px; transition:transform .35s var(--ease-spring), background-color .3s, color .3s, box-shadow .3s!important; } body > header .nav-link:hover { box-shadow:0 14px 26px -10px #11182755; } html body > header #nav-container .nav-link.nav-link.active, html body > header #nav-container .nav-link.active:hover { background:var(--accent)!important; color:#fff!important; border-color:transparent; box-shadow:0 10px 26px -8px color-mix(in srgb,var(--accent) 80%,transparent); } html.dark body > header #nav-container .nav-link.nav-link.active, html.dark body > header #nav-container .nav-link.active:hover { background:#8b88d6!important; color:#0c1423!important; } /* Uniform 44px header controls; hovered item inflates on its own. */ body > header .nav-link, body > header .glass-capsule:last-child button { height:44px!important; } body > header .glass-capsule:last-child button { width:44px!important; } body > header .nav-link, body > header .glass-capsule:last-child button { transition:transform .3s var(--ease-spring), background-color .3s, color .3s, box-shadow .3s!important; } body > header .nav-link:hover, body > header .glass-capsule:last-child button:hover { transform:scale(1.08); } /* dark.css */ /* Dark theme. One palette: deep neutral indigo surfaces, a single lavender accent. Loaded last; legacy site.css tokens are remapped so older rules follow it. */ html.dark { color-scheme: dark; --wash:#0b0b14; /* page background */ --paper:#12121d; /* section / card surface */ --raised:#1a1a28; /* chips, hovered surfaces */ --ink:#eeedf6; --muted:#a4a3ba; --line:#25253a; --accent:#a8a3ff; --accent-ink:#0e0d1e; /* text on accent */ --focus:0 0 0 3px #a8a3ff66; /* legacy tokens (site.css) */ --midnight-900:var(--wash); --midnight-800:var(--paper); --midnight-700:var(--raised); --midnight-600:#23233a; --dark-surface-1:var(--paper); --dark-surface-2:var(--wash); --dark-surface-3:var(--raised); --dark-heading:var(--ink); --dark-body:var(--muted); --dark-muted:var(--muted); --dark-border:var(--line); --brand-indigo:#8f8af0; } html.dark body { background:var(--wash)!important; color:var(--ink); } html.dark h1, html.dark h2, html.dark h3, html.dark h4 { color:var(--ink); } /* ---------- Header ---------- */ html.dark body > header .glass-capsule:nth-child(2), html.dark body > header .glass-capsule:last-child { background:none!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } html.dark body > header .logo-capsule, html.dark body > header .nav-link, html.dark body > header .glass-capsule:last-child button { background:rgb(22 22 36 / .72)!important; border:1px solid rgb(255 255 255 / .08)!important; box-shadow:0 8px 24px -12px rgb(0 0 0 / .6); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); } html.dark body > header #nav-container .nav-link { color:var(--ink)!important; } html.dark body > header #nav-container .nav-link:hover { background:rgb(34 34 54 / .85)!important; } html.dark body > header #nav-container .nav-link.nav-link.active, html.dark body > header #nav-container .nav-link.active:hover { background:var(--accent)!important; color:var(--accent-ink)!important; border-color:transparent!important; box-shadow:0 10px 28px -10px #a8a3ffaa; } html.dark body > header .glass-capsule:last-child button { color:var(--ink)!important; } html.dark body.is-scrolled > header .glass-capsule { box-shadow:none; } /* ---------- Hero ---------- */ html.dark #hero { background: radial-gradient(60% 70% at 78% 45%, #2e2b63 0%, transparent 70%), radial-gradient(50% 60% at 10% 90%, #1c1b3d 0%, transparent 70%), linear-gradient(165deg,#16152b 0%,#0b0b14 100%)!important; } html.dark #hero h1 { color:#f4f3ff!important; } html.dark #hero h1 + p { color:#bcbad6!important; } html.dark #hero .order-now-btn { background:var(--accent)!important; color:var(--accent-ink)!important; border:0!important; } /* ---------- Benefits ---------- */ html.dark #benefits { --bn-bg:#0e0e1a; --bn-line:rgb(255 255 255 / .07); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* ---------- Ingredients ---------- */ html.dark #ingredients, html.dark #science, html.dark #shop { background:var(--wash)!important; } html.dark .ing-tile { --bg:color-mix(in srgb,var(--tint) 8%,#14141f); border-color:color-mix(in srgb,var(--tint) 16%,var(--line)); } html.dark .ing-tile.is-active { box-shadow:0 30px 60px -34px color-mix(in srgb,var(--tint) 45%,transparent); } @media (hover:hover) { html.dark .ing-tile:not(.is-active):hover { --bg:color-mix(in srgb,var(--tint) 14%,#14141f); } } html.dark .ing-index, html.dark .ing-lead { color:color-mix(in srgb,var(--tint) 70%,#fff); } html.dark .ing-short { color:var(--ink); } html.dark .ing-panel li { color:var(--muted); border-color:color-mix(in srgb,var(--tint) 14%,var(--line)); } html.dark .ing-tile.is-active .ing-compound { background:color-mix(in srgb,var(--tint) 18%,#14141f); color:color-mix(in srgb,var(--tint) 75%,#fff); } html.dark .ing-img { filter:drop-shadow(0 20px 30px rgb(0 0 0 / .45)); } html.dark #active-ingredients { background:var(--paper)!important; border-color:var(--line); } html.dark #active-ingredients li span { background:var(--raised)!important; color:var(--muted)!important; } /* ---------- Ritual ---------- */ html.dark #ritual, html.dark #studies, html.dark #faq { background:var(--paper)!important; } html.dark #ritual [class*="ritual-card-"] { border-color:var(--line)!important; } html.dark #ritual .ritual-card-1 { --stage-a:#231e16; --stage-b:#15151f; --dot:#e2a64a; } html.dark #ritual .ritual-card-2 { --stage-a:#1f1d3c; --stage-b:#15151f; --dot:var(--accent); } html.dark #ritual [class*="ritual-card-"] > span.absolute { background:var(--raised)!important; border-color:var(--line)!important; box-shadow:0 0 0 6px color-mix(in srgb,var(--paper) 70%,transparent); } html.dark #ritual .ritual-image-bottle { filter:drop-shadow(0 30px 30px rgb(0 0 0 / .5)); } /* ---------- Science ---------- */ html.dark #science .science-card { background:var(--paper)!important; border-color:var(--line)!important; } html.dark #science .science-card:hover { border-color:#3a3960!important; } html.dark #science .science-card:first-child { background:linear-gradient(150deg,#2b2866,#18173a)!important; border-color:#34317a!important; } html.dark #science .science-card > p:first-child { color:var(--accent)!important; } html.dark #science .science-card h3 { color:var(--ink)!important; } html.dark #science .science-card p { color:var(--muted)!important; } html.dark #science .science-card:first-child p { color:#c9c7ef!important; } html.dark .sci-detail { background: radial-gradient(70% 90% at 100% 0%, #2c2a66 0%, transparent 60%), radial-gradient(60% 60% at 0% 100%, #1a1f3f 0%, transparent 70%), #11111d; box-shadow:inset 0 0 0 1px var(--line); } /* ---------- Studies & Shop ---------- */ html.dark #studies .grid > div, html.dark #shop .shop-card, html.dark #shop .bg-white { background:var(--paper)!important; border-color:var(--line)!important; box-shadow:none!important; } html.dark #studies .grid > div { background:var(--raised)!important; } html.dark #studies a[href$=".pdf"], html.dark #shop a[href*="timeblock"] { background:var(--accent)!important; color:var(--accent-ink)!important; } html.dark #shop a[href*="timeblock"]:hover { background:#bdb9ff!important; } html.dark #shop .text-gray-900, html.dark #shop h3, html.dark #studies h3 { color:var(--ink)!important; } html.dark #shop .text-gray-500, html.dark #shop .text-gray-600 { color:var(--muted)!important; } html.dark #shop .border-gray-200 { border-color:var(--line)!important; } html.dark #shop .shop-prev, html.dark #shop .shop-next { background:var(--raised)!important; color:var(--ink); } /* ---------- FAQ & footer ---------- */ html.dark #faq details { background:transparent!important; border-color:var(--line)!important; } html.dark #faq details:hover { border-color:#3a3960!important; } html.dark #faq summary, html.dark #faq summary span { color:var(--ink)!important; } html.dark #faq details > div, html.dark #faq details p { color:var(--muted)!important; } html.dark footer { background:var(--wash)!important; border-color:var(--line)!important; } html.dark footer h3 { color:var(--accent)!important; } html.dark footer p, html.dark footer a, html.dark footer li { color:var(--muted)!important; } html.dark footer a:hover { color:var(--ink)!important; } html.dark footer a[href^="mailto"], html.dark footer a[href^="mailto"]:hover { background:var(--accent)!important; color:var(--accent-ink)!important; } html.dark footer .border-t, html.dark footer .border-gray-200 { border-color:var(--line)!important; } /* ---------- Details ---------- */ html.dark #scroll-progress { background:linear-gradient(90deg,#6f6ad8,var(--accent),#d8d5ff); } html.dark ::selection { background:#a8a3ff55; color:#fff; } html.dark #scroll-to-top, html.dark #scrollToTop { background:var(--accent)!important; color:var(--accent-ink)!important; } /* glass-cards.css */ /* Light-transmitting card surfaces; type and product artwork keep their contrast. */ :is(html,html.dark) :is(#science,#ingredients,#shop) :is(.science-card,.ing-tile,.shop-card), :is(html,html.dark) #ritual [class*="ritual-card-"], :is(html,html.dark) #studies .grid > div { background-color:color-mix(in srgb,var(--paper) 72%,transparent)!important; backdrop-filter:blur(12px) saturate(125%); -webkit-backdrop-filter:blur(12px) saturate(125%); box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),0 12px 36px rgb(12 10 30 / .07)!important; } :is(html,html.dark) #science .science-card:first-child { background:linear-gradient(145deg,rgb(69 62 139 / .65),rgb(28 25 65 / .6))!important; } #benefits .bn-el { background:linear-gradient(145deg,rgb(255 255 255 / .09),rgb(255 255 255 / .025))!important; backdrop-filter:blur(12px) saturate(125%); -webkit-backdrop-filter:blur(12px) saturate(125%); box-shadow:inset 0 1px 0 rgb(255 255 255 / .1); } @media(prefers-reduced-transparency:reduce) { :is(html,html.dark) :is(#science,#ingredients,#shop) :is(.science-card,.ing-tile,.shop-card), :is(html,html.dark) #ritual [class*="ritual-card-"], :is(html,html.dark) #studies .grid > div {background-color:var(--paper)!important;backdrop-filter:none;-webkit-backdrop-filter:none;} #benefits .bn-el {background:#19182d!important;backdrop-filter:none;-webkit-backdrop-filter:none;} }