/* WESTO Smart Load generated bundle: css/westo-critical.smart.css Sources: css/mobile-forms.css, css/westo.webflow.shared.min.css, css/fa-override.css, css/i18n-dir.css, css/entrance-gate.css, css/entrance-gate-redesign.css, css/table.css, css/responsive-shell.css, css/menu-story.css, css/westo-glass.css, css/vazir-system.css, css/westo-production-v12.css, css/entrance-promo-deck.css, css/westo-v14.1-experience-polish.css, css/westo-v14.3-ultra-fine.css, css/westo-ultra-fine-v1.2.css, css/westo-dish-card-premium.css, css/westo-pwa.css, css/westo-landscape-recovery.css */ /* ===== BEGIN css/mobile-forms.css ===== */ /* Mobile form UX: prevent iOS Safari auto-zoom on focus (<16px inputs). */ @supports (-webkit-touch-callout: none) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select { font-size: 16px !important; } } @media (max-width: 991px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select, .table-drawer .field input, .cm-search-panel input, .field input, .otp-boxes input, .qty-modal input { font-size: 16px !important; } } /* Apple Squircle Form Controls & Continuous Curvature */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select, .table-drawer .field input, .cm-search-panel input, .field input, .otp-boxes input, .qty-modal input { border-radius: 12px; corner-shape: squircle; } input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 6px; corner-shape: squircle; border: 1.5px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); vertical-align: middle; cursor: pointer; display: inline-grid; place-content: center; transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1); } input[type="checkbox"]:checked { background: #78d0d8 !important; border-color: #78d0d8 !important; } input[type="checkbox"]:checked::after { content: ""; width: 5px; height: 9px; border: solid #0a1a1c; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-0.5px, -1px); } /* Standalone PWA polish */ /* Keyboard-aware drawer: visualViewport sets --vv-height on #table-drawer */ #table-drawer.is-keyboard-open .table-drawer__panel { max-height: var(--vv-height, 100dvh); height: var(--vv-height, 100dvh); } .westo-sw-banner { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(120%); z-index: 100050; display: flex; align-items: center; gap: 0.65rem; max-width: min(22rem, calc(100vw - 1.5rem)); padding: 0.65rem 0.75rem 0.65rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(14, 12, 11, 0.94); color: rgba(246, 242, 235, 0.96); font-family: "Vazirmatn", "Geist", system-ui, sans-serif; font-size: 0.82rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: transform 0.28s ease, opacity 0.28s ease; } .westo-sw-banner.is-on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .westo-sw-banner button { appearance: none; border: 0; border-radius: 999px; min-height: var(--touch-min, 44px); padding: 0.4rem 0.75rem; font: inherit; font-weight: 650; font-size: 0.78rem; cursor: pointer; background: rgba(255, 255, 255, 0.14); color: inherit; } .westo-sw-banner button:hover { background: rgba(255, 255, 255, 0.2); } .westo-sw-banner button:disabled { opacity: 0.7; cursor: wait; } .westo-sw-banner span { flex: 1 1 auto; min-width: 0; line-height: 1.35; } /* In the portrait dish experience the primary CTA lives in a fixed card at the bottom of the viewport. Keep the persistent update prompt immediately above that card so it never blocks ordering or card copy. The shared card and this banner use the same geometry variables, so the relationship stays correct across compact phones, browser chrome changes and safe areas. */ @media (max-width: 991px) and (orientation: portrait) { html.is-dish-boards .westo-sw-banner { bottom: calc( var(--menu-card-bottom, max(0.7rem, env(safe-area-inset-bottom, 0px))) + var(--dish-info-h, 14.5rem) + 0.75rem ); } } .eg-install-chip { appearance: none; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: rgba(244, 239, 230, 0.88); font: inherit; font-size: 0.72rem; font-weight: 600; padding: 0.35rem 0.75rem; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .eg-install-chip[hidden] { display: none !important; } .eg-install-chip:hover { background: rgba(120, 208, 216, 0.16); border-color: rgba(120, 208, 216, 0.4); color: #78d0d8; } html[data-theme="light"] .eg-install-chip { color: #1a1714; background: rgba(253, 251, 247, 0.88); border-color: rgba(26, 23, 20, 0.12); } html[data-theme="light"] .eg-install-chip:hover { background: rgba(42, 122, 134, 0.14); border-color: rgba(42, 122, 134, 0.4); color: #1f636e; } /* ---- Pass3 stage7: SW banner on guest forms ---- */ html[data-theme="light"] .westo-sw-banner { background: rgba(26, 23, 20, 0.94); border-color: rgba(255, 255, 255, 0.12); color: #f7f2ea; box-shadow: 0 0.4rem 1.2rem rgba(26, 23, 20, 0.22); } html[data-theme="light"] .westo-sw-banner button { background: rgba(255, 255, 255, 0.14); color: #f7f2ea; } /* ===== END css/mobile-forms.css ===== */ /* ===== BEGIN css/westo.webflow.shared.min.css ===== */ html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:sans-serif}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{vertical-align:baseline;display:inline-block}audio:not([controls]){height:0;display:none}[hidden],template{display:none}a{background-color:#0000}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:none}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@font-face{font-family:webflow-icons;src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==)format("truetype");font-weight:400;font-style:normal}[class^=w-icon-],[class*=\ w-icon-]{speak:none;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;font-family:webflow-icons!important}.w-icon-slider-right:before{content:""}.w-icon-slider-left:before{content:""}.w-icon-nav-menu:before{content:""}.w-icon-arrow-down:before,.w-icon-dropdown-toggle:before{content:""}.w-icon-file-upload-remove:before{content:""}.w-icon-file-upload-icon:before{content:""}*{box-sizing:border-box}html{height:100%}body{color:#333;background-color:#fff;min-height:100%;margin:0;font-family:Arial,sans-serif;font-size:14px;line-height:20px}img{vertical-align:middle;max-width:100%;display:inline-block}html.w-mod-touch *{background-attachment:scroll!important}.w-block{display:block}.w-inline-block{max-width:100%;display:inline-block}.w-clearfix:before,.w-clearfix:after{content:" ";grid-area:1/1/2/2;display:table}.w-clearfix:after{clear:both}.w-hidden{display:none}.w-button{color:#fff;line-height:inherit;cursor:pointer;background-color:#3898ec;border:0;border-radius:0;padding:9px 15px;text-decoration:none;display:inline-block}input.w-button{-webkit-appearance:button}html[data-w-dynpage] [data-w-cloak]{color:#0000!important}.w-code-block{margin:unset}pre.w-code-block code{all:inherit}pre.w-code-block code>span{display:block!important}.w-optimization{display:contents}.w-webflow-badge,.w-webflow-badge>img{box-sizing:unset;width:unset;height:unset;max-height:unset;max-width:unset;min-height:unset;min-width:unset;margin:unset;padding:unset;float:unset;clear:unset;border:unset;border-radius:unset;background:unset;background-image:unset;background-position:unset;background-size:unset;background-repeat:unset;background-origin:unset;background-clip:unset;background-attachment:unset;background-color:unset;box-shadow:unset;transform:unset;direction:unset;font-family:unset;font-weight:unset;color:unset;font-size:unset;line-height:unset;font-style:unset;font-variant:unset;text-align:unset;letter-spacing:unset;-webkit-text-decoration:unset;text-decoration:unset;text-indent:unset;text-transform:unset;list-style-type:unset;text-shadow:unset;vertical-align:unset;cursor:unset;white-space:unset;word-break:unset;word-spacing:unset;word-wrap:unset;transition:unset}.w-webflow-badge{white-space:nowrap;cursor:pointer;box-shadow:0 0 0 1px #0000001a,0 1px 3px #0000001a;visibility:visible!important;opacity:1!important;z-index:2147483647!important;color:#aaadb0!important;width:auto!important;height:auto!important;overflow:unset!important;background-color:#fff!important;border-radius:3px!important;margin:0!important;padding:6px!important;font-size:12px!important;line-height:14px!important;text-decoration:none!important;display:inline-block!important;position:fixed!important;inset:auto 12px 12px auto!important;transform:none!important}.w-webflow-badge>img{position:unset;visibility:unset!important;opacity:1!important;vertical-align:middle!important;display:inline-block!important}h1,h2,h3,h4,h5,h6{margin-bottom:10px;font-weight:700}h1{margin-top:20px;font-size:38px;line-height:44px}h2{margin-top:20px;font-size:32px;line-height:36px}h3{margin-top:20px;font-size:24px;line-height:30px}h4{margin-top:10px;font-size:18px;line-height:24px}h5{margin-top:10px;font-size:14px;line-height:20px}h6{margin-top:10px;font-size:12px;line-height:18px}p{margin-top:0;margin-bottom:10px}blockquote{border-left:5px solid #e2e2e2;margin:0 0 10px;padding:10px 20px;font-size:18px;line-height:22px}figure{margin:0 0 10px}ul,ol{margin-top:0;margin-bottom:10px;padding-left:40px}.w-list-unstyled{padding-left:0;list-style:none}.w-embed:before,.w-embed:after{content:" ";grid-area:1/1/2/2;display:table}.w-embed:after{clear:both}.w-video{width:100%;padding:0;position:relative}.w-video iframe,.w-video object,.w-video embed{border:none;width:100%;height:100%;position:absolute;top:0;left:0}fieldset{border:0;margin:0;padding:0}button,[type=button],[type=reset]{cursor:pointer;-webkit-appearance:button;border:0}.w-form{margin:0 0 15px}.w-form-done{text-align:center;background-color:#ddd;padding:20px;display:none}.w-form-fail{background-color:#ffdede;margin-top:10px;padding:10px;display:none}label{margin-bottom:5px;font-weight:700;display:block}.w-input,.w-select{color:#333;vertical-align:middle;background-color:#fff;border:1px solid #ccc;width:100%;height:38px;margin-bottom:10px;padding:8px 12px;font-size:14px;line-height:1.42857;display:block}.w-input::placeholder,.w-select::placeholder{color:#999}.w-input:focus,.w-select:focus{border-color:#3898ec;outline:0}.w-input[disabled],.w-select[disabled],.w-input[readonly],.w-select[readonly],fieldset[disabled] .w-input,fieldset[disabled] .w-select{cursor:not-allowed}.w-input[disabled]:not(.w-input-disabled),.w-select[disabled]:not(.w-input-disabled),.w-input[readonly],.w-select[readonly],fieldset[disabled]:not(.w-input-disabled) .w-input,fieldset[disabled]:not(.w-input-disabled) .w-select{background-color:#eee}textarea.w-input,textarea.w-select{height:auto}.w-select{background-color:#f3f3f3}.w-select[multiple]{height:auto}.w-form-label{cursor:pointer;margin-bottom:0;font-weight:400;display:inline-block}.w-radio{margin-bottom:5px;padding-left:20px;display:block}.w-radio:before,.w-radio:after{content:" ";grid-area:1/1/2/2;display:table}.w-radio:after{clear:both}.w-radio-input{float:left;margin:3px 0 0 -20px;line-height:normal}.w-file-upload{margin-bottom:10px;display:block}.w-file-upload-input{opacity:0;z-index:-100;width:.1px;height:.1px;position:absolute;overflow:hidden}.w-file-upload-default,.w-file-upload-uploading,.w-file-upload-success{color:#333;display:inline-block}.w-file-upload-error{margin-top:10px;display:block}.w-file-upload-default.w-hidden,.w-file-upload-uploading.w-hidden,.w-file-upload-error.w-hidden,.w-file-upload-success.w-hidden{display:none}.w-file-upload-uploading-btn{cursor:pointer;background-color:#fafafa;border:1px solid #ccc;margin:0;padding:8px 12px;font-size:14px;font-weight:400;display:flex}.w-file-upload-file{background-color:#fafafa;border:1px solid #ccc;flex-grow:1;justify-content:space-between;margin:0;padding:8px 9px 8px 11px;display:flex}.w-file-upload-file-name{font-size:14px;font-weight:400;display:block}.w-file-remove-link{cursor:pointer;width:auto;height:auto;margin-top:3px;margin-left:10px;padding:3px;display:block}.w-icon-file-upload-remove{margin:auto;font-size:10px}.w-file-upload-error-msg{color:#ea384c;padding:2px 0;display:inline-block}.w-file-upload-info{padding:0 12px;line-height:38px;display:inline-block}.w-file-upload-label{cursor:pointer;background-color:#fafafa;border:1px solid #ccc;margin:0;padding:8px 12px;font-size:14px;font-weight:400;display:inline-block}.w-icon-file-upload-icon,.w-icon-file-upload-uploading{width:20px;margin-right:8px;display:inline-block}.w-icon-file-upload-uploading{height:20px}.w-container{max-width:940px;margin-left:auto;margin-right:auto}.w-container:before,.w-container:after{content:" ";grid-area:1/1/2/2;display:table}.w-container:after{clear:both}.w-container .w-row{margin-left:-10px;margin-right:-10px}.w-row:before,.w-row:after{content:" ";grid-area:1/1/2/2;display:table}.w-row:after{clear:both}.w-row .w-row{margin-left:0;margin-right:0}.w-col{float:left;width:100%;min-height:1px;padding-left:10px;padding-right:10px;position:relative}.w-col .w-col{padding-left:0;padding-right:0}.w-col-1{width:8.33333%}.w-col-2{width:16.6667%}.w-col-3{width:25%}.w-col-4{width:33.3333%}.w-col-5{width:41.6667%}.w-col-6{width:50%}.w-col-7{width:58.3333%}.w-col-8{width:66.6667%}.w-col-9{width:75%}.w-col-10{width:83.3333%}.w-col-11{width:91.6667%}.w-col-12{width:100%}.w-hidden-main{display:none!important}@media screen and (max-width:991px){.w-container{max-width:728px}.w-hidden-main{display:inherit!important}.w-hidden-medium{display:none!important}.w-col-medium-1{width:8.33333%}.w-col-medium-2{width:16.6667%}.w-col-medium-3{width:25%}.w-col-medium-4{width:33.3333%}.w-col-medium-5{width:41.6667%}.w-col-medium-6{width:50%}.w-col-medium-7{width:58.3333%}.w-col-medium-8{width:66.6667%}.w-col-medium-9{width:75%}.w-col-medium-10{width:83.3333%}.w-col-medium-11{width:91.6667%}.w-col-medium-12{width:100%}.w-col-stack{width:100%;left:auto;right:auto}}@media screen and (max-width:767px){.w-hidden-main,.w-hidden-medium{display:inherit!important}.w-hidden-small{display:none!important}.w-row,.w-container .w-row{margin-left:0;margin-right:0}.w-col{width:100%;left:auto;right:auto}.w-col-small-1{width:8.33333%}.w-col-small-2{width:16.6667%}.w-col-small-3{width:25%}.w-col-small-4{width:33.3333%}.w-col-small-5{width:41.6667%}.w-col-small-6{width:50%}.w-col-small-7{width:58.3333%}.w-col-small-8{width:66.6667%}.w-col-small-9{width:75%}.w-col-small-10{width:83.3333%}.w-col-small-11{width:91.6667%}.w-col-small-12{width:100%}}@media screen and (max-width:479px){.w-container{max-width:none}.w-hidden-main,.w-hidden-medium,.w-hidden-small{display:inherit!important}.w-hidden-tiny{display:none!important}.w-col{width:100%}.w-col-tiny-1{width:8.33333%}.w-col-tiny-2{width:16.6667%}.w-col-tiny-3{width:25%}.w-col-tiny-4{width:33.3333%}.w-col-tiny-5{width:41.6667%}.w-col-tiny-6{width:50%}.w-col-tiny-7{width:58.3333%}.w-col-tiny-8{width:66.6667%}.w-col-tiny-9{width:75%}.w-col-tiny-10{width:83.3333%}.w-col-tiny-11{width:91.6667%}.w-col-tiny-12{width:100%}}.w-widget{position:relative}.w-widget-map{width:100%;height:400px}.w-widget-map label{width:auto;display:inline}.w-widget-map img{max-width:inherit}.w-widget-map .gm-style-iw{text-align:center}.w-widget-map .gm-style-iw>button{display:none!important}.w-widget-twitter{overflow:hidden}.w-widget-twitter-count-shim{vertical-align:top;text-align:center;background:#fff;border:1px solid #758696;border-radius:3px;width:28px;height:20px;display:inline-block;position:relative}.w-widget-twitter-count-shim *{pointer-events:none;-webkit-user-select:none;user-select:none}.w-widget-twitter-count-shim .w-widget-twitter-count-inner{text-align:center;color:#999;font-family:serif;font-size:15px;line-height:12px;position:relative}.w-widget-twitter-count-shim .w-widget-twitter-count-clear{display:block;position:relative}.w-widget-twitter-count-shim.w--large{width:36px;height:28px}.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner{font-size:18px;line-height:18px}.w-widget-twitter-count-shim:not(.w--vertical){margin-left:5px;margin-right:8px}.w-widget-twitter-count-shim:not(.w--vertical).w--large{margin-left:6px}.w-widget-twitter-count-shim:not(.w--vertical):before,.w-widget-twitter-count-shim:not(.w--vertical):after{content:" ";pointer-events:none;border:solid #0000;width:0;height:0;position:absolute;top:50%;left:0}.w-widget-twitter-count-shim:not(.w--vertical):before{border-width:4px;border-color:#75869600 #5d6c7b #75869600 #75869600;margin-top:-4px;margin-left:-9px}.w-widget-twitter-count-shim:not(.w--vertical).w--large:before{border-width:5px;margin-top:-5px;margin-left:-10px}.w-widget-twitter-count-shim:not(.w--vertical):after{border-width:4px;border-color:#fff0 #fff #fff0 #fff0;margin-top:-4px;margin-left:-8px}.w-widget-twitter-count-shim:not(.w--vertical).w--large:after{border-width:5px;margin-top:-5px;margin-left:-9px}.w-widget-twitter-count-shim.w--vertical{width:61px;height:33px;margin-bottom:8px}.w-widget-twitter-count-shim.w--vertical:before,.w-widget-twitter-count-shim.w--vertical:after{content:" ";pointer-events:none;border:solid #0000;width:0;height:0;position:absolute;top:100%;left:50%}.w-widget-twitter-count-shim.w--vertical:before{border-width:5px;border-color:#5d6c7b #75869600 #75869600;margin-left:-5px}.w-widget-twitter-count-shim.w--vertical:after{border-width:4px;border-color:#fff #fff0 #fff0;margin-left:-4px}.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner{font-size:18px;line-height:22px}.w-widget-twitter-count-shim.w--vertical.w--large{width:76px}.w-background-video{color:#fff;height:500px;position:relative;overflow:hidden}.w-background-video>video{object-fit:cover;z-index:-100;background-position:50%;background-size:cover;width:100%;height:100%;margin:auto;position:absolute;inset:-100%}.w-background-video>video::-webkit-media-controls-start-playback-button{-webkit-appearance:none;display:none!important}.w-background-video--control{background-color:#0000;padding:0;position:absolute;bottom:1em;right:1em}.w-background-video--control>[hidden]{display:none!important}.w-slider{text-align:center;clear:both;-webkit-tap-highlight-color:#0000;tap-highlight-color:#0000;background:#ddd;height:300px;position:relative}.w-slider-mask{z-index:1;white-space:nowrap;height:100%;display:block;position:relative;left:0;right:0;overflow:hidden}.w-slide{vertical-align:top;white-space:normal;text-align:left;width:100%;height:100%;display:inline-block;position:relative}.w-slider-nav{z-index:2;text-align:center;-webkit-tap-highlight-color:#0000;tap-highlight-color:#0000;height:40px;margin:auto;padding-top:10px;position:absolute;inset:auto 0 0}.w-slider-nav.w-round>div{border-radius:100%}.w-slider-nav.w-num>div{width:auto;height:auto;font-size:inherit;line-height:inherit;padding:.2em .5em}.w-slider-nav.w-shadow>div{box-shadow:0 0 3px #3336}.w-slider-nav-invert{color:#fff}.w-slider-nav-invert>div{background-color:#2226}.w-slider-nav-invert>div.w-active{background-color:#222}.w-slider-dot{cursor:pointer;background-color:#fff6;width:1em;height:1em;margin:0 3px .5em;transition:background-color .1s,color .1s;display:inline-block;position:relative}.w-slider-dot.w-active{background-color:#fff}.w-slider-dot:focus{outline:none;box-shadow:0 0 0 2px #fff}.w-slider-dot:focus.w-active{box-shadow:none}.w-slider-arrow-left,.w-slider-arrow-right{cursor:pointer;color:#fff;-webkit-tap-highlight-color:#0000;tap-highlight-color:#0000;-webkit-user-select:none;user-select:none;width:80px;margin:auto;font-size:40px;position:absolute;inset:0;overflow:hidden}.w-slider-arrow-left [class^=w-icon-],.w-slider-arrow-right [class^=w-icon-],.w-slider-arrow-left [class*=\ w-icon-],.w-slider-arrow-right [class*=\ w-icon-]{position:absolute}.w-slider-arrow-left:focus,.w-slider-arrow-right:focus{outline:0}.w-slider-arrow-left{z-index:3;right:auto}.w-slider-arrow-right{z-index:4;left:auto}.w-icon-slider-left,.w-icon-slider-right{width:1em;height:1em;margin:auto;inset:0}.w-slider-aria-label{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.w-slider-force-show{display:block!important}.w-dropdown{text-align:left;z-index:900;margin-left:auto;margin-right:auto;display:inline-block;position:relative}.w-dropdown-btn,.w-dropdown-toggle,.w-dropdown-link{vertical-align:top;color:#222;text-align:left;white-space:nowrap;margin-left:auto;margin-right:auto;padding:20px;text-decoration:none;position:relative}.w-dropdown-toggle{-webkit-user-select:none;user-select:none;cursor:pointer;padding-right:40px;display:inline-block}.w-dropdown-toggle:focus{outline:0}.w-icon-dropdown-toggle{width:1em;height:1em;margin:auto 20px auto auto;position:absolute;top:0;bottom:0;right:0}.w-dropdown-list{background:#ddd;min-width:100%;display:none;position:absolute}.w-dropdown-list.w--open{display:block}.w-dropdown-link{color:#222;padding:10px 20px;display:block}.w-dropdown-link.w--current{color:#0082f3}.w-dropdown-link:focus{outline:0}.w-lightbox-backdrop{cursor:auto;letter-spacing:normal;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;color:#fff;text-align:center;z-index:2000;opacity:0;-webkit-user-select:none;-moz-user-select:none;-webkit-tap-highlight-color:transparent;background:#000000e6;outline:0;font-family:Helvetica Neue,Helvetica,Ubuntu,Segoe UI,Verdana,sans-serif;font-size:17px;font-style:normal;font-weight:300;line-height:1.2;list-style:disc;position:fixed;inset:0;-webkit-transform:translate(0)}.w-lightbox-backdrop,.w-lightbox-container{-webkit-overflow-scrolling:touch;height:100%;overflow:auto}.w-lightbox-content{height:100vh;position:relative;overflow:hidden}.w-lightbox-view{opacity:0;width:100vw;height:100vh;position:absolute}.w-lightbox-view:before{content:"";height:100vh}.w-lightbox-group,.w-lightbox-group .w-lightbox-view,.w-lightbox-group .w-lightbox-view:before{height:86vh}.w-lightbox-frame,.w-lightbox-view:before{vertical-align:middle;display:inline-block}.w-lightbox-figure{margin:0;position:relative}.w-lightbox-group .w-lightbox-figure{cursor:pointer}.w-lightbox-img{width:auto;max-width:none;height:auto}.w-lightbox-image{float:none;max-width:100vw;max-height:100vh;display:block}.w-lightbox-group .w-lightbox-image{max-height:86vh}.w-lightbox-caption{text-align:left;text-overflow:ellipsis;white-space:nowrap;background:#0006;padding:.5em 1em;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.w-lightbox-embed{width:100%;height:100%;position:absolute;inset:0}.w-lightbox-control{cursor:pointer;background-position:50%;background-repeat:no-repeat;background-size:24px;width:4em;transition:all .3s;position:absolute;top:0}.w-lightbox-left{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==);display:none;bottom:0;left:0}.w-lightbox-right{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+);display:none;bottom:0;right:0}.w-lightbox-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=);background-size:18px;height:2.6em;right:0}.w-lightbox-strip{white-space:nowrap;padding:0 1vh;line-height:0;position:absolute;bottom:0;left:0;right:0;overflow:auto hidden}.w-lightbox-item{box-sizing:content-box;cursor:pointer;width:10vh;padding:2vh 1vh;display:inline-block;-webkit-transform:translate(0,0)}.w-lightbox-active{opacity:.3}.w-lightbox-thumbnail{background:#222;height:10vh;position:relative;overflow:hidden}.w-lightbox-thumbnail-image{position:absolute;top:0;left:0}.w-lightbox-thumbnail .w-lightbox-tall{width:100%;top:50%;transform:translateY(-50%)}.w-lightbox-thumbnail .w-lightbox-wide{height:100%;left:50%;transform:translate(-50%)}.w-lightbox-spinner{box-sizing:border-box;border:5px solid #0006;border-radius:50%;width:40px;height:40px;margin-top:-20px;margin-left:-20px;animation:.8s linear infinite spin;position:absolute;top:50%;left:50%}.w-lightbox-spinner:after{content:"";border:3px solid #0000;border-bottom-color:#fff;border-radius:50%;position:absolute;inset:-4px}.w-lightbox-hide{display:none}.w-lightbox-noscroll{overflow:hidden}@media (min-width:768px){.w-lightbox-content{height:96vh;margin-top:2vh}.w-lightbox-view,.w-lightbox-view:before{height:96vh}.w-lightbox-group,.w-lightbox-group .w-lightbox-view,.w-lightbox-group .w-lightbox-view:before{height:84vh}.w-lightbox-image{max-width:96vw;max-height:96vh}.w-lightbox-group .w-lightbox-image{max-width:82.3vw;max-height:84vh}.w-lightbox-left,.w-lightbox-right{opacity:.5;display:block}.w-lightbox-close{opacity:.8}.w-lightbox-control:hover{opacity:1}}.w-lightbox-inactive,.w-lightbox-inactive:hover{opacity:0}.w-richtext:before,.w-richtext:after{content:" ";grid-area:1/1/2/2;display:table}.w-richtext:after{clear:both}.w-richtext[contenteditable=true]:before,.w-richtext[contenteditable=true]:after{white-space:initial}.w-richtext ol,.w-richtext ul{overflow:hidden}.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after,.w-richtext .w-richtext-figure-selected[data-rt-type=video] div:after,.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,.w-richtext .w-richtext-figure-selected[data-rt-type=image] div{outline:2px solid #2895f7}.w-richtext figure.w-richtext-figure-type-video>div:after,.w-richtext figure[data-rt-type=video]>div:after{content:"";display:none;position:absolute;inset:0}.w-richtext figure{max-width:60%;position:relative}.w-richtext figure>div:before{cursor:default!important}.w-richtext figure img{width:100%}.w-richtext figure figcaption.w-richtext-figcaption-placeholder{opacity:.6}.w-richtext figure div{color:#0000;font-size:0}.w-richtext figure.w-richtext-figure-type-image,.w-richtext figure[data-rt-type=image]{display:table}.w-richtext figure.w-richtext-figure-type-image>div,.w-richtext figure[data-rt-type=image]>div{display:inline-block}.w-richtext figure.w-richtext-figure-type-image>figcaption,.w-richtext figure[data-rt-type=image]>figcaption{caption-side:bottom;display:table-caption}.w-richtext figure.w-richtext-figure-type-video,.w-richtext figure[data-rt-type=video]{width:60%;height:0}.w-richtext figure.w-richtext-figure-type-video iframe,.w-richtext figure[data-rt-type=video] iframe{width:100%;height:100%;position:absolute;top:0;left:0}.w-richtext figure.w-richtext-figure-type-video>div,.w-richtext figure[data-rt-type=video]>div{width:100%}.w-richtext figure.w-richtext-align-center{clear:both;margin-left:auto;margin-right:auto}.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image>div,.w-richtext figure.w-richtext-align-center[data-rt-type=image]>div{max-width:100%}.w-richtext figure.w-richtext-align-normal{clear:both}.w-richtext figure.w-richtext-align-fullwidth{text-align:center;clear:both;width:100%;max-width:100%;margin-left:auto;margin-right:auto;display:block}.w-richtext figure.w-richtext-align-fullwidth>div{padding-bottom:inherit;display:inline-block}.w-richtext figure.w-richtext-align-fullwidth>figcaption{display:block}.w-richtext figure.w-richtext-align-floatleft{float:left;clear:none;margin-right:15px}.w-richtext figure.w-richtext-align-floatright{float:right;clear:none;margin-left:15px}.w-nav{z-index:1000;background:#ddd;position:relative}.w-nav:before,.w-nav:after{content:" ";grid-area:1/1/2/2;display:table}.w-nav:after{clear:both}.w-nav-brand{float:left;color:#333;text-decoration:none;position:relative}.w-nav-link{vertical-align:top;color:#222;text-align:left;margin-left:auto;margin-right:auto;padding:20px;text-decoration:none;display:inline-block;position:relative}.w-nav-link.w--current{color:#0082f3}.w-nav-menu{float:right;position:relative}[data-nav-menu-open]{text-align:center;background:#c8c8c8;min-width:200px;position:absolute;top:100%;left:0;right:0;overflow:visible;display:block!important}.w--nav-link-open{display:block;position:relative}.w-nav-overlay{width:100%;display:none;position:absolute;top:100%;left:0;right:0;overflow:hidden}.w-nav-overlay [data-nav-menu-open]{top:0}.w-nav[data-animation=over-left] .w-nav-overlay{width:auto}.w-nav[data-animation=over-left] .w-nav-overlay,.w-nav[data-animation=over-left] [data-nav-menu-open]{z-index:1;top:0;right:auto}.w-nav[data-animation=over-right] .w-nav-overlay{width:auto}.w-nav[data-animation=over-right] .w-nav-overlay,.w-nav[data-animation=over-right] [data-nav-menu-open]{z-index:1;top:0;left:auto}.w-nav-button{float:right;cursor:pointer;-webkit-tap-highlight-color:#0000;tap-highlight-color:#0000;-webkit-user-select:none;user-select:none;padding:18px;font-size:24px;display:none;position:relative}.w-nav-button:focus{outline:0}.w-nav-button.w--open{color:#fff;background-color:#c8c8c8}.w-nav[data-collapse=all] .w-nav-menu{display:none}.w-nav[data-collapse=all] .w-nav-button,.w--nav-dropdown-open,.w--nav-dropdown-toggle-open{display:block}.w--nav-dropdown-list-open{position:static}@media screen and (max-width:991px){.w-nav[data-collapse=medium] .w-nav-menu{display:none}.w-nav[data-collapse=medium] .w-nav-button{display:block}}@media screen and (max-width:767px){.w-nav[data-collapse=small] .w-nav-menu{display:none}.w-nav[data-collapse=small] .w-nav-button{display:block}.w-nav-brand{padding-left:10px}}@media screen and (max-width:479px){.w-nav[data-collapse=tiny] .w-nav-menu{display:none}.w-nav[data-collapse=tiny] .w-nav-button{display:block}}.w-tabs{position:relative}.w-tabs:before,.w-tabs:after{content:" ";grid-area:1/1/2/2;display:table}.w-tabs:after{clear:both}.w-tab-menu{position:relative}.w-tab-link{vertical-align:top;text-align:left;cursor:pointer;color:#222;background-color:#ddd;padding:9px 30px;text-decoration:none;display:inline-block;position:relative}.w-tab-link.w--current{background-color:#c8c8c8}.w-tab-link:focus{outline:0}.w-tab-content{display:block;position:relative;overflow:hidden}.w-tab-pane{display:none;position:relative}.w--tab-active{display:block}@media screen and (max-width:479px){.w-tab-link{display:block}}.w-ix-emptyfix:after{content:""}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.w-dyn-empty{background-color:#ddd;padding:10px}.w-dyn-hide,.w-dyn-bind-empty,.w-condition-invisible{display:none!important}.wf-layout-layout{display:grid}.w-layout-grid{grid-row-gap:16px;grid-column-gap:16px;grid-template-rows:auto auto;grid-template-columns:1fr 1fr;grid-auto-columns:1fr;display:grid}@font-face{font-family:Geistmono;src:url(../assets/fonts/6a0b0eef462d20ff07b9cbe9_GeistMono-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Franklin Gothic Atf;src:url(../assets/fonts/6a0b3ae273b9c591afba279f_Franklin_Gothic_ATF_Black_Italic.woff2)format("woff2");font-weight:900;font-style:italic;font-display:swap}@font-face{font-family:Geist;src:url(../assets/fonts/6a0d6cd3df7330778e84acee_Geist-Light.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Geist;src:url(../assets/fonts/6a17254d942eb32e84bde0f0_Geist-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{--color-scheme-1--background:var(--_primitives---colors--neutral-darkest);--_typography---font-styles--body:Geist,Arial,sans-serif;--color-scheme-1--text:var(--_primitives---colors--white);--_typography---font-styles--heading:"Franklin Gothic Atf",Arial,sans-serif;--_typography---font-styles--heading-weight:500;--_spacing-sizing---element-padding--s:clamp(1.25rem,1.1vw,1.5rem);--_spacing-sizing---element-padding--l:clamp(2rem,2vw,3rem);--_ui-styles---radius--medium:1rem;--_spacing-sizing---container--container-xlarge:120rem;--_spacing-sizing---element-padding--t:.25rem;--_spacing-sizing---element-padding--xxs:.5rem;--_spacing-sizing---element-padding--xs:clamp(.75rem,.65vw,1rem);--_spacing-sizing---element-padding--m:clamp(1.5rem,1.4vw,2rem);--_spacing-sizing---element-padding--xl:clamp(2.5rem,2.8vw,4rem);--_spacing-sizing---element-padding--xxl:clamp(3rem,3.5vw,5rem);--_spacing-sizing---element-padding--h:clamp(3.5rem,4vw,6rem);--_spacing-sizing---element-padding--xh:clamp(4rem,4.8vw,7rem);--_spacing-sizing---element-padding--xxh:clamp(5rem,6.5vw,10rem);--_primitives---colors--white:#fff;--_ui-styles---radius--xsmall:.25rem;--color-scheme-1--border:var(--_primitives---opacity--white-20);--_primitives---opacity--transparent:transparent;--_primitives---opacity--white-60:#fff9;--text-color--text-alternate\:var(--base-color-neutral--white\);--_ui-styles---radius--button:var(--_ui-styles---radius--small);--_primitives---colors--neutral-darkest:black;--_primitives---brand--camel-lightest\:#f9f8ee;--_ui-styles---stroke--border-width:1px;--background-color--background-secondary\:var(--base-color-neutral--neutral-lightest\);--border-color--border-primary\:var(--base-color-neutral--black\);--_spacing-sizing---page-padding--padding-global:4%;--color-scheme-1--foreground:var(--_primitives---colors--white);--_ui-styles---radius--small:.5rem;--_primitives---colors--neutral-lightest:#eee;--_ui-styles---radius--large:2rem;--color-scheme-1--accent:var(--_primitives---colors--white);--_primitives---opacity--white-5:#ffffff0d;--_spacing-sizing---booking--nav-height:8rem;--_primitives---opacity--white-20:#fff3;--_primitives---opacity--white-50:#ffffff80;--color-scheme-1--taste-secondary:#ff659d;--_primitives---opacity--white-30:#ffffff4d;--color-scheme-1--taste-primary:#800035;--_primitives---opacity--white-80:#fffc;--_typography---font-styles--mono:Geistmono,Arial,sans-serif;--_ui-styles---blur--backdrop:2rem;--_ui-styles---stroke--divider-width:1px;--color-scheme-1--background-0:var(--_primitives---opacity--white-0);--_primitives---colors--neutral-lighter:#ccc;--_primitives---colors--neutral-light:#aaa;--_primitives---colors--neutral:#666;--_primitives---colors--neutral-dark:#444;--_primitives---colors--neutral-darker:#222;--_primitives---opacity--white-0:#fff0;--_primitives---opacity--white-10:#ffffff1a;--_primitives---opacity--white-15:#ffffff26;--_primitives---opacity--white-40:#fff6;--_primitives---brand--camel-darker\:#56130b;--_primitives---brand--camel-lighter\:#f4ecdd;--_primitives---brand--camel-light\:#e6d2c0;--base-color-neutral--white\:white;--base-color-neutral--neutral-lightest\:#eee;--base-color-neutral--black\:black;--_primitives---brand--camel\:#c79f7b;--_primitives---opacity--camel-darker-0\:#56130b00}body{background-color:var(--color-scheme-1--background);font-family:var(--_typography---font-styles--body);color:var(--color-scheme-1--text);--_spacing-sizing---element-padding--s:clamp(1.25rem,1.1vw,1.5rem);--_spacing-sizing---element-padding--l:clamp(2rem,2vw,3rem);--_spacing-sizing---container--container-xlarge:120rem;--_spacing-sizing---element-padding--t:.25rem;--_spacing-sizing---element-padding--xxs:.5rem;--_spacing-sizing---element-padding--xs:clamp(.75rem,.65vw,1rem);--_spacing-sizing---element-padding--m:clamp(1.5rem,1.4vw,2rem);--_spacing-sizing---element-padding--xl:clamp(2.5rem,2.8vw,4rem);--_spacing-sizing---element-padding--xxl:clamp(3rem,3.5vw,5rem);--_spacing-sizing---element-padding--h:clamp(3.5rem,4vw,6rem);--_spacing-sizing---element-padding--xh:clamp(4rem,4.8vw,7rem);--_spacing-sizing---element-padding--xxh:clamp(5rem,6.5vw,10rem);--_spacing-sizing---page-padding--padding-global:4%;--_spacing-sizing---booking--nav-height:8rem;--_ui-styles---radius--medium:1rem;--_ui-styles---radius--xsmall:.25rem;--_ui-styles---radius--button:var(--_ui-styles---radius--small);--_ui-styles---stroke--border-width:1px;--_ui-styles---radius--small:.5rem;--_ui-styles---radius--large:2rem;--_ui-styles---blur--backdrop:2rem;--_ui-styles---stroke--divider-width:1px;font-size:1rem;font-weight:300;line-height:1.5}h1{font-family:var(--_typography---font-styles--heading);line-height:1;font-weight:var(--_typography---font-styles--heading-weight);text-transform:uppercase;margin-top:0;margin-bottom:0;font-size:clamp(2.5rem,4.167vw,4.5rem)}h2{font-family:var(--_typography---font-styles--heading);font-style:italic;line-height:1;font-weight:var(--_typography---font-styles--heading-weight);text-transform:uppercase;margin-top:0;margin-bottom:0;font-size:clamp(2.25rem,3vw,3rem)}h3{font-family:var(--_typography---font-styles--heading);line-height:1.2;font-weight:var(--_typography---font-styles--heading-weight);margin-top:0;margin-bottom:0;font-size:clamp(2rem,2.5vw,3rem)}h4{font-family:var(--_typography---font-styles--heading);line-height:1.3;font-weight:var(--_typography---font-styles--heading-weight);margin-top:0;margin-bottom:0;font-size:clamp(1.5rem,1.667vw,2rem)}h5{font-family:var(--_typography---font-styles--heading);line-height:1.4;font-weight:var(--_typography---font-styles--heading-weight);margin-top:0;margin-bottom:0;font-size:clamp(1.25rem,1.25vw,1.5rem)}h6{font-family:var(--_typography---font-styles--heading);line-height:1.4;font-weight:var(--_typography---font-styles--heading-weight);margin-top:0;margin-bottom:0;font-size:clamp(1rem,1vw,1.25rem)}p{margin-bottom:0}a{color:var(--color-scheme-1--text);text-decoration:underline}ul{margin-top:var(--_spacing-sizing---element-padding--s);margin-bottom:var(--_spacing-sizing---element-padding--s);padding-left:1.25rem}ol{margin-top:1rem;margin-bottom:1rem;padding-left:1.5rem}li{margin-top:.25rem;margin-bottom:.25rem;padding-left:.5rem}img{max-width:100%;display:inline-block}label{margin-bottom:.25rem;font-weight:500}blockquote{border-left:.1875rem solid var(--color-scheme-1--text);margin-bottom:0;padding:.75rem 1.25rem;font-size:1.25rem;line-height:1.5}figure{margin-top:var(--_spacing-sizing---element-padding--l);margin-bottom:var(--_spacing-sizing---element-padding--l);border-radius:var(--_ui-styles---radius--medium);overflow:hidden}figcaption{text-align:center;margin-top:.25rem}.z-index-2{z-index:2;position:relative}.max-width-full{object-fit:cover;width:100%;max-width:none}.layer{justify-content:center;align-items:center;position:absolute;inset:0%}.overflow-hidden{overflow:hidden}.global-styles{display:block;position:fixed;inset:0% auto auto 0%}.z-index-1{z-index:1;position:relative}.hide{display:none}.text-style-link{text-decoration:underline}.max-width-xlarge{width:100%;max-width:64rem}.max-width-medium{width:100%;max-width:35rem}.max-width-xsmall{width:100%;max-width:25rem}.max-width-xxsmall{width:100%;max-width:20rem}.container-large{width:100%;max-width:var(--_spacing-sizing---container--container-xlarge);margin-left:auto;margin-right:auto}.max-width-xxlarge{width:100%;max-width:80rem}.align-center{margin-left:auto;margin-right:auto}.spacing-clean{margin:0;padding:0}.max-width-large{width:100%;max-width:48rem}.max-width-small{width:100%;max-width:30rem}.utility_component{justify-content:center;align-items:center;width:100vw;max-width:100%;height:100vh;max-height:100%;padding-left:1.25rem;padding-right:1.25rem;display:flex}.utility_form-block{text-align:center;flex-direction:column;max-width:30rem;display:flex}.utility_form{flex-direction:column;align-items:stretch;display:flex}.utility_image{margin-bottom:.5rem;margin-left:auto;margin-right:auto}.container-medium{width:100%;max-width:64rem;margin-left:auto;margin-right:auto}.container-small{width:100%;max-width:48rem;margin-left:auto;margin-right:auto}.margin-tiny{margin:var(--_spacing-sizing---element-padding--t)}.margin-xxsmall{margin:var(--_spacing-sizing---element-padding--xxs)}.margin-xsmall{margin:var(--_spacing-sizing---element-padding--xs)}.margin-small{margin:var(--_spacing-sizing---element-padding--s)}.margin-medium{margin:var(--_spacing-sizing---element-padding--m)}.margin-large{margin:var(--_spacing-sizing---element-padding--l)}.margin-xlarge{margin:var(--_spacing-sizing---element-padding--xl)}.margin-xxlarge{margin:var(--_spacing-sizing---element-padding--xxl)}.margin-huge{margin:var(--_spacing-sizing---element-padding--h)}.margin-xhuge{margin:var(--_spacing-sizing---element-padding--xh)}.margin-xxhuge{margin:var(--_spacing-sizing---element-padding--xxh)}.margin-0{margin:0}.padding-0{padding:0}.padding-tiny{padding:var(--_spacing-sizing---element-padding--t)}.padding-xxsmall{padding:var(--_spacing-sizing---element-padding--xxs)}.padding-xsmall{padding:var(--_spacing-sizing---element-padding--xs)}.padding-small{padding:var(--_spacing-sizing---element-padding--s)}.padding-medium{padding:var(--_spacing-sizing---element-padding--m)}.padding-large{padding:var(--_spacing-sizing---element-padding--l)}.padding-xlarge{padding:var(--_spacing-sizing---element-padding--xl)}.padding-xxlarge{padding:var(--_spacing-sizing---element-padding--xxl)}.padding-huge{padding:var(--_spacing-sizing---element-padding--h)}.padding-xhuge{padding:var(--_spacing-sizing---element-padding--xh)}.padding-xxhuge{padding:var(--_spacing-sizing---element-padding--xxh)}.margin-top,.margin-top.margin-custom1,.margin-top.margin-huge,.margin-top.margin-small,.margin-top.margin-tiny,.margin-top.margin-custom3,.margin-top.margin-medium,.margin-top.margin-xxsmall,.margin-top.margin-xxhuge,.margin-top.margin-custom2,.margin-top.margin-xsmall,.margin-top.margin-large,.margin-top.margin-xxlarge,.margin-top.margin-xlarge,.margin-top.margin-0,.margin-top.margin-xhuge{margin-bottom:0;margin-left:0;margin-right:0}.margin-bottom,.margin-bottom.margin-xxlarge,.margin-bottom.margin-medium,.margin-bottom.margin-custom3,.margin-bottom.margin-custom1,.margin-bottom.margin-tiny,.margin-bottom.margin-small,.margin-bottom.margin-large,.margin-bottom.margin-0,.margin-bottom.margin-xlarge,.margin-bottom.margin-xhuge,.margin-bottom.margin-xxhuge,.margin-bottom.margin-huge,.margin-bottom.margin-xxsmall,.margin-bottom.margin-custom2,.margin-bottom.margin-xsmall{margin-top:0;margin-left:0;margin-right:0}.margin-left,.margin-left.margin-tiny,.margin-left.margin-xxlarge,.margin-left.margin-0,.margin-left.margin-small,.margin-left.margin-xsmall,.margin-left.margin-large,.margin-left.margin-huge,.margin-left.margin-xlarge,.margin-left.margin-custom3,.margin-left.margin-xxsmall,.margin-left.margin-custom1,.margin-left.margin-custom2,.margin-left.margin-xhuge,.margin-left.margin-xxhuge,.margin-left.margin-medium{margin-top:0;margin-bottom:0;margin-right:0}.margin-right,.margin-right.margin-huge,.margin-right.margin-xsmall,.margin-right.margin-xxhuge,.margin-right.margin-small,.margin-right.margin-medium,.margin-right.margin-xlarge,.margin-right.margin-custom3,.margin-right.margin-custom2,.margin-right.margin-xxsmall,.margin-right.margin-xhuge,.margin-right.margin-custom1,.margin-right.margin-large,.margin-right.margin-0,.margin-right.margin-xxlarge,.margin-right.margin-tiny{margin-top:0;margin-bottom:0;margin-left:0}.margin-vertical,.margin-vertical.margin-medium,.margin-vertical.margin-xlarge,.margin-vertical.margin-xxsmall,.margin-vertical.margin-xxlarge,.margin-vertical.margin-huge,.margin-vertical.margin-0,.margin-vertical.margin-xxhuge,.margin-vertical.margin-tiny,.margin-vertical.margin-xsmall,.margin-vertical.margin-custom1,.margin-vertical.margin-small,.margin-vertical.margin-large,.margin-vertical.margin-xhuge,.margin-vertical.margin-custom2,.margin-vertical.margin-custom3{margin-left:0;margin-right:0}.margin-horizontal,.margin-horizontal.margin-medium,.margin-horizontal.margin-tiny,.margin-horizontal.margin-custom3,.margin-horizontal.margin-0,.margin-horizontal.margin-xxlarge,.margin-horizontal.margin-xhuge,.margin-horizontal.margin-huge,.margin-horizontal.margin-xlarge,.margin-horizontal.margin-custom1,.margin-horizontal.margin-xxsmall,.margin-horizontal.margin-xsmall,.margin-horizontal.margin-large,.margin-horizontal.margin-custom2,.margin-horizontal.margin-small,.margin-horizontal.margin-xxhuge{margin-top:0;margin-bottom:0}.padding-top,.padding-top.padding-xhuge,.padding-top.padding-xxhuge,.padding-top.padding-0,.padding-top.padding-large,.padding-top.padding-custom2,.padding-top.padding-xlarge,.padding-top.padding-huge,.padding-top.padding-xxsmall,.padding-top.padding-custom3,.padding-top.padding-tiny,.padding-top.padding-medium,.padding-top.padding-xxlarge,.padding-top.padding-small,.padding-top.padding-xsmall,.padding-top.padding-custom1{padding-bottom:0;padding-left:0;padding-right:0}.padding-bottom,.padding-bottom.padding-xlarge,.padding-bottom.padding-small,.padding-bottom.padding-xxhuge,.padding-bottom.padding-large,.padding-bottom.padding-xhuge,.padding-bottom.padding-custom2,.padding-bottom.padding-xxsmall,.padding-bottom.padding-xxlarge,.padding-bottom.padding-custom3,.padding-bottom.padding-custom1,.padding-bottom.padding-xsmall,.padding-bottom.padding-huge,.padding-bottom.padding-tiny,.padding-bottom.padding-medium,.padding-bottom.padding-0{padding-top:0;padding-left:0;padding-right:0}.padding-left,.padding-left.padding-xhuge,.padding-left.padding-xlarge,.padding-left.padding-0,.padding-left.padding-small,.padding-left.padding-xsmall,.padding-left.padding-medium,.padding-left.padding-xxhuge,.padding-left.padding-huge,.padding-left.padding-custom1,.padding-left.padding-tiny,.padding-left.padding-xxsmall,.padding-left.padding-custom3,.padding-left.padding-custom2,.padding-left.padding-xxlarge,.padding-left.padding-large{padding-top:0;padding-bottom:0;padding-right:0}.padding-right,.padding-right.padding-xxhuge,.padding-right.padding-custom2,.padding-right.padding-large,.padding-right.padding-xlarge,.padding-right.padding-tiny,.padding-right.padding-custom3,.padding-right.padding-custom1,.padding-right.padding-xsmall,.padding-right.padding-xxlarge,.padding-right.padding-xxsmall,.padding-right.padding-medium,.padding-right.padding-xhuge,.padding-right.padding-huge,.padding-right.padding-0,.padding-right.padding-small{padding-top:0;padding-bottom:0;padding-left:0}.padding-vertical,.padding-vertical.padding-0,.padding-vertical.padding-xxhuge,.padding-vertical.padding-large,.padding-vertical.padding-custom3,.padding-vertical.padding-medium,.padding-vertical.padding-tiny,.padding-vertical.padding-xxlarge,.padding-vertical.padding-custom1,.padding-vertical.padding-xsmall,.padding-vertical.padding-xhuge,.padding-vertical.padding-xlarge,.padding-vertical.padding-custom2,.padding-vertical.padding-xxsmall,.padding-vertical.padding-huge,.padding-vertical.padding-small{padding-left:0;padding-right:0}.padding-horizontal,.padding-horizontal.padding-xxsmall,.padding-horizontal.padding-0,.padding-horizontal.padding-custom3,.padding-horizontal.padding-huge,.padding-horizontal.padding-xsmall,.padding-horizontal.padding-medium,.padding-horizontal.padding-xxlarge,.padding-horizontal.padding-large,.padding-horizontal.padding-xhuge,.padding-horizontal.padding-custom1,.padding-horizontal.padding-tiny,.padding-horizontal.padding-custom2,.padding-horizontal.padding-xxhuge,.padding-horizontal.padding-small,.padding-horizontal.padding-xlarge{padding-top:0;padding-bottom:0}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.text-weight-medium{font-weight:500}.text-size-medium{font-size:1.125rem}.margin-top-auto{margin-top:auto}.text-style-quote{border-left:.1875rem solid var(--color-scheme-1--text);margin-bottom:0;padding:.75rem 1.25rem;font-size:1.25rem;line-height:1.5}.icon-embed-small{flex-direction:column;justify-content:center;align-items:center;width:2rem;height:2rem;display:flex}.heading-style-h2{font-family:var(--_typography---font-styles--heading);font-style:italic;line-height:.8;font-weight:var(--_typography---font-styles--heading-weight);text-transform:uppercase;font-size:clamp(2.25rem,3vw,3rem)}.rl-styleguide_heading{z-index:4;font-family:var(--_typography---font-styles--heading);margin-bottom:1.5rem;padding:.25rem .5rem;font-size:3.5rem;font-weight:700}.heading-style-h6{font-family:var(--_typography---font-styles--body);line-height:1.4;font-weight:var(--_typography---font-styles--heading-weight);font-size:clamp(1rem,1vw,1.25rem)}.rl-styleguide_item-row{grid-column-gap:1.5rem;grid-row-gap:0rem;grid-template-rows:auto;grid-template-columns:15rem 1fr 1fr 1fr;align-items:center}.rl-styleguide_item-row.is-button-row{grid-template-columns:19rem 1fr}.icon-1x1-xsmall{width:1.5rem;height:1.5rem}.rl-styleguide_empty-space{z-index:-1;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:2rem;display:flex;position:relative}.shadow-xxlarge{box-shadow:0 32px 64px -12px #00000024}.rl-styleguide_icons-list{grid-column-gap:1rem;grid-row-gap:1rem;flex-wrap:wrap;grid-template-rows:auto;grid-template-columns:1fr;grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.icon-embed-medium{flex-direction:column;justify-content:center;align-items:center;width:3rem;height:3rem;display:flex}.form_radio{align-items:center;margin-bottom:0;padding-left:1.125rem;display:flex}.form_radio.is-alternate{color:var(--_primitives---colors--white)}.heading-style-h5{font-family:var(--_typography---font-styles--body);line-height:1.4;font-weight:var(--_typography---font-styles--heading-weight);font-size:clamp(1.25rem,1.25vw,1.5rem)}.text-style-strikethrough{text-decoration:line-through}.heading-style-h1{font-family:var(--_typography---font-styles--heading);line-height:1.2;font-weight:var(--_typography---font-styles--heading-weight);font-size:clamp(2.5rem,4.167vw,4.5rem)}.form_checkbox-icon{border-radius:var(--_ui-styles---radius--xsmall);width:1.125rem;min-width:1.125rem;height:1.125rem;min-height:1.125rem;box-shadow:inset 0 0 0 0 var(--color-scheme-1--text),0 0 0 1px var(--color-scheme-1--border);cursor:pointer;margin-top:0;margin-left:-1.25rem;margin-right:.5rem;transition:all .2s}.form_checkbox-icon.w--redirected-checked{border:1px none var(--_primitives---opacity--transparent);background-color:var(--color-scheme-1--background);box-shadow:inset 0 0 0 5px var(--color-scheme-1--text),0 0 0 1px var(--color-scheme-1--text)}.form_checkbox-icon.is-alternate.w--redirected-checked{box-shadow:inset 0 0 0 4px var(--color-scheme-1--text),0 0 0 1px var(--_primitives---opacity--white-60)}.form_checkbox-label{margin-bottom:0}.text-size-tiny{font-size:.75rem}.form_field-label{margin-bottom:.5rem;font-weight:400}.form_field-label.is-alternate{color:var(--text-color--text-alternate\)}.button{border-radius:var(--_ui-styles---radius--button);background-color:var(--_primitives---colors--white);box-shadow:0 0 20px 0 var(--_primitives---opacity--white-60);color:var(--_primitives---colors--neutral-darkest);text-align:center;text-transform:uppercase;cursor:pointer;padding:1.25rem 1.5rem;font-weight:400;line-height:1;text-decoration:none;transition:border .4s,background-color .4s;position:relative}.button:hover{background-color:var(--_primitives---colors--white)}.button.is-link{background-color:var(--_primitives---opacity--transparent);color:inherit;border-style:none;padding:.25rem 0;line-height:1;text-decoration:none}.button.is-link.is-alternate{background-color:var(--_primitives---opacity--transparent);color:var(--_primitives---brand--camel-lightest\)}.button.is-link.is-icon{grid-column-gap:var(--_spacing-sizing---element-padding--xxs);grid-row-gap:var(--_spacing-sizing---element-padding--xxs)}.button.is-icon{grid-column-gap:.75rem;grid-row-gap:.75rem;justify-content:center;align-items:center;display:flex}.button.is-secondary{border:1.5px solid var(--color-scheme-1--text);border-radius:var(--_ui-styles---radius--xsmall);background-color:var(--_primitives---opacity--transparent);box-shadow:none;color:var(--color-scheme-1--text);padding:.25rem}.button.is-secondary.is-alternate{background-color:var(--_primitives---opacity--transparent);color:var(--_primitives---brand--camel-lightest\)}.button.is-secondary.is-social{width:6.5rem;font-size:.875rem}.button.is-small{padding:.9rem 1.25rem;font-size:.875rem}.button.is-alternate{background-color:var(--_primitives---colors--white);color:var(--_primitives---colors--neutral-darkest)}.text-weight-normal{font-weight:400}.heading-style-h4{font-family:var(--_typography---font-styles--heading);line-height:1.3;font-weight:var(--_typography---font-styles--heading-weight);font-size:clamp(1.5rem,1.667vw,2rem)}.text-style-italic{font-style:italic}.icon-1x1-xxsmall{width:1rem;height:1rem}.form_radio-label{margin-bottom:0}.rl-styleguide_item{grid-column-gap:1rem;grid-row-gap:1rem;flex-direction:column;grid-template-rows:auto;grid-template-columns:1fr;grid-auto-columns:1fr;place-content:start;place-items:start;padding-bottom:1rem;display:grid}.rl-styleguide_item.is-stretch{grid-row-gap:1rem;justify-items:stretch}.icon-1x1-xlarge{width:6.5rem;height:6.5rem}.shadow-xlarge{box-shadow:0 24px 48px -12px #0000002e}.text-weight-light{font-weight:300}.rl-styleguide_label{color:#1e51f7;white-space:nowrap;cursor:context-menu;background-color:#e8edff;padding:.25rem .5rem;font-size:.75rem;display:inline-block}.rl-styleguide_label.is-html-tag{color:#bb4198;background-color:#f9eff6}.text-size-regular{font-size:1rem}.text-weight-xbold{font-weight:800}.text-align-right{text-align:right}.text-weight-bold{font-weight:700}.icon-height-xlarge{height:6.5rem}.heading-style-h3{font-family:var(--_typography---font-styles--heading);text-transform:uppercase;font-size:clamp(2rem,2.5vw,3rem);line-height:1}.icon-1x1-large{width:5rem;height:5rem}.form_input{height:auto;min-height:2.75rem;padding:var(--_spacing-sizing---element-padding--xs).75rem;border-radius:var(--_spacing-sizing---element-padding--xxs);background-color:var(--_primitives---opacity--transparent);box-shadow:0 0 0 1px var(--color-scheme-1--border);color:var(--_primitives---colors--neutral-darkest);border:1px #000;margin-bottom:0;font-size:1rem;line-height:1.6;transition:box-shadow .2s}.form_input:focus{box-shadow:0 0 0 2px var(--color-scheme-1--text)}.form_input::placeholder{color:var(--_primitives---opacity--white-60)}.form_input.is-text-area{height:auto;min-height:11.25rem;padding-top:.75rem;padding-bottom:.75rem;overflow:auto}.form_input.is-select-input{background-image:url(../assets/images/69fb53371d5b8e9c3f4e4cb8_chevron-down.svg);background-position:99%;background-repeat:no-repeat;background-size:auto}.form_input.is-select-input.is-alternate{background-image:url(../assets/images/69fb53371d5b8e9c3f4e4ce7_chevron-down-white.svg)}.form_input.is-alternate{color:var(--_primitives---colors--white)}.form_input.is-alternate::placeholder{color:var(--_primitives---opacity--white-60)}.rl-styleguide_button-list{grid-column-gap:1rem;grid-row-gap:1.5rem;white-space:normal;grid-template-rows:auto;grid-template-columns:auto;grid-auto-columns:max-content;grid-auto-flow:row;place-items:center start;padding-top:1.5rem;padding-bottom:1.5rem;display:grid}.rl-styleguide_list{grid-column-gap:1rem;grid-row-gap:1rem;grid-template-rows:auto;grid-template-columns:1fr;padding-bottom:4rem}.icon-embed-custom1{flex-direction:column;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;display:flex}.button-group{grid-column-gap:1rem;grid-row-gap:1rem;flex-wrap:wrap;align-items:center;display:flex}.text-color-white{color:var(--_primitives---colors--white)}.text-weight-semibold{font-weight:600}.text-style-muted{opacity:.6}.text-style-nowrap{white-space:nowrap}.text-align-left{text-align:left}.icon-embed-large{flex-direction:column;justify-content:center;align-items:center;width:5rem;height:5rem;display:flex}.shadow-xxsmall{box-shadow:0 1px 2px #0000000d}.icon-embed-xxsmall{flex-direction:column;justify-content:center;align-items:center;width:1rem;height:1rem;display:flex}.icon-embed-xsmall{flex-direction:column;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;display:flex}.icon-height-xxsmall{height:1rem}.background-color-black{background-color:var(--_primitives---colors--neutral-darkest)}.shadow-xsmall{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.icon-1x1-custom1{width:1.25rem;height:1.25rem}.rl-styleguide_header{grid-column-gap:1rem;grid-row-gap:1rem;grid-template-rows:auto;grid-template-columns:1fr 1fr 1fr;grid-auto-columns:1fr;justify-content:space-between;align-items:flex-start;padding-top:3rem;padding-bottom:3rem;display:flex}.rl-styleguide_subheading{z-index:3;border:var(--_ui-styles---stroke--border-width)solid var(--color-scheme-1--border);border-radius:var(--_ui-styles---radius--medium);background-color:var(--color-scheme-1--background);font-family:var(--_typography---font-styles--heading);color:var(--color-scheme-1--text);margin-bottom:1rem;padding:1rem;font-size:2rem;font-weight:700;line-height:1}.rl-styleguide_subheading.is-text-small{font-family:var(--_typography---font-styles--body);font-size:1rem;font-weight:400}.form_radio-icon{border:1px solid var(--_primitives---colors--neutral-darkest);cursor:pointer;border-radius:100px;width:1.125rem;min-width:1.125rem;height:1.125rem;min-height:1.125rem;margin-top:0;margin-left:-1.125rem;margin-right:.5rem}.form_radio-icon.w--redirected-checked{background-color:#fff;background-image:none;border-width:6px;border-color:#000}.form_radio-icon.w--redirected-focus{box-shadow:none;border-color:#000;margin-top:0}.form_radio-icon.is-alternate{border-color:var(--_primitives---colors--white)}.rl-styleguide_shadows-list{grid-column-gap:1.5rem;grid-row-gap:1.5rem;grid-template-rows:auto;grid-template-columns:1fr 1fr 1fr 1fr;align-items:start}.form_form{grid-column-gap:1.5rem;grid-row-gap:1.5rem;grid-template-rows:auto;grid-template-columns:1fr;grid-auto-columns:1fr;display:grid}.text-style-allcaps{text-transform:uppercase}.icon-height-custom1{height:1.25rem}.text-align-center{text-align:center}.text-size-small{font-size:.875rem}.class-label-column{grid-column-gap:.75rem;grid-row-gap:.75rem;grid-template-rows:auto;grid-template-columns:1fr;grid-auto-columns:1fr;display:grid}.form_field-wrapper{position:relative}.icon-height-small{height:2rem}.icon-height-large{height:5rem}.shadow-large{box-shadow:0 20px 24px -4px #00000014,0 8px 8px -4px #00000008}.icon-embed-xlarge{flex-direction:column;justify-content:center;align-items:center;width:6.5rem;height:6.5rem;display:flex}.icon-1x1-small{width:2rem;height:2rem}.class-label-row{grid-column-gap:.25rem;grid-row-gap:.25rem;flex-wrap:wrap;align-items:center;display:flex}.text-rich-text h1{margin-top:var(--_spacing-sizing---element-padding--xh);margin-bottom:var(--_spacing-sizing---element-padding--xl)}.text-rich-text blockquote{margin-top:var(--_spacing-sizing---element-padding--l);margin-bottom:var(--_spacing-sizing---element-padding--l);font-style:italic}.text-rich-text h2{margin-top:var(--_spacing-sizing---element-padding--xh);margin-bottom:var(--_spacing-sizing---element-padding--xl);font-size:clamp(2rem,2.5vw,3rem)}.text-rich-text h3{margin-top:var(--_spacing-sizing---element-padding--xl);margin-bottom:var(--_spacing-sizing---element-padding--s);text-transform:uppercase;font-size:clamp(1.75rem,1.667vw,2rem)}.text-rich-text h4{margin-top:var(--_spacing-sizing---element-padding--xl);margin-bottom:var(--_spacing-sizing---element-padding--s);font-size:1.5rem}.text-rich-text h5{margin-top:var(--_spacing-sizing---element-padding--l);margin-bottom:var(--_spacing-sizing---element-padding--xs);font-size:1.25rem}.text-rich-text h6{margin-top:var(--_spacing-sizing---element-padding--m);margin-bottom:var(--_spacing-sizing---element-padding--xs);font-size:1rem}.text-rich-text p{margin-bottom:var(--_spacing-sizing---element-padding--s);line-height:1.7}.text-rich-text a{text-decoration:underline}.text-rich-text figcaption{border-left:2px solid var(--color-scheme-1--text);text-align:left;margin-top:.5rem;padding-left:.5rem;font-size:.875rem}.icon-height-medium{height:3rem}.form_checkbox{align-items:center;margin-bottom:0;padding-left:1.25rem;display:flex}.form_checkbox.is-alternate{color:var(--_primitives---colors--white)}.shadow-small{box-shadow:0 4px 8px -2px #0000001a,0 2px 4px -2px #0000000f}.icon-1x1-medium{width:3rem;height:3rem}.shadow-medium{box-shadow:0 12px 16px -4px #00000014,0 4px 6px -2px #00000008}.text-size-large{font-size:1.25rem}.icon-height-xsmall{height:1.5rem}.pointer-events-auto{pointer-events:auto}.rl-styleguide_spacing-all{display:none}.pointer-events-none{pointer-events:none}.padding-section-small{padding-top:var(--_spacing-sizing---element-padding--l);padding-bottom:var(--_spacing-sizing---element-padding--l)}.rl-styleguide_empty-box{z-index:-1;background-color:var(--background-color--background-secondary\);min-width:3rem;height:3rem;position:relative}.rl-styleguide_spacing{border:1px dashed var(--border-color--border-primary\)}.padding-global{width:100%;padding-right:var(--_spacing-sizing---page-padding--padding-global);padding-left:var(--_spacing-sizing---page-padding--padding-global)}.padding-section-medium{padding-top:var(--_spacing-sizing---element-padding--xxl);padding-bottom:var(--_spacing-sizing---element-padding--xxl)}.padding-section-large{padding-top:var(--_spacing-sizing---element-padding--xh);padding-bottom:var(--_spacing-sizing---element-padding--xh);flex:1}.spacer-tiny{width:100%;padding-top:.25rem}.spacer-xxsmall{width:100%;padding-top:.5rem}.spacer-xsmall{width:100%;padding-top:1rem}.spacer-small{width:100%;padding-top:1.5rem}.spacer-medium{width:100%;padding-top:2rem}.spacer-large{width:100%;padding-top:3rem}.spacer-xlarge{width:100%;padding-top:4rem}.spacer-xxlarge{width:100%;padding-top:5rem}.spacer-huge{width:100%;padding-top:6rem}.spacer-xhuge{width:100%;padding-top:7rem}.spacer-xxhuge{width:100%;padding-top:10rem}.rl-styleguide_nav{z-index:1000;border:var(--_ui-styles---stroke--border-width)solid var(--color-scheme-1--border);border-radius:var(--_ui-styles---radius--medium);background-color:var(--color-scheme-1--foreground);margin-top:1rem;padding:.5rem;position:sticky;top:1rem}.rl-styleguide_nav-link{border-radius:var(--_ui-styles---radius--small);padding:.5rem 1rem;text-decoration:none}.rl-styleguide_nav-link.w--current{background-color:var(--color-scheme-1--background)}.rl-styleguide_subheading-small{font-size:1rem;font-weight:400}.rl-styleguide_color-spacer{flex-direction:column;justify-content:space-between;align-items:flex-start;padding:1rem;display:flex}.aspect-ratio-square{aspect-ratio:1}.rl-styleguide_ratio-bg{z-index:-1;background-color:var(--background-color--background-secondary\);min-width:3rem;height:100%;position:relative}.aspect-ratio-portrait{aspect-ratio:2/3}.aspect-ratio-landscape{aspect-ratio:3/2}.aspect-ratio-widescreen{aspect-ratio:16/9}.form_message-success-wrapper{background-color:var(--_primitives---opacity--transparent);margin-top:1rem;padding:0}.form_message-success{background-color:var(--_primitives---opacity--transparent);flex-direction:column;justify-content:center;align-items:center;padding:2.5rem;display:flex}.form_message-error{color:#b42318;background-color:#fef3f2;flex-direction:column;justify-content:center;align-items:center;padding:1rem;display:flex}.form_message-error-wrapper{margin-top:1rem;padding:0}.text-style-tagline{justify-content:center;align-items:center;font-weight:600;text-decoration:none;display:inline-block}.rl-styleguide_form-wrapper{padding-right:1.5rem}.tag{grid-column-gap:.5rem;grid-row-gap:.5rem;border:1px solid var(--_primitives---colors--neutral-lightest);background-color:var(--_primitives---colors--neutral-lightest);color:var(--_primitives---colors--neutral-darkest);justify-content:center;align-items:center;padding:.175rem .5rem;font-size:.875rem;font-weight:600;text-decoration:none;display:inline-flex}.tag.is-text{border-style:none;border-color:var(--_primitives---opacity--transparent);background-color:var(--_primitives---opacity--transparent);padding:0;display:inline-block}.tag.is-text.is-alternate{background-color:var(--_primitives---opacity--transparent);color:var(--_primitives---colors--white)}.tag.is-alternate{border-color:var(--_primitives---colors--white);background-color:var(--_primitives---colors--white);color:var(--_primitives---colors--neutral-darkest)}.color-scheme-1{background-color:var(--color-scheme-1--background);color:var(--color-scheme-1--text)}.rl-styleguide_scheme-foreground{grid-column-gap:.5rem;grid-row-gap:.5rem;border:var(--_ui-styles---stroke--border-width)solid var(--color-scheme-1--border);border-radius:var(--_ui-styles---radius--medium);background-color:var(--color-scheme-1--foreground);flex-flow:column;padding:1rem;display:flex}.rl-styleguide_scheme-wrapper{padding:1rem}.rl-styleguide_scheme-list{grid-column-gap:1rem;grid-row-gap:2rem;grid-template-rows:auto;grid-template-columns:1fr 1fr;grid-auto-columns:1fr;display:grid}.rl-styleguide_scheme-card{border-radius:var(--_ui-styles---radius--large);overflow:hidden}.rl-styleguide-accent{color:var(--color-scheme-1--accent)}.rl-styleguide_scheme{grid-column-gap:.5rem;grid-row-gap:.5rem;flex-flow:column;justify-content:flex-start;align-items:stretch}.rl-styleguide_radius-large-list{grid-column-gap:1.5rem;grid-row-gap:1.5rem;grid-template-rows:auto;grid-template-columns:1fr 1fr}.rl-styleguide_radius-large{aspect-ratio:1;border:1px solid var(--color-scheme-1--border);border-radius:var(--_ui-styles---radius--large);object-fit:cover}.rl-styleguide_radius-medium-list{grid-column-gap:1.5rem;grid-row-gap:1.5rem;grid-template-rows:auto;grid-template-columns:1fr 1fr 1fr}.rl-styleguide_radius-medium{aspect-ratio:1;border:1px solid var(--color-scheme-1--border);border-radius:var(--_ui-styles---radius--medium);object-fit:cover}.rl-styleguide_radius-small-list{grid-column-gap:1.5rem;grid-row-gap:1.5rem;grid-template-rows:auto;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr}.rl-styleguide_radius-small{aspect-ratio:1;border:1px solid var(--color-scheme-1--border);border-radius:var(--_ui-styles---radius--small);object-fit:cover}.tabs-menu{border:1px solid var(--color-scheme-1--border);background-color:var(--color-scheme-1--foreground);align-self:center;margin-bottom:3rem;padding:.25rem;display:flex}.tab-link{border:1px solid var(--_primitives---opacity--transparent);background-color:var(--_primitives---opacity--transparent);padding:.5rem 1.5rem}.tab-link.w--current{border-color:var(--color-scheme-1--border);background-color:var(--color-scheme-1--background)}.category-filter-menu{padding:var(--_spacing-sizing---element-padding--t);background-color:var(--_primitives---colors--white);border-radius:50vw;flex:0 auto;align-items:center;display:flex;position:relative}.category-filter-menu.is-center{justify-content:center;align-items:center}.category-filter-link{z-index:1;padding:var(--_spacing-sizing---element-padding--xxs)var(--_spacing-sizing---element-padding--xs);border:1px solid var(--_primitives---opacity--transparent);background-color:var(--_primitives---opacity--transparent);color:var(--_primitives---brand--camel-lightest\);white-space:nowrap;flex:none;text-decoration:none;transition:color .2s;position:relative}.category-filter-link.w--current{border-color:var(--color-scheme-1--border);background-color:var(--color-scheme-1--foreground)}.slider-arrow{border:1px solid var(--color-scheme-1--border);background-color:var(--color-scheme-1--foreground);width:3rem;height:3rem;color:var(--color-scheme-1--text);border-radius:100%;justify-content:center;align-items:center;display:flex}.slider-arrow.is-bottom-previous{inset:auto 4rem 0% auto}.slider-arrow.is-bottom-next{inset:auto 0% 0% auto}.slider-arrow.is-centre-previous,.slider-arrow.is-centre-next{bottom:4rem}.slider-arrow-icon_default{flex-direction:column;justify-content:center;align-items:center;width:1rem;height:1rem;display:flex}.hidden-ui-elements{display:none}.slider-arrow-icon{flex-direction:column;justify-content:center;align-items:center;width:1rem;height:1rem;display:flex}.section{z-index:2;height:auto;position:relative}.section.is-gamme{height:auto}.section.is-argument{z-index:0}.section.is-faq{min-height:70svh}.section.is-full-gamme{z-index:0}.heading{font-size:clamp(2rem,2.5vw,3rem)}.heading-2{font-size:clamp(1.5rem,1.667vw,2rem)}.script---threejs{display:none}.navbar_logo-link{width:9rem;padding-left:0}.navbar_menu-button{cursor:pointer;flex-flow:row;justify-content:flex-start;align-items:center;padding:0;font-size:.875rem;display:flex}.navbar_menu-button.w--open{background-color:var(--_primitives---opacity--transparent)}.navbar{z-index:10;width:100%;min-height:4.5rem;padding-top:var(--_spacing-sizing---element-padding--m);padding-right:var(--_spacing-sizing---page-padding--padding-global);padding-left:var(--_spacing-sizing---page-padding--padding-global);border-bottom:0px solid var(--color-scheme-1--background);background-color:var(--_primitives---opacity--transparent);color:var(--color-scheme-1--text);flex-flow:column;align-items:center;display:flex;position:fixed;top:0}.navbar_menu-wrapper{grid-column-gap:var(--_spacing-sizing---element-padding--xl);flex-direction:row;flex:1;justify-content:flex-end;align-items:center;display:flex}.navbar_logo{width:100%}.navbar_menu{left:50%;top:var(--_spacing-sizing---element-padding--xxl);padding:var(--_spacing-sizing---element-padding--m)var(--_spacing-sizing---element-padding--s);grid-column-gap:var(--_ui-styles---radius--small);grid-row-gap:var(--_ui-styles---radius--small);border:1px solid var(--color-scheme-1--border);border-radius:var(--_ui-styles---radius--medium);background-color:var(--_primitives---opacity--white-5);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);flex-flow:column;justify-content:center;align-items:center;display:none;position:absolute;bottom:auto;right:auto;transform:translate(-50%)}.navbar_container{grid-template-rows:auto;grid-template-columns:1fr max-content 1fr;grid-auto-columns:1fr;justify-content:space-between;align-items:center;width:100%;height:100%;margin-left:auto;margin-right:auto;display:flex}.navbar_sound{grid-column-gap:var(--_spacing-sizing---element-padding--xs);grid-row-gap:var(--_spacing-sizing---element-padding--xs);cursor:pointer;justify-content:flex-start;align-items:center;font-size:.875rem;display:flex}.navbar_menu-button-wrapper{grid-column-gap:var(--_spacing-sizing---element-padding--xs);grid-row-gap:var(--_spacing-sizing---element-padding--xs);flex-flow:row;justify-content:center;align-items:center;padding:0;display:flex}.navbar_menu-button-wrapper.w--open{background-color:var(--_primitives---opacity--transparent)}.scroll_component{grid-column-gap:var(--_spacing-sizing---element-padding--s);grid-row-gap:var(--_spacing-sizing---element-padding--s);width:100%;height:1px;display:flex}.scroll_wrapper{background-color:var(--_primitives---opacity--white-20);width:100%;height:100%}.scroll_indicator{background-color:var(--_primitives---colors--white);height:100%;position:relative}.navbar_content{z-index:1;grid-column-gap:var(--_spacing-sizing---element-padding--s);grid-row-gap:var(--_spacing-sizing---element-padding--s);flex-flow:column;width:100%;display:flex}.script---home{display:none}.navbar_sound-wrapper{flex:1}.scroll_point{aspect-ratio:1;background-color:var(--_primitives---colors--white);height:100%}.icon-embed-tiny{flex-direction:column;justify-content:center;align-items:center;width:.75rem;height:.75rem;display:flex}.carousel_desc-collection{width:100%;height:100%}.carousel_list{justify-content:center;align-items:flex-end;display:flex;position:relative}.carousel_list.is-desc{justify-content:flex-start;align-items:center;height:100%}.carousel_slide{width:100%;position:absolute}.gamme_container{text-align:center;justify-content:center;align-items:flex-end;width:100%;height:100svh;display:flex;position:relative}.profile_container{height:100svh;padding-left:var(--_spacing-sizing---element-padding--xxh);justify-content:flex-start;align-items:center;display:flex}.benefits_container{height:100svh;padding-left:var(--_spacing-sizing---element-padding--xxh);text-align:center;justify-content:center;align-items:center;display:flex;position:relative}.carousel_desc{flex-flow:row;justify-content:flex-start;align-items:flex-start;width:100%;font-size:1.25rem;display:flex;position:absolute}.benefits_nav{grid-column-gap:var(--_spacing-sizing---element-padding--s);grid-row-gap:var(--_spacing-sizing---element-padding--s);pointer-events:auto;top:50%;bottom:auto;left:auto;right:calc(var(--_spacing-sizing---page-padding--padding-global));flex-flow:column;justify-content:center;align-items:center;display:flex;position:absolute;transform:translateY(-50%)}.benefits_icon-wrapper{padding:var(--_spacing-sizing---element-padding--xs);aspect-ratio:1;border:1.5px solid var(--color-scheme-1--border);background-color:var(--_primitives---opacity--white-5);-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem);color:var(--_primitives---opacity--white-50);border-radius:50vw;justify-content:center;align-items:center;transition:color .4s,border-color .2s,box-shadow .4s;display:flex}.benefits_icon-wrapper:hover{color:var(--color-scheme-1--text)}.benefits_icon-wrapper.is-active{border-color:var(--color-scheme-1--taste-secondary);box-shadow:inset 0 2px 4px 0 var(--_primitives---opacity--white-30),inset -3px 3px 15px 0 var(--color-scheme-1--taste-secondary);color:var(--color-scheme-1--text)}.benefits_icon{justify-content:center;align-items:center;width:2rem;height:2.25rem;transition:opacity .4s;display:flex}.carousel_nav{z-index:10;justify-content:center;align-items:flex-end;width:100%;max-width:35vh;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%)}.carousel_arrow{pointer-events:auto;cursor:pointer;position:absolute}.carousel_arrow.is-prev{inset:auto auto 0% 0}.carousel_arrow.is-next{inset:auto 0 0% auto}.subhead{grid-column-gap:var(--_spacing-sizing---element-padding--t);grid-row-gap:var(--_spacing-sizing---element-padding--t);text-transform:uppercase;justify-content:flex-start;align-items:center;display:flex}.benefits_text{text-align:left;font-size:1.25rem}.argument_container{z-index:1;text-align:center;justify-content:center;align-items:center;height:100svh;display:flex;position:relative}.faq_question{grid-column-gap:1.5rem;grid-row-gap:1.5rem;cursor:pointer;justify-content:space-between;align-items:center;padding-top:1.25rem;padding-bottom:1.25rem;display:flex}.faq_accordion{flex-direction:column;justify-content:flex-start;align-items:stretch;transition:color .2s}.faq_list{pointer-events:auto}.faq_answer{overflow:hidden}.faq_icon-wrapper{align-self:flex-start;width:2rem;display:flex}.newsletter_embed{pointer-events:auto}.carousel_pagination{z-index:1;margin-top:var(--_spacing-sizing---element-padding--s);pointer-events:auto;cursor:grab;position:relative}.subhead_icon{height:100%;padding:var(--_spacing-sizing---element-padding--xxs);aspect-ratio:1;background-color:var(--color-scheme-1--taste-secondary);color:var(--color-scheme-1--taste-primary);justify-content:center;align-items:center;line-height:1;transition:background-color .4s;display:flex}.subhead_text{padding-right:var(--_spacing-sizing---element-padding--xs);padding-left:var(--_spacing-sizing---element-padding--xs);background-color:var(--_primitives---colors--white);color:var(--_primitives---colors--neutral-darkest);flex:0 auto;justify-content:center;align-self:stretch;align-items:center;font-size:1rem;display:flex;position:relative}.subhead_wrapper{justify-content:flex-start;align-items:center;display:flex}.subhead_wrapper.align-center{white-space:nowrap;word-break:keep-all}.benefits_max-width{width:100%;max-width:28rem}.benefits_icon-separator{aspect-ratio:1;background-color:var(--_primitives---opacity--white-80);width:1px}.gamme_gradient{aspect-ratio:1;border-radius:50vw;width:100%}.hud{z-index:1;width:100%;height:100%;padding-top:var(--_spacing-sizing---booking--nav-height);padding-bottom:var(--_spacing-sizing---element-padding--l);pointer-events:none;font-family:var(--_typography---font-styles--mono);font-size:.75rem;position:fixed;inset:0% auto auto 0%}.hud_container{z-index:1;height:100%;padding-right:var(--_spacing-sizing---page-padding--padding-global);padding-left:var(--_spacing-sizing---page-padding--padding-global);color:var(--_primitives---opacity--white-50);justify-content:space-between;align-items:stretch;display:flex;position:relative}.hud_left{grid-column-gap:var(--_spacing-sizing---element-padding--xxl);grid-row-gap:var(--_spacing-sizing---element-padding--xxl);flex-flow:column;display:flex}.hud_left-top{flex-flow:column;flex:1;justify-content:space-between;align-items:flex-start;display:flex}.hud_left-bottom{flex-flow:column;flex:1;justify-content:space-between;align-items:flex-start;display:flex;position:relative}.hud_left-bottom-top{grid-column-gap:var(--_spacing-sizing---element-padding--l);grid-row-gap:var(--_spacing-sizing---element-padding--l);flex-flow:column;display:flex}.hud_right{grid-column-gap:var(--_spacing-sizing---element-padding--xxl);grid-row-gap:var(--_spacing-sizing---element-padding--xxl);flex-flow:column;justify-content:space-between;align-items:flex-end;display:flex}.hud_right-top{grid-column-gap:var(--_spacing-sizing---element-padding--xxl);grid-row-gap:var(--_spacing-sizing---element-padding--xxl);flex-flow:column;flex:0 auto;justify-content:space-between;align-items:flex-end;display:flex}.hud_right-bottom{grid-column-gap:var(--_spacing-sizing---element-padding--h);grid-row-gap:var(--_spacing-sizing---element-padding--h);flex-flow:column;flex:0 auto;justify-content:space-between;align-items:flex-end;display:flex;position:relative}.hud_right-top-bottom{grid-column-gap:var(--_spacing-sizing---element-padding--m);grid-row-gap:var(--_spacing-sizing---element-padding--m);flex-flow:column;display:flex}.icon-embed-xtiny{flex-direction:column;justify-content:center;align-items:center;width:.5rem;height:.5rem;display:flex}.style---home{display:none}.corner-left{position:absolute;top:-1rem;left:-1rem}.corner-right{position:absolute;inset:auto -1rem -1rem auto}.profile_desc{position:relative}.gradient_overlay{background-image:linear-gradient(180deg,var(--_primitives---opacity--transparent),#0000 70%,var(--color-scheme-1--background)95%);opacity:1;filter:blur(1rem);mix-blend-mode:normal;width:120%;height:120%;position:fixed;inset:-10% auto auto -10%}.height-100{height:100%}.heading-style-custom-2{z-index:-1;text-align:left;font-size:clamp(2.25rem,7.5vw,10rem);font-style:italic;line-height:.8;position:relative}.faq_container{padding-right:var(--_spacing-sizing---element-padding--xxh);padding-left:var(--_spacing-sizing---element-padding--xxh)}.scroll_indicator__core{height:1px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.scroll_indicator__mid{filter:blur(2px);height:3px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.scroll_indicator__halo{filter:blur(7px);height:12px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.scroll_indicator__hotspot{filter:blur(2px);width:28px;height:6px;position:absolute;top:50%;right:0;transform:translate(40%,-50%)}.script---button{display:none}.icon-scroll_wrapper{grid-column-gap:var(--_spacing-sizing---element-padding--s);grid-row-gap:var(--_spacing-sizing---element-padding--s);flex-flow:column;width:1.25rem;display:flex;position:absolute;inset:auto auto 10rem 50%;transform:translate(-50%)}.navbar_relative{position:relative}.navbar_link{width:100%;padding-top:var(--_spacing-sizing---element-padding--xs);padding-right:var(--_spacing-sizing---element-padding--s);padding-bottom:var(--_spacing-sizing---element-padding--xs);padding-left:var(--_spacing-sizing---element-padding--s);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--_primitives---opacity--white-20);font-family:var(--_typography---font-styles--body);text-transform:uppercase;font-size:clamp(2rem,2vw,2.25rem);font-weight:400;transition-property:color;transition-duration:.2s;transition-timing-function:ease;position:relative}.carousel_title-collection{height:fit-content}.section_header{padding-top:var(--_spacing-sizing---booking--nav-height);color:#fff}.carousel_title-bis-collection{width:100%;height:100%;max-width:var(--_spacing-sizing---container--container-xlarge);margin-left:auto;margin-right:auto}.position-relative{position:relative}.carousel_title-b{width:100%;height:100%;color:var(--_primitives---opacity--white-30);text-align:center;-webkit-text-stroke-color:var(--_primitives---opacity--white-20);text-transform:uppercase;white-space:pre;flex-flow:column;justify-content:space-around;align-items:center;font-size:.875rem;display:flex;position:absolute;inset:0% 0% 0% auto}.carousel_title-bis-wrapper{width:100%;height:100%;padding-left:calc(var(--_spacing-sizing---page-padding--padding-global) + var(--_spacing-sizing---element-padding--xl));padding-right:calc(var(--_spacing-sizing---page-padding--padding-global) + var(--_spacing-sizing---element-padding--xl));justify-content:center;align-items:center;display:flex}.code-embed{width:100%;color:var(--_primitives---colors--white)}.legal_grid{grid-column-gap:0px;grid-row-gap:0px;grid-template-rows:auto;grid-template-columns:1fr 1fr;grid-auto-columns:1fr;display:grid}.legal_grid-left{grid-column-gap:var(--_spacing-sizing---element-padding--xl);grid-row-gap:var(--_spacing-sizing---element-padding--xl);flex-flow:column;justify-content:flex-start;align-items:flex-start;display:flex;position:fixed}.script---general{display:none}.legal_links{grid-column-gap:var(--_spacing-sizing---element-padding--t);grid-row-gap:var(--_spacing-sizing---element-padding--t);flex-flow:column;display:flex}.legal_link-item{grid-column-gap:var(--_spacing-sizing---element-padding--xxs);grid-row-gap:var(--_spacing-sizing---element-padding--xxs);color:var(--_primitives---opacity--white-60);justify-content:flex-start;align-items:center;display:flex}.legal_link-item.w--current{color:var(--_primitives---colors--white)}.legal_link-puce{aspect-ratio:1;background-color:var(--_primitives---colors--white);border-radius:50vw;width:.25rem;height:.25rem;display:none}.gamme_gradient-blur{-webkit-backdrop-filter:blur(15rem);backdrop-filter:blur(15rem);width:100vw;height:3rem;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.gamme_gradient-wrapper{filter:blur(6rem);will-change:opacity;width:100%;height:100%;position:absolute;top:0;left:0}.full-gamme_container{text-align:center;justify-content:center;align-items:center;height:100svh;display:flex;position:relative}.argument_media-container{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;inset:0% auto auto 0%}.argument_video-embed{object-fit:cover;width:100%;height:100%;position:absolute;inset:0% 0% auto auto}.argument_svg{z-index:1;width:100%;filter:drop-shadow(0px 0px 80px var(--color-scheme-1--taste-secondary))drop-shadow(0px 0px 90px var(--color-scheme-1--taste-primary));mix-blend-mode:screen;position:relative}.argument_svg-container{width:80%;max-width:100rem;display:flex;position:absolute}.argument_svg-blur{width:100%;height:100%;-webkit-backdrop-filter:blur(var(--_ui-styles---blur--backdrop));backdrop-filter:blur(var(--_ui-styles---blur--backdrop));mix-blend-mode:screen;position:absolute;inset:0% auto auto 0%}.navbar_link-list{flex-flow:column;justify-content:center;align-items:flex-start;display:flex}.navbar_bottom{display:none}.footer_container{max-width:50rem;padding:var(--_spacing-sizing---element-padding--xs)var(--_spacing-sizing---element-padding--s);grid-column-gap:var(--_spacing-sizing---element-padding--xl);grid-row-gap:var(--_spacing-sizing---element-padding--xl);border-radius:var(--_ui-styles---radius--small);background-color:var(--_primitives---opacity--white-5);-webkit-backdrop-filter:blur(var(--_ui-styles---blur--backdrop));backdrop-filter:blur(var(--_ui-styles---blur--backdrop));pointer-events:auto;justify-content:space-between;align-items:center;margin-left:auto;margin-right:auto;display:flex}.footer_link{text-align:center;text-transform:uppercase;flex:0 auto;font-size:.75rem;transition:color .2s}.newsletter_container{width:100%;height:100%;padding-right:var(--_spacing-sizing---element-padding--xxh);padding-left:var(--_spacing-sizing---element-padding--xxh)}.footer_link-list{grid-column-gap:var(--_spacing-sizing---element-padding--s);grid-row-gap:var(--_spacing-sizing---element-padding--s);flex:1;justify-content:space-around;align-items:center;display:flex}.navbar_middle{display:none}.icon-embed-custom{flex-direction:column;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex}.loader{z-index:10000;grid-column-gap:var(--_spacing-sizing---element-padding--xxs);grid-row-gap:var(--_spacing-sizing---element-padding--xxs);background-color:var(--color-scheme-1--background);cursor:auto;flex-flow:column;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed}.loader_percent{bottom:var(--_spacing-sizing---element-padding--xh);letter-spacing:1rem;position:absolute}.loader_enter{bottom:var(--_spacing-sizing---element-padding--xh);text-transform:uppercase;cursor:pointer;position:absolute}.loader_img{width:24.1svh;transform-style:preserve-3d;justify-content:center;align-items:center;display:flex;position:absolute;top:49.2%;left:49.9%;transform:scaleX(.95)translate(-50%,-50%)}.faq_separator{width:100%;height:var(--_ui-styles---stroke--divider-width);background-color:var(--color-scheme-1--border)}.div-block{width:100%;height:100%;position:absolute;inset:0% auto auto 0%}.overlay_legal{pointer-events:none;background-image:linear-gradient(#000,#0000 15%);width:100%;height:100%;position:fixed;inset:0% auto auto 0%}.navbar_overlay{width:100%;height:var(--_spacing-sizing---booking--nav-height);background-image:linear-gradient(#0009,#0000);position:absolute;inset:0% auto auto 0%}.max-width-custom{width:100%;max-width:28rem}.script---sfx{display:none}.scroll_discover{z-index:1;margin-top:var(--_spacing-sizing---element-padding--xs);color:var(--_primitives---opacity--white-60);text-transform:uppercase;font-size:.875rem;position:relative}.confirmation_wrapper{justify-content:center;align-items:center;height:100%;min-height:100svh;display:flex}.heading-style-h3-2{font-size:2.5rem;font-weight:700;line-height:1.2}.heading-style-h6-2{font-size:1.25rem;font-weight:400;line-height:1.4}.confirmation_image{object-fit:cover;width:100%;height:100%;position:absolute}.text-50{color:var(--_primitives---opacity--white-50)}.argument_overlay{z-index:1;background-image:radial-gradient(circle farthest-corner at 50% 50%,var(--color-scheme-1--background-0),var(--color-scheme-1--background));width:100%;height:100%;position:absolute}.gamme_gradient-position{aspect-ratio:1;width:120%;max-width:70%;position:absolute;bottom:0;left:50%;right:0%;transform:translate(-50%,95%)}.gamme_gradient-img{aspect-ratio:1;border-radius:50vw;width:100%}@media screen and (max-width:991px){body{--_spacing-sizing---element-padding--s:clamp(1.25rem,1.1vw,1.5rem);--_spacing-sizing---element-padding--l:clamp(2rem,2vw,3rem);--_spacing-sizing---container--container-xlarge:120rem;--_spacing-sizing---element-padding--t:.25rem;--_spacing-sizing---element-padding--xxs:.5rem;--_spacing-sizing---element-padding--xs:clamp(.75rem,.65vw,1rem);--_spacing-sizing---element-padding--m:clamp(1.5rem,1.4vw,2rem);--_spacing-sizing---element-padding--xl:clamp(2.5rem,2.8vw,4rem);--_spacing-sizing---element-padding--xxl:clamp(3rem,3.5vw,5rem);--_spacing-sizing---element-padding--h:clamp(3.5rem,4vw,6rem);--_spacing-sizing---element-padding--xh:clamp(4rem,4.8vw,7rem);--_spacing-sizing---element-padding--xxh:clamp(5rem,6.5vw,10rem);--_spacing-sizing---page-padding--padding-global:4%;--_spacing-sizing---booking--nav-height:8rem}p{line-height:1.25}.hide-tablet{display:none}.max-width-full-tablet{width:100%;max-width:none}.margin-top{margin-bottom:0;margin-left:0;margin-right:0}.margin-bottom{margin-top:0;margin-left:0;margin-right:0}.margin-left{margin-top:0;margin-bottom:0;margin-right:0}.margin-right{margin-top:0;margin-bottom:0;margin-left:0}.margin-vertical{margin-left:0;margin-right:0}.margin-horizontal{margin-top:0;margin-bottom:0}.padding-top{padding-bottom:0;padding-left:0;padding-right:0}.padding-bottom{padding-top:0;padding-left:0;padding-right:0}.padding-left{padding-top:0;padding-bottom:0;padding-right:0}.padding-right{padding-top:0;padding-bottom:0;padding-left:0}.padding-vertical{padding-left:0;padding-right:0}.padding-horizontal{padding-top:0;padding-bottom:0}.rl-styleguide_item-row{grid-template-columns:auto 1fr}.rl-styleguide_icons-list{grid-auto-flow:row}.button.is-full{width:100%}.heading-style-h4{font-size:clamp(1.5rem,1.667vw,2rem)}.spacer-large{padding-top:2.5rem}.spacer-xlarge{padding-top:3.5rem}.spacer-xxlarge{padding-top:4.5rem}.spacer-huge{padding-top:5rem}.spacer-xhuge{padding-top:6rem}.spacer-xxhuge{padding-top:7.5rem}.rl-styleguide_scheme-list{grid-template-columns:1fr}.navbar_menu-button{margin-left:-.5rem;padding:0}.navbar_menu-button.w--open{background-color:var(--_primitives---opacity--transparent)}.navbar_menu{z-index:-1;width:100vw;height:100svh;padding-top:var(--_spacing-sizing---booking--nav-height);background-color:var(--color-scheme-1--background);-webkit-text-fill-color:inherit;background-clip:border-box;border-style:none;border-radius:0;flex-direction:column;justify-content:space-between;align-items:center;margin-left:0;display:none;top:0}.navbar_container{grid-auto-columns:1fr}.navbar_menu-button-wrapper{margin-left:-.5rem;padding:0}.navbar_menu-button-wrapper.w--open{background-color:var(--_primitives---opacity--transparent)}.carousel_list.is-desc{justify-content:flex-start;align-items:flex-end}.gamme_container,.profile_container{padding-right:var(--_spacing-sizing---element-padding--l);padding-left:var(--_spacing-sizing---element-padding--l)}.benefits_container{justify-content:flex-start;align-items:flex-end;padding-left:0}.carousel_desc{text-align:center;justify-content:center;align-items:flex-start}.benefits_icon{width:1.5rem;height:2rem}.benefits_text{text-align:center;padding-left:0}.subhead_wrapper.align-center{justify-content:center;align-items:center}.benefits_max-width{max-width:22.5rem;margin-left:auto;margin-right:auto}.corner-left,.corner-right{display:none}.profile_desc{height:5rem}.heading-style-custom-2{text-align:center}.faq_container{padding-left:0;padding-right:0}.navbar_relative{position:static}.navbar_link{width:100%;font-size:clamp(2.5rem,2.25vw,2.5rem)}.carousel_title-bis-wrapper{display:none}.legal_grid{grid-column-gap:var(--_spacing-sizing---element-padding--xxl);grid-row-gap:var(--_spacing-sizing---element-padding--xxl);flex-flow:column;display:flex}.legal_grid-left{text-align:center;justify-content:flex-start;align-items:center;position:relative}.legal_links{grid-column-gap:var(--_spacing-sizing---element-padding--l);grid-row-gap:var(--_spacing-sizing---element-padding--l);word-break:break-all;flex-flow:row;justify-content:center;align-items:center;overflow:auto}.legal_link-item{flex:none}.gamme_gradient-blur{display:none}.argument_media-container{justify-content:center;align-items:flex-end}.argument_svg{filter:none}.argument_svg-container{bottom:var(--_spacing-sizing---element-padding--xxl);width:70%}.argument_svg-blur{display:none}.navbar_link-list{width:100%;padding-top:var(--_spacing-sizing---element-padding--xxl)}.navbar_button{width:100%}.navbar_bottom{grid-column-gap:var(--_spacing-sizing---element-padding--xxl);grid-row-gap:var(--_spacing-sizing---element-padding--xxl);flex-flow:column;justify-content:center;align-items:center;width:100%;display:flex}.navbar_socials-links{justify-content:space-between;align-items:center;width:100%;display:flex}.footer_container{justify-content:space-between;align-items:center;display:flex}.newsletter_container{padding-left:0;padding-right:0}.navbar_middle{display:block}.heading-3{font-size:clamp(2.5rem,4.167vw,4.5rem)}.heading-style-h3-2{font-size:2.25rem}}@media screen and (max-width:767px){body{--_spacing-sizing---element-padding--s:1.25rem;--_spacing-sizing---element-padding--l:2rem;--_spacing-sizing---container--container-xlarge:120rem;--_spacing-sizing---element-padding--t:.25rem;--_spacing-sizing---element-padding--xxs:.5rem;--_spacing-sizing---element-padding--xs:.75rem;--_spacing-sizing---element-padding--m:1.5rem;--_spacing-sizing---element-padding--xl:2.5rem;--_spacing-sizing---element-padding--xxl:3rem;--_spacing-sizing---element-padding--h:3.5rem;--_spacing-sizing---element-padding--xh:4rem;--_spacing-sizing---element-padding--xxh:5rem;--_spacing-sizing---page-padding--padding-global:4%;--_spacing-sizing---booking--nav-height:8rem;--_ui-styles---radius--medium:.5rem;--_ui-styles---radius--xsmall:.25rem;--_ui-styles---radius--button:var(--_ui-styles---radius--small);--_ui-styles---stroke--border-width:1px;--_ui-styles---radius--small:.25rem;--_ui-styles---radius--large:1rem;--_ui-styles---blur--backdrop:2rem;--_ui-styles---stroke--divider-width:1px}h4{line-height:1.4}h5{font-size:1.25rem}.hide-mobile-landscape{display:none}.max-width-full-mobile-landscape{width:100%;max-width:none}.margin-xsmall{margin:.75rem}.margin-top{margin-bottom:0;margin-left:0;margin-right:0}.margin-bottom{margin-top:0;margin-left:0;margin-right:0}.margin-left{margin-top:0;margin-bottom:0;margin-right:0}.margin-right{margin-top:0;margin-bottom:0;margin-left:0}.margin-vertical{margin-left:0;margin-right:0}.margin-horizontal{margin-top:0;margin-bottom:0}.padding-top{padding-bottom:0;padding-left:0;padding-right:0}.padding-bottom{padding-top:0;padding-left:0;padding-right:0}.padding-left{padding-top:0;padding-bottom:0;padding-right:0}.padding-right{padding-top:0;padding-bottom:0;padding-left:0}.padding-vertical{padding-left:0;padding-right:0}.padding-horizontal{padding-top:0;padding-bottom:0}.text-size-medium{font-size:1rem}.text-style-quote{font-size:1.125rem}.heading-style-h5{font-size:clamp(1.25rem,1.25vw,1.5rem)}.heading-style-h4{line-height:1.4}.text-style-nowrap{white-space:normal}.text-size-large{font-size:1.125rem}.spacer-xsmall{padding-top:.75rem}.spacer-small{padding-top:1.25rem}.spacer-medium{padding-top:1.5rem}.spacer-large{padding-top:2rem}.spacer-xlarge{padding-top:2.5rem}.spacer-xxlarge{padding-top:3rem}.spacer-huge{padding-top:3.5rem}.spacer-xhuge{padding-top:4rem}.spacer-xxhuge{padding-top:5rem}.navbar{min-height:4rem}.faq_question{padding-top:1rem;padding-bottom:1rem}.faq_icon-wrapper{width:1.75rem}.gamme_gradient{max-width:none}.carousel_title-b{font-size:1rem}.footer_container{grid-column-gap:var(--_spacing-sizing---element-padding--xs);grid-row-gap:var(--_spacing-sizing---element-padding--xs);flex-flow:column;grid-template-rows:auto auto auto;grid-template-columns:2fr 1fr;grid-auto-columns:1fr;display:grid}.footer_link-list{flex-flow:column;order:-9999;justify-content:space-around;align-items:flex-start}.heading-style-h3-2{font-size:2rem}.heading-style-h6-2{font-size:1.125rem}.gamme_gradient-position,.gamme_gradient-img{max-width:none}}@media screen and (max-width:479px){body{--_spacing-sizing---element-padding--s:clamp(1.25rem,1.1vw,1.5rem);--_spacing-sizing---element-padding--l:clamp(2rem,2vw,3rem);--_spacing-sizing---container--container-xlarge:120rem;--_spacing-sizing---element-padding--t:.25rem;--_spacing-sizing---element-padding--xxs:.5rem;--_spacing-sizing---element-padding--xs:clamp(.75rem,.65vw,1rem);--_spacing-sizing---element-padding--m:clamp(1.5rem,1.4vw,2rem);--_spacing-sizing---element-padding--xl:clamp(2.5rem,2.8vw,4rem);--_spacing-sizing---element-padding--xxl:clamp(3rem,3.5vw,5rem);--_spacing-sizing---element-padding--h:clamp(3.5rem,4vw,6rem);--_spacing-sizing---element-padding--xh:clamp(4rem,4.8vw,7rem);--_spacing-sizing---element-padding--xxh:clamp(5rem,6.5vw,10rem);--_spacing-sizing---page-padding--padding-global:4%;--_spacing-sizing---booking--nav-height:7rem}.hide-mobile-portrait{display:none}.margin-top{margin-bottom:0;margin-left:0;margin-right:0}.margin-bottom{margin-top:0;margin-left:0;margin-right:0}.margin-left{margin-top:0;margin-bottom:0;margin-right:0}.margin-right{margin-top:0;margin-bottom:0;margin-left:0}.margin-vertical{margin-left:0;margin-right:0}.margin-horizontal{margin-top:0;margin-bottom:0}.padding-top{padding-bottom:0;padding-left:0;padding-right:0}.padding-bottom{padding-top:0;padding-left:0;padding-right:0}.padding-left{padding-top:0;padding-bottom:0;padding-right:0}.padding-right{padding-top:0;padding-bottom:0;padding-left:0}.padding-vertical{padding-left:0;padding-right:0}.padding-horizontal{padding-top:0;padding-bottom:0}.max-width-full-mobile-portrait{width:100%;max-width:none}.heading-style-h1{font-size:clamp(2.5rem,4.167vw,4.5rem)}.navbar_logo-link{width:8rem}.subhead_icon{font-size:1rem}.subhead_text{font-size:.875rem}.argument_svg-container{max-width:17.5rem}}#w-node-_4635be0a-07d0-9182-85fe-1e0f50470517-504704fa{grid-area:1/2/2/3}@media screen and (max-width:767px){#w-node-_285962b4-fd8f-aa45-1119-22d4727b0d28-3f4e4c6a{justify-self:end}#w-node-d8263045-db02-0fcc-97d3-5cd6e7062c4a-3f4e4c6a{grid-area:span 3/span 1/span 3/span 1;align-self:start}#w-node-_4fae3bc2-e193-e521-a83a-d92a507641cc-3f4e4c6a{justify-self:end}} /* ===== END css/westo.webflow.shared.min.css ===== */ /* ===== BEGIN css/fa-override.css ===== */ /* Persian (Farsi) overrides — loaded after the main Webflow CSS. Vazirmatn covers Arabic-script glyphs via unicode-range, so Latin text (brand names, numbers) keeps the original Franklin/Geist faces. */ html.is-dish-boards section.is-benefits .dish-board-media[hidden], html.is-dish-boards section.is-benefits .dish-board-media.is-empty-media { display: none !important; } @font-face { font-family: 'Vazirmatn'; src: url('../assets/fonts/Vazirmatn-Variable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; } /* Shadow the original families for Arabic-script ranges only */ @font-face { font-family: 'Franklin Gothic Atf'; src: url('../assets/fonts/Vazirmatn-Variable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D; } @font-face { font-family: 'Franklin Gothic Atf'; src: url('../assets/fonts/Vazirmatn-Variable.woff2') format('woff2-variations'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D; } @font-face { font-family: 'Geist'; src: url('../assets/fonts/Vazirmatn-Variable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D; } /* Westo mark — cyan brand logo on transparent */ .navbar_logo-link { display: flex; align-items: center; justify-content: center; } .navbar_logo { object-fit: contain; object-position: center; } html[data-theme='light'] .navbar_logo { filter: brightness(0) saturate(100%) invert(10%); } .auth-logo { height: 48px !important; width: auto !important; max-width: 14rem; object-fit: contain; } #brand-logo { max-height: 36px; width: auto; max-width: 9.5rem; object-fit: contain; } /* —— Loader: Westo logo with liquid-glass breathe + sheen —— */ .loader_logo-wrap { position: absolute !important; top: 48% !important; left: 50% !important; width: min(46vw, 13.5rem) !important; height: auto !important; transform: translate(-50%, -50%) !important; display: flex !important; align-items: center; justify-content: center; z-index: 1; } .loader_logo { position: relative; z-index: 2; width: 100%; height: auto; display: block; object-fit: contain; will-change: transform, filter, opacity; animation: westo-loader-breathe 2.4s ease-in-out infinite; filter: drop-shadow(0 0 1.2rem rgba(120, 208, 216, 0.28)); } /* Immersive gate logo: no legacy breathe (SVG draw owns motion) */ .entrance-gate .eg-logo-png.loader_logo, .entrance-gate .loader_logo { animation: none !important; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45)) !important; will-change: opacity; } .loader_logo-glow { position: absolute; inset: -35%; z-index: 0; border-radius: 50%; background: radial-gradient( circle at 50% 45%, rgba(120, 208, 216, 0.34) 0%, rgba(120, 208, 216, 0.1) 38%, transparent 68% ); animation: westo-loader-glow 2.4s ease-in-out infinite; pointer-events: none; } .loader_logo-sheen { position: absolute; inset: -8%; z-index: 3; border-radius: 1.25rem; pointer-events: none; background: linear-gradient( 115deg, transparent 35%, rgba(255, 255, 255, 0.22) 48%, rgba(120, 208, 216, 0.35) 52%, transparent 65% ); background-size: 220% 100%; mix-blend-mode: soft-light; opacity: 0.75; animation: westo-loader-sheen 2.6s ease-in-out infinite; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 72%); mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 72%); } @keyframes westo-loader-breathe { 0%, 100% { transform: scale(0.96) translateY(0.15rem); filter: drop-shadow(0 0 0.7rem rgba(120, 208, 216, 0.18)); } 50% { transform: scale(1.05) translateY(-0.2rem); filter: drop-shadow(0 0 1.8rem rgba(120, 208, 216, 0.48)); } } @keyframes westo-loader-glow { 0%, 100% { opacity: 0.45; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes westo-loader-sheen { 0% { background-position: 120% 0; opacity: 0.25; } 40%, 60% { opacity: 0.85; } 100% { background-position: -40% 0; opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .loader_logo, .loader_logo-glow, .loader_logo-sheen { animation: none !important; } } @font-face { font-family: 'Geistmono'; src: url('../assets/fonts/Vazirmatn-Variable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D; } /* Right-to-left reading direction for running text; layout stays LTR so the scroll/WebGL choreography is untouched. Headings need it too because SplitText wraps words in inline-block spans that would otherwise be laid out left-to-right, reversing the Persian word order. */ html[lang='fa'] p, html[lang='fa'] li, html[lang='fa'] .w-richtext, html[lang='fa'] blockquote, html[lang='fa'] h1, html[lang='fa'] h2, html[lang='fa'] h3, html[lang='fa'] h4, html[lang='fa'] h5, html[lang='fa'] h6, html[lang='fa'] [class*='heading-style'], html[lang='fa'] [class*='text-size'], html[lang='fa'] [class*='text-style'], html[lang='fa'] .faq_question, html[lang='fa'] .w-dyn-item { direction: rtl; unicode-bidi: isolate; } /* Persian headings: the original faces are italic-latin display fonts; keep them upright for Arabic script so letters connect cleanly. */ html[lang='fa'] h1, html[lang='fa'] h2, html[lang='fa'] h3 { font-style: normal; } /* ---- FAQ band (design 101+) — quieter chrome, fog hairlines ---- */ .section.is-faq .faq_separator { height: 1px; background-color: rgba(236, 232, 226, 0.08); } .section.is-faq .faq_question { gap: 1rem; padding-top: 1.1rem; padding-bottom: 1.1rem; transition: color 0.2s ease; } .section.is-faq .faq_question .heading-style-h5 { font-weight: 500; color: rgba(236, 232, 226, 0.88); line-height: 1.45; } .section.is-faq .faq_accordion:hover .faq_question .heading-style-h5 { color: rgba(236, 232, 226, 0.98); } .section.is-faq .faq_icon-wrapper { color: rgba(236, 232, 226, 0.35); flex-shrink: 0; } .section.is-faq .faq_answer .text-size-medium { color: rgba(236, 232, 226, 0.48); line-height: 1.65; font-size: 0.95rem; } .section.is-faq .heading-style-custom-2 { font-size: clamp(2.25rem, 5.5vw, 4.5rem); font-style: normal; font-weight: 550; line-height: 1.05; letter-spacing: -0.01em; color: rgba(236, 232, 226, 0.92); text-align: center; } .section.is-faq .faq_component > .margin-bottom.margin-xxlarge { margin-bottom: 2.25rem; } .section.is-faq .faq_question:focus { outline: none; } .section.is-faq .faq_question:focus-visible { box-shadow: inset 0 0 0 1px rgba(236, 232, 226, 0.22); border-radius: 0.25rem; } .section.is-faq .faq_list > .w-dyn-item:first-child > .faq_separator { display: none; } .section.is-faq .faq_icon-wrapper svg, .section.is-faq .faq_icon-wrapper svg path { stroke: rgba(236, 232, 226, 0.35); opacity: 0.85; } .section.is-faq .faq_accordion:hover .faq_icon-wrapper svg path { stroke: rgba(236, 232, 226, 0.55); } .section.is-faq .faq_answer { padding-inline: 0.1rem; } .section.is-faq .faq_answer .margin-bottom { margin-bottom: 0.85rem; } /* ---- Newsletter (design 105+) — fog form, no Brevo white card ---- */ #newsletter .sib-form { font-family: 'Vazirmatn', 'Geist', sans-serif; padding: 0; background: transparent; direction: rtl; } #newsletter #sib-container { background: transparent; padding: 0; max-width: 28rem; margin: 0 auto; display: block; } #newsletter #sib-form { text-align: center; } #newsletter .sib-form-block p { color: rgba(236, 232, 226, 0.88); font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 500; margin-bottom: 1.25rem; } #newsletter .entry__field { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(236, 232, 226, 0.14); border-radius: 0.45rem; width: 100%; } #newsletter .entry__field:focus-within { box-shadow: 0 0 0 1px rgba(236, 232, 226, 0.28); border-color: rgba(236, 232, 226, 0.28); } #newsletter .input { color: rgba(236, 232, 226, 0.92); direction: rtl; text-align: right; } #newsletter .input::placeholder { color: rgba(236, 232, 226, 0.35); } #newsletter .sib-form-block__button { background: rgba(236, 232, 226, 0.1); color: rgba(236, 232, 226, 0.92); border: 1px solid rgba(236, 232, 226, 0.16); border-radius: 0.45rem; box-shadow: none; text-transform: none; font-family: inherit; font-weight: 500; padding: 0.7rem 1.25rem; transition: background 0.2s, border-color 0.2s; } #newsletter .sib-form-block__button:hover { background: rgba(236, 232, 226, 0.16); border-color: rgba(236, 232, 226, 0.28); } #newsletter .sib-form-message-panel { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(236, 232, 226, 0.12) !important; border-radius: 0.45rem !important; color: rgba(236, 232, 226, 0.78) !important; font-family: inherit !important; text-align: center !important; max-width: 100% !important; } #newsletter #error-message { color: rgba(236, 200, 190, 0.85) !important; border-color: rgba(236, 180, 160, 0.25) !important; } #newsletter #success-message { color: rgba(210, 230, 210, 0.9) !important; border-color: rgba(180, 210, 180, 0.22) !important; } #newsletter .entry__choice, #newsletter .entry__label { color: rgba(236, 232, 226, 0.45); font-size: 0.78rem; text-align: right; } /* Dish thumbs in benefits side nav (menu story) */ .benefits_icon-wrapper .benefits_dish-thumb { width: 100%; height: 100%; object-fit: contain; border-radius: 0; display: block; box-shadow: none; background: transparent; } .benefits_icon-wrapper .benefits_icon { overflow: visible; border-radius: 0; background: transparent; box-shadow: none; } /* Rail: tiny dish name under each thumb (one word per line) */ .benefits_nav.is-menu-rail .benefits_icon-wrapper { flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.18rem; width: 3.15rem; min-width: 3.15rem; aspect-ratio: auto; height: auto; padding: 0.2rem 0.1rem 0.25rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-decoration: none; } .benefits_nav.is-menu-rail .benefits_icon { width: 1.85rem; height: 1.85rem; flex-shrink: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; outline: none; } .benefits_nav.is-menu-rail .benefits_rail-label { display: block; width: 100%; max-width: 3rem; margin: 0; padding: 0; font-size: 0.48rem; line-height: 1.2; font-weight: 500; letter-spacing: 0; text-align: center; color: rgba(236, 232, 226, 0.52); white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; pointer-events: none; } .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active .benefits_rail-label, .benefits_nav.is-menu-rail .benefits_icon-wrapper.w--current .benefits_rail-label { color: rgba(236, 232, 226, 0.88); } .benefits_nav.is-menu-rail .benefits_icon-separator { width: 1px; height: 0.35rem; aspect-ratio: auto; margin-inline: auto; opacity: 0.35; } /* Dish boards: hide leftover ciao category title ghost */ html.is-dish-boards .carousel_title-bis-wrapper, html.is-dish-boards .carousel_title-bis-collection { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Only the active dish board text is visible (cloned boards lack GSAP ST) */ html.is-dish-boards section.is-benefits .benefits_container { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.35s ease; z-index: 10; } html.is-dish-boards section.is-benefits.is-dish-active .benefits_container { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Dish stage: rail owns a right gutter; glass card never enters it */ html.is-dish-boards { --dish-rail-w: 5.45rem; --dish-rail-gap: 0.5rem; } /* Ciao HUD chrome is drink-era decoration — hide on dish boards (all viewports) */ html.is-dish-boards .hud, html.is-dish-boards .hud_container, html.is-dish-boards .hud_left, html.is-dish-boards .hud_right, html.is-dish-boards .gradient_overlay { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Shared dish rail — full height in its own right column */ html.is-dish-boards .benefits_nav.is-menu-rail { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 80; position: fixed !important; top: max( calc(4.75rem + var(--menu-catbar-gap, 0px) + var(--menu-catbar-h, 4.75rem)), calc(env(safe-area-inset-top, 0px) + 4.25rem + var(--menu-catbar-gap, 0px) + var(--menu-catbar-h, 4.75rem)) ) !important; bottom: max(0.45rem, env(safe-area-inset-bottom, 0px)) !important; right: max(0.15rem, env(safe-area-inset-right, 0px)) !important; left: auto !important; width: var(--dish-rail-w) !important; max-height: none !important; height: auto !important; transform: none !important; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.2rem; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; -ms-overflow-style: none; padding-block: 0.25rem; padding-inline: 0; box-sizing: border-box; } html.is-dish-boards .benefits_nav.is-menu-rail::-webkit-scrollbar { display: none; width: 0; height: 0; } html.is-dish-boards .benefits_nav.is-menu-rail.is-rail-solo { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } @media screen and (max-width: 991px) { html.is-dish-boards { --dish-rail-w: 5.4rem; --dish-card-lift: 0px; } /* menu-story.css owns mobile dish-board geometry (φ stage + fixed card). */ html.is-dish-boards section.is-benefits .benefits_text, html.is-dish-boards section.is-benefits.is-dish-active .benefits_text { z-index: 20 !important; } /* Rail stops above the shared dish card */ html.is-dish-boards .benefits_nav.is-menu-rail { bottom: var(--dish-card-stack, calc(var(--dish-info-h, 12rem) + 1.4rem)) !important; } /* Do not reposition media here — fights the shared φ layout. */ html.is-dish-boards section.is-benefits .dish-board-media { top: auto !important; bottom: auto !important; } } @media screen and (min-width: 992px) { html.is-dish-boards { --dish-rail-w: 9rem; --dish-rail-gap: 0.85rem; --dish-card-w: min(28rem, 34vw); } html.is-dish-boards .benefits_nav.is-menu-rail { top: max( calc(5.25rem + var(--menu-catbar-gap, 0px) + var(--menu-catbar-h, 4.75rem)), calc(env(safe-area-inset-top, 0px) + 4.75rem + var(--menu-catbar-gap, 0px) + var(--menu-catbar-h, 4.75rem)) ) !important; bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important; right: max(0.55rem, env(safe-area-inset-right, 0px)) !important; gap: 0.4rem; padding-block: 0.45rem; } html.is-dish-boards .benefits_nav.is-menu-rail .benefits_icon-wrapper { width: 7.9rem; min-width: 7.9rem; padding: 0.35rem 0.22rem 0.4rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 0.36rem; } html.is-dish-boards .benefits_nav.is-menu-rail .benefits_icon { width: 4.15rem; height: 4.15rem; border-radius: 0; overflow: visible; outline: none; box-shadow: none; background: transparent; } html.is-dish-boards .benefits_nav.is-menu-rail .benefits_rail-label { max-width: 7.45rem; font-size: 0.96rem; line-height: 1.25; color: rgba(236, 232, 226, 0.62); } } html.is-dish-boards section.is-benefits .benefits_nav:not(.is-menu-rail) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html.is-dish-boards .benefits_icon-wrapper.is-active, html.is-dish-boards .benefits_icon-wrapper.w--current { transform: none; outline: none; border: 0; background: transparent; box-shadow: none; } html.is-dish-boards .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active .benefits_icon, html.is-dish-boards .benefits_nav.is-menu-rail .benefits_icon-wrapper.w--current .benefits_icon { outline: none; box-shadow: none; border: 0; background: transparent; transform: scale(1.06); } /* Hero: never show dish cards until scrolled into benefits */ html:not(.is-dish-boards) section.is-benefits .benefits_container, html:not(.is-dish-boards) section.is-benefits .benefits_nav, html:not(.is-dish-boards) .benefits_nav.is-menu-rail { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Category name above dish price chip */ .menu-cat-label { display: block; width: 100%; text-align: center; font-size: 0.68rem; font-weight: 550; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); margin: 0 0 0.45rem; } html.is-dish-boards section.is-benefits .benefits_text, html.is-dish-boards section.is-benefits .benefits_max-width { text-align: center !important; } html.is-dish-boards section.is-benefits .benefits_text h2, html.is-dish-boards section.is-benefits .benefits_text [data-menu-name] { display: block; width: 100%; max-width: none !important; margin: 0.15rem auto 0.35rem !important; text-align: center !important; font-size: clamp(1.2rem, 4.6vw, 1.55rem) !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -0.015em; color: rgba(245, 240, 232, 0.96); } /* SplitText wraps — keep titles centered; direction follows guest lang */ html.is-dish-boards section.is-benefits .benefits_text h2 .line, html.is-dish-boards section.is-benefits .benefits_text [data-menu-name] .line, html.is-dish-boards section.is-benefits .benefits_text p .line { display: block !important; width: 100% !important; text-align: center !important; direction: inherit; unicode-bidi: isolate; } html.is-dish-boards section.is-benefits .benefits_text h2 .word, html.is-dish-boards section.is-benefits .benefits_text [data-menu-name] .word { display: inline !important; } html.is-dish-boards section.is-benefits .benefits_text p[data-menu-desc], html.is-dish-boards section.is-benefits .benefits_text p { display: -webkit-box; width: 100%; max-width: 36ch !important; margin: 0 auto 0.45rem !important; text-align: center !important; font-size: 0.78rem !important; font-weight: 450; line-height: 1.55 !important; opacity: 0.72; direction: inherit; unicode-bidi: isolate; } html.is-dish-boards section.is-benefits .subhead_wrapper { width: 100%; justify-content: center !important; } html.is-dish-boards section.is-benefits .subhead_text:has([data-menu-price]) { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-inline: auto; padding: 0.3rem 0.85rem; border-radius: 999px; overflow: hidden; background: var(--wg-chip-bg, rgba(255, 255, 255, 0.12)); color: var(--wg-ink, #f4efe6); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(var(--wg-blur, 12px)); backdrop-filter: blur(var(--wg-blur, 12px)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 0.15rem 0.45rem rgba(0, 0, 0, 0.22); } html.is-dish-boards section.is-benefits .subhead_text:has([data-menu-price])::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 44%; background: linear-gradient(rgba(255, 255, 255, 0.2) 0%, transparent 100%); pointer-events: none; } html.is-dish-boards section.is-benefits .subhead_text [data-menu-price] { font-size: 0.74rem !important; font-weight: 650; letter-spacing: -0.01em; color: inherit !important; text-align: center; } /* Menu story: skip ciao profile beat — hero categories go straight to dishes */ section.is-profile[hidden], section.is-profile[data-westo-skipped='1'] { display: none !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* After last dish: no FAQ / newsletter / packshot / full list */ section.is-argument[hidden], section.is-argument[data-westo-tail-skipped='1'], section.is-full-gamme[hidden], section.is-full-gamme[data-westo-tail-skipped='1'], section.is-faq[hidden], section.is-faq[data-westo-tail-skipped='1'], section.is-last-copy[hidden], section.is-last-copy[data-westo-tail-skipped='1'], section.is-last[hidden], section.is-last[data-westo-tail-skipped='1'], #newsletter[hidden], .newsletter_container[hidden], .footer_container[hidden] { display: none !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; border: 0 !important; visibility: hidden !important; } a.navbar_link[href='#FAQ'][hidden], a.navbar_link[href='#newsletter'][hidden] { display: none !important; } /* Quieter hero chrome while reading dishes */ html.is-dish-boards .carousel_pagination, html.is-dish-boards .carousel_arrow, html.is-dish-boards .scroll_discover, html.is-dish-boards .icon-scroll_wrapper, html.is-dish-boards .westo-scroll-hint--mobile, html.is-dish-boards .westo-scroll-hint--mobile-right { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; display: none !important; } /* Keep navbar scroll progress visible on dishes so users see category depth. */ html.is-dish-boards .scroll_component { opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } /* Keep navbar / table access while on dishes */ html.is-dish-boards .navbar { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } /* Navbar must sit above dish rail (z=80), catbar (z=220), and glass card (z=20) */ .navbar { z-index: 300 !important; } .navbar_content { z-index: 2; position: relative; } .navbar_menu-wrapper, .navbar_relative { position: relative; z-index: 3; } .navbar_menu { z-index: 210 !important; } /* Decorative gradient only — never steal clicks from nav buttons */ .navbar_overlay { z-index: 0 !important; pointer-events: none !important; } /* Back → categories (top-left, next to table) */ .navbar_sound-wrapper { display: flex; align-items: center; min-width: 0; } .westo-back-categories { position: relative; display: none; margin: 0; border: 0; overflow: hidden; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(var(--wg-blur, 12px)); -webkit-backdrop-filter: blur(var(--wg-blur, 12px)); color: var(--wg-ink, #f4efe6); cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: background 0.2s ease, transform var(--wg-hover-time, 0.22s) var(--wg-ease, cubic-bezier(0.22, 1, 0.36, 1)); } .westo-back-categories::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--wg-glass-edge); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .westo-back-categories[hidden] { display: none !important; } html.is-dish-boards .westo-back-categories:not([hidden]) { display: inline-flex; } .westo-back-categories:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); } .westo-back-categories:active { transform: scale(0.97); } .westo-back-categories__icon { flex: none; } .westo-back-categories__label { direction: rtl; unicode-bidi: isolate; } @media screen and (max-width: 479px) { .westo-back-categories__label { display: none; } } /* Decorative ciao × reads as a close button — hide on dish cards */ html.is-dish-boards .subhead_icon, section.is-benefits .subhead:has([data-menu-price]) .subhead_icon { display: none !important; } /* Desktop: split stage — glass card left, large plate right, rail far-right */ @media screen and (min-width: 992px) { html.is-dish-boards section.is-benefits .benefits_container, html.is-dish-boards section.is-benefits.is-dish-active .benefits_container { display: flex !important; align-items: stretch !important; justify-content: flex-start !important; } html.is-dish-boards section.is-benefits .benefits_container > .padding-global, html.is-dish-boards section.is-benefits .container-large, html.is-dish-boards section.is-benefits .padding-section-medium { width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; position: relative !important; } html.is-dish-boards section.is-benefits .dish-board-media { position: absolute !important; z-index: 1; top: max(5.5rem, 10vh); bottom: max(2rem, 6vh); left: calc(var(--dish-card-w) + 4.5rem); right: calc(var(--dish-rail-w) + var(--dish-rail-gap) + 1.25rem); margin: 0; display: grid; place-items: center; pointer-events: none; } html.is-dish-boards section.is-benefits .dish-board-media img { display: block; width: min(100%, 46rem); height: min(100%, 46rem); max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 1.75rem 2.6rem rgba(0, 0, 0, 0.42)); } html.is-dish-boards section.is-benefits .benefits_text { position: absolute; top: 50%; left: max(2.25rem, 3.5vw); right: auto; bottom: auto; transform: translateY(-50%); width: var(--dish-card-w); max-width: var(--dish-card-w); height: auto; max-height: min(72vh, 34rem); margin: 0; padding: 1.35rem 1.4rem 1.25rem; text-align: center !important; border-radius: 1.4rem; background: linear-gradient( 155deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(14, 12, 14, 0.42) 100% ); backdrop-filter: blur(32px) saturate(1.5); -webkit-backdrop-filter: blur(32px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.06); pointer-events: auto; z-index: 20; overflow: auto; scrollbar-width: thin; } html.is-dish-boards:has(.benefits_nav.is-menu-rail.is-rail-solo) section.is-benefits .benefits_text, html.is-dish-boards:has(.benefits_nav.is-menu-rail.is-rail-solo) section.is-benefits.is-dish-active .benefits_text { right: auto !important; } html.is-dish-boards:has(.benefits_nav.is-menu-rail.is-rail-solo) section.is-benefits .dish-board-media { left: calc(var(--dish-card-w) + 4.5rem); right: max(2.5rem, 4vw); } html.is-dish-boards section.is-benefits .benefits_max-width { max-width: 100% !important; margin: 0 !important; gap: 0.65rem; height: auto; align-items: center !important; justify-content: flex-start; text-align: center !important; } html.is-dish-boards section.is-benefits .benefits_text .subhead_wrapper { justify-content: center !important; } html.is-dish-boards section.is-benefits .benefits_text h2, html.is-dish-boards section.is-benefits .benefits_text [data-menu-name] { font-size: clamp(1.45rem, 1.9vw, 1.9rem) !important; line-height: 1.3 !important; margin: 0.25rem auto 0.4rem !important; text-align: center !important; } html.is-dish-boards section.is-benefits .menu-cat-label { text-align: center; font-size: 0.74rem; margin-bottom: 0.5rem; } html.is-dish-boards section.is-benefits .subhead_text:has([data-menu-price]) { margin-inline: auto; } html.is-dish-boards section.is-benefits .benefits_text p[data-menu-desc] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; max-width: 34ch !important; font-size: 0.9rem !important; line-height: 1.55 !important; opacity: 0.76; margin: 0 auto 0.55rem !important; text-align: center !important; } html.is-dish-boards section.is-benefits .menu-add-wrap { width: 100%; max-width: none; margin-top: 0.35rem !important; } html.is-dish-boards section.is-benefits .menu-add-btn { width: 100%; min-height: 2.75rem; } } @media screen and (min-width: 1400px) { html.is-dish-boards { --dish-card-w: min(30rem, 30vw); --dish-rail-w: 9.7rem; } html.is-dish-boards section.is-benefits .dish-board-media img { width: min(100%, 52rem); height: min(100%, 52rem); } } /* Mobile desc clamp */ @media screen and (max-width: 991px) { html.is-dish-boards section.is-benefits .benefits_text p[data-menu-desc] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } } /* ---- Sitewide light: hero chrome titles / progress ---- */ html[data-theme='light'] .carousel_list.is-hero .heading-style-h2, html[data-theme='light'] .carousel_title-b, html[data-theme='light'] .westo-scroll-hint { color: var(--wg-ink, #1a1714) !important; } html[data-theme='light'] .scroll_discover { --base-color: #8a8176; --base-gradient-color: #1a1714; color: transparent !important; -webkit-text-fill-color: transparent !important; } html[data-theme='light'] .gamme_progress-bar, html[data-theme='light'] .progress_line { opacity: 0.95; } html[data-theme='light'] .navbar_menu-button, html[data-theme='light'] .navbar_table, html[data-theme='light'] .button.is-small { background: var(--wg-chrome-bg, #fffcf7) !important; color: var(--wg-btn-ink, #1a1714) !important; border: 1px solid var(--wg-chrome-border, rgba(26, 23, 20, 0.14)) !important; box-shadow: var( --wg-chrome-shadow, 0 1px 1px rgba(26, 23, 20, 0.04), 0 0.35rem 0.85rem rgba(26, 23, 20, 0.08) ) !important; } html[data-theme='light'] .navbar_table:hover, html[data-theme='light'] .navbar_menu-button:hover, html[data-theme='light'] .button.is-small:hover { background: var(--wg-chrome-bg-hover, #fff8ef) !important; border-color: var(--wg-chrome-border-hover, rgba(42, 122, 134, 0.45)) !important; } html[data-theme='light'] .benefits_nav.is-menu-rail .benefits_bullet, html[data-theme='light'] .benefits_nav.is-menu-rail .benefits_bullet-text, html[data-theme='light'] .benefits_nav.is-menu-rail figcaption { color: var(--wg-ink, #1a1714); opacity: 0.85; } html[data-theme='light'] .benefits_nav.is-menu-rail .benefits_rail-label, html[data-theme='light'].is-dish-boards .benefits_nav.is-menu-rail .benefits_rail-label { color: rgba(26, 23, 20, 0.78) !important; } html[data-theme='light'] .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active .benefits_rail-label, html[data-theme='light'] .benefits_nav.is-menu-rail .benefits_icon-wrapper.w--current .benefits_rail-label, html[data-theme='light'].is-dish-boards .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active .benefits_rail-label { color: rgba(26, 23, 20, 0.96) !important; } /* ---- Pass2 stage4/9: FAQ + newsletter light ---- */ html[data-theme='light'] .section.is-faq .faq_question .heading-style-h5, html[data-theme='light'] .section.is-faq .faq_answer, html[data-theme='light'] .section.is-faq p { color: rgba(26, 23, 20, 0.9) !important; } html[data-theme='light'] #newsletter .input { color: rgba(26, 23, 20, 0.92) !important; background: rgba(255, 255, 255, 0.85); border-color: rgba(26, 23, 20, 0.14); } html[data-theme='light'] #newsletter .button, html[data-theme='light'] #newsletter button { background: var(--wg-cta-bg, #1a1714) !important; color: var(--wg-cta-ink, #f7f2ea) !important; } /* ---- Pass3 stage4: dish/hero chrome residual ---- */ html[data-theme='light'] .westo-back-categories { background: var(--wg-chrome-bg, #fffcf7) !important; color: var(--wg-btn-ink, #1a1714) !important; border: 1px solid var(--wg-chrome-border, rgba(26, 23, 20, 0.14)) !important; box-shadow: var( --wg-chrome-shadow, 0 1px 1px rgba(26, 23, 20, 0.04), 0 0.35rem 0.85rem rgba(26, 23, 20, 0.08) ) !important; } html[data-theme='light'] .westo-back-categories:hover { background: var(--wg-chrome-bg-hover, #fff8ef) !important; border-color: var(--wg-chrome-border-hover, rgba(42, 122, 134, 0.45)) !important; } html[data-theme='light'] .westo-back-categories:focus-visible { outline: 2px solid var(--wg-focus-ring, rgba(42, 122, 134, 0.65)); outline-offset: 2px; } /* ---- Pass3 stage9: FAQ + newsletter residual ---- */ html[data-theme='light'] .section.is-faq .faq_question .heading-style-h5, html[data-theme='light'] .section.is-faq .heading-style-custom-2 { color: rgba(26, 23, 20, 0.94) !important; } html[data-theme='light'] .section.is-faq .faq_answer, html[data-theme='light'] .section.is-faq .faq_answer p, html[data-theme='light'] .section.is-faq .faq_answer *, html[data-theme='light'] .section.is-faq .faq_answer .text-size-medium { color: #263238 !important; line-height: 1.7 !important; } html[data-theme='light'] .legal_link-item { color: #263238 !important; font-weight: 600 !important; } html[data-theme='light'] .legal_link-item.w--current { color: #0c555c !important; font-weight: 800 !important; } html[data-theme='light'] .legal_link-item:hover { color: #0c555c !important; } html[data-theme='light'] #newsletter #sib-container, html[data-theme='light'] #newsletter .sib-form { background: transparent !important; color: rgba(26, 23, 20, 0.9) !important; } html[data-theme='light'] #newsletter .sib-form-block p, html[data-theme='light'] #newsletter .entry__label, html[data-theme='light'] #newsletter .entry__choice { color: rgba(26, 23, 20, 0.72) !important; } html[data-theme='light'] #newsletter .sib-form-block__button { background: var(--wg-cta-bg, #1a1714) !important; color: var(--wg-cta-ink, #f7f2ea) !important; border-color: transparent !important; } html[data-theme='light'] #newsletter .input { color: #1a1714 !important; background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(26, 23, 20, 0.16) !important; } html[data-theme='light'] #newsletter .input::placeholder { color: rgba(26, 23, 20, 0.4) !important; } /* ===== END css/fa-override.css ===== */ /* ===== BEGIN css/i18n-dir.css ===== */ /* Guest i18n layout: chrome stays LTR; text direction is lang-scoped. */ /* --- Stable chrome (never mirror with html.dir) --- */ .navbar, .navbar_content, .navbar_container, .navbar_sound-wrapper, .navbar_menu-wrapper, .westo-dish-catbar, .westo-dish-catbar__track { direction: ltr; } html.is-lang-fa .navbar_menu-inner, html.is-lang-ar .navbar_menu-inner { direction: rtl; } html.is-lang-en .navbar_menu, html.is-lang-en .navbar_menu-inner { direction: ltr; } /* Drawers / modals follow guest reading direction without flipping the page shell */ html.is-lang-en .table-drawer__panel, html.is-lang-en .qty-modal__card { direction: ltr; text-align: left; } html.is-lang-fa .table-drawer__panel, html.is-lang-ar .table-drawer__panel, html.is-lang-fa .qty-modal__card, html.is-lang-ar .qty-modal__card { direction: rtl; text-align: right; } /* Classic /menu: header chrome stays LTR like main navbar */ .classic-menu .cm-header__bar, .classic-menu .cm-header__actions, .classic-menu .cm-lang-chip { direction: ltr; } html.is-lang-en .classic-menu .cm-drawer__panel { direction: ltr; text-align: left; } html.is-lang-fa .classic-menu .cm-drawer__panel, html.is-lang-ar .classic-menu .cm-drawer__panel { direction: rtl; text-align: right; } /* Classic text islands */ html.is-lang-fa .classic-menu .cm-cats, html.is-lang-ar .classic-menu .cm-cats, html.is-lang-fa .classic-menu .cm-meta, html.is-lang-ar .classic-menu .cm-meta, html.is-lang-fa .classic-menu .cm-grid, html.is-lang-ar .classic-menu .cm-grid, html.is-lang-fa .classic-menu .cm-detail__card, html.is-lang-ar .classic-menu .cm-detail__card, html.is-lang-fa .classic-menu .cm-search-panel, html.is-lang-ar .classic-menu .cm-search-panel { direction: rtl; unicode-bidi: isolate; } html.is-lang-en .classic-menu .cm-cats, html.is-lang-en .classic-menu .cm-meta, html.is-lang-en .classic-menu .cm-grid, html.is-lang-en .classic-menu .cm-detail__card, html.is-lang-en .classic-menu .cm-search-panel { direction: ltr; unicode-bidi: isolate; } /* Arabic uses the same text-direction islands as Persian */ html[lang='ar'] p, html[lang='ar'] li, html[lang='ar'] .w-richtext, html[lang='ar'] blockquote, html[lang='ar'] h1, html[lang='ar'] h2, html[lang='ar'] h3, html[lang='ar'] h4, html[lang='ar'] h5, html[lang='ar'] h6, html[lang='ar'] [class*='heading-style'], html[lang='ar'] [class*='text-size'], html[lang='ar'] [class*='text-style'], html[lang='ar'] .faq_question, html[lang='ar'] .w-dyn-item, html[lang='ar'] .benefits_text, html[lang='ar'] .menu-cat-label, html[lang='ar'] .entrance-gate, html[lang='ar'] .navbar_menu-inner { direction: rtl; unicode-bidi: isolate; } html[lang='ar'] h1, html[lang='ar'] h2, html[lang='ar'] h3 { font-style: normal; } html[lang='ar'] body, html[lang='ar'] .classic-menu { font-family: 'Vazirmatn', 'Geist', system-ui, sans-serif; } /* English text islands stay LTR even if a parent had rtl leftovers */ html.is-lang-en .benefits_text, html.is-lang-en .menu-cat-label, html.is-lang-en .benefits_nav.is-menu-rail .benefits_rail-label, html.is-lang-en .entrance-gate { direction: ltr; unicode-bidi: isolate; } /* Gate chrome: physical LTR top bar regardless of text lang */ .entrance-gate .eg-shell, .entrance-gate .eg-top { direction: ltr; } html.is-lang-fa .entrance-gate .eg-brand, html.is-lang-ar .entrance-gate .eg-brand, html.is-lang-fa .entrance-gate .eg-sheet, html.is-lang-ar .entrance-gate .eg-sheet { direction: rtl; } html.is-lang-en .entrance-gate .eg-brand, html.is-lang-en .entrance-gate .eg-sheet { direction: ltr; } /* ===== END css/i18n-dir.css ===== */ /* ===== BEGIN css/entrance-gate.css ===== */ /* WESTO Immersive Entrance — brand cream / charcoal / cyan (both themes) */ .loader.entrance-gate { /* Brand accent (cyan) — same family as sitewide --wg-accent */ --eg-accent: #78d0d8; --eg-accent-deep: #50c0d0; --eg-accent-soft: rgba(120, 208, 216, 0.16); --eg-accent-glow: rgba(120, 208, 216, 0.32); /* Legacy aliases (progress / steps still reference these names) */ --eg-tiffany: var(--eg-accent); --eg-tiffany-deep: var(--eg-accent-deep); --eg-ink: #f4efe6; --eg-muted: rgba(244, 239, 230, 0.62); --eg-bg: #0c0b0a; --eg-charcoal: #161310; --eg-glass: rgba(255, 255, 255, 0.07); --eg-glass-edge: linear-gradient( 135deg, rgba(255, 255, 255, 0.38) 0%, rgba(120, 208, 216, 0.22) 42%, rgba(255, 255, 255, 0.06) 100% ); --eg-open: #8fd49a; --eg-closed: #e08a78; --eg-loading: var(--eg-accent); --eg-cta-bg: #f4efe6; --eg-cta-ink: #1a1714; --eg-cta-glow: rgba(244, 239, 230, 0.16); --eg-chrome-bg: rgba(22, 19, 16, 0.62); --eg-chrome-border: rgba(255, 255, 255, 0.14); --eg-safe-t: env(safe-area-inset-top, 0px); --eg-safe-b: env(safe-area-inset-bottom, 0px); --eg-pad-x: 1.1rem; --eg-r-btn: 0.85rem; --eg-r-card: 1.55rem; --eg-r-chip: 999px; --eg-blur: 16px; z-index: 100000 !important; position: fixed !important; inset: 0 !important; display: flex !important; flex-flow: column nowrap !important; width: 100% !important; height: 100% !important; min-height: 100svh !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: var(--eg-bg) !important; color: var(--eg-ink); font-family: 'Vazirmatn', 'Geist', system-ui, sans-serif; cursor: auto; user-select: text; -webkit-user-select: text; gap: 0 !important; isolation: isolate; transition: background 0.4s ease, color 0.35s ease; } .loader.entrance-gate[hidden] { display: none !important; pointer-events: none !important; visibility: hidden !important; } /* —— Ambient —— */ .entrance-gate .eg-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .entrance-gate .eg-ambient__base { position: absolute; inset: 0; background: linear-gradient(180deg, #161310 0%, #0c0b0a 100%); } .entrance-gate .eg-ambient__photo { position: absolute; inset: 0; display: block; margin: 0; } .entrance-gate .eg-ambient__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.88) brightness(0.68) sepia(0.12); transform: scale(1.04); transition: filter 0.45s ease; } .entrance-gate .eg-ambient__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 11, 10, 0.58) 0%, rgba(12, 11, 10, 0.32) 40%, rgba(12, 11, 10, 0.78) 100%), radial-gradient(ellipse 70% 55% at 50% 42%, rgba(22, 19, 16, 0.12), rgba(12, 11, 10, 0.72) 72%); } .entrance-gate .eg-ambient__wash { position: absolute; inset: 0; background: radial-gradient( circle at center, var(--eg-accent-soft), transparent 46% ); } /* —— Cup plate (bottom-left physical) —— */ .entrance-gate .eg-cup-stage { position: absolute; z-index: 1; left: max(0.25rem, env(safe-area-inset-left, 0px)); bottom: max(0.15rem, env(safe-area-inset-bottom, 0px)); width: min(42vw, 22rem); pointer-events: none; user-select: none; } .entrance-gate .eg-cup-pic { display: block; width: 100%; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55)); } .entrance-gate .eg-cup-pic img { width: 100%; height: auto; display: block; mix-blend-mode: lighten; } .entrance-gate .eg-cup-steam { position: absolute; left: 38%; top: 8%; width: 3.2rem; height: 4.5rem; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; } .entrance-gate.is-steam-on .eg-cup-steam { opacity: 0.85; } .entrance-gate .eg-cup-steam .eg-steam__wisp { left: 50%; } .entrance-gate .eg-ambient__rays { position: absolute; inset: -20%; background: conic-gradient( from 210deg at 50% 42%, transparent 0deg, color-mix(in srgb, var(--eg-accent) 12%, transparent) 28deg, transparent 56deg, color-mix(in srgb, var(--eg-accent) 8%, transparent) 120deg, transparent 160deg ); opacity: 0.7; animation: eg-rays-drift 28s linear infinite; } .entrance-gate .eg-steam__wisp { position: absolute; bottom: 0; width: 0.55rem; height: 1.6rem; border-radius: 999px; background: linear-gradient( 180deg, rgba(245, 245, 245, 0) 0%, var(--eg-accent-glow) 40%, rgba(245, 245, 245, 0.35) 100% ); /* Soft edge via gradient only — animated filter:blur is a thermal hog */ opacity: 0; animation: eg-steam 5.2s ease-in-out infinite; } .entrance-gate .eg-ambient__fog { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 100%, color-mix(in srgb, var(--eg-bg) 92%, transparent), transparent 60%), radial-gradient(ellipse 60% 40% at 20% 20%, color-mix(in srgb, var(--eg-accent) 14%, transparent), transparent 50%); opacity: 0.85; } .entrance-gate .eg-ambient__noise { position: absolute; inset: 0; opacity: 0.12; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } .entrance-gate .eg-ambient__particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; } @keyframes eg-rays-drift { to { transform: rotate(360deg); } } /* —— Shell —— */ .entrance-gate .eg-shell { position: relative; z-index: 2; display: grid !important; /* Rows are hard-bounded so the card can never grow under the dock. */ grid-template-rows: auto minmax(0, 1fr) auto; width: 100% !important; max-width: 100%; height: 100% !important; min-height: 100svh !important; margin: 0 auto; padding: calc(0.9rem + var(--eg-safe-t)) var(--eg-pad-x) calc(0.9rem + var(--eg-safe-b)); box-sizing: border-box; direction: rtl; gap: clamp(0.7rem, 1.8vh, 1.15rem); perspective: 1200px; } .entrance-gate .eg-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* —— Top nav —— */ .entrance-gate .eg-top { display: flex; align-items: center; justify-content: space-between; width: 100%; direction: ltr; z-index: 5; } .entrance-gate .eg-glass-btn { appearance: none; position: relative; overflow: hidden; min-height: 2.6rem; padding: 0; margin: 0; border: 0; border-radius: var(--eg-r-btn); background: rgba(255, 255, 255, 0.06) !important; color: var(--eg-ink); display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; cursor: pointer; text-decoration: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease; } .entrance-gate .eg-glass-pill { width: auto; padding: 0 0.85rem 0 0.7rem; border-radius: 999px; } .entrance-gate .eg-glass-pill__label { position: relative; z-index: 1; font-size: 0.78rem; font-weight: 600; white-space: nowrap; } .entrance-gate #eg-site-menu.westo-menu-trigger { padding: 0 0.78rem 0 0.65rem; border-radius: 999px; } .entrance-gate #eg-site-menu .westo-menu-trigger__icon { width: 0.72rem; height: 0.72rem; display: grid; place-items: center; flex: 0 0 auto; position: relative; z-index: 1; } .entrance-gate #eg-site-menu .westo-menu-trigger__icon svg { width: 100%; height: 100%; display: block; } .entrance-gate #eg-site-menu .westo-menu-trigger__label { position: relative; z-index: 1; font-size: 0.78rem; font-weight: 600; line-height: 1; } .entrance-gate .eg-glass-btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--eg-glass-edge); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .entrance-gate .eg-glass-btn:hover, .entrance-gate .eg-glass-btn:focus-visible, .entrance-gate .eg-glass-btn.is-active { background: var(--eg-accent-soft) !important; outline: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 24px var(--eg-accent-glow); } .entrance-gate .eg-glass-btn svg { width: 1.15rem; height: 1.15rem; position: relative; z-index: 1; } /* —— Mid / glass card —— */ .entrance-gate .eg-mid { display: grid; place-items: center; min-height: 0; width: 100%; } .entrance-gate .eg-card { position: relative; width: min(100%, 32.5rem); /* Bound to the grid row — the dock owns its own band, never overlapped. */ max-height: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(1.15rem, 2.6vh, 1.9rem) clamp(1.15rem, 3.2vw, 1.75rem) clamp(1rem, 2.2vh, 1.5rem); border-radius: var(--eg-r-card); border: 1px solid rgba(255, 255, 255, 0.15); background: linear-gradient( 168deg, rgba(255, 255, 255, 0.05) 0%, transparent 42%, color-mix(in srgb, var(--eg-accent) 5%, transparent) 100% ), var(--eg-glass); -webkit-backdrop-filter: blur(var(--eg-blur)) saturate(1.2); backdrop-filter: blur(var(--eg-blur)) saturate(1.2); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px color-mix(in srgb, var(--eg-accent) 6%, transparent), inset 0 0 48px color-mix(in srgb, var(--eg-accent) 10%, transparent); transform-style: preserve-3d; } /* Hairline cyan seam along the top edge — reads as machined, not sprayed. */ .entrance-gate .eg-card::before { content: ''; position: absolute; inset-inline: 18%; top: 0; height: 1px; pointer-events: none; background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--eg-accent) 70%, transparent), transparent ); opacity: 0.75; } .entrance-gate .eg-card__glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( ellipse 70% 45% at 50% 0%, var(--eg-accent-soft), transparent 55% ), radial-gradient( ellipse 55% 30% at 50% 100%, color-mix(in srgb, var(--eg-accent) 7%, transparent), transparent 60% ); } .entrance-gate .eg-card__reflect { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.35; background: linear-gradient( 115deg, transparent 30%, color-mix(in srgb, var(--eg-accent) 16%, transparent) 48%, transparent 62% ); background-size: 220% 220%; animation: eg-reflect 7s ease-in-out infinite; } @keyframes eg-reflect { 0%, 100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } } /* —— Logo + steam —— */ .entrance-gate .eg-logo-stage { position: relative; z-index: 1; width: clamp(5.5rem, 22vw, 7.25rem); aspect-ratio: 536 / 734; margin: 0.2rem auto 0.2rem; } .entrance-gate .eg-logo-png { position: relative; display: block; width: 100%; height: auto; margin: 0 auto; object-fit: contain; opacity: 0; /* New geometric mark already sits on black — soft lift only */ filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35)); border-radius: 0.35rem; } /* Steam was designed for the old cup mark — hide on the geometric brand. */ .entrance-gate .eg-steam { display: none !important; } .entrance-gate .eg-steam__wisp { position: absolute; bottom: 0; width: 0.55rem; height: 1.6rem; border-radius: 999px; background: linear-gradient( 180deg, rgba(245, 245, 245, 0) 0%, var(--eg-accent-glow) 40%, rgba(245, 245, 245, 0.35) 100% ); filter: none; opacity: 0; animation: eg-steam 5.2s ease-in-out infinite; } .entrance-gate .eg-steam__wisp--1 { left: 0.2rem; animation-delay: 0s; } .entrance-gate .eg-steam__wisp--2 { left: 0.9rem; height: 1.9rem; animation-delay: 0.7s; } .entrance-gate .eg-steam__wisp--3 { left: 1.55rem; animation-delay: 1.4s; } .entrance-gate.is-steam-on .eg-steam { opacity: 1; } @keyframes eg-steam { 0% { transform: translateY(8px) scaleX(0.8); opacity: 0; } 25% { opacity: 0.55; } 70% { opacity: 0.2; } 100% { transform: translateY(-22px) scaleX(1.15); opacity: 0; } } /* —— Brand copy —— */ .entrance-gate .eg-brand-copy { position: relative; z-index: 1; margin-top: 0.35rem; } .entrance-gate .eg-brand-title { margin: 0.15rem auto 0; width: auto; max-width: 100%; font-family: 'Geist', 'Franklin Gothic Atf', system-ui, sans-serif; font-size: clamp(2.15rem, 7.2vw, 2.85rem); font-weight: 700; line-height: 1; letter-spacing: 0.14em; text-indent: 0.14em; /* optical center with tracking */ text-transform: uppercase; color: var(--eg-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); } .entrance-gate .eg-brand-wordmark-img { display: block; width: min(17rem, 72vw); height: auto; margin: 0 auto; object-fit: contain; } .entrance-gate .eg-tagline { margin: 0.75rem 0 0; max-width: 18rem; margin-inline: auto; font-size: 0.92rem; font-weight: 450; line-height: 1.65; color: var(--eg-muted); } .entrance-gate .eg-subtitle { margin: 0.35rem 0 0; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--eg-muted); direction: ltr; } /* —— Status —— */ .entrance-gate .eg-status { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.1rem; margin-top: clamp(0.7rem, 1.6vh, 1.05rem); padding: 0.34rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); direction: rtl; max-width: 100%; } /* One line, separated by hairline dividers — no cramped stacking. */ .entrance-gate .eg-status-text { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.42rem; line-height: 1.3; min-width: 0; } .entrance-gate .eg-status-meta, .entrance-gate .eg-status-loc { position: relative; font-size: 0.7rem; font-weight: 500; color: var(--eg-muted); padding-inline-start: 0.42rem; white-space: nowrap; } .entrance-gate .eg-status-meta:empty, .entrance-gate .eg-status-loc:empty { display: none; } .entrance-gate .eg-status-meta:not(:empty)::before, .entrance-gate .eg-status-loc:not(:empty)::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; width: 1px; height: 0.62em; transform: translateY(-50%); background: currentColor; opacity: 0.32; } .entrance-gate .eg-status-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--eg-loading); box-shadow: 0 0 10px var(--eg-loading); flex: 0 0 auto; } .entrance-gate .eg-status.is-open .eg-status-dot { background: var(--eg-open); box-shadow: 0 0 10px var(--eg-open); } .entrance-gate .eg-status.is-closed .eg-status-dot { background: var(--eg-closed); box-shadow: 0 0 10px var(--eg-closed); } .entrance-gate .eg-status.is-loading .eg-status-dot { background: var(--eg-loading); animation: eg-pulse 1.4s ease-in-out infinite; } @keyframes eg-pulse { 50% { opacity: 0.45; transform: scale(0.85); } } /* —— Dock / chip buttons —— */ .entrance-gate .eg-dock__btn, .entrance-gate .eg-chip-icon { appearance: none; position: relative; overflow: hidden; width: auto; min-width: 3.6rem; height: auto; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.22rem; padding: 0.4rem 0.45rem 0.35rem; border-radius: 1rem; border: 1px solid transparent; background: transparent; color: var(--eg-ink); text-decoration: none; cursor: pointer; transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease; } .entrance-gate .eg-dock__btn svg, .entrance-gate .eg-chip-icon svg { width: 1.2rem; height: 1.2rem; position: relative; z-index: 1; } .entrance-gate .eg-dock__label { position: relative; z-index: 1; font-size: 0.58rem; font-weight: 600; line-height: 1.15; white-space: nowrap; color: var(--eg-muted); } .entrance-gate .eg-dock__btn:hover, .entrance-gate .eg-dock__btn:focus-visible, .entrance-gate .eg-chip-icon:hover, .entrance-gate .eg-chip-icon:focus-visible, .entrance-gate .eg-chip-icon.is-active { transform: translateY(-1px); background: var(--eg-accent-soft); border-color: color-mix(in srgb, var(--eg-accent) 55%, transparent); box-shadow: 0 0 18px var(--eg-accent-glow); outline: none; color: #fff; } .entrance-gate .eg-dock__btn:hover .eg-dock__label, .entrance-gate .eg-dock__btn:focus-visible .eg-dock__label { color: rgba(245, 245, 245, 0.92); } /* —— Experience loader —— */ .entrance-gate .eg-experience { position: relative; z-index: 1; width: 100%; margin-top: clamp(0.7rem, 1.8vh, 1.1rem); text-align: center; /* Shrink-to-fit: stretching this block is what created the empty bands. */ flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(0.55rem, 1.5vh, 0.9rem); overflow: visible; } .entrance-gate .eg-experience__lead { margin: 0; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--eg-muted); text-align: center; } .entrance-gate .eg-steps-row { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(0.8rem, 3vw, 1.35rem); margin: 0 auto; padding-inline: 0.35rem; } /* Rail behind the icons — turns four loose dots into one measured sequence. */ .entrance-gate .eg-steps-row::before { content: ''; position: absolute; top: 50%; inset-inline: 1.55rem; height: 1px; transform: translateY(-50%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.16) 12%, rgba(255, 255, 255, 0.16) 88%, transparent ); pointer-events: none; } .entrance-gate .eg-step-icon { position: relative; z-index: 1; width: 2.5rem; height: 2.5rem; border-radius: 999px; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, 0.16); color: var(--eg-muted); background: color-mix(in srgb, var(--eg-bg) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, transform 0.35s ease; } .entrance-gate .eg-step-icon svg { width: 1.15rem; height: 1.15rem; } .entrance-gate .eg-step-icon.is-active { color: var(--eg-accent); border-color: color-mix(in srgb, var(--eg-accent) 75%, transparent); background: var(--eg-accent-soft); box-shadow: 0 0 22px var(--eg-accent-glow); transform: scale(1.06); } .entrance-gate .eg-step-icon.is-done { color: var(--eg-accent); border-color: color-mix(in srgb, var(--eg-accent) 55%, transparent); background: var(--eg-accent-soft); box-shadow: 0 0 14px var(--eg-accent-glow); opacity: 0.95; } .entrance-gate .eg-quote { margin: 0; font-size: 0.72rem; font-style: italic; letter-spacing: 0.03em; color: var(--eg-muted); text-align: center; } .entrance-gate .eg-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.7rem; margin: 0; } .entrance-gate .eg-progress__track { position: relative; height: 0.28rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; } .entrance-gate .eg-progress__fill { height: 100%; width: 0%; border-radius: inherit; background: linear-gradient( 90deg, var(--eg-accent-deep), var(--eg-accent) 65%, color-mix(in srgb, var(--eg-accent) 55%, #fff) ); box-shadow: 0 0 12px var(--eg-accent-glow); will-change: width; } .entrance-gate .eg-progress__pct { font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--eg-accent); direction: ltr; min-width: 2.6rem; text-align: end; } /* —— CTA —— */ .entrance-gate .eg-cta-wrap { position: relative; z-index: 1; width: 100%; margin-top: auto; padding-top: clamp(1.15rem, 2.8vh, 1.7rem); flex-shrink: 0; } /* Hairline rule above the action zone — separates identity from intent. */ .entrance-gate .eg-cta-wrap::before { content: ''; position: absolute; inset-inline: 8%; top: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.14), transparent ); pointer-events: none; } .entrance-gate .eg-cta { appearance: none; display: flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; height: 3.1rem; min-height: 3.1rem; padding: 0 1.4rem; border: 1px solid transparent; border-radius: 999px; background: var(--eg-cta-bg); color: var(--eg-cta-ink); font: inherit; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 0.55rem 1.4rem var(--eg-cta-glow), 0 0 0 1px color-mix(in srgb, var(--eg-accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease, background 0.22s ease, border-color 0.22s ease; } .entrance-gate .eg-cta-arrow { flex: 0 0 auto; opacity: 0.75; transition: transform 0.24s ease, opacity 0.24s ease; } .entrance-gate .eg-cta:not(:disabled):hover .eg-cta-arrow, .entrance-gate .eg-cta:not(:disabled):focus-visible .eg-cta-arrow { opacity: 1; } html[dir='rtl'] .entrance-gate .eg-cta-arrow { transform: scaleX(-1); } /* Nudge the arrow along the reading direction on hover. */ .entrance-gate .eg-cta:not(:disabled):hover .eg-cta-arrow, .entrance-gate .eg-cta:not(:disabled):focus-visible .eg-cta-arrow { transform: translateX(3px); } html[dir='rtl'] .entrance-gate .eg-cta:not(:disabled):hover .eg-cta-arrow, html[dir='rtl'] .entrance-gate .eg-cta:not(:disabled):focus-visible .eg-cta-arrow { transform: scaleX(-1) translateX(3px); } .entrance-gate .eg-cta:disabled { cursor: wait; opacity: 0.62; box-shadow: 0 0.35rem 1rem var(--eg-cta-glow); } .entrance-gate .eg-cta:not(:disabled):hover, .entrance-gate .eg-cta:not(:disabled):focus-visible { transform: translateY(-2px) scale(1.01); border-color: color-mix(in srgb, var(--eg-accent) 55%, transparent); box-shadow: 0 0.85rem 2rem var(--eg-cta-glow), 0 0 0 1px color-mix(in srgb, var(--eg-accent) 35%, transparent); outline: none; } .entrance-gate .eg-cta-label { position: relative; z-index: 1; } /* —— Bottom dock + corners —— */ .entrance-gate .eg-foot { position: relative; z-index: 5; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 0.55rem; width: 100%; direction: ltr; } .entrance-gate .eg-dock { display: flex; align-items: stretch; justify-content: center; gap: 0.15rem; justify-self: center; padding: 0.35rem 0.45rem; border-radius: 999px; border: 1px solid var(--eg-chrome-border); background: var(--eg-chrome-bg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); } .entrance-gate .eg-corner { appearance: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.35rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--eg-chrome-border); background: var(--eg-chrome-bg); color: var(--eg-ink); font: inherit; cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .entrance-gate .eg-corner__label { font-size: 0.68rem; font-weight: 600; white-space: nowrap; } .entrance-gate .eg-theme-toggle .eg-theme-icon--sun { display: none; } html[data-theme='light'] .entrance-gate .eg-theme-toggle .eg-theme-icon--moon { display: none; } html[data-theme='light'] .entrance-gate .eg-theme-toggle .eg-theme-icon--sun { display: block; } .entrance-gate .eg-lang-switch { gap: 0.28rem; padding-inline: 0.55rem; } .entrance-gate .eg-lang-seg { appearance: none; border: 0; background: transparent; color: var(--eg-muted); font: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.15rem 0.1rem; cursor: pointer; } .entrance-gate .eg-lang-seg.is-active { color: var(--eg-ink); } .entrance-gate .eg-lang-sep { color: var(--eg-muted); font-size: 0.72rem; } html[dir='ltr'] .entrance-gate .eg-shell { direction: ltr; } html[dir='ltr'] .entrance-gate .eg-status { direction: ltr; } html[dir='ltr'] .entrance-gate .eg-status-text { align-items: flex-start; } /* —— Sheet (preserved contracts) —— */ .entrance-gate .eg-sheet { position: absolute; inset: auto 0 0 0; z-index: 8; max-height: min(78svh, 36rem); display: flex; flex-direction: column; border-radius: 1.25rem 1.25rem 0 0; background: rgba(7, 16, 16, 0.96); border: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 0; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5); padding: 0.85rem 1.1rem calc(1rem + var(--eg-safe-b)); transform: translateY(110%); visibility: hidden; pointer-events: none; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s; direction: rtl; } .entrance-gate.is-sheet-open .eg-sheet { transform: translateY(0); visibility: visible; pointer-events: auto; } .entrance-gate .eg-sheet-handle { width: 2.5rem; height: 0.28rem; margin: 0 auto 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.22); } .entrance-gate .eg-sheet-title { margin: 0 0 0.85rem; text-align: center; font-size: 1rem; font-weight: 700; } .entrance-gate .eg-site-nav { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.85rem; } .entrance-gate .eg-site-nav[hidden] { display: none !important; } .entrance-gate .eg-nav-link { appearance: none; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 2.85rem; padding: 0.7rem 0.95rem; border-radius: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: #fff; font: inherit; font-size: 0.92rem; text-decoration: none; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .entrance-gate .eg-nav-link:hover, .entrance-gate .eg-nav-link:focus-visible { background: var(--eg-accent-soft); border-color: color-mix(in srgb, var(--eg-accent) 58%, transparent); outline: none; } .entrance-gate .eg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-bottom: 0.75rem; } .entrance-gate .eg-tabs[hidden] { display: none !important; } .entrance-gate .eg-tab { appearance: none; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--eg-muted); font: inherit; font-size: 0.75rem; padding: 0.45rem 0.3rem; cursor: pointer; } .entrance-gate .eg-tab.is-active { color: #fff; border-color: color-mix(in srgb, var(--eg-accent) 65%, transparent); background: var(--eg-accent-soft); } .entrance-gate .eg-panel { display: none; overflow: auto; min-height: 0; flex: 1 1 auto; } .entrance-gate .eg-panel.is-active { display: block; } .entrance-gate .eg-panel[hidden] { display: none !important; } .entrance-gate .eg-hours { list-style: none; margin: 0; padding: 0; } .entrance-gate .eg-hours li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.88rem; } .entrance-gate .eg-hours li.is-today { color: var(--eg-accent); } .entrance-gate .eg-hours-day { font-weight: 600; } .entrance-gate .eg-hours-time { color: var(--eg-muted); direction: ltr; font-variant-numeric: tabular-nums; } .entrance-gate .eg-about, .entrance-gate .eg-contact { margin: 0; font-size: 0.92rem; line-height: 1.75; color: var(--eg-muted); } .entrance-gate .eg-contact a { color: #fff; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--eg-accent) 62%, transparent); } .entrance-gate .eg-contact p { margin: 0 0 0.85rem; } .entrance-gate .eg-scrim { position: absolute; inset: 0; z-index: 7; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0.35s; } .entrance-gate.is-sheet-open .eg-scrim { opacity: 1; visibility: visible; pointer-events: auto; } .entrance-gate .loader_percent { display: none !important; } /* —— Responsive —— */ @media (min-width: 768px) { .loader.entrance-gate { --eg-pad-x: 1.5rem; } .entrance-gate .eg-shell { width: 100% !important; } .entrance-gate .eg-top { width: min(40rem, 100%); margin-inline: auto; } .entrance-gate .eg-card { width: 32.5rem; /* Hug the content; the row only caps it. Stretching left dead bands inside. */ height: auto; max-height: 100%; overflow: hidden; } .entrance-gate .eg-glass-pill__label { display: inline; } .entrance-gate .eg-sheet { left: 50%; right: auto; width: min(28rem, 100%); transform: translate(-50%, 110%); } .entrance-gate.is-sheet-open .eg-sheet { transform: translate(-50%, 0); } } @media (max-width: 767px) { .loader.entrance-gate { --eg-blur: 16px; } .entrance-gate .eg-glass-pill__label { display: none; } .entrance-gate .eg-glass-pill { width: 2.6rem; padding: 0; justify-content: center; } .entrance-gate .eg-card { width: 90vw; max-height: 100%; } .entrance-gate .eg-ambient__rays { animation: none; opacity: 0.4; } .entrance-gate .eg-brand-title { font-size: clamp(1.85rem, 8.5vw, 2.35rem); letter-spacing: 0.12em; text-indent: 0.12em; } .entrance-gate .eg-cup-stage { width: min(48vw, 11rem); opacity: 0.9; } .entrance-gate .eg-corner__label { display: none; } .entrance-gate .eg-dock__label { font-size: 0.52rem; } .entrance-gate .eg-step-icon { width: 2.35rem; height: 2.35rem; } .entrance-gate .eg-foot { gap: 0.35rem; } } @media (prefers-reduced-motion: reduce) { .entrance-gate .eg-ambient__rays, .entrance-gate .eg-card__reflect, .entrance-gate .eg-steam__wisp, .entrance-gate .eg-status.is-loading .eg-status-dot { animation: none !important; } } /* Kill continuous CSS FX once entrance hands off to the scene */ .entrance-gate.is-fx-off .eg-ambient__rays, .entrance-gate.is-fx-off .eg-card__reflect, .entrance-gate.is-fx-off .eg-steam__wisp, .entrance-gate.is-fx-off .eg-status-dot, .entrance-gate[hidden] .eg-ambient__rays, .entrance-gate[hidden] .eg-card__reflect, .entrance-gate[hidden] .eg-steam__wisp { animation: none !important; } .entrance-gate.is-fx-off .eg-ambient__particles, .entrance-gate[hidden] .eg-ambient__particles { display: none !important; } /* ─── Light theme — cream paper + charcoal ink + cyan accent ─── */ html[data-theme='light'] .loader.entrance-gate, html[data-theme='light'] .entrance-gate { --eg-bg: #ebe4d6; --eg-bg-deep: #e3d9c8; --eg-ink: #1a1714; --eg-muted: rgba(26, 23, 20, 0.62); --eg-faint: rgba(26, 23, 20, 0.42); --eg-accent: #2a7a86; --eg-accent-deep: #1f636e; --eg-accent-soft: rgba(42, 122, 134, 0.14); --eg-accent-glow: rgba(42, 122, 134, 0.22); --eg-line: rgba(26, 23, 20, 0.12); --eg-line-strong: rgba(26, 23, 20, 0.2); --eg-glass: rgba(253, 251, 247, 0.72); --eg-glass-strong: rgba(253, 251, 247, 0.9); --eg-glass-edge: rgba(255, 255, 255, 0.85); --eg-shadow: 0 18px 48px rgba(26, 23, 20, 0.1), 0 4px 14px rgba(26, 23, 20, 0.06); --eg-shadow-soft: 0 10px 28px rgba(26, 23, 20, 0.08); --eg-cta-bg: #1a1714; --eg-cta-ink: #f4efe6; --eg-cta-hover: #2a241e; --eg-paper: #fdfbf7; --eg-paper-raised: #fffcf7; --eg-chrome: rgba(253, 251, 247, 0.78); color: var(--eg-ink); background: radial-gradient(ellipse 90% 55% at 50% -8%, rgba(42, 122, 134, 0.1), transparent 55%), radial-gradient(ellipse 70% 45% at 100% 100%, rgba(42, 122, 134, 0.06), transparent 50%), linear-gradient(165deg, #f3ede2 0%, var(--eg-bg) 42%, var(--eg-bg-deep) 100%); } html[data-theme='light'] .entrance-gate .eg-ambient__photo { opacity: 0.5; mix-blend-mode: multiply; } /* The base img carries a darkening filter for the dark theme — re-light it here instead of stacking a second filter on the . */ html[data-theme='light'] .entrance-gate .eg-ambient__photo img { filter: saturate(0.7) brightness(1.32) contrast(0.88) sepia(0.14); } /* Without this the dark base bled through the multiply layers and turned the whole light gate into flat grey. */ html[data-theme='light'] .entrance-gate .eg-ambient__base { background: linear-gradient( 180deg, #f6f1e7 0%, var(--eg-bg) 52%, var(--eg-bg-deep) 100% ); } html[data-theme='light'] .entrance-gate .eg-ambient__veil { background: linear-gradient( 180deg, color-mix(in srgb, var(--eg-bg) 26%, transparent) 0%, color-mix(in srgb, var(--eg-bg) 44%, transparent) 48%, color-mix(in srgb, var(--eg-bg-deep) 68%, transparent) 100% ), radial-gradient( ellipse 70% 50% at 50% 32%, transparent 25%, color-mix(in srgb, var(--eg-bg) 22%, transparent) 100% ); } html[data-theme='light'] .entrance-gate .eg-ambient__fog { background: radial-gradient(ellipse 80% 50% at 50% 100%, color-mix(in srgb, var(--eg-bg-deep) 55%, transparent), transparent 62%), radial-gradient(ellipse 60% 40% at 20% 20%, color-mix(in srgb, var(--eg-accent) 12%, transparent), transparent 50%); opacity: 0.5; } html[data-theme='light'] .entrance-gate .eg-ambient__noise { opacity: 0.18; mix-blend-mode: multiply; } html[data-theme='light'] .entrance-gate .eg-shell { color: var(--eg-ink); } html[data-theme='light'] .entrance-gate .eg-brand__mark { color: var(--eg-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); } html[data-theme='light'] .entrance-gate .eg-brand__tag { color: var(--eg-muted); border-color: var(--eg-line); background: color-mix(in srgb, var(--eg-paper) 55%, transparent); } html[data-theme='light'] .entrance-gate .eg-hours { background: var(--eg-chrome); border-color: var(--eg-line); box-shadow: var(--eg-shadow-soft); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); } html[data-theme='light'] .entrance-gate .eg-hours__badge { background: var(--eg-accent-soft); border-color: color-mix(in srgb, var(--eg-accent) 35%, transparent); color: var(--eg-accent-deep); } html[data-theme='light'] .entrance-gate .eg-hours.is-open .eg-hours__badge { background: color-mix(in srgb, #2d6a4f 12%, transparent); border-color: color-mix(in srgb, #2d6a4f 35%, transparent); color: #1b4332; } html[data-theme='light'] .entrance-gate .eg-hours.is-closed .eg-hours__badge { background: color-mix(in srgb, #9b2c2c 10%, transparent); border-color: color-mix(in srgb, #9b2c2c 30%, transparent); color: #7f1d1d; } html[data-theme='light'] .entrance-gate .eg-card { background: linear-gradient(165deg, var(--eg-paper-raised) 0%, var(--eg-paper) 55%, color-mix(in srgb, var(--eg-bg) 40%, var(--eg-paper)) 100%); border-color: var(--eg-line-strong); box-shadow: var(--eg-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(255, 255, 255, 0.35); } html[data-theme='light'] .entrance-gate .eg-card__reflect { opacity: 0.35; background: linear-gradient( 115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 62% ); } html[data-theme='light'] .entrance-gate .eg-cup-stage { filter: drop-shadow(0 14px 28px rgba(26, 23, 20, 0.12)); } html[data-theme='light'] .entrance-gate .eg-quote { color: var(--eg-muted); border-color: var(--eg-line); } html[data-theme='light'] .entrance-gate .eg-status { color: var(--eg-ink); background: color-mix(in srgb, var(--eg-paper) 82%, transparent); border-color: var(--eg-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } html[data-theme='light'] .entrance-gate .eg-status-meta, html[data-theme='light'] .entrance-gate .eg-status-loc { color: var(--eg-muted); } html[data-theme='light'] .entrance-gate .eg-status-dot { background: var(--eg-accent); box-shadow: 0 0 0 3px var(--eg-accent-soft); } html[data-theme='light'] .entrance-gate .eg-progress__track { background: color-mix(in srgb, var(--eg-ink) 8%, transparent); border-color: var(--eg-line); } html[data-theme='light'] .entrance-gate .eg-progress__fill { background: linear-gradient(90deg, var(--eg-accent-deep), var(--eg-accent)); box-shadow: 0 0 12px var(--eg-accent-glow); } html[data-theme='light'] .entrance-gate .eg-progress__pct { color: var(--eg-accent-deep); } html[data-theme='light'] .entrance-gate .eg-steps-row::before { background: linear-gradient( 90deg, transparent, var(--eg-line-strong) 12%, var(--eg-line-strong) 88%, transparent ); } html[data-theme='light'] .entrance-gate .eg-step-icon { background: color-mix(in srgb, var(--eg-paper) 88%, transparent); border-color: var(--eg-line); color: var(--eg-faint); box-shadow: none; } html[data-theme='light'] .entrance-gate .eg-step-icon.is-active { background: var(--eg-accent-soft); border-color: color-mix(in srgb, var(--eg-accent) 45%, transparent); color: var(--eg-accent-deep); box-shadow: 0 0 0 1px color-mix(in srgb, var(--eg-accent) 20%, transparent); } html[data-theme='light'] .entrance-gate .eg-step-icon.is-done { background: color-mix(in srgb, var(--eg-accent) 9%, var(--eg-paper)); border-color: color-mix(in srgb, var(--eg-accent) 38%, transparent); color: var(--eg-accent-deep); } html[data-theme='light'] .entrance-gate .eg-cta { background: var(--eg-cta-bg); color: var(--eg-cta-ink); border-color: transparent; box-shadow: 0 12px 28px rgba(26, 23, 20, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12); } html[data-theme='light'] .entrance-gate .eg-cta:hover, html[data-theme='light'] .entrance-gate .eg-cta:focus-visible { background: var(--eg-cta-hover); color: var(--eg-cta-ink); box-shadow: 0 16px 36px rgba(26, 23, 20, 0.22), 0 0 0 1px color-mix(in srgb, var(--eg-accent) 40%, transparent); } html[data-theme='light'] .entrance-gate .eg-cta:disabled, html[data-theme='light'] .entrance-gate .eg-cta.is-busy { opacity: 0.55; box-shadow: none; } html[data-theme='light'] .entrance-gate .eg-dock, html[data-theme='light'] .entrance-gate .eg-corner { background: var(--eg-chrome); border-color: var(--eg-line); box-shadow: var(--eg-shadow-soft); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); } html[data-theme='light'] .entrance-gate .eg-dock__btn, html[data-theme='light'] .entrance-gate .eg-chip-icon, html[data-theme='light'] .entrance-gate .eg-glass-btn { color: var(--eg-ink); border-color: transparent; } html[data-theme='light'] .entrance-gate .eg-dock__btn:hover, html[data-theme='light'] .entrance-gate .eg-dock__btn:focus-visible, html[data-theme='light'] .entrance-gate .eg-chip-icon:hover, html[data-theme='light'] .entrance-gate .eg-chip-icon:focus-visible, html[data-theme='light'] .entrance-gate .eg-glass-btn:hover, html[data-theme='light'] .entrance-gate .eg-glass-btn:focus-visible { background: var(--eg-accent-soft); border-color: color-mix(in srgb, var(--eg-accent) 40%, transparent); color: var(--eg-accent-deep); box-shadow: 0 0 18px var(--eg-accent-glow); } html[data-theme='light'] .entrance-gate .eg-dock__label, html[data-theme='light'] #westo-entrance .eg-dock__label { color: #1a2327 !important; font-weight: 750 !important; } html[data-theme='light'] .entrance-gate .eg-corner__label, html[data-theme='light'] #westo-entrance .eg-corner__label { color: #1a2327 !important; font-weight: 700 !important; } html[data-theme='light'] .entrance-gate .eg-dock__btn svg, html[data-theme='light'] #westo-entrance .eg-dock__btn svg { color: #1a2327 !important; stroke: #1a2327 !important; } html[data-theme='light'] .entrance-gate .eg-dock__btn:hover .eg-dock__label, html[data-theme='light'] #westo-entrance .eg-dock__btn:hover .eg-dock__label, html[data-theme='light'] .entrance-gate .eg-dock__btn:focus-visible .eg-dock__label, html[data-theme='light'] #westo-entrance .eg-dock__btn:focus-visible .eg-dock__label { color: #0c555c !important; } html[data-theme='light'] .entrance-gate .eg-dock__btn:hover svg, html[data-theme='light'] #westo-entrance .eg-dock__btn:hover svg, html[data-theme='light'] .entrance-gate .eg-dock__btn:focus-visible svg, html[data-theme='light'] #westo-entrance .eg-dock__btn:focus-visible svg { color: #0c555c !important; stroke: #0c555c !important; } html[data-theme='light'] .entrance-gate .eg-lang, html[data-theme='light'] .entrance-gate .eg-theme-toggle { background: var(--eg-chrome); border-color: var(--eg-line); color: var(--eg-ink); box-shadow: var(--eg-shadow-soft); } html[data-theme='light'] .entrance-gate .eg-lang:hover, html[data-theme='light'] .entrance-gate .eg-theme-toggle:hover, html[data-theme='light'] .entrance-gate .eg-lang:focus-visible, html[data-theme='light'] .entrance-gate .eg-theme-toggle:focus-visible { border-color: color-mix(in srgb, var(--eg-accent) 45%, transparent); background: var(--eg-accent-soft); color: var(--eg-accent-deep); } html[data-theme='light'] .entrance-gate .eg-sheet { background: var(--eg-paper); border-color: var(--eg-line-strong); box-shadow: var(--eg-shadow); color: var(--eg-ink); } html[data-theme='light'] .entrance-gate .eg-sheet__handle { background: color-mix(in srgb, var(--eg-ink) 18%, transparent); } html[data-theme='light'] .entrance-gate .eg-sheet__title, html[data-theme='light'] .entrance-gate .eg-sheet-title { color: var(--eg-ink); border-bottom-color: color-mix(in srgb, var(--eg-accent) 55%, transparent); } html[data-theme='light'] .entrance-gate .eg-sheet-close { color: var(--eg-ink); } html[data-theme='light'] .entrance-gate .eg-nav-link { color: #1a2327 !important; font-weight: 600 !important; } html[data-theme='light'] .entrance-gate .eg-nav-link:hover { color: #0c555c !important; } html[data-theme='light'] .entrance-gate .eg-tab { color: #374151 !important; } html[data-theme='light'] .entrance-gate .eg-tab.is-active { color: #0c555c !important; font-weight: 800 !important; } html[data-theme='light'] .entrance-gate .eg-contact { color: #1a2327 !important; } html[data-theme='light'] .entrance-gate .eg-contact a { color: #0c555c !important; } html[data-theme='light'] .entrance-gate .eg-sheet__body { color: var(--eg-muted); } html[data-theme='light'] .entrance-gate .eg-install-chip, html[data-theme='light'] .eg-install-chip { background: var(--eg-chrome); border-color: var(--eg-line); color: var(--eg-ink); } html[data-theme='light'] .entrance-gate .eg-install-chip:hover, html[data-theme='light'] .eg-install-chip:hover { background: var(--eg-accent-soft); border-color: color-mix(in srgb, var(--eg-accent) 40%, transparent); color: var(--eg-accent-deep); } /* Primary entrance action: the same calm, legible glass as the header pills. It stays prominent through width and placement, rather than a heavy solid fill. */ .entrance-gate .eg-cta { position: relative; isolation: isolate; overflow: hidden; background: var(--wg-action-bg, rgba(255, 255, 255, 0.08)); color: var(--wg-action-ink, #f8f6f0); border-color: var(--wg-action-edge, rgba(255, 255, 255, 0.2)); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.005em; -webkit-backdrop-filter: blur(16px) saturate(1.16); backdrop-filter: blur(16px) saturate(1.16); box-shadow: var(--wg-action-shadow); transition: transform var(--wg-hover-time, 0.22s) var(--wg-ease, cubic-bezier(0.22, 1, 0.36, 1)), background var(--wg-hover-time, 0.22s) ease, border-color var(--wg-hover-time, 0.22s) ease, box-shadow var(--wg-hover-time, 0.22s) ease, opacity 0.2s ease; } .entrance-gate .eg-cta::before { content: ''; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; background: var(--eg-glass-edge, var(--wg-glass-edge)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .entrance-gate .eg-cta::after { content: ''; position: absolute; inset: 0 0 auto; z-index: 0; height: 44%; background: linear-gradient(var(--wg-action-highlight, rgba(255, 255, 255, 0.16)), transparent); pointer-events: none; } .entrance-gate .eg-cta-label, .entrance-gate .eg-cta-arrow { position: relative; z-index: 1; } .entrance-gate .eg-cta:not(:disabled):hover, .entrance-gate .eg-cta:not(:disabled):focus-visible { transform: translateY(-1px); background: var(--wg-action-bg-hover, rgba(255, 255, 255, 0.14)); border-color: var(--wg-action-edge-hover, rgba(120, 208, 216, 0.58)); box-shadow: var(--wg-action-shadow), 0 0 1.15rem var(--wg-action-glow, rgba(120, 208, 216, 0.18)); outline: none; } .entrance-gate .eg-cta:focus-visible { box-shadow: var(--wg-action-shadow), 0 0 0 2px var(--wg-focus-ring, rgba(120, 208, 216, 0.7)); } .entrance-gate .eg-cta:disabled { background: var(--wg-action-bg, rgba(255, 255, 255, 0.08)); color: var(--wg-action-ink, #f8f6f0); border-color: var(--wg-action-edge, rgba(255, 255, 255, 0.2)); opacity: 0.65; box-shadow: var(--wg-action-shadow); } html[data-theme='light'] .entrance-gate .eg-cta:disabled, html[data-theme='light'] .entrance-gate .eg-cta.is-busy { background: rgba(26, 23, 20, 0.06); color: rgba(26, 23, 20, 0.52); border-color: rgba(26, 23, 20, 0.18); opacity: 0.85; box-shadow: none; } html[data-theme='light'] .entrance-gate .eg-lang-sep { color: rgba(26, 23, 20, 0.35); } html[data-theme='light'] .entrance-gate .eg-cta, html[data-theme='light'] .entrance-gate .eg-cta:hover, html[data-theme='light'] .entrance-gate .eg-cta:focus-visible { background: var(--wg-action-bg, rgba(255, 252, 247, 0.72)); color: var(--wg-action-ink, #1a1714); border-color: var(--wg-action-edge, rgba(26, 23, 20, 0.15)); box-shadow: var(--wg-action-shadow); } html[data-theme='light'] .entrance-gate .eg-cta:hover, html[data-theme='light'] .entrance-gate .eg-cta:focus-visible { background: var(--wg-action-bg-hover, rgba(255, 252, 247, 0.9)); border-color: var(--wg-action-edge-hover, rgba(42, 122, 134, 0.5)); box-shadow: var(--wg-action-shadow), 0 0 1rem var(--wg-action-glow, rgba(42, 122, 134, 0.14)); } /* ===== WESTO entrance GPU budget (release3) ===== */ html[data-perf-tier="economy"] #westo-entrance [class*="glass"], html[data-perf-tier="economy"] #westo-entrance .eg-panel, html[data-perf-tier="economy"] #westo-entrance .eg-card, html[data-perf-tier="economy"] #westo-entrance .eg-enter { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html[data-perf-tier="economy"] #eg-particles { display: none !important; } html[data-perf-tier="balanced"] #westo-entrance [class*="glass"] { --eg-blur: 8px; } /* ===== END css/entrance-gate.css ===== */ /* ===== BEGIN css/entrance-gate-redesign.css ===== */ /* WESTO Entrance — Brand Editorial Dark v4 Scoped to #westo-entrance. Pattern is injected with --eg-pattern-image. */ #westo-entrance{ --eg-accent:#18c8d1;--eg-accent-deep:#0eaab5;--eg-accent-bright:#59e5e8; --eg-accent-soft:rgba(24,200,209,.12);--eg-accent-glow:rgba(24,200,209,.30); --eg-ink:#f4f4f1;--eg-muted:rgba(235,237,235,.64);--eg-bg:#05090c; --eg-chrome-bg:rgba(5,11,15,.74);--eg-chrome-border:rgba(174,231,233,.17); --eg-pattern-image:url('../assets/images/entrance/westo-pattern.webp');--eg-blur:20px; background:#05090c!important } #westo-entrance .eg-ambient__base{background:radial-gradient(72rem 54rem at 50% 46%,rgba(12,42,46,.14),transparent 62%),linear-gradient(180deg,#071016,#03070a)} #westo-entrance .eg-ambient__photo img{filter:saturate(.74) brightness(.46) contrast(1.08);transform:scale(1.055)} #westo-entrance .eg-ambient__veil{background:linear-gradient(180deg,rgba(2,7,10,.52),rgba(2,7,10,.34) 38%,rgba(2,6,9,.88)),radial-gradient(ellipse 76% 58% at 52% 44%,transparent 12%,rgba(1,6,8,.30) 54%,rgba(1,5,7,.78))} #westo-entrance .eg-ambient__wash{background:radial-gradient(circle at 13% 46%,rgba(23,198,207,.13),transparent 29%),radial-gradient(circle at 79% 40%,rgba(21,193,203,.09),transparent 34%)} #westo-entrance .eg-ambient__fog{background:linear-gradient(90deg,rgba(1,7,9,.26),transparent 34%,transparent 70%,rgba(1,7,9,.30)),radial-gradient(ellipse 85% 45% at 50% 100%,rgba(2,7,9,.88),transparent 70%);opacity:1} #westo-entrance .eg-ambient__noise{opacity:.075}#westo-entrance .eg-ambient__rays{opacity:.22}#westo-entrance .eg-ambient__particles{opacity:.28} #westo-entrance .eg-shell{width:min(100%,82rem)!important;padding:calc(1.55rem + var(--eg-safe-t)) clamp(1.4rem,4vw,3.2rem) calc(1.3rem + var(--eg-safe-b));gap:clamp(1.15rem,2.1vh,2rem)} #westo-entrance .eg-top{min-height:4.4rem} #westo-entrance .eg-top>.eg-glass-btn:first-child{width:4.35rem;min-width:4.35rem;height:4.35rem;min-height:4.35rem;padding:0;border-radius:999px;border:1px solid rgba(76,206,213,.42);background:rgba(4,12,16,.70)!important;color:#35d2d8;box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 34px rgba(0,0,0,.24)} #westo-entrance .eg-top>.eg-glass-btn:first-child svg{width:1.65rem;height:1.65rem}#westo-entrance .eg-top>.eg-glass-btn:first-child .eg-glass-pill__label{display:none} #westo-entrance #eg-site-menu.westo-menu-trigger{min-width:7rem;min-height:3.85rem;padding:0 1.2rem;gap:.78rem;border-radius:999px;border:1px solid rgba(76,206,213,.28);background:rgba(4,12,16,.72)!important;box-shadow:inset 0 1px rgba(255,255,255,.05),0 14px 36px rgba(0,0,0,.22)} #westo-entrance #eg-site-menu .westo-menu-trigger__icon{width:1.18rem;height:1.18rem;color:var(--eg-accent)}#westo-entrance #eg-site-menu .westo-menu-trigger__label{color:rgba(255,255,255,.92);font-size:.94rem;font-weight:700} #westo-entrance .eg-glass-btn::before{background:linear-gradient(135deg,rgba(118,232,235,.42),rgba(255,255,255,.04) 58%,rgba(118,232,235,.12))} #westo-entrance .eg-mid{padding-inline:clamp(0rem,1vw,1rem)} #westo-entrance .eg-card{width:min(100%,50rem);max-height:100%;padding:clamp(2rem,3.4vh,3.35rem) clamp(2rem,5vw,4rem) clamp(1.7rem,2.8vh,2.6rem);border-radius:2.25rem;border:1px solid rgba(85,224,229,.34);background:linear-gradient(150deg,rgba(24,200,209,.035),transparent 22%,transparent 77%,rgba(24,200,209,.035)),linear-gradient(180deg,rgba(7,15,19,.90),rgba(4,11,15,.91));backdrop-filter:blur(22px) saturate(1.08);-webkit-backdrop-filter:blur(22px) saturate(1.08);box-shadow:0 54px 150px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.055),inset 0 0 0 1px rgba(26,190,198,.025),inset 0 0 80px rgba(18,175,185,.022)} #westo-entrance .eg-card::before{inset-inline:0;background:linear-gradient(90deg,transparent 4%,rgba(76,226,231,.94) 20%,rgba(76,226,231,.22) 45%,transparent 74%);opacity:.68} #westo-entrance .eg-card::after{content:'';position:absolute;inset:1px;border-radius:calc(2.25rem - 1px);pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.018)} #westo-entrance .eg-card__glow{background:radial-gradient(ellipse 58% 34% at 50% 18%,rgba(25,205,213,.07),transparent 64%),radial-gradient(ellipse 60% 28% at 50% 100%,rgba(25,205,213,.055),transparent 68%)}#westo-entrance .eg-card__reflect{opacity:.11} #westo-entrance .eg-pattern{position:absolute;z-index:0;display:block;pointer-events:none;background-image:var(--eg-pattern-image);background-repeat:no-repeat;background-size:contain;filter:saturate(.95) contrast(1.06);opacity:.22;mix-blend-mode:screen} #westo-entrance .eg-pattern--top{width:clamp(11rem,26vw,17rem);aspect-ratio:1.5;inset-inline-start:-4.2rem;top:-1.15rem;transform:rotate(-5deg);background-position:left top;mask-image:linear-gradient(#000,transparent 92%);-webkit-mask-image:linear-gradient(#000,transparent 92%)} #westo-entrance .eg-pattern--side{width:clamp(10rem,23vw,15rem);aspect-ratio:1.16;inset-inline-end:-4.6rem;top:35%;transform:rotate(16deg);background-position:right center;opacity:.27;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 78%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 78%,transparent)} #westo-entrance .eg-logo-stage{width:clamp(8.3rem,17vw,10.8rem);aspect-ratio:285/422;margin:.25rem auto .7rem;z-index:2}#westo-entrance .eg-logo-png{width:100%;height:100%;object-fit:contain;border-radius:0;filter:drop-shadow(0 18px 32px rgba(0,0,0,.42)) drop-shadow(0 0 16px rgba(25,200,209,.10))} #westo-entrance .eg-brand-copy{z-index:2;margin-top:.1rem}#westo-entrance .eg-brand-wordmark-img{width:min(24rem,66vw);max-height:5.8rem;object-fit:contain;filter:drop-shadow(0 4px 16px rgba(0,0,0,.22))} #westo-entrance .eg-tagline{margin-top:.85rem;max-width:24rem;font-size:clamp(.94rem,1.55vw,1.1rem);line-height:1.65;color:rgba(232,234,232,.65)}#westo-entrance .eg-subtitle{margin-top:.42rem;font-size:clamp(.69rem,1vw,.83rem);letter-spacing:.26em;color:rgba(74,213,219,.74)} #westo-entrance .eg-status{min-height:2.7rem;margin-top:clamp(1rem,2vh,1.45rem);padding:.48rem 1.18rem;gap:.7rem;border:1px solid rgba(125,221,224,.24);background:rgba(2,9,12,.56);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.9rem;box-shadow:inset 0 1px rgba(255,255,255,.025),0 10px 26px rgba(0,0,0,.13)} #westo-entrance .eg-status-text{gap:.72rem}#westo-entrance .eg-status-meta,#westo-entrance .eg-status-loc{font-size:.82rem;padding-inline-start:.72rem}#westo-entrance .eg-status-dot{width:.58rem;height:.58rem} #westo-entrance .eg-experience{z-index:2;margin-top:clamp(1rem,2.1vh,1.55rem);gap:clamp(.85rem,1.6vh,1.2rem)}#westo-entrance .eg-experience__lead{font-size:clamp(.78rem,1.2vw,.94rem);letter-spacing:.01em;color:rgba(225,229,227,.66)} #westo-entrance .eg-steps-row{width:min(100%,31rem);justify-content:space-between;gap:clamp(.35rem,1vw,.75rem);padding-inline:.6rem;align-items:flex-start}#westo-entrance .eg-steps-row::before{top:2rem;inset-inline:3rem;height:1px;background:repeating-linear-gradient(90deg,rgba(26,202,211,.62) 0 3px,transparent 3px 8px);opacity:.72} #westo-entrance .eg-step{position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.55rem}#westo-entrance .eg-step-icon{width:4rem;height:4rem;border:1px solid rgba(42,205,212,.56);color:#2bd0d7;background:rgba(3,14,18,.90);box-shadow:inset 0 0 0 5px rgba(22,191,200,.025),0 0 0 1px rgba(0,0,0,.25);backdrop-filter:none;-webkit-backdrop-filter:none}#westo-entrance .eg-step-icon svg{width:1.62rem;height:1.62rem} #westo-entrance .eg-step-icon.is-active,#westo-entrance .eg-step-icon.is-done{color:#5de8eb;border-color:rgba(68,226,231,.86);background:rgba(8,39,43,.86);box-shadow:0 0 24px rgba(31,203,211,.19),inset 0 0 0 5px rgba(39,211,218,.035);transform:none}#westo-entrance .eg-step-label{display:block;font-size:clamp(.61rem,.9vw,.73rem);color:rgba(229,231,229,.64);white-space:nowrap;line-height:1.35} #westo-entrance .eg-progress{grid-template-columns:1fr auto;gap:1rem;margin-top:.2rem}#westo-entrance .eg-progress__track{height:3px;border:0;background:rgba(255,255,255,.085);box-shadow:inset 0 0 0 1px rgba(75,211,216,.10)}#westo-entrance .eg-progress__fill{background:linear-gradient(90deg,#13aab5,#1bcbd3 64%,#68eef0);box-shadow:0 0 14px rgba(31,211,218,.38)}#westo-entrance .eg-progress__pct{min-width:3.4rem;font-size:.91rem;color:#4de1e5} #westo-entrance .eg-quote{margin-top:.05rem;font-size:clamp(.78rem,1.1vw,.93rem);font-style:normal;color:rgba(224,226,224,.62)}#westo-entrance .eg-quote::before,#westo-entrance .eg-quote::after{color:rgba(23,201,210,.72);font-size:1.55em;line-height:0;vertical-align:-.18em}#westo-entrance .eg-quote::before{content:'“';margin-inline-end:.45rem}#westo-entrance .eg-quote::after{content:'”';margin-inline-start:.45rem} #westo-entrance .eg-cta-wrap{margin-top:clamp(1.1rem,2vh,1.55rem);padding-top:0}#westo-entrance .eg-cta-wrap::before{display:none}#westo-entrance .eg-cta{position:relative;isolation:isolate;overflow:hidden;height:4.9rem;min-height:4.9rem;border:1px solid rgba(79,230,234,.82);border-radius:999px;background:linear-gradient(100deg,rgba(14,86,94,.90),rgba(10,107,116,.94) 45%,rgba(5,84,91,.92));color:rgba(248,249,247,.96);font-size:clamp(1rem,1.45vw,1.16rem);font-weight:800;box-shadow:inset 0 1px rgba(255,255,255,.08),0 18px 36px rgba(0,0,0,.24),0 0 30px rgba(22,205,213,.08)} #westo-entrance .eg-cta::before{content:'';position:absolute;z-index:-1;inset-block:0;inset-inline-start:0;width:min(35%,12rem);background-image:var(--eg-pattern-image);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.30;mix-blend-mode:screen;mask-image:linear-gradient(90deg,#000,transparent);-webkit-mask-image:linear-gradient(90deg,#000,transparent);pointer-events:none}#westo-entrance .eg-cta::after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(70,232,236,.08),transparent 52%);pointer-events:none} #westo-entrance .eg-cta-arrow{width:1.75rem;height:1.75rem;color:#64e8eb;opacity:.95}#westo-entrance .eg-cta:not(:disabled):hover,#westo-entrance .eg-cta:not(:disabled):focus-visible{transform:translateY(-2px);background:linear-gradient(100deg,rgba(15,106,114,.96),rgba(12,132,141,.98) 48%,rgba(7,99,106,.96));box-shadow:0 22px 44px rgba(0,0,0,.26),0 0 34px rgba(23,206,214,.14)}#westo-entrance .eg-cta:disabled{opacity:.72;background:linear-gradient(100deg,rgba(12,54,60,.9),rgba(10,72,79,.9))} #westo-entrance .eg-foot{min-height:5rem;align-items:center;gap:1rem}#westo-entrance .eg-dock{min-height:4.9rem;gap:0;padding:.45rem 1.1rem;border:1px solid rgba(255,255,255,.14);background:rgba(3,9,12,.78);box-shadow:0 18px 44px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035)}#westo-entrance .eg-dock__btn,#westo-entrance .eg-chip-icon{min-width:6.6rem;padding:.35rem 1rem;border-radius:0;gap:.35rem}#westo-entrance .eg-dock__btn+.eg-dock__btn::before{content:'';position:absolute;inset-inline-start:0;top:20%;bottom:20%;width:1px;background:rgba(255,255,255,.12)}#westo-entrance .eg-dock__btn svg,#westo-entrance .eg-chip-icon svg{width:1.55rem;height:1.55rem}#westo-entrance .eg-dock__label{font-size:.66rem;color:rgba(235,235,232,.64)} #westo-entrance .eg-corner{min-height:4.35rem;border:1px solid rgba(255,255,255,.14);background:rgba(3,9,12,.78);box-shadow:0 14px 34px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.03)}#westo-entrance .eg-theme-toggle{width:4.35rem;justify-content:center;padding:0}#westo-entrance .eg-theme-toggle svg{width:1.55rem;height:1.55rem}#westo-entrance .eg-theme-toggle .eg-corner__label{display:none}#westo-entrance .eg-lang-switch{min-width:11rem;justify-content:center;gap:.5rem;padding-inline:1.2rem}#westo-entrance .eg-lang-seg{font-size:.85rem;color:rgba(238,238,236,.55)}#westo-entrance .eg-lang-seg.is-active{color:#2ed3da}#westo-entrance .eg-lang-sep{color:rgba(255,255,255,.30)} #westo-entrance .eg-sheet{border-color:rgba(61,210,216,.24);background:rgba(4,11,15,.96)} html[data-perf-tier='economy'] #westo-entrance .eg-card,html[data-perf-tier='economy'] #westo-entrance .eg-dock,html[data-perf-tier='economy'] #westo-entrance .eg-corner,html[data-perf-tier='economy'] #westo-entrance .eg-status,html[data-perf-tier='economy'] #westo-entrance .eg-glass-btn{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}html[data-perf-tier='economy'] #westo-entrance .eg-pattern{opacity:.12} @media(max-width:1100px){#westo-entrance .eg-shell{width:100%!important;padding-inline:clamp(1.25rem,3vw,2rem)}#westo-entrance .eg-card{width:min(100%,47rem)}#westo-entrance .eg-dock__btn,#westo-entrance .eg-chip-icon{min-width:5.5rem}} @media(max-width:767px){#westo-entrance .eg-shell{padding:calc(.8rem + var(--eg-safe-t)) .8rem calc(.75rem + var(--eg-safe-b));gap:.65rem}#westo-entrance .eg-top{min-height:3.4rem}#westo-entrance .eg-top>.eg-glass-btn:first-child{width:3.35rem;min-width:3.35rem;height:3.35rem;min-height:3.35rem}#westo-entrance .eg-top>.eg-glass-btn:first-child svg{width:1.35rem;height:1.35rem}#westo-entrance #eg-site-menu.westo-menu-trigger{min-width:5.3rem;min-height:3.2rem;padding-inline:.9rem;gap:.55rem}#westo-entrance #eg-site-menu .westo-menu-trigger__label{font-size:.82rem}#westo-entrance .eg-card{width:100%;padding:clamp(1.15rem,2vh,1.55rem) 1rem 1rem;border-radius:1.65rem;backdrop-filter:blur(14px) saturate(1.04);-webkit-backdrop-filter:blur(14px) saturate(1.04)}#westo-entrance .eg-card::after{border-radius:calc(1.65rem - 1px)}#westo-entrance .eg-pattern--top{width:9.3rem;inset-inline-start:-3.6rem;top:-.7rem;opacity:.16}#westo-entrance .eg-pattern--side{width:8.4rem;inset-inline-end:-3.4rem;top:39%;opacity:.16}#westo-entrance .eg-logo-stage{width:clamp(5.7rem,21vw,7rem);margin:0 auto .35rem}#westo-entrance .eg-brand-wordmark-img{width:min(15.5rem,69vw);max-height:3.9rem}#westo-entrance .eg-tagline{margin-top:.48rem;font-size:.78rem}#westo-entrance .eg-subtitle{margin-top:.2rem;font-size:.59rem;letter-spacing:.18em}#westo-entrance .eg-status{min-height:2.15rem;margin-top:.58rem;padding:.32rem .75rem;font-size:.72rem;gap:.45rem}#westo-entrance .eg-status-text{gap:.42rem}#westo-entrance .eg-status-meta,#westo-entrance .eg-status-loc{font-size:.65rem;padding-inline-start:.42rem}#westo-entrance .eg-experience{margin-top:.58rem;gap:.48rem}#westo-entrance .eg-experience__lead{font-size:.66rem}#westo-entrance .eg-steps-row{width:min(100%,21rem);padding-inline:.2rem}#westo-entrance .eg-steps-row::before{top:1.45rem;inset-inline:2rem}#westo-entrance .eg-step{gap:.3rem}#westo-entrance .eg-step-icon{width:2.9rem;height:2.9rem}#westo-entrance .eg-step-icon svg{width:1.2rem;height:1.2rem}#westo-entrance .eg-step-label{font-size:.52rem}#westo-entrance .eg-progress{gap:.55rem}#westo-entrance .eg-progress__pct{min-width:2.6rem;font-size:.69rem}#westo-entrance .eg-quote{font-size:.65rem}#westo-entrance .eg-cta-wrap{margin-top:.7rem}#westo-entrance .eg-cta{height:3.55rem;min-height:3.55rem;font-size:.85rem}#westo-entrance .eg-cta-arrow{width:1.3rem;height:1.3rem}#westo-entrance .eg-foot{min-height:3.9rem;gap:.45rem}#westo-entrance .eg-dock{min-height:3.75rem;max-width:min(66vw,22rem);padding:.28rem .4rem}#westo-entrance .eg-dock__btn,#westo-entrance .eg-chip-icon{min-width:0;flex:1 1 0;padding:.24rem .42rem}#westo-entrance .eg-dock__btn svg,#westo-entrance .eg-chip-icon svg{width:1.15rem;height:1.15rem}#westo-entrance .eg-dock__label{font-size:.49rem}#westo-entrance .eg-corner{min-height:3.5rem}#westo-entrance .eg-theme-toggle{width:3.5rem}#westo-entrance .eg-theme-toggle svg{width:1.25rem;height:1.25rem}#westo-entrance .eg-lang-switch{min-width:8.5rem;padding-inline:.65rem;gap:.32rem}#westo-entrance .eg-lang-seg{font-size:.67rem}} @media(max-width:470px){#westo-entrance .eg-shell{padding-inline:.6rem}#westo-entrance .eg-card{padding-inline:.75rem}#westo-entrance .eg-step-label{display:none}#westo-entrance .eg-steps-row{width:min(100%,17rem)}#westo-entrance .eg-step-icon{width:2.65rem;height:2.65rem}#westo-entrance .eg-steps-row::before{top:1.325rem;inset-inline:1.6rem}#westo-entrance .eg-dock{max-width:64vw}#westo-entrance .eg-dock__label{display:none}#westo-entrance .eg-dock__btn+.eg-dock__btn::before{top:25%;bottom:25%}#westo-entrance .eg-lang-switch{min-width:7.5rem}} /* Light theme remains functional; the current visual target is dark. */ html[data-theme='light'] #westo-entrance{--eg-ink:#111416;--eg-muted:rgba(25,31,32,.58);--eg-chrome-bg:rgba(255,255,255,.78);--eg-chrome-border:rgba(20,75,79,.15);background:#eef1ef!important}html[data-theme='light'] #westo-entrance .eg-card{border-color:rgba(17,169,177,.24);background:rgba(251,252,250,.90);box-shadow:0 48px 120px rgba(40,58,58,.20),inset 0 1px rgba(255,255,255,.85)}html[data-theme='light'] #westo-entrance .eg-pattern{mix-blend-mode:multiply;opacity:.08}html[data-theme='light'] #westo-entrance .eg-status,html[data-theme='light'] #westo-entrance .eg-step-icon{background:rgba(255,255,255,.82);color:#138f98}html[data-theme='light'] #westo-entrance .eg-step-label,html[data-theme='light'] #westo-entrance .eg-experience__lead,html[data-theme='light'] #westo-entrance .eg-quote{color:rgba(25,31,32,.75)!important}html[data-theme='light'] #westo-entrance .eg-dock,html[data-theme='light'] #westo-entrance .eg-corner,html[data-theme='light'] #westo-entrance .eg-top>.eg-glass-btn:first-child,html[data-theme='light'] #westo-entrance #eg-site-menu.westo-menu-trigger{background:rgba(255,255,255,.88)!important;color:#111416!important;border-color:rgba(26,35,39,.18)!important}html[data-theme='light'] #westo-entrance #eg-site-menu .westo-menu-trigger__label{color:#111416!important;font-weight:700!important}html[data-theme='light'] #westo-entrance #eg-site-menu .westo-menu-trigger__icon{color:#0c555c!important}html[data-theme='light'] #westo-entrance .eg-dock__label{color:#1a2327!important;font-weight:750!important}html[data-theme='light'] #westo-entrance .eg-dock__btn svg{color:#1a2327!important;stroke:#1a2327!important}html[data-theme='light'] #westo-entrance .eg-dock__btn+.eg-dock__btn::before{background:rgba(26,35,39,.18)!important}html[data-theme='light'] #westo-entrance .eg-dock__btn:hover .eg-dock__label,html[data-theme='light'] #westo-entrance .eg-dock__btn:focus-visible .eg-dock__label{color:#0c555c!important}html[data-theme='light'] #westo-entrance .eg-dock__btn:hover svg,html[data-theme='light'] #westo-entrance .eg-dock__btn:focus-visible svg{color:#0c555c!important;stroke:#0c555c!important}html[data-theme='light'] #westo-entrance .eg-corner__label{color:#1a2327!important;font-weight:700!important}html[data-theme='light'] #westo-entrance .eg-lang-seg{color:#374151!important}html[data-theme='light'] #westo-entrance .eg-lang-seg.is-active{color:#0c555c!important;font-weight:800!important}html[data-theme='light'] #westo-entrance .eg-lang-sep{color:rgba(26,35,39,.28)!important}html[data-theme='light'] #westo-entrance .eg-sheet{background:#ffffff!important;border-color:rgba(26,35,39,.18)!important;color:#111416!important}html[data-theme='light'] #westo-entrance .eg-sheet-title{color:#111416!important}html[data-theme='light'] #westo-entrance .eg-sheet-close{color:#111416!important}html[data-theme='light'] #westo-entrance .eg-nav-link{color:#1a2327!important;font-weight:600!important}html[data-theme='light'] #westo-entrance .eg-nav-link:hover{color:#0c555c!important}html[data-theme='light'] #westo-entrance .eg-tab{color:#374151!important}html[data-theme='light'] #westo-entrance .eg-tab.is-active{color:#0c555c!important;font-weight:800!important}html[data-theme='light'] #westo-entrance .eg-contact{color:#1a2327!important}html[data-theme='light'] #westo-entrance .eg-contact a{color:#0c555c!important} @media(min-width:768px) and (min-height:1050px){ #westo-entrance .eg-card{min-height:min(70svh,72rem)} #westo-entrance .eg-cta-wrap{margin-top:auto;padding-top:1.35rem} } @media(min-width:768px) and (max-height:820px){ #westo-entrance .eg-shell{padding-top:calc(.65rem + var(--eg-safe-t));padding-bottom:calc(.65rem + var(--eg-safe-b));gap:.55rem} #westo-entrance .eg-top{min-height:3rem} #westo-entrance .eg-top>.eg-glass-btn:first-child{width:3rem;min-width:3rem;height:3rem;min-height:3rem} #westo-entrance #eg-site-menu.westo-menu-trigger{min-height:2.85rem} #westo-entrance .eg-card{padding:1rem 1.5rem .9rem;width:min(100%,40rem)} #westo-entrance .eg-logo-stage{width:5.2rem;margin:0 auto .15rem} #westo-entrance .eg-brand-wordmark-img{width:14.5rem;max-height:3.7rem} #westo-entrance .eg-tagline{margin-top:.3rem;font-size:.74rem}#westo-entrance .eg-subtitle{margin-top:.1rem;font-size:.56rem} #westo-entrance .eg-status{margin-top:.42rem;min-height:2rem;padding:.24rem .65rem;font-size:.68rem} #westo-entrance .eg-experience{margin-top:.42rem;gap:.34rem}#westo-entrance .eg-experience__lead{font-size:.62rem} #westo-entrance .eg-step-icon{width:2.45rem;height:2.45rem}#westo-entrance .eg-step-icon svg{width:1.05rem;height:1.05rem}#westo-entrance .eg-steps-row::before{top:1.225rem} #westo-entrance .eg-step-label{font-size:.5rem}#westo-entrance .eg-quote{font-size:.62rem} #westo-entrance .eg-cta-wrap{margin-top:.45rem;padding-top:0}#westo-entrance .eg-cta{height:3rem;min-height:3rem;font-size:.8rem} #westo-entrance .eg-foot{min-height:3.4rem}#westo-entrance .eg-dock{min-height:3.35rem}#westo-entrance .eg-corner{min-height:3.1rem} } /* ===== END css/entrance-gate-redesign.css ===== */ /* ===== BEGIN css/table.css ===== */ /* Table cart drawer + menu add buttons */ html.is-dish-boards section.is-benefits .dish-board-media[hidden], html.is-dish-boards section.is-benefits .dish-board-media.is-empty-media, html.is-dish-boards .section.is-benefits .dish-board-media[hidden], html.is-dish-boards .section.is-benefits .dish-board-media.is-empty-media { display: none !important; } .navbar_table { cursor: pointer; border: none; background: rgba(255, 255, 255, 0.08); color: inherit; position: relative; overflow: visible; -webkit-tap-highlight-color: transparent; -webkit-backdrop-filter: blur(var(--wg-blur, 12px)); backdrop-filter: blur(var(--wg-blur, 12px)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: background 0.2s ease, transform var(--wg-hover-time, 0.22s) var(--wg-ease, cubic-bezier(0.22, 1, 0.36, 1)); } .navbar_table::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--wg-glass-edge); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .navbar_table:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); } .navbar_table:focus { outline: none; } .navbar_table:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(236, 232, 226, 0.35); } .navbar_table.has-items { background: rgba(120, 208, 216, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(120, 208, 216, 0.22); } /* Fly dish photo → #nav-table-btn (Motion add-to-basket, GSAP port) */ .westo-add-fly { position: fixed; z-index: 12050; pointer-events: none; border-radius: 1.1rem; overflow: hidden; margin: 0; padding: 0; background: transparent; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.12); will-change: transform, opacity, left, top; } .westo-add-fly img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; user-select: none; -webkit-user-drag: none; } .westo-table-hit-ring { position: absolute; inset: -3px; border-radius: inherit; border: 1.5px solid var(--cat-accent, var(--wg-accent, #78d0d8)); opacity: 0; pointer-events: none; z-index: 2; will-change: transform, opacity; } html[data-theme="light"] .westo-table-hit-ring { border-color: var(--cat-accent, #2a7a86); } html[data-theme="light"] .westo-add-fly { box-shadow: 0 16px 36px rgba(26, 23, 20, 0.18), 0 0 0 1px rgba(26, 23, 20, 0.08); } @media (prefers-reduced-motion: reduce) { .westo-add-fly, .westo-table-hit-ring { display: none !important; } } .table-badge { --tb-size: 1.35rem; position: absolute; top: -0.38rem; inset-inline-end: -0.32rem; inset-inline-start: auto; left: auto; z-index: 3; box-sizing: border-box; min-width: var(--tb-size); height: var(--tb-size); padding: 0 0.38rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: linear-gradient(165deg, #b8e8ec 0%, #78d0d8 48%, #50c0d0 100%); color: #0a1a1c; border: 1.5px solid rgba(184, 232, 236, 0.55); font-family: inherit; font-size: 0.68rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; text-align: center; direction: ltr; letter-spacing: 0; pointer-events: none; box-shadow: 0 0.15rem 0.55rem rgba(0, 0, 0, 0.38), 0 0 0 0.12rem rgba(8, 9, 11, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55); transform-origin: center; } .table-badge[hidden] { display: none !important; } .table-badge.is-pop { animation: table-badge-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes table-badge-pop { 0% { transform: scale(0.55); filter: brightness(1.25); } 55% { transform: scale(1.18); filter: brightness(1.08); } 100% { transform: scale(1); filter: brightness(1); } } @media (prefers-reduced-motion: reduce) { .table-badge.is-pop { animation: none; } } .menu-add-wrap { width: 100%; max-width: 280px; margin-top: 1rem; /* Keep wrap hit-testing on; the liquid-glass shadow itself is pointer-events:none */ pointer-events: auto !important; position: relative; z-index: 5; overflow: visible; } .section.is-benefits .benefits_max-width { pointer-events: none; } .section.is-benefits .menu-add-wrap { pointer-events: auto !important; } /* Ingredient-led allergen notice. It deliberately reads as one quiet line of product information rather than a second card competing with the order CTA. */ .menu-allergen-slot { width: 100%; min-width: 0; pointer-events: auto; } .menu-allergen { --allergen-ink: rgba(248, 244, 236, 0.88); --allergen-muted: rgba(248, 244, 236, 0.52); --allergen-edge: rgba(248, 210, 139, 0.22); --allergen-accent: #e7bb70; display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.42rem; margin: 0; padding: 0.36rem 0 0.08rem; border: 0; border-top: 1px solid var(--allergen-edge); border-radius: 0; color: var(--allergen-ink); background: transparent; box-shadow: none; } /* The page shell stays LTR for the 3D experience. Keep this compact text island native to the selected language so the heading anchors the row. */ html.is-lang-fa .menu-allergen, html[lang="fa"] .menu-allergen, html.is-lang-ar .menu-allergen, html[lang="ar"] .menu-allergen { direction: rtl; text-align: right; justify-content: flex-start; } html.is-lang-fa .menu-allergen__chips, html[lang="fa"] .menu-allergen__chips, html.is-lang-ar .menu-allergen__chips, html[lang="ar"] .menu-allergen__chips { direction: rtl; justify-content: flex-start; } html.is-lang-en .menu-allergen, html[lang="en"] .menu-allergen, html.is-lang-en .menu-allergen__chips, html[lang="en"] .menu-allergen__chips { direction: ltr; text-align: left; justify-content: flex-start; } .menu-allergen__head { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 0.28rem; min-width: 0; line-height: 1.1; } .menu-allergen__marker { display: block; flex: 0 0 auto; width: 0.34rem; height: 0.34rem; border-radius: 50%; background: var(--allergen-accent); box-shadow: 0 0 0 0.14rem color-mix(in srgb, var(--allergen-accent) 16%, transparent); } .menu-allergen__head strong { color: inherit; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; } .menu-allergen__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin: 0; min-width: 0; } .menu-allergen__chip { display: inline-flex; align-items: center; gap: 0.22rem; min-height: 1.36rem; box-sizing: border-box; border-radius: 999px; font-size: 0.62rem; font-weight: 620; line-height: 1.2; padding: 0.13rem 0.36rem; border: 1px solid color-mix(in srgb, var(--allergen-accent) 30%, transparent); color: var(--allergen-ink); background: color-mix(in srgb, var(--allergen-accent) 8%, transparent); white-space: nowrap; } .menu-allergen__chip svg { flex: 0 0 auto; width: 0.82rem; height: 0.82rem; color: var(--allergen-accent); } .menu-allergen--compact { margin-top: 0.42rem; padding-top: 0.32rem; } .menu-allergen--compact .menu-allergen__head strong { font-size: 0.61rem; } .menu-allergen--compact .menu-allergen__chips { gap: 0.2rem; } .menu-allergen--compact .menu-allergen__chip { min-height: 1.24rem; padding: 0.1rem 0.3rem; font-size: 0.58rem; } .menu-allergen--compact .menu-allergen__chip svg { width: 0.76rem; height: 0.76rem; } /* ---------- Glass Button (vanilla port of glass-button.tsx / liquid glass) ---------- */ @property --glass-angle-1 { syntax: ""; inherits: false; initial-value: -75deg; } .glass-button-wrap { --glass-hover-ease: cubic-bezier(0.25, 1, 0.5, 1); --glass-hover-time: 220ms; --glass-shadow-bg: linear-gradient( 180deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.28) ); position: relative; z-index: 2; display: inline-flex; width: auto; max-width: 100%; border-radius: 999px; background: transparent; cursor: pointer; pointer-events: none; transition: transform var(--glass-hover-time) var(--glass-hover-ease); } .glass-button-wrap:has(.glass-button:disabled) { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.15); } .glass-button { --border-width: 1.5px; all: unset; box-sizing: border-box; position: relative; z-index: 3; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; width: 100%; cursor: pointer; border-radius: 999px; -webkit-tap-highlight-color: transparent; pointer-events: auto !important; color: var(--wg-ink, rgba(244, 239, 230, 0.96)); font-family: "Vazirmatn", "Geist", sans-serif; font-weight: 600; letter-spacing: -0.03em; background: var(--wg-chip-bg, linear-gradient( -75deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.14) )); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.28); backdrop-filter: blur(var(--wg-blur, 12px)) saturate(1.35); -webkit-backdrop-filter: blur(var(--wg-blur, 12px)) saturate(1.35); transition: all var(--glass-hover-time) var(--glass-hover-ease); } .glass-button:disabled { cursor: not-allowed; } /* Iridescent rim */ .glass-button::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 999px; width: calc(100% + var(--border-width)); height: calc(100% + var(--border-width)); top: calc(0% - var(--border-width) / 2); left: calc(0% - var(--border-width) / 2); padding: var(--border-width); box-sizing: border-box; background: conic-gradient( from var(--glass-angle-1) at 50% 50%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 5% 40%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0) 60% 95%, rgba(0, 0, 0, 0.45) ), linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12)); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: xor; box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.45); transition: all var(--glass-hover-time) var(--glass-hover-ease), --glass-angle-1 500ms ease; pointer-events: none; } .glass-button-text { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; user-select: none; -webkit-user-select: none; padding: 0.72rem 1.35rem; font-size: 0.92rem; font-weight: 600; letter-spacing: -0.03em; text-align: center; white-space: nowrap; color: inherit; transition: text-shadow var(--glass-hover-time) var(--glass-hover-ease); } .glass-button-text .glass-button-icon { width: 1.05em; height: 1.05em; flex: 0 0 auto; display: block; } /* Soft refractive shadow under the pill */ .glass-button-shadow { --shadow-cuttoff-fix: 2em; position: absolute; z-index: 0; width: calc(100% + var(--shadow-cuttoff-fix)); height: calc(100% + var(--shadow-cuttoff-fix)); top: calc(0% - var(--shadow-cuttoff-fix) / 2); left: calc(0% - var(--shadow-cuttoff-fix) / 2); filter: blur(clamp(2px, 0.125em, 12px)); overflow: visible; pointer-events: none; } .glass-button-shadow::after { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: 999px; background: var(--glass-shadow-bg); width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em); height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em); top: calc(var(--shadow-cuttoff-fix) - 0.7em); left: calc(var(--shadow-cuttoff-fix) - 0.875em); padding: 0.125em; box-sizing: border-box; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: xor; transition: all var(--glass-hover-time) var(--glass-hover-ease); opacity: 1; } .glass-button-wrap:has(.glass-button:hover:not(:disabled)) .glass-button { --glass-angle-1: -95deg; background: var(--wg-chip-bg-hover); border-color: rgba(120, 208, 216, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0.35em 0.2em -0.1em rgba(0, 0, 0, 0.3); } .glass-button-wrap:has(.glass-button:hover:not(:disabled)) .glass-button-shadow { filter: blur(clamp(2px, 0.0625em, 6px)); } .glass-button-wrap:has(.glass-button:hover:not(:disabled)) .glass-button-shadow::after { top: calc(var(--shadow-cuttoff-fix) - 0.875em); opacity: 0.9; } .glass-button-wrap:has(.glass-button:active:not(:disabled)) { transform: translateY(0) rotate3d(1, 0, 0, 12deg); } .glass-button-wrap:has(.glass-button:active:not(:disabled)) .glass-button { box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2), 0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05), 0 0.25em 0 0 rgba(255, 255, 255, 0.65), inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15); } .glass-button-wrap:has(.glass-button:active:not(:disabled)) .glass-button-shadow { filter: blur(clamp(2px, 0.125em, 12px)); } .glass-button-wrap:has(.glass-button:active:not(:disabled)) .glass-button-shadow::after { top: calc(var(--shadow-cuttoff-fix) - 0.5em); opacity: 0.75; } .glass-button-wrap:has(.glass-button:active:not(:disabled)) .glass-button-text { text-shadow: 0.025em 0.2em 0.05em rgba(0, 0, 0, 0.12); } .glass-button:focus { outline: none; } .glass-button:focus-visible { box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.05em 0.05em rgba(255, 255, 255, 0.35), 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 0 4px rgba(120, 208, 216, 0.35); } @media (prefers-reduced-motion: reduce) { .glass-button-wrap, .glass-button, .glass-button::after, .glass-button-shadow, .glass-button-shadow::after { transition: none !important; } .glass-button-wrap:has(.glass-button:active:not(:disabled)) { transform: none; } } /* ---------- Quantity modal ---------- */ .qty-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 1.25rem; padding-bottom: max(1.25rem, 18svh); direction: rtl; font-family: "Vazirmatn", "Geist", sans-serif; } .qty-modal[hidden] { display: none !important; } .qty-modal__backdrop { position: absolute; inset: 0; background: rgba(6, 5, 6, 0.42); backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); z-index: 0; cursor: pointer; } .qty-modal__card { position: relative; z-index: 1; width: min(340px, 100%); padding: 1.55rem 1.3rem 1.3rem; border-radius: 1.25rem; background: linear-gradient( 155deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(14, 12, 14, 0.48) 100% ); backdrop-filter: blur(32px) saturate(1.5); -webkit-backdrop-filter: blur(32px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.06); color: rgba(245, 240, 232, 0.94); text-align: center; overflow: hidden; animation: qtyPop 0.26s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes qtyPop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .qty-modal__x { position: absolute; top: 0.55rem; left: 0.7rem; width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(236, 232, 226, 0.7); font-size: 1.15rem; cursor: pointer; line-height: 1; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .qty-modal__x:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); color: rgba(245, 240, 232, 0.95); } .qty-modal__card h3 { margin: 0 0 0.3rem; font-size: 1.08rem; font-weight: 650; letter-spacing: -0.01em; } .qty-modal__price { margin: 0 0 1.1rem; color: rgba(236, 232, 226, 0.55); font-size: 0.88rem; } .qty-circles { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.15rem; direction: ltr; } .qty-circle { width: 2.55rem; height: 2.55rem; border-radius: var(--wg-r-btn, 0.8rem); border: 1px solid rgba(255, 255, 255, 0.16); background: var(--wg-chip-bg); backdrop-filter: blur(var(--wg-blur, 12px)) saturate(1.3); -webkit-backdrop-filter: blur(var(--wg-blur, 12px)) saturate(1.3); color: var(--wg-ink, rgba(245, 240, 232, 0.94)); font-size: 1.2rem; font-weight: 500; line-height: 1; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 0.35rem 0.9rem rgba(0, 0, 0, 0.22); transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .qty-circle:hover { background: var(--wg-chip-bg-hover); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-1px); } .qty-circle:active { transform: scale(0.96); } .qty-circle:focus { outline: none; } .qty-circle:focus-visible { border-color: rgba(245, 240, 232, 0.5); box-shadow: 0 0 0 1px rgba(245, 240, 232, 0.28); } .qty-modal__x:focus { outline: none; } .qty-modal__x:focus-visible { color: rgba(245, 240, 232, 0.95); border-color: rgba(245, 240, 232, 0.4); } .table-drawer__close:focus { outline: none; } .table-drawer__close:focus-visible { color: rgba(236, 232, 226, 0.85); } .qty-value { min-width: 2.25rem; font-size: 1.35rem; font-weight: 600; direction: ltr; text-align: center; font-variant-numeric: tabular-nums; color: rgba(245, 240, 232, 0.96); } .qty-confirm-wrap { width: 100%; display: flex; justify-content: center; } .qty-confirm-wrap .glass-button { width: 100%; min-height: 2.75rem; } .qty-confirm-wrap .glass-button-text { padding-block: 0.8rem; width: 100%; } .table-drawer { position: fixed; inset: 0; z-index: 9999; direction: rtl; font-family: "Vazirmatn", "Geist", sans-serif; } .table-drawer[hidden] { display: none !important; } .table-drawer__panel { position: absolute; top: 0; bottom: 0; right: 0; width: min(28rem, 100%); color: var(--wg-ink, rgba(236, 232, 226, 0.92)); border-left: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; display: flex; flex-direction: column; background: linear-gradient( 155deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 38%, rgba(12, 11, 12, 0.78) 100% ); -webkit-backdrop-filter: blur(var(--wg-blur-panel, 18px)) saturate(1.15); backdrop-filter: blur(var(--wg-blur-panel, 18px)) saturate(1.15); box-shadow: -0.5rem 0 1.75rem rgba(0, 0, 0, 0.4), inset 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12); animation: tableSlide 0.32s cubic-bezier(0.22, 1, 0.36, 1); /* Keep panel above backdrop hit-testing quirks */ z-index: 1; } @media (max-width: 640px) { .table-drawer__panel { width: 100%; border-left: 0; box-shadow: none; } .table-drawer__head { padding-top: calc(0.85rem + env(safe-area-inset-top, 0px)); } .qty-modal { padding: 1rem; padding-bottom: max(1rem, 22svh); align-items: center; } .qty-modal__card { width: min(340px, 100%); margin-bottom: 0; } } .table-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.48); z-index: 0; cursor: pointer; } @keyframes tableSlide { from { transform: translateX(100%); } to { transform: translateX(0); } } .table-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1.1rem 1.15rem 0.85rem; border-bottom: 1px solid rgba(236, 232, 226, 0.06); } .table-drawer__head-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .table-drawer__head h2 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; } .table-drawer__count { margin: 0; font-size: 0.78rem; font-weight: 550; color: rgba(236, 232, 226, 0.5); } .table-drawer__close { border: none; background: transparent; color: rgba(236, 232, 226, 0.45); font-size: 1.4rem; line-height: 1; cursor: pointer; } .table-drawer__body { flex: 1; overflow: auto; padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: 0; } .table-drawer__body[hidden] { display: none !important; } .table-empty { color: rgba(236, 232, 226, 0.38); text-align: center; margin: 2.5rem auto; font-size: 0.88rem; font-weight: 400; line-height: 1.55; max-width: 14rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .table-empty::before { content: ""; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(245, 242, 235, 0.14); box-shadow: inset 0 0 0 0.35rem rgba(7, 7, 8, 0.4); background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.06), transparent 65%); } .table-empty__hint { display: block; font-size: 0.8rem; opacity: 0.75; font-weight: 400; } .table-empty[hidden] { display: none !important; } .table-line { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 0.85rem 0.9rem; padding: 0.95rem; margin: 0 0 0.7rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.15rem; background: linear-gradient( 155deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(8, 8, 9, 0.35) 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0.45rem 1.1rem rgba(0, 0, 0, 0.18); align-items: start; } .table-line__media { grid-column: 1; width: 5.25rem; height: 5.25rem; border-radius: 1rem; overflow: hidden; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .table-line__thumb { display: block; width: 100%; height: 100%; object-fit: cover; } .table-line__thumb--empty { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.12), transparent 55%), linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2)); } .table-line__body { grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; } .table-line__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.55rem; } .table-line__titles { min-width: 0; display: flex; flex-direction: column; gap: 0.18rem; } .table-line__cat { font-size: 0.68rem; font-weight: 650; letter-spacing: 0.02em; color: rgba(120, 208, 216, 0.9); line-height: 1.2; } .table-line__name { margin: 0; font-weight: 700; font-size: 0.98rem; color: rgba(246, 242, 235, 0.96); line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .table-line__desc { margin: 0; font-size: 0.78rem; font-weight: 450; line-height: 1.45; color: rgba(236, 232, 226, 0.52); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .table-line__stock-warning { margin: 0.45rem 0; padding: 0.45rem 0.6rem; border: 1px solid rgba(239, 154, 64, 0.34); border-radius: 0.65rem; background: rgba(239, 154, 64, 0.1); color: #f5c47f; font-size: 0.82rem; line-height: 1.55; overflow-wrap: anywhere; } .table-line__modifier-row { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; min-width: 0; } .table-line__modifier-row .table-line__modifiers { flex: 1 1 auto; min-width: 0; margin: 0; color: rgba(236, 232, 226, 0.76); font-size: 0.9rem; line-height: 1.55; overflow-wrap: anywhere; } .table-line__edit-options { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0.45rem 0.7rem; border: 1px solid rgba(120, 208, 216, 0.3); border-radius: 0.7rem; background: rgba(120, 208, 216, 0.1); color: #9de1e5; font: inherit; font-size: 0.82rem; font-weight: 650; line-height: 1.3; cursor: pointer; touch-action: manipulation; } .table-line__edit-options:hover, .table-line__edit-options:focus-visible { border-color: rgba(120, 208, 216, 0.62); background: rgba(120, 208, 216, 0.17); outline: 2px solid rgba(120, 208, 216, 0.28); outline-offset: 1px; } .table-line__edit-options:disabled { opacity: 0.55; cursor: not-allowed; } html[data-theme="light"] .table-line__stock-warning { border-color: rgba(151, 91, 18, 0.22); background: rgba(205, 133, 45, 0.1); color: #75430f; } html[data-theme="light"] .table-line__modifier-row .table-line__modifiers { color: rgba(26, 23, 20, 0.76); } html[data-theme="light"] .table-line__edit-options { border-color: rgba(42, 122, 134, 0.24); background: rgba(42, 122, 134, 0.08); color: #1b6872; } html[data-theme="light"] .table-line__edit-options:hover, html[data-theme="light"] .table-line__edit-options:focus-visible { border-color: rgba(42, 122, 134, 0.48); background: rgba(42, 122, 134, 0.13); } @media (max-width: 360px) { .table-line__modifier-row { align-items: stretch; flex-direction: column; } .table-line__edit-options { align-self: flex-start; } } .table-line__remove { appearance: none; flex: 0 0 auto; width: 2.55rem; height: 2.55rem; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.85rem; border: 1px solid rgba(224, 138, 120, 0.35); background: rgba(224, 138, 120, 0.12); color: #f0b4a6; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease; } .table-line__remove:hover, .table-line__remove:focus-visible { background: rgba(224, 138, 120, 0.22); border-color: rgba(224, 138, 120, 0.55); color: #ffd4ca; outline: none; transform: translateY(-1px); } .table-line__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; margin-top: 0.15rem; flex-wrap: wrap; } .table-line__prices { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; } .table-line__unit { color: rgba(236, 232, 226, 0.42); font-size: 0.72rem; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .table-line__price { font-weight: 700; direction: ltr; unicode-bidi: isolate; text-align: start; font-size: 0.95rem; color: rgba(246, 242, 235, 0.92); font-variant-numeric: tabular-nums; } .table-line__qty { display: flex; align-items: center; gap: 0.4rem; direction: ltr; flex: 0 0 auto; padding: 0.2rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.22); } .table-line__qty button { position: relative; width: 2.45rem; height: 2.45rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.1); color: rgba(246, 242, 235, 0.95); cursor: pointer; font-size: 1.15rem; font-weight: 600; line-height: 1; overflow: hidden; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .table-line__qty button:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-1px); } .table-line__qty button:focus-visible { outline: 2px solid rgba(120, 208, 216, 0.65); outline-offset: 2px; } .table-line__qty span { min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 700; color: rgba(246, 242, 235, 0.92); } .table-drawer__body--cart { display: flex; flex-direction: column; gap: 0; padding: 0.85rem 0.95rem 0; padding-bottom: 0; } .table-lines { flex: 1 1 auto; overflow: auto; min-height: 0; padding-bottom: 0.35rem; -webkit-overflow-scrolling: touch; } .table-cart-foot { flex: 0 0 auto; margin-top: auto; padding: 0.85rem 0 calc(0.85rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(236, 232, 226, 0.08); background: linear-gradient(180deg, transparent, rgba(10, 9, 10, 0.55) 18%); display: flex; flex-direction: column; gap: 0.65rem; } .table-cart-foot[hidden] { display: none !important; } .table-total-row { display: flex; justify-content: space-between; align-items: center; margin-top: 0; padding-top: 0; font-size: 0.92rem; font-weight: 500; border-top: 0; color: rgba(236, 232, 226, 0.7); } .table-total-row strong { font-weight: 550; color: rgba(236, 232, 226, 0.9); } .table-drawer .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; background: var(--wg-chip-bg); color: #fff; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: var(--wg-r-chip, 0.9rem); padding: 0.8rem 1.1rem; font-family: inherit; font-size: 0.92rem; font-weight: 650; cursor: pointer; -webkit-backdrop-filter: blur(var(--wg-blur, 12px)); backdrop-filter: blur(var(--wg-blur, 12px)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.22); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--wg-ease, cubic-bezier(0.22, 1, 0.36, 1)); } .table-drawer .btn::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 44%; background: linear-gradient(rgba(255, 255, 255, 0.22) 0%, transparent 100%); pointer-events: none; } .table-drawer .btn:not(:disabled):hover { background: var(--wg-chip-bg-hover); border-color: rgba(120, 208, 216, 0.45); transform: translateY(-2px); } .table-drawer .btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.1); } .table-drawer .btn.is-busy { opacity: 0.7; letter-spacing: 0.01em; } #table-checkout-btn:disabled { opacity: 0.4; } #table-checkout-btn:not(:disabled) { opacity: 1; } .table-drawer .btn:focus { outline: none; } .table-drawer .btn:focus-visible { box-shadow: 0 0 0 1px rgba(236, 232, 226, 0.35); } .table-drawer .btn.btn-ghost { background: rgba(255, 255, 255, 0.06); color: rgba(236, 232, 226, 0.88); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .table-drawer .btn.btn-ghost::after { opacity: 0.55; } .table-drawer .btn.btn-ghost:not(:disabled):hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); transform: translateY(-1px); } .table-drawer__body--checkout { gap: 0.85rem; } .table-drawer .field { margin: 0; } .table-drawer .field-optional { font-weight: 400; font-size: 0.85em; color: rgba(236, 232, 226, 0.38); margin-inline-start: 0.25rem; } .table-drawer .field input::placeholder { color: rgba(236, 232, 226, 0.28); } .table-drawer .field input:focus { outline: none; border-color: rgba(236, 232, 226, 0.28); background: rgba(255, 255, 255, 0.055); } .table-drawer .field label { display: block; font-size: 0.76rem; color: rgba(236, 232, 226, 0.42); margin-bottom: 0.3rem; } .table-drawer .field input { width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(236, 232, 226, 0.1); color: rgba(236, 232, 226, 0.9); border-radius: 0.45rem; padding: 0.7rem 0.8rem; font-family: inherit; font-size: 16px; } .table-pay-label { margin: 0.25rem 0 0; color: rgba(236, 232, 226, 0.42); font-size: 0.8rem; } .table-pay-methods { display: flex; flex-direction: column; gap: 0.45rem; } .table-pay-opt { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--wg-r-btn, 0.8rem); background: var(--wg-chip-bg, rgba(255, 255, 255, 0.05)); cursor: pointer; font-size: 0.88rem; color: rgba(236, 232, 226, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .table-pay-opt input { appearance: none; width: 0.95rem; height: 0.95rem; margin: 0; border-radius: 50%; border: 1px solid rgba(236, 232, 226, 0.35); background: transparent; flex-shrink: 0; position: relative; } .table-pay-opt input:checked { border-color: rgba(236, 232, 226, 0.7); background: radial-gradient(circle at center, rgba(236, 232, 226, 0.9) 0 35%, transparent 38%); } .table-pay-opt:has(input:checked) { border-color: rgba(120, 208, 216, 0.45); background: var(--wg-chip-bg-hover, rgba(255, 255, 255, 0.12)); color: #fff; } .table-pay-opt:hover { border-color: rgba(255, 255, 255, 0.22); transform: translateY(-1px); } .table-checkout-actions { display: flex; gap: 0.55rem; } .table-checkout-actions .btn { flex: 1; } .table-done-msg { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin: 2.25rem 0 1.5rem; color: rgba(236, 232, 226, 0.72); font-size: 0.9rem; line-height: 1.5; font-weight: 400; } .table-done-kicker { font-size: 1.05rem; font-weight: 550; color: rgba(236, 232, 226, 0.9); } .table-done-id { font-size: 0.82rem; letter-spacing: 0.04em; color: rgba(236, 232, 226, 0.45); font-variant-numeric: tabular-nums; } .table-done-meta { font-size: 0.88rem; color: rgba(236, 232, 226, 0.55); } .table-done-pay { margin-top: 0.55rem; max-width: 16rem; font-size: 0.8rem; color: rgba(236, 232, 226, 0.42); line-height: 1.55; } .table-done-total { margin-top: 0.65rem; font-size: 0.95rem; font-weight: 550; color: rgba(236, 232, 226, 0.82); } .table-done-feedback { display: inline-block; margin-top: 0.85rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); color: inherit; text-decoration: none; font-size: 0.85rem; } .table-drawer .msg { text-align: center; min-height: 1.2em; font-size: 0.82rem; margin: 0; } .table-drawer .msg.error { color: #e08a7a; } .table-drawer .msg.ok { color: #8aab7e; } .toast-add { position: fixed; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(4px); background: rgba(14, 13, 12, 0.94); border: 1px solid rgba(236, 232, 226, 0.12); color: rgba(236, 232, 226, 0.88); border-radius: 0.4rem; padding: 0.5rem 0.9rem; font-size: 0.8rem; font-weight: 450; z-index: 10000; opacity: 0; transition: opacity 0.28s ease, transform 0.28s ease; pointer-events: none; direction: rtl; font-family: "Vazirmatn", sans-serif; max-width: min(90vw, 20rem); text-align: center; } .toast-add.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ Mobile φ composition (golden ratio) major ≈ 0.618 → product stage | minor ≈ 0.382 → info card ============================================================ */ @media screen and (max-width: 991px) { .section.is-benefits { --phi: 1.618; --phi-minor: 0.382; --phi-major: 0.618; --stage-h: calc(var(--phi-major) * 100svh); /* Compact info card — was full φ-minor (~38vh), felt empty */ --card-h: auto; --space-1: 0.5rem; --space-2: 0.81rem; --space-3: 1.31rem; --ease-phi: cubic-bezier(0.25, 1, 0.5, 1); } /* Keep benefits_container as position:fixed (from index.html). */ .section.is-benefits .benefits_container { box-sizing: border-box; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: stretch !important; padding: 0 !important; } .section.is-benefits .benefits_container > .padding-global, .section.is-benefits .container-large, .section.is-benefits .padding-section-medium { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } .section.is-benefits .padding-section-medium { position: relative !important; padding-top: 0 !important; padding-inline: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; } /* Absolute card only when menu-story dish-board grid is off */ html:not(.is-dish-boards) .section.is-benefits .benefits_text { position: absolute; bottom: max(0.55rem, env(safe-area-inset-bottom, 0px)); left: var(--space-2); right: calc(var(--dish-rail-w, 3.45rem) + var(--dish-rail-gap, 0.45rem) + 0.15rem); z-index: 20; flex: none; display: flex; flex-direction: column; justify-content: flex-start; width: auto; max-width: none; height: auto; max-height: min(42svh, 17.5rem); box-sizing: border-box; text-align: center !important; margin: 0; padding: 0.85rem 0.9rem 0.8rem; border-radius: 1.15rem; background: linear-gradient( 160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 42%, rgba(18, 16, 18, 0.38) 100% ); backdrop-filter: blur(28px) saturate(1.45); -webkit-backdrop-filter: blur(28px) saturate(1.45); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.05); pointer-events: auto; transform: translate3d(0, 0, 0); overflow: hidden; transition: opacity 0.55s var(--ease-phi), transform 0.55s var(--ease-phi); } /* The open stage above the information card is reserved for the current dish's real photo. It deliberately uses contain, so the food is never cropped into a generic background image. */ html.is-dish-boards .section.is-benefits .dish-board-media { position: absolute; z-index: 1; top: max(4.6rem, calc(env(safe-area-inset-top, 0px) + 3.6rem)); right: var(--space-2); left: var(--space-2); height: calc(var(--stage-h) - 4.75rem); margin: 0; display: grid; place-items: center; pointer-events: none; } html.is-dish-boards .section.is-benefits .dish-board-media img { display: block; width: min(88vw, 33rem); height: min(100%, 33rem); object-fit: contain; filter: drop-shadow(0 1.1rem 1.6rem rgba(0, 0, 0, 0.34)); } .section.is-benefits .benefits_max-width { max-width: 100% !important; margin: 0 !important; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.45rem; } .section.is-benefits .benefits_text .margin-bottom, .section.is-benefits .benefits_text .margin-top, .section.is-benefits .benefits_text .margin-small, .section.is-benefits .benefits_text .margin-xsmall, .section.is-benefits .benefits_text .max-width-xsmall { margin: 0 !important; max-width: 100% !important; width: 100%; } .section.is-benefits .subhead_wrapper { margin: 0 !important; white-space: normal !important; justify-content: center !important; } .section.is-benefits .subhead_wrapper.align-center { white-space: normal !important; } /* Menu: no strike-through; hide decorative × (reads as close) */ .section.is-benefits .subhead_text:has([data-menu-price])::before { display: none !important; } .section.is-benefits .subhead:has([data-menu-price]) .subhead_icon { display: none !important; } .section.is-benefits .benefits_text h2 { font-size: clamp(1.15rem, 4.6vw, 1.5rem) !important; line-height: 1.35 !important; margin: 0.1rem auto 0.3rem !important; max-width: none; width: 100%; text-align: center !important; letter-spacing: -0.015em; font-weight: 700; } .section.is-benefits .benefits_text p { font-size: 0.76rem !important; line-height: 1.5 !important; max-width: 36ch; margin: 0 auto !important; opacity: 0.72; text-align: center !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .section.is-benefits .menu-add-wrap { width: 100%; max-width: 100%; margin: 0.15rem 0 0 !important; } .section.is-benefits .menu-add-btn { min-height: 2.45rem; width: 100%; } /* Icon rail on stage mid-axis — skip when dish menu-rail owns the right gutter */ html:not(.is-dish-boards) .section.is-benefits .benefits_nav { top: calc(var(--stage-h) * 0.5) !important; transform: translateY(-50%) scale(0.82); opacity: 0.72; transform-origin: center right; transition: top 0.55s var(--ease-phi), transform 0.55s var(--ease-phi), opacity 0.4s ease; } .hud_left { opacity: 0 !important; pointer-events: none; } .argument_svg-container { bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)) !important; width: min(78%, 17rem) !important; max-width: 17rem !important; transition: bottom 0.55s var(--ease-phi), opacity 0.55s ease; } .argument_media-container { justify-content: flex-end !important; padding-bottom: 0 !important; } } /* Desktop keeps the product on the open side of the story while the text stays readable on the opposite side. (Sizing owned by fa-override desktop dish layout.) */ @media screen and (min-width: 992px) { html.is-dish-boards .section.is-benefits .dish-board-media { pointer-events: none; } } @media screen and (max-width: 480px) { .section.is-benefits { --space-1: 0.4rem; --space-2: 0.65rem; --space-3: 1.05rem; } .section.is-benefits .padding-section-medium { padding-inline: var(--space-2) !important; } .section.is-benefits .benefits_text { padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); } .section.is-benefits .benefits_max-width { gap: var(--space-1); } .section.is-benefits .benefits_text h2 { font-size: clamp(1.2rem, 5.8vw, 1.62rem) !important; } .section.is-benefits .benefits_text p { font-size: 0.78rem !important; } .argument_svg-container { width: min(72%, 15.5rem) !important; max-width: 15.5rem !important; } } /* ---- Full menu overlay (category tabs + item cards) ---- */ .menu-filter-label { font-size: 0.72rem; color: rgba(236,232,226,0.45); margin-inline-end: 0.15rem; } .menu-filter-chip { border: 1px solid rgba(236,232,226,0.16); background: rgba(255,255,255,0.04); color: rgba(236,232,226,0.72); border-radius: 999px; padding: 0.28rem 0.7rem; font-size: 0.72rem; font-family: inherit; cursor: pointer; } .menu-filter-chip.is-on { background: rgba(120,208,216,0.16); border-color: rgba(120,208,216,0.45); color: #78d0d8; } .menu-tab { flex: 0 0 auto; border: 0; background: transparent; color: rgba(236, 232, 226, 0.48); padding: 0.4rem 0.7rem; border-radius: 0.4rem; font: inherit; font-size: 0.82rem; font-weight: 450; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .menu-tab:hover { background: rgba(255, 255, 255, 0.05); color: rgba(236, 232, 226, 0.78); } .menu-tab.active { background: rgba(255, 255, 255, 0.08); color: rgba(236, 232, 226, 0.94); border-color: transparent; font-weight: 550; } .menu-empty { color: rgba(236, 232, 226, 0.4); text-align: center; padding: 2.5rem 0; font-size: 0.88rem; } .menu-empty--loading { color: rgba(236, 232, 226, 0.32); letter-spacing: 0.02em; } @media (max-width: 640px) { } /* ---- Carousel chrome: rainbow bar + side arrows on hero ---- */ .carousel_nav { max-width: none !important; width: 100vw !important; padding-inline: clamp(1rem, 3vw, 2.5rem); box-sizing: border-box; z-index: 3; pointer-events: none; } /* Arrows between center dish and side peeks — desktop tightened in menu-story */ .carousel_arrow.is-prev { left: 18vw !important; bottom: auto !important; top: 36% !important; transform: translateY(-50%); } .carousel_arrow.is-next { right: 18vw !important; bottom: auto !important; top: 36% !important; transform: translateY(-50%); } @media (min-width: 992px) { .carousel_arrow.is-prev { left: clamp(2rem, 11vw, 12.5rem) !important; } .carousel_arrow.is-next { right: clamp(2rem, 11vw, 12.5rem) !important; } } @media (max-width: 991px) { .carousel_arrow.is-prev { left: 30vw !important; } .carousel_arrow.is-next { right: 30vw !important; } } .carousel_arrow { pointer-events: auto; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: rgba(236, 232, 226, 0.92); filter: drop-shadow(0 0.1rem 0.35rem rgba(0, 0, 0, 0.45)); cursor: pointer; z-index: 5; } .carousel_arrow .icon-embed-custom { width: 1.35rem; height: 1.35rem; pointer-events: none; } /* Soft rainbow glow behind plates */ .gamme_gradient-wrapper { z-index: 0; } /* Liquid rainbow pagination bar — keep vivid + readable */ .carousel_pagination { z-index: 3; opacity: 1; visibility: visible; width: min(82vw, 26rem); margin-inline: auto; } .carousel_pagination-svg { display: block; width: 100%; height: clamp(1.1rem, 3.2vw, 1.45rem); filter: drop-shadow(0 0 0.55rem rgba(229, 157, 230, 0.35)); } /* Category titles live on the 3D hero carousel again (menu story). Previously hidden for menu-exp overlay — that path is afterstory-only now. */ .section.is-gamme .carousel_title-collection { opacity: 1; visibility: visible; pointer-events: auto; } html.is-dish-boards .section.is-gamme .carousel_title-collection { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ---- Menu overlay: sold-out state + item detail modal ---- */ /* Webflow `[hidden]{display:none}` loses to `.menu-detail{display:flex}` — keep close working */ .menu-tab:focus { outline: none; } .menu-tab:focus-visible { background: rgba(255, 255, 255, 0.08); color: rgba(236, 232, 226, 0.9); box-shadow: 0 0 0 1px rgba(236, 232, 226, 0.25); } @media (prefers-reduced-motion: reduce) { .qty-modal__card, .table-drawer__panel, .toast-add, .glass-button, .glass-button-wrap, .qty-circle, .table-line__qty button, .navbar_table, .menu-tab{ animation: none !important; transition: none !important; } .toast-add.show { transform: translateX(-50%) translateY(0); } } /* ---- Sitewide light theme: table drawer / overlays ---- */ html[data-theme="light"] .table-drawer__panel { color: var(--wg-ink, #1a1714); border-left-color: rgba(26, 23, 20, 0.12); background: linear-gradient( 155deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 243, 234, 0.96) 38%, rgba(236, 228, 214, 0.98) 100% ); box-shadow: -0.5rem 0 1.75rem rgba(26, 23, 20, 0.14), inset 1px 0 0 rgba(255, 255, 255, 0.7); } html[data-theme="light"] .table-drawer__backdrop{ background: rgba(26, 23, 20, 0.38); } html[data-theme="light"] .table-drawer__head h2 { color: var(--wg-ink, #1a1714); } html[data-theme="light"] .table-drawer__count { color: rgba(26, 23, 20, 0.48); } html[data-theme="light"] .table-drawer__close { color: rgba(26, 23, 20, 0.45); } html[data-theme="light"] .table-drawer__close:hover, html[data-theme="light"] .table-drawer__close:focus-visible { color: var(--wg-ink, #1a1714); } html[data-theme="light"] .table-empty { color: rgba(26, 23, 20, 0.48); } html[data-theme="light"] .table-line { border-color: rgba(26, 23, 20, 0.1); background: linear-gradient(165deg, #ffffff 0%, #fffcf8 48%, #f5efe6 100%); box-shadow: 0 0.45rem 1.1rem rgba(26, 23, 20, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9); } html[data-theme="light"] .menu-allergen { --allergen-ink: rgba(57, 45, 29, 0.86); --allergen-muted: rgba(57, 45, 29, 0.54); --allergen-edge: rgba(57, 45, 29, 0.13); --allergen-accent: #9b6c20; background: transparent; box-shadow: none; } html[data-theme="light"] .menu-allergen__chip { border-color: rgba(155, 108, 32, 0.22); background: rgba(155, 108, 32, 0.06); } html[data-theme="light"] .menu-allergen__chip svg { color: var(--allergen-accent); } html[data-theme="light"] .table-line__media { background: #efe8dc; box-shadow: inset 0 0 0 1px rgba(26, 23, 20, 0.06); } html[data-theme="light"] .table-line__cat { color: #2a7a86; } html[data-theme="light"] .table-line__name { color: rgba(26, 23, 20, 0.96); } html[data-theme="light"] .table-line__desc { color: rgba(26, 23, 20, 0.52); } html[data-theme="light"] .table-line__unit { color: rgba(26, 23, 20, 0.45); } html[data-theme="light"] .table-line__price { color: rgba(26, 23, 20, 0.92); } html[data-theme="light"] .table-line__remove { border-color: rgba(176, 74, 58, 0.28); background: rgba(176, 74, 58, 0.08); color: #a34434; } html[data-theme="light"] .table-line__remove:hover, html[data-theme="light"] .table-line__remove:focus-visible { background: rgba(176, 74, 58, 0.14); border-color: rgba(176, 74, 58, 0.42); color: #8a3224; } html[data-theme="light"] .table-line__qty { border-color: rgba(26, 23, 20, 0.12); background: rgba(26, 23, 20, 0.04); } html[data-theme="light"] .table-line__qty span { color: rgba(26, 23, 20, 0.9); } html[data-theme="light"] .table-line__qty button { background: #fffcf7; border-color: rgba(26, 23, 20, 0.14); color: var(--wg-ink, #1a1714); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0.2rem 0.45rem rgba(26, 23, 20, 0.06); } html[data-theme="light"] .table-line__qty button:hover { background: #fff8ef; border-color: rgba(42, 122, 134, 0.4); color: var(--wg-ink, #1a1714); } html[data-theme="light"] .table-cart-foot { border-top-color: rgba(26, 23, 20, 0.1); background: linear-gradient(180deg, transparent, rgba(243, 238, 230, 0.92) 18%); } html[data-theme="light"] .table-total-row { color: rgba(26, 23, 20, 0.72); } html[data-theme="light"] .table-total-row strong { color: var(--wg-ink, #1a1714); } html[data-theme="light"] .table-drawer .btn { background: var(--wg-cta-bg, #1a1714); color: var(--wg-cta-ink, #f7f2ea); border-color: var(--wg-cta-border, transparent); box-shadow: 0 0.55rem 1.25rem rgba(26, 23, 20, 0.18); } html[data-theme="light"] .table-drawer .btn::after { opacity: 0.12; } html[data-theme="light"] .table-drawer .btn:not(:disabled):hover { background: #2a2521; border-color: rgba(42, 122, 134, 0.45); color: var(--wg-cta-ink, #f7f2ea); } html[data-theme="light"] .table-drawer .btn:focus-visible { box-shadow: 0 0 0 2px rgba(26, 23, 20, 0.35); } html[data-theme="light"] .table-drawer .btn.btn-ghost { background: rgba(26, 23, 20, 0.06); color: var(--wg-ink, #1a1714); border-color: rgba(26, 23, 20, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } html[data-theme="light"] .table-drawer .btn.btn-ghost:not(:disabled):hover { background: rgba(26, 23, 20, 0.1); border-color: rgba(26, 23, 20, 0.22); color: var(--wg-ink, #1a1714); } html[data-theme="light"] .table-drawer .field-optional, html[data-theme="light"] .table-drawer .field label, html[data-theme="light"] .table-pay-label { color: rgba(26, 23, 20, 0.55); } html[data-theme="light"] .table-drawer .field input { background: rgba(255, 255, 255, 0.72); border-color: rgba(26, 23, 20, 0.14); color: var(--wg-ink, #1a1714); } html[data-theme="light"] .table-drawer .field input::placeholder { color: rgba(26, 23, 20, 0.4); } html[data-theme="light"] .table-drawer .field input:focus { border-color: rgba(42, 122, 134, 0.45); background: #fffcf7; } html[data-theme="light"] .table-pay-opt { border-color: rgba(26, 23, 20, 0.12); background: rgba(26, 23, 20, 0.04); color: var(--wg-ink, #1a1714); } html[data-theme="light"] .table-pay-opt input { border-color: rgba(26, 23, 20, 0.28); } html[data-theme="light"] .table-pay-opt input:checked { border-color: rgba(26, 23, 20, 0.55); background: radial-gradient(circle at center, rgba(26, 23, 20, 0.85) 0 35%, transparent 38%); } html[data-theme="light"] .table-pay-opt:has(input:checked) { border-color: rgba(42, 122, 134, 0.5); background: rgba(42, 122, 134, 0.12); color: var(--wg-ink, #1a1714); } html[data-theme="light"] .table-pay-opt:hover { border-color: rgba(26, 23, 20, 0.2); color: var(--wg-ink, #1a1714); } html[data-theme="light"] .qty-modal{ background: #fffcf7; color: #1a1714; border-color: rgba(26, 23, 20, 0.12); box-shadow: 0 0.65rem 1.75rem rgba(26, 23, 20, 0.14); } html[data-theme="light"] .table-drawer__head{ border-bottom-color: rgba(26, 23, 20, 0.1); } html[data-theme="light"] .westo-sw-banner { background: rgba(26, 23, 20, 0.88); color: #f4efe6; } html[data-theme="light"] .glass-button { color: var(--wg-ink, #1a1714); border: 1px solid rgba(26, 23, 20, 0.14); } html[data-theme="light"] #westo-dish-card .menu-add-btn.glass-button, html[data-theme="light"] .menu-add-btn.glass-button { background: linear-gradient(180deg, #fffdf9 0%, #f2e8d8 100%); color: #1a1714; border: 1px solid color-mix(in srgb, var(--cat-accent, #2a7a86) 48%, rgba(26, 23, 20, 0.18)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 14px rgba(26, 23, 20, 0.1); } html[data-theme="light"] #westo-dish-card .menu-add-btn .glass-button-text, html[data-theme="light"] .menu-add-btn .glass-button-text { color: #1a1714; } html[data-theme="light"] #westo-dish-card .menu-add-btn.glass-button::after, html[data-theme="light"] .menu-add-btn.glass-button::after { content: none !important; display: none !important; } /* ---- Light loop stage 6: qty + overlay cards ---- */ html[data-theme="light"] .qty-modal__card { background: #fffcf7; color: var(--wg-ink, #1a1714); border-color: rgba(26, 23, 20, 0.12); } html[data-theme="light"] .qty-modal__card h3, html[data-theme="light"] .qty-modal__price { color: var(--wg-ink, #1a1714); } html[data-theme="light"] .qty-modal__x { color: rgba(26, 23, 20, 0.5); } html[data-theme="light"] .navbar_table { background: var(--wg-btn-fill, rgba(26, 23, 20, 0.1)) !important; color: var(--wg-btn-ink, #1a1714) !important; } html[data-theme="light"] .navbar_table-badge { background: var(--wg-accent, #2a7a86); color: #fffaf2; } /* ---- Pass2: qty / done / overlay / detail residuals ---- */ html[data-theme="light"] .qty-value { color: rgba(26, 23, 20, 0.94) !important; } html[data-theme="light"] .qty-modal__x:hover, html[data-theme="light"] .qty-modal__x:focus-visible { color: rgba(26, 23, 20, 0.92) !important; } html[data-theme="light"] .table-done-kicker { color: rgba(26, 23, 20, 0.92); } html[data-theme="light"] .table-done-msg { color: rgba(26, 23, 20, 0.72); } html[data-theme="light"] .table-done-total { color: rgba(26, 23, 20, 0.88); } html[data-theme="light"] .table-done-meta { color: rgba(26, 23, 20, 0.55); } html[data-theme="light"] .table-done-id { color: rgba(26, 23, 20, 0.48); } html[data-theme="light"] .table-done-pay { color: rgba(26, 23, 20, 0.5); } html[data-theme="light"] .menu-filter-chip { color: rgba(26, 23, 20, 0.78); border-color: rgba(26, 23, 20, 0.12); background: rgba(26, 23, 20, 0.04); } html[data-theme="light"] .menu-filter-label { color: rgba(26, 23, 20, 0.52); } html[data-theme="light"] .menu-empty { color: rgba(26, 23, 20, 0.5); } html[data-theme="light"] .menu-tab{ color: rgba(26, 23, 20, 0.82); } /* ---- Pass3 stage1: table qty/tabs residual ---- */ html[data-theme="light"] .qty-modal__x { color: rgba(26, 23, 20, 0.55); background: rgba(26, 23, 20, 0.05); border-color: rgba(26, 23, 20, 0.14); } html[data-theme="light"] .qty-circle:focus-visible { border-color: rgba(42, 122, 134, 0.55); box-shadow: 0 0 0 1px rgba(42, 122, 134, 0.35); } html[data-theme="light"] .table-drawer__close:focus-visible { color: rgba(26, 23, 20, 0.9); } html[data-theme="light"] .menu-tab { color: rgba(26, 23, 20, 0.55); } html[data-theme="light"] .menu-tab:hover { background: rgba(26, 23, 20, 0.06); color: rgba(26, 23, 20, 0.82); } html[data-theme="light"] .menu-tab.active { background: rgba(26, 23, 20, 0.1); color: rgba(26, 23, 20, 0.94); } html[data-theme="light"] .toast-add { background: rgba(26, 23, 20, 0.94); border-color: rgba(255, 255, 255, 0.12); color: #f4efe6; } /* ---- Pass3 stage2: navbar_table uses tokens ---- */ html[data-theme="light"] .navbar_table { background: var(--wg-btn-fill, rgba(26, 23, 20, 0.12)) !important; color: var(--wg-btn-ink, #1a1714) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0.3rem 0.7rem rgba(26, 23, 20, 0.1); } html[data-theme="light"] .navbar_table:hover, html[data-theme="light"] .navbar_table:focus-visible { background: var(--wg-btn-fill-hover, rgba(26, 23, 20, 0.18)) !important; } /* ---- Pass3 stage6: overlay/qty/menu-card residual ---- */ html[data-theme="light"] .qty-modal__card { background: rgba(255, 252, 247, 0.96); border-color: rgba(26, 23, 20, 0.12); color: rgba(26, 23, 20, 0.94); box-shadow: 0 1.2rem 2.8rem rgba(26, 23, 20, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7); } html[data-theme="light"] .qty-modal__price { color: rgba(26, 23, 20, 0.55); } html[data-theme="light"] .qty-circle { background: rgba(26, 23, 20, 0.06); border-color: rgba(26, 23, 20, 0.16); color: rgba(26, 23, 20, 0.92); } html[data-theme="light"] .qty-circle:hover, html[data-theme="light"] .qty-circle:focus-visible { background: rgba(26, 23, 20, 0.1); border-color: rgba(42, 122, 134, 0.45); color: rgba(26, 23, 20, 0.96); } html[data-theme="light"] .menu-filter-chip { background: rgba(26, 23, 20, 0.05); border-color: rgba(26, 23, 20, 0.12); color: rgba(26, 23, 20, 0.62); } html[data-theme="light"] .menu-filter-chip.is-on { background: rgba(26, 23, 20, 0.1); border-color: rgba(42, 122, 134, 0.45); color: rgba(26, 23, 20, 0.94); } html[data-theme="light"] .glass-button:not(.menu-add-btn) { background: var(--wg-btn-fill, rgba(26, 23, 20, 0.12)); color: var(--wg-btn-ink, #1a1714); } /* ---- Pass3 stage9: table-done feedback + empty residual ---- */ html[data-theme="light"] .table-done-feedback, html[data-theme="light"] .table-done-feedback a { color: rgba(26, 23, 20, 0.72); } html[data-theme="light"] .menu-empty--loading { color: rgba(26, 23, 20, 0.5); } html[data-theme="light"] .table-drawer__panel { color: rgba(26, 23, 20, 0.92); } /* ---- Per-category light atmosphere (overlay tabs) ---- */ html[data-theme="light"] .menu-tab.active { background: var(--cat-accent-soft, rgba(26, 23, 20, 0.1)); color: rgba(26, 23, 20, 0.94); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-accent, #2a7a86) 45%, transparent); } html[data-theme="light"] .menu-filter-chip.is-on { border-color: color-mix(in srgb, var(--cat-accent, #2a7a86) 50%, rgba(26, 23, 20, 0.14)); background: var(--cat-accent-soft, rgba(26, 23, 20, 0.1)); } /* Guest actions share the header's glass treatment: thin rim, readable copy, restrained lift, and no oversized refractive shadow. */ .glass-button { isolation: isolate; background: var(--wg-action-bg, rgba(255, 255, 255, 0.08)); color: var(--wg-action-ink, #f8f6f0); border: 1px solid var(--wg-action-edge, rgba(255, 255, 255, 0.2)); font-weight: 600; letter-spacing: 0.005em; -webkit-backdrop-filter: blur(14px) saturate(1.14); backdrop-filter: blur(14px) saturate(1.14); box-shadow: var(--wg-action-shadow); } .glass-button::after { background: var(--wg-glass-edge); box-shadow: none; } .glass-button-shadow { display: none !important; } .glass-button-wrap:has(.glass-button:hover:not(:disabled)) { transform: translateY(-1px); } .glass-button-wrap:has(.glass-button:hover:not(:disabled)) .glass-button, .glass-button-wrap:has(.glass-button:focus-visible:not(:disabled)) .glass-button { background: var(--wg-action-bg-hover, rgba(255, 255, 255, 0.14)); color: var(--wg-action-ink, #f8f6f0); border-color: var(--wg-action-edge-hover, rgba(120, 208, 216, 0.58)); box-shadow: var(--wg-action-shadow), 0 0 1rem var(--wg-action-glow, rgba(120, 208, 216, 0.18)); } .glass-button:focus-visible { box-shadow: var(--wg-action-shadow), 0 0 0 2px var(--wg-focus-ring, rgba(120, 208, 216, 0.7)); } .table-drawer .btn { isolation: isolate; border-radius: 999px; background: var(--wg-action-bg, rgba(255, 255, 255, 0.08)); color: var(--wg-action-ink, #f8f6f0); border-color: var(--wg-action-edge, rgba(255, 255, 255, 0.2)); font-weight: 600; letter-spacing: 0.005em; -webkit-backdrop-filter: blur(14px) saturate(1.14); backdrop-filter: blur(14px) saturate(1.14); box-shadow: var(--wg-action-shadow); } .table-drawer .btn::before { content: ""; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; background: var(--wg-glass-edge); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .table-drawer .btn::after { z-index: 0; background: linear-gradient(var(--wg-action-highlight, rgba(255, 255, 255, 0.16)), transparent); } .table-drawer .btn:not(:disabled):hover, .table-drawer .btn:not(:disabled):focus-visible { background: var(--wg-action-bg-hover, rgba(255, 255, 255, 0.14)); color: var(--wg-action-ink, #f8f6f0); border-color: var(--wg-action-edge-hover, rgba(120, 208, 216, 0.58)); transform: translateY(-1px); box-shadow: var(--wg-action-shadow), 0 0 1rem var(--wg-action-glow, rgba(120, 208, 216, 0.18)); } .table-drawer .btn.btn-ghost { background: color-mix(in srgb, var(--wg-action-bg, rgba(255, 255, 255, 0.08)) 74%, transparent); color: var(--wg-action-ink, #f8f6f0); border-color: var(--wg-action-edge, rgba(255, 255, 255, 0.2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } html[data-theme="light"] .glass-button, html[data-theme="light"] .glass-button-wrap:has(.glass-button:hover:not(:disabled)) .glass-button, html[data-theme="light"] .glass-button-wrap:has(.glass-button:focus-visible:not(:disabled)) .glass-button, html[data-theme="light"] .table-drawer .btn, html[data-theme="light"] .table-drawer .btn.btn-ghost { background: var(--wg-action-bg, rgba(255, 252, 247, 0.72)); color: var(--wg-action-ink, #1a1714); border-color: var(--wg-action-edge, rgba(26, 23, 20, 0.15)); box-shadow: var(--wg-action-shadow); } html[data-theme="light"] .glass-button-wrap:has(.glass-button:hover:not(:disabled)) .glass-button, html[data-theme="light"] .glass-button-wrap:has(.glass-button:focus-visible:not(:disabled)) .glass-button, html[data-theme="light"] .table-drawer .btn:not(:disabled):hover, html[data-theme="light"] .table-drawer .btn:not(:disabled):focus-visible { background: var(--wg-action-bg-hover, rgba(255, 252, 247, 0.9)); color: var(--wg-action-ink, #1a1714); border-color: var(--wg-action-edge-hover, rgba(42, 122, 134, 0.5)); box-shadow: var(--wg-action-shadow), 0 0 0.9rem var(--wg-action-glow, rgba(42, 122, 134, 0.14)); } /* ========================================================================== WESTO Guest QR Floating Waiter Call Button & Interactive Request Sheet Luxury frosted glass, unobtrusive, ergonomic, and anti-spam protected. ========================================================================== */ .westo-call-fab-wrap { position: fixed; bottom: 82px; left: 18px; z-index: 85; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; } .westo-call-fab { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 28px; background: rgba(26, 36, 44, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(245, 158, 11, 0.35); color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 0 12px rgba(245, 158, 11, 0.2); transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); -webkit-tap-highlight-color: transparent; font-family: inherit; } html[data-theme="light"] .westo-call-fab { background: rgba(255, 255, 255, 0.92); color: #1a1714; border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 0 12px rgba(245, 158, 11, 0.15); } .westo-call-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 18px rgba(245, 158, 11, 0.35); } .westo-call-fab:active { transform: scale(0.97); } .westo-call-fab .fab-icon { font-size: 18px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); } .westo-call-fab .fab-text { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; } .westo-call-fab .fab-table-badge { background: rgba(245, 158, 11, 0.2); border: 1px solid rgba(245, 158, 11, 0.4); color: #fbbf24; padding: 1px 7px; border-radius: 12px; font-size: 11px; font-weight: 800; } html[data-theme="light"] .westo-call-fab .fab-table-badge { color: #b45309; background: rgba(245, 158, 11, 0.15); } /* Active Pending State (گارسون در راه است) */ .westo-call-fab.is-calling { border-color: #10b981; background: rgba(6, 78, 59, 0.9); color: #ecfdf5; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 16px rgba(16, 185, 129, 0.35); animation: call-fab-pulse 2s infinite; } html[data-theme="light"] .westo-call-fab.is-calling { background: rgba(236, 253, 245, 0.95); color: #065f46; border-color: #10b981; } @keyframes call-fab-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } .westo-call-fab .fab-cancel-btn { margin-right: 4px; background: rgba(244, 63, 94, 0.2); border: 1px solid rgba(244, 63, 94, 0.4); color: #fecdd3; padding: 2px 7px; border-radius: 8px; font-size: 10px; font-weight: 700; cursor: pointer; } html[data-theme="light"] .westo-call-fab .fab-cancel-btn { color: #e11d48; } .westo-call-fab .fab-cancel-btn:hover { background: rgba(244, 63, 94, 0.35); } /* Call Waiter Modal Backdrop & Sheet */ .westo-call-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: flex-end; justify-content: center; padding: 0; opacity: 1; transition: opacity 0.2s ease; } .westo-call-modal[hidden] { display: none; opacity: 0; } .westo-call-sheet { background: #18222a; color: #f8fafc; border-top: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px 24px 0 0; corner-shape: squircle; width: 100%; max-width: 520px; padding: 20px 20px 28px; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 16px; animation: slide-up-sheet 0.25s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes slide-up-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } } html[data-theme="light"] .westo-call-sheet { background: #ffffff; color: #0f172a; border-top-color: rgba(0, 0, 0, 0.08); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.15); } .westo-call-sheet__head { display: flex; align-items: center; justify-content: space-between; } .sheet-title-group { display: flex; align-items: center; gap: 12px; } .sheet-title-group .sheet-icon { font-size: 26px; } .sheet-title-group h3 { margin: 0; font-size: 17px; font-weight: 900; } .sheet-title-group p { margin: 2px 0 0; font-size: 12px; color: #94a3b8; } .sheet-title-group p b { color: #fbbf24; } .sheet-close-btn { background: rgba(255, 255, 255, 0.08); border: none; width: 34px; height: 34px; border-radius: 50%; color: inherit; font-size: 14px; cursor: pointer; display: grid; place-content: center; } html[data-theme="light"] .sheet-close-btn { background: rgba(0, 0, 0, 0.05); } /* Presets Grid */ .westo-call-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .call-preset-btn { background: rgba(255, 255, 255, 0.04); border: 1.5px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 12px; text-align: right; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: all 0.18s ease; color: inherit; font-family: inherit; } html[data-theme="light"] .call-preset-btn { background: #f8fafc; border-color: #e2e8f0; } .call-preset-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(245, 158, 11, 0.4); } .call-preset-btn.active { background: rgba(245, 158, 11, 0.12); border-color: #f59e0b; box-shadow: 0 0 0 1px #f59e0b; } .call-preset-btn .p-icon { font-size: 20px; } .call-preset-btn .p-title { font-size: 13px; font-weight: 800; } .call-preset-btn small { font-size: 11px; color: #94a3b8; line-height: 1.3; } .westo-call-note-field { display: flex; flex-direction: column; gap: 6px; } .westo-call-note-field label { font-size: 12px; font-weight: 700; color: #94a3b8; } .westo-call-note-field input { width: 100%; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: inherit; font-family: inherit; font-size: 13px; outline: none; } html[data-theme="light"] .westo-call-note-field input { background: #f1f5f9; border-color: #cbd5e1; } .westo-call-note-field input:focus { border-color: #f59e0b; } .westo-call-actions { margin-top: 4px; } .westo-call-submit-btn { width: 100%; padding: 14px; border-radius: 16px; border: none; background: linear-gradient(135deg, #f59e0b, #d97706); color: #ffffff; font-family: inherit; font-size: 15px; font-weight: 900; cursor: pointer; box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .westo-call-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(245, 158, 11, 0.5); } .westo-call-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; } @media (max-width: 480px) { .westo-call-presets { grid-template-columns: 1fr; } } /* ===== END css/table.css ===== */ /* ===== BEGIN css/responsive-shell.css ===== */ /* ============================================================ Responsive shell — all devices / orientations Goal: reachable chrome, balanced hero, smooth scroll feel ============================================================ */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --hero-chrome-gap: clamp(4.75rem, 13svh, 7.5rem); --hero-label-bottom: calc(var(--hero-chrome-gap) + var(--safe-bottom)); --touch-min: 44px; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; /* App-like: block double-tap zoom; keep pan/scroll */ touch-action: manipulation; } /* CLS Prevention: reserve viewport dimensions for hero and slides */ .section.is-gamme, .gamme_container { min-height: 100vh; min-height: 100svh; contain: style layout; } .carousel_list.is-hero, .carousel_slide { min-height: clamp(240px, 40vh, 520px); } #westo-entrance .eg-promo { min-height: var(--eg-promo-h, 180px); contain: layout; } body { min-height: 100%; min-height: 100dvh; overscroll-behavior-y: none; overscroll-behavior-x: none; touch-action: manipulation; -webkit-user-select: none; user-select: none; } /* Admin / long-form pages still need text selection */ body.admin, .admin-app, .admin-pro, .legal_grid, .text-rich-text, .allow-select, [data-menu-name], [data-menu-desc], input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; } /* iOS Safari zooms focused inputs under 16px — keep app scale locked */ @media screen and (max-width: 991px) { input, textarea, select, .form_input, .input { font-size: max(16px, 1em); } } /* Viewport-fit for notched devices (meta also set in index) */ @supports (padding: max(0px)) { .navbar_component, .navbar { padding-top: max(0px, var(--safe-top)); padding-left: max(0.5rem, var(--safe-left)); padding-right: max(0.5rem, var(--safe-right)); } } /* Larger tap targets on coarse pointers */ @media (pointer: coarse) { .navbar_table, .navbar_menu-button, .navbar_button, a.navbar_link, .carousel_arrow, .menu-exp__cat, .menu-filter-chip{ min-width: var(--touch-min); min-height: var(--touch-min); } .westo-back-categories, .navbar_table, .navbar_menu-button, #nav-auth-btn { min-width: var(--nav-chip-h, 2.5rem); min-height: var(--nav-chip-h, 2.5rem); } .carousel_arrow { width: 2.85rem !important; height: 2.85rem !important; display: grid; place-items: center; } .carousel_arrow svg { width: 1.15rem; height: 1.15rem; } } .carousel_arrow { min-width: var(--touch-min) !important; min-height: var(--touch-min) !important; padding: 0; border: 0; background: transparent; -webkit-appearance: none; appearance: none; } .carousel_arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 999px; } /* ---- Hero label / peeks / cue — fluid by width ---- */ .menu-exp__hero-label { bottom: var(--hero-label-bottom) !important; max-width: min(24rem, 90vw); padding-inline: clamp(0.75rem, 3vw, 1.5rem); } .menu-exp__scroll-cue { bottom: calc(var(--safe-bottom) + 0.55rem) !important; font-size: clamp(0.58rem, 2.2vw, 0.68rem); } .carousel_pagination { width: min(78vw, 24rem) !important; margin-bottom: 0.15rem; } /* Desktop / large tablet */ @media screen and (min-width: 992px) { :root { --hero-chrome-gap: clamp(4.25rem, 9svh, 5.75rem); } .menu-exp__peek { top: 36%; width: min(26vw, 8rem); } /* Prefer menu-story desktop arrow placement; keep soft fallback closer in */ .carousel_arrow.is-prev { left: clamp(2rem, 11vw, 12.5rem) !important; } .carousel_arrow.is-next { right: clamp(2rem, 11vw, 12.5rem) !important; } } /* Tablet & phones */ @media screen and (max-width: 991px) { :root { --hero-chrome-gap: clamp(5.75rem, 17svh, 8.25rem); --menu-nav-h: calc(4.35rem + var(--safe-top)); } .menu-exp__hero-title { font-size: clamp(1.85rem, 8.5vw, 2.65rem) !important; } .menu-exp__hero-en { font-size: clamp(0.68rem, 2.8vw, 0.78rem); max-width: min(18rem, 86vw); } /* Peeks under side plates, not mid-air */ .menu-exp__peek { top: auto; bottom: calc(var(--hero-label-bottom) + 3.6rem); width: min(26vw, 6.25rem); font-size: clamp(0.62rem, 2.6vw, 0.78rem); color: rgba(236, 232, 226, 0.62); } html[data-theme='light'] .menu-exp__peek { color: #374151 !important; } .menu-exp__peek.is-prev { left: 2.5vw; } .menu-exp__peek.is-next { right: 2.5vw; } /* Arrows near edges — clear of center plate */ .carousel_arrow.is-prev { left: max(0.35rem, var(--safe-left)) !important; top: 38% !important; } .carousel_arrow.is-next { right: max(0.35rem, var(--safe-right)) !important; top: 38% !important; } .carousel_pagination { width: min(86vw, 18rem) !important; } /* Menu list cards breathe on tablet */ .menu-exp__list { padding-inline: clamp(0.75rem, 3vw, 1.25rem); } } /* Small phones */ @media screen and (max-width: 480px) { :root { --hero-chrome-gap: clamp(6.1rem, 19svh, 8.75rem); } .menu-exp__hero-title { font-size: clamp(1.65rem, 9.5vw, 2.2rem) !important; } /* Side peeks collide with title on tiny widths — hide */ .menu-exp__peek-labels { opacity: 0 !important; visibility: hidden; } .carousel_nav { padding-inline: 0.35rem; } .navbar_component .text-block, .navbar_table .text-block { font-size: 0.78rem; } } /* Very short viewports (landscape phones, browser chrome) */ @media screen and (max-height: 520px) { :root { --hero-chrome-gap: clamp(3.25rem, 18svh, 4.75rem); } .menu-exp__hero-title { font-size: clamp(1.35rem, 6vh, 1.85rem) !important; } .menu-exp__hero-en { display: none; } .menu-exp__peek-labels, .menu-exp__scroll-line { display: none; } .menu-exp__scroll-cue span:last-child { font-size: 0.55rem; } .carousel_arrow.is-prev, .carousel_arrow.is-next { top: 42% !important; } } /* Landscape tablet/phone: keep plate + label + chrome in one frame */ @media screen and (orientation: landscape) and (max-height: 560px) { :root { --hero-chrome-gap: clamp(2.85rem, 16svh, 4.25rem); } .menu-exp__hero-label { max-width: min(28rem, 70vw); } .carousel_pagination { width: min(50vw, 16rem) !important; } } /* ---- Full menu overlay: edge-to-edge on small screens ---- */ @media screen and (max-width: 767px) { } /* Sticky menu rail — respect safe top under fixed nav */ @media screen and (max-width: 991px) { .menu-exp__sticky { top: calc(var(--menu-nav-h, 4.5rem)); } } /* Prefer reduced motion: keep layout, drop motion-heavy cues */ @media (prefers-reduced-motion: reduce) { .menu-exp__scroll-line { animation: none !important; } } /* Touch scroll containers inside overlays */ .menu-exp__cats, .menu-exp__list, .table-drawer__body{ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ===== END css/responsive-shell.css ===== */ /* ===== BEGIN css/menu-story.css ===== */ /* Westo menu story — authoritative responsive geometry, loaded last. */ :root { --menu-nav-h: calc(4.65rem + env(safe-area-inset-top, 0px)); --menu-catbar-base-h: 0px; --menu-subbar-h: 0px; --menu-catbar-h: calc(var(--menu-catbar-base-h) + var(--menu-subbar-h)); --menu-catbar-gap: 0px; --menu-edge: clamp(0.65rem, 2vw, 1.25rem); --menu-rail-w: 5.5rem; --menu-rail-gap: 0.45rem; --menu-card-bottom: max(2.5rem, calc(13svh + env(safe-area-inset-bottom, 0px))); --menu-card-max: 18rem; --menu-ink: rgba(246, 242, 235, 0.96); --menu-muted: rgba(246, 242, 235, 0.68); --menu-stroke: rgba(255, 255, 255, 0.2); } /* Empty / cleared dish media must stay hidden — display:grid on .dish-board-media otherwise beats the HTML [hidden] attribute and leaves a ghost plate. */ html.is-dish-boards section.is-benefits .dish-board-media[hidden], html.is-dish-boards section.is-benefits .dish-board-media.is-empty-media { display: none !important; } /* One calm background instead of stacked gray/rainbow Ciao layers. */ body::before { background: radial-gradient(circle at 50% 38%, rgba(99, 88, 70, 0.2) 0%, transparent 36%), linear-gradient(180deg, #030405 0%, #0b0d0e 56%, #151719 100%) !important; } html.is-dish-boards body::before { background: radial-gradient(circle at 52% 34%, rgba(117, 105, 85, 0.18) 0%, transparent 32%), linear-gradient(180deg, #020304 0%, #0d0f10 55%, #181a1b 100%) !important; } html.is-dish-boards { /* Keep the secondary-tab row reserved for every category. This makes the active food stage invariant when a category does/doesn't have subgroups. */ --menu-catbar-base-h: 8.1rem; --menu-subbar-h: 2.9rem; --menu-catbar-gap: 0.75rem; /* Shared clear-line under navbar + catbar — food stage must start below this. */ --dish-chrome-top: calc( var(--menu-nav-h) + var(--menu-promo-h, 0px) + var(--menu-promo-gap, 0px) + var(--menu-catbar-gap) + var(--menu-catbar-h) + 0.35rem ); } /* Hide WebGL category plates while reading dishes — last frame otherwise ghosts behind mobile boards. During the photo-fly handoff, keep canvas painted until DOM clones cover the same photos. */ html.is-dish-boards:not(.is-cat-flying) main > canvas { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html.is-cat-flying main > canvas { pointer-events: none !important; } /* Clones are on top with the same covers — tuck canvas so plates don't double or shrink-blink. */ html.is-cat-flying.is-cat-fly-covered main > canvas { opacity: 0 !important; visibility: hidden !important; } /* During photo fly: ONLY .westo-cat-fly orbs paint food. Hard-mute every dish chrome — prevents hybrid cans+card+rail (film ~1.4s). */ html.is-cat-flying section.is-benefits, html.is-cat-flying section.is-benefits .dish-board-media, html.is-cat-flying section.is-benefits .benefits_text, html.is-cat-flying section.is-benefits .benefits_container, html.is-cat-flying section.is-benefits .benefits_container > .padding-global, html.is-cat-flying section.is-benefits .container-large, html.is-cat-flying .benefits_nav.is-menu-rail, html.is-cat-flying .westo-shared-dish, html.is-cat-flying [data-shared-dish-card] { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Catbar: hidden during timed GSAP fly; visible during scroll-driven flock. */ html.is-cat-flying:not(.is-cat-scroll-fly):not(.is-cat-fly-handoff) #westo-dish-catbar { opacity: 0 !important; pointer-events: none !important; } html.is-cat-flying.is-cat-scroll-fly #westo-dish-catbar { pointer-events: none; } html.is-cat-flying.is-cat-fly-handoff #westo-dish-catbar { opacity: 1 !important; } /* Soft dish chrome after forward land — media already under orbs. */ html.is-cat-fly-dish-in section.is-benefits .benefits_text, html.is-cat-fly-dish-in .benefits_nav.is-menu-rail, html.is-cat-fly-dish-in .westo-shared-dish, html.is-cat-fly-dish-in [data-shared-dish-card] { opacity: 0; visibility: visible; animation: westoCatDishIn 0.42s cubic-bezier(0.22, 0.61, 0.24, 1) forwards; } html.is-cat-fly-dish-in section.is-benefits, html.is-cat-fly-dish-in section.is-benefits .dish-board-media { opacity: 1 !important; visibility: visible !important; } /* While orbs still cover chip seats: show dish media under them only. */ html.is-cat-flying.is-cat-fly-media-under section.is-benefits, html.is-cat-flying.is-cat-fly-media-under section.is-benefits .dish-board-media { opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } html.is-cat-flying.is-cat-fly-media-under section.is-benefits .benefits_text, html.is-cat-flying.is-cat-fly-media-under .benefits_nav.is-menu-rail, html.is-cat-flying.is-cat-fly-media-under .westo-shared-dish, html.is-cat-flying.is-cat-fly-media-under [data-shared-dish-card] { opacity: 0 !important; visibility: hidden !important; } @keyframes westoCatDishIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Catbar strip stays mounted for measure. Cinema flock: keep infinite chips visible during fly (no 3-icon stub). Only seats covered by orbs mute their icons; the rest of the strip stays. */ html.is-cat-flying:not(.is-cat-scroll-fly) .westo-dish-catbar__label { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; animation: none !important; } html.is-cat-flying .westo-dish-catbar__chip.is-fly-seat .westo-dish-catbar__icon { opacity: 0 !important; visibility: hidden !important; } html.is-cat-flying .westo-dish-catbar.is-cinema-flock .westo-dish-catbar__chip:not(.is-fly-seat) { opacity: 1 !important; visibility: visible !important; pointer-events: none !important; animation: none !important; } html.is-cat-flying .westo-dish-catbar.is-cinema-flock .westo-dish-catbar__chip:not(.is-fly-seat) .westo-dish-catbar__icon { opacity: 1 !important; visibility: visible !important; } html.is-cat-flying .westo-dish-catbar__track { opacity: 1 !important; } /* Handoff: same photos land — show chip icons under orbs before orbs fade. */ html.is-cat-flying.is-cat-fly-handoff .westo-dish-catbar__track { opacity: 1 !important; } html.is-cat-flying.is-cat-fly-handoff .westo-dish-catbar__chip.is-fly-landed { opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } html.is-cat-flying.is-cat-fly-handoff .westo-dish-catbar__chip.is-fly-landed .westo-dish-catbar__icon { opacity: 1 !important; visibility: visible !important; } html.is-cat-flying .carousel_title-collection, html.is-cat-flying .scroll_discover, html.is-cat-flying .carousel_pagination, html.is-cat-flying .scroll_component, html.is-cat-flying .icon-scroll_wrapper, html.is-cat-flying .westo-scroll-hint--mobile, html.is-cat-flying .carousel_arrow, html.is-cat-flying .gamme_container .max-width-medium { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Soft reveal hero chrome after reverse land (Stage 11). */ html.is-cat-fly-chrome-in .carousel_title-collection, html.is-cat-fly-chrome-in .scroll_discover, html.is-cat-fly-chrome-in .carousel_pagination, html.is-cat-fly-chrome-in .scroll_component, html.is-cat-fly-chrome-in .icon-scroll_wrapper, html.is-cat-fly-chrome-in .westo-scroll-hint--mobile, html.is-cat-fly-chrome-in .carousel_arrow { opacity: 0; visibility: visible; animation: westoCatChromeIn 0.5s cubic-bezier(0.22, 0.61, 0.24, 1) forwards; } @keyframes westoCatChromeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } body::after { opacity: 0 !important; } /* Remove drink-era stage chrome; keep scroll guides on category hero. */ .gamme_gradient-wrapper, .carousel_title-bis-wrapper, .carousel_title-bis-collection, .corner-left, .corner-right { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Corner HUD letters off; animated scroll arrows stay on hero. */ .hud, .hud_container { pointer-events: none !important; } .hud_left-top, .hud_left-bottom-top, .hud_right-top, .hud_right-top-bottom, .gradient_overlay { display: none !important; } html:not(.is-dish-boards):not(.is-cat-flying) .scroll_component, html:not(.is-dish-boards):not(.is-cat-flying) .scroll_discover, html:not(.is-dish-boards):not(.is-cat-flying) .icon-scroll_wrapper { visibility: visible !important; opacity: 1 !important; pointer-events: none !important; } /* Text shimmer (vanilla port of motion TextShimmer) on scroll hint */ @keyframes westo-text-shimmer { from { background-position: 100% center; } to { background-position: 0% center; } } .scroll_discover { --shimmer-spread: 52px; --base-color: #a1a1aa; --base-gradient-color: #ffffff; --shimmer-bg: linear-gradient( 90deg, #0000 calc(50% - var(--shimmer-spread)), var(--base-gradient-color), #0000 calc(50% + var(--shimmer-spread)) ); position: relative; display: inline-block; font-size: 1.125rem !important; font-weight: 500; letter-spacing: 0.02em; color: transparent !important; -webkit-text-fill-color: transparent !important; background-image: var(--shimmer-bg), linear-gradient(var(--base-color), var(--base-color)); background-size: 250% 100%, auto; background-repeat: no-repeat, padding-box; -webkit-background-clip: text; background-clip: text; animation: westo-text-shimmer 1.2s linear infinite; } @media (prefers-reduced-motion: reduce) { .scroll_discover { animation: none; color: rgba(255, 255, 255, 0.72) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important; background-image: none; } html[data-theme="light"] .scroll_discover { color: rgba(26, 23, 20, 0.62) !important; -webkit-text-fill-color: rgba(26, 23, 20, 0.62) !important; } } /* Scroll-arrow stacks: bottom-left + bottom-right (symmetric). */ html:not(.is-dish-boards) .hud_left-bottom .icon-scroll_wrapper { position: fixed !important; left: max(1rem, env(safe-area-inset-left, 0px)) !important; right: auto !important; top: auto !important; bottom: max(3.25rem, calc(env(safe-area-inset-bottom, 0px) + 2.5rem)) !important; transform: none !important; z-index: 140; width: 1.35rem; } html:not(.is-dish-boards) .hud_right-bottom .icon-scroll_wrapper { position: fixed !important; right: max(1rem, env(safe-area-inset-right, 0px)) !important; left: auto !important; top: auto !important; bottom: max(3.25rem, calc(env(safe-area-inset-bottom, 0px) + 2.5rem)) !important; transform: none !important; z-index: 140; width: 1.35rem; } .westo-scroll-hint--mobile { display: none !important; } .westo-scroll-hint--mobile-right { display: none !important; } @media screen and (max-width: 991px) { html:not(.is-dish-boards) .hud .icon-scroll_wrapper { display: none !important; } /* Mobile owns one scroll affordance only. Center it with the explanatory copy instead of pinning duplicate stacks to both viewport edges. */ html:not(.is-dish-boards) .westo-scroll-hint--mobile:not(.westo-scroll-hint--mobile-right) { display: flex !important; position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(6.75rem, calc(env(safe-area-inset-bottom, 0px) + 6.25rem)) !important; transform: translateX(-50%) scale(.78) !important; transform-origin: 50% 100% !important; opacity: .72 !important; visibility: visible !important; z-index: 220 !important; width: 1.1rem !important; color: rgba(255, 255, 255, 0.72); pointer-events: none !important; } html:not(.is-dish-boards) .westo-scroll-hint--mobile-right, html.is-dish-boards .westo-scroll-hint--mobile, html.is-dish-boards .westo-scroll-hint--mobile-right { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* Phones already expose categories in the bottom dock and support swipe/tap. Prev/next edge arrows are redundant and create accidental targets near the bezel, so remove them only on phone widths. Tablet/desktop controls remain. */ @media screen and (max-width: 767px) { html:not(.is-dish-boards) .carousel_arrow { display: none !important; } } /* Short landscape has almost no spare vertical chrome. The textual hint + dock are sufficient; decorative chevrons would overlap the pagination/dock. */ @media screen and (max-height: 560px) and (orientation: landscape) { html:not(.is-dish-boards) .westo-scroll-hint--mobile, html:not(.is-dish-boards) .westo-scroll-hint--mobile-right, html:not(.is-dish-boards) .carousel_arrow { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* Story now ends on its final dish; legacy chapters never enter layout or paint. */ section.is-profile, section.is-argument, section.is-full-gamme, section.is-faq, section.is-last-copy, section.is-last, #newsletter, .newsletter_container, .footer_container { display: none !important; } /* Stable navbar stacking and optical center. */ .navbar { --nav-chip-h: max(2.65rem, var(--touch-min, 44px)); --nav-chip-pad-x: 0.85rem; --nav-chip-pad-icon: 0.62rem; --nav-chip-gap: 0.45rem; --nav-chip-font: 0.8125rem; --nav-chip-weight: 600; --nav-chip-tracking: 0.01em; --nav-cluster-gap: 0.42rem; --nav-icon-size: 1rem; z-index: 300 !important; min-height: var(--menu-nav-h) !important; padding-top: max(0.65rem, env(safe-area-inset-top, 0px)) !important; padding-inline: max(0.7rem, env(safe-area-inset-left, 0px)) max(0.7rem, env(safe-area-inset-right, 0px)) !important; box-sizing: border-box; } .navbar_content, .navbar_container { position: relative; width: 100%; } .navbar_container { min-height: var(--nav-chip-h); align-items: center; gap: 0.35rem; } /* Shared chip rhythm — height, type, icon/text gap */ .navbar_sound-wrapper, .navbar_menu-wrapper { display: flex !important; align-items: center; gap: var(--nav-cluster-gap) !important; min-width: 0; } .westo-back-categories, .navbar_table, .navbar_menu-button, #nav-auth-btn.button, #nav-auth-btn, button.navbar_sound.navbar_sound-toggle { box-sizing: border-box; min-height: var(--nav-chip-h); height: var(--nav-chip-h); border-radius: 999px !important; font-family: "Vazirmatn", "Geist", system-ui, sans-serif; font-size: var(--nav-chip-font); font-weight: var(--nav-chip-weight); letter-spacing: var(--nav-chip-tracking); line-height: 1; } .westo-back-categories, .navbar_table, .navbar_menu-button .navbar_menu-button-wrapper, .navbar_menu-button .westo-menu-trigger__inner, #nav-auth-btn.button, #nav-auth-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: var(--nav-chip-gap); } .westo-back-categories, .navbar_table { padding: 0 var(--nav-chip-pad-x) 0 var(--nav-chip-pad-icon) !important; } #nav-auth-btn.button, #nav-auth-btn { padding: 0 var(--nav-chip-pad-x) !important; } .navbar_menu-button { margin: 0 !important; padding: 0 !important; } .navbar_menu-button .navbar_menu-button-wrapper, .navbar_menu-button .westo-menu-trigger__inner { height: 100%; margin: 0 !important; padding: 0 var(--nav-chip-pad-x) 0 var(--nav-chip-pad-icon) !important; gap: var(--nav-chip-gap) !important; } .westo-back-categories__label, .navbar_table__label, .navbar_menu-button .text-block, .navbar_menu-button .westo-menu-trigger__label, #nav-auth-btn div { display: inline-flex; align-items: center; margin: 0; padding: 0; font: inherit; letter-spacing: inherit; line-height: 1; white-space: nowrap; } .westo-back-categories__icon, .navbar_table__icon, .navbar_menu-button .westo-menu-trigger__icon, .navbar_menu-button .icon-embed-tiny { display: inline-grid !important; place-items: center; flex: 0 0 auto; width: var(--nav-icon-size); height: var(--nav-icon-size); line-height: 0; } .westo-back-categories__icon svg, .navbar_table__icon svg, .navbar_menu-button .westo-menu-trigger__icon svg, .navbar_menu-button .icon-embed-tiny svg { width: 100%; height: 100%; display: block; } .navbar_table__icon .icon-embed-xsmall, .navbar_table__icon .w-embed { display: grid; place-items: center; width: 100%; height: 100%; line-height: 0; } .navbar_logo-link { position: absolute !important; left: 50% !important; top: 50%; width: auto !important; height: var(--nav-chip-h) !important; max-height: var(--nav-chip-h) !important; transform: translate(-50%, -50%); display: grid !important; place-items: center; z-index: 4; line-height: 0; } .navbar_logo { width: auto !important; height: calc(var(--nav-chip-h) - 0.2rem) !important; max-width: clamp(5.5rem, 22vw, 8.5rem) !important; max-height: calc(var(--nav-chip-h) - 0.2rem) !important; object-fit: contain; object-position: center; } .navbar_sound-wrapper, .navbar_menu-wrapper, #nav-auth-btn { position: relative; z-index: 5; } /* Auth pill — shared glass language */ #nav-auth-btn.button, #nav-auth-btn { border: 0 !important; background: rgba(255, 255, 255, 0.08) !important; color: var(--wg-ink, #f4efe6) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(var(--wg-blur, 12px)); backdrop-filter: blur(var(--wg-blur, 12px)); text-decoration: none; transition: transform var(--wg-hover-time, 0.22s) var(--wg-ease, cubic-bezier(0.22, 1, 0.36, 1)), background 0.22s ease; overflow: hidden; } #nav-auth-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--wg-glass-edge); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } #nav-auth-btn:hover, #nav-auth-btn:focus-visible { background: rgba(255, 255, 255, 0.14) !important; transform: translateY(-1px); outline: none; } #nav-auth-btn div { position: relative; z-index: 1; } /* Desktop: pull Table / Menu inward — stop full-bleed sparse chrome */ @media screen and (min-width: 992px) { .navbar { padding-inline: max(1.25rem, env(safe-area-inset-left, 0px)) max(1.25rem, env(safe-area-inset-right, 0px)) !important; } .navbar_content, .navbar_container { max-width: min(68rem, 94vw); margin-inline: auto; width: 100%; } .navbar_container { display: flex !important; align-items: center; justify-content: space-between; gap: 1rem; } .navbar_sound-wrapper, .navbar_menu-wrapper { flex: 0 1 auto !important; width: auto !important; max-width: none; } .navbar { --nav-chip-h: max(2.7rem, var(--touch-min, 44px)); --nav-chip-pad-x: 0.95rem; --nav-chip-pad-icon: 0.72rem; --nav-chip-gap: 0.48rem; --nav-cluster-gap: 0.5rem; } .navbar_sound-wrapper { gap: var(--nav-cluster-gap) !important; } .navbar_menu-wrapper { display: flex !important; align-items: center; justify-content: flex-end; gap: 0.55rem; margin-inline-start: auto; } .navbar_logo-link { width: clamp(7.5rem, 10vw, 9.5rem) !important; height: calc(var(--nav-chip-h) + 0.55rem) !important; max-height: calc(var(--nav-chip-h) + 0.55rem) !important; } .navbar_logo { width: 100% !important; height: 100% !important; max-width: clamp(7.5rem, 10vw, 9.5rem) !important; max-height: calc(var(--nav-chip-h) + 0.55rem) !important; } } /* The active marker belongs to the fixed hairline, not to an individual chip. */ .westo-dish-catbar { --catbar-active-left: 0px; --catbar-active-width: 0px; --catbar-active-opacity: 0; } .westo-dish-catbar::before { content: ""; position: absolute; left: var(--catbar-active-left); bottom: calc(var(--menu-subbar-h) - 0.5px); width: var(--catbar-active-width); height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--cat-accent, #78d0d8) 58%, #fff) 12%, var(--cat-accent, #78d0d8) 50%, color-mix(in srgb, var(--cat-accent, #78d0d8) 58%, #fff) 88%, transparent 100%); box-shadow: 0 0 4px color-mix(in srgb, var(--cat-accent, #78d0d8) 90%, transparent), 0 0 12px color-mix(in srgb, var(--cat-accent, #78d0d8) 62%, transparent), 0 0 22px color-mix(in srgb, var(--cat-glow, rgba(120, 208, 216, 0.55)) 70%, transparent); opacity: var(--catbar-active-opacity); pointer-events: none; z-index: 3; transition: left 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease; } @media (prefers-reduced-motion: reduce) { .westo-dish-catbar::before { transition: none; } } /* Final override: do not reserve or render the optional subcategory row. */ html.is-dish-boards { --menu-subbar-h: 0px !important; } /* Light surfaces need the dark Westo wordmark for readable contrast. */ html[data-theme="light"] .navbar_logo, html[data-theme="light"] .navbar_menu-logo { filter: none; } html[data-theme="dark"] .navbar_logo, html[data-theme="dark"] .navbar_menu-logo { filter: none; } /* Subcategories are intentionally removed from the visible menu chrome. */ html { --menu-subbar-h: 0px; } #westo-dish-catbar > .westo-dish-subbar { display: none !important; visibility: hidden !important; pointer-events: none !important; } .navbar_menu { z-index: 320 !important; } .navbar_overlay { z-index: 0 !important; pointer-events: none !important; } /* Override Webflow `.navbar_sound { display:flex; justify-content:flex-start }` which shoved the equalizer icon to the left edge of the circle. */ button.navbar_sound.navbar_sound-toggle { position: relative; width: var(--nav-chip-h); height: var(--nav-chip-h); flex: 0 0 var(--nav-chip-h); display: grid !important; place-items: center; justify-content: center; align-items: center; gap: 0; padding: 0; border: 0; background: rgba(255, 255, 255, 0.08); color: inherit; cursor: pointer; line-height: 0; overflow: hidden; backdrop-filter: blur(var(--wg-blur, 12px)); -webkit-backdrop-filter: blur(var(--wg-blur, 12px)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: transform var(--wg-hover-time, 0.22s) var(--wg-ease, cubic-bezier(0.22, 1, 0.36, 1)), background 0.22s ease; } button.navbar_sound.navbar_sound-toggle::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--wg-glass-edge); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } button.navbar_sound.navbar_sound-toggle:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); } button.navbar_sound.navbar_sound-toggle svg { display: block; width: 0.9rem; height: 0.55rem; margin: 0; flex: none; overflow: visible; } button.navbar_sound.navbar_sound-toggle.is-muted { opacity: 0.5; } button.navbar_sound.navbar_sound-toggle.is-muted rect { height: 2px !important; y: 3px !important; } /* Dish board visibility is controlled by table-cart, not Three.js. */ html.is-dish-boards section.is-benefits .benefits_container { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html.is-dish-boards section.is-benefits.is-dish-active .benefits_container { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } html:not(.is-dish-boards) section.is-benefits .benefits_container, html:not(.is-dish-boards) .benefits_nav.is-menu-rail { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Rail always owns a real gutter — independently scrollable (Lenis-prevented). */ html.is-dish-boards .benefits_nav.is-menu-rail { position: fixed !important; z-index: 180 !important; top: calc(var(--menu-nav-h) + var(--menu-catbar-gap) + var(--menu-catbar-h) + 0.15rem) !important; right: max(0.15rem, env(safe-area-inset-right, 0px)) !important; bottom: max(0.55rem, env(safe-area-inset-bottom, 0px)) !important; left: auto !important; width: var(--menu-rail-w) !important; height: auto !important; max-height: none !important; display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.32rem; padding: 0.35rem 0.18rem; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; box-sizing: border-box; } html.is-dish-boards .benefits_nav.is-menu-rail::-webkit-scrollbar { display: none; } html.is-dish-boards .benefits_nav.is-menu-rail.is-rail-solo { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .benefits_nav.is-menu-rail .benefits_icon-wrapper { position: relative; width: calc(var(--menu-rail-w) - 0.4rem) !important; min-width: 0 !important; min-height: 5.95rem; height: auto !important; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.32rem; padding: 0.32rem 0.12rem !important; border: 0; border-radius: 0.9rem; background: transparent; box-shadow: none; box-sizing: border-box; isolation: isolate; overflow: visible; transition: transform 0.2s ease, opacity 0.2s ease; } .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active, .benefits_nav.is-menu-rail .benefits_icon-wrapper.w--current { border: 0; background: transparent; box-shadow: none; transform: none !important; } /* Animated border — liquid metal ring (active dish only); legacy glow removed */ .benefits_nav.is-menu-rail .benefits_rail-border:not(.benefits_rail-border--liquid) { display: none !important; } .benefits_nav.is-menu-rail .benefits_icon { position: relative; width: 3.65rem !important; height: 3.65rem !important; flex: 0 0 3.65rem; border-radius: 999px !important; overflow: visible; background: transparent; box-shadow: none; outline: none; } .benefits_nav.is-menu-rail .benefits_dish-thumb { width: 100%; height: 100%; object-fit: cover !important; border-radius: 999px; box-shadow: none; background: transparent; } .benefits_nav.is-menu-rail .benefits_dish-thumb.is-image-frame { object-fit: cover !important; border-radius: 999px; } .benefits_nav.is-menu-rail .benefits_rail-label { display: -webkit-box !important; width: 100%; max-width: none !important; min-height: 1.5em; margin: 0 !important; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; color: rgba(245, 241, 234, 0.62); font-size: 0.84rem !important; font-weight: 520; line-height: 1.3 !important; text-align: center; direction: inherit; unicode-bidi: isolate; } .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active .benefits_rail-label { color: rgba(245, 241, 234, 0.94); } .benefits_nav.is-menu-rail .benefits_icon-separator { display: none !important; } /* Mobile and tablet — φ composition: food (major) above fixed card (minor). */ @media screen and (max-width: 991px) { html.is-dish-boards { --dish-rail-w: var(--menu-rail-w); --dish-rail-gap: var(--menu-rail-gap); --phi: 1.618; --phi-major: 0.618; --phi-minor: 0.382; --dish-chrome-top: calc( var(--menu-nav-h) + var(--menu-promo-h, 0px) + var(--menu-promo-gap, 0px) + var(--menu-catbar-gap) + var(--menu-catbar-h) ); --dish-safe-bottom: max(0.7rem, env(safe-area-inset-bottom, 0px)); --dish-body-h: calc(100dvh - var(--dish-chrome-top) - var(--dish-safe-bottom)); /* Card = φ-minor band with room for readable type (was crushing copy) */ --dish-info-h: clamp(13.75rem, calc(0.42 * var(--dish-body-h)), 16.5rem); --menu-card-bottom: var(--dish-safe-bottom); --dish-media-gap: 0.7rem; --dish-card-stack: calc(var(--dish-info-h) + var(--menu-card-bottom) + var(--dish-media-gap)); } /* Rail ends above the dish card — never overlaps the glass panel */ html.is-dish-boards .benefits_nav.is-menu-rail { bottom: var(--dish-card-stack) !important; } html.is-dish-boards section.is-benefits .benefits_container, html.is-dish-boards section.is-benefits.is-dish-active .benefits_container { position: fixed !important; inset: 0 !important; display: block !important; padding: 0 !important; } html.is-dish-boards section.is-benefits .benefits_container > .padding-global, html.is-dish-boards section.is-benefits .container-large, html.is-dish-boards section.is-benefits .padding-section-medium { display: contents !important; } /* Food stage: φ-major band between catbar and card — same for all dishes */ html.is-dish-boards section.is-benefits .dish-board-media { position: fixed !important; z-index: 1; top: var(--dish-chrome-top) !important; left: var(--menu-edge) !important; right: calc(var(--menu-rail-w) + var(--menu-rail-gap) + var(--menu-edge)) !important; bottom: var(--dish-card-stack) !important; width: auto !important; height: auto !important; display: grid !important; place-items: center !important; align-content: center !important; margin: 0 !important; padding: 0 !important; pointer-events: none; } html.is-dish-boards section.is-benefits .dish-board-media img { display: block; width: min(100%, 78vw) !important; height: min(100%, calc(var(--phi-major) * var(--dish-body-h))) !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } html.is-dish-boards section.is-benefits .dish-board-media img.is-image-frame { width: min(92%, 72vw) !important; height: min(92%, calc(var(--phi-major) * var(--dish-body-h) * 0.92)) !important; object-fit: cover !important; border-radius: 1.15rem; } } @media screen and (min-width: 768px) and (max-width: 991px) { :root { --menu-rail-w: 6.8rem; --menu-card-max: 20rem; } html.is-dish-boards { --dish-info-h: clamp(14.5rem, calc(0.4 * var(--dish-body-h)), 17rem); } .benefits_nav.is-menu-rail .benefits_icon { width: 3.95rem !important; height: 3.95rem !important; flex-basis: 3.95rem; } .benefits_nav.is-menu-rail .benefits_rail-label { font-size: 0.94rem !important; } } /* Desktop: card, food and rail each own a column. */ @media screen and (min-width: 992px) { :root { --menu-nav-h: calc(5rem + env(safe-area-inset-top, 0px)); --menu-rail-w: clamp(7.8rem, 9.4vw, 9.7rem); --menu-rail-gap: clamp(0.85rem, 1.6vw, 1.6rem); --menu-card-w: clamp(21rem, 29vw, 29rem); } html.is-dish-boards { --dish-rail-w: var(--menu-rail-w); --dish-card-w: var(--menu-card-w); } html.is-dish-boards section.is-benefits .benefits_container, html.is-dish-boards section.is-benefits.is-dish-active .benefits_container { position: fixed !important; inset: 0 !important; display: block !important; } html.is-dish-boards section.is-benefits .benefits_container > .padding-global, html.is-dish-boards section.is-benefits .container-large, html.is-dish-boards section.is-benefits .padding-section-medium { display: contents !important; } html.is-dish-boards section.is-benefits .dish-board-media { position: absolute !important; z-index: 1; /* Must clear fixed catbar — was nav+1rem and bled under category chips. */ top: var(--dish-chrome-top) !important; right: calc(var(--menu-rail-w) + var(--menu-rail-gap)) !important; bottom: clamp(2rem, 5vh, 4rem) !important; left: calc(var(--menu-card-w) + clamp(4rem, 7vw, 8rem)) !important; width: auto !important; height: auto !important; display: grid; place-items: center; margin: 0 !important; overflow: hidden; } html.is-dish-boards section.is-benefits .dish-board-media img { width: min(100%, 48rem) !important; height: min(74vh, 48rem) !important; max-width: 100%; max-height: 100%; object-fit: contain !important; filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, 0.4)); } html.is-dish-boards section.is-benefits .dish-board-media img.is-image-frame { width: min(42vw, 38rem) !important; height: min(66vh, 38rem) !important; object-fit: cover !important; border-radius: 1.5rem; } html.is-dish-boards section.is-benefits .benefits_text, html.is-dish-boards section.is-benefits.is-dish-active .benefits_text { position: absolute !important; z-index: 20; top: 50% !important; right: auto !important; bottom: auto !important; left: clamp(2rem, 4vw, 5rem) !important; width: var(--menu-card-w) !important; max-width: var(--menu-card-w) !important; max-height: min(72vh, 36rem) !important; padding: clamp(1.2rem, 2vw, 1.6rem) !important; overflow: auto !important; transform: translateY(-50%) !important; text-align: center !important; border-radius: 1.45rem; } html.is-dish-boards section.is-benefits .benefits_max-width { align-items: center !important; gap: 0.65rem !important; text-align: center !important; } html.is-dish-boards section.is-benefits .benefits_text h2, html.is-dish-boards section.is-benefits .benefits_text [data-menu-name] { font-size: clamp(1.5rem, 2vw, 2rem) !important; line-height: 1.3 !important; margin: 0.2rem auto 0.35rem !important; text-align: center !important; } html.is-dish-boards section.is-benefits .benefits_text p[data-menu-desc] { max-width: 36ch !important; margin: 0 auto 0.5rem !important; color: var(--menu-muted); font-size: 0.9rem !important; line-height: 1.6 !important; text-align: center !important; } .benefits_nav.is-menu-rail .benefits_icon-wrapper { min-height: 7rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .benefits_nav.is-menu-rail .benefits_icon { width: 4.15rem !important; height: 4.15rem !important; flex-basis: 4.15rem; border-radius: 0; overflow: visible; } .benefits_nav.is-menu-rail .benefits_rail-label { font-size: 0.96rem !important; } } /* Short landscape: prioritize complete food and reachable actions. */ @media screen and (orientation: landscape) and (max-height: 600px) { :root { --menu-nav-h: calc(3.8rem + env(safe-area-inset-top, 0px)); --menu-card-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px)); } html.is-dish-boards section.is-benefits .benefits_container, html.is-dish-boards section.is-benefits.is-dish-active .benefits_container { display: block !important; } html.is-dish-boards section.is-benefits .dish-board-media { position: absolute !important; top: var(--dish-chrome-top) !important; right: calc(var(--menu-rail-w) + var(--menu-rail-gap)) !important; bottom: 0.75rem !important; left: calc(min(40vw, 22rem) + 3rem) !important; padding-bottom: 0; } html.is-dish-boards section.is-benefits .dish-board-media img { width: min(48vw, 23rem) !important; height: min(76vh, 23rem) !important; } html.is-dish-boards section.is-benefits .benefits_text, html.is-dish-boards section.is-benefits.is-dish-active .benefits_text { position: absolute !important; top: calc(var(--dish-chrome-top) + (100dvh - var(--dish-chrome-top)) * 0.5) !important; right: auto !important; bottom: auto !important; left: max(0.75rem, env(safe-area-inset-left, 0px)) !important; width: min(40vw, 22rem) !important; max-width: min(40vw, 22rem) !important; max-height: calc(100dvh - var(--dish-chrome-top) - 1.25rem) !important; transform: translateY(-50%) !important; overflow: auto !important; } } @media screen and (max-width: 479px) { :root { --menu-edge: 0.65rem; --menu-rail-w: 5.05rem; --menu-card-max: 16.5rem; } .navbar { --nav-chip-h: max(2.55rem, var(--touch-min, 44px)); --nav-chip-pad-x: 0.72rem; --nav-chip-pad-icon: 0.55rem; --nav-chip-gap: 0.38rem; --nav-chip-font: 0.78rem; --nav-cluster-gap: 0.34rem; --nav-icon-size: 0.95rem; } /* Dish boards keep φ bottom — do not lift the glass card into the plate */ html.is-dish-boards { --menu-card-bottom: var(--dish-safe-bottom, max(0.7rem, env(safe-area-inset-bottom, 0px))); } .westo-back-categories__label, #nav-table-btn .navbar_table__label, #nav-table-btn > div:first-child { display: none !important; } .westo-back-categories, .navbar_table { width: var(--nav-chip-h); min-width: var(--nav-chip-h); padding: 0 !important; justify-content: center; gap: 0; } html.is-dish-boards section.is-benefits .dish-board-media img { width: min(78vw, 22rem) !important; height: min(46svh, 22rem) !important; } html.is-dish-boards section.is-benefits .benefits_text, html.is-dish-boards section.is-benefits.is-dish-active .benefits_text { max-height: min(31svh, var(--menu-card-max)) !important; padding: 0.72rem !important; } } /* Desktop hero stage: keep title + progress aligned under the active plate */ @media screen and (min-width: 992px) { html:not(.is-dish-boards) section.is-gamme .gamme_container { padding-bottom: clamp(3.75rem, 7.5vh, 5.75rem) !important; } html:not(.is-dish-boards) .carousel_title-collection { max-width: min(32rem, 42vw); margin-inline: auto; text-align: center; } html:not(.is-dish-boards) .carousel_list.is-hero .heading-style-h2 { letter-spacing: -0.02em; text-shadow: 0 0.35rem 1.5rem rgba(0, 0, 0, 0.45); font-size: clamp(2rem, 3.4vw, 2.65rem) !important; } html:not(.is-dish-boards) .carousel_pagination { max-width: min(22rem, 34vw); width: min(22rem, 34vw) !important; margin-inline: auto; margin-top: 0.35rem; } html:not(.is-dish-boards) main > canvas { /* Optical center sits slightly above mid so plate clears the title */ transform: translateY(-3.2vh); } html:not(.is-dish-boards) .scroll_discover { font-size: 1.05rem !important; letter-spacing: 0.015em; margin-top: 0.35rem !important; } } @media screen and (min-width: 992px) and (max-height: 700px) { html:not(.is-dish-boards) main > canvas { transform: translateY(-1.2vh) scale(0.88); transform-origin: 50% 40%; } html:not(.is-dish-boards) section.is-gamme .gamme_container { padding-bottom: 2.5rem !important; } html:not(.is-dish-boards) .carousel_list.is-hero .heading-style-h2 { font-size: clamp(1.55rem, 3.1vh, 2.1rem) !important; } } /* ——— Westo navbar night-service menu ——— */ html.is-nav-menu-open { overflow: hidden; } html.is-nav-menu-open body { overflow: hidden; touch-action: none; } html.is-nav-menu-open .scroll_discover, html.is-nav-menu-open .carousel_nav, html.is-nav-menu-open .carousel_list.is-hero, html.is-nav-menu-open .carousel_title-collection, html.is-nav-menu-open .benefits_nav, html.is-nav-menu-open .dish-board, html.is-nav-menu-open main > canvas { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .navbar_menu-scrim { position: fixed !important; inset: 0 !important; z-index: 100100 !important; margin: 0; padding: 0; border: 0; background: rgba(3, 4, 5, 0.72); -webkit-backdrop-filter: blur(14px) saturate(0.85); backdrop-filter: blur(14px) saturate(0.85); cursor: pointer; } /* Mobile / weak devices: blur+grain during circle reveal is the hitch. */ @media screen and (max-width: 991px) { .navbar_menu-scrim { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(3, 4, 5, 0.88); } .navbar_menu-orb { filter: none; opacity: 0.22; } .navbar_menu-grain { display: none; } .navbar_menu-mascot { filter: none; } .navbar_menu { will-change: auto; } } html.is-nav-menu-lite .navbar_menu-scrim, html.is-nav-menu-animating .navbar_menu-scrim { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.is-nav-menu-lite .navbar_menu-orb, html.is-nav-menu-animating .navbar_menu-orb { display: none; } html.is-nav-menu-lite .navbar_menu-grain, html.is-nav-menu-animating .navbar_menu-grain { display: none; } html.is-nav-menu-animating .navbar_menu { contain: paint; } .navbar_menu { --nm-ink: #f6f1e8; --nm-muted: rgba(246, 241, 232, 0.55); --nm-line: rgba(246, 241, 232, 0.14); --nm-gold: #78d0d8; --nm-gold-soft: rgba(120, 208, 216, 0.35); --nm-panel: #0a0b0d; position: fixed !important; inset: 0 !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: 100vw !important; max-width: none !important; height: 100svh !important; margin: 0 !important; transform: none !important; z-index: 100110 !important; display: none; flex-flow: column !important; justify-content: stretch !important; align-items: stretch !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: var(--nm-panel) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; isolation: isolate; } .navbar_menu-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .navbar_menu-wash { position: absolute; inset: 0; background: radial-gradient(ellipse 95% 70% at 80% -5%, rgba(120, 208, 216, 0.3), transparent 52%), radial-gradient(ellipse 75% 55% at 5% 105%, rgba(74, 92, 68, 0.28), transparent 48%), radial-gradient(circle at 50% 45%, rgba(255, 240, 210, 0.04), transparent 40%), linear-gradient(165deg, #16141a 0%, #0b0c10 40%, #070809 100%); } .navbar_menu-orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.55; } .navbar_menu-orb--a { width: 18rem; height: 18rem; top: 12%; left: -4rem; background: rgba(120, 208, 216, 0.28); } .navbar_menu-orb--b { width: 22rem; height: 22rem; right: -6rem; bottom: 8%; background: rgba(92, 120, 98, 0.22); } .navbar_menu-grain { position: absolute; inset: 0; opacity: 0.28; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } .navbar_menu-watermark { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-12deg); font-family: "Franklin Gothic Atf", "Geist", sans-serif; font-weight: 700; font-size: clamp(5.5rem, 28vw, 12rem); letter-spacing: 0.12em; color: transparent; -webkit-text-stroke: 1px rgba(120, 208, 216, 0.11); white-space: nowrap; user-select: none; pointer-events: none; } .navbar_menu-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; width: min(100%, 28rem); height: 100%; margin-inline: auto; padding: max(1rem, env(safe-area-inset-top, 0px)) clamp(1.25rem, 5vw, 1.85rem) max(1.1rem, env(safe-area-inset-bottom, 0px)); direction: rtl; gap: 0.5rem; } .navbar_menu-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-top: 0.35rem; } .navbar_theme { display: flex; align-items: center; gap: 0.35rem; width: fit-content; margin: 0; padding: 0.28rem; border-radius: 999px; border: 1px solid var(--nm-line); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .navbar_prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; width: 100%; margin: 0.15rem 0 0.35rem; } /* TEMP: manual Cloudflare / PWA cache wipe */ .navbar_menu-sound.navbar_sound.navbar_sound-toggle { position: relative; width: auto; height: auto; min-height: 2.35rem; flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.42rem 0.78rem 0.42rem 0.7rem; border: 1px solid var(--nm-line); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--nm-ink); cursor: pointer; line-height: 1; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none; font-family: "Vazirmatn", "Geist", sans-serif; font-size: 0.74rem; font-weight: 600; transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; } .navbar_menu-sound.navbar_sound.navbar_sound-toggle::before { display: none; } .navbar_menu-sound.navbar_sound.navbar_sound-toggle:hover, .navbar_menu-sound.navbar_sound.navbar_sound-toggle:focus-visible { color: var(--nm-ink); background: rgba(255, 255, 255, 0.08); transform: none; outline: none; } .navbar_menu-sound.navbar_sound.navbar_sound-toggle.is-muted { color: var(--nm-muted); opacity: 0.85; } .navbar_menu-sound.navbar_sound.navbar_sound-toggle svg { width: 0.95rem; height: 0.55rem; flex: 0 0 auto; } .navbar_menu-sound__label { line-height: 1; white-space: nowrap; } .navbar_theme-btn { appearance: none; display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.42rem 0.68rem; border: 0; border-radius: 999px; background: transparent; color: var(--nm-muted); font-family: "Vazirmatn", "Geist", sans-serif; font-size: 0.74rem; font-weight: 600; cursor: pointer; transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .navbar_theme-btn:hover, .navbar_theme-btn:focus-visible { color: var(--nm-ink); outline: none; } .navbar_theme-btn.is-active, .navbar_theme-btn[aria-pressed="true"] { color: var(--nm-ink); background: linear-gradient(160deg, rgba(120, 208, 216, 0.22), rgba(255, 255, 255, 0.06)); box-shadow: inset 0 0 0 1px var(--nm-gold-soft); } .navbar_theme-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); } .navbar_theme-dot--dark { background: #121416; box-shadow: 0 0 0 1px rgba(246, 241, 232, 0.35); } .navbar_theme-dot--light { background: #f3eee6; box-shadow: 0 0 0 1px rgba(26, 23, 20, 0.28); } .navbar_theme-dot--system { background: linear-gradient(90deg, #121416 0 50%, #f3eee6 50% 100%); box-shadow: 0 0 0 1px rgba(246, 241, 232, 0.28); } .navbar_menu-close { appearance: none; display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.55rem 0.85rem 0.55rem 0.7rem; border: 1px solid var(--nm-line); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--nm-ink); font-family: "Vazirmatn", "Geist", sans-serif; font-size: 0.78rem; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .navbar_menu-close:hover, .navbar_menu-close:focus-visible { background: rgba(255, 255, 255, 0.08); border-color: var(--nm-gold-soft); outline: none; transform: translateY(-1px); } .navbar_menu-close-x { position: relative; width: 0.7rem; height: 0.7rem; display: block; } .navbar_menu-close-x::before, .navbar_menu-close-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; } .navbar_menu-close-x::before { transform: translate(-50%, -50%) rotate(45deg); } .navbar_menu-close-x::after { transform: translate(-50%, -50%) rotate(-45deg); } .navbar_menu-head { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; text-align: left; } .navbar_menu-brand { font-family: "Franklin Gothic Atf", "Geist", sans-serif; font-weight: 700; font-size: clamp(1.15rem, 3.8vw, 1.55rem); letter-spacing: 0.46em; color: var(--nm-gold); text-indent: 0.46em; line-height: 1; text-shadow: 0 0 28px rgba(120, 208, 216, 0.35); } .navbar_menu-tagline { font-family: "Vazirmatn", "Geist", sans-serif; font-size: 0.78rem; color: var(--nm-muted); position: relative; padding-inline-end: 0.85rem; } .navbar_menu-tagline::after { content: ""; position: absolute; right: 0; top: 50%; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--nm-gold); transform: translateY(-50%); box-shadow: 0 0 12px rgba(120, 208, 216, 0.7); } .navbar_menu .navbar_link-list { display: flex; flex-direction: column; width: 100%; gap: 0.35rem; flex: 1 1 auto; justify-content: center; padding: 0.5rem 0; } .navbar_menu .navbar_link { display: flex !important; flex-direction: column; align-items: stretch; gap: 0.65rem; width: 100%; padding: 1.25rem 0.15rem 1.35rem !important; border: 0 !important; border-bottom: 1px solid var(--nm-line) !important; color: var(--nm-ink) !important; text-transform: none !important; text-decoration: none; font-size: inherit !important; font-weight: 400 !important; line-height: 1; position: relative; overflow: hidden; transition: color 0.3s ease; } .navbar_menu .navbar_link:first-child { border-top: 1px solid var(--nm-line) !important; padding-top: 1.35rem !important; } .navbar_menu .navbar_link::before { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--nm-gold), transparent); transform: scaleX(0); transform-origin: center; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .navbar_link-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .navbar_link-index { font-family: "Franklin Gothic Atf", "Geist", sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; color: var(--nm-gold); } .navbar_link-hint { font-family: "Vazirmatn", "Geist", sans-serif; font-size: 0.78rem !important; font-weight: 400 !important; color: var(--nm-muted) !important; } .navbar_link-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .navbar_link-label { display: block; overflow: hidden; font-family: "Vazirmatn", "Geist", sans-serif; font-size: clamp(2.85rem, 12vw, 3.85rem) !important; font-weight: 700 !important; letter-spacing: -0.03em; line-height: 1.02; } .navbar_link-arrow { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--nm-line); background: linear-gradient(135deg, rgba(120, 208, 216, 0.16), transparent 60%), rgba(255, 255, 255, 0.03); position: relative; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, background 0.3s ease; } .navbar_link-arrow::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0.55rem; height: 0.55rem; border-right: 1.5px solid var(--nm-ink); border-bottom: 1.5px solid var(--nm-ink); transform: rotate(135deg); transition: border-color 0.3s ease; } .navbar_menu .navbar_link:hover, .navbar_menu .navbar_link:focus-visible { color: var(--nm-ink) !important; outline: none; filter: brightness(1.08); } .navbar_menu .navbar_link:hover::before, .navbar_menu .navbar_link:focus-visible::before { transform: scaleX(1); } .navbar_menu .navbar_link:hover .navbar_link-arrow, .navbar_menu .navbar_link:focus-visible .navbar_link-arrow { transform: translateX(-0.25rem) scale(1.05); border-color: var(--nm-gold-soft); background: rgba(120, 208, 216, 0.18); } .navbar_menu .navbar_middle { display: flex !important; justify-content: center; align-items: center; padding: 0.25rem 0 0.5rem; color: rgba(246, 241, 232, 0.92); pointer-events: none; } .navbar_menu-mascot { width: auto; height: auto; display: grid; place-items: center; padding: 0.35rem 0; filter: drop-shadow(0 0 26px rgba(120, 208, 216, 0.4)); animation: westo-mascot-breathe 4.5s ease-in-out infinite; } .navbar_menu-logo { display: block; width: clamp(7rem, 36vw, 10rem); height: auto; object-fit: contain; user-select: none; pointer-events: none; } .navbar_menu-mascot .icon-embed-medium { width: 100%; height: 100%; } @keyframes westo-mascot-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .navbar_menu .navbar_bottom { display: flex !important; flex-direction: column; gap: 1rem; width: 100%; padding-bottom: 0.35rem; } .navbar_menu .navbar_contact, .navbar_menu a.navbar_contact { display: flex !important; align-items: center; justify-content: space-between; width: 100%; padding: 1.05rem 1.2rem; border-radius: 1.15rem; text-decoration: none; color: #1b1712 !important; background: linear-gradient(135deg, #f3ead8 0%, #e2d3b8 48%, #d8c6a4 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 14px 36px rgba(0, 0, 0, 0.35); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease; } .navbar_menu .navbar_contact:hover, .navbar_menu .navbar_contact:focus-visible { transform: translateY(-2px) scale(1.01); filter: brightness(1.04); outline: none; } .navbar_contact-label { font-family: "Vazirmatn", "Geist", sans-serif; font-weight: 700; font-size: 1.05rem; } .navbar_contact-mark { color: #8a6a32; font-size: 0.95rem; } .navbar_menu .navbar_socials-links { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.5rem; } .navbar_menu .navbar_social { font-family: "Vazirmatn", "Geist", sans-serif; font-size: 0.78rem; color: var(--nm-ink); text-decoration: none; padding: 0.45rem 0.15rem; border-bottom: 1px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; } .navbar_menu .navbar_social:hover, .navbar_menu .navbar_social:focus-visible { color: var(--nm-gold); border-bottom-color: var(--nm-gold-soft); outline: none; } .navbar_menu-copy { font-family: "Franklin Gothic Atf", "Geist", sans-serif; font-size: 0.68rem; letter-spacing: 0.18em; color: var(--nm-muted) !important; } /* ---- Light theme: drawer only (hero / gate stay dark) ---- */ html[data-theme="light"] .navbar_menu { --nm-ink: #1a1714; --nm-muted: rgba(26, 23, 20, 0.58); --nm-line: rgba(26, 23, 20, 0.12); --nm-gold: #2a7a86; --nm-gold-soft: rgba(42, 122, 134, 0.42); --nm-panel: #f3eee6; } html[data-theme="light"] .navbar_menu-scrim { background: rgba(243, 238, 230, 0.55); } html[data-theme="light"] .navbar_menu-wash { background: radial-gradient(ellipse 95% 70% at 80% -5%, rgba(42, 122, 134, 0.22), transparent 52%), radial-gradient(ellipse 75% 55% at 5% 105%, rgba(120, 140, 110, 0.16), transparent 48%), radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.45), transparent 42%), linear-gradient(165deg, #f7f2ea 0%, #efe8dc 42%, #e7dfd2 100%); } html[data-theme="light"] .navbar_menu-orb--a { background: rgba(42, 122, 134, 0.32); } html[data-theme="light"] .navbar_menu-orb--b { background: rgba(110, 130, 100, 0.2); } html[data-theme="light"] .navbar_menu-grain { opacity: 0.16; mix-blend-mode: multiply; } html[data-theme="light"] .navbar_menu-watermark { -webkit-text-stroke: 1px rgba(42, 122, 134, 0.16); } html[data-theme="light"] .navbar_menu-brand { text-shadow: 0 0 22px rgba(42, 122, 134, 0.28); } html[data-theme="light"] .navbar_theme { background: rgba(26, 23, 20, 0.04); } html[data-theme="light"] .navbar_menu-sound.navbar_sound.navbar_sound-toggle { background: rgba(26, 23, 20, 0.04); color: var(--nm-ink); } html[data-theme="light"] .navbar_menu-sound.navbar_sound.navbar_sound-toggle:hover, html[data-theme="light"] .navbar_menu-sound.navbar_sound.navbar_sound-toggle:focus-visible { background: rgba(26, 23, 20, 0.08); } html[data-theme="light"] .navbar_theme-btn.is-active, html[data-theme="light"] .navbar_theme-btn[aria-pressed="true"] { background: linear-gradient(160deg, rgba(42, 122, 134, 0.28), rgba(255, 255, 255, 0.55)); } html[data-theme="light"] .navbar_menu-close { background: rgba(26, 23, 20, 0.04); } html[data-theme="light"] .navbar_menu-close:hover, html[data-theme="light"] .navbar_menu-close:focus-visible { background: rgba(26, 23, 20, 0.07); } html[data-theme="light"] .navbar_link-arrow { background: linear-gradient(135deg, rgba(42, 122, 134, 0.2), transparent 60%), rgba(26, 23, 20, 0.03); } html[data-theme="light"] .navbar_menu .navbar_link:hover .navbar_link-arrow, html[data-theme="light"] .navbar_menu .navbar_link:focus-visible .navbar_link-arrow { background: rgba(42, 122, 134, 0.2); } html[data-theme="light"] .navbar_menu .navbar_middle { color: rgba(26, 23, 20, 0.9); } html[data-theme="light"] .navbar_menu-mascot { filter: drop-shadow(0 0 18px rgba(42, 122, 134, 0.28)); } html[data-theme="light"] .navbar_menu .navbar_contact, html[data-theme="light"] .navbar_menu a.navbar_contact { color: #f6f1e8 !important; background: linear-gradient(135deg, #2a241c 0%, #1a1714 52%, #12100e 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 14px 32px rgba(26, 23, 20, 0.18); } html[data-theme="light"] .navbar_contact-mark { color: var(--nm-gold); } .navbar_menu-button { position: relative; z-index: 100120; transition: transform var(--wg-hover-time, 0.22s) var(--wg-ease, cubic-bezier(0.22, 1, 0.36, 1)), background 0.22s ease; appearance: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgba(255, 255, 255, 0.08); color: inherit; cursor: pointer; overflow: hidden; -webkit-backdrop-filter: blur(var(--wg-blur, 12px)); backdrop-filter: blur(var(--wg-blur, 12px)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); } .navbar_menu-button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--wg-glass-edge); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .navbar_menu-button .westo-menu-trigger__icon, .navbar_menu-button .icon-embed-tiny { --nav-icon-size: 0.78rem; } .navbar_menu-button:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); } .navbar_menu-button.is-open { transform: translateY(-1px); background: rgba(255, 255, 255, 0.14); } .navbar_menu-button.is-open .text-block { opacity: 0.4; } /* Mobile / tablet sheet: denser so contact + socials stay on-screen. */ @media screen and (max-width: 991px) { .navbar_menu-inner { gap: 0.28rem; justify-content: flex-start; padding: max(0.7rem, env(safe-area-inset-top, 0px)) clamp(1rem, 4.5vw, 1.55rem) max(0.75rem, env(safe-area-inset-bottom, 0px)); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .navbar_menu-topbar { gap: 0.65rem; padding-top: 0.12rem; flex-shrink: 0; } .navbar_menu-brand { font-size: clamp(1rem, 3.4vw, 1.35rem); letter-spacing: 0.4em; text-indent: 0.4em; } .navbar_menu-tagline { font-size: 0.7rem; } .navbar_menu-close { padding: 0.42rem 0.7rem 0.42rem 0.58rem; font-size: 0.7rem; } .navbar_prefs { margin: 0.05rem 0 0.12rem; gap: 0.35rem; flex-shrink: 0; } .navbar_theme { margin: 0; padding: 0.18rem; gap: 0.18rem; flex-shrink: 0; } .navbar_theme-btn { padding: 0.32rem 0.48rem; font-size: 0.66rem; gap: 0.28rem; } .navbar_theme-dot { width: 0.48rem; height: 0.48rem; } .navbar_menu-sound.navbar_sound.navbar_sound-toggle { min-height: 2.05rem; padding: 0.32rem 0.62rem 0.32rem 0.55rem; font-size: 0.66rem; gap: 0.32rem; } .navbar_menu .navbar_link-list { flex: 0 1 auto; justify-content: flex-start; gap: 0.12rem; padding: 0.12rem 0 0.05rem; min-height: 0; } .navbar_menu .navbar_link { gap: 0.38rem; padding: 0.78rem 0.1rem 0.82rem !important; } .navbar_menu .navbar_link:first-child { padding-top: 0.82rem !important; } .navbar_link-index { font-size: 0.6rem; } .navbar_link-hint { font-size: 0.68rem !important; } .navbar_link-label { font-size: clamp(2.15rem, 9.2vw, 3.05rem) !important; } .navbar_link-arrow { width: 1.95rem; height: 1.95rem; flex: 0 0 1.95rem; } .navbar_menu .navbar_middle { padding: 0.05rem 0 0.15rem; flex-shrink: 0; } .navbar_menu-mascot { padding: 0.15rem 0; } .navbar_menu-logo { width: clamp(3.5rem, 15vw, 4.85rem); } .navbar_menu .navbar_bottom { gap: 0.65rem; margin-top: auto; padding-top: 0.35rem; padding-bottom: 0.1rem; flex-shrink: 0; } .navbar_menu .navbar_contact, .navbar_menu a.navbar_contact { padding: 0.78rem 1rem; border-radius: 1rem; } .navbar_contact-label { font-size: 0.95rem; } .navbar_contact-mark { font-size: 0.85rem; } .navbar_menu .navbar_social { font-size: 0.72rem; padding: 0.35rem 0.1rem; } .navbar_menu-copy { font-size: 0.6rem; } } /* Short phones: drop mascot, tighten links further so socials never clip. */ @media screen and (max-width: 991px) and (max-height: 740px) { .navbar_menu .navbar_middle { display: none !important; } .navbar_menu .navbar_link { gap: 0.28rem; padding: 0.62rem 0.08rem 0.68rem !important; } .navbar_menu .navbar_link:first-child { padding-top: 0.68rem !important; } .navbar_link-label { font-size: clamp(1.85rem, 8vw, 2.55rem) !important; } .navbar_link-hint { display: none; } .navbar_menu .navbar_bottom { gap: 0.5rem; padding-top: 0.2rem; } .navbar_menu .navbar_contact, .navbar_menu a.navbar_contact { padding: 0.68rem 0.9rem; } } @media screen and (max-width: 991px) and (max-height: 620px) { .navbar_menu-tagline { display: none; } .navbar_link-meta { display: none; } } @media screen and (min-width: 992px) { .navbar_menu { inset: auto !important; top: 5.25rem !important; right: max(1.25rem, env(safe-area-inset-right, 0px)) !important; left: auto !important; bottom: auto !important; width: min(26rem, calc(100vw - 2.5rem)) !important; height: auto !important; max-height: calc(100svh - 6.5rem); border-radius: 1.5rem !important; border: 1px solid rgba(120, 208, 216, 0.22) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; overflow: hidden !important; } .navbar_menu-inner { width: 100%; padding: 1.25rem 1.35rem 1.2rem; min-height: 32rem; } .navbar_menu-watermark { font-size: 7rem; top: 48%; } .navbar_link-label { font-size: clamp(2.2rem, 3vw, 2.75rem) !important; } .navbar_menu-scrim { background: rgba(3, 4, 5, 0.55); } } /* This block intentionally follows the regular catbar rules so landscape compaction wins the cascade on both phone and tablet widths. */ @media screen and (orientation: landscape) and (max-height: 600px) { html.is-dish-boards { --menu-catbar-base-h: 4.8rem; --menu-subbar-h: 2.75rem; --menu-catbar-gap: 0.25rem; } .westo-dish-catbar__track { gap: 0.6rem; padding-block: 0.25rem; } .westo-dish-catbar__chip { width: 5.2rem; min-width: 5.2rem; gap: 0.2rem; padding-block: 0.1rem; } .westo-dish-catbar__icon { width: 3rem; height: 3rem; } .westo-dish-catbar__label { max-height: 1.1rem; font-size: 0.78rem; line-height: 1.05; -webkit-line-clamp: 1; } .westo-dish-subbar__tab { min-height: var(--touch-min, 44px); padding-block: 0.3rem; font-size: 0.74rem; } } @media (prefers-reduced-motion: reduce) { .navbar_menu, .navbar_menu-scrim, .navbar_link-arrow, .navbar_menu-button, .navbar_menu-close, .navbar_menu-mascot, #nav-auth-btn, button.navbar_sound.navbar_sound-toggle, .navbar_table { transition: none !important; animation: none !important; } .navbar_menu-button:hover, .navbar_menu-button.is-open, #nav-auth-btn:hover, #nav-auth-btn:focus-visible, button.navbar_sound.navbar_sound-toggle:hover, .navbar_table:hover { transform: none; } .benefits_nav.is-menu-rail .benefits_icon-wrapper, .dish-board-media img { transition: none !important; } } /* ---- Shared dish info card + light plate crossfade -------------------- */ html.is-dish-boards { --dish-info-w: min(32rem, calc(100vw - 5.5rem)); } @media screen and (min-width: 992px) { html.is-dish-boards { --dish-info-h: clamp( 16.5rem, calc((100dvh - var(--dish-chrome-top, 9rem)) * 0.3819660113), 21rem ); } } /* Outgoing board stays visible under the incoming one for the opacity fade. */ html.is-dish-boards section.is-benefits.is-dish-leaving .benefits_container { opacity: 1 !important; visibility: visible !important; pointer-events: none !important; z-index: 11 !important; } html.is-dish-boards section.is-benefits.is-dish-active .benefits_container { z-index: 12 !important; } /* Per-board cards never show in dish mode — one fixed host owns the glass box. */ html.is-dish-boards section.is-benefits .benefits_text, html.is-dish-boards section.is-benefits.is-dish-active .benefits_text { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; inset: auto !important; top: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; background: none !important; } #westo-dish-card.is-shared-dish-card { display: none; } /* Liquid-glass dish card — φ type scale + clear meta → title → body → CTA. */ html.is-dish-boards #westo-dish-card.is-shared-dish-card { --phi: 1.618; --phi-gap: 0.618rem; --phi-pad-y: 1rem; --phi-pad-x: 1.15rem; --type-desc: 0.875rem; --type-meta: 0.8125rem; --type-name: calc(var(--type-desc) * var(--phi)); /* ≈ 1.415rem */ --type-cta: 0.95rem; --lg-ease: cubic-bezier(0.22, 1, 0.36, 1); --lg-warm: color-mix(in srgb, var(--tint1, #e8d2aa) 70%, #fff6e4); --lg-ink: rgba(248, 244, 236, 0.97); --lg-muted: rgba(248, 244, 236, 0.78); --lg-meta: rgba(248, 244, 236, 0.62); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; position: fixed; z-index: 30; isolation: isolate; box-sizing: border-box; width: var(--dish-info-w); height: var(--dish-info-h); min-height: var(--dish-info-h); max-height: var(--dish-info-h); overflow: hidden; pointer-events: auto; text-align: start; border-radius: 1.35rem; padding: var(--phi-pad-y) var(--phi-pad-x); /* Extra bottom air so the CTA pill isn't flush against the clipped card edge */ padding-bottom: calc(var(--phi-pad-y) + 0.35rem); color: var(--lg-ink); border: 1px solid rgba(255, 255, 255, 0.26); background: linear-gradient( 145deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 38%, rgba(18, 16, 18, 0.42) 72%, rgba(10, 9, 11, 0.55) 100% ); box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.45), 0 0.2rem 0.6rem rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(255, 255, 255, 0.06), inset 1px 0 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(36px) saturate(1.65); -webkit-backdrop-filter: blur(36px) saturate(1.65); } /* Specular rim + soft iridescent wash (no animated blur = cheap). */ html.is-dish-boards #westo-dish-card.is-shared-dish-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 18%, transparent 42% ), radial-gradient( 120% 70% at 12% -8%, color-mix(in srgb, var(--lg-warm) 34%, transparent), transparent 55% ), radial-gradient( 90% 60% at 108% 112%, rgba(170, 140, 210, 0.14), transparent 52% ); } html.is-dish-boards #westo-dish-card.is-shared-dish-card::after { content: ""; position: absolute; inset: 1px; border-radius: calc(1.35rem - 1px); pointer-events: none; z-index: 0; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); } html.is-dish-boards #westo-dish-card .benefits_max-width { position: relative; z-index: 1; width: 100%; max-width: none !important; height: 100%; margin: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "cat price" "name name" "desc desc" "allergens allergens" "cta cta"; column-gap: var(--phi-gap); row-gap: 0.42rem; align-content: stretch; align-items: center; justify-items: stretch; overflow: hidden; } html.is-dish-boards #westo-dish-card .benefits_max-width:not(:has(.menu-allergen-slot)) { grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "cat price" "name name" "desc desc" "cta cta"; } html.is-dish-boards #westo-dish-card .menu-cat-label { grid-area: cat; margin: 0 !important; justify-self: start; align-self: center; font-size: var(--type-meta) !important; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; text-transform: none; text-align: start; color: color-mix(in srgb, var(--lg-warm) 48%, var(--lg-meta)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } html.is-dish-boards #westo-dish-card .subhead_wrapper, html.is-dish-boards #westo-dish-card .margin-bottom, html.is-dish-boards #westo-dish-card .margin-small, html.is-dish-boards #westo-dish-card .margin-xsmall { width: 100%; margin: 0 !important; display: contents; } html.is-dish-boards #westo-dish-card .subhead { display: contents; } html.is-dish-boards #westo-dish-card .subhead_icon { display: none !important; } html.is-dish-boards #westo-dish-card .subhead_text:has([data-menu-price]) { grid-area: price; position: relative; display: inline-flex !important; align-items: center; justify-content: center; justify-self: end; align-self: center; margin: 0 !important; padding: 0.28rem 0.7rem !important; border-radius: 999px; overflow: hidden; color: var(--lg-ink); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0.2rem 0.55rem rgba(0, 0, 0, 0.22); } html.is-dish-boards #westo-dish-card .subhead_text:has([data-menu-price])::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 45%; background: linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); pointer-events: none; } html.is-dish-boards #westo-dish-card .subhead_text [data-menu-price] { position: relative; z-index: 1; font-size: var(--type-meta) !important; font-weight: 700 !important; letter-spacing: 0; line-height: 1.2; color: inherit !important; white-space: nowrap; font-variant-numeric: tabular-nums; unicode-bidi: isolate; } html.is-dish-boards #westo-dish-card [data-menu-name], html.is-dish-boards #westo-dish-card .margin-xsmall:has([data-menu-name]), html.is-dish-boards #westo-dish-card .margin-bottom:has([data-menu-name]) { grid-area: name; } html.is-dish-boards #westo-dish-card [data-menu-name] { margin: 0 !important; font-size: clamp(1.2rem, 3.8vw, var(--type-name)) !important; font-weight: 700 !important; line-height: 1.28 !important; letter-spacing: -0.018em; text-align: start; color: var(--lg-ink) !important; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.22); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; } html.is-dish-boards #westo-dish-card [data-menu-desc] { grid-area: desc; margin: 0 !important; max-width: none; width: 100%; align-self: start; font-size: var(--type-desc) !important; font-weight: 450; line-height: 1.55 !important; letter-spacing: 0.01em; text-align: start; color: var(--lg-muted) !important; opacity: 1 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } html.is-dish-boards #westo-dish-card .menu-allergen-slot { grid-area: allergens; align-self: center; margin: 0.08rem 0 0 !important; min-width: 0; } html.is-dish-boards #westo-dish-card .menu-allergen { max-width: none; padding-top: 0.3rem; } html.is-dish-boards #westo-dish-card .menu-add-wrap, html.is-dish-boards #westo-dish-card .max-width-xsmall { grid-area: cta; margin: 0.22rem 0 0 !important; width: 100%; max-width: none !important; align-self: end; } /* Dish-card CTA — clean pill, no liquid-glass rim (rim was clipped by card overflow). */ html.is-dish-boards #westo-dish-card .glass-button-wrap.menu-add-wrap { width: 100%; max-width: none; display: flex; overflow: visible; margin-bottom: 0; filter: none; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button { width: 100%; min-height: max(2.65rem, var(--touch-min, 44px)); overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, 0.28); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.16); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button::before, html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button::after { content: none !important; display: none !important; } html.is-dish-boards #westo-dish-card .menu-add-btn .glass-button-text { width: 100%; padding: 0.72rem 1.2rem; font-size: var(--type-cta); font-weight: 650; letter-spacing: 0.01em; } /* Kill the oversized refractive shadow behind Add — it reads as a dirty smear. */ html.is-dish-boards #westo-dish-card .menu-add-wrap .glass-button-shadow, html.is-dish-boards #westo-dish-card .glass-button-wrap.menu-add-wrap .glass-button-shadow { display: none !important; } @media screen and (max-width: 991px) { html.is-dish-boards { --dish-info-w: 90vw; } html.is-dish-boards #westo-dish-card.is-shared-dish-card { --type-desc: 0.9rem; --type-meta: 0.8125rem; --type-name: 1.35rem; --type-cta: 0.95rem; --phi-pad-y: 0.95rem; --phi-pad-x: 1.05rem; left: 5vw; right: 5vw; width: auto; max-width: none; bottom: var(--menu-card-bottom, var(--dish-safe-bottom, max(0.7rem, env(safe-area-inset-bottom, 0px)))); top: auto; transform: none; border-radius: 1.25rem; padding: var(--phi-pad-y) var(--phi-pad-x); } html.is-dish-boards #westo-dish-card .benefits_max-width { row-gap: 0.38rem; } html.is-dish-boards #westo-dish-card [data-menu-name] { font-size: clamp(1.18rem, 4.6vw, 1.42rem) !important; -webkit-line-clamp: 2; } html.is-dish-boards #westo-dish-card [data-menu-desc] { font-size: 0.9rem !important; line-height: 1.52 !important; -webkit-line-clamp: 2; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button { min-height: max(2.55rem, var(--touch-min, 44px)); } html.is-dish-boards #westo-dish-card .menu-add-btn .glass-button-text { padding: 0.68rem 1.1rem; font-size: 0.95rem; } } @media screen and (max-width: 380px) { html.is-dish-boards #westo-dish-card.is-shared-dish-card { --type-desc: 0.84rem; --phi-pad-y: 0.85rem; --phi-pad-x: 0.9rem; } html.is-dish-boards #westo-dish-card [data-menu-desc] { -webkit-line-clamp: 2; font-size: 0.84rem !important; } } @media screen and (min-width: 992px) { html.is-dish-boards { --dish-info-w: var(--menu-card-w, var(--dish-card-w, 22rem)); /* φ / Fibonacci kit for desktop card placement */ --phi: 1.6180339887; --phi-inv: 0.6180339887; /* 1/φ */ --phi-inv2: 0.3819660113; /* 1/φ² */ --phi-inv3: 0.2360679775; /* 1/φ³ */ --fib-3: 1.618rem; --fib-5: 2.618rem; --fib-8: 4.236rem; --fib-13: 6.854rem; /* Slightly taller card — φ⁻² of free stage, clamped */ --dish-info-h: clamp( 16.5rem, calc((100dvh - var(--dish-chrome-top, 9rem)) * var(--phi-inv2)), 21rem ); } html.is-dish-boards #westo-dish-card.is-shared-dish-card { --type-desc: 0.95rem; --type-meta: 0.875rem; --type-name: 1.65rem; --type-cta: 1rem; --phi-pad-y: var(--fib-3); --phi-pad-x: var(--fib-5); /* Slack above:below = φ:1 → card rests in the lower golden zone (not mid-viewport). */ top: calc( var(--dish-chrome-top, 9rem) + ( 100dvh - var(--dish-chrome-top, 9rem) - var(--dish-info-h) - max(var(--fib-5), env(safe-area-inset-bottom, 0px)) ) * var(--phi-inv) ); left: max(var(--fib-8), clamp(2rem, 4vw, 5rem)); right: auto; bottom: auto; width: var(--dish-info-w); transform: none; border-radius: calc(var(--fib-3) * 0.9); backdrop-filter: blur(42px) saturate(1.75); -webkit-backdrop-filter: blur(42px) saturate(1.75); } html.is-dish-boards #westo-dish-card.is-shared-dish-card::after { border-radius: calc(var(--fib-3) * 0.9 - 1px); } html.is-dish-boards #westo-dish-card .benefits_max-width { row-gap: var(--phi-gap); } html.is-dish-boards #westo-dish-card [data-menu-name] { font-size: clamp(1.4rem, 1.9vw, 1.75rem) !important; } html.is-dish-boards #westo-dish-card [data-menu-desc] { font-size: 0.95rem !important; -webkit-line-clamp: 2; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button { min-height: max(2.85rem, var(--touch-min, 44px)); } } html.is-dish-boards section.is-benefits .dish-board-media img { position: relative; z-index: 1; /* drop-shadow() rasterizes a blurred alpha-mask copy of a ~1600px image on every (re)paint — measured 120-250ms first-show stalls. The ::after puck below fakes the contact shadow for a fraction of the cost. */ filter: none !important; } html.is-dish-boards section.is-benefits .dish-board-media::after { content: ""; position: absolute; left: 50%; bottom: 4%; width: 52%; height: 9%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, transparent 68%); pointer-events: none; z-index: 0; } /* Opacity-only switches: keep a cheap compositor layer without transform churn. */ html.is-dish-boards section.is-benefits.is-dish-active .dish-board-media, html.is-dish-boards section.is-benefits.is-dish-leaving .dish-board-media { will-change: opacity; } /* Prewarm is silent Image.decode now — never paint ghost plates over the hero. */ /* ---- Sitewide light: lux elevation system (cream / paper / charcoal / cyan) ---- Critique fixed here: - Header pills were translucent gray → same luminance as page (mud) - Price badge was flat gray → fought cyan accent + cream card - Add CTA was cream-on-cream → zero hierarchy - Cat underlines used per-category greens/cyans → chrome felt random Contract: page wash soft · chrome = paper · card raised · CTA = charcoal · accent = cyan only */ html[data-theme="light"] { --menu-ink: rgba(26, 23, 20, 0.96); --menu-muted: rgba(26, 23, 20, 0.62); --menu-stroke: rgba(26, 23, 20, 0.12); --lux-chrome-bg: var(--wg-chrome-bg, #fffcf7); --lux-chrome-border: var(--wg-chrome-border, rgba(26, 23, 20, 0.14)); --lux-chrome-shadow: var( --wg-chrome-shadow, 0 1px 1px rgba(26, 23, 20, 0.04), 0 0.35rem 0.85rem rgba(26, 23, 20, 0.08) ); } html[data-theme="light"] body::before { background: radial-gradient(ellipse 70% 45% at 50% 28%, var(--cat-glow, rgba(42, 122, 134, 0.1)) 0%, transparent 70%), linear-gradient( 180deg, var(--cat-surface, #f4efe6) 0%, var(--cat-wash, #ebe4d8) 62%, color-mix(in srgb, var(--cat-wash, #ebe4d8) 82%, #d9cdb8) 100% ) !important; } html[data-theme="light"] .navbar_overlay { background: none !important; background-image: none !important; opacity: 0 !important; visibility: hidden !important; } html[data-theme="light"].is-dish-boards body::before { background: radial-gradient(ellipse 65% 40% at 50% 30%, var(--cat-glow, rgba(42, 122, 134, 0.09)) 0%, transparent 68%), linear-gradient( 180deg, var(--cat-surface, #f4efe6) 0%, var(--cat-wash, #ebe4d8) 58%, color-mix(in srgb, var(--cat-wash, #ebe4d8) 86%, #d6cab5) 100% ) !important; } /* Unified header chrome — paper pills, shared with back / table / menu / login */ html[data-theme="light"] .westo-back-categories, html[data-theme="light"] .navbar_table, html[data-theme="light"] .navbar_menu-button, html[data-theme="light"] #nav-auth-btn.button, html[data-theme="light"] #nav-auth-btn, html[data-theme="light"] .button.is-small { background: var(--lux-chrome-bg) !important; color: var(--wg-ink, #1a1714) !important; border: 1px solid var(--lux-chrome-border) !important; box-shadow: var(--lux-chrome-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="light"] .westo-back-categories:hover, html[data-theme="light"] .westo-back-categories:focus-visible, html[data-theme="light"] .navbar_table:hover, html[data-theme="light"] .navbar_menu-button:hover, html[data-theme="light"] .navbar_menu-button.is-open, html[data-theme="light"] #nav-auth-btn:hover, html[data-theme="light"] #nav-auth-btn:focus-visible, html[data-theme="light"] .button.is-small:hover { background: var(--wg-chrome-bg-hover, #fff8ef) !important; border-color: var(--wg-chrome-border-hover, rgba(42, 122, 134, 0.45)) !important; color: var(--wg-ink, #1a1714) !important; } html[data-theme="light"] .navbar_menu-button .text-block, html[data-theme="light"] .navbar_menu-button .westo-menu-trigger__label, html[data-theme="light"] #nav-auth-btn div, html[data-theme="light"] .westo-back-categories__label, html[data-theme="light"] .navbar_table__label { color: inherit !important; } html[data-theme="light"] .carousel_list.is-hero .heading-style-h2, html[data-theme="light"] .westo-scroll-hint--mobile, html[data-theme="light"] .westo-scroll-hint { color: var(--wg-ink, #1a1714) !important; text-shadow: none; } html[data-theme="light"] .scroll_discover { --base-color: #8a8176; --base-gradient-color: #1a1714; color: transparent !important; -webkit-text-fill-color: transparent !important; } html[data-theme="light"] .carousel_arrow, html[data-theme="light"] .carousel_arrow svg { color: rgba(26, 23, 20, 0.72); opacity: 0.92; } html[data-theme="light"] .gamme_progress-bar, html[data-theme="light"] .progress_line { background: var(--wg-accent, #2a7a86) !important; opacity: 0.95; } /* Dish card — bright paper raised above page wash */ html[data-theme="light"].is-dish-boards section.is-benefits .benefits_text { background: var(--wg-panel-bg, #fffcf8) !important; color: var(--menu-ink) !important; border-color: rgba(26, 23, 20, 0.1) !important; } html[data-theme="light"].is-dish-boards #westo-dish-card.is-shared-dish-card, html[data-theme="light"].is-dish-boards .westo-shared-dish-card.is-shared-dish-card { --lg-ink: rgba(26, 23, 20, 0.96); --lg-muted: rgba(26, 23, 20, 0.64); --lg-meta: rgba(26, 23, 20, 0.52); color: var(--lg-ink); border: 1px solid rgba(26, 23, 20, 0.1); background: linear-gradient(165deg, #ffffff 0%, #fffcf8 46%, #f8f2ea 100%); box-shadow: 0 1.25rem 2.8rem rgba(26, 23, 20, 0.12), 0 0.35rem 0.9rem rgba(26, 23, 20, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.92); backdrop-filter: blur(18px) saturate(1.12); -webkit-backdrop-filter: blur(18px) saturate(1.12); } html[data-theme="light"].is-dish-boards #westo-dish-card.is-shared-dish-card::before { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.15) 22%, transparent 48% ); } html[data-theme="light"].is-dish-boards #westo-dish-card [data-menu-name] { text-shadow: none; color: var(--lg-ink) !important; } html[data-theme="light"].is-dish-boards #westo-dish-card .menu-cat-label, html[data-theme="light"] .menu-cat-label, html[data-theme="light"].is-dish-boards section.is-benefits .menu-cat-label { color: rgba(26, 23, 20, 0.52) !important; } /* Price — cyan-rimmed paper badge (not muddy gray) */ html[data-theme="light"].is-dish-boards #westo-dish-card .subhead_text:has([data-menu-price]) { color: var(--lux-price-ink, #1a1714) !important; background: var(--lux-price-bg, linear-gradient(165deg, #fff9ef 0%, #f3e6d0 100%)) !important; border: 1px solid var(--lux-price-border, rgba(42, 122, 134, 0.38)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0.2rem 0.55rem rgba(42, 122, 134, 0.12) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html[data-theme="light"].is-dish-boards #westo-dish-card .subhead_text:has([data-menu-price])::after { opacity: 0.35; background: linear-gradient(rgba(255, 255, 255, 0.55) 0%, transparent 100%); } /* Primary CTA — charcoal solid (contract). Cream-on-cream was the hierarchy killer. */ html[data-theme="light"].is-dish-boards #westo-dish-card .menu-add-btn.glass-button { background: var(--wg-cta-bg, #1a1714) !important; color: var(--wg-cta-ink, #f7f2ea) !important; border: 1px solid transparent !important; box-shadow: 0 0.55rem 1.35rem rgba(26, 23, 20, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="light"].is-dish-boards #westo-dish-card .menu-add-btn.glass-button:hover:not(:disabled) { background: #2a2521 !important; border-color: rgba(42, 122, 134, 0.45) !important; color: var(--wg-cta-ink, #f7f2ea) !important; } html[data-theme="light"].is-dish-boards #westo-dish-card .menu-add-btn .glass-button-text { color: var(--wg-cta-ink, #f7f2ea) !important; } /* Rail — cyan active ring; labels charcoal (category color stays in wash only) */ html[data-theme="light"] .benefits_nav.is-menu-rail .benefits_rail-label, html[data-theme="light"].is-dish-boards .benefits_nav.is-menu-rail .benefits_rail-label { color: rgba(26, 23, 20, 0.72) !important; font-weight: 600; } html[data-theme="light"] .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active .benefits_rail-label, html[data-theme="light"] .benefits_nav.is-menu-rail .benefits_icon-wrapper.w--current .benefits_rail-label, html[data-theme="light"].is-dish-boards .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active .benefits_rail-label { color: var(--wg-ink, #1a1714) !important; } html[data-theme="light"] .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active .benefits_icon, html[data-theme="light"] .benefits_nav.is-menu-rail .benefits_icon-wrapper.w--current .benefits_icon, html[data-theme="light"].is-dish-boards .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active .benefits_icon { box-shadow: 0 0 0 2px var(--lux-raised, #fffcf7), 0 0 0 3.5px var(--wg-accent, #2a7a86) !important; } html[data-theme="light"] .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active, html[data-theme="light"] .benefits_nav.is-menu-rail .benefits_icon-wrapper.w--current { box-shadow: none; border: 0; background: transparent; } html[data-theme="light"] .navbar_left .button, html[data-theme="light"] .navbar_right .button, html[data-theme="light"] .navbar_middle .button { color: var(--wg-btn-ink, #1a1714) !important; } html[data-theme="light"] .carousel_list.is-hero .heading-style-h2 { font-weight: 750; } /* ---- Continuous hero → catbar photo fly ---- */ .westo-cat-fly { position: fixed; inset: 0; z-index: 520; pointer-events: none !important; direction: ltr; /* Cinema: never crop mid-fly orbs (film strip/hard-edge bug). */ overflow: visible; display: none; } .westo-cat-fly.is-active { display: block; } .westo-cat-fly__orb { position: fixed; transform: translate(-50%, -50%); transform-origin: 50% 50%; border-radius: 50%; overflow: hidden; pointer-events: none !important; will-change: transform, opacity; box-shadow: 0 calc(0.4rem + 0.014 * var(--orb-size, 120)) calc(1rem + 0.024 * var(--orb-size, 120)) rgba(0, 0, 0, 0.34), 0 0.12rem 0.32rem rgba(0, 0, 0, 0.2); background: transparent; backface-visibility: hidden; } .westo-cat-fly__orb.is-flock { box-shadow: 0 calc(0.38rem + 0.014 * var(--orb-size, 120)) calc(1.05rem + 0.026 * var(--orb-size, 120)) rgba(0, 0, 0, 0.36), 0 0.14rem 0.38rem rgba(0, 0, 0, 0.18); filter: saturate(1.04) contrast(1.02); } .westo-cat-fly__orb.is-flock.is-active-fly { filter: saturate(1.07) contrast(1.035); z-index: 460; box-shadow: 0 calc(0.45rem + 0.016 * var(--orb-size, 120)) calc(1.2rem + 0.03 * var(--orb-size, 120)) rgba(0, 0, 0, 0.4), 0 0.16rem 0.42rem rgba(0, 0, 0, 0.22); } .westo-cat-fly__orb.is-flock.is-neighbor-fly { filter: saturate(0.98) brightness(0.94); z-index: 430; } .westo-cat-fly__orb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 0; } html.is-dish-boards .westo-dish-catbar.is-flying-in .westo-dish-catbar__chip { animation: none !important; opacity: 1 !important; } html.is-dish-boards .westo-dish-catbar.is-flying-in.is-cinema-flock .westo-dish-catbar__chip:not(.is-fly-seat) .westo-dish-catbar__icon { opacity: 1 !important; visibility: visible !important; } html.is-dish-boards .westo-dish-catbar.is-flying-in .westo-dish-catbar__chip.is-fly-seat .westo-dish-catbar__icon, html.is-dish-boards .westo-dish-catbar.is-flying-in .westo-dish-catbar__label { opacity: 0; visibility: hidden; } html.is-dish-boards .westo-dish-catbar.is-flying-out { pointer-events: none !important; } html.is-dish-boards .westo-dish-catbar.is-flying-out .westo-dish-catbar__track { opacity: 0 !important; } /* Keep catbar mounted during reverse fly after leaving dish boards (measure only). */ html.is-cat-flying .westo-dish-catbar.is-flying-out:not([hidden]) { display: block !important; pointer-events: none !important; background: transparent !important; } html.is-cat-flying .westo-dish-catbar.is-flying-out .westo-dish-catbar__track { opacity: 0 !important; } @media (prefers-reduced-motion: reduce) { .westo-cat-fly { display: none !important; } } /* Short landscape uses three independent columns: copy, food, vertical rail. It follows the shared-card shell; the category-strip rules below only style chrome. */ @media screen and (orientation: landscape) and (max-height: 600px) { html.is-dish-boards { --landscape-card-w: min(40vw, 22rem); --landscape-stage-gap: clamp(1.1rem, 2.6vw, 2rem); } html.is-dish-boards #westo-dish-card.is-shared-dish-card { --type-desc: 0.78rem; --type-meta: 0.72rem; --type-name: 1.05rem; --type-cta: 0.82rem; --phi-pad-y: 0.62rem; --phi-pad-x: 0.75rem; top: calc(var(--dish-chrome-top) + 0.45rem) !important; right: auto !important; bottom: max(0.55rem, env(safe-area-inset-bottom, 0px)) !important; left: max(0.75rem, env(safe-area-inset-left, 0px)) !important; width: var(--landscape-card-w) !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: var(--phi-pad-y) var(--phi-pad-x) !important; border-radius: 1rem; transform: none !important; } html.is-dish-boards #westo-dish-card .benefits_max-width { row-gap: 0.2rem; } html.is-dish-boards #westo-dish-card [data-menu-name] { font-size: 1.05rem !important; line-height: 1.18 !important; -webkit-line-clamp: 1; } html.is-dish-boards #westo-dish-card [data-menu-desc] { font-size: 0.78rem !important; line-height: 1.35 !important; -webkit-line-clamp: 2; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button { min-height: var(--touch-min, 44px); } html.is-dish-boards #westo-dish-card .menu-add-btn .glass-button-text { padding-block: 0.5rem; font-size: 0.82rem; } html.is-dish-boards section.is-benefits .dish-board-media { top: calc(var(--dish-chrome-top) + 0.3rem) !important; right: calc(var(--menu-rail-w) + var(--menu-rail-gap)) !important; bottom: max(0.55rem, env(safe-area-inset-bottom, 0px)) !important; left: calc(var(--landscape-card-w) + var(--landscape-stage-gap)) !important; } html.is-dish-boards section.is-benefits .dish-board-media img, html.is-dish-boards section.is-benefits .dish-board-media img.is-image-frame { width: min(100%, 23rem) !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; align-self: center !important; justify-self: center !important; } html.is-dish-boards .benefits_nav.is-menu-rail { top: calc(var(--dish-chrome-top) + 0.15rem) !important; bottom: max(0.45rem, env(safe-area-inset-bottom, 0px)) !important; } } /* ---- Dish-board category strip (under navbar) ---- */ .westo-dish-catbar { --catbar-hairline: color-mix(in srgb, var(--cat-accent, #78d0d8) 22%, rgba(246, 241, 232, 0.14)); position: fixed !important; top: calc( var(--menu-nav-h) + var(--menu-promo-h, 0px) + var(--menu-promo-gap, 0px) + var(--menu-catbar-gap) ) !important; left: 0 !important; right: 0 !important; bottom: auto !important; inset: calc( var(--menu-nav-h) + var(--menu-promo-h, 0px) + var(--menu-promo-gap, 0px) + var(--menu-catbar-gap) ) 0 auto 0 !important; z-index: 220; display: none !important; width: 100% !important; max-width: none !important; height: var(--menu-catbar-h, 4.75rem) !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; /* Opaque enough that dish photos never read through the strip */ background: linear-gradient( 180deg, rgba(8, 9, 10, 0.97) 0%, rgba(8, 9, 10, 0.92) 55%, rgba(8, 9, 10, 0.82) 100% ); box-sizing: border-box; overflow: hidden; } /* Full-width hairline on the fixed bar — NOT on the scrolling track (track ::before scrolled away with overflow-x). */ .westo-dish-catbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--menu-subbar-h); height: 1px; background: var(--catbar-hairline); opacity: 0.9; pointer-events: none; z-index: 1; } .westo-dish-catbar[hidden] { display: none !important; visibility: hidden !important; pointer-events: none !important; transform: none !important; } html.is-dish-boards .westo-dish-catbar:not([hidden]) { display: block !important; visibility: visible !important; pointer-events: auto !important; animation: westoCatbarReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes westoCatbarReveal { from { opacity: 0; transform: translateY(-0.55rem); } to { opacity: 1; transform: translateY(0); } } @keyframes westoCatChipIn { from { opacity: 0; transform: translateY(0.45rem) scale(0.86); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes westoCatChipPulse { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1.1); } } .westo-dish-catbar__track { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; direction: ltr; gap: 1.2rem; height: var(--menu-catbar-base-h); width: 100%; max-width: 100%; /* Infinite loop: no huge end pads — wrap supplies L/R neighbors. */ padding-block: 0.5rem 0.45rem; padding-inline: max(0.85rem, env(safe-area-inset-left, 0px)) max(0.85rem, env(safe-area-inset-right, 0px)); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; overscroll-behavior-y: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; scroll-behavior: auto; overflow-anchor: none; scroll-snap-type: none; scroll-padding-inline: 0; cursor: grab; pointer-events: auto; } /* Source-menu subcategories (HOT/COLD, Fizzy Drink, …) stay inside the fixed chrome budget. They navigate to a dish slot; they never filter/remove DOM. */ .westo-dish-subbar { position: absolute; right: 0; bottom: 0; left: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-start; direction: ltr; gap: 0.45rem; width: 100%; height: var(--menu-subbar-h); padding-inline: max(0.8rem, env(safe-area-inset-left, 0px)) max(0.8rem, env(safe-area-inset-right, 0px)); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; pointer-events: auto; box-sizing: border-box; } .westo-dish-subbar[hidden] { display: none !important; } .westo-dish-subbar::-webkit-scrollbar { display: none; } .westo-dish-subbar__tab { flex: 0 0 auto; min-height: var(--touch-min, 44px); margin: 0; padding: 0.4rem 0.9rem; border: 1px solid rgba(246, 242, 235, 0.13); border-radius: 999px; background: rgba(255, 255, 255, 0.035); color: rgba(246, 242, 235, 0.68); font: 600 0.82rem/1 Vazirmatn, sans-serif; letter-spacing: 0.01em; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: pan-x; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .westo-dish-subbar__tab:hover { color: rgba(255, 250, 242, 0.96); border-color: color-mix(in srgb, var(--cat-accent, #78d0d8) 42%, transparent); } .westo-dish-subbar__tab:active { transform: scale(0.97); } .westo-dish-subbar__tab.is-active { border-color: color-mix(in srgb, var(--cat-accent, #78d0d8) 65%, transparent); background: color-mix(in srgb, var(--cat-accent, #78d0d8) 16%, transparent); color: rgba(255, 250, 242, 0.98); } .westo-dish-subbar__tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--cat-accent, #78d0d8) 78%, #fff); outline-offset: -2px; } .westo-dish-catbar__track.is-infinite { /* Free horizontal browse — seamless wrap handled in JS. */ overscroll-behavior-x: none; } .westo-dish-catbar__track.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; } .westo-dish-catbar__track::-webkit-scrollbar { display: none; } .westo-dish-catbar__chip { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.4rem; width: 7rem; min-width: 7rem; margin: 0; padding: 0.2rem 0.15rem 0.4rem; border: 0; border-radius: 1.15rem; background: transparent; color: rgba(246, 242, 235, 0.55); font-family: Vazirmatn, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; /* Allow horizontal pan on the strip (mobile); tap still selects. */ touch-action: pan-x; scroll-snap-align: none; scroll-snap-stop: normal; pointer-events: auto; z-index: 1; box-shadow: none; opacity: 1; animation: westoCatChipIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) both; transition: color 0.28s ease, opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); } .westo-dish-catbar__chip:nth-child(1) { animation-delay: 0.02s; } .westo-dish-catbar__chip:nth-child(2) { animation-delay: 0.05s; } .westo-dish-catbar__chip:nth-child(3) { animation-delay: 0.08s; } .westo-dish-catbar__chip:nth-child(4) { animation-delay: 0.11s; } .westo-dish-catbar__chip:nth-child(5) { animation-delay: 0.14s; } .westo-dish-catbar__chip:nth-child(6) { animation-delay: 0.17s; } .westo-dish-catbar__chip:nth-child(7) { animation-delay: 0.2s; } .westo-dish-catbar__chip:nth-child(8) { animation-delay: 0.23s; } .westo-dish-catbar__chip:nth-child(9) { animation-delay: 0.26s; } .westo-dish-catbar__chip:nth-child(10) { animation-delay: 0.29s; } .westo-dish-catbar__chip:nth-child(n + 11) { animation-delay: 0.32s; } .westo-dish-catbar__icon { display: block; width: 4.85rem; height: 4.85rem; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, 0.04); box-shadow: none; outline: none; border: 0; transform-origin: 50% 50%; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), filter 0.28s ease, opacity 0.28s ease; } .westo-dish-catbar__thumb { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 0; pointer-events: none; } .westo-dish-catbar__label { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%; max-width: 7rem; max-height: 2.65rem; margin: 0; padding: 0; font-size: 1.05rem; line-height: 1.2; font-weight: 500; letter-spacing: 0; text-align: center; white-space: normal; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: color 0.22s ease, opacity 0.22s ease; } /* Neon underline under active category name — rides on the hairline */ .westo-dish-catbar__chip.is-active::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2.3rem; height: 2px; border-radius: 999px; transform: translateX(-50%) scaleX(0.35); transform-origin: 50% 50%; background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--cat-accent, #78d0d8) 55%, #fff) 18%, var(--cat-accent, #78d0d8) 50%, color-mix(in srgb, var(--cat-accent, #78d0d8) 55%, #fff) 82%, transparent 100% ); box-shadow: 0 0 4px color-mix(in srgb, var(--cat-accent, #78d0d8) 85%, transparent), 0 0 10px color-mix(in srgb, var(--cat-accent, #78d0d8) 55%, transparent), 0 0 18px color-mix(in srgb, var(--cat-glow, rgba(120, 208, 216, 0.55)) 70%, transparent), 0 0 28px color-mix(in srgb, var(--cat-accent, #78d0d8) 28%, transparent); opacity: 0; animation: westoCatNeonLine 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both; pointer-events: none; z-index: 3; } @keyframes westoCatNeonLine { from { opacity: 0; width: 0.55rem; transform: translateX(-50%) scaleX(0.2); filter: brightness(1.6); } 55% { opacity: 1; filter: brightness(1.35); } to { opacity: 1; width: 2.3rem; transform: translateX(-50%) scaleX(1); filter: brightness(1.1); } } @supports not (background: color-mix(in srgb, red 50%, blue)) { .westo-dish-catbar__chip.is-active::after { background: linear-gradient( 90deg, transparent 0%, rgba(255, 236, 200, 0.75) 18%, var(--cat-accent, #78d0d8) 50%, rgba(255, 236, 200, 0.75) 82%, transparent 100% ); box-shadow: 0 0 4px var(--cat-accent, #78d0d8), 0 0 12px var(--cat-glow, rgba(120, 208, 216, 0.55)), 0 0 22px rgba(120, 208, 216, 0.35); } } .westo-dish-catbar__chip:hover .westo-dish-catbar__icon { transform: scale(1.06); filter: brightness(1.06); } .westo-dish-catbar__chip:hover { color: rgba(246, 242, 235, 0.88); } .westo-dish-catbar__chip:active .westo-dish-catbar__icon { transform: scale(0.96); } .westo-dish-catbar__chip.is-active { color: rgba(246, 242, 235, 0.96); opacity: 1; transform: translateY(-1px) scale(1.02); z-index: 2; } .westo-dish-catbar__chip.is-near { opacity: 0.9; transform: scale(1); } .westo-dish-catbar__chip.is-far { opacity: 0.78; transform: scale(0.92); } .westo-dish-catbar__chip.is-active .westo-dish-catbar__icon { transform: scale(1.12); filter: brightness(1.1); animation: westoCatChipPulse 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } .westo-dish-catbar__chip.is-active .westo-dish-catbar__label { color: rgba(255, 248, 236, 0.98); font-weight: 600; opacity: 1; text-shadow: 0 0 12px color-mix(in srgb, var(--cat-accent, #78d0d8) 35%, transparent); } /* Light catbar: no fixed cream slab — track the page wash / category surface */ html[data-theme="light"] .westo-dish-catbar { --catbar-hairline: color-mix(in srgb, var(--wg-accent, #2a7a86) 22%, rgba(26, 23, 20, 0.08)); background: linear-gradient( 180deg, color-mix(in srgb, var(--cat-surface, #f4efe6) 55%, transparent) 0%, color-mix(in srgb, var(--cat-wash, #ebe4d8) 28%, transparent) 72%, transparent 100% ); box-shadow: none; -webkit-backdrop-filter: blur(8px) saturate(1.05); backdrop-filter: blur(8px) saturate(1.05); transition: background 0.45s ease, backdrop-filter 0.45s ease; } html[data-theme="light"].is-dish-boards .westo-dish-catbar:not([hidden]) { background: linear-gradient( 180deg, color-mix(in srgb, var(--cat-surface, #f4efe6) 48%, transparent) 0%, color-mix(in srgb, var(--cat-wash, #ebe4d8) 22%, transparent) 70%, transparent 100% ); } html[data-theme="light"] .westo-dish-catbar__chip { color: rgba(26, 23, 20, 0.52); } html[data-theme="light"] .westo-dish-catbar__chip.is-active, html[data-theme="light"] .westo-dish-catbar__chip:hover { color: rgba(26, 23, 20, 0.94); } html[data-theme="light"] .westo-dish-catbar__chip.is-active .westo-dish-catbar__label { color: #1a1714; font-weight: 700; text-shadow: none; } html[data-theme="light"] .westo-dish-subbar__tab { border-color: rgba(26, 23, 20, 0.1); background: rgba(255, 255, 255, 0.38); color: rgba(26, 23, 20, 0.62); } html[data-theme="light"] .westo-dish-subbar__tab:hover, html[data-theme="light"] .westo-dish-subbar__tab.is-active { border-color: rgba(42, 122, 134, 0.35); background: rgba(42, 122, 134, 0.11); color: #1a1714; } /* Active underline locked to brand cyan */ html[data-theme="light"] .westo-dish-catbar__chip.is-active::after { background: linear-gradient( 90deg, transparent 0%, rgba(42, 122, 134, 0.35) 18%, #2a7a86 50%, rgba(42, 122, 134, 0.35) 82%, transparent 100% ); box-shadow: 0 0 4px rgba(42, 122, 134, 0.35), 0 0 10px rgba(42, 122, 134, 0.18); } html[data-theme="light"] .westo-dish-catbar__icon { background: color-mix(in srgb, var(--cat-surface, #fffcf7) 82%, #fff); box-shadow: 0 0.25rem 0.65rem rgba(26, 23, 20, 0.08), inset 0 0 0 1px rgba(26, 23, 20, 0.06); transition: background 0.45s ease, box-shadow 0.3s ease; } html[data-theme="light"] .westo-dish-catbar__chip.is-active .westo-dish-catbar__icon { box-shadow: 0 0.3rem 0.75rem rgba(26, 23, 20, 0.1), 0 0 0 2px rgba(42, 122, 134, 0.28); } @media screen and (max-width: 991px) { .westo-dish-catbar__track { gap: 1rem; padding-inline: max(0.75rem, env(safe-area-inset-left, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)); touch-action: pan-x; -webkit-overflow-scrolling: touch; } .westo-dish-catbar__chip { touch-action: pan-x; } } @media screen and (max-width: 479px) { html.is-dish-boards { --menu-catbar-base-h: 6.6rem; --menu-subbar-h: 2.85rem; --menu-catbar-gap: 0.55rem; } .westo-dish-catbar__track { padding-inline: max(0.7rem, env(safe-area-inset-left, 0px)) max(0.7rem, env(safe-area-inset-right, 0px)); gap: 0.9rem; scroll-padding-inline: max(0.7rem, calc(50% - 3.1rem)); } .westo-dish-catbar__chip { width: 6.2rem; min-width: 6.2rem; } .westo-dish-catbar__icon { width: 3.85rem; height: 3.85rem; } .westo-dish-catbar__label { font-size: 0.95rem; max-width: 6rem; max-height: 2.4rem; } .westo-dish-catbar__chip.is-active::after { width: 1.9rem; } .westo-dish-subbar { gap: 0.35rem; padding-inline: max(0.65rem, env(safe-area-inset-left, 0px)) max(0.65rem, env(safe-area-inset-right, 0px)); } .westo-dish-subbar__tab { padding-inline: 0.72rem; font-size: 0.76rem; } } @media (prefers-reduced-motion: reduce) { html.is-dish-boards .westo-dish-catbar:not([hidden]), .westo-dish-catbar__chip, .westo-dish-catbar__chip.is-active .westo-dish-catbar__icon, .westo-dish-catbar__chip.is-active::after { animation: none !important; } .westo-dish-catbar__chip.is-active::after { opacity: 1; transform: translateX(-50%) scaleX(1); } .westo-dish-subbar__tab { transition: none !important; } } /* A desktop plate is a grid item whose intrinsic ratio can otherwise overrule max-height and crop against the stage. Give it the stage's definite height; object-fit keeps the food ratio intact inside that box. */ @media screen and (min-width: 992px) { html.is-dish-boards section.is-benefits .dish-board-media img, html.is-dish-boards section.is-benefits .dish-board-media img.is-image-frame { height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-height: 100% !important; object-fit: contain !important; align-self: center !important; justify-self: center !important; } } /* Final cascade: the active marker belongs to the fixed hairline, not to a chip. */ .westo-dish-catbar::before { content: ""; position: absolute; left: var(--catbar-active-left, 0px); bottom: calc(var(--menu-subbar-h) - 0.5px); width: var(--catbar-active-width, 0px); height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--cat-accent, #78d0d8) 50%, transparent); box-shadow: 0 0 4px var(--cat-accent, #78d0d8), 0 0 14px color-mix(in srgb, var(--cat-accent, #78d0d8) 65%, transparent); opacity: var(--catbar-active-opacity, 0); pointer-events: none; z-index: 3; transition: left 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease; } .westo-dish-catbar__chip.is-active::after { opacity: 0 !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { .westo-dish-catbar::before { transition: none; } } /* The food-card action belongs to the same glass family as the header. It uses a restrained rim and high-contrast text rather than a solid bar. */ html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button { isolation: isolate; background: var(--wg-action-bg, rgba(255, 255, 255, 0.08)) !important; color: var(--wg-action-ink, #f8f6f0) !important; border-color: var(--wg-action-edge, rgba(255, 255, 255, 0.2)) !important; font-weight: 600; letter-spacing: 0.005em; -webkit-backdrop-filter: blur(14px) saturate(1.14) !important; backdrop-filter: blur(14px) saturate(1.14) !important; box-shadow: var(--wg-action-shadow) !important; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button::before { content: "" !important; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; background: var(--wg-glass-edge); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button::after { content: none !important; } html.is-dish-boards #westo-dish-card .menu-add-btn .glass-button-text, html.is-dish-boards #westo-dish-card .menu-add-btn .glass-button-label, html.is-dish-boards #westo-dish-card .menu-add-btn .glass-button-icon { color: inherit !important; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button:hover:not(:disabled), html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button:focus-visible:not(:disabled) { background: var(--wg-action-bg-hover, rgba(255, 255, 255, 0.14)) !important; color: var(--wg-action-ink, #f8f6f0) !important; border-color: var(--wg-action-edge-hover, rgba(120, 208, 216, 0.58)) !important; transform: translateY(-1px); box-shadow: var(--wg-action-shadow), 0 0 1rem var(--wg-action-glow, rgba(120, 208, 216, 0.18)) !important; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button:focus-visible { box-shadow: var(--wg-action-shadow), 0 0 0 2px var(--wg-focus-ring, rgba(120, 208, 216, 0.7)) !important; } html[data-theme="light"].is-dish-boards #westo-dish-card .menu-add-btn.glass-button, html[data-theme="light"].is-dish-boards #westo-dish-card .menu-add-btn.glass-button:hover:not(:disabled), html[data-theme="light"].is-dish-boards #westo-dish-card .menu-add-btn.glass-button:focus-visible:not(:disabled) { background: var(--wg-action-bg, rgba(255, 252, 247, 0.72)) !important; color: var(--wg-action-ink, #1a1714) !important; border-color: var(--wg-action-edge, rgba(26, 23, 20, 0.15)) !important; box-shadow: var(--wg-action-shadow) !important; } html[data-theme="light"].is-dish-boards #westo-dish-card .menu-add-btn.glass-button:hover:not(:disabled), html[data-theme="light"].is-dish-boards #westo-dish-card .menu-add-btn.glass-button:focus-visible:not(:disabled) { background: var(--wg-action-bg-hover, rgba(255, 252, 247, 0.9)) !important; border-color: var(--wg-action-edge-hover, rgba(42, 122, 134, 0.5)) !important; box-shadow: var(--wg-action-shadow), 0 0 0.9rem var(--wg-action-glow, rgba(42, 122, 134, 0.14)) !important; } /* Keep the action copy legible in the light theme. A legacy CTA rule set an off-white child colour with higher specificity than the shared button. */ html[data-theme="light"].is-dish-boards #westo-dish-card .menu-add-btn .glass-button-text, html[data-theme="light"].is-dish-boards #westo-dish-card .menu-add-btn .glass-button-label, html[data-theme="light"].is-dish-boards #westo-dish-card .menu-add-btn .glass-button-icon { color: var(--wg-action-ink, #1a1714) !important; } /* ===== WESTO performance tier rendering budget (release3) ===== */ /* The rail host position is static layout state; keeping it in CSS avoids a getComputedStyle() read for every icon during category transactions. */ .benefits_nav.is-menu-rail .benefits_icon, .benefits_nav.is-menu-rail [data-westo-rail-host="1"] { position: relative; } /* Backdrop blur is one of the most expensive full-surface GPU effects on mobile. Preserve the glass language, but scale the sampling radius with the runtime device tier. */ html[data-perf-tier="economy"] #westo-dish-card, html[data-perf-tier="economy"] .westo-dish-catbar, html[data-perf-tier="economy"] .glass-button, html[data-perf-tier="economy"] .glass-button-wrap, html[data-perf-tier="economy"] .menu-story__glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html[data-perf-tier="economy"] .westo-dish-catbar__icon, html[data-perf-tier="economy"] .benefits_dish-thumb, html[data-perf-tier="economy"] .dish-board-media img { filter: none !important; } html[data-perf-tier="balanced"] #westo-dish-card { -webkit-backdrop-filter: blur(14px) saturate(1.18) !important; backdrop-filter: blur(14px) saturate(1.18) !important; } html[data-perf-tier="balanced"] .westo-dish-catbar, html[data-perf-tier="balanced"] .glass-button { -webkit-backdrop-filter: blur(6px) saturate(1.08) !important; backdrop-filter: blur(6px) saturate(1.08) !important; } html[data-perf-tier="premium"] #westo-dish-card { -webkit-backdrop-filter: blur(24px) saturate(1.35) !important; backdrop-filter: blur(24px) saturate(1.35) !important; } /* Release 3 compositor budget: cat-flight orbs now move/resize with transform only. On non-premium tiers avoid per-orb filter surfaces during the handoff. */ html[data-perf-tier="economy"] .westo-cat-fly__orb, html[data-perf-tier="balanced"] .westo-cat-fly__orb { filter: none !important; } html[data-perf-tier="economy"] .westo-cat-fly__orb { box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.24) !important; } /* Compact, touch-first modifier controls for the smart menu quantity sheet. */ .qty-modal.has-modifiers { align-items: center; padding-top: max(0.75rem, env(safe-area-inset-top, 0px)); padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)); } .qty-modal.has-modifiers .qty-modal__card { width: min(30rem, 100%); max-height: calc(100dvh - max(1.5rem, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))); overflow-y: auto; overscroll-behavior: contain; text-align: start; scrollbar-width: thin; } .qty-modal.has-modifiers .qty-modal__card h3 { padding-inline-end: 2.2rem; } .menu-modifiers[hidden], .menu-modifier-message:empty { display: none !important; } .menu-modifiers { display: grid; gap: 0.65rem; min-width: 0; margin-top: 0.75rem; text-align: start; } .menu-modifier-group { min-width: 0; margin: 0; padding: 0.65rem; border: 1px solid rgba(246, 242, 235, 0.18); border-radius: 0.8rem; color: var(--menu-ink); background: rgba(255, 255, 255, 0.055); } .menu-modifier-group legend { max-width: 100%; padding-inline: 0.35rem; font-size: 1rem; font-weight: 750; line-height: 1.5; } .menu-modifier-group__hint { margin: 0.1rem 0 0.5rem; color: var(--menu-muted); font-size: 0.9rem; line-height: 1.6; } .menu-modifier-group__options { display: grid; gap: 0.4rem; min-width: 0; } .menu-modifier-option { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: center; column-gap: 0.65rem; row-gap: 0.12rem; min-width: 0; min-height: 3rem; padding: 0.42rem 0.55rem; border: 1px solid rgba(246, 242, 235, 0.14); border-radius: 0.65rem; color: var(--menu-ink); background: rgba(255, 255, 255, 0.04); cursor: pointer; font-size: 0.96rem; line-height: 1.5; overflow-wrap: anywhere; } .menu-modifier-option input { grid-row: 1 / span 2; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--wg-accent, #78d0d8); } .menu-modifier-option__name { min-width: 0; } .menu-modifier-option__price { grid-column: 2; justify-self: start; color: var(--menu-muted); font-size: 0.84rem; font-weight: 600; font-variant-numeric: tabular-nums; } .menu-modifier-option.is-unavailable { opacity: 0.62; cursor: not-allowed; } .menu-modifier-message:empty { display: none !important; } .qty-modal.has-modifiers .qty-circles { margin-top: 0.8rem; } .qty-modal.has-modifiers .qty-confirm-wrap { margin-top: 0.75rem; } .qty-modal.has-modifiers .qty-confirm-wrap .glass-button { min-height: 3rem; } .table-line__modifiers { margin: 0.25rem 0; color: var(--menu-muted); font-size: 0.9rem; line-height: 1.65; overflow-wrap: anywhere; } .table-line__qty button, .table-line__remove { min-width: 2.75rem; min-height: 2.75rem; } html[data-theme="light"] :is(.menu-modifier-group,.menu-modifier-option) { color: #1a1714; border-color: rgba(26, 23, 20, 0.14); background: #fffcf7; } html[data-theme="light"] .menu-modifier-group__hint, html[data-theme="light"] .menu-modifier-option__price, html[data-theme="light"] .table-line__modifiers { color: rgba(26, 23, 20, 0.66); } html[data-theme="light"] .qty-modal.has-modifiers .qty-modal__card { color: #1a1714; border-color: rgba(26, 23, 20, 0.14); background: #fffcf7; } @media (max-width: 559px) { .menu-modifier-group { padding: 0.55rem; } .qty-modal.has-modifiers .qty-modal__card { width: 100%; } } .table-cart-validation:not([hidden]) { margin: 0.75rem 0; padding: 0.7rem 0.85rem; border: 1px solid rgba(255, 136, 120, 0.42); border-radius: 0.75rem; color: #ffd8d2; background: rgba(116, 35, 29, 0.24); font-size: 0.92rem; line-height: 1.7; overflow-wrap: anywhere; } html[data-theme="light"] .table-cart-validation:not([hidden]) { color: #792a22; border-color: rgba(161, 40, 32, 0.26); background: #fff0ed; } .westo-menu-load-state:not([hidden]) { position: relative; z-index: 3; width: min(52rem, calc(100% - 2rem)); margin: 1rem auto; padding: 0.85rem 1rem; border: 1px solid rgba(246, 242, 235, 0.2); border-radius: 0.85rem; color: var(--menu-ink, #f6f2eb); background: rgba(16, 22, 24, 0.94); font-size: 0.95rem; line-height: 1.7; text-align: start; } .westo-menu-load-state p { margin: 0; } .westo-menu-load-state .westo-menu-load-retry { min-width: 44px; min-height: 44px; margin-top: 0.6rem; padding-inline: 1rem; border: 1px solid currentColor; border-radius: 0.65rem; color: inherit; background: transparent; font: inherit; cursor: pointer; touch-action: manipulation; } .westo-menu-load-state .westo-menu-load-retry:focus-visible { outline: 3px solid #7bd2da; outline-offset: 3px; } html[data-theme="light"] .westo-menu-load-state:not([hidden]) { color: #1a1714; border-color: rgba(26, 23, 20, 0.16); background: rgba(255, 252, 247, 0.98); } /* ===== END css/menu-story.css ===== */ /* ===== BEGIN css/westo-glass.css ===== */ /* Westo shared glass language — extracted from entrance-gate DNA. Tokens: --wg-* | Components: .wg-glass-btn .wg-chip .wg-cta .wg-panel Brand accent = logo cyan (#78d0d8), not legacy gold. */ :root { --wg-ink: #f4efe6; --wg-muted: rgba(244, 239, 230, 0.66); /* Brand cyan from westo-mark — jewel accent only */ --wg-accent: #78d0d8; --wg-accent-deep: #50c0d0; --wg-accent-soft: rgba(120, 208, 216, 0.16); --wg-accent-glow: rgba(120, 208, 216, 0.32); --wg-accent-line: rgba(120, 208, 216, 0.45); /* Legacy alias — do not set independently */ --wg-gold: var(--wg-accent); --wg-gold-soft: var(--wg-accent-soft); --wg-gold-line: var(--wg-accent-line); --wg-open: #8fd49a; --wg-closed: #e08a78; --wg-blur: 12px; --wg-blur-panel: 18px; --wg-r-btn: 0.8rem; --wg-r-chip: 0.9rem; --wg-r-panel: 1.35rem; --wg-chip-bg: linear-gradient( 160deg, rgba(255, 255, 255, 0.18) 0%, rgba(28, 24, 20, 0.34) 52%, rgba(12, 10, 9, 0.42) 100% ); --wg-chip-bg-hover: linear-gradient( 160deg, rgba(255, 255, 255, 0.28) 0%, rgba(40, 70, 75, 0.4) 100% ); --wg-glass-edge: linear-gradient( 135deg, rgba(255, 255, 255, 0.42) 0%, rgba(120, 208, 216, 0.18) 42%, rgba(255, 255, 255, 0.04) 58%, rgba(255, 255, 255, 0.28) 100% ); --wg-ease: cubic-bezier(0.22, 1, 0.36, 1); --wg-hover-time: 0.22s; --wg-btn-fill: rgba(255, 255, 255, 0.08); --wg-btn-fill-hover: rgba(255, 255, 255, 0.14); --wg-btn-ink: #fff; --wg-chip-ink: rgb(238, 245, 241); --wg-chip-border: rgba(255, 255, 255, 0.13); --wg-chip-border-hover: rgba(255, 255, 255, 0.26); --wg-panel-border: rgba(255, 255, 255, 0.14); --wg-panel-bg: linear-gradient( 155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 42%, rgba(14, 12, 11, 0.55) 100% ); --wg-cta-bg: #f4efe6; --wg-cta-ink: #1a1714; --wg-cta-border: transparent; --wg-theme-color: #121416; --wg-focus-ring: rgba(120, 208, 216, 0.7); } /* Light contract: cream surfaces + charcoal ink; primary CTA = charcoal/cream. Accent deep teal for contrast on cream. Never flood cyan backgrounds. */ html[data-theme='light'] { --wg-ink: #1a1714; --wg-muted: rgba(26, 23, 20, 0.64); --wg-accent: #2a7a86; --wg-accent-deep: #1f636e; --wg-accent-soft: rgba(42, 122, 134, 0.14); --wg-accent-glow: rgba(42, 122, 134, 0.22); --wg-accent-line: rgba(42, 122, 134, 0.42); --wg-gold: var(--wg-accent); --wg-gold-soft: var(--wg-accent-soft); --wg-gold-line: var(--wg-accent-line); /* Raised paper chrome — not muddy translucent gray */ --wg-chrome-bg: #fffcf7; --wg-chrome-bg-hover: #fff8ef; --wg-chrome-border: rgba(26, 23, 20, 0.14); --wg-chrome-border-hover: rgba(42, 122, 134, 0.45); --wg-chrome-shadow: 0 1px 1px rgba(26, 23, 20, 0.04), 0 0.35rem 0.85rem rgba(26, 23, 20, 0.08); --wg-chip-bg: linear-gradient(165deg, #ffffff 0%, #fffcf7 48%, #f7f0e6 100%); --wg-chip-bg-hover: linear-gradient(165deg, #ffffff 0%, #faf3e8 100%); --wg-glass-edge: linear-gradient( 135deg, rgba(255, 255, 255, 0.95) 0%, rgba(26, 23, 20, 0.08) 42%, rgba(42, 122, 134, 0.28) 58%, rgba(26, 23, 20, 0.12) 100% ); --wg-btn-fill: var(--wg-chrome-bg); --wg-btn-fill-hover: var(--wg-chrome-bg-hover); --wg-btn-ink: #1a1714; --wg-chip-ink: #1a1714; --wg-chip-border: var(--wg-chrome-border); --wg-focus-ring: rgba(42, 122, 134, 0.7); --wg-chip-border-hover: var(--wg-chrome-border-hover); --wg-panel-border: rgba(26, 23, 20, 0.1); --wg-panel-bg: linear-gradient( 165deg, #ffffff 0%, #fffcf8 42%, #f8f2e9 100% ); --wg-cta-bg: #1a1714; --wg-cta-ink: #f7f2ea; --wg-cta-border: transparent; --wg-theme-color: #ebe4d8; /* Atmosphere defaults — soft; chrome accent stays brand cyan */ --cat-wash: #ebe4d8; --cat-surface: #f4efe6; --cat-accent: var(--wg-accent); --cat-accent-soft: var(--wg-accent-soft); --cat-glow: var(--wg-accent-glow); --lux-page: #ebe4d8; --lux-surface: #f4efe6; --lux-raised: #fffcf7; --lux-price-bg: linear-gradient(165deg, #f4fbfc 0%, #e4f2f4 100%); --lux-price-border: rgba(42, 122, 134, 0.38); --lux-price-ink: #1a1714; } /* —— Glass control (header pills / icon squares) —— */ .wg-glass-btn { appearance: none; position: relative; overflow: hidden; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0; padding: 0; border: 0; border-radius: var(--wg-r-btn); background: var(--wg-btn-fill); color: var(--wg-btn-ink); text-decoration: none; cursor: pointer; font-family: 'Vazirmatn', 'Geist', system-ui, sans-serif; font-weight: 600; line-height: 1; -webkit-tap-highlight-color: transparent; -webkit-backdrop-filter: blur(var(--wg-blur)); backdrop-filter: blur(var(--wg-blur)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: transform var(--wg-hover-time) var(--wg-ease), background var(--wg-hover-time) ease; } .wg-glass-btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--wg-glass-edge); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .wg-glass-btn:hover, .wg-glass-btn:focus-visible, .wg-glass-btn.is-active, .wg-glass-btn.is-open { background: var(--wg-btn-fill-hover); outline: none; transform: translateY(-1px); } .wg-glass-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .wg-glass-btn--pill { border-radius: 999px; padding: 0 0.85rem; min-height: 2.6rem; } .wg-glass-btn--icon { width: 2.6rem; height: 2.6rem; flex: 0 0 auto; } /* —— Chip material (icon chips + primary CTAs) —— */ .wg-chip, .wg-cta { appearance: none; position: relative; overflow: hidden; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; margin: 0; border: 1px solid var(--wg-chip-border); border-radius: var(--wg-r-chip); background: var(--wg-chip-bg); color: var(--wg-chip-ink); cursor: pointer; font-family: 'Vazirmatn', 'Geist', system-ui, sans-serif; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: transparent; -webkit-backdrop-filter: blur(var(--wg-blur)); backdrop-filter: blur(var(--wg-blur)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.22); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--wg-ease); } .wg-chip::after, .wg-cta::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 44%; background: linear-gradient(rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 100%); pointer-events: none; z-index: 1; } .wg-chip > *, .wg-cta > * { position: relative; z-index: 2; } .wg-chip { width: 3.05rem; height: 3.05rem; flex: 0 0 auto; padding: 0; } .wg-chip:hover, .wg-chip:focus-visible, .wg-chip.is-active { background: var(--wg-chip-bg-hover); border-color: var(--wg-chip-border-hover); outline: none; transform: translateY(-2px); } .wg-cta { width: 100%; min-height: 3.15rem; padding: 0.85rem 1.2rem; font-size: 1rem; background: var(--wg-cta-bg, var(--wg-chip-bg)); color: var(--wg-cta-ink, var(--wg-btn-ink)); border-color: var(--wg-cta-border, var(--wg-chip-border)); } html[data-theme='light'] .wg-cta { background: var(--wg-cta-bg); color: var(--wg-cta-ink); border-color: var(--wg-cta-border); box-shadow: 0 0.65rem 1.5rem rgba(26, 23, 20, 0.2); } html[data-theme='light'] .wg-cta::after { opacity: 0.12; } .wg-cta:not(:disabled):hover, .wg-cta:not(:disabled):focus-visible { transform: translateY(-2px); border-color: rgba(120, 208, 216, 0.45); background: var(--wg-chip-bg-hover); outline: none; } html[data-theme='light'] .wg-cta:not(:disabled):hover, html[data-theme='light'] .wg-cta:not(:disabled):focus-visible { background: #2a2521; border-color: rgba(42, 122, 134, 0.55); color: var(--wg-cta-ink); } .wg-cta:disabled { cursor: wait; opacity: 0.8; } .wg-cta--sm { min-height: 2.55rem; padding: 0.65rem 1rem; font-size: 0.9rem; border-radius: 0.75rem; } .wg-cta--inline { width: auto; min-width: 8rem; padding-inline: 1.25rem; } /* —— Glass panel / card —— */ .wg-panel { position: relative; box-sizing: border-box; border-radius: var(--wg-r-panel); border: 1px solid var(--wg-panel-border); background: var(--wg-panel-bg); color: var(--wg-ink); -webkit-backdrop-filter: blur(var(--wg-blur-panel)) saturate(1.15); backdrop-filter: blur(var(--wg-blur-panel)) saturate(1.15); box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.05); } html[data-theme='light'] .wg-panel { box-shadow: 0 1rem 2.2rem rgba(26, 23, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(26, 23, 20, 0.04); } .wg-panel--dense { --wg-blur-panel: 10px; border-radius: 1rem; background: linear-gradient( 155deg, rgba(255, 255, 255, 0.1) 0%, rgba(18, 16, 18, 0.72) 55%, rgba(10, 9, 11, 0.82) 100% ); } /* Must follow .wg-panel--dense so light wins cascade */ html[data-theme='light'] .wg-panel--dense { background: linear-gradient( 155deg, rgba(255, 255, 255, 0.95) 0%, rgba(242, 235, 224, 0.92) 55%, rgba(232, 222, 206, 0.95) 100% ); } @media (prefers-reduced-motion: reduce) { .wg-glass-btn, .wg-chip, .wg-cta { transition: none !important; } .wg-glass-btn:hover, .wg-glass-btn:focus-visible, .wg-chip:hover, .wg-chip:focus-visible, .wg-cta:not(:disabled):hover, .wg-cta:not(:disabled):focus-visible { transform: none; } } /* ---- Pass2: secondary densify + focus ---- */ html[data-theme='light'] .wg-glass-btn { background: var(--wg-chrome-bg, #fffcf7); color: var(--wg-btn-ink); border: 1px solid var(--wg-chrome-border, rgba(26, 23, 20, 0.14)); box-shadow: var(--wg-chrome-shadow); } html[data-theme='light'] .wg-glass-btn:hover, html[data-theme='light'] .wg-glass-btn:focus-visible, html[data-theme='light'] .wg-glass-btn.is-active, html[data-theme='light'] .wg-glass-btn.is-open { background: var(--wg-chrome-bg-hover, #fff8ef); border-color: var(--wg-chrome-border-hover); } html[data-theme='light'] .wg-glass-btn:focus-visible, html[data-theme='light'] .wg-chip:focus-visible, html[data-theme='light'] .wg-cta:focus-visible { outline: 2px solid rgba(42, 122, 134, 0.65); outline-offset: 2px; } html[data-theme='light'] .wg-chip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0.35rem 0.85rem rgba(26, 23, 20, 0.1); } /* ---- Pass3 stage2: secondary contract ---- */ html[data-theme='light'] .wg-glass-btn:focus-visible, html[data-theme='light'] .wg-chip:focus-visible, html[data-theme='light'] .wg-cta:focus-visible { outline-color: var(--wg-focus-ring, rgba(42, 122, 134, 0.65)); } /* ---- Pass3 stage9: sitewide light safety net ---- */ html[data-theme='light'] ::selection { background: rgba(42, 122, 134, 0.28); color: #1a1714; } html[data-theme='light'] body { color: var(--wg-ink, #1a1714); } html[data-theme='light'] a { color: inherit; } /* Shared action material. It deliberately uses the same quiet glass language as the header chrome: a readable surface, a fine rim, and no heavy fill. */ :root { --wg-action-bg: rgba(255, 255, 255, 0.08); --wg-action-bg-hover: rgba(255, 255, 255, 0.14); --wg-action-ink: #f8f6f0; --wg-action-edge: rgba(255, 255, 255, 0.2); --wg-action-edge-hover: rgba(120, 208, 216, 0.58); --wg-action-glow: rgba(120, 208, 216, 0.18); --wg-action-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 0.35rem 0.95rem rgba(0, 0, 0, 0.2); --wg-action-highlight: rgba(255, 255, 255, 0.16); } html[data-theme='light'] { --wg-action-bg: rgba(255, 252, 247, 0.72); --wg-action-bg-hover: rgba(255, 252, 247, 0.9); --wg-action-ink: #1a1714; --wg-action-edge: rgba(26, 23, 20, 0.15); --wg-action-edge-hover: rgba(42, 122, 134, 0.5); --wg-action-glow: rgba(42, 122, 134, 0.14); --wg-action-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(26, 23, 20, 0.06), 0 0.32rem 0.9rem rgba(26, 23, 20, 0.1); --wg-action-highlight: rgba(255, 255, 255, 0.52); } /* ===== WESTO shared GPU budget (release3 / mobile adaptive) ===== */ html[data-perf-tier="economy"] { --wg-blur: 0px; --wg-blur-panel: 0px; } html[data-perf-tier="balanced"] { --wg-blur: 4px; --wg-blur-panel: 8px; } html[data-perf-tier="premium"] { --wg-blur: 10px; --wg-blur-panel: 14px; } html[data-perf-tier="economy"] .wg-glass-btn, html[data-perf-tier="economy"] .wg-chip, html[data-perf-tier="economy"] .wg-panel, html[data-perf-tier="economy"] .eg-card, html[data-perf-tier="economy"] .eg-sheet, html[data-perf-tier="economy"] .navbar, html[data-perf-tier="economy"] .table-drawer, html.perf-economy .wg-glass-btn, html.perf-economy .wg-chip, html.perf-economy .wg-panel, html.perf-economy .eg-card, html.perf-economy .eg-sheet, html.perf-economy .navbar, html.perf-economy .table-drawer { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } @media (max-width: 991px), (pointer: coarse) { html[data-perf-tier="economy"], html[data-perf-tier="balanced"] { --wg-blur: 0px; --wg-blur-panel: 0px; } html[data-perf-tier="economy"] .wg-glass-btn, html[data-perf-tier="economy"] .wg-chip, html[data-perf-tier="economy"] .wg-panel, html[data-perf-tier="economy"] .eg-card, html[data-perf-tier="economy"] .eg-sheet, html[data-perf-tier="balanced"] .eg-card, html[data-perf-tier="balanced"] .eg-sheet { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* ===== END css/westo-glass.css ===== */ /* ===== BEGIN css/vazir-system.css ===== */ /* WESTO global local typography — self-contained Vazirmatn system font. */ @font-face { font-family: 'Geist'; src: url('../assets/fonts/6a17254d942eb32e84bde0f0_Geist-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('../assets/fonts/6a0b0eef462d20ff07b9cbe9_GeistMono-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('../assets/fonts/Vazirmatn-Variable.woff2') format('woff2-variations'); font-style: normal; font-weight: 100 900; font-display: swap; } :root { --westo-ui-font: 'Vazirmatn', 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } html, body, button, input, select, textarea, optgroup, label, summary, dialog, [role='button'], [role='tab'], [role='menuitem'] { font-family: var(--westo-ui-font) !important; } /* Keep code, numeric diagnostics and icon fonts semantically correct. */ code, kbd, pre, samp, .admin-mono, .ltr-input { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } [class^='w-icon-'], [class*=' w-icon-'] { font-family: webflow-icons !important; } /* Third-party form fragments in the exported page carry inline Helvetica rules. Keep WESTO typography consistent without touching icon/monospace fonts. */ .sib-form, .sib-form *, .sib-form-message-panel, .entry__error, .entry__label, .entry__choice, .form__entry, .form__label-row { font-family: var(--westo-ui-font) !important; } /* ===== END css/vazir-system.css ===== */ /* ===== BEGIN css/westo-production-v12.css ===== */ /* WESTO Production Design System v12 — geometry first Goals: 1) no overlap at any supported viewport, 2) preserve source state machines and WebGL motion, 3) retain WESTO glass language + approved v8 pattern, 4) deterministic mobile / tablet / desktop composition. */ :root { --prod-cyan:#1cc9d4; --prod-cyan-hi:#72eef4; --prod-ivory:#f7f3eb; --prod-bg:#020708; --prod-bg-2:#061113; --prod-ink:#f7f3eb; --prod-muted:rgba(226,231,229,.66); --prod-faint:rgba(226,231,229,.42); --prod-line:rgba(120,224,231,.20); --prod-line-neutral:rgba(255,255,255,.105); --prod-glass:rgba(5,15,18,.72); --prod-glass-strong:rgba(5,16,19,.92); --prod-shadow:0 30px 90px rgba(0,0,0,.34); --prod-pattern-micro:url('../assets/images/entrance/westo-micro-pattern-v8.png'); --prod-cta-pattern:url('../assets/images/entrance/westo-cta-pattern-v8.webp'); --cat-wash:#eef3e8; --cat-surface:#f6f9f2; --cat-accent:#5a7a3e; --cat-accent-soft:rgba(90,122,62,.16); --cat-glow:rgba(120,160,80,.18); --v12-nav-h: 84px; --v12-edge: clamp(14px, 2.4vw, 34px); --v12-safe-b: max(12px, env(safe-area-inset-bottom, 0px)); --v12-safe-t: max(0px, env(safe-area-inset-top, 0px)); --v12-glass-border: rgba(255,255,255,.11); --v12-glass-highlight: rgba(255,255,255,.055); --v12-ease: cubic-bezier(.22,.82,.22,1); --v12-hero-dock-h: 78px; --v12-hero-dock-b: 18px; --v12-hero-copy-b: 112px; } html[data-theme='light'] { --prod-bg:#f5f1e9; --prod-bg-2:#eef2e8; --prod-ink:#111716; --prod-muted:rgba(34,40,38,.66); --prod-faint:rgba(34,40,38,.40); --prod-line:rgba(15,161,173,.18); --prod-line-neutral:rgba(12,25,22,.105); --prod-glass:rgba(255,255,255,.74); --prod-glass-strong:rgba(255,255,255,.94); --prod-shadow:0 30px 85px rgba(37,48,43,.12); --v12-glass-border: rgba(17,31,28,.105); --v12-glass-highlight: rgba(255,255,255,.78); } /* v12 is self-contained: v11 is intentionally no longer required in the production cascade. Keep the approved WESTO micro-pattern and cinematic category atmosphere without inheriting v11's conflicting geometry. */ html{color-scheme:dark;background:var(--prod-bg);scrollbar-color:rgba(102,220,228,.30) transparent} html[data-theme='light']{color-scheme:light} body{ color:var(--prod-ink); background: radial-gradient(62rem 48rem at 50% 40%,var(--cat-glow),transparent 67%), radial-gradient(55rem 36rem at 92% 16%,rgba(240,180,106,.05),transparent 72%), linear-gradient(180deg,var(--prod-bg),var(--prod-bg-2)); text-rendering:optimizeLegibility; } body::before{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:var(--prod-pattern-micro);background-size:10px 10px;background-repeat:repeat; opacity:.032;mix-blend-mode:screen; -webkit-mask-image:radial-gradient(ellipse 62% 54% at 50% 48%,rgba(0,0,0,.14),rgba(0,0,0,.50) 60%,#000 100%); mask-image:radial-gradient(ellipse 62% 54% at 50% 48%,rgba(0,0,0,.14),rgba(0,0,0,.50) 60%,#000 100%); } html[data-theme='light'] body::before{opacity:.012;mix-blend-mode:multiply} button,a,input,select,textarea{-webkit-tap-highlight-color:transparent} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid color-mix(in srgb,var(--prod-cyan) 76%,white);outline-offset:3px} ::selection{background:rgba(28,201,212,.24);color:inherit} /* Keep the entire guest experience viewport-owned. Individual source sections can be tall for scroll-state bookkeeping, but visible chrome must never create horizontal overflow. */ html, body { max-width: 100%; } body { overflow-x:hidden !important; } @supports (overflow:clip){ body { overflow-x:clip !important; } } /* ======================================================================== PHASE A — Entrance: independent layout bands, zero flex-crush ======================================================================== */ #westo-entrance .eg-shell { width: min(100%, 1240px) !important; height: 100dvh !important; min-height: 100svh !important; grid-template-rows: 68px minmax(0,1fr) 70px !important; gap: 12px !important; padding: calc(14px + var(--eg-safe-t)) clamp(14px,2.5vw,30px) calc(12px + var(--eg-safe-b)) !important; overflow: hidden !important; } #westo-entrance .eg-top { height: 68px !important; min-height: 68px !important; width: min(100%, 940px) !important; margin-inline: auto !important; } #westo-entrance .eg-mid { min-height: 0 !important; overflow: hidden !important; padding: 0 !important; display: grid !important; place-items: center !important; } #westo-entrance .eg-card { /* The card is allowed to size itself, but can never exceed its row. */ width: min(900px, 94vw) !important; max-width: 900px !important; height: min(100%, 780px) !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; flex: none !important; display: grid !important; grid-template-rows: minmax(0,auto) auto auto minmax(0,1fr) auto !important; align-content: center !important; justify-items: center !important; row-gap: clamp(8px,1.25vh,14px) !important; padding: clamp(22px,3.2vh,40px) clamp(24px,4vw,52px) clamp(20px,2.7vh,34px) !important; border-radius: 38px !important; } /* Protect every flow block from being compressed through zero height. */ #westo-entrance .eg-logo-stage, #westo-entrance .eg-brand-copy, #westo-entrance .eg-status, #westo-entrance .eg-experience, #westo-entrance .eg-cta-wrap { flex: none !important; min-height: 0 !important; } #westo-entrance .eg-logo-stage { grid-row: 1 !important; width: clamp(118px,13vw,158px) !important; max-height: 235px !important; margin: 0 auto 2px !important; } #westo-entrance .eg-logo-png { width: 100% !important; height: auto !important; max-height: 100% !important; object-fit: contain !important; } /* Correct theme asset: ivory on dark, charcoal on light. */ html[data-theme='dark'] #westo-entrance .eg-brand-wordmark-img { content: url('../assets/images/brand/westo-fa-wordmark.png') !important; } html[data-theme='light'] #westo-entrance .eg-brand-wordmark-img { content: url('../assets/images/brand/westo-fa-wordmark-dark.png') !important; } #westo-entrance .eg-brand-copy { grid-row: 2 !important; width: 100% !important; margin: 0 !important; } #westo-entrance .eg-brand-title { margin: 0 !important; } #westo-entrance .eg-brand-wordmark-img { display: block !important; width: min(390px,62vw) !important; height: auto !important; max-height: 76px !important; margin-inline: auto !important; object-fit: contain !important; } #westo-entrance .eg-tagline { margin: 9px 0 0 !important; font-size: clamp(13px,1.1vw,16px) !important; line-height: 1.45 !important; } #westo-entrance .eg-subtitle { margin: 3px 0 0 !important; font-size: 10px !important; line-height: 1.3 !important; letter-spacing: .30em !important; } #westo-entrance .eg-status { grid-row: 3 !important; margin: 0 !important; min-height: 42px !important; height: auto !important; padding: 7px 16px !important; border-radius: 999px !important; font-size: 12px !important; line-height: 1.25 !important; white-space: nowrap !important; } #westo-entrance .eg-status-text { flex-wrap: nowrap !important; } #westo-entrance .eg-experience { grid-row: 4 !important; width: 100% !important; height: auto !important; min-height: 132px !important; margin: 0 !important; display: grid !important; grid-template-rows: auto auto auto auto !important; align-content: center !important; gap: 8px !important; overflow: visible !important; } #westo-entrance .eg-experience__lead { margin: 0 !important; font-size: 12px !important; line-height: 1.4 !important; } #westo-entrance .eg-steps-row { width: min(570px,100%) !important; min-height: 66px !important; margin: 0 auto !important; gap: clamp(18px,5vw,48px) !important; padding: 0 10px !important; justify-content: space-between !important; } #westo-entrance .eg-steps-row::before { top: 29px !important; inset-inline: 38px !important; } #westo-entrance .eg-step { min-width: 0 !important; gap: 5px !important; } #westo-entrance .eg-step-icon { width: 58px !important; height: 58px !important; flex: 0 0 58px !important; } #westo-entrance .eg-step-icon svg { width: 21px !important; height: 21px !important; } #westo-entrance .eg-step-label { font-size: 9px !important; line-height: 1.25 !important; white-space: nowrap !important; } #westo-entrance .eg-progress { width: 100% !important; min-height: 18px !important; margin: 0 !important; gap: 12px !important; } #westo-entrance .eg-progress__pct { font-size: 11px !important; min-width: 38px !important; } #westo-entrance .eg-quote { margin: 0 !important; font-size: 11px !important; line-height: 1.4 !important; } #westo-entrance .eg-cta-wrap { grid-row: 5 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #westo-entrance .eg-cta-wrap::before { display: none !important; } #westo-entrance .eg-cta { min-height: 64px !important; height: 64px !important; font-size: 15px !important; border-radius: 34px !important; } #westo-entrance .eg-foot { height: 70px !important; min-height: 70px !important; width: min(100%, 1120px) !important; margin-inline: auto !important; align-self: end !important; position: relative !important; z-index: 5 !important; } #westo-entrance .eg-dock { min-height: 62px !important; height: 62px !important; } #westo-entrance .eg-corner { min-height: 58px !important; height: 58px !important; } /* Desktop / tablet short-height mode: fit without collapsing the loader. */ @media (min-width: 768px) and (max-height: 850px) { #westo-entrance .eg-shell { grid-template-rows: 58px minmax(0,1fr) 58px !important; gap: 8px !important; padding-top: calc(8px + var(--eg-safe-t)) !important; padding-bottom: calc(8px + var(--eg-safe-b)) !important; } #westo-entrance .eg-top { height:58px !important; min-height:58px !important; } #westo-entrance .eg-top > .eg-glass-btn:first-child { width:56px !important; min-width:56px !important; height:56px !important; min-height:56px !important; } #westo-entrance #eg-site-menu.westo-menu-trigger { min-height:54px !important; } #westo-entrance .eg-card { width:min(820px,92vw) !important; height:100% !important; row-gap:6px !important; padding:14px 38px 14px !important; border-radius:30px !important; } #westo-entrance .eg-logo-stage { width:112px !important; max-height:166px !important; margin-bottom:0 !important; } #westo-entrance .eg-brand-wordmark-img { width:min(320px,54vw) !important; max-height:58px !important; } #westo-entrance .eg-tagline { margin-top:4px !important; font-size:13px !important; } #westo-entrance .eg-subtitle { margin-top:1px !important; font-size:8px !important; } #westo-entrance .eg-status { min-height:36px !important; padding:5px 13px !important; font-size:10.5px !important; } #westo-entrance .eg-experience { min-height:110px !important; gap:4px !important; } #westo-entrance .eg-experience__lead { font-size:10px !important; } #westo-entrance .eg-steps-row { min-height:50px !important; width:min(480px,90%) !important; } #westo-entrance .eg-steps-row::before { top:22px !important; inset-inline:32px !important; } #westo-entrance .eg-step-icon { width:46px !important; height:46px !important; flex-basis:46px !important; } #westo-entrance .eg-step-icon svg { width:17px !important; height:17px !important; } #westo-entrance .eg-step-label { font-size:7px !important; } #westo-entrance .eg-progress { min-height:12px !important; } #westo-entrance .eg-progress__pct { font-size:9px !important; } #westo-entrance .eg-quote { font-size:9px !important; } #westo-entrance .eg-cta { height:56px !important; min-height:56px !important; font-size:14px !important; } #westo-entrance .eg-foot { height:58px !important; min-height:58px !important; } #westo-entrance .eg-dock { height:54px !important; min-height:54px !important; } #westo-entrance .eg-corner { height:52px !important; min-height:52px !important; } } /* Mobile portrait: card remains one clean composition. */ @media (max-width: 767px) { :root { --v12-nav-h:72px; } #westo-entrance .eg-shell { width:100% !important; grid-template-rows: 58px minmax(0,1fr) 58px !important; gap:8px !important; padding: calc(8px + var(--eg-safe-t)) 9px calc(8px + var(--eg-safe-b)) !important; } #westo-entrance .eg-top { height:58px !important; min-height:58px !important; width:100% !important; } #westo-entrance .eg-top > .eg-glass-btn:first-child { width:56px !important; min-width:56px !important; height:56px !important; min-height:56px !important; } #westo-entrance #eg-site-menu.westo-menu-trigger { min-height:54px !important; min-width:108px !important; } #westo-entrance .eg-mid { overflow:auto !important; overscroll-behavior:contain !important; scrollbar-width:none !important; } #westo-entrance .eg-mid::-webkit-scrollbar { display:none !important; } #westo-entrance .eg-card { width:100% !important; height:auto !important; max-height:none !important; min-height:min(610px,100%) !important; row-gap:6px !important; padding:18px 14px 15px !important; border-radius:29px !important; } #westo-entrance .eg-logo-stage { width:106px !important; max-height:158px !important; } #westo-entrance .eg-brand-wordmark-img { width:min(270px,70vw) !important; max-height:54px !important; } #westo-entrance .eg-tagline { margin-top:5px !important; font-size:11px !important; } #westo-entrance .eg-subtitle { margin-top:2px !important; font-size:8px !important; letter-spacing:.23em !important; } #westo-entrance .eg-status { min-height:36px !important; padding:5px 10px !important; font-size:10px !important; max-width:96% !important; } #westo-entrance .eg-status-meta,#westo-entrance .eg-status-loc { font-size:9px !important; } #westo-entrance .eg-experience { min-height:112px !important; gap:5px !important; } #westo-entrance .eg-experience__lead { font-size:10px !important; } #westo-entrance .eg-steps-row { min-height:54px !important; width:min(100%,390px) !important; gap:8px !important; } #westo-entrance .eg-steps-row::before { top:23px !important; inset-inline:30px !important; } #westo-entrance .eg-step-icon { width:46px !important; height:46px !important; flex-basis:46px !important; } #westo-entrance .eg-step-icon svg { width:18px !important; height:18px !important; } #westo-entrance .eg-step-label { font-size:7px !important; } #westo-entrance .eg-progress { min-height:14px !important; gap:8px !important; } #westo-entrance .eg-progress__pct { font-size:9px !important; min-width:31px !important; } #westo-entrance .eg-quote { font-size:9px !important; } #westo-entrance .eg-cta { min-height:56px !important; height:56px !important; font-size:13px !important; } #westo-entrance .eg-cta::before { width:min(170px,42%) !important; } #westo-entrance .eg-foot { height:58px !important; min-height:58px !important; width:100% !important; } #westo-entrance .eg-dock { height:54px !important; min-height:54px !important; max-width:54vw !important; } #westo-entrance .eg-dock__btn { padding-inline:5px !important; } #westo-entrance .eg-dock__label { display:none !important; } #westo-entrance .eg-corner { height:52px !important; min-height:52px !important; } #westo-entrance .eg-theme-toggle { width:52px !important; } #westo-entrance .eg-lang-switch { min-width:126px !important; padding-inline:10px !important; } } @media (max-width: 430px) and (max-height: 790px) { #westo-entrance .eg-card { min-height:570px !important; padding-top:13px !important; padding-bottom:12px !important; } #westo-entrance .eg-logo-stage { width:78px !important; max-height:116px !important; } #westo-entrance .eg-brand-wordmark-img { width:218px !important; max-height:43px !important; } #westo-entrance .eg-step-label { display:none !important; } #westo-entrance .eg-experience { min-height:96px !important; } } .navbar{z-index:80!important;pointer-events:none} .navbar_content{background:transparent!important;border:0!important;pointer-events:auto} .navbar_container{margin-inline:auto!important;align-items:center!important} .navbar_logo-link{grid-column:2!important;justify-self:center!important;display:grid!important;place-items:center!important;padding:0!important;background:transparent!important} .navbar_logo{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 6px 16px rgba(0,0,0,.08))} .navbar_sound-wrapper{grid-column:1!important;justify-self:start!important;display:flex!important;align-items:center!important;gap:9px!important} .navbar_menu-wrapper{grid-column:3!important;justify-self:end!important} .navbar_table,.westo-back-categories,.navbar_menu-button,#nav-auth-btn{ border:1px solid var(--prod-line-neutral)!important;border-radius:999px!important;color:var(--prod-ink)!important;background:var(--prod-glass)!important; -webkit-backdrop-filter:blur(14px) saturate(1.08)!important;backdrop-filter:blur(14px) saturate(1.08)!important; box-shadow:0 13px 34px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.05)!important; transition:border-color .22s ease,background .25s ease,transform .18s var(--v12-ease),box-shadow .25s ease!important; } .navbar_table:hover,.westo-back-categories:hover,.navbar_menu-button:hover{border-color:color-mix(in srgb,var(--prod-cyan) 42%,transparent)!important;transform:translateY(-1px)!important} .navbar_table:active,.westo-back-categories:active,.navbar_menu-button:active{transform:translateY(1px)!important} /* ======================================================================== PHASE B — Global navbar: stable 3-column geometry ======================================================================== */ .navbar_content { height:var(--v12-nav-h) !important; min-height:var(--v12-nav-h) !important; padding:10px var(--v12-edge) !important; } .navbar_container { width:min(100%,1180px) !important; height:100% !important; grid-template-columns:minmax(140px,1fr) auto minmax(140px,1fr) !important; gap:12px !important; } .navbar_logo-link { width:clamp(145px,15vw,205px) !important; height:54px !important; } .navbar_table,.westo-back-categories,.navbar_menu-button,#nav-auth-btn { min-height:52px !important; } @media(max-width:767px){ .navbar_content{padding-inline:10px !important} .navbar_container{grid-template-columns:minmax(54px,1fr) auto minmax(110px,1fr)!important;gap:7px!important} .navbar_logo-link{width:128px!important;height:46px!important} .navbar_table,.westo-back-categories,.navbar_menu-button,#nav-auth-btn{min-height:48px!important;height:48px!important} .navbar_menu-button{min-width:82px!important;padding-inline:13px!important} #nav-auth-btn{min-width:48px!important;padding-inline:11px!important} } @media(max-width:390px){.navbar_logo-link{width:112px!important}.navbar_menu-button{min-width:74px!important}} /* ======================================================================== PHASE C — Category index: v12 owns copy, source owns canvas + carousel ======================================================================== */ html:not(.is-dish-boards) #westo-dish-card, html:not(.is-dish-boards) .is-benefits, html:not(.is-dish-boards) .benefits_nav.is-menu-rail, html:not(.is-dish-boards) .westo-dish-catbar{opacity:0!important;visibility:hidden!important;pointer-events:none!important} html:not(.is-dish-boards) .section.is-gamme { height:100dvh !important; min-height:100svh !important; overflow:hidden !important; } html:not(.is-dish-boards) .section.is-gamme .gamme_container > .padding-global > .container-large > .padding-bottom > .max-width-medium { position:relative !important; height:100% !important; min-height:100% !important; padding:var(--v12-nav-h) 10px 12px !important; } /* Hide legacy title/meta/pagination to remove duplicate information and collisions. */ html:not(.is-dish-boards) .carousel_title-collection, html:not(.is-dish-boards) .westo-prod-hero-meta, html:not(.is-dish-boards) .carousel_pagination, html:not(.is-dish-boards) .scroll_discover { opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } .westo-v12-hero-copy { position:absolute; z-index:10; left:50%; bottom:calc(var(--v12-hero-dock-b) + var(--v12-hero-dock-h) + 24px); transform:translateX(-50%); width:min(700px,88vw); text-align:center; pointer-events:none; transition:opacity .22s ease,transform .36s var(--v12-ease); } .westo-v12-hero-copy.is-changing { opacity:0; transform:translate(-50%,7px); } .westo-v12-hero-kicker { color:color-mix(in srgb,var(--cat-accent,var(--prod-cyan)) 76%,var(--prod-muted));font:650 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.28em;direction:ltr;text-transform:uppercase; } .westo-v12-hero-title { margin:6px 0 0;font-size:clamp(42px,5.3vw,66px);line-height:1;font-weight:900;letter-spacing:-.035em;color:var(--prod-ink);text-shadow:0 10px 30px rgba(0,0,0,.16); } .westo-v12-hero-desc { margin:10px auto 0;max-width:48ch;color:var(--prod-muted);font-size:12px;line-height:1.65;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden; } .westo-v12-hero-hint { margin-top:8px;color:var(--prod-muted);font-size:11px;display:flex;align-items:center;justify-content:center;gap:7px; } .westo-v12-hero-hint svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .westo-v12-hero-rail { position:relative;width:min(520px,72vw);height:18px;margin:10px auto 0;display:grid;grid-template-columns:repeat(16,1fr);align-items:center; } .westo-v12-hero-rail::before { content:'';position:absolute;inset-inline:2%;height:2px;border-radius:2px;background:linear-gradient(90deg,#b8d48a,#f0b46a,#c9d86a,#f2a070,#e89058,#d4a86a,#e8a888,#a8d478,#8ec8d0,#8fcb7a,#c4a078,#d4b090,#9ec8a0,#f0b0a0,#c8b0e0,#7ec8b0);opacity:.55; } .westo-v12-hero-dot { width:5px;height:5px;border-radius:50%;justify-self:center;position:relative;z-index:1;background:rgba(255,255,255,.34);transition:transform .3s var(--v12-ease),background .3s ease,box-shadow .3s ease; } html[data-theme='light'] .westo-v12-hero-dot { background:rgba(10,20,18,.24); } .westo-v12-hero-dot.is-active { transform:scale(2);background:var(--cat-accent,var(--prod-cyan));box-shadow:0 0 15px var(--cat-glow,rgba(28,201,212,.22)); } .westo-prod-hero-cats { position:absolute !important; z-index:14 !important; left:50% !important; transform:translateX(-50%) !important; display:flex !important; align-items:center !important; overflow-x:auto !important; scrollbar-width:none !important; background:var(--prod-glass) !important; border:1px solid var(--prod-line-neutral) !important; -webkit-backdrop-filter:blur(14px) saturate(1.06) !important; backdrop-filter:blur(14px) saturate(1.06) !important; box-shadow:0 18px 48px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.05) !important; bottom:var(--v12-hero-dock-b) !important; width:min(980px,94vw) !important; height:var(--v12-hero-dock-h) !important; border-radius:40px !important; padding:7px 9px !important; gap:4px !important; scroll-padding-inline:45% !important; } .westo-prod-hero-cats::-webkit-scrollbar{display:none} .westo-prod-hero-cat { appearance:none;border:0;background:transparent;color:var(--prod-muted);display:grid;align-items:center;cursor:pointer;transition:.22s var(--v12-ease);flex:0 0 104px !important;min-width:104px !important;height:62px !important;border-radius:29px !important;grid-template-columns:38px 1fr !important;padding:5px 8px !important; } .westo-prod-hero-cat img { width:38px !important;height:38px !important;object-fit:contain!important;filter:drop-shadow(0 4px 7px rgba(0,0,0,.14)); } .westo-prod-hero-cat span { font-size:9px !important;line-height:1.25 !important; } .westo-prod-hero-cat.is-active { background:color-mix(in srgb,var(--cat-accent,var(--prod-cyan)) 11%,transparent) !important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat-accent,var(--prod-cyan)) 42%,transparent),0 8px 20px rgba(0,0,0,.08) !important; } .carousel_arrow { top:48% !important;width:48px !important;height:48px !important; } .carousel_arrow.is-prev { inset-inline-start:clamp(12px,3vw,44px) !important; } .carousel_arrow.is-next { inset-inline-end:clamp(12px,3vw,44px) !important; } /* Reserve the lower editorial band. The WebGL stage remains source-owned; this mask only prevents visible canvas pixels from competing with copy/rail. */ html:not(.is-dish-boards) .gamme_canvas-wrapper, html:not(.is-dish-boards) .canvas_wrapper, html:not(.is-dish-boards) .webgl{ -webkit-mask-image:linear-gradient(180deg,#000 0 68%,rgba(0,0,0,.86) 76%,rgba(0,0,0,.30) 88%,transparent 97%); mask-image:linear-gradient(180deg,#000 0 68%,rgba(0,0,0,.86) 76%,rgba(0,0,0,.30) 88%,transparent 97%); } /* Dish mode must never leave hero editorial furniture visible underneath. */ html.is-dish-boards .westo-v12-hero-copy, html.is-dish-boards .westo-prod-hero-cats, html.is-dish-boards .carousel_title-collection, html.is-dish-boards .carousel_pagination, html.is-dish-boards .scroll_discover { opacity:0 !important;visibility:hidden !important;pointer-events:none !important; } @media(max-width:767px){ :root{--v12-hero-dock-h:68px;--v12-hero-dock-b:10px} .westo-v12-hero-copy{bottom:calc(var(--v12-hero-dock-h) + var(--v12-hero-dock-b) + 17px);width:92vw} .westo-v12-hero-kicker{font-size:8px;letter-spacing:.23em} .westo-v12-hero-title{font-size:clamp(36px,10vw,48px);margin-top:4px} .westo-v12-hero-desc{font-size:10px;max-width:82vw;margin-top:7px;-webkit-line-clamp:1} .westo-v12-hero-hint{font-size:9px;margin-top:5px} .westo-v12-hero-rail{width:78vw;margin-top:6px;height:13px} .westo-prod-hero-cats{width:97vw!important;height:68px!important;padding:5px 6px!important;border-radius:34px!important} .westo-prod-hero-cat{flex-basis:84px!important;min-width:84px!important;height:56px!important;grid-template-columns:31px 1fr!important;padding:4px 5px!important} .westo-prod-hero-cat img{width:31px!important;height:31px!important} .westo-prod-hero-cat span{font-size:8px!important} .carousel_arrow{width:40px!important;height:40px!important;top:45%!important;background:rgba(6,16,18,.58)!important} html[data-theme='light'] .carousel_arrow{background:rgba(255,255,255,.62)!important} } @media(max-width:430px){.westo-v12-hero-desc{display:none}.westo-v12-hero-copy{bottom:92px}.westo-v12-hero-title{font-size:42px}} @media(max-height:850px) and (min-width:768px){ :root{--v12-hero-dock-h:64px;--v12-hero-dock-b:10px} .westo-v12-hero-copy{bottom:calc(var(--v12-hero-dock-b) + var(--v12-hero-dock-h) + 12px);width:min(660px,80vw)} .westo-v12-hero-desc{display:none} .westo-v12-hero-title{font-size:42px} .westo-v12-hero-hint{margin-top:5px;font-size:9px} .westo-v12-hero-rail{margin-top:5px;height:13px} .westo-prod-hero-cats{height:64px!important;bottom:10px!important} .westo-prod-hero-cat{height:50px!important} } /* ======================================================================== PHASE D — Dish story: stable three-zone desktop / two-zone mobile ======================================================================== */ html.is-dish-boards { --menu-nav-h: var(--v12-nav-h); --menu-catbar-gap: 8px; --menu-catbar-base-h: 72px; --menu-catbar-h: 72px; } .westo-dish-catbar { position:fixed !important; z-index:175 !important; top:calc(var(--v12-nav-h) + 6px) !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; width:min(1120px,94vw) !important; min-height:72px !important; height:72px !important; padding:6px 9px !important; border-radius:36px !important; overflow:hidden !important; background:var(--prod-glass)!important; border:1px solid var(--prod-line-neutral)!important; -webkit-backdrop-filter:blur(15px) saturate(1.07)!important;backdrop-filter:blur(15px) saturate(1.07)!important; box-shadow:0 18px 50px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.055)!important; } .westo-dish-catbar__track { height:100% !important;gap:4px !important;padding:0 6px !important;align-items:center !important;scroll-padding-inline:45% !important; } .westo-dish-catbar__chip { appearance:none;border:1px solid transparent!important;background:transparent!important;color:var(--prod-muted)!important;transition:.22s var(--v12-ease)!important;flex:0 0 96px !important;min-width:96px !important;height:58px !important;border-radius:27px !important;padding:4px 7px !important;gap:3px !important; } .westo-dish-catbar__icon { width:34px !important;height:34px !important;flex:0 0 34px !important; } .westo-dish-catbar__label { font-size:8px !important;line-height:1.15 !important;max-width:78px !important; } .westo-dish-catbar__thumb{object-fit:contain!important;filter:drop-shadow(0 4px 7px rgba(0,0,0,.14))!important} .westo-dish-catbar__chip.is-active{color:var(--prod-ink)!important;background:color-mix(in srgb,var(--cat-accent) 12%,transparent)!important;border-color:color-mix(in srgb,var(--cat-accent) 44%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat-accent) 12%,transparent)!important} .westo-dish-catbar__chip:hover{color:var(--prod-ink)!important} /* Stable ownership boundaries: source owns state/content; v12 owns visible geometry. */ html.is-dish-boards .benefits_nav.is-menu-rail{ position:fixed!important;z-index:172!important;overflow-y:auto!important;overflow-x:hidden!important; background:var(--prod-glass)!important;border:1px solid var(--prod-line-neutral)!important; -webkit-backdrop-filter:blur(15px) saturate(1.06)!important;backdrop-filter:blur(15px) saturate(1.06)!important; box-shadow:0 18px 50px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.05)!important; } html.is-dish-boards .benefits_nav.is-menu-rail .benefits_icon-wrapper{appearance:none;border:1px solid transparent!important;background:transparent!important;color:var(--prod-muted)!important;transition:.2s var(--v12-ease)!important} html.is-dish-boards .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active, html.is-dish-boards .benefits_nav.is-menu-rail .benefits_icon-wrapper[aria-current='true']{color:var(--prod-ink)!important;background:color-mix(in srgb,var(--cat-accent) 11%,transparent)!important;border-color:color-mix(in srgb,var(--cat-accent) 40%,transparent)!important} html.is-dish-boards section.is-benefits .dish-board-media{position:fixed!important;z-index:34!important;display:grid!important;place-items:center!important;pointer-events:none!important} html.is-dish-boards #westo-dish-card.is-shared-dish-card{ position:fixed!important;z-index:168!important;background:var(--prod-glass-strong)!important;border:1px solid var(--prod-line-neutral)!important; -webkit-backdrop-filter:blur(18px) saturate(1.05)!important;backdrop-filter:blur(18px) saturate(1.05)!important; box-shadow:0 24px 68px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)!important; } html[data-theme='light'].is-dish-boards #westo-dish-card.is-shared-dish-card{box-shadow:0 22px 58px rgba(36,48,42,.12),inset 0 1px 0 rgba(255,255,255,.88)!important} html.is-dish-boards #westo-dish-card .subhead_text [data-menu-price]{display:inline-flex!important;align-items:center!important;padding:6px 10px!important;border:1px solid var(--prod-line-neutral)!important;border-radius:999px!important;background:rgba(255,255,255,.045)!important} html.is-dish-boards #westo-dish-card .menu-allergen{border-top:1px solid var(--prod-line-neutral)!important;color:var(--prod-muted)!important} html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button{border:1px solid color-mix(in srgb,var(--prod-cyan) 45%,transparent)!important;background:linear-gradient(108deg,rgba(7,92,101,.84),rgba(9,119,128,.86))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important} /* Shared card: source owns content and quantity behavior, v12 owns sizing. */ html.is-dish-boards #westo-dish-card.is-shared-dish-card { box-sizing:border-box !important; overflow:hidden !important; } html.is-dish-boards #westo-dish-card .benefits_max-width { min-width:0 !important; } html.is-dish-boards #westo-dish-card [data-menu-name], html.is-dish-boards #westo-dish-card [data-menu-desc] { overflow-wrap:anywhere !important; } @media(min-width:992px){ :root{--menu-rail-w:clamp(112px,8.4vw,142px);--menu-rail-gap:clamp(12px,1.5vw,24px);--menu-card-w:clamp(370px,27vw,470px)} html.is-dish-boards { --dish-chrome-top:calc(var(--v12-nav-h) + 86px); --dish-info-w:var(--menu-card-w); --dish-info-h:clamp(250px,36vh,340px); } html.is-dish-boards .benefits_nav.is-menu-rail { top:calc(var(--dish-chrome-top) + 8px) !important; right:clamp(12px,1.5vw,24px) !important; bottom:clamp(18px,3vh,32px) !important; width:var(--menu-rail-w) !important; padding:7px 5px !important; border-radius:27px !important; } .benefits_nav.is-menu-rail .benefits_icon-wrapper{width:calc(var(--menu-rail-w) - 12px)!important;min-height:86px!important;border-radius:20px!important;padding:7px 4px!important;gap:4px!important} .benefits_nav.is-menu-rail .benefits_icon{width:50px!important;height:50px!important;flex-basis:50px!important} .benefits_nav.is-menu-rail .benefits_rail-label{font-size:9px!important;line-height:1.2!important;-webkit-line-clamp:2!important} html.is-dish-boards section.is-benefits .dish-board-media { top:calc(var(--dish-chrome-top) + 4px) !important; left:calc(var(--menu-card-w) + clamp(44px,5vw,86px)) !important; right:calc(var(--menu-rail-w) + var(--menu-rail-gap) + clamp(20px,2vw,32px)) !important; bottom:clamp(20px,3vh,34px) !important; overflow:visible !important; } html.is-dish-boards section.is-benefits .dish-board-media img { width:min(100%, clamp(500px,42vw,760px)) !important; height:min(100%, calc(100dvh - var(--dish-chrome-top) - 50px)) !important; max-width:100% !important;max-height:100% !important;object-fit:contain !important; } html.is-dish-boards #westo-dish-card.is-shared-dish-card { left:clamp(24px,3.5vw,60px) !important; right:auto !important; top:calc(var(--dish-chrome-top) + (100dvh - var(--dish-chrome-top) - var(--dish-info-h)) * .50) !important; bottom:auto !important; width:var(--menu-card-w) !important; height:var(--dish-info-h) !important; min-height:var(--dish-info-h) !important; max-height:var(--dish-info-h) !important; padding:18px 22px 19px !important; border-radius:28px !important; transform:none !important; } html.is-dish-boards #westo-dish-card .benefits_max-width{row-gap:8px!important} html.is-dish-boards #westo-dish-card [data-menu-name]{font-size:clamp(24px,2vw,32px)!important;line-height:1.15!important;-webkit-line-clamp:2!important} html.is-dish-boards #westo-dish-card [data-menu-desc]{font-size:12px!important;line-height:1.65!important;-webkit-line-clamp:2!important} html.is-dish-boards #westo-dish-card .menu-allergen{padding-top:2px!important} html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button{min-height:48px!important} } /* Mobile and tablets: rail lives only beside the plate, card gets its own band. */ @media(max-width:991px){ :root{--menu-rail-w:86px;--menu-rail-gap:6px} html.is-dish-boards { --dish-chrome-top:calc(var(--v12-nav-h) + 80px); --dish-safe-bottom:max(10px,env(safe-area-inset-bottom,0px)); --dish-info-h:clamp(218px,30dvh,270px); --menu-card-bottom:var(--dish-safe-bottom); --dish-media-gap:8px; --dish-card-stack:calc(var(--dish-info-h) + var(--dish-safe-bottom) + var(--dish-media-gap)); } .westo-dish-catbar{top:calc(var(--v12-nav-h) + 4px)!important;width:98vw!important;height:68px!important;min-height:68px!important;padding:5px!important;border-radius:32px!important} .westo-dish-catbar__chip{flex-basis:78px!important;min-width:78px!important;height:56px!important;padding:3px 5px!important} .westo-dish-catbar__icon{width:31px!important;height:31px!important;flex-basis:31px!important} .westo-dish-catbar__label{font-size:8px!important;max-width:68px!important} html.is-dish-boards .benefits_nav.is-menu-rail{ top:calc(var(--dish-chrome-top) + 4px)!important; right:4px!important; bottom:var(--dish-card-stack)!important; width:var(--menu-rail-w)!important; padding:5px 3px!important; gap:4px!important; border-radius:22px!important; } .benefits_nav.is-menu-rail .benefits_icon-wrapper{width:78px!important;min-height:66px!important;border-radius:16px!important;padding:4px 3px!important;gap:2px!important} .benefits_nav.is-menu-rail .benefits_icon{width:42px!important;height:42px!important;flex-basis:42px!important} .benefits_nav.is-menu-rail .benefits_rail-label{font-size:8px!important;line-height:1.15!important;-webkit-line-clamp:1!important} html.is-dish-boards section.is-benefits .dish-board-media{ top:var(--dish-chrome-top)!important; left:8px!important; right:calc(var(--menu-rail-w) + 10px)!important; bottom:var(--dish-card-stack)!important; overflow:visible!important; } html.is-dish-boards section.is-benefits .dish-board-media img{ width:min(100%,78vw)!important; height:min(100%,calc(100dvh - var(--dish-chrome-top) - var(--dish-card-stack)))!important; max-width:100%!important;max-height:100%!important;object-fit:contain!important; } html.is-dish-boards #westo-dish-card.is-shared-dish-card{ left:10px!important;right:10px!important;bottom:var(--dish-safe-bottom)!important;top:auto!important;width:auto!important; height:var(--dish-info-h)!important;min-height:var(--dish-info-h)!important;max-height:var(--dish-info-h)!important; padding:14px 16px 14px!important;border-radius:24px!important;transform:none!important; } html.is-dish-boards #westo-dish-card .benefits_max-width{row-gap:5px!important} html.is-dish-boards #westo-dish-card [data-menu-name]{font-size:clamp(21px,5.5vw,29px)!important;line-height:1.12!important;-webkit-line-clamp:2!important} html.is-dish-boards #westo-dish-card [data-menu-desc]{font-size:11px!important;line-height:1.55!important;-webkit-line-clamp:2!important} html.is-dish-boards #westo-dish-card .menu-cat-label{font-size:9px!important} html.is-dish-boards #westo-dish-card .subhead_text [data-menu-price]{font-size:10px!important} html.is-dish-boards #westo-dish-card .menu-allergen{padding-top:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} html.is-dish-boards #westo-dish-card .menu-add-wrap,html.is-dish-boards #westo-dish-card .max-width-xsmall{margin-top:2px!important} html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button{min-height:46px!important} html.is-dish-boards #westo-dish-card .menu-add-btn .glass-button-text{padding:10px 16px!important;font-size:13px!important} } @media(max-width:430px){ :root{--menu-rail-w:70px} html.is-dish-boards{--dish-info-h:224px;--dish-chrome-top:calc(var(--v12-nav-h) + 74px)} .westo-dish-catbar{height:64px!important;min-height:64px!important} .westo-dish-catbar__chip{flex-basis:70px!important;min-width:70px!important;height:52px!important} .westo-dish-catbar__label{font-size:7px!important} .benefits_nav.is-menu-rail .benefits_icon-wrapper{width:64px!important;min-height:58px!important} .benefits_nav.is-menu-rail .benefits_icon{width:38px!important;height:38px!important;flex-basis:38px!important} .benefits_nav.is-menu-rail .benefits_rail-label{display:none!important} html.is-dish-boards section.is-benefits .dish-board-media{left:4px!important;right:74px!important} html.is-dish-boards #westo-dish-card.is-shared-dish-card{left:7px!important;right:7px!important;padding-inline:13px!important} html.is-dish-boards #westo-dish-card [data-menu-desc]{font-size:10.5px!important} } /* Landscape / very short viewport: three horizontal columns, no vertical pile-up. */ @media(orientation:landscape) and (max-height:620px){ :root{--v12-nav-h:58px;--menu-rail-w:92px} .navbar_content{height:58px!important;min-height:58px!important;padding-block:5px!important}.navbar_logo-link{height:44px!important}.navbar_table,.westo-back-categories,.navbar_menu-button,#nav-auth-btn{height:46px!important;min-height:46px!important} .westo-dish-catbar{top:62px!important;height:58px!important;min-height:58px!important;width:min(940px,82vw)!important}.westo-dish-catbar__chip{height:48px!important;min-width:70px!important;flex-basis:70px!important}.westo-dish-catbar__icon{width:28px!important;height:28px!important;flex-basis:28px!important} html.is-dish-boards{--dish-chrome-top:124px;--dish-info-h:calc(100dvh - 140px)} html.is-dish-boards .benefits_nav.is-menu-rail{top:128px!important;bottom:10px!important;right:6px!important;width:84px!important} html.is-dish-boards section.is-benefits .dish-board-media{top:124px!important;left:calc(min(38vw,390px) + 28px)!important;right:98px!important;bottom:8px!important} html.is-dish-boards section.is-benefits .dish-board-media img{width:min(44vw,520px)!important;height:calc(100dvh - 138px)!important} html.is-dish-boards #westo-dish-card.is-shared-dish-card{left:12px!important;right:auto!important;top:130px!important;bottom:auto!important;width:min(38vw,390px)!important;height:calc(100dvh - 148px)!important;min-height:0!important;max-height:none!important;padding:12px 14px!important} html.is-dish-boards #westo-dish-card [data-menu-name]{font-size:22px!important}html.is-dish-boards #westo-dish-card [data-menu-desc]{font-size:10px!important;-webkit-line-clamp:2!important} } /* ======================================================================== PHASE E — shared overlays / modals / classic menu: hard geometry guards ======================================================================== */ .qty-modal__card,.table-drawer__panel,.cm-detail__card,.cm-drawer__panel { max-width:calc(100vw - 20px) !important; } .qty-modal__card { max-height:calc(100dvh - 24px) !important; overflow:auto !important; } .table-drawer__panel,.cm-drawer__panel { max-height:100dvh !important; overflow:auto !important; } .cm-detail__card { max-height:calc(100dvh - 24px) !important; overflow:auto !important; } @media(max-width:600px){ .cm-header__bar{min-height:62px!important;border-radius:28px!important}.cm-logo{width:130px!important;height:42px!important}.cm-cats{min-height:68px!important}.cm-cat{min-width:78px!important;min-height:54px!important}.cm-cat__thumb,.cm-cat__thumb--empty{width:32px!important;height:32px!important}.cm-shell{padding:16px 10px 34px!important}.cm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.cm-item{min-height:260px!important;border-radius:21px!important}.cm-item__media{min-height:150px!important;padding:8px!important}.cm-item__media img{height:150px!important}.cm-item__body{padding:11px 12px 13px!important}.cm-item__name{font-size:14px!important}.cm-item__price{font-size:12px!important} } @media(max-width:360px){.cm-grid{grid-template-columns:1fr!important}} /* ======================================================================== PHASE F — performance + accessibility ======================================================================== */ html[data-perf-tier='economy'] #westo-entrance .eg-card, html[data-perf-tier='economy'] #westo-entrance .eg-status, html[data-perf-tier='economy'] #westo-entrance .eg-dock, html[data-perf-tier='economy'] .westo-prod-hero-cats, html[data-perf-tier='economy'] .westo-dish-catbar, html[data-perf-tier='economy'] .benefits_nav.is-menu-rail, html[data-perf-tier='economy'] #westo-dish-card.is-shared-dish-card { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } @media(prefers-reduced-motion:reduce){ .westo-v12-hero-copy,.westo-v12-hero-dot,.westo-prod-hero-cat,.westo-dish-catbar__chip { transition:none!important; } } /* v12 classic-menu narrow header: preserve every action without horizontal overflow. */ @media(max-width:430px){ .classic-menu .cm-header__bar{grid-template-columns:36px minmax(84px,1fr) auto!important;gap:4px!important;padding-inline:6px!important} .classic-menu .cm-header__start{min-width:36px!important} .classic-menu .cm-logo{min-width:0!important;justify-self:center!important} .classic-menu .cm-logo img{max-width:96px!important;height:27px!important;object-fit:contain!important} .classic-menu .cm-header__actions{min-width:0!important;gap:2px!important} .classic-menu .cm-icon-btn,.classic-menu .cm-lang-btn{width:44px!important;min-width:44px!important;height:44px!important;border-radius:22px!important;padding:0!important} .classic-menu .cm-table-btn{width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:22px!important} .classic-menu .cm-table-btn__label{display:none!important} .classic-menu .cm-table-btn__icon{margin:0!important} } /* WESTO Production v12.8 QA8 final interaction guards */ .westo-v12-hero-dot:focus-visible{outline:2px solid color-mix(in srgb,var(--cat-accent) 78%,white);outline-offset:4px} .qty-modal{max-height:var(--vv-height,100dvh);overscroll-behavior:contain} .qty-modal.is-keyboard-open{height:var(--vv-height,100dvh);max-height:var(--vv-height,100dvh);padding-block:.65rem;align-items:center} .qty-modal__card{max-height:min(32rem,calc(var(--vv-height,100dvh) - 1.3rem));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .table-drawer{height:var(--vv-height,100dvh);max-height:var(--vv-height,100dvh)} .table-drawer.is-keyboard-open .table-drawer__panel{height:var(--vv-height,100dvh);max-height:var(--vv-height,100dvh)} .table-drawer__body,.cm-drawer__panel,.cm-detail__card{overscroll-behavior:contain} .qty-modal__x,.table-drawer__close,.qty-circle,.cm-detail__x,.cm-qty button,.cm-drawer [data-drawer-close]{min-width:44px!important;min-height:44px!important} .table-drawer__head h2,.table-drawer__count,.table-drawer .field label,.table-drawer .field-optional,.table-line__name,.table-line__meta,.cm-item__name,.cm-item__en,.cm-detail__body h3,.cm-detail__sub,.cm-detail__desc{overflow-wrap:anywhere;word-break:normal} @media(max-width:360px){.table-line{grid-template-columns:52px minmax(0,1fr)!important}.table-line__actions{grid-column:1/-1;justify-content:space-between}.cm-detail__actions{flex-direction:column;align-items:stretch}.cm-qty{justify-content:center;min-height:48px}.cm-detail-add{width:100%;min-height:48px}} @media(max-height:560px) and (orientation:landscape){.qty-modal{align-items:center;padding:.5rem}.qty-modal__card{max-height:calc(var(--vv-height,100dvh) - 1rem)}.cm-detail{align-items:stretch}.cm-detail__card{width:min(44rem,100%);max-height:100dvh;border-radius:0;padding-bottom:max(1rem,env(safe-area-inset-bottom,0px))}html.is-dish-boards #westo-dish-card{max-height:calc(100dvh - 132px)!important;overflow-y:auto!important;overscroll-behavior:contain}} html[data-theme='light'] .qty-modal__card,html[data-theme='light'] .table-drawer__panel,html[data-theme='light'] .cm-detail__card,html[data-theme='light'] .cm-drawer__panel{border-color:rgba(14,34,31,.13)!important} html[data-theme='light'] .qty-modal__price,html[data-theme='light'] .table-drawer__count,html[data-theme='light'] .cm-detail__sub,html[data-theme='light'] .cm-detail__desc{color:rgba(25,35,32,.66)!important} html[data-perf-tier='economy'] body::before{display:none!important} html[data-perf-tier='economy'] .navbar,html[data-perf-tier='economy'] .navbar_menu-button,html[data-perf-tier='economy'] #westo-entrance .eg-glass-btn,html[data-perf-tier='economy'] .qty-modal__backdrop,html[data-perf-tier='economy'] .qty-modal__card,html[data-perf-tier='economy'] .qty-circle,html[data-perf-tier='economy'] .table-drawer__panel,html[data-perf-tier='economy'] .table-drawer .btn,html[data-perf-tier='economy'] .cm-detail__card,html[data-perf-tier='economy'] .cm-detail-add,html[data-perf-tier='economy'] .cm-drawer__panel{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} html[data-perf-tier='economy'] .qty-modal__card,html[data-perf-tier='economy'] .table-drawer__panel,html[data-perf-tier='economy'] .cm-detail__card,html[data-perf-tier='economy'] .cm-drawer__panel{background-color:rgba(10,18,19,.96)!important} html[data-theme='light'][data-perf-tier='economy'] .qty-modal__card,html[data-theme='light'][data-perf-tier='economy'] .table-drawer__panel,html[data-theme='light'][data-perf-tier='economy'] .cm-detail__card,html[data-theme='light'][data-perf-tier='economy'] .cm-drawer__panel{background-color:rgba(250,250,247,.98)!important} /* ======================================================================== WESTO v12.9 — Design Logic Refactor One primary navigator per hierarchy level; readable states; motor-safe UI. ======================================================================== */ /* The category rail is progress/status only. The category dock is the one primary direct-choice control, preventing duplicate 16-choice navigation. */ .westo-v12-hero-rail { pointer-events:auto !important; touch-action:manipulation; } .westo-v12-hero-dot { appearance:none; border:0; padding:0; margin:0; cursor:pointer; pointer-events:auto !important; width:100%;height:30px;background:transparent !important;display:grid;place-items:center; justify-self:stretch;position:relative;z-index:2;border-radius:12px; transform:none !important;box-shadow:none !important; } .westo-v12-hero-dot::after { content:'';width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.34); transition:transform .3s var(--v12-ease),background .3s ease,box-shadow .3s ease; } html[data-theme='light'] .westo-v12-hero-dot::after { background:rgba(10,20,18,.24); } .westo-v12-hero-dot.is-active::after { transform:scale(2);background:var(--cat-accent,var(--prod-cyan)); box-shadow:0 0 15px var(--cat-glow,rgba(28,201,212,.22)); } .westo-v12-hero-dot.is-active { transform:none !important;background:transparent !important;box-shadow:none !important; } .westo-v12-hero-dot:focus-visible { outline:2px solid color-mix(in srgb,var(--cat-accent,var(--prod-cyan)) 74%,white); outline-offset:1px; } .westo-prod-hero-cats { touch-action:pan-x; } .westo-prod-hero-cat { touch-action:manipulation; } /* Current state must not rely on color alone. */ .westo-prod-hero-cat.is-active, .westo-dish-catbar__chip.is-active, .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active { font-weight:700 !important; } .westo-prod-hero-cat.is-active::after, .westo-dish-catbar__chip.is-active::after { content:''; position:absolute; inset-inline:28%; bottom:3px; height:2px; border-radius:999px; background:var(--cat-accent,var(--prod-cyan)); opacity:.8; } .westo-prod-hero-cat,.westo-dish-catbar__chip { position:relative !important; } /* Interactive microcopy stays readable even on compact devices. */ @media(max-width:767px){ .westo-prod-hero-cat span{font-size:9px!important} .westo-dish-catbar__label{font-size:9px!important;line-height:1.2!important} .benefits_nav.is-menu-rail .benefits_rail-label{font-size:9px!important;line-height:1.15!important} } @media(max-width:430px){ .westo-dish-catbar__label{font-size:9px!important} .benefits_nav.is-menu-rail .benefits_rail-label{ display:-webkit-box!important; max-width:62px!important; overflow:hidden!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:1!important; } /* Direct category dock is already present; arrows add another competing navigation mechanism in the narrowest viewport. */ html:not(.is-dish-boards) .carousel_arrow{display:none!important} } /* In dish mode, hero editorial/navigation is absent, not merely transparent: no hidden compositing layer and no accidental duplicate navigation surface. */ html.is-dish-boards .westo-v12-hero-copy, html.is-dish-boards .westo-prod-hero-cats { display:none!important; } /* Light surfaces use the same state grammar with sufficient edge separation. */ html[data-theme='light'] .westo-prod-hero-cat.is-active, html[data-theme='light'] .westo-dish-catbar__chip.is-active, html[data-theme='light'] .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active { border-color:color-mix(in srgb,var(--cat-accent) 52%,rgba(17,31,28,.20))!important; } /* Keyboard focus is a distinct state from hover/active. */ .westo-prod-hero-cat:focus-visible, .westo-dish-catbar__chip:focus-visible, .benefits_nav.is-menu-rail .benefits_icon-wrapper:focus-visible { outline:2px solid color-mix(in srgb,var(--prod-cyan) 78%,white)!important; outline-offset:3px!important; } /* Reduced motion preserves state feedback but removes spatial decoration. */ @media(prefers-reduced-motion:reduce){ .westo-prod-hero-cat,.westo-dish-catbar__chip, .benefits_nav.is-menu-rail .benefits_icon-wrapper, .navbar_table,.westo-back-categories,.navbar_menu-button,#nav-auth-btn{ transition:none!important; transform:none!important; } } /* WESTO Design Logic v13.1 — non-invasive human-factor guards. Default v8/v12.9 visual language is authoritative. This layer only appears for keyboard focus, accessibility preferences, text overflow and edge viewports. */ :root{ --dl-touch-min:44px; --dl-focus:#78d0d8; --dl-focus-offset:3px; --dl-vv-height:100dvh; --dl-vv-width:100vw; } html[data-theme='light']{--dl-focus:#176f78} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:max(1rem,env(safe-area-inset-top))} button,input,select,textarea{font:inherit} button,[role='button'],a,input,select,textarea{touch-action:manipulation} .dl-skip-link{ position:fixed;inset-inline-start:max(.75rem,env(safe-area-inset-left));top:max(.75rem,env(safe-area-inset-top)); z-index:2147483647;transform:translateY(calc(-100% - 2rem)); padding:.72rem 1rem;border-radius:999px;background:#f7fbfa;color:#071012; border:2px solid var(--dl-focus);box-shadow:0 12px 36px rgba(0,0,0,.24);font-weight:800; transition:transform .16s ease; } .dl-skip-link:focus{transform:translateY(0)} html[data-input-modality='keyboard'] :where(a,button,input,select,textarea,[role='button'],[tabindex]):focus-visible{ outline:2px solid var(--dl-focus)!important;outline-offset:var(--dl-focus-offset)!important; } /* Only text-resilience; no default sizing, opacity, border, color or shadow changes. */ :where(.auth-sub,.hint,.msg,.checkout-note,.cm-item__name,.cm-item__en,.cm-detail__desc,.table-line__name,.table-line__meta,.text-rich-text p,.text-rich-text li){ overflow-wrap:anywhere;word-break:normal; } body.legal-body{user-select:text!important;-webkit-user-select:text!important} /* Hit-area expansion without changing the approved visual geometry. */ @media (pointer:coarse){ :where(.navbar_menu-button,.navbar_menu-close,.eg-glass-btn,.eg-chip-icon,.qty-modal__x,.table-drawer__close,.cm-detail__x,.score-btn,.slot-btn){ position:relative; } :where(.navbar_menu-button,.navbar_menu-close,.eg-glass-btn,.eg-chip-icon,.qty-modal__x,.table-drawer__close,.cm-detail__x,.score-btn,.slot-btn)::after{ content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%); } } @media (max-width:360px){ .grid-2{grid-template-columns:1fr!important} .score-grid{grid-template-columns:repeat(4,minmax(44px,1fr))!important;gap:.45rem!important} .checkout-segment{grid-template-columns:1fr!important} } @media (max-height:560px) and (orientation:landscape){ :where(.qty-modal__card,.table-drawer__panel,.cm-detail__card,.eg-sheet){ max-height:calc(var(--dl-vv-height) - 1rem);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } } html.dl-keyboard-open :where(.qty-modal,.table-drawer,.cm-detail){max-height:var(--dl-vv-height)} @media (prefers-reduced-motion:reduce){ html:focus-within{scroll-behavior:auto!important} *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important} } @media (forced-colors:active){ :where(a,button,input,select,textarea,[role='button']){forced-color-adjust:auto} } @media print{.dl-skip-link{display:none!important}} /* Compositional tokens are advisory only; they do not override existing v8 geometry. */ :root{ --dl-phi:1.618; --dl-space-1:.5rem; --dl-space-2:.8125rem; --dl-space-3:1.3125rem; --dl-space-4:2.125rem; --dl-space-5:3.4375rem; } .eg-sheet{position:relative} .eg-sheet-close{ position:absolute;inset-inline-end:1rem;top:1rem;z-index:3; width:44px;height:44px;border-radius:999px;display:grid;place-items:center; border:1px solid rgba(120,208,216,.22);background:rgba(8,18,21,.66);color:inherit; font:inherit;font-size:1.2rem;line-height:1;cursor:pointer; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } html[data-theme='light'] .eg-sheet-close{background:rgba(255,255,255,.78);border-color:rgba(16,72,76,.14);color:#111416} @media (prefers-contrast:more){ html[data-input-modality='keyboard'] :where(a,button,input,select,textarea,[role='button'],[tabindex]):focus-visible{outline-width:3px!important} } /* Semantic helpers introduced by v13.1 must not leak into the visible composition. */ .visually-hidden,.sr-only{ position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important; overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important; white-space:nowrap!important;border:0!important; } body.panel-body .auth-link-btn{ appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit; display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.3rem .1rem; font:inherit;line-height:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer; } html[data-theme='light'] body.panel-body .auth-link-btn{ color:rgba(26,23,20,.82);text-decoration-color:rgba(42,122,134,.55); } /* ======================================================================== WESTO v13.4 ROOT RECOVERY — interaction + liquid glass + media continuity This layer is deliberately narrow: no architecture/state ownership changes. ======================================================================== */ /* Hero copy is presentation-only, but its progress rail is a real navigation control. Override inherited pointer transparency only for the interactive rail. */ .westo-v12-hero-rail, .westo-v12-hero-rail .westo-v12-hero-dot { pointer-events: auto !important; } .westo-v12-hero-rail { cursor: pointer; touch-action: manipulation; min-height: 24px; padding-block: 3px; } .westo-v12-hero-dot { appearance: none; border: 0; padding: 0; cursor: pointer; } .westo-prod-hero-cats, .westo-prod-hero-cat, #westo-dish-catbar, #westo-dish-catbar .westo-dish-catbar__track, #westo-dish-catbar .westo-dish-catbar__chip { pointer-events: auto !important; } .westo-prod-hero-cats, #westo-dish-catbar .westo-dish-catbar__track { touch-action: pan-x !important; } .westo-prod-hero-cat, #westo-dish-catbar .westo-dish-catbar__chip { touch-action: manipulation !important; } /* Remove the cyan/liquid ring around dish pixels. Selected state lives on the rail item's surface + typography, keeping the food image visually clean. */ .benefits_nav.is-menu-rail .benefits_rail-border, .benefits_nav.is-menu-rail .benefits_rail-border--liquid { display: none !important; opacity: 0 !important; visibility: hidden !important; } .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active .benefits_icon, .benefits_nav.is-menu-rail .benefits_icon-wrapper.w--current .benefits_icon, html[data-theme='light'] .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active .benefits_icon, html[data-theme='light'] .benefits_nav.is-menu-rail .benefits_icon-wrapper.w--current .benefits_icon { box-shadow: none !important; outline: none !important; } .benefits_nav.is-menu-rail .benefits_dish-thumb { border: 0 !important; outline: 0 !important; } /* Directional plate transitions can translate without losing their fixed geometry. The contact puck follows the same media wrapper automatically. */ html.is-dish-boards section.is-benefits.is-dish-active .dish-board-media, html.is-dish-boards section.is-benefits.is-dish-leaving .dish-board-media, html.is-dish-boards section.is-benefits.is-dish-switching .dish-board-media { will-change: opacity, transform; } /* Light theme liquid-glass restoration. Paper/solid pills were flattening the interface; these surfaces regain translucency, edge refraction and depth while retaining readable charcoal ink. */ html[data-theme='light'] { --westo-liquid-light-bg: linear-gradient(145deg, rgba(255,255,255,.68), rgba(244,247,245,.38) 55%, rgba(231,238,235,.46)); --westo-liquid-light-border: rgba(255,255,255,.78); --westo-liquid-light-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(26,105,112,.055), 0 10px 28px rgba(42,58,56,.11), 0 0 0 1px rgba(26,139,149,.075); } html[data-theme='light'] .navbar_table, html[data-theme='light'] .westo-back-categories, html[data-theme='light'] .navbar_menu-button, html[data-theme='light'] #nav-auth-btn, html[data-theme='light'] #westo-entrance .eg-dock, html[data-theme='light'] #westo-entrance .eg-corner, html[data-theme='light'] #westo-entrance .eg-lang, html[data-theme='light'] #westo-entrance .eg-theme-toggle, html[data-theme='light'] #westo-entrance .eg-top > .eg-glass-btn:first-child, html[data-theme='light'] #westo-entrance #eg-site-menu.westo-menu-trigger { background: var(--westo-liquid-light-bg) !important; border-color: var(--westo-liquid-light-border) !important; color: #111716 !important; -webkit-backdrop-filter: blur(22px) saturate(1.42) brightness(1.035) !important; backdrop-filter: blur(22px) saturate(1.42) brightness(1.035) !important; box-shadow: var(--westo-liquid-light-shadow) !important; } html[data-theme='light'] .navbar_table:hover, html[data-theme='light'] .westo-back-categories:hover, html[data-theme='light'] .navbar_menu-button:hover, html[data-theme='light'] #nav-auth-btn:hover, html[data-theme='light'] #westo-entrance .eg-dock__btn:hover, html[data-theme='light'] #westo-entrance .eg-glass-btn:hover, html[data-theme='light'] #westo-entrance .eg-theme-toggle:hover, html[data-theme='light'] #westo-entrance .eg-lang:hover { background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(241,248,246,.52)) !important; border-color: rgba(44,188,198,.24) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 12px 30px rgba(40,58,57,.13), 0 0 0 1px rgba(38,180,190,.09) !important; } html[data-theme='light'] #westo-entrance .eg-lang-seg { color: rgba(17,23,22,.50) !important; text-shadow: none !important; } html[data-theme='light'] #westo-entrance .eg-lang-seg.is-active { color: #139ca6 !important; font-weight: 800 !important; } html[data-theme='light'] #westo-entrance .eg-lang-sep { color: rgba(17,23,22,.22) !important; } /* Rounded focus treatment: accessible but never a square cyan debug box. */ #westo-entrance .eg-dock__btn:focus-visible, #westo-entrance .eg-chip-icon:focus-visible, #westo-entrance .eg-glass-btn:focus-visible, #westo-entrance .eg-theme-toggle:focus-visible, #westo-entrance .eg-lang:focus-visible, #westo-entrance .eg-lang-seg:focus-visible { outline: none !important; border-radius: 999px !important; box-shadow: inset 0 0 0 1.5px rgba(28,201,212,.62), 0 0 0 3px rgba(28,201,212,.12) !important; } /* Light dish/category chrome keeps the same glass material instead of becoming an opaque white slab. */ html[data-theme='light'] .westo-prod-hero-cats, html[data-theme='light'] .westo-dish-catbar, html[data-theme='light'].is-dish-boards .benefits_nav.is-menu-rail { background: linear-gradient(150deg, rgba(255,255,255,.62), rgba(247,248,244,.34)) !important; border-color: rgba(255,255,255,.72) !important; -webkit-backdrop-filter: blur(18px) saturate(1.28) !important; backdrop-filter: blur(18px) saturate(1.28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 12px 34px rgba(47,58,54,.09), 0 0 0 1px rgba(20,113,120,.055) !important; } /* Mobile/tablet geometry: protect the media from the rail and keep header/category chrome from visually colliding at CSS-pixel widths. */ @media (max-width: 991px) { html.is-dish-boards .benefits_nav.is-menu-rail { width: clamp(78px, 20vw, 96px) !important; right: max(4px, env(safe-area-inset-right,0px)) !important; left: auto !important; } html.is-dish-boards section.is-benefits .dish-board-media { max-width: calc(100vw - clamp(86px, 22vw, 108px)) !important; } } @media (max-width: 430px) { .westo-dish-catbar__chip { min-width: 76px !important; flex-basis: 76px !important; } .westo-dish-catbar__label { font-size: 8px !important; } html.is-dish-boards .benefits_nav.is-menu-rail { width: 82px !important; } html.is-dish-boards .benefits_nav.is-menu-rail .benefits_icon { width: 46px !important; height: 46px !important; flex-basis: 46px !important; } } /* v13.4.1 — clean food thumbnails: no cyan contour on any active rail image. */ .benefits_nav.is-menu-rail .benefits_icon-wrapper::before, .benefits_nav.is-menu-rail .benefits_icon-wrapper::after, .benefits_nav.is-menu-rail .benefits_icon::before, .benefits_nav.is-menu-rail .benefits_icon::after { box-shadow: none !important; } .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active .benefits_icon, .benefits_nav.is-menu-rail .benefits_icon-wrapper.w--current .benefits_icon, .benefits_nav.is-menu-rail .benefits_icon.is-liquid-active, html[data-theme='light'] .benefits_nav.is-menu-rail .benefits_icon-wrapper.is-active .benefits_icon, html[data-theme='light'] .benefits_nav.is-menu-rail .benefits_icon-wrapper.w--current .benefits_icon { border-color: transparent !important; box-shadow: none !important; filter: none !important; } /* v13.4.2 — light entrance segmented controls keep liquid depth on active state. */ #westo-entrance .eg-dock__btn.is-active, #westo-entrance .eg-chip-icon.is-active { border-radius: 999px !important; } html[data-theme='light'] #westo-entrance .eg-dock__btn, html[data-theme='light'] .entrance-gate .eg-dock__btn { color: #1a2327 !important; } html[data-theme='light'] #westo-entrance .eg-dock__label, html[data-theme='light'] .entrance-gate .eg-dock__label, html[data-theme='light'] .eg-dock__label { color: #1a2327 !important; font-weight: 750 !important; } html[data-theme='light'] #westo-entrance .eg-dock__btn svg, html[data-theme='light'] .entrance-gate .eg-dock__btn svg, html[data-theme='light'] .eg-dock__btn svg { color: #1a2327 !important; stroke: #1a2327 !important; } html[data-theme='light'] #westo-entrance .eg-dock__btn+.eg-dock__btn::before, html[data-theme='light'] .entrance-gate .eg-dock__btn+.eg-dock__btn::before { background: rgba(26, 35, 39, 0.18) !important; } html[data-theme='light'] #westo-entrance .eg-dock__btn:hover, html[data-theme='light'] #westo-entrance .eg-dock__btn:focus-visible { color: #0c555c !important; } html[data-theme='light'] #westo-entrance .eg-dock__btn:hover .eg-dock__label, html[data-theme='light'] #westo-entrance .eg-dock__btn:focus-visible .eg-dock__label { color: #0c555c !important; } html[data-theme='light'] #westo-entrance .eg-dock__btn:hover svg, html[data-theme='light'] #westo-entrance .eg-dock__btn:focus-visible svg { color: #0c555c !important; stroke: #0c555c !important; } html[data-theme='light'] #westo-entrance .eg-dock__btn.is-active, html[data-theme='light'] #westo-entrance .eg-chip-icon.is-active { background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(226,248,248,.34)) !important; border-color: rgba(28,191,201,.24) !important; color: #0c555c !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 7px 18px rgba(45,80,79,.10), 0 0 0 1px rgba(28,191,201,.07) !important; } html[data-theme='light'] #westo-entrance .eg-dock__btn.is-active .eg-dock__label, html[data-theme='light'] #westo-entrance .eg-chip-icon.is-active .eg-dock__label { color: #0c555c !important; font-weight: 800 !important; } html[data-theme='light'] #westo-entrance .eg-dock__btn.is-active svg, html[data-theme='light'] #westo-entrance .eg-chip-icon.is-active svg { color: #0c555c !important; stroke: #0c555c !important; } html[data-theme='light'] #westo-entrance .eg-sheet { background: #ffffff !important; border-color: rgba(26,35,39,.18) !important; color: #111416 !important; } html[data-theme='light'] #westo-entrance .eg-sheet-title { color: #111416 !important; } html[data-theme='light'] #westo-entrance .eg-sheet-close { color: #111416 !important; } html[data-theme='light'] #westo-entrance .eg-nav-link { color: #1a2327 !important; font-weight: 600 !important; } html[data-theme='light'] #westo-entrance .eg-nav-link:hover { color: #0c555c !important; } html[data-theme='light'] #westo-entrance .eg-tab { color: #374151 !important; } html[data-theme='light'] #westo-entrance .eg-tab.is-active { color: #0c555c !important; font-weight: 800 !important; } html[data-theme='light'] #westo-entrance .eg-contact { color: #1a2327 !important; } html[data-theme='light'] #westo-entrance .eg-contact a { color: #0c555c !important; } /* Preserve a segmented dock silhouette without hard square focus/active tiles. */ #westo-entrance .eg-dock__btn:focus:not(:focus-visible), #westo-entrance .eg-chip-icon:focus:not(:focus-visible) { outline: none !important; } /* ======================================================================== WESTO v13.5 — Light Entrance Material + WESTO Pattern Field Goal: preserve approved geometry/state machines while restoring a coherent liquid-glass material system and replacing the dark light-theme surround with a quiet WESTO-branded pattern field. ======================================================================== */ html[data-theme='light'] #westo-entrance { --westo-light-paper: rgba(250, 251, 248, .72); --westo-light-paper-strong: rgba(253, 253, 250, .84); --westo-light-ink: #17201f; --westo-light-muted: rgba(23, 32, 31, .62); --westo-light-faint: rgba(23, 32, 31, .42); --westo-light-edge: rgba(255, 255, 255, .84); --westo-light-edge-low: rgba(42, 100, 101, .12); --westo-light-teal: #159ba5; --westo-light-teal-deep: #10747c; --westo-light-teal-soft: rgba(28, 201, 212, .10); --westo-light-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(20,88,92,.045), 0 24px 72px rgba(49,66,63,.13), 0 2px 10px rgba(49,66,63,.06); --westo-light-control-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(23,94,98,.055), 0 10px 30px rgba(46,65,62,.11), 0 0 0 1px rgba(32,111,116,.045); color: var(--westo-light-ink) !important; background: radial-gradient(62rem 42rem at 50% 42%, rgba(255,255,255,.82), transparent 64%), radial-gradient(40rem 32rem at 8% 14%, rgba(28,201,212,.075), transparent 70%), radial-gradient(42rem 32rem at 94% 82%, rgba(191,165,105,.06), transparent 72%), linear-gradient(145deg, #edf1ec 0%, #e9eee8 46%, #e4ebe6 100%) !important; } /* The light theme gets a branded field instead of the dark café photograph. Use the approved WESTO geometric artwork as a watermark, not decoration that competes with the content card. */ html[data-theme='light'] #westo-entrance .eg-ambient__photo { opacity: 0 !important; visibility: hidden !important; } html[data-theme='light'] #westo-entrance .eg-ambient__base { background: radial-gradient(55rem 38rem at 50% 42%, rgba(255,255,255,.70), transparent 68%), linear-gradient(145deg, #edf1ec 0%, #e8eee8 58%, #e2e9e4 100%) !important; } html[data-theme='light'] #westo-entrance .eg-ambient::before { content: ''; position: absolute; inset: -8%; z-index: 0; pointer-events: none; background-image: url('../assets/images/entrance/westo-pattern-source.png'); background-repeat: repeat; background-size: clamp(360px, 31vw, 560px) auto; background-position: -7vw -5vh; opacity: .045; mix-blend-mode: multiply; filter: saturate(.62) contrast(.86); transform: rotate(-2deg) scale(1.04); transform-origin: 50% 50%; -webkit-mask-image: radial-gradient(ellipse 82% 78% at 50% 48%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.54) 58%, #000 100%); mask-image: radial-gradient(ellipse 82% 78% at 50% 48%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.54) 58%, #000 100%); } html[data-theme='light'] #westo-entrance .eg-ambient::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 54% 72% at 50% 48%, rgba(255,255,255,.48), rgba(255,255,255,.08) 58%, transparent 82%), linear-gradient(180deg, rgba(255,255,255,.10), rgba(221,231,226,.14)); } html[data-theme='light'] #westo-entrance .eg-ambient__veil { z-index: 2; background: radial-gradient(ellipse 62% 62% at 50% 48%, rgba(255,255,255,.18), transparent 70%), linear-gradient(180deg, rgba(235,241,236,.03), rgba(220,230,225,.10)) !important; } html[data-theme='light'] #westo-entrance .eg-ambient__wash { z-index: 3; opacity: .55; background: radial-gradient(circle at 50% 42%, rgba(28,201,212,.065), transparent 48%) !important; } html[data-theme='light'] #westo-entrance .eg-ambient__rays, html[data-theme='light'] #westo-entrance .eg-ambient__fog, html[data-theme='light'] #westo-entrance .eg-ambient__noise { opacity: .22 !important; } html[data-theme='light'] #westo-entrance .eg-ambient__particles { opacity: .20 !important; } /* Main panel: warm liquid glass, not an opaque white slab. */ html[data-theme='light'] #westo-entrance .eg-card { color: var(--westo-light-ink) !important; border-color: rgba(255,255,255,.78) !important; background: linear-gradient(160deg, rgba(255,255,255,.79) 0%, rgba(251,252,249,.69) 36%, rgba(241,247,244,.54) 100%), rgba(248,250,247,.58) !important; -webkit-backdrop-filter: blur(30px) saturate(1.34) brightness(1.025) !important; backdrop-filter: blur(30px) saturate(1.34) brightness(1.025) !important; box-shadow: var(--westo-light-shadow) !important; } html[data-theme='light'] #westo-entrance .eg-card::before { inset-inline: 12% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.88) 25%, rgba(54,189,198,.18) 50%, rgba(255,255,255,.88) 75%, transparent) !important; opacity: .58 !important; } html[data-theme='light'] #westo-entrance .eg-card__reflect { opacity: .19 !important; background: linear-gradient(112deg, transparent 27%, rgba(255,255,255,.74) 47%, transparent 63%) !important; } html[data-theme='light'] #westo-entrance .eg-card__glow { opacity: .46 !important; background: radial-gradient(circle at 50% 28%, rgba(28,201,212,.08), transparent 54%) !important; } html[data-theme='light'] #westo-entrance .eg-pattern { opacity: .035 !important; mix-blend-mode: multiply !important; filter: saturate(.45) contrast(.88) !important; } /* Copy hierarchy: keep secondary information calm but readable. */ html[data-theme='light'] #westo-entrance .eg-tagline { color: rgba(23,32,31,.66) !important; } html[data-theme='light'] #westo-entrance .eg-subtitle { color: rgba(21,155,165,.70) !important; } html[data-theme='light'] #westo-entrance .eg-experience__lead, html[data-theme='light'] #westo-entrance .eg-step-label, html[data-theme='light'] #westo-entrance .eg-quote { color: var(--westo-light-muted) !important; } /* Status is a small glass capsule rather than another solid white card. */ html[data-theme='light'] #westo-entrance .eg-status { color: var(--westo-light-ink) !important; background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(241,247,244,.42)) !important; border-color: rgba(255,255,255,.82) !important; -webkit-backdrop-filter: blur(18px) saturate(1.26) !important; backdrop-filter: blur(18px) saturate(1.26) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 9px 24px rgba(47,65,62,.09), 0 0 0 1px rgba(28,126,133,.05) !important; } html[data-theme='light'] #westo-entrance .eg-status-meta, html[data-theme='light'] #westo-entrance .eg-status-loc { color: rgba(23,32,31,.58) !important; } html[data-theme='light'] #westo-entrance .eg-status-dot { background: #7bd8a0 !important; box-shadow: 0 0 0 5px rgba(123,216,160,.11), 0 0 16px rgba(123,216,160,.22) !important; } /* Step system: one material family, state conveyed by tint + edge + icon, not aggressive cyan boxes. */ html[data-theme='light'] #westo-entrance .eg-step-icon { color: #208f97 !important; background: linear-gradient(145deg, rgba(255,255,255,.67), rgba(238,247,244,.40)) !important; border-color: rgba(255,255,255,.80) !important; -webkit-backdrop-filter: blur(14px) saturate(1.20) !important; backdrop-filter: blur(14px) saturate(1.20) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 20px rgba(48,68,64,.075), 0 0 0 1px rgba(31,139,146,.06) !important; } html[data-theme='light'] #westo-entrance .eg-step-icon.is-active, html[data-theme='light'] #westo-entrance .eg-step-icon.is-done { color: var(--westo-light-teal-deep) !important; background: linear-gradient(145deg, rgba(255,255,255,.80), rgba(224,248,247,.48)) !important; border-color: rgba(72,205,214,.26) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 9px 22px rgba(45,85,83,.09), 0 0 0 1px rgba(28,191,201,.065) !important; } html[data-theme='light'] #westo-entrance .eg-steps-row::before { background: linear-gradient(90deg, transparent, rgba(28,201,212,.16) 15%, rgba(46,132,136,.12) 85%, transparent) !important; } html[data-theme='light'] #westo-entrance .eg-progress__track { background: rgba(39,65,63,.08) !important; border-color: rgba(255,255,255,.70) !important; box-shadow: inset 0 1px 2px rgba(39,65,63,.055) !important; } html[data-theme='light'] #westo-entrance .eg-progress__fill { background: linear-gradient(90deg, #138d97, #42d6de) !important; box-shadow: 0 0 16px rgba(28,201,212,.18) !important; } html[data-theme='light'] #westo-entrance .eg-progress__pct { color: #20b6c0 !important; } /* Shared Liquid Glass material for all entrance chrome. */ html[data-theme='light'] #westo-entrance .eg-dock, html[data-theme='light'] #westo-entrance .eg-corner, html[data-theme='light'] #westo-entrance .eg-top > .eg-glass-btn:first-child, html[data-theme='light'] #westo-entrance #eg-site-menu.westo-menu-trigger { color: var(--westo-light-ink) !important; background: linear-gradient(145deg, rgba(255,255,255,.70), rgba(240,247,244,.35) 58%, rgba(224,235,231,.31)) !important; border-color: rgba(255,255,255,.80) !important; -webkit-backdrop-filter: blur(24px) saturate(1.42) brightness(1.035) !important; backdrop-filter: blur(24px) saturate(1.42) brightness(1.035) !important; box-shadow: var(--westo-light-control-shadow) !important; } html[data-theme='light'] #westo-entrance .eg-glass-btn::before { background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(62,203,211,.20) 44%, rgba(255,255,255,.48) 100%) !important; } html[data-theme='light'] #westo-entrance .eg-dock::before, html[data-theme='light'] #westo-entrance .eg-corner::before { content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(155deg, rgba(255,255,255,.30), transparent 46%); opacity: .72; } html[data-theme='light'] #westo-entrance .eg-dock, html[data-theme='light'] #westo-entrance .eg-corner { position: relative; overflow: hidden; } html[data-theme='light'] #westo-entrance .eg-dock > *, html[data-theme='light'] #westo-entrance .eg-corner > * { position: relative; z-index: 1; } html[data-theme='light'] #westo-entrance .eg-glass-btn:hover, html[data-theme='light'] #westo-entrance .eg-glass-btn:focus-visible, html[data-theme='light'] #westo-entrance .eg-dock__btn:hover, html[data-theme='light'] #westo-entrance .eg-dock__btn:focus-visible, html[data-theme='light'] #westo-entrance .eg-corner:hover, html[data-theme='light'] #westo-entrance .eg-corner:focus-visible { color: #116e75 !important; background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(229,249,247,.46)) !important; border-color: rgba(74,208,216,.26) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 13px 34px rgba(45,70,67,.13), 0 0 22px rgba(28,201,212,.075) !important; } /* Segmented language control: readable inactive choices, quiet active capsule. */ html[data-theme='light'] #westo-entrance .eg-lang-seg { position: relative; color: rgba(23,32,31,.48) !important; padding: .23rem .38rem !important; border-radius: 999px !important; transition: color .18s ease, background .18s ease, box-shadow .18s ease !important; } html[data-theme='light'] #westo-entrance .eg-lang-seg.is-active { color: #159ba5 !important; background: rgba(255,255,255,.46) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 3px 10px rgba(48,72,68,.06) !important; font-weight: 800 !important; } html[data-theme='light'] #westo-entrance .eg-lang-seg:hover { color: #11777f !important; } html[data-theme='light'] #westo-entrance .eg-lang-sep { color: rgba(23,32,31,.18) !important; } /* Primary action: unmistakably primary, but still glass. */ html[data-theme='light'] #westo-entrance .eg-cta, html[data-theme='light'] #westo-entrance .eg-cta:hover, html[data-theme='light'] #westo-entrance .eg-cta:focus-visible { color: #f8ffff !important; border: 1px solid rgba(116,228,233,.44) !important; background: linear-gradient(105deg, rgba(22,139,148,.88) 0%, rgba(14,114,124,.94) 58%, rgba(19,124,133,.90) 100%) !important; -webkit-backdrop-filter: blur(18px) saturate(1.30) !important; backdrop-filter: blur(18px) saturate(1.30) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(3,62,68,.20), 0 16px 38px rgba(20,91,96,.19), 0 0 0 1px rgba(38,174,183,.07) !important; } html[data-theme='light'] #westo-entrance .eg-cta::after { height: 48% !important; background: linear-gradient(180deg, rgba(255,255,255,.22), transparent) !important; } html[data-theme='light'] #westo-entrance .eg-cta:not(:disabled):hover, html[data-theme='light'] #westo-entrance .eg-cta:not(:disabled):focus-visible { transform: translateY(-1px) scale(1.002) !important; background: linear-gradient(105deg, rgba(27,157,166,.92), rgba(14,123,132,.96)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 18px 44px rgba(17,94,100,.22), 0 0 28px rgba(28,201,212,.10) !important; } html[data-theme='light'] #westo-entrance .eg-cta:disabled, html[data-theme='light'] #westo-entrance .eg-cta.is-busy { color: rgba(248,255,255,.82) !important; opacity: .68 !important; background: linear-gradient(105deg, rgba(35,131,139,.68), rgba(25,105,113,.72)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 10px 28px rgba(32,83,86,.12) !important; } /* Economy keeps the same hierarchy without expensive live blur. */ html[data-theme='light'][data-perf-tier='economy'] #westo-entrance .eg-card, html[data-theme='light'][data-perf-tier='economy'] #westo-entrance .eg-dock, html[data-theme='light'][data-perf-tier='economy'] #westo-entrance .eg-corner, html[data-theme='light'][data-perf-tier='economy'] #westo-entrance .eg-glass-btn, html[data-theme='light'][data-perf-tier='economy'] #westo-entrance .eg-status, html[data-theme='light'][data-perf-tier='economy'] #westo-entrance .eg-step-icon { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html[data-theme='light'][data-perf-tier='economy'] #westo-entrance .eg-card { background: rgba(249,251,248,.96) !important; } html[data-theme='light'][data-perf-tier='economy'] #westo-entrance .eg-dock, html[data-theme='light'][data-perf-tier='economy'] #westo-entrance .eg-corner, html[data-theme='light'][data-perf-tier='economy'] #westo-entrance .eg-glass-btn { background: rgba(247,250,247,.94) !important; } @media (max-width: 767px) { html[data-theme='light'] #westo-entrance .eg-ambient::before { background-size: 300px auto; background-position: -92px -46px; opacity: .038; transform: rotate(-2deg) scale(1.06); } html[data-theme='light'] #westo-entrance .eg-card { -webkit-backdrop-filter: blur(22px) saturate(1.28) !important; backdrop-filter: blur(22px) saturate(1.28) !important; } html[data-theme='light'] #westo-entrance .eg-dock, html[data-theme='light'] #westo-entrance .eg-corner, html[data-theme='light'] #westo-entrance .eg-glass-btn { -webkit-backdrop-filter: blur(18px) saturate(1.32) !important; backdrop-filter: blur(18px) saturate(1.32) !important; } } @media (prefers-contrast: more) { html[data-theme='light'] #westo-entrance { --westo-light-muted: rgba(20,27,26,.76); --westo-light-faint: rgba(20,27,26,.62); } html[data-theme='light'] #westo-entrance .eg-card, html[data-theme='light'] #westo-entrance .eg-dock, html[data-theme='light'] #westo-entrance .eg-corner, html[data-theme='light'] #westo-entrance .eg-glass-btn { border-color: rgba(54,76,72,.20) !important; } } /* ======================================================================== WESTO v13.7 — CATEGORY HEADER LITE Goal: preserve the approved category-strip appearance while making the component effectively idle when the user is not touching/changing it. ======================================================================== */ /* One static glass surface; no background readback blur. The strip already sits over dark/light menu chrome, so a higher-opacity gradient preserves the same perceived material without forcing full-width backdrop recomposition. */ #westo-dish-catbar.westo-dish-catbar { left: 0 !important; right: 0 !important; margin-inline: auto !important; transform: none !important; background: linear-gradient(180deg, rgba(8,14,16,.955), rgba(7,13,15,.91)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 10px 28px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.05) !important; contain: layout style !important; isolation: isolate; will-change: auto !important; animation: none !important; transition: none !important; } html[data-theme='light'] #westo-dish-catbar.westo-dish-catbar { background: linear-gradient(180deg, rgba(250,250,247,.965), rgba(244,246,242,.925)) !important; border-color: rgba(31,61,58,.10) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 9px 24px rgba(45,60,56,.075), inset 0 1px 0 rgba(255,255,255,.98) !important; } /* The moving full-bar active marker required two independent JS geometry observers in previous builds. Active state now belongs to its chip. */ #westo-dish-catbar::before { display: none !important; content: none !important; } #westo-dish-catbar .westo-dish-catbar__track { scroll-behavior: auto; scroll-snap-type: none !important; overscroll-behavior-x: contain !important; -webkit-overflow-scrolling: touch; contain: layout style !important; will-change: auto !important; } #westo-dish-catbar .westo-dish-catbar__chip { animation: none !important; transform: none !important; filter: none !important; opacity: 1 !important; will-change: auto !important; contain: layout paint style; content-visibility: auto; contain-intrinsic-size: 96px 58px; transition: color .16s ease, background-color .16s ease, border-color .16s ease !important; } #westo-dish-catbar .westo-dish-catbar__chip.is-near, #westo-dish-catbar .westo-dish-catbar__chip.is-far { transform: none !important; opacity: 1 !important; } #westo-dish-catbar .westo-dish-catbar__icon, #westo-dish-catbar .westo-dish-catbar__chip.is-active .westo-dish-catbar__icon, #westo-dish-catbar .westo-dish-catbar__chip:hover .westo-dish-catbar__icon, #westo-dish-catbar .westo-dish-catbar__chip:active .westo-dish-catbar__icon { animation: none !important; filter: none !important; box-shadow: none !important; will-change: auto !important; transition: transform .16s cubic-bezier(.22,.8,.24,1) !important; } @media (hover:hover) and (pointer:fine) { #westo-dish-catbar .westo-dish-catbar__chip:hover .westo-dish-catbar__icon { transform: scale(1.035) !important; } } #westo-dish-catbar .westo-dish-catbar__chip:active .westo-dish-catbar__icon { transform: scale(.98) !important; } #westo-dish-catbar .westo-dish-catbar__chip.is-active .westo-dish-catbar__icon { transform: scale(1.045) !important; } #westo-dish-catbar .westo-dish-catbar__thumb { filter: none !important; box-shadow: none !important; image-rendering: auto; } #westo-dish-catbar .westo-dish-catbar__label, #westo-dish-catbar .westo-dish-catbar__chip.is-active .westo-dish-catbar__label { text-shadow: none !important; transition: color .16s ease, opacity .16s ease !important; } /* Local active underline: one small static glow, no keyframe, no filter. */ #westo-dish-catbar .westo-dish-catbar__chip.is-active::after { content: '' !important; display: block !important; left: 50% !important; right: auto !important; inset-inline: auto !important; bottom: 2px !important; width: 2rem !important; height: 2px !important; opacity: .92 !important; transform: translateX(-50%) !important; animation: none !important; filter: none !important; background: var(--cat-accent,var(--prod-cyan)) !important; box-shadow: 0 0 7px color-mix(in srgb,var(--cat-accent,var(--prod-cyan)) 42%,transparent) !important; } /* Mobile/tablet is the thermal priority: no blur, no large shadows, no hover effects. Native overflow is the only per-frame work while scrubbing. */ @media (max-width: 991px), (pointer: coarse) { #westo-dish-catbar.westo-dish-catbar { background: rgba(6,14,16,.965) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 5px 14px rgba(0,0,0,.08) !important; } html[data-theme='light'] #westo-dish-catbar.westo-dish-catbar { background: rgba(248,248,244,.97) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 4px 12px rgba(45,60,56,.055) !important; } #westo-dish-catbar .westo-dish-catbar__chip, #westo-dish-catbar .westo-dish-catbar__icon { transition: none !important; } } /* ======================================================================== WESTO v13.9 — CATEGORY INDEX DOCK LITE The lower category selector is also a full-width translucent surface. On touch devices it should not pay for backdrop readback while the WebGL plate moves behind it. Keep the approved shape, active state and color language, but let native scrolling/compositing do the work. ======================================================================== */ @media (max-width:991px), (pointer:coarse) { html:not(.is-dish-boards) .westo-prod-hero-cats { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(6,14,16,.96) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.09) !important; overscroll-behavior-x:contain !important; -webkit-overflow-scrolling:touch; will-change:auto !important; } html[data-theme='light']:not(.is-dish-boards) .westo-prod-hero-cats { background:rgba(248,248,244,.97) !important; border-color:rgba(31,61,58,.10) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 5px 15px rgba(45,60,56,.06) !important; } html:not(.is-dish-boards) .westo-prod-hero-cat, html:not(.is-dish-boards) .westo-prod-hero-cat img { transition:none !important; filter:none !important; will-change:auto !important; } } /* ======================================================================== WESTO v14.0 — HEADER / DISH CATEGORY STRIP RECOVERY Fixes the v13.9 mobile regression where the dish-category strip started only 4px below a 72px navbar and visually merged with the header. The navbar remains a true three-column composition; the strip owns a separate vertical band with explicit breathing space. ======================================================================== */ :root { --westo-header-cat-gap: 18px; --westo-header-cat-after-gap: 12px; } /* True optical center: equal flexible side columns regardless of the amount of chrome inside the left/right clusters. */ .navbar_container { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important; column-gap: clamp(8px,1.2vw,14px) !important; } .navbar_sound-wrapper, .navbar_menu-wrapper { min-width: 0 !important; max-width: 100% !important; width: auto !important; align-items: center !important; } .navbar_sound-wrapper { gap: 8px !important; } .navbar_menu-wrapper { gap: 8px !important; justify-content: flex-end !important; } .navbar_logo-link { position: relative !important; z-index: 1 !important; } /* Dish mode: category navigation is a second row, never part of the navbar. */ html.is-dish-boards #westo-dish-catbar.westo-dish-catbar { top: calc(var(--v12-nav-h) + var(--westo-header-cat-gap)) !important; } html.is-dish-boards { --dish-chrome-top: calc( var(--v12-nav-h) + var(--westo-header-cat-gap) + 72px + var(--westo-header-cat-after-gap) ); } @media (max-width: 991px) { :root { --westo-header-cat-gap: 16px; --westo-header-cat-after-gap: 10px; } .navbar_content { padding-inline: 12px !important; } .navbar_container { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important; column-gap: 8px !important; } .navbar_sound-wrapper, .navbar_menu-wrapper { gap: 6px !important; } /* Back remains available in dish mode but no longer grows the left cluster. */ .westo-back-categories:not([hidden]) { width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; padding: 0 !important; display: inline-grid !important; place-items: center !important; } .westo-back-categories__label { display: none !important; } .navbar_table { width: 48px !important; min-width: 48px !important; max-width: 48px !important; padding-inline: 0 !important; justify-content: center !important; } html.is-dish-boards #westo-dish-catbar.westo-dish-catbar { top: calc(var(--v12-nav-h) + var(--westo-header-cat-gap)) !important; } html.is-dish-boards { --dish-chrome-top: calc( var(--v12-nav-h) + var(--westo-header-cat-gap) + 68px + var(--westo-header-cat-after-gap) ); } } @media (max-width: 600px) { .navbar_logo-link { width: clamp(112px,31vw,128px) !important; } .navbar_menu-button { min-width: 80px !important; padding-inline: 12px !important; } #nav-auth-btn { min-width: 48px !important; padding-inline: 10px !important; } } @media (max-width: 430px) { :root { --westo-header-cat-gap: 14px; --westo-header-cat-after-gap: 9px; } .navbar_content { padding-inline: 8px !important; } .navbar_container { column-gap: 6px !important; } .navbar_sound-wrapper, .navbar_menu-wrapper { gap: 5px !important; } .westo-back-categories:not([hidden]), .navbar_table { width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 46px !important; min-height: 46px !important; } .navbar_menu-button { min-width: 74px !important; padding-inline: 10px !important; } #nav-auth-btn { min-width: 46px !important; height: 46px !important; min-height: 46px !important; padding-inline: 8px !important; } html.is-dish-boards { --dish-chrome-top: calc( var(--v12-nav-h) + var(--westo-header-cat-gap) + 64px + var(--westo-header-cat-after-gap) ); } } /* Short landscape is space-constrained, but still keeps a visible boundary between global navbar and category navigation. */ @media (orientation: landscape) and (max-height: 620px) { :root { /* Keep the category rail clearly below the compact landscape header. A smaller gap caused both controls to visually merge on short phones. */ --westo-header-cat-gap: 14px; --westo-header-cat-after-gap: 8px; } html.is-dish-boards #westo-dish-catbar.westo-dish-catbar { top: calc(var(--v12-nav-h) + var(--westo-header-cat-gap)) !important; } html.is-dish-boards { --dish-chrome-top: calc( var(--v12-nav-h) + var(--westo-header-cat-gap) + 58px + var(--westo-header-cat-after-gap) ); } } /* ===== END css/westo-production-v12.css ===== */ /* ===== BEGIN css/entrance-promo-deck.css ===== */ /* WESTO Entrance Promotional Deck v14.4 Tactile fanned stack with direct drag, spring return and circular card order. This layer only mounts when active promoSlides target the entrance. */ #westo-entrance.has-eg-promo .eg-card { grid-template-rows: minmax(0,auto) auto auto auto minmax(0,1fr) auto !important; } #westo-entrance.has-eg-promo .eg-experience { grid-row:5 !important; } #westo-entrance.has-eg-promo .eg-cta-wrap { grid-row:6 !important; } #westo-entrance .eg-promo { grid-row:4 !important; width:min(680px,92%) !important; max-width:100%; margin:2px auto 0; position:relative; isolation:isolate; z-index:3; direction:rtl; --eg-promo-h: clamp(164px, 22vh, 224px); --eg-promo-radius: 26px; } #westo-entrance .eg-promo[hidden] { display:none !important; } #westo-entrance .eg-promo__deck { position:relative; height:calc(var(--eg-promo-h) + 18px); padding-top:18px; perspective:1400px; touch-action:none; cursor:grab; outline:none; } #westo-entrance .eg-promo__deck.is-dragging { cursor:grabbing; } #westo-entrance .eg-promo__deck.is-fanning { pointer-events:none; } #westo-entrance .eg-promo__deck:focus-visible::after { content:""; position:absolute; inset:10px -5px -5px; border:2px solid color-mix(in srgb, var(--prod-cyan,#31dbe0) 74%, white); border-radius:calc(var(--eg-promo-radius) + 7px); pointer-events:none; z-index:50; } #westo-entrance .eg-promo__card { position:absolute; inset:18px 0 0; height:var(--eg-promo-h); overflow:hidden; border-radius:var(--eg-promo-radius); border:1px solid rgba(255,255,255,.16); background:rgba(5,13,15,.92); box-shadow: 0 26px 40px rgba(0,0,0,.32), 0 8px 16px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.11); transform-origin:50% 50%; will-change:auto; backface-visibility:hidden; touch-action:none; transition:transform .5s cubic-bezier(.34,1.45,.5,1),opacity .42s ease,box-shadow .3s ease; } #westo-entrance .eg-promo__deck.is-dragging .eg-promo__card, #westo-entrance .eg-promo__deck.is-animating .eg-promo__card { will-change:transform,opacity,box-shadow !important; } #westo-entrance .eg-promo__deck.is-dragging .eg-promo__card { transition:none !important; } #westo-entrance .eg-promo__card[data-layer="0"] { z-index:30; transform:translate3d(0,0,0) rotate(0deg) scale(1); opacity:1; filter:brightness(1); } #westo-entrance .eg-promo__card[data-layer="1"] { z-index:20; transform:translate3d(8px,-16px,0) rotate(-3deg) scale(.95); opacity:1; filter:none; } #westo-entrance .eg-promo__card[data-layer="2"] { z-index:10; transform:translate3d(16px,-32px,0) rotate(-6deg) scale(.90); opacity:1; filter:none; } #westo-entrance .eg-promo__card[data-layer="hidden"] { z-index:1; transform:translate3d(24px,-48px,0) rotate(-9deg) scale(.85); opacity:0; filter:none; pointer-events:none !important; } #westo-entrance .eg-promo__media { width:100%; height:100%; display:block; object-fit:cover; object-position:center; user-select:none; -webkit-user-drag:none; pointer-events:none; } #westo-entrance .eg-promo__fallback { position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; font-weight:800; font-size:clamp(18px,2vw,26px); color:rgba(255,255,255,.9); background: radial-gradient(circle at 20% 20%,rgba(42,210,214,.22),transparent 38%), linear-gradient(145deg,#102326,#081315 72%); } #westo-entrance .eg-promo__card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 46%,rgba(0,0,0,.09)); } #westo-entrance .eg-promo__share { position:absolute; inset-block-start:12px; inset-inline-end:12px; z-index:5; width:42px; height:42px; min-width:42px; min-height:42px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:grid; place-items:center; color:#fff; cursor:pointer; background:linear-gradient(145deg,rgba(7,14,16,.48),rgba(7,14,16,.18)); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 9px 24px rgba(0,0,0,.18); } #westo-entrance .eg-promo__share svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8; } #westo-entrance .eg-promo__pagination { min-height:16px; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:7px; direction:ltr; } #westo-entrance .eg-promo__dot { width:7px; height:7px; min-width:7px; min-height:7px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.28); cursor:pointer; transition:width .26s cubic-bezier(.18,.82,.18,1),background .26s ease,opacity .26s ease; } #westo-entrance .eg-promo__dot[aria-selected="true"] { width:28px; background:var(--prod-cyan,#31dbe0); } #westo-entrance .eg-promo__hint { position:absolute; inset:auto 50% 28px auto; translate:50% 0; z-index:45; padding:5px 9px; border-radius:999px; font-size:9px; line-height:1; white-space:nowrap; color:rgba(255,255,255,.78); background:rgba(4,11,13,.34); border:1px solid rgba(255,255,255,.12); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); pointer-events:none; opacity:0; transition:opacity .25s ease; } #westo-entrance .eg-promo__deck:not(.has-interacted):hover .eg-promo__hint { opacity:1; } html[data-theme='light'] #westo-entrance .eg-promo__card { border-color:rgba(59,84,82,.18); box-shadow:0 22px 52px rgba(48,64,61,.18),inset 0 1px 0 rgba(255,255,255,.78); } html[data-theme='light'] #westo-entrance .eg-promo__dot { background:rgba(36,58,56,.24); } html[data-theme='light'] #westo-entrance .eg-promo__share { color:#152321; border-color:rgba(255,255,255,.82); background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(235,243,239,.38)); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 9px 24px rgba(47,67,62,.16); } html[data-theme='light'] #westo-entrance .eg-promo__hint { color:rgba(24,39,37,.7); background:rgba(250,252,249,.64); border-color:rgba(45,68,65,.12); } html[data-perf-tier='economy'] #westo-entrance .eg-promo__share { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(7,15,17,.88) !important; } html[data-theme='light'][data-perf-tier='economy'] #westo-entrance .eg-promo__share { background:rgba(249,251,248,.94) !important; } @media (min-width:768px) and (max-height:850px) { #westo-entrance .eg-promo { --eg-promo-h:140px; width:min(570px,78%) !important; margin-top:0; } #westo-entrance .eg-promo__deck { height:154px; padding-top:14px; } #westo-entrance .eg-promo__card { inset-block-start:14px; --eg-promo-radius:22px; } #westo-entrance.has-eg-promo .eg-logo-stage { width:88px !important;max-height:132px !important; } #westo-entrance.has-eg-promo .eg-brand-wordmark-img { max-height:48px !important; } #westo-entrance.has-eg-promo .eg-experience { min-height:92px !important; } #westo-entrance.has-eg-promo .eg-step-icon { width:40px !important;height:40px !important;flex-basis:40px !important; } #westo-entrance.has-eg-promo .eg-steps-row { min-height:44px !important; } #westo-entrance.has-eg-promo .eg-steps-row::before { top:19px !important; } } @media (max-width:767px) { #westo-entrance .eg-promo { width:min(100%,430px) !important; --eg-promo-h:clamp(168px,45vw,205px); --eg-promo-radius:22px; margin-top:1px; } #westo-entrance .eg-promo__deck { height:calc(var(--eg-promo-h) + 15px);padding-top:15px; } #westo-entrance .eg-promo__card { inset-block-start:15px; } #westo-entrance .eg-promo__share { width:40px;height:40px;min-width:40px;min-height:40px;inset-block-start:10px;inset-inline-end:10px; } #westo-entrance.has-eg-promo .eg-card { min-height:780px !important; } #westo-entrance.has-eg-promo .eg-logo-stage { width:82px !important;max-height:122px !important;margin-bottom:0 !important; } #westo-entrance.has-eg-promo .eg-brand-wordmark-img { width:min(238px,65vw) !important;max-height:47px !important; } #westo-entrance.has-eg-promo .eg-tagline { margin-top:3px !important; } #westo-entrance.has-eg-promo .eg-experience { min-height:104px !important; } } @media (max-width:430px) and (max-height:790px) { #westo-entrance .eg-promo { --eg-promo-h:148px; width:min(100%,355px) !important; } #westo-entrance .eg-promo__deck { height:161px;padding-top:13px; } #westo-entrance .eg-promo__card { inset-block-start:13px; } #westo-entrance.has-eg-promo .eg-card { min-height:730px !important; } #westo-entrance.has-eg-promo .eg-logo-stage { width:68px !important;max-height:100px !important; } #westo-entrance.has-eg-promo .eg-brand-wordmark-img { width:198px !important;max-height:38px !important; } #westo-entrance.has-eg-promo .eg-step-label { display:none !important; } #westo-entrance.has-eg-promo .eg-experience { min-height:88px !important; } } @media (max-height:560px) and (orientation:landscape) { #westo-entrance .eg-promo { --eg-promo-h:116px;width:min(430px,62vw) !important; } #westo-entrance .eg-promo__deck { height:128px;padding-top:12px; } #westo-entrance .eg-promo__card { inset-block-start:12px;--eg-promo-radius:18px; } } @media (prefers-reduced-motion:reduce) { #westo-entrance .eg-promo__card { transition-duration:.001ms !important; } #westo-entrance .eg-promo__hint { display:none !important; } } /* ===== END css/entrance-promo-deck.css ===== */ /* ===== BEGIN css/westo-v14.1-experience-polish.css ===== */ /* WESTO v14.1 — Experience Promo / CTA Progress / Mobile Dock / Header Safe-Zones */ /* Entrance: the promo deck lives inside the experience block, never as an extra grid row. */ #westo-entrance.has-eg-promo .eg-card { grid-template-rows: none !important; } #westo-entrance.has-eg-promo .eg-experience, #westo-entrance.has-eg-promo .eg-cta-wrap { grid-row:auto !important; } #westo-entrance .eg-experience { display:grid !important; grid-template-columns:1fr !important; justify-items:center !important; width:100% !important; gap:clamp(7px,1.2vh,12px) !important; } #westo-entrance .eg-experience__lead { margin:0 !important; } #westo-entrance .eg-promo--experience { width:min(100%,620px) !important; margin:0 auto !important; --eg-promo-h:clamp(132px,18.5vh,178px); --eg-promo-radius:24px; } #westo-entrance .eg-promo--experience .eg-promo__deck { height:calc(var(--eg-promo-h) + 14px) !important; padding-top:14px !important; } #westo-entrance .eg-promo--experience .eg-promo__card { inset-block-start:14px !important; } #westo-entrance .eg-promo__card { will-change:auto !important; filter:none !important; } #westo-entrance .eg-promo__deck.is-dragging .eg-promo__card { will-change:transform,opacity !important; } #westo-entrance .eg-promo__card[data-layer='1'], #westo-entrance .eg-promo__card[data-layer='2'], #westo-entrance .eg-promo__card[data-layer='hidden'] { filter:none !important; } #westo-entrance .eg-promo__share { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(5,15,18,.86) !important; } html[data-theme='light'] #westo-entrance .eg-promo__share { background:rgba(250,252,249,.95) !important; } /* Progress is visually contained by the CTA without becoming a semantic child of the button. */ #westo-entrance .eg-cta-wrap { position:relative !important; padding-top:clamp(8px,1.2vh,12px) !important; } #westo-entrance .eg-cta { position:relative !important; padding-bottom:11px !important; overflow:hidden !important; } #westo-entrance .eg-cta-wrap > .eg-progress { position:absolute !important; z-index:4 !important; inset-inline:clamp(18px,4vw,30px) !important; bottom:7px !important; margin:0 !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; gap:8px !important; pointer-events:none !important; } #westo-entrance .eg-cta-wrap > .eg-progress .eg-progress__track { height:2px !important; background:rgba(255,255,255,.17) !important; } #westo-entrance .eg-cta-wrap > .eg-progress .eg-progress__pct { font-size:10px !important; line-height:1 !important; color:rgba(255,255,255,.84) !important; min-width:28px !important; } html[data-theme='light'] #westo-entrance .eg-cta-wrap > .eg-progress .eg-progress__track { background:rgba(17,62,63,.16) !important; } html[data-theme='light'] #westo-entrance .eg-cta-wrap > .eg-progress .eg-progress__pct { color:rgba(18,61,63,.74) !important; } /* Mobile footer becomes one coherent bottom navigation surface. */ @media (max-width:767px) { #westo-entrance .eg-foot { width:min(calc(100% - 8px),520px) !important; min-height:62px !important; margin:0 auto !important; padding:5px 6px !important; grid-template-columns:50px minmax(0,1fr) auto !important; align-items:center !important; gap:4px !important; border:1px solid rgba(92,218,224,.18) !important; border-radius:28px !important; background:rgba(4,12,15,.92) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 28px rgba(0,0,0,.20) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } html[data-theme='light'] #westo-entrance .eg-foot { background:rgba(248,249,246,.96) !important; border-color:rgba(39,91,87,.12) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 24px rgba(40,65,61,.10) !important; } #westo-entrance .eg-foot .eg-corner, #westo-entrance .eg-foot .eg-dock, #westo-entrance .eg-foot .eg-lang-switch { margin:0 !important; min-height:50px !important; height:50px !important; border:0 !important; box-shadow:none !important; background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } #westo-entrance .eg-theme-toggle { width:50px !important; min-width:50px !important; padding:0 !important; } #westo-entrance .eg-dock { justify-self:center !important; width:auto !important; padding:0 3px !important; gap:1px !important; } #westo-entrance .eg-dock__btn { width:44px !important; min-width:44px !important; height:48px !important; min-height:48px !important; padding:0 !important; border-radius:16px !important; } #westo-entrance .eg-dock__btn:active { background:rgba(51,211,218,.10) !important; } #westo-entrance .eg-dock__label, #westo-entrance .eg-corner__label { display:none !important; } #westo-entrance .eg-lang-switch { justify-self:end !important; padding-inline:8px !important; border-radius:18px !important; background:rgba(255,255,255,.035) !important; } html[data-theme='light'] #westo-entrance .eg-lang-switch { background:rgba(34,73,69,.04) !important; } #westo-entrance .eg-lang-seg { min-width:30px !important; min-height:44px !important; font-size:11px !important; } #westo-entrance .eg-lang-sep { opacity:.22 !important; } } @media (max-width:430px) { #westo-entrance .eg-promo--experience { --eg-promo-h:clamp(116px,31vw,142px); --eg-promo-radius:20px; } #westo-entrance .eg-promo--experience .eg-promo__deck { height:calc(var(--eg-promo-h) + 12px) !important; padding-top:12px !important; } #westo-entrance .eg-promo--experience .eg-promo__card { inset-block-start:12px !important; } #westo-entrance .eg-promo__pagination { margin-top:0 !important; min-height:12px !important; } #westo-entrance .eg-step-icon { width:48px !important; height:48px !important; } #westo-entrance .eg-step-label { font-size:8px !important; } #westo-entrance .eg-foot { grid-template-columns:46px minmax(0,1fr) auto !important; border-radius:25px !important; } #westo-entrance .eg-theme-toggle { width:46px !important; min-width:46px !important; } #westo-entrance .eg-dock__btn { width:44px !important; min-width:44px !important; } #westo-entrance .eg-lang-seg { min-width:28px !important; min-height:44px !important; } } @media (max-height:720px) and (orientation:landscape) { #westo-entrance .eg-promo--experience { --eg-promo-h:96px; width:min(430px,62vw) !important; } #westo-entrance .eg-promo--experience .eg-promo__deck { height:106px !important; padding-top:10px !important; } #westo-entrance .eg-promo--experience .eg-promo__card { inset-block-start:10px !important; --eg-promo-radius:17px; } #westo-entrance .eg-experience__lead, #westo-entrance .eg-quote { display:none !important; } } /* Navbar collision-proofing. The brand owns an explicit center track and side clusters are constrained before they can paint into that track. */ .navbar_container { position:relative !important; grid-template-columns:minmax(0,1fr) clamp(118px,17vw,190px) minmax(0,1fr) !important; } .navbar_logo-link { grid-column:2 !important; z-index:6 !important; width:100% !important; max-width:190px !important; min-width:0 !important; pointer-events:auto !important; } .navbar_sound-wrapper { grid-column:1 !important; max-width:100% !important; overflow:visible !important; } .navbar_menu-wrapper { grid-column:3 !important; max-width:100% !important; overflow:visible !important; } @media (max-width:767px) { .navbar_container { grid-template-columns:minmax(0,1fr) clamp(104px,24vw,132px) minmax(0,1fr) !important; column-gap:6px !important; } .navbar_logo-link { width:100% !important; height:46px !important; max-width:132px !important; } .navbar_logo { max-height:46px !important; } .navbar_menu-wrapper,.navbar_sound-wrapper { gap:4px !important; } .navbar_menu-button { min-width:70px !important; height:48px !important; min-height:48px !important; padding-inline:9px !important; } #nav-auth-btn { width:48px !important; min-width:48px !important; height:48px !important; min-height:48px !important; padding:0 !important; display:grid !important; place-items:center !important; } .navbar_table,.westo-back-categories:not([hidden]) { width:46px !important; min-width:46px !important; height:46px !important; min-height:46px !important; } } @media (max-width:360px) { .navbar_content { padding-inline:6px !important; } .navbar_container { grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr) !important; column-gap:4px !important; } .navbar_logo-link { max-width:92px !important; } .navbar_menu-button { width:44px !important; min-width:44px !important; padding:0 !important; } .navbar_menu-button .text-block { display:none !important; } #nav-auth-btn { width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important; font-size:12px !important; } .navbar_table,.westo-back-categories:not([hidden]) { width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important; } } /* Never let the legacy menu-position promo deck coexist with the entrance deck. */ #westo-menu-promo-deck { display:none !important; } html.has-westo-menu-promo-deck { --menu-promo-h:0px !important; --menu-promo-gap:0px !important; } @media (max-width:767px) and (max-height:720px) { #westo-entrance .eg-shell { gap:5px !important; padding-top:calc(7px + var(--eg-safe-t)) !important; padding-bottom:calc(7px + var(--eg-safe-b)) !important; } #westo-entrance .eg-card { padding-top:13px !important; padding-bottom:11px !important; } #westo-entrance .eg-logo-stage { width:68px !important; max-height:100px !important; margin-bottom:0 !important; } #westo-entrance .eg-brand-wordmark-img { width:min(190px,58vw) !important; max-height:38px !important; } #westo-entrance .eg-tagline { margin-top:2px !important; font-size:10px !important; } #westo-entrance .eg-subtitle { display:none !important; } #westo-entrance .eg-status { margin-top:5px !important; min-height:31px !important; } #westo-entrance .eg-experience { margin-top:5px !important; gap:4px !important; } #westo-entrance .eg-experience__lead { font-size:9px !important; } #westo-entrance .eg-promo--experience { --eg-promo-h:104px; width:min(100%,330px) !important; } #westo-entrance .eg-promo--experience .eg-promo__deck { height:114px !important; padding-top:10px !important; } #westo-entrance .eg-promo--experience .eg-promo__card { inset-block-start:10px !important; --eg-promo-radius:17px; } #westo-entrance .eg-promo__pagination { display:none !important; } #westo-entrance .eg-step-icon { width:38px !important; height:38px !important; } #westo-entrance .eg-steps-row::before { top:19px !important; } #westo-entrance .eg-step-label { display:none !important; } #westo-entrance .eg-quote { display:none !important; } #westo-entrance .eg-cta { min-height:50px !important; height:50px !important; } #westo-entrance .eg-foot { min-height:54px !important; height:54px !important; } #westo-entrance .eg-foot .eg-corner,#westo-entrance .eg-foot .eg-dock,#westo-entrance .eg-foot .eg-lang-switch { min-height:44px !important; height:44px !important; } #westo-entrance .eg-dock__btn { height:44px !important; min-height:44px !important; } } /* Neutralize obsolete v13.6 grid/min-height assumptions now that promo is nested in experience. */ #westo-entrance.has-eg-promo .eg-card { min-height:0 !important; } @media (max-width:767px) { #westo-entrance.has-eg-promo .eg-card { min-height:0 !important; } } @media (max-width:430px) and (max-height:790px) { #westo-entrance.has-eg-promo .eg-card { min-height:0 !important; } } /* v14.2 design-system hardening: coherent keyboard focus and minimum interaction targets. */ #westo-entrance :is(.eg-theme-toggle,.eg-dock__btn,.eg-lang-seg,.eg-promo__share):focus-visible, .navbar :is(.navbar_menu-button,#nav-auth-btn,.navbar_table,.westo-back-categories):focus-visible { outline:2px solid rgba(111,224,229,.88) !important; outline-offset:3px !important; box-shadow:0 0 0 4px rgba(65,204,212,.14) !important; } html[data-theme='light'] #westo-entrance :is(.eg-theme-toggle,.eg-dock__btn,.eg-lang-seg,.eg-promo__share):focus-visible, html[data-theme='light'] .navbar :is(.navbar_menu-button,#nav-auth-btn,.navbar_table,.westo-back-categories):focus-visible { outline-color:rgba(28,108,115,.92) !important; box-shadow:0 0 0 4px rgba(28,108,115,.12) !important; } @media (pointer:coarse) { #westo-entrance .eg-lang-seg, #westo-entrance .eg-dock__btn, #nav-auth-btn, .navbar_table, .westo-back-categories:not([hidden]) { min-width:44px !important; min-height:44px !important; } } /* ===== END css/westo-v14.1-experience-polish.css ===== */ /* ===== BEGIN css/westo-v14.3-ultra-fine.css ===== */ /* WESTO v14.3 — Ultra Fine: annotated UX corrections + thermal-safe polish. */ /* ── Entrance card / 2:1 promo canvas ───────────────────────────────────── */ #westo-entrance.has-eg-promo .eg-card { padding-block-start:clamp(1.25rem,2.7vh,1.9rem) !important; padding-block-end:clamp(1.1rem,2.35vh,1.6rem) !important; } #westo-entrance .eg-promo--experience { width:min(100%,620px) !important; --eg-promo-h:clamp(182px,28vw,285px); --eg-promo-radius:24px; } #westo-entrance .eg-promo--experience .eg-promo__deck { height:calc(var(--eg-promo-h) + 14px) !important; } /* Media never exposes an empty/broken frame while the scheduler is decoding. */ #westo-entrance .eg-promo__card { background:#071315 !important; } #westo-entrance .eg-promo__placeholder { position:absolute; inset:0; z-index:0; display:grid; place-content:center; justify-items:center; gap:8px; padding:24px; overflow:hidden; color:rgba(222,247,246,.86); background: radial-gradient(circle at 22% 18%,rgba(49,219,224,.16),transparent 36%), radial-gradient(circle at 78% 78%,rgba(93,142,255,.09),transparent 38%), linear-gradient(145deg,#0a1b1e,#061013 72%); transition:opacity .28s ease,visibility .28s ease; } #westo-entrance .eg-promo__placeholder::after { content:""; position:absolute; inset:12px; border:1px solid rgba(122,219,222,.09); border-radius:calc(var(--eg-promo-radius) - 8px); pointer-events:none; } #westo-entrance .eg-promo__placeholder-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; border:1px solid rgba(111,226,230,.25); background:rgba(62,211,216,.08); font:800 18px/1 system-ui,sans-serif; letter-spacing:.05em; } #westo-entrance .eg-promo__placeholder-title { max-width:80%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:650; opacity:.72; } #westo-entrance .eg-promo__media { position:relative; z-index:1; opacity:0; transition:opacity .3s ease; } #westo-entrance .eg-promo__card.is-media-ready .eg-promo__media { opacity:1; } #westo-entrance .eg-promo__card.is-media-ready .eg-promo__placeholder { opacity:0; visibility:hidden; } #westo-entrance .eg-promo__card.is-media-error .eg-promo__placeholder { opacity:1;visibility:visible; } html[data-theme='light'] #westo-entrance .eg-promo__placeholder { color:rgba(27,61,59,.8); background: radial-gradient(circle at 22% 18%,rgba(32,176,184,.12),transparent 36%), linear-gradient(145deg,#f8fbf8,#edf3ef 74%); } /* CTA is the visible progress surface. Accessible progress remains SR-only. */ #westo-entrance .eg-cta-wrap { padding-top:clamp(8px,1.1vh,12px) !important; } #westo-entrance .eg-cta { --eg-progress:0%; position:relative !important; isolation:isolate; overflow:hidden !important; padding-bottom:0 !important; } #westo-entrance .eg-cta::before { content:""; position:absolute; z-index:0; inset-block:0; inset-inline-start:0; width:var(--eg-progress); padding:0 !important; border-radius:inherit; background:linear-gradient(90deg,rgba(21,174,187,.23),rgba(55,222,225,.42)); box-shadow:inset -1px 0 0 rgba(111,244,244,.3); -webkit-mask:none !important; mask:none !important; -webkit-mask-composite:initial !important; mask-composite:initial !important; pointer-events:none; transition:width .18s linear; } html[data-theme='light'] #westo-entrance .eg-cta::before { background:linear-gradient(90deg,rgba(18,154,162,.12),rgba(33,190,194,.24)); box-shadow:inset -1px 0 0 rgba(14,131,138,.2); } #westo-entrance .eg-progress__pct--inside { position:relative; z-index:3; order:-1; min-width:34px; font-size:11px !important; line-height:1; font-variant-numeric:tabular-nums; color:rgba(230,253,252,.88); } html[data-theme='light'] #westo-entrance .eg-progress__pct--inside { color:rgba(14,81,83,.82); } #westo-entrance .eg-cta-label,#westo-entrance .eg-cta-arrow { z-index:3 !important; } #westo-entrance .eg-progress--sr { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } #westo-entrance .eg-cta-wrap > .eg-progress:not(.eg-progress--sr) { display:none !important; } /* ── Entrance bottom nav: one physical row + shaped dark language control ── */ @media (max-width:767px) { #westo-entrance { overflow-y:auto !important; overscroll-behavior-y:contain; } #westo-entrance .eg-shell { height:auto !important; min-height:100svh !important; grid-template-rows:auto auto auto !important; } #westo-entrance .eg-mid { min-height:auto !important; } #westo-entrance.has-eg-promo .eg-card { max-height:none !important; } #westo-entrance .eg-promo--experience { --eg-promo-h:clamp(172px,46vw,212px); --eg-promo-radius:21px; } #westo-entrance .eg-foot { display:grid !important; grid-template-columns:44px minmax(156px,1fr) minmax(96px,112px) !important; grid-template-rows:52px !important; align-items:center !important; flex-wrap:nowrap !important; white-space:nowrap !important; gap:3px !important; } #westo-entrance .eg-foot > * { min-width:0 !important; } #westo-entrance .eg-theme-toggle { width:44px !important;min-width:44px !important;height:48px !important; } #westo-entrance .eg-dock { width:100% !important; min-width:0 !important; display:grid !important; grid-template-columns:repeat(4,minmax(38px,1fr)) !important; gap:0 !important; padding-inline:0 !important; } #westo-entrance .eg-dock__btn { width:100% !important; min-width:38px !important; height:48px !important; min-height:48px !important; } #westo-entrance .eg-lang-switch { width:100% !important; min-width:96px !important; height:48px !important; min-height:48px !important; display:grid !important; grid-template-columns:1fr auto 1fr auto 1fr !important; align-items:center !important; justify-items:center !important; gap:0 !important; padding:3px !important; border:1px solid rgba(88,216,222,.19) !important; border-radius:17px !important; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.12) !important; } #westo-entrance .eg-lang-seg { width:100% !important; min-width:0 !important; min-height:40px !important; height:40px !important; padding:0 2px !important; border-radius:13px !important; } #westo-entrance .eg-lang-seg.is-active { color:#73e7ec !important; background:rgba(45,203,211,.11) !important; box-shadow:inset 0 0 0 1px rgba(92,224,229,.15),0 4px 12px rgba(0,0,0,.09) !important; } html[data-theme='light'] #westo-entrance .eg-lang-switch { border-color:rgba(31,86,83,.13) !important; background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(237,242,238,.9)) !important; box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(42,70,66,.08) !important; } html[data-theme='light'] #westo-entrance .eg-lang-seg.is-active { color:#0e777d !important; background:rgba(20,152,158,.09) !important; } } @media (max-width:430px) { #westo-entrance .eg-promo--experience { --eg-promo-h:clamp(168px,46vw,198px); } #westo-entrance .eg-foot { width:min(calc(100% - 2px),520px) !important; grid-template-columns:42px minmax(148px,1fr) 94px !important; gap:2px !important; padding-inline:3px !important; } #westo-entrance .eg-theme-toggle { width:42px !important;min-width:42px !important; } #westo-entrance .eg-dock { grid-template-columns:repeat(4,minmax(36px,1fr)) !important; } #westo-entrance .eg-dock__btn { min-width:36px !important; } #westo-entrance .eg-lang-switch { min-width:94px !important;padding-inline:2px !important; } #westo-entrance .eg-step-label { font-size:8.5px !important; } } @media (max-width:340px) { #westo-entrance .eg-foot { grid-template-columns:40px minmax(140px,1fr) 90px !important; } #westo-entrance .eg-theme-toggle { width:40px !important;min-width:40px !important; } #westo-entrance .eg-dock__btn { min-width:34px !important; } #westo-entrance .eg-lang-switch { min-width:90px !important; } } @media (max-height:720px) and (orientation:landscape) { #westo-entrance .eg-promo--experience { --eg-promo-h:clamp(112px,22vh,150px); width:min(460px,62vw) !important; } } /* ── Header: true centered lockup; Table + Login left, Menu only right ───── */ .navbar_container { position:relative !important; } .navbar_logo-link { position:absolute !important; left:50% !important; right:auto !important; inset-inline:auto !important; transform:translateX(-50%) !important; justify-self:auto !important; width:clamp(108px,16vw,178px) !important; max-width:178px !important; z-index:5 !important; } .navbar_sound-wrapper { justify-self:start !important; display:flex !important; align-items:center !important; flex-wrap:nowrap !important; gap:5px !important; z-index:7 !important; } .navbar_menu-wrapper { justify-self:end !important; z-index:7 !important; } .navbar_menu-wrapper #nav-auth-btn { display:none !important; } .navbar_sound-wrapper #nav-auth-btn { flex:0 0 auto; } @media (max-width:767px) { .navbar_logo-link { width:clamp(92px,24vw,118px) !important;max-width:118px !important;height:46px !important; } .navbar_logo { max-width:100% !important;max-height:42px !important;object-fit:contain !important; } .navbar_sound-wrapper #nav-auth-btn { width:46px !important;min-width:46px !important;height:46px !important;min-height:46px !important; } } @media (max-width:360px) { .navbar_logo-link { width:86px !important;max-width:86px !important; } .navbar_sound-wrapper { gap:3px !important; } .navbar_sound-wrapper #nav-auth-btn { width:44px !important;min-width:44px !important;height:44px !important;min-height:44px !important; } } /* ── Category header: keep the local static indicator, but stop clipping it ── The optimized chip uses paint containment. That clipped the bottom half of the active chip's neon shadow. Relax paint containment only for the single active chip; the legacy full-bar geometry indicator stays disabled. */ #westo-dish-catbar .westo-dish-catbar__chip.is-active { contain:layout style !important; overflow:visible !important; } #westo-dish-catbar .westo-dish-catbar__chip.is-active::after { content:"" !important; display:block !important; left:50% !important; right:auto !important; inset-inline:auto !important; bottom:4px !important; width:2rem !important; height:2px !important; border-radius:999px !important; opacity:.96 !important; transform:translateX(-50%) !important; animation:none !important; filter:none !important; background:var(--cat-accent,var(--prod-cyan)) !important; box-shadow:0 0 5px color-mix(in srgb,var(--cat-accent,var(--prod-cyan)) 48%,transparent) !important; } #westo-dish-catbar::before { display:none !important;content:none !important; } /* ── Dish ambient: one static soft light per board, no blur/filter/RAF ───── */ html.is-dish-boards section.is-benefits .benefits_container { isolation:isolate; overflow:hidden; --westo-dish-light-x:-12vw; --westo-dish-light-y:-7vh; } html.is-dish-boards section.is-benefits .benefits_container::before { content:""; position:absolute; z-index:0; left:50%; top:48%; width:min(82vmax,980px); height:min(82vmax,980px); border-radius:50%; pointer-events:none; opacity:.78; background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--cat-accent,#78d0d8) 22%,transparent) 0%,color-mix(in srgb,var(--cat-accent,#78d0d8) 8%,transparent) 31%,transparent 68%); transform:translate3d(calc(-50% + var(--westo-dish-light-x)),calc(-50% + var(--westo-dish-light-y)),0) scale(.92); transition:transform .72s cubic-bezier(.22,1,.36,1),opacity .38s ease; will-change:auto; } html.is-dish-boards section.is-benefits.is-dish-active .benefits_container::before { opacity:.86; } html.is-dish-boards section.is-benefits[data-westo-light-slot='1'] .benefits_container { --westo-dish-light-x:13vw;--westo-dish-light-y:-10vh; } html.is-dish-boards section.is-benefits[data-westo-light-slot='2'] .benefits_container { --westo-dish-light-x:15vw;--westo-dish-light-y:10vh; } html.is-dish-boards section.is-benefits[data-westo-light-slot='3'] .benefits_container { --westo-dish-light-x:-14vw;--westo-dish-light-y:12vh; } html[data-theme='light'].is-dish-boards section.is-benefits .benefits_container::before { opacity:.5; } html[data-perf-tier='economy'].is-dish-boards section.is-benefits .benefits_container::before { opacity:.42; } /* ── Table close button: larger red-accent glass without backdrop blur ───── */ .table-drawer__close { width:50px !important; min-width:50px !important; height:50px !important; min-height:50px !important; display:grid !important; place-items:center !important; padding:0 !important; border:1px solid rgba(255,102,112,.42) !important; border-radius:18px !important; color:#ff8b94 !important; font-size:1.7rem !important; font-weight:500 !important; background:linear-gradient(145deg,rgba(255,90,104,.16),rgba(255,255,255,.045)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(93,13,22,.18) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; transition:transform .18s ease,background .18s ease,border-color .18s ease !important; } .table-drawer__close:hover,.table-drawer__close:focus-visible { color:#ffd8db !important; border-color:rgba(255,115,125,.72) !important; background:linear-gradient(145deg,rgba(255,78,93,.26),rgba(255,255,255,.07)) !important; transform:translateY(-1px) scale(1.02); } html[data-theme='light'] .table-drawer__close { color:#b62938 !important; border-color:rgba(191,44,59,.25) !important; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,225,228,.82)) !important; box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(132,37,46,.11) !important; } /* ── Hero/classic category toolbar readability + horizontal ergonomics ─── */ .westo-prod-hero-cats { overflow-x:auto !important; overflow-y:hidden !important; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scroll-padding-inline:clamp(16px,6vw,72px) !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; touch-action:pan-x !important; cursor:grab; } .westo-prod-hero-cats:active { cursor:grabbing; } .westo-prod-hero-cat { scroll-snap-align:center; scroll-margin-inline:14px; flex-basis:112px !important; min-width:112px !important; } .westo-prod-hero-cat span { font-size:11px !important; line-height:1.3 !important; font-weight:560 !important; letter-spacing:0 !important; text-wrap:balance; } @media (max-width:767px) { .westo-prod-hero-cats { padding-inline:10px !important; } .westo-prod-hero-cat { flex-basis:92px !important;min-width:92px !important; } .westo-prod-hero-cat span { font-size:10px !important;line-height:1.28 !important; } } /* Large live backdrop blurs over animated entrance layers are expensive on mobile GPUs. Keep the glass language via translucent surfaces but remove the live sampling pass on coarse/mobile devices. */ @media (max-width:767px), (pointer:coarse) { #westo-entrance .eg-card, #westo-entrance .eg-status, #westo-entrance .eg-cta, #westo-entrance .eg-dock, #westo-entrance .eg-corner, #westo-entrance .eg-lang-switch { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } #westo-entrance .eg-card { background:linear-gradient(168deg,rgba(255,255,255,.055),transparent 42%,rgba(51,210,216,.04)),rgba(4,14,17,.94) !important; } #westo-entrance .eg-status { background:rgba(2,10,13,.72) !important; } html[data-theme='light'] #westo-entrance .eg-card { background:linear-gradient(168deg,rgba(255,255,255,.72),transparent 44%,rgba(23,145,151,.035)),rgba(244,247,243,.95) !important; } html[data-theme='light'] #westo-entrance .eg-status { background:rgba(248,250,247,.92) !important; } } /* ── Thermal idle: pause decorative infinite paint loops, not state motion ─ */ html[data-thermal-idle='true'] #westo-entrance * { animation-play-state:paused !important; } html[data-thermal-idle='true'] .scroll_discover, html[data-thermal-idle='true'] .navbar_menu-mascot { animation-play-state:paused !important; } /* Balanced/economy avoid long-running text background repaint even before idle. */ html[data-perf-tier='economy'] .scroll_discover, html[data-perf-tier='balanced'] .scroll_discover { animation:none !important; color:rgba(236,232,226,.7) !important; -webkit-text-fill-color:rgba(236,232,226,.7) !important; background-image:none !important; } html[data-theme='light'][data-perf-tier='economy'] .scroll_discover, html[data-theme='light'][data-perf-tier='balanced'] .scroll_discover { color:rgba(26,23,20,.62) !important; -webkit-text-fill-color:rgba(26,23,20,.62) !important; } html[data-perf-tier='economy'] #westo-entrance .eg-card__reflect, html[data-perf-tier='balanced'] #westo-entrance .eg-card__reflect { animation:none !important; } @media (prefers-reduced-motion:reduce) { #westo-entrance .eg-cta::before, #westo-entrance .eg-promo__media, #westo-entrance .eg-promo__placeholder, html.is-dish-boards section.is-benefits .benefits_container::before { transition:none !important; } } /* ======================================================================== WESTO Ultra Fine v1 — verified screenshot corrections Desktop entrance composition, true header logo lockup, language baseline, and category underline parity. Mobile promo geometry remains authoritative. ======================================================================== */ /* Desktop/tablet entrance: v14.1 moved Promo inside Experience while v14.3 increased its height. On >767px that combination could exceed the fixed viewport-owned card and visually collapse/overlap rows. Give desktop an explicit five-row budget and a bounded promo size. */ @media (min-width:768px) { #westo-entrance.has-eg-promo .eg-card { grid-template-rows:auto auto auto minmax(0,1fr) auto !important; align-content:center !important; row-gap:6px !important; padding:16px clamp(30px,4vw,46px) 15px !important; } #westo-entrance.has-eg-promo .eg-logo-stage { width:96px !important; max-height:142px !important; margin-bottom:0 !important; } #westo-entrance.has-eg-promo .eg-brand-wordmark-img { width:min(270px,32vw) !important; max-height:50px !important; } #westo-entrance.has-eg-promo .eg-tagline { margin-top:3px !important; font-size:12px !important; } #westo-entrance.has-eg-promo .eg-subtitle { margin-top:1px !important; font-size:8px !important; } #westo-entrance.has-eg-promo .eg-status { min-height:34px !important; padding:5px 12px !important; font-size:10px !important; } #westo-entrance.has-eg-promo .eg-experience { min-height:0 !important; align-content:start !important; gap:5px !important; } #westo-entrance.has-eg-promo .eg-experience__lead { font-size:10px !important; } #westo-entrance.has-eg-promo .eg-steps-row { min-height:48px !important; width:min(470px,82%) !important; } #westo-entrance.has-eg-promo .eg-steps-row::before { top:21px !important; inset-inline:30px !important; } #westo-entrance.has-eg-promo .eg-step-icon { width:44px !important; height:44px !important; flex-basis:44px !important; } #westo-entrance.has-eg-promo .eg-step-icon svg { width:17px !important;height:17px !important; } #westo-entrance.has-eg-promo .eg-step-label { font-size:7.5px !important; } #westo-entrance.has-eg-promo .eg-quote { font-size:9.5px !important; } #westo-entrance .eg-promo--experience { width:min(500px,62vw) !important; --eg-promo-h:clamp(185px,23vh,220px); --eg-promo-radius:22px; } #westo-entrance .eg-promo--experience .eg-promo__deck { height:calc(var(--eg-promo-h) + 13px) !important; padding-top:13px !important; } #westo-entrance .eg-promo--experience .eg-promo__card { inset-block-start:13px !important; } #westo-entrance.has-eg-promo .eg-cta { min-height:56px !important; height:56px !important; } } /* Short desktop/tablet viewports get an even tighter bounded composition; mobile rules are intentionally untouched. */ @media (min-width:768px) and (max-height:850px) { #westo-entrance.has-eg-promo .eg-card { row-gap:4px !important; padding:11px 34px 10px !important; } #westo-entrance.has-eg-promo .eg-logo-stage { width:72px !important;max-height:106px !important; } #westo-entrance.has-eg-promo .eg-brand-wordmark-img { width:min(220px,30vw) !important;max-height:40px !important; } #westo-entrance.has-eg-promo .eg-tagline { font-size:10px !important; } #westo-entrance.has-eg-promo .eg-status { min-height:30px !important;font-size:9px !important; } #westo-entrance.has-eg-promo .eg-steps-row { min-height:40px !important;width:min(420px,78%) !important; } #westo-entrance.has-eg-promo .eg-steps-row::before { top:18px !important; } #westo-entrance.has-eg-promo .eg-step-icon { width:38px !important;height:38px !important;flex-basis:38px !important; } #westo-entrance.has-eg-promo .eg-step-label { font-size:7px !important; } #westo-entrance .eg-promo--experience { width:min(420px,56vw) !important; --eg-promo-h:clamp(140px,18vh,158px); } #westo-entrance.has-eg-promo .eg-cta { min-height:50px !important;height:50px !important; } } /* Header: the source asset was a wide composite lockup and the container was still flex in the Webflow base, so grid-column rules could not guarantee a real center track. Use the approved Persian wordmark and force the actual three-column header geometry. */ .navbar_container { display:grid !important; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important; align-items:center !important; position:relative !important; } .navbar_logo-link { position:relative !important; left:auto !important; right:auto !important; inset:auto !important; inset-inline:auto !important; transform:none !important; grid-column:2 !important; justify-self:center !important; align-self:center !important; width:clamp(118px,16vw,178px) !important; max-width:178px !important; height:46px !important; overflow:visible !important; z-index:6 !important; } .navbar_logo { display:block !important; width:100% !important; height:auto !important; max-width:100% !important; max-height:38px !important; object-fit:contain !important; object-position:center !important; } .navbar_logo--light { display:none !important; } html[data-theme='light'] .navbar_logo--dark { display:none !important; } html[data-theme='light'] .navbar_logo--light { display:block !important; } .navbar_sound-wrapper { grid-column:1 !important;justify-self:start !important; } .navbar_menu-wrapper { grid-column:3 !important;justify-self:end !important; } @media (max-width:767px) { .navbar_logo-link { width:clamp(78px,22vw,112px) !important; max-width:112px !important; height:44px !important; } .navbar_logo { max-height:30px !important; } } /* In narrow dish mode the back and table actions are the primary contextual controls. Three left-side pills cannot coexist with a centered brand and the menu trigger inside a 320–430px header, so auth moves to the site menu at this breakpoint instead of painting over the wordmark. */ @media (max-width:430px) { html.is-dish-boards .navbar_sound-wrapper #nav-auth-btn { display:none !important; } html.is-dish-boards .navbar_container { grid-template-columns:minmax(96px,1fr) minmax(76px,92px) minmax(74px,1fr) !important; column-gap:4px !important; } html.is-dish-boards .navbar_logo-link { width:min(88px,23vw) !important; max-width:88px !important; overflow:hidden !important; } html.is-dish-boards .navbar_sound-wrapper { gap:4px !important; /* The cart counter intentionally sits outside the button corner. */ overflow:visible !important; } html.is-dish-boards .westo-back-categories:not([hidden]), html.is-dish-boards .navbar_table { width:44px !important; min-width:44px !important; max-width:44px !important; height:44px !important; min-height:44px !important; } html.is-dish-boards .navbar_menu-button { min-width:70px !important; padding-inline:8px !important; } } @media (max-width:360px) { .navbar_logo-link { width:74px !important;max-width:74px !important; } .navbar_logo { max-height:27px !important; } } /* Language switch: all three Latin tokens own identical boxes/baselines. The legacy AR rescue no longer uses a different inline-flex baseline. */ #westo-entrance .eg-lang-switch { align-items:center !important; } #westo-entrance .eg-lang-seg, #westo-entrance .eg-lang-seg--ar { display:flex !important; align-items:center !important; justify-content:center !important; align-self:center !important; line-height:1 !important; padding-block:0 !important; margin:0 !important; transform:none !important; vertical-align:middle !important; } /* Dish category underline must use the same proportional grammar as the classic lower category toolbar, instead of a fixed 2rem segment. */ #westo-dish-catbar .westo-dish-catbar__chip.is-active::after { left:auto !important; right:auto !important; inset-inline:28% !important; bottom:3px !important; width:auto !important; height:2px !important; transform:none !important; border-radius:999px !important; opacity:.8 !important; animation:none !important; filter:none !important; background:var(--cat-accent,var(--prod-cyan)) !important; box-shadow:0 0 5px color-mix(in srgb,var(--cat-accent,var(--prod-cyan)) 42%,transparent) !important; } /* Ultra Fine v1.1 — canonical hero scroll instruction. Reuse the original .scroll_discover node in the v12 hero-copy slot, remove its old absolute/shimmer presentation, and keep one calm instruction only. */ .westo-v12-hero-copy > .scroll_discover.westo-v12-hero-scroll-copy { position:static !important; inset:auto !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; transform:none !important; display:block !important; width:auto !important; max-width:100% !important; margin:8px auto 0 !important; padding:0 !important; color:var(--prod-muted) !important; -webkit-text-fill-color:var(--prod-muted) !important; background:none !important; background-image:none !important; background-clip:border-box !important; -webkit-background-clip:border-box !important; animation:none !important; filter:none !important; font-size:11px !important; line-height:1.45 !important; text-align:center !important; white-space:normal !important; pointer-events:none !important; } html[data-theme='light'] .westo-v12-hero-copy > .scroll_discover.westo-v12-hero-scroll-copy { color:rgba(26,23,20,.62) !important; -webkit-text-fill-color:rgba(26,23,20,.62) !important; } @media (max-width:767px) { .westo-v12-hero-copy > .scroll_discover.westo-v12-hero-scroll-copy { margin-top:5px !important; font-size:9px !important; } } /* Adaptive entrance geometry The previous mobile cascade changed the shell and card to natural-height rows. On short and medium phones the card then grew beyond the middle row and painted underneath the bottom navigation. Keep the three viewport bands authoritative and let the content scale from the available height. */ @media (max-width:767px) { #westo-entrance { overflow:hidden !important; } #westo-entrance .eg-shell { height:100dvh !important; min-height:100svh !important; max-height:100dvh !important; grid-template-rows: clamp(48px,7dvh,58px) minmax(0,1fr) clamp(54px,7.4dvh,62px) !important; gap:clamp(4px,.8dvh,8px) !important; padding: calc(clamp(5px,1dvh,8px) + var(--eg-safe-t)) clamp(7px,2.2vw,10px) calc(clamp(5px,1dvh,8px) + var(--eg-safe-b)) !important; overflow:hidden !important; } #westo-entrance .eg-top, #westo-entrance .eg-foot { height:100% !important; min-height:0 !important; } #westo-entrance .eg-top > .eg-glass-btn:first-child { width:clamp(46px,6.7dvh,56px) !important; min-width:clamp(46px,6.7dvh,56px) !important; height:clamp(46px,6.7dvh,56px) !important; min-height:0 !important; } #westo-entrance #eg-site-menu.westo-menu-trigger { min-width:clamp(88px,25vw,108px) !important; min-height:0 !important; height:clamp(44px,6.5dvh,54px) !important; } #westo-entrance .eg-mid { min-height:0 !important; height:100% !important; overflow:hidden !important; padding-inline:clamp(0px,1vw,5px) !important; } #westo-entrance.has-eg-promo .eg-card, #westo-entrance .eg-card { width:min(100%,520px) !important; height:min(100%,720px) !important; min-height:0 !important; max-height:100% !important; grid-template-rows:auto auto auto minmax(0,1fr) auto !important; row-gap:clamp(3px,.65dvh,6px) !important; padding: clamp(8px,1.45dvh,13px) clamp(10px,3vw,14px) clamp(8px,1.35dvh,12px) !important; overflow:hidden !important; } #westo-entrance .eg-logo-stage { width:clamp(60px,11.3dvh,100px) !important; max-height:clamp(88px,15dvh,146px) !important; margin:0 auto !important; } #westo-entrance .eg-brand-wordmark-img { width:min(clamp(170px,52vw,240px),68vw) !important; max-height:clamp(34px,5.6dvh,50px) !important; } #westo-entrance .eg-tagline { margin-top:clamp(2px,.55dvh,5px) !important; font-size:clamp(9px,1.35dvh,11px) !important; } #westo-entrance .eg-subtitle { margin-top:1px !important; font-size:clamp(7px,1dvh,8px) !important; } #westo-entrance .eg-status { min-height:clamp(29px,4.3dvh,36px) !important; margin-top:0 !important; padding:4px 9px !important; } #westo-entrance .eg-experience { min-height:0 !important; height:100% !important; align-content:start !important; overflow:hidden !important; margin-top:0 !important; gap:clamp(3px,.55dvh,5px) !important; } #westo-entrance .eg-promo--experience { --eg-promo-h:clamp(104px,calc(31dvh - 72px),195px) !important; width:min(100%,620px) !important; } #westo-entrance .eg-promo--experience .eg-promo__deck { height:calc(var(--eg-promo-h) + 12px) !important; padding-top:12px !important; } #westo-entrance .eg-promo--experience .eg-promo__card { inset-block-start:12px !important; } #westo-entrance .eg-steps-row { min-height:clamp(38px,6.6dvh,54px) !important; } #westo-entrance .eg-step-icon { width:clamp(34px,5.7dvh,46px) !important; height:clamp(34px,5.7dvh,46px) !important; flex-basis:clamp(34px,5.7dvh,46px) !important; } #westo-entrance .eg-steps-row::before { top:clamp(17px,2.85dvh,23px) !important; } #westo-entrance .eg-cta-wrap { margin-top:0 !important; padding-top:clamp(4px,.8dvh,8px) !important; } #westo-entrance .eg-cta { height:clamp(46px,6.9dvh,56px) !important; min-height:0 !important; } #westo-entrance .eg-foot { width:min(100%,520px) !important; grid-template-rows:1fr !important; } #westo-entrance .eg-foot .eg-corner, #westo-entrance .eg-foot .eg-dock, #westo-entrance .eg-foot .eg-lang-switch, #westo-entrance .eg-dock__btn { height:100% !important; min-height:0 !important; } } /* Very short portrait phones keep all primary actions visible. Secondary copy is removed before any control is allowed to collide or leave the viewport. */ @media (max-width:430px) and (max-height:650px) and (orientation:portrait) { #westo-entrance .eg-subtitle, #westo-entrance .eg-experience__lead, #westo-entrance .eg-quote, #westo-entrance .eg-promo__pagination { display:none !important; } #westo-entrance .eg-logo-stage { width:clamp(52px,10dvh,62px) !important; max-height:92px !important; } #westo-entrance .eg-brand-wordmark-img { width:min(170px,58vw) !important; max-height:32px !important; } #westo-entrance .eg-promo--experience { --eg-promo-h:94px !important; } #westo-entrance .eg-promo--experience .eg-promo__deck { height:102px !important; padding-top:8px !important; } #westo-entrance .eg-promo--experience .eg-promo__card { inset-block-start:8px !important; } } /* Phones and small tablets in landscape use the width for a two-column card. This preserves the footer and CTA instead of turning the entrance into a tall scroll page. */ @media (min-width:568px) and (max-width:1180px) and (max-height:520px) and (orientation:landscape) { #westo-entrance { overflow:hidden !important; } #westo-entrance .eg-shell { width:100% !important; height:100dvh !important; min-height:100svh !important; max-height:100dvh !important; grid-template-rows:44px minmax(0,1fr) 50px !important; gap:4px !important; padding:5px 8px !important; overflow:hidden !important; } #westo-entrance .eg-top, #westo-entrance .eg-foot { width:min(100%,900px) !important; height:100% !important; min-height:0 !important; margin-inline:auto !important; } #westo-entrance .eg-top > .eg-glass-btn:first-child, #westo-entrance #eg-site-menu.westo-menu-trigger { height:42px !important; min-height:0 !important; } #westo-entrance .eg-top > .eg-glass-btn:first-child { width:42px !important; min-width:42px !important; } #westo-entrance .eg-mid { min-height:0 !important; height:100% !important; overflow:hidden !important; } #westo-entrance.has-eg-promo .eg-card, #westo-entrance .eg-card { width:min(100%,900px) !important; height:100% !important; min-height:0 !important; max-height:100% !important; display:grid !important; grid-template-columns:minmax(150px,.72fr) minmax(280px,1.28fr) !important; grid-template-rows:auto auto minmax(0,1fr) auto !important; column-gap:14px !important; row-gap:3px !important; padding:7px 12px !important; overflow:hidden !important; } #westo-entrance .eg-logo-stage { grid-column:1 !important; grid-row:1 !important; width:44px !important; max-height:65px !important; margin:0 auto !important; } #westo-entrance .eg-brand-copy { grid-column:1 !important; grid-row:2 !important; } #westo-entrance .eg-brand-wordmark-img { width:min(130px,18vw) !important; max-height:25px !important; } #westo-entrance .eg-tagline { margin-top:1px !important; font-size:8px !important; } #westo-entrance .eg-subtitle, #westo-entrance .eg-status, #westo-entrance .eg-experience__lead, #westo-entrance .eg-steps-row, #westo-entrance .eg-quote, #westo-entrance .eg-promo__pagination { display:none !important; } #westo-entrance .eg-experience { grid-column:2 !important; grid-row:1 / 5 !important; min-height:0 !important; height:100% !important; align-content:center !important; gap:4px !important; margin:0 !important; overflow:hidden !important; } #westo-entrance .eg-promo--experience { --eg-promo-h:clamp(92px,38dvh,142px) !important; width:min(100%,430px) !important; } #westo-entrance .eg-promo--experience .eg-promo__deck { height:calc(var(--eg-promo-h) + 8px) !important; padding-top:8px !important; } #westo-entrance .eg-promo--experience .eg-promo__card { inset-block-start:8px !important; } #westo-entrance .eg-cta-wrap { grid-column:1 !important; grid-row:4 !important; margin:0 !important; padding:0 !important; } #westo-entrance .eg-cta { height:42px !important; min-height:0 !important; font-size:11px !important; } #westo-entrance .eg-foot { display:grid !important; grid-template-columns:44px minmax(180px,1fr) minmax(112px,150px) !important; grid-template-rows:1fr !important; align-items:center !important; gap:4px !important; padding:3px 6px !important; } #westo-entrance .eg-foot .eg-corner, #westo-entrance .eg-foot .eg-dock, #westo-entrance .eg-foot .eg-lang-switch, #westo-entrance .eg-dock__btn { height:100% !important; min-height:0 !important; } } /* iOS Home Screen / standalone viewport safety The home indicator occupies space inside the standalone layout viewport. Keep bottom controls above that gesture zone and use visualViewport height so dynamic viewport changes cannot push the entrance footer off-screen. */ :root { --westo-bottom-clearance: max(10px, env(safe-area-inset-bottom, 0px)); } html.is-standalone { --westo-bottom-clearance: max( 24px, calc(env(safe-area-inset-bottom, 0px) + 10px) ); } @media (display-mode: standalone) { :root { --westo-bottom-clearance: max( 24px, calc(env(safe-area-inset-bottom, 0px) + 10px) ); } } @media (max-width:767px) { :root { --v12-hero-dock-b: var(--westo-bottom-clearance) !important; } html:not(.is-dish-boards) .westo-prod-hero-cats { position:fixed !important; bottom:var(--westo-bottom-clearance) !important; } html:not(.is-dish-boards) .westo-v12-hero-copy { bottom:calc( var(--v12-hero-dock-h) + var(--westo-bottom-clearance) + 17px ) !important; } html.is-standalone #westo-entrance, html.is-standalone #westo-entrance .eg-shell { height:var(--dl-vv-height, 100dvh) !important; min-height:var(--dl-vv-height, 100dvh) !important; max-height:var(--dl-vv-height, 100dvh) !important; } html.is-standalone #westo-entrance { --eg-safe-b:var(--westo-bottom-clearance) !important; } html.is-standalone .navbar_menu { height:var(--dl-vv-height, 100dvh) !important; min-height:0 !important; padding-bottom:var(--westo-bottom-clearance) !important; box-sizing:border-box !important; } } @media (max-width:430px) { html:not(.is-dish-boards) .westo-v12-hero-copy { bottom:calc( var(--v12-hero-dock-h) + var(--westo-bottom-clearance) + 14px ) !important; } } @media (max-width:991px) { html.is-dish-boards { --dish-safe-bottom:var(--westo-bottom-clearance) !important; --menu-card-bottom:var(--westo-bottom-clearance) !important; } } @media (display-mode: standalone) and (max-width:767px) { #westo-entrance, #westo-entrance .eg-shell { height:var(--dl-vv-height, 100dvh) !important; min-height:var(--dl-vv-height, 100dvh) !important; max-height:var(--dl-vv-height, 100dvh) !important; } #westo-entrance { --eg-safe-b:var(--westo-bottom-clearance) !important; } .navbar_menu { height:var(--dl-vv-height, 100dvh) !important; min-height:0 !important; padding-bottom:var(--westo-bottom-clearance) !important; box-sizing:border-box !important; } } /* Category hero: collision-free copy and restored navigation guides. The WebGL plate owns the upper stage; title, instruction, pagination and category dock own the lower editorial bands. */ @media (max-width:991px) { html:not(.is-dish-boards) .carousel_nav { display:block !important; visibility:visible !important; opacity:1 !important; position:fixed !important; inset:0 !important; width:100vw !important; height:100dvh !important; max-width:none !important; padding:0 !important; transform:none !important; pointer-events:none !important; } html:not(.is-dish-boards) .carousel_arrow { --westo-hero-arrow-size:clamp(34px,5.4dvh,42px); display:grid !important; place-items:center !important; visibility:visible !important; opacity:.9 !important; width:var(--westo-hero-arrow-size) !important; height:var(--westo-hero-arrow-size) !important; top:clamp(150px,44dvh,390px) !important; bottom:auto !important; z-index:240 !important; pointer-events:auto !important; } html:not(.is-dish-boards) .carousel_arrow.is-prev { inset-inline:auto !important; left:max( 8px, calc(50vw - min(40vw,220px) - var(--westo-hero-arrow-size)) ) !important; right:auto !important; } html:not(.is-dish-boards) .carousel_arrow.is-next { inset-inline:auto !important; right:max( 8px, calc(50vw - min(40vw,220px) - var(--westo-hero-arrow-size)) ) !important; left:auto !important; } html:not(.is-dish-boards) .hud, html:not(.is-dish-boards) .hud_container, html:not(.is-dish-boards) .hud_left, html:not(.is-dish-boards) .hud_right, html:not(.is-dish-boards) .hud_left-bottom, html:not(.is-dish-boards) .hud_right-bottom { display:block !important; visibility:visible !important; opacity:1 !important; overflow:visible !important; pointer-events:none !important; } html:not(.is-dish-boards) .hud .icon-scroll_wrapper { display:flex !important; visibility:visible !important; opacity:.58 !important; position:fixed !important; top:56dvh !important; bottom:auto !important; width:clamp(12px,1.8vw,17px) !important; height:auto !important; transform:translateY(-50%) !important; z-index:225 !important; color:rgba(244,239,230,.76) !important; pointer-events:none !important; } html[data-theme='light']:not(.is-dish-boards) .hud .icon-scroll_wrapper { color: #1a2327 !important; opacity: .72 !important; } html:not(.is-dish-boards) .hud_left-bottom .icon-scroll_wrapper { left:max(5px,env(safe-area-inset-left,0px)) !important; right:auto !important; } html:not(.is-dish-boards) .hud_right-bottom .icon-scroll_wrapper { right:max(5px,env(safe-area-inset-right,0px)) !important; left:auto !important; } html:not(.is-dish-boards) .westo-scroll-hint--mobile, html:not(.is-dish-boards) .westo-scroll-hint--mobile-right { display:none !important; } } @media (max-width:767px) and (max-height:650px) { html:not(.is-dish-boards) .westo-v12-hero-copy { width:min(88vw,360px) !important; } html:not(.is-dish-boards) .westo-v12-hero-kicker { font-size:7px !important; line-height:1.2 !important; } html:not(.is-dish-boards) .westo-v12-hero-title { margin-top:2px !important; font-size:clamp(30px,8.6vw,36px) !important; line-height:.96 !important; } html:not(.is-dish-boards) .westo-v12-hero-copy > .scroll_discover.westo-v12-hero-scroll-copy { margin-top:3px !important; font-size:8px !important; line-height:1.3 !important; } html:not(.is-dish-boards) .westo-v12-hero-rail { height:10px !important; margin-top:4px !important; } } @media (max-width:991px) and (max-height:560px) and (orientation:landscape) { html:not(.is-dish-boards) .westo-v12-hero-copy { left:74% !important; width:min(44vw,430px) !important; transform:translateX(-50%) !important; } html:not(.is-dish-boards) .westo-v12-hero-title { font-size:clamp(28px,5.3vw,38px) !important; } html:not(.is-dish-boards) .westo-v12-hero-rail { width:min(38vw,360px) !important; } html:not(.is-dish-boards) .carousel_arrow { --westo-hero-arrow-size:clamp(34px,10dvh,42px); top:48dvh !important; } html:not(.is-dish-boards) .carousel_arrow.is-prev { left:max( 8px, calc(30vw - min(15vw,110px) - var(--westo-hero-arrow-size)) ) !important; right:auto !important; } html:not(.is-dish-boards) .carousel_arrow.is-next { left:calc(30vw + min(15vw,110px)) !important; right:auto !important; } html:not(.is-dish-boards) .hud .icon-scroll_wrapper { top:56dvh !important; } } @media (prefers-reduced-motion:reduce) { html:not(.is-dish-boards) .hud .icon-scroll_wrapper { opacity:.48 !important; } } /* v14.4 promo-deck vertical safety. The stacked cards rise above their active card. Reserve that rise inside the deck itself so neither the experience copy above nor the CTA below becomes a paint target. Coarse-pointer devices are included because iOS/installed web apps can expose a tablet-sized CSS viewport on a phone. */ #westo-entrance .eg-promo--experience { --eg-promo-stack-rise:38px; --eg-promo-card-inset:12px; /* The deck is visually taller than the active card. Reserve that full footprint in the experience grid so the following CTA cannot overlap it on short portrait screens. */ height:calc(var(--eg-promo-h) + var(--eg-promo-stack-rise) + var(--eg-promo-card-inset)) !important; } #westo-entrance .eg-promo--experience .eg-promo__deck { height:calc(var(--eg-promo-h) + var(--eg-promo-stack-rise) + var(--eg-promo-card-inset)) !important; padding-top:calc(var(--eg-promo-stack-rise) + var(--eg-promo-card-inset)) !important; } #westo-entrance .eg-promo--experience .eg-promo__card { inset-block-start:calc(var(--eg-promo-stack-rise) + var(--eg-promo-card-inset)) !important; } #westo-entrance .eg-promo--experience.eg-promo--compact { --eg-promo-h:clamp(148px,16dvh,190px) !important; --eg-promo-radius:21px; --eg-promo-stack-rise:24px; --eg-promo-card-inset:10px; } #westo-entrance .eg-promo--experience.eg-promo--compact.eg-promo--short { --eg-promo-h:94px !important; --eg-promo-stack-rise:18px; --eg-promo-card-inset:8px; } /* The experience area is itself a grid. Its final row must reserve the whole deck footprint (rather than just the active card), otherwise the CTA can enter the stack on short iPhones. The classes are added at runtime as a fallback for installed iOS web apps with a scaled CSS viewport. */ #westo-entrance .eg-experience--promo-safe { --eg-promo-reserved-block:calc(clamp(148px,16dvh,190px) + 34px); grid-template-rows:auto auto auto var(--eg-promo-reserved-block) !important; height:auto !important; } #westo-entrance .eg-experience--promo-safe.eg-experience--promo-short { --eg-promo-reserved-block:120px; } #westo-entrance .eg-promo--experience.eg-promo--compact .eg-promo__card[data-layer='1'] { transform:translate3d(6px,-10px,0) rotate(-2deg) scale(.965); } #westo-entrance .eg-promo--experience.eg-promo--compact .eg-promo__card[data-layer='2'] { transform:translate3d(12px,-20px,0) rotate(-4deg) scale(.93); } #westo-entrance .eg-promo--experience.eg-promo--compact .eg-promo__card[data-layer='hidden'] { transform:translate3d(18px,-30px,0) rotate(-6deg) scale(.895); } @media (max-width:767px), (pointer:coarse) and (max-width:1024px), (max-width:1024px) and (min-height:800px) and (max-aspect-ratio:4/5) { #westo-entrance .eg-promo--experience:not(.eg-promo--compact) { --eg-promo-h:clamp(148px,16dvh,190px) !important; --eg-promo-radius:21px; --eg-promo-stack-rise:24px; --eg-promo-card-inset:10px; } #westo-entrance .eg-promo--experience:not(.eg-promo--compact) .eg-promo__card[data-layer='1'] { transform:translate3d(6px,-10px,0) rotate(-2deg) scale(.965); } #westo-entrance .eg-promo--experience:not(.eg-promo--compact) .eg-promo__card[data-layer='2'] { transform:translate3d(12px,-20px,0) rotate(-4deg) scale(.93); } #westo-entrance .eg-promo--experience:not(.eg-promo--compact) .eg-promo__card[data-layer='hidden'] { transform:translate3d(18px,-30px,0) rotate(-6deg) scale(.895); } } @media (max-width:430px) and (max-height:650px) and (orientation:portrait) { #westo-entrance .eg-promo--experience { --eg-promo-h:clamp(94px,15dvh,128px) !important; --eg-promo-stack-rise:18px; --eg-promo-card-inset:8px; } } /* ===== END css/westo-v14.3-ultra-fine.css ===== */ /* ===== BEGIN css/westo-ultra-fine-v1.2.css ===== */ /* WESTO Ultra Fine v1.2 — desktop hero composition guard. Purpose: reserve a clean editorial band below the WebGL stage on wide screens, keep the active food plate visually separate from title/copy, and place explicit prev/next controls beside the central plate. Mobile/tablet geometry is unchanged. */ @media (min-width: 992px) { html:not(.is-dish-boards) .westo-v12-hero-copy { z-index: 24 !important; width: min(560px, 46vw) !important; bottom: calc(var(--v12-hero-dock-b) + var(--v12-hero-dock-h) + 20px) !important; } html:not(.is-dish-boards) .westo-v12-hero-title { font-size: clamp(38px, 4vw, 58px) !important; line-height: .98 !important; } html:not(.is-dish-boards) .westo-v12-hero-desc { max-width: 44ch !important; font-size: 11px !important; line-height: 1.55 !important; } html:not(.is-dish-boards) .westo-v12-hero-rail { width: min(500px, 38vw) !important; } /* The horizontal arrows communicate category navigation, so keep them near the central plate instead of at the viewport bezel. */ html:not(.is-dish-boards) .carousel_arrow { display: grid !important; place-items: center !important; top: 40% !important; width: 48px !important; height: 48px !important; z-index: 26 !important; opacity: .88 !important; } html:not(.is-dish-boards) .carousel_arrow.is-prev { inset-inline-start: clamp(52px, 22vw, 340px) !important; } html:not(.is-dish-boards) .carousel_arrow.is-next { inset-inline-end: clamp(52px, 22vw, 340px) !important; } /* The source WebGL canvas remains authoritative. Fade only its final lower edge so a very wide food photo can never compete with the editorial copy. The fade starts below the intended plate stage, not through the food. */ html:not(.is-dish-boards) main.main-wrapper > canvas { -webkit-mask-image: linear-gradient(180deg, #000 0 61%, rgba(0,0,0,.96) 66%, rgba(0,0,0,.56) 72%, transparent 79%) !important; mask-image: linear-gradient(180deg, #000 0 61%, rgba(0,0,0,.96) 66%, rgba(0,0,0,.56) 72%, transparent 79%) !important; } } /* Short desktop windows are the failure mode shown in the customer-facing screenshot. Tighten copy slightly without moving the category dock. */ @media (min-width: 992px) and (max-height: 920px) { html:not(.is-dish-boards) .westo-v12-hero-copy { width: min(520px, 44vw) !important; bottom: calc(var(--v12-hero-dock-b) + var(--v12-hero-dock-h) + 14px) !important; } html:not(.is-dish-boards) .westo-v12-hero-kicker { font-size: 9px !important; } html:not(.is-dish-boards) .westo-v12-hero-title { font-size: clamp(36px, 3.7vw, 52px) !important; } html:not(.is-dish-boards) .westo-v12-hero-desc { margin-top: 7px !important; } html:not(.is-dish-boards) .westo-v12-hero-rail { margin-top: 7px !important; } } @media (prefers-reduced-motion: reduce) { html:not(.is-dish-boards) .carousel_arrow { transition: none !important; } } /* ===== END css/westo-ultra-fine-v1.2.css ===== */ /* ===== BEGIN css/westo-dish-card-premium.css ===== */ /* WESTO dish detail card — scoped premium editorial treatment. Geometry remains owned by the existing dish-board/PWA layout. */ html.is-dish-boards #westo-dish-card.is-shared-dish-card { --dish-card-bg-top: rgba(10, 15, 16, 0.97); --dish-card-bg-bottom: rgba(5, 10, 11, 0.99); --dish-card-ink: rgba(248, 245, 237, 0.96); --dish-card-muted: rgba(248, 245, 237, 0.68); --dish-card-line: rgba(255, 255, 255, 0.14); --dish-card-gold: rgba(205, 165, 90, 0.9); direction: rtl !important; color: var(--dish-card-ink) !important; background: linear-gradient(180deg, var(--dish-card-bg-top), var(--dish-card-bg-bottom)) !important; border: 1px solid var(--dish-card-line) !important; border-radius: 28px !important; corner-shape: squircle; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.025) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; text-align: right !important; } html.is-dish-boards #westo-dish-card.is-shared-dish-card::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; border-radius: inherit !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.024), transparent 22%) !important; opacity: 1 !important; } html.is-dish-boards #westo-dish-card.is-shared-dish-card::after { content: none !important; display: none !important; } html.is-dish-boards #westo-dish-card .benefits_max-width { position: relative !important; z-index: 1 !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-areas: "price title" "description description" "allergens allergens" "action action" !important; align-content: center !important; align-items: start !important; column-gap: clamp(12px, 2vw, 22px) !important; row-gap: clamp(8px, 1.4vh, 14px) !important; width: 100% !important; height: 100% !important; min-width: 0 !important; direction: ltr !important; } html.is-dish-boards #westo-dish-card .menu-cat-label, html.is-dish-boards #westo-dish-card .subhead_icon { display: none !important; } html.is-dish-boards #westo-dish-card .margin-bottom.margin-small:has([data-menu-price]) { grid-area: price !important; display: block !important; margin: 0 !important; min-width: 0 !important; align-self: start !important; justify-self: start !important; } html.is-dish-boards #westo-dish-card .margin-bottom.margin-small:has([data-menu-price]) .subhead_wrapper, html.is-dish-boards #westo-dish-card .margin-bottom.margin-small:has([data-menu-price]) .subhead { display: contents !important; } html.is-dish-boards #westo-dish-card .subhead_text:has([data-menu-price]) { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-width: 0 !important; padding: 11px 14px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 16px !important; color: rgba(244, 241, 233, 0.92) !important; background: rgba(5, 9, 10, 0.72) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important; white-space: nowrap !important; direction: rtl !important; } html.is-dish-boards #westo-dish-card .subhead_text [data-menu-price] { display: block !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: inherit !important; background: transparent !important; box-shadow: none !important; font-size: clamp(12px, 1.35vw, 15px) !important; font-weight: 650 !important; line-height: 1.2 !important; } html.is-dish-boards #westo-dish-card .dish-price-tag { display: inline-grid !important; place-items: center !important; flex: 0 0 auto !important; width: 20px !important; height: 20px !important; color: var(--dish-card-gold) !important; } html.is-dish-boards #westo-dish-card .dish-price-tag svg { width: 100% !important; height: 100% !important; stroke: currentColor !important; stroke-width: 1.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html.is-dish-boards #westo-dish-card .margin-bottom.margin-xsmall:has([data-menu-name]) { grid-area: title !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; min-width: 0 !important; margin: 0 !important; direction: rtl !important; } html.is-dish-boards #westo-dish-card [data-menu-name] { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; color: var(--dish-card-ink) !important; font-size: clamp(24px, 4vw, 34px) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; text-align: right !important; text-wrap: balance !important; text-shadow: none !important; -webkit-line-clamp: 2 !important; } html.is-dish-boards #westo-dish-card .dish-favorite-button { appearance: none !important; display: inline-grid !important; place-items: center !important; flex: 0 0 46px !important; width: 46px !important; height: 46px !important; padding: 0 !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 50% !important; color: rgba(248, 245, 237, 0.88) !important; background: rgba(255, 255, 255, 0.015) !important; box-shadow: none !important; cursor: pointer !important; transition: transform 160ms ease, opacity 160ms ease, border-color 160ms ease !important; } html.is-dish-boards #westo-dish-card .dish-favorite-button svg { width: 21px !important; height: 21px !important; fill: transparent !important; stroke: currentColor !important; stroke-width: 1.55 !important; stroke-linecap: round !important; stroke-linejoin: round !important; transition: transform 160ms ease, opacity 160ms ease !important; } html.is-dish-boards #westo-dish-card .dish-favorite-button.is-favorite { color: rgba(226, 190, 121, 0.96) !important; border-color: rgba(205, 165, 90, 0.38) !important; } html.is-dish-boards #westo-dish-card .dish-favorite-button.is-favorite svg { fill: rgba(205, 165, 90, 0.18) !important; } html.is-dish-boards #westo-dish-card .dish-favorite-button:active { transform: scale(0.96) !important; } html.is-dish-boards #westo-dish-card .dish-favorite-button:focus-visible { outline: 2px solid rgba(44, 210, 213, 0.65) !important; outline-offset: 3px !important; } html.is-dish-boards #westo-dish-card [data-menu-desc] { grid-area: description !important; display: -webkit-box !important; width: min(100%, 34rem) !important; min-width: 0 !important; margin: 0 !important; color: var(--dish-card-muted) !important; font-size: clamp(13px, 1.5vw, 16px) !important; font-weight: 400 !important; line-height: 1.75 !important; text-align: right !important; direction: rtl !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; } html.is-dish-boards #westo-dish-card .menu-allergen-slot { grid-area: allergens !important; min-width: 0 !important; margin: 0 !important; direction: rtl !important; } html.is-dish-boards #westo-dish-card .menu-allergen { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 7px 8px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: rgba(235, 224, 205, 0.8) !important; background: transparent !important; white-space: normal !important; overflow: visible !important; direction: rtl !important; } html.is-dish-boards #westo-dish-card .menu-allergen__head { gap: 5px !important; color: rgba(244, 241, 233, 0.56) !important; } html.is-dish-boards #westo-dish-card .menu-allergen__marker { width: 6px !important; height: 6px !important; background: var(--dish-card-gold) !important; box-shadow: none !important; } html.is-dish-boards #westo-dish-card .menu-allergen__head strong { font-size: 12px !important; font-weight: 600 !important; } html.is-dish-boards #westo-dish-card .menu-allergen__chips { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; min-width: 0 !important; direction: rtl !important; } html.is-dish-boards #westo-dish-card .menu-allergen__chip { display: inline-flex !important; align-items: center !important; gap: 5px !important; min-height: 25px !important; padding: 4px 9px !important; border: 1px solid rgba(202, 164, 92, 0.3) !important; border-radius: 999px !important; color: rgba(235, 224, 205, 0.8) !important; background: transparent !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.2 !important; white-space: nowrap !important; } html.is-dish-boards #westo-dish-card .menu-allergen__chip svg { width: 15px !important; height: 15px !important; color: var(--dish-card-gold) !important; } html.is-dish-boards #westo-dish-card .max-width-xsmall:has([data-menu-add]) { grid-area: action !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; } html.is-dish-boards #westo-dish-card .menu-add-wrap { display: block !important; width: 100% !important; margin: 0 !important; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button { appearance: none !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 64px !important; padding: 0 !important; border: 1px solid rgba(53, 226, 228, 0.72) !important; border-radius: 30px !important; color: #fff !important; background: linear-gradient(90deg, #087d82 0%, #0a8f94 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 160, 165, 0.08) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; cursor: pointer !important; overflow: hidden !important; transition: transform 180ms ease, opacity 180ms ease, border-color 180ms ease !important; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button::before, html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button::after { content: none !important; display: none !important; } html.is-dish-boards #westo-dish-card .menu-add-btn .glass-button-text { position: relative !important; inset: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; width: 100% !important; padding: 0 18px !important; color: inherit !important; font-size: clamp(18px, 2vw, 20px) !important; font-weight: 600 !important; line-height: 1.2 !important; text-shadow: none !important; } html.is-dish-boards #westo-dish-card .menu-add-btn .glass-button-icon { width: 21px !important; height: 21px !important; stroke-width: 2 !important; } html.is-dish-boards #westo-dish-card .menu-add-btn:disabled { cursor: not-allowed !important; opacity: 0.48 !important; } html.is-dish-boards #westo-dish-card .menu-add-btn:active:not(:disabled) { transform: scale(0.985) !important; } html.is-dish-boards #westo-dish-card .menu-add-btn:focus-visible { outline: 2px solid rgba(44, 210, 213, 0.65) !important; outline-offset: 3px !important; } html.is-dish-boards #westo-dish-card .glass-button-shadow { display: none !important; } @media (hover: hover) and (pointer: fine) { html.is-dish-boards #westo-dish-card .dish-favorite-button:hover, html.is-dish-boards #westo-dish-card .menu-add-btn:hover:not(:disabled) { transform: translateY(-1px) !important; } } @media (min-width: 992px) { html.is-dish-boards { /* Keep the editorial card compact while giving the title row enough room. */ --menu-card-w: clamp(380px, 31vw, 440px); --dish-info-h: clamp(238px, 30dvh, 280px); } html.is-dish-boards #westo-dish-card.is-shared-dish-card { padding: 18px 20px 17px !important; } html.is-dish-boards #westo-dish-card .benefits_max-width { column-gap: clamp(10px, 1vw, 14px) !important; row-gap: clamp(7px, 1vh, 10px) !important; } html.is-dish-boards #westo-dish-card .margin-bottom.margin-xsmall:has([data-menu-name]) { gap: 8px !important; } html.is-dish-boards #westo-dish-card [data-menu-name] { font-size: clamp(22px, 1.8vw, 27px) !important; line-height: 1.15 !important; overflow-wrap: normal !important; word-break: normal !important; } html.is-dish-boards #westo-dish-card .dish-favorite-button { flex-basis: 44px !important; width: 44px !important; height: 44px !important; } html.is-dish-boards #westo-dish-card .subhead_text:has([data-menu-price]) { gap: 7px !important; padding: 9px 11px !important; } html.is-dish-boards #westo-dish-card .subhead_text [data-menu-price] { font-size: clamp(11.5px, 1vw, 13px) !important; } html.is-dish-boards #westo-dish-card .dish-price-tag { width: 17px !important; height: 17px !important; } html.is-dish-boards #westo-dish-card [data-menu-desc] { font-size: clamp(12px, 1vw, 13.5px) !important; line-height: 1.65 !important; } html.is-dish-boards #westo-dish-card .menu-allergen { gap: 5px 6px !important; } html.is-dish-boards #westo-dish-card .menu-allergen__head strong, html.is-dish-boards #westo-dish-card .menu-allergen__chip { font-size: 11px !important; } html.is-dish-boards #westo-dish-card .menu-allergen__chip { min-height: 23px !important; padding: 3px 7px !important; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button { min-height: 56px !important; } html.is-dish-boards #westo-dish-card .menu-add-btn .glass-button-text { font-size: 18px !important; } } /* Tablets keep the same bottom-card composition, but no longer stretch the information surface across the entire display. Phone geometry is untouched. */ @media (min-width: 768px) and (max-width: 991px) and (min-height: 621px) { html.is-dish-boards { --dish-info-h: clamp(232px, 25dvh, 252px); } html.is-dish-boards #westo-dish-card.is-shared-dish-card { left: 50% !important; right: auto !important; width: min(calc(100vw - 28px), 720px) !important; height: var(--dish-info-h) !important; min-height: var(--dish-info-h) !important; max-height: var(--dish-info-h) !important; padding: 16px 18px !important; transform: translateX(-50%) !important; } html.is-dish-boards #westo-dish-card .benefits_max-width { column-gap: 14px !important; row-gap: 8px !important; } html.is-dish-boards #westo-dish-card .margin-bottom.margin-xsmall:has([data-menu-name]) { gap: 9px !important; } html.is-dish-boards #westo-dish-card [data-menu-name] { font-size: clamp(24px, 3vw, 28px) !important; line-height: 1.15 !important; overflow-wrap: normal !important; word-break: normal !important; } html.is-dish-boards #westo-dish-card .dish-favorite-button { flex-basis: 46px !important; width: 46px !important; height: 46px !important; } html.is-dish-boards #westo-dish-card .subhead_text:has([data-menu-price]) { gap: 8px !important; padding: 10px 12px !important; } html.is-dish-boards #westo-dish-card .subhead_text [data-menu-price] { font-size: 12.5px !important; } html.is-dish-boards #westo-dish-card .dish-price-tag { width: 18px !important; height: 18px !important; } html.is-dish-boards #westo-dish-card [data-menu-desc] { font-size: 13px !important; line-height: 1.65 !important; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button { min-height: 58px !important; } html.is-dish-boards #westo-dish-card .menu-add-btn .glass-button-text { font-size: 18px !important; } } @media (min-width: 768px) and (max-width: 991px) and (max-height: 620px) and (orientation: landscape) { html.is-dish-boards #westo-dish-card [data-menu-name] { font-size: 21px !important; overflow-wrap: normal !important; word-break: normal !important; } html.is-dish-boards #westo-dish-card .dish-favorite-button { flex-basis: 42px !important; width: 42px !important; height: 42px !important; } html.is-dish-boards #westo-dish-card .subhead_text:has([data-menu-price]) { gap: 6px !important; padding: 8px 10px !important; } html.is-dish-boards #westo-dish-card .subhead_text [data-menu-price], html.is-dish-boards #westo-dish-card [data-menu-desc] { font-size: 10.5px !important; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button { min-height: 48px !important; } } /* Persian glyphs extend below the Latin baseline. On tablet and desktop the exported heading used a tight clipped line box, cutting dots and terminals. */ @media (min-width: 768px) { html.is-dish-boards #westo-dish-card [data-menu-name] { display: block !important; line-height: 1.3 !important; padding-block: 0.04em 0.14em !important; overflow: visible !important; } } @media (max-width: 430px) { html.is-dish-boards #westo-dish-card.is-shared-dish-card { border-radius: 24px !important; padding: 13px 15px !important; } html.is-dish-boards #westo-dish-card .benefits_max-width { column-gap: 8px !important; row-gap: 7px !important; } html.is-dish-boards #westo-dish-card .margin-bottom.margin-xsmall:has([data-menu-name]) { gap: 8px !important; } html.is-dish-boards #westo-dish-card [data-menu-name] { font-size: clamp(22px, 6vw, 27px) !important; } html.is-dish-boards #westo-dish-card .dish-favorite-button { flex-basis: 44px !important; width: 44px !important; height: 44px !important; } html.is-dish-boards #westo-dish-card .subhead_text:has([data-menu-price]) { gap: 7px !important; padding: 10px 11px !important; } html.is-dish-boards #westo-dish-card .subhead_text [data-menu-price] { font-size: 11px !important; } html.is-dish-boards #westo-dish-card .dish-price-tag { width: 18px !important; height: 18px !important; } html.is-dish-boards #westo-dish-card [data-menu-desc] { font-size: 12px !important; line-height: 1.6 !important; } html.is-dish-boards #westo-dish-card .menu-allergen { gap: 5px 6px !important; } html.is-dish-boards #westo-dish-card .menu-allergen__head strong, html.is-dish-boards #westo-dish-card .menu-allergen__chip { font-size: 11px !important; } html.is-dish-boards #westo-dish-card .menu-allergen__chip { min-height: 23px !important; padding: 3px 7px !important; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button { min-height: 64px !important; } html.is-dish-boards #westo-dish-card .menu-add-btn .glass-button-text { font-size: 18px !important; } } @media (max-width: 360px) { html.is-dish-boards #westo-dish-card.is-shared-dish-card { padding-inline: 12px !important; } html.is-dish-boards #westo-dish-card [data-menu-name] { font-size: 21px !important; } html.is-dish-boards #westo-dish-card .dish-favorite-button { flex-basis: 42px !important; width: 42px !important; height: 42px !important; } html.is-dish-boards #westo-dish-card .subhead_text:has([data-menu-price]) { padding-inline: 9px !important; } html.is-dish-boards #westo-dish-card .dish-price-tag { display: none !important; } html.is-dish-boards #westo-dish-card .menu-allergen__chip { font-size: 10.5px !important; } } html[data-theme='light'].is-dish-boards #westo-dish-card.is-shared-dish-card { --dish-card-bg-top: rgba(248, 246, 240, 0.98); --dish-card-bg-bottom: rgba(238, 238, 232, 0.99); --dish-card-ink: rgba(20, 27, 28, 0.94); --dish-card-muted: rgba(20, 27, 28, 0.68); --dish-card-line: rgba(15, 25, 27, 0.15); box-shadow: 0 20px 58px rgba(36, 48, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; } html[data-theme='light'].is-dish-boards #westo-dish-card .subhead_text:has([data-menu-price]) { color: #141b1c !important; border-color: rgba(15, 25, 27, 0.18) !important; background: rgba(255, 255, 255, 0.85) !important; box-shadow: 0 2px 8px rgba(15, 25, 27, 0.06) !important; } html[data-theme='light'].is-dish-boards #westo-dish-card .dish-favorite-button { color: rgba(20, 27, 28, 0.82) !important; border-color: rgba(15, 25, 27, 0.16) !important; background: rgba(255, 255, 255, 0.32) !important; } html[data-theme='light'].is-dish-boards #westo-dish-card .menu-allergen, html[data-theme='light'].is-dish-boards #westo-dish-card .menu-allergen__head { color: #374151 !important; } html[data-theme='light'].is-dish-boards #westo-dish-card .menu-allergen__head strong { color: #1a2327 !important; } html[data-theme='light'].is-dish-boards #westo-dish-card .menu-allergen__chip { color: #1a2327 !important; border-color: rgba(26, 35, 39, 0.22) !important; background: rgba(255, 255, 255, 0.85) !important; } html[data-theme='light'].is-dish-boards #westo-dish-card .menu-allergen__chip svg { color: #0c555c !important; } @media (prefers-reduced-motion: reduce) { html.is-dish-boards #westo-dish-card .dish-favorite-button, html.is-dish-boards #westo-dish-card .dish-favorite-button svg, html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button { transition: none !important; } } /* ===== END css/westo-dish-card-premium.css ===== */ /* ===== BEGIN css/westo-pwa.css ===== */ /* WESTO installed web app geometry. iOS Home Screen + viewport-fit=cover can report visualViewport/svh without safe-area insets. Browser mode keeps dynamic viewport sizing; standalone mode deliberately uses 100vh and explicitly budgets every safe inset. */ :root { --westo-safe-top: env(safe-area-inset-top, 0px); --westo-safe-right: env(safe-area-inset-right, 0px); --westo-safe-bottom: env(safe-area-inset-bottom, 0px); --westo-safe-left: env(safe-area-inset-left, 0px); --westo-app-height: var(--dl-vv-height, 100dvh); --westo-nav-total-h: calc(var(--v12-nav-h) + var(--westo-safe-top)); } html.is-standalone { --westo-app-height: 100vh; min-height: 100vh; background: var(--prod-bg, #020708); } html.is-standalone body { min-height: 100vh; background-color: var(--prod-bg, #020708); } /* A restored touch focus in iOS must never expose the keyboard-only skip link. */ .dl-skip-link:focus { transform: translateY(calc(-100% - 2rem)) !important; } html[data-input-modality='keyboard'] .dl-skip-link:focus-visible { transform: translateY(0) !important; } html.is-standalone .navbar { box-sizing: border-box !important; min-height: var(--westo-nav-total-h) !important; padding-top: var(--westo-safe-top) !important; padding-left: max(8px, var(--westo-safe-left)) !important; padding-right: max(8px, var(--westo-safe-right)) !important; } html.is-standalone .navbar_content { box-sizing: border-box !important; height: var(--v12-nav-h) !important; min-height: var(--v12-nav-h) !important; } html.is-standalone .navbar_container { min-width: 0 !important; max-width: 100% !important; } html.is-standalone #westo-entrance, html.is-standalone #westo-entrance .eg-shell, html.is-standalone:not(.is-dish-boards) .section.is-gamme, html.is-standalone:not(.is-dish-boards) .carousel_nav { height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; } html.is-standalone #westo-entrance .eg-shell { box-sizing: border-box !important; } html.is-standalone .navbar_menu { height: 100vh !important; max-height: 100vh !important; padding-top: var(--westo-nav-total-h) !important; padding-bottom: max(18px, calc(var(--westo-safe-bottom) + 10px)) !important; box-sizing: border-box !important; } @media (max-width: 991px) { html.is-standalone:not(.is-dish-boards) .carousel_arrow { top: calc(var(--westo-safe-top) + 41vh) !important; } html.is-standalone:not(.is-dish-boards) .hud .icon-scroll_wrapper { top: calc(var(--westo-safe-top) + 52vh) !important; } html.is-standalone.is-dish-boards { --dish-chrome-top: calc(var(--westo-nav-total-h) + 80px); --dish-info-h: clamp(218px, 30vh, 270px); } html.is-standalone.is-dish-boards #westo-dish-catbar.westo-dish-catbar { top: calc(var(--westo-nav-total-h) + 4px) !important; } html.is-standalone.is-dish-boards section.is-benefits .dish-board-media img { height: min(100%, calc(100vh - var(--dish-chrome-top) - var(--dish-card-stack))) !important; } html.is-standalone.is-dish-boards #westo-dish-card.is-shared-dish-card { bottom: max(24px, calc(var(--westo-safe-bottom) + 10px)) !important; } html.is-standalone .qty-modal__card, html.is-standalone .table-drawer__panel, html.is-standalone .cm-detail__card, html.is-standalone .cm-drawer__panel { max-height: calc(100vh - var(--westo-safe-top) - var(--westo-safe-bottom) - 16px) !important; } } @media (max-width: 430px) { html.is-standalone.is-dish-boards { --dish-chrome-top: calc(var(--westo-nav-total-h) + 74px); } html.is-standalone.is-dish-boards .navbar_container { grid-template-columns: minmax(92px, 1fr) minmax(72px, 86px) minmax(70px, 1fr) !important; } html.is-standalone.is-dish-boards .navbar_logo-link { width: min(82px, 21vw) !important; max-width: 82px !important; } } @media (orientation: landscape) and (max-height: 620px) { html.is-standalone.is-dish-boards { /* Use the same separation tokens as the browser layout so the installed app does not tuck the category rail underneath the global header. */ --dish-chrome-top: calc( var(--westo-nav-total-h) + var(--westo-header-cat-gap) + 58px + var(--westo-header-cat-after-gap) ); --dish-info-h: calc(100vh - var(--westo-nav-total-h) - 82px); } html.is-standalone.is-dish-boards #westo-dish-catbar.westo-dish-catbar { top: calc(var(--westo-nav-total-h) + var(--westo-header-cat-gap)) !important; } html.is-standalone.is-dish-boards section.is-benefits .dish-board-media img { height: calc(100vh - var(--dish-chrome-top) - 14px) !important; } html.is-standalone.is-dish-boards #westo-dish-card.is-shared-dish-card { top: calc(var(--dish-chrome-top) + 6px) !important; height: calc(100vh - var(--dish-chrome-top) - var(--westo-safe-bottom) - 18px) !important; } } @media (display-mode: standalone) { :root { --westo-app-height: 100vh; } } /* ===== END css/westo-pwa.css ===== */ /* ===== BEGIN css/westo-landscape-recovery.css ===== */ /* WESTO landscape recovery This is intentionally the last visual layer. Older sheets own different parts of the same scenes; this compact, orientation-only contract makes the navbar, category rails and content stages agree on one vertical budget. Portrait geometry is deliberately outside this file. */ @media screen and (orientation: landscape) and (max-width: 991px) and (max-height: 620px) { :root { --westo-landscape-nav-h: 58px; --westo-landscape-gap: 14px; --westo-landscape-after-gap: 8px; --westo-landscape-cat-h: 58px; --westo-landscape-edge: max(12px, env(safe-area-inset-left, 0px)); } /* Global chrome has its own compact band. Keeping the logo column bounded prevents the left and right controls from squeezing it into the category navigation below. */ .navbar_content { height: var(--westo-landscape-nav-h) !important; min-height: var(--westo-landscape-nav-h) !important; padding-block: 5px !important; padding-inline: max(10px, env(safe-area-inset-left, 0px)) !important; } .navbar_container { grid-template-columns: minmax(0, 1fr) minmax(74px, 112px) minmax(0, 1fr) !important; column-gap: 7px !important; } .navbar_logo-link { width: min(106px, 17vw) !important; min-width: 0 !important; height: 42px !important; } .navbar_sound-wrapper, .navbar_menu-wrapper { gap: 5px !important; } .navbar_table, .westo-back-categories, .navbar_menu-button, #nav-auth-btn { min-height: 46px !important; height: 46px !important; } /* Category index: reserve a small lower dock and a distinct editorial band. The concise hero removes only supporting copy; category navigation and the active dish cue remain visible and reachable. */ html:not(.is-dish-boards):not(.is-entrance-gate) { --v12-nav-h: var(--westo-landscape-nav-h); --v12-hero-dock-h: 58px; --v12-hero-dock-b: 12px; } html:not(.is-dish-boards):not(.is-entrance-gate) .westo-prod-hero-cats { width: min(94vw, 760px) !important; height: var(--v12-hero-dock-h) !important; bottom: var(--v12-hero-dock-b) !important; padding: 4px 6px !important; border-radius: 30px !important; } html:not(.is-dish-boards):not(.is-entrance-gate) .westo-prod-hero-cat { flex-basis: 76px !important; min-width: 76px !important; height: 48px !important; grid-template-columns: 28px 1fr !important; padding: 3px 5px !important; } html:not(.is-dish-boards):not(.is-entrance-gate) .westo-prod-hero-cat img { width: 28px !important; height: 28px !important; } html:not(.is-dish-boards):not(.is-entrance-gate) .westo-prod-hero-cat span { font-size: 7.5px !important; } html:not(.is-dish-boards):not(.is-entrance-gate) .westo-v12-hero-copy { bottom: calc(var(--v12-hero-dock-h) + var(--v12-hero-dock-b) + 10px) !important; width: min(30rem, 56vw) !important; } html:not(.is-dish-boards):not(.is-entrance-gate) .westo-v12-hero-title { margin-top: 3px !important; font-size: clamp(28px, 7vh, 38px) !important; } html:not(.is-dish-boards):not(.is-entrance-gate) .westo-v12-hero-desc, html:not(.is-dish-boards):not(.is-entrance-gate) .westo-v12-hero-hint { display: none !important; } html:not(.is-dish-boards):not(.is-entrance-gate) .westo-v12-hero-rail { width: min(34rem, 48vw) !important; height: 12px !important; margin-top: 4px !important; } /* Dish board: a stable three-column composition. The rail, food and card receive non-overlapping columns calculated from the same chrome height. */ html.is-dish-boards { --v12-nav-h: var(--westo-landscape-nav-h); --menu-nav-h: var(--westo-landscape-nav-h); --westo-header-cat-gap: var(--westo-landscape-gap); --westo-header-cat-after-gap: var(--westo-landscape-after-gap); --menu-rail-w: 78px; --menu-rail-gap: 10px; --westo-landscape-card-w: clamp(220px, 34vw, 320px); --dish-chrome-top: calc( var(--westo-landscape-nav-h) + var(--westo-landscape-gap) + var(--westo-landscape-cat-h) + var(--westo-landscape-after-gap) ); --dish-info-h: calc(100dvh - var(--dish-chrome-top) - 20px); } html.is-standalone.is-dish-boards { --dish-chrome-top: calc( var(--westo-nav-total-h) + var(--westo-landscape-gap) + var(--westo-landscape-cat-h) + var(--westo-landscape-after-gap) ); } html.is-dish-boards #westo-dish-catbar.westo-dish-catbar { top: calc(var(--v12-nav-h) + var(--westo-landscape-gap)) !important; width: min(94vw, 900px) !important; height: var(--westo-landscape-cat-h) !important; min-height: var(--westo-landscape-cat-h) !important; padding: 5px !important; border-radius: 30px !important; } html.is-standalone.is-dish-boards #westo-dish-catbar.westo-dish-catbar { top: calc(var(--westo-nav-total-h) + var(--westo-landscape-gap)) !important; } html.is-dish-boards #westo-dish-catbar .westo-dish-catbar__chip { flex-basis: 70px !important; min-width: 70px !important; height: 48px !important; padding: 3px 5px !important; } html.is-dish-boards #westo-dish-catbar .westo-dish-catbar__icon { width: 28px !important; height: 28px !important; flex-basis: 28px !important; } html.is-dish-boards #westo-dish-catbar .westo-dish-catbar__label { font-size: 7.5px !important; max-width: 62px !important; } html.is-dish-boards .benefits_nav.is-menu-rail { top: calc(var(--dish-chrome-top) + 4px) !important; right: max(6px, env(safe-area-inset-right, 0px)) !important; bottom: 10px !important; width: var(--menu-rail-w) !important; padding: 4px 3px !important; gap: 3px !important; border-radius: 20px !important; } html.is-dish-boards .benefits_nav.is-menu-rail .benefits_icon-wrapper { width: 68px !important; min-height: 48px !important; padding: 3px !important; gap: 1px !important; } html.is-dish-boards .benefits_nav.is-menu-rail .benefits_icon { width: 38px !important; height: 38px !important; flex-basis: 38px !important; } html.is-dish-boards .benefits_nav.is-menu-rail .benefits_rail-label { display: none !important; } html.is-dish-boards section.is-benefits .dish-board-media { position: fixed !important; top: var(--dish-chrome-top) !important; left: calc(var(--westo-landscape-card-w) + 30px) !important; right: calc(var(--menu-rail-w) + var(--menu-rail-gap) + 8px) !important; bottom: 10px !important; overflow: hidden !important; } html.is-dish-boards section.is-benefits .dish-board-media img, html.is-standalone.is-dish-boards section.is-benefits .dish-board-media img { width: min(100%, 48vw) !important; height: min(100%, calc(100dvh - var(--dish-chrome-top) - 18px)) !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } html.is-dish-boards #westo-dish-card.is-shared-dish-card, html.is-standalone.is-dish-boards #westo-dish-card.is-shared-dish-card { left: var(--westo-landscape-edge) !important; right: auto !important; top: calc(var(--dish-chrome-top) + 4px) !important; bottom: auto !important; width: var(--westo-landscape-card-w) !important; height: var(--dish-info-h) !important; min-height: 0 !important; max-height: var(--dish-info-h) !important; padding: 10px 12px !important; border-radius: 22px !important; overflow: hidden !important; } html.is-dish-boards #westo-dish-card .benefits_max-width { column-gap: 7px !important; row-gap: 4px !important; } html.is-dish-boards #westo-dish-card .subhead_text:has([data-menu-price]) { gap: 5px !important; padding: 7px 8px !important; border-radius: 12px !important; } html.is-dish-boards #westo-dish-card .subhead_text [data-menu-price], html.is-dish-boards #westo-dish-card [data-menu-desc] { font-size: 10px !important; } html.is-dish-boards #westo-dish-card [data-menu-name] { font-size: clamp(18px, 5vh, 22px) !important; line-height: 1.25 !important; } html.is-dish-boards #westo-dish-card .dish-favorite-button { flex-basis: 38px !important; width: 38px !important; height: 38px !important; } html.is-dish-boards #westo-dish-card .dish-favorite-button svg { width: 18px !important; height: 18px !important; } html.is-dish-boards #westo-dish-card .menu-allergen__head, html.is-dish-boards #westo-dish-card .menu-allergen__chip { font-size: 10px !important; } html.is-dish-boards #westo-dish-card .menu-allergen__chip { min-height: 21px !important; padding: 3px 6px !important; } html.is-dish-boards #westo-dish-card .menu-add-btn.glass-button { min-height: 46px !important; } html.is-dish-boards #westo-dish-card .menu-add-btn .glass-button-text { font-size: 16px !important; } /* Entrance with a promo deck becomes a two-column editorial composition. It keeps all existing nodes, actions and swipe behavior; only their grid seats change so the deck never floats over branding or the CTA. */ #westo-entrance .eg-shell { grid-template-rows: 48px minmax(0, 1fr) 48px !important; gap: 8px !important; padding: calc(7px + var(--eg-safe-t)) 14px calc(7px + var(--eg-safe-b)) !important; } #westo-entrance .eg-top, #westo-entrance .eg-foot { height: 48px !important; min-height: 48px !important; } #westo-entrance .eg-top > .eg-glass-btn:first-child, #westo-entrance #eg-site-menu.westo-menu-trigger, #westo-entrance .eg-corner, #westo-entrance .eg-dock { min-height: 44px !important; height: 44px !important; } #westo-entrance .eg-dock__label, #westo-entrance .eg-corner__label { display: none !important; } #westo-entrance .eg-mid { overflow: hidden !important; } #westo-entrance .eg-card { width: min(92vw, 760px) !important; min-height: 0 !important; height: 100% !important; max-height: 100% !important; padding: 10px 16px !important; border-radius: 25px !important; } #westo-entrance:not(.has-eg-promo) .eg-logo-stage { grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; justify-self: center !important; width: 68px !important; max-height: 92px !important; } #westo-entrance:not(.has-eg-promo) .eg-card { display: grid !important; grid-template-columns: minmax(170px, 0.72fr) minmax(260px, 1.28fr) !important; grid-template-rows: minmax(0, 1fr) auto !important; align-items: center !important; column-gap: clamp(14px, 2.6vw, 28px) !important; row-gap: 6px !important; } #westo-entrance:not(.has-eg-promo) .eg-brand-wordmark-img { width: min(190px, 34vw) !important; max-height: 38px !important; } #westo-entrance:not(.has-eg-promo) .eg-brand-copy { grid-column: 1 !important; grid-row: 1 !important; align-self: end !important; justify-self: center !important; margin: 0 !important; } #westo-entrance:not(.has-eg-promo) .eg-experience { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; width: min(100%, 430px) !important; min-height: 58px !important; margin: 0 !important; } #westo-entrance:not(.has-eg-promo) .eg-cta-wrap { grid-column: 1 / 3 !important; grid-row: 2 !important; width: 100% !important; margin: 0 !important; padding-top: 0 !important; } #westo-entrance:not(.has-eg-promo) .eg-cta { min-height: 44px !important; height: 44px !important; font-size: 12px !important; } #westo-entrance:not(.has-eg-promo) .eg-step-label, #westo-entrance:not(.has-eg-promo) .eg-quote { display: none !important; } #westo-entrance:not(.has-eg-promo) .eg-step-icon { width: 36px !important; height: 36px !important; } #westo-entrance.has-eg-promo .eg-card { display: grid !important; grid-template-columns: minmax(185px, 0.72fr) minmax(260px, 1.28fr) !important; grid-template-rows: auto auto auto minmax(42px, 1fr) auto !important; align-items: center !important; column-gap: clamp(14px, 2.6vw, 28px) !important; row-gap: 3px !important; text-align: center !important; } #westo-entrance.has-eg-promo .eg-logo-stage { grid-column: 1 !important; grid-row: 1 !important; width: 58px !important; max-height: 76px !important; margin: 0 auto !important; } #westo-entrance.has-eg-promo .eg-brand-copy { grid-column: 1 !important; grid-row: 2 !important; margin-top: 0 !important; } #westo-entrance.has-eg-promo .eg-status { grid-column: 1 !important; grid-row: 3 !important; margin: 2px auto !important; min-height: 30px !important; padding: 3px 8px !important; font-size: 9px !important; } #westo-entrance.has-eg-promo .eg-experience { grid-column: 1 !important; grid-row: 4 !important; min-height: 42px !important; margin: 0 !important; gap: 2px !important; } #westo-entrance.has-eg-promo .eg-cta-wrap { grid-column: 1 !important; grid-row: 5 !important; margin: 0 !important; padding-top: 4px !important; } #westo-entrance.has-eg-promo .eg-promo { grid-column: 2 !important; grid-row: 1 / 6 !important; align-self: center !important; width: 100% !important; margin: 0 !important; --eg-promo-h: min(190px, 48vh); } #westo-entrance.has-eg-promo .eg-brand-wordmark-img { width: min(150px, 20vw) !important; max-height: 30px !important; } #westo-entrance.has-eg-promo .eg-tagline { margin-top: 2px !important; font-size: 9px !important; } #westo-entrance.has-eg-promo .eg-subtitle, #westo-entrance.has-eg-promo .eg-experience__lead, #westo-entrance.has-eg-promo .eg-step-label, #westo-entrance.has-eg-promo .eg-quote { display: none !important; } #westo-entrance.has-eg-promo .eg-steps-row { min-height: 38px !important; gap: 8px !important; } #westo-entrance.has-eg-promo .eg-steps-row::before { top: 18px !important; inset-inline: 24px !important; } #westo-entrance.has-eg-promo .eg-step-icon { width: 36px !important; height: 36px !important; flex-basis: 36px !important; } #westo-entrance.has-eg-promo .eg-cta { min-height: 44px !important; height: 44px !important; font-size: 12px !important; } #westo-entrance.has-eg-promo .eg-promo__deck { height: calc(var(--eg-promo-h) + 10px) !important; padding-top: 10px !important; } #westo-entrance.has-eg-promo .eg-promo__card { inset-block-start: 10px !important; border-radius: 18px !important; } #westo-entrance.has-eg-promo .eg-promo__pagination { min-height: 12px !important; margin-top: 2px !important; } } /* Narrow landscape phones cannot keep a two-column entrance card readable. The deck remains part of the flow, while its visual size and copy are reduced rather than allowing a horizontal overflow. */ @media screen and (orientation: landscape) and (max-width: 700px) and (max-height: 430px) { #westo-entrance.has-eg-promo .eg-card { grid-template-columns: minmax(160px, 0.72fr) minmax(210px, 1.28fr) !important; column-gap: 10px !important; padding-inline: 10px !important; } #westo-entrance.has-eg-promo .eg-promo { --eg-promo-h: min(150px, 44vh); } #westo-entrance.has-eg-promo .eg-logo-stage { width: 48px !important; max-height: 64px !important; } #westo-entrance.has-eg-promo .eg-status-meta, #westo-entrance.has-eg-promo .eg-status-loc { display: none !important; } } /* Entrance promo geometry reconciliation. Keep the banner controls attached to the visual deck so they never consume a grid row or collide with the primary CTA at short desktop heights. The brand tagline keeps a stable readable measure and is centered in its copy column at every breakpoint. */ #westo-entrance .eg-promo__pagination { position: absolute !important; inset-inline: 0 !important; inset-block-end: 8px !important; z-index: 40 !important; width: max-content !important; max-width: calc(100% - 24px) !important; min-height: 16px !important; margin: 0 auto !important; padding: 3px 8px !important; gap: 7px !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 999px !important; background: rgba(3,13,16,.46) !important; box-shadow: 0 4px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10) !important; -webkit-backdrop-filter: blur(10px) saturate(130%) !important; backdrop-filter: blur(10px) saturate(130%) !important; pointer-events: auto !important; } html[data-theme='light'] #westo-entrance .eg-promo__pagination { border-color: rgba(32,67,64,.16) !important; background: rgba(249,252,249,.72) !important; box-shadow: 0 4px 14px rgba(47,67,62,.12), inset 0 1px 0 rgba(255,255,255,.84) !important; } #westo-entrance .eg-tagline { width: min(100%, 24rem) !important; max-width: 24rem !important; margin-inline: auto !important; text-align: center !important; box-sizing: border-box !important; } /* ===== END css/westo-landscape-recovery.css ===== */