:root{--logo-primary-color:#1a1a1a;--logo-light-color:#ffffff;--logo-accent-color:#3b82f6;--logo-text-color:var(--logo-primary-color);--logo-background-color:transparent;--logo-min-size:60px;--logo-max-size:300px;--logo-desktop-min:120px;--logo-desktop-max:160px;--logo-mobile-min:80px;--logo-mobile-max:100px;--logo-transition-duration:0.3s;--logo-transition-easing:ease-in-out} .vedaist-logo{display:block;height:auto;transition:all var(--logo-transition-duration) var(--logo-transition-easing);width:clamp( var(--logo-min-size),min(var(--logo-desktop-max),max(var(--logo-desktop-min),12vw)),var(--logo-max-size) )} .vedaist-logo-stacked{aspect-ratio:60 / 50;width:clamp( calc(var(--logo-min-size) * 0.8),min(var(--logo-mobile-max),15vw),calc(var(--logo-max-size) * 0.6) )} .vedaist-logo-icon{aspect-ratio:1 / 1;width:clamp(16px,4vw,48px);height:clamp(16px,4vw,48px)} .vedaist-logo-stacked .logo-text,.vedaist-logo-icon .logo-icon-text{fill:var(--logo-text-color);transition:fill var(--logo-transition-duration) var(--logo-transition-easing)} .vedaist-logo-stacked .logo-accent,.vedaist-logo-icon .logo-accent{fill:var(--logo-accent-color);transition:fill var(--logo-transition-duration) var(--logo-transition-easing)} .logo-container .vedaist-logo{max-width:100%;height:auto} .vedaist-logo .logo-text{fill:var(--logo-text-color);transition:fill var(--logo-transition-duration) var(--logo-transition-easing)} .theme-light{--logo-text-color:var(--logo-primary-color);--logo-background-color:transparent} .theme-light .vedaist-logo .logo-text,.logo-light .vedaist-logo .logo-text{fill:var(--logo-primary-color)} .theme-dark{--logo-text-color:var(--logo-light-color);--logo-background-color:transparent} .theme-dark .vedaist-logo .logo-text,.logo-dark .vedaist-logo .logo-text{fill:var(--logo-light-color)} @media (prefers-color-scheme:light){:root:not(.theme-dark):not(.theme-light){--logo-text-color:var(--logo-primary-color)} .vedaist-logo:not(.theme-dark):not(.theme-light) .logo-text{fill:var(--logo-primary-color)} } @media (prefers-color-scheme:dark){:root:not(.theme-dark):not(.theme-light){--logo-text-color:var(--logo-light-color)} .vedaist-logo:not(.theme-dark):not(.theme-light) .logo-text{fill:var(--logo-light-color)} } body.theme-light{--logo-text-color:var(--logo-primary-color)} body.theme-light .vedaist-logo .logo-text{fill:var(--logo-primary-color)} body.theme-dark{--logo-text-color:var(--logo-light-color)} body.theme-dark .vedaist-logo .logo-text{fill:var(--logo-light-color)} .vedaist-logo,.vedaist-logo .logo-text,.logo-container{transition:fill var(--logo-transition-duration) var(--logo-transition-easing),color var(--logo-transition-duration) var(--logo-transition-easing),background-color var(--logo-transition-duration) var(--logo-transition-easing)} .theme-transitioning .vedaist-logo,.theme-transitioning .vedaist-logo .logo-text{transition:fill var(--logo-transition-duration) var(--logo-transition-easing),color var(--logo-transition-duration) var(--logo-transition-easing),background-color var(--logo-transition-duration) var(--logo-transition-easing),opacity var(--logo-transition-duration) var(--logo-transition-easing)} .theme-light .vedaist-logo .logo-text{fill:#1a1a1a} .theme-dark .vedaist-logo .logo-text{fill:#ffffff} @media (prefers-contrast:high){.vedaist-logo .logo-text{fill:currentColor} .theme-light .vedaist-logo .logo-text{fill:#000000} .theme-dark .vedaist-logo .logo-text{fill:#ffffff} } @media screen and (min-width:1200px){.vedaist-logo{width:clamp( var(--logo-desktop-min),var(--logo-desktop-max),var(--logo-max-size) )} } @media screen and (min-width:768px) and (max-width:1199px){.vedaist-logo{width:clamp( var(--logo-desktop-min),min(var(--logo-desktop-max),14vw),var(--logo-max-size) )} } @media screen and (min-width:481px) and (max-width:767px){.vedaist-logo{width:clamp( var(--logo-mobile-max),min(var(--logo-desktop-min),18vw),var(--logo-max-size) )} } @media screen and (max-width:480px){.vedaist-logo{width:clamp( var(--logo-min-size),min(var(--logo-mobile-max),22vw),var(--logo-mobile-max) )} .vedaist-logo-stacked{width:clamp( calc(var(--logo-min-size) * 0.7),18vw,var(--logo-mobile-min) )} .vedaist-logo-icon{width:clamp(20px,5vw,32px);height:clamp(20px,5vw,32px)} } @media screen and (max-width:320px){.vedaist-logo{width:clamp(var(--logo-min-size),20vw,var(--logo-mobile-min))} } @media screen and (max-width:767px) and (orientation:landscape){.vedaist-logo{width:clamp( var(--logo-min-size),min(var(--logo-mobile-min),15vw),var(--logo-mobile-max) )} .logo-container{padding:0.5rem 0} } @media screen and (min-width:481px) and (max-width:1024px) and (orientation:portrait){.vedaist-logo{width:clamp( var(--logo-mobile-max),min(var(--logo-desktop-min),16vw),var(--logo-max-size) )} } @media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-resolution:192dpi),screen and (min-resolution:2dppx){.vedaist-logo{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges} } @media (prefers-reduced-motion:reduce){.vedaist-logo,.vedaist-logo .logo-text{transition:none} } @media (prefers-contrast:high){.vedaist-logo .logo-text{fill:currentColor} .logo-container{border:1px solid currentColor;padding:0.25rem} } @media print{.vedaist-logo{width:120px !important;height:auto !important} .vedaist-logo .logo-text{fill:#000000 !important} } @supports (container-type:inline-size){.logo-container{container-type:inline-size} @container (max-width:300px){.vedaist-logo{width:clamp(var(--logo-min-size),80%,var(--logo-mobile-max))} } @container (min-width:600px){.vedaist-logo{width:clamp(var(--logo-desktop-min),25%,var(--logo-desktop-max))} } } @supports not (width:clamp(1px,1vw,1px)){@media screen and (min-width:768px){.vedaist-logo{width:var(--logo-desktop-min);max-width:var(--logo-desktop-max)} } @media screen and (max-width:767px){.vedaist-logo{width:var(--logo-mobile-min);max-width:var(--logo-mobile-max)} } } .vedaist-logo{aspect-ratio:105 / 40;background-color:transparent} .vedaist-logo-stacked{aspect-ratio:60 / 50;background-color:transparent} .vedaist-logo-icon{aspect-ratio:1 / 1;background-color:transparent} .vedaist-logo:not([src]){display:inline-block;width:var(--logo-desktop-min);height:calc(var(--logo-desktop-min) * 40 / 105);background-color:var(--logo-primary-color);color:var(--logo-light-color);text-align:center;line-height:calc(var(--logo-desktop-min) * 40 / 105);font-weight:600;font-size:calc(var(--logo-desktop-min) * 0.2)} .vedaist-logo:not([src])::after{content:"Vedaist"}