@charset "UTF-8"; :root { --base: 1.25vw; --font-big: 3rem; --font-medium: 1.35rem; --font-body-lg: 1rem; --font-body: .85rem; --font-small: .75rem; --font-tiny: .25rem; --huge: 8rem; --big: 4rem; --medium: 2rem; --body-lg: 1.125rem; --body: 1rem; --small: .75rem; --tiny: .25rem; --gutter: 1rem; --text-indent: 4.65rem; --antara-white: #FCFCFC; --antara-earth: #4A382B; --antara-earth-25: #4A382B40; --antara-earth-50: #4A382B80; --antara-earth-dark: #3A2D27; --antara-kaya: #A08C6D; --antara-bone: #E0DDD8; --antara-bone-25: #E0DDD840; --antara-bone-50: #E0DDD880; --antara-bone-75: #E0DDD8BF; --antara-stone: #65665C; --antara-stone-5: #65665C0D; --antara-stone-25: #65665C40; --antara-kraft: #A28064; --keyline: .075rem; --keyline-thin: .06rem; --keyline-svg: .06rem; --divider: dotted var(--keyline-thin) var(--antara-earth-50); --divider-menu: dotted var(--keyline) var(--antara-bone); --divider-form: dotted var(--keyline) var(--antara-earth); --divider-list: dotted var(--keyline) var(--antara-earth-25); --divider-events: dotted var(--keyline) var(--antara-earth); --divider-events-rev: dotted var(--keyline) var(--antara-kaya); --drop-shadow-header: var(--antara-stone-25); --drop-shadow-menus: var(--antara-bone); --box-shadow-header: 0 0 var(--medium) 0 var(--drop-shadow-header); --box-shadow-menus: 0 0 var(--medium) 0 var(--drop-shadow-menus); --curve: cubic-bezier(0.25, 0, 0.5, 1); --curve-img: cubic-bezier(0.86, 0.07, 0.07, 0.96); --curve-hero: ease-out; --transition-2: .2s var(--curve); --transition-4: .4s var(--curve); --transition-2-img: .2s var(--curve-img); --transition-4-img: .4s var(--curve-img); --transition-2-hero: .2s var(--curve-hero); --transition-4-hero: .4s var(--curve-hero); --transition-menu: 1.2s var(--curve); --hover-opacity: .5; } @media (max-width: 960px) { :root { --base: 2.5vw; } } @media (max-width: 540px) { :root { --base: 4vw; --font-tiny: .75rem; --body-lg: 1.25rem; --huge: 3rem; --small: 1rem; --tiny: .75rem; --keyline-thin: .075rem; --keyline-svg: .075rem; } } /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } @font-face { font-family: "ROM Medium"; src: url(/assets/fonts/ABCROM-Medium.woff2) format("woff2"), url(/assets/fonts/ABCROM-Medium.woff) format("woff"); } @font-face { font-family: "ROM Mono Regular"; src: url(/assets/fonts/ABCROMMono-Regular.woff2) format("woff2"), url(/assets/fontsABCROMMono-Regular.woff) format("woff"); } @font-face { font-family: "ROM Mono Regular"; src: url(/assets/fonts/ABCROMMono-RegularItalic.woff2) format("woff2"), url(/assets/fonts/ABCROMMono-RegularItalic.woff) format("woff"); font-style: italic; } @font-face { font-family: "GT Alpina Typewriter VAR"; src: url(/assets/fonts/GT-Alpina-Typewriter-VAR.woff2) format("woff2 supports variations"), url(/assets/fonts/GT-Alpina-Typewriter-VAR.woff2) format("woff2-variations"), url(/assets/fonts/GT-Alpina-Typewriter-VAR.ttf) format("truetype-variations"); font-weight: 270 340; } @font-face { font-family: "GT Alpina Typewriter Fallback"; src: url(/assets/fonts/GT-Alpina-Typewriter-Regular.woff2) format("woff2"), url(/assets/fonts/GT-Alpina-Typewriter-Regular.woff) format("woff"); font-weight: 340; } @font-face { font-family: "GT Alpina Typewriter Fallback"; src: url(/assets/fonts/GT-Alpina-Typewriter-Light.woff2) format("woff2"), url(/assets/fonts/GT-Alpina-Typewriter-Light.woff) format("woff"); font-weight: 270; } @font-face { font-family: "GT Alpina Typewriter VAR"; src: url(/assets/fonts/GT-Alpina-Typewriter-Italic-VAR.woff2) format("woff2 supports variations"), url(/assets/fonts/GT-Alpina-Typewriter-Italic-VAR.woff2) format("woff2-variations"), url(/assets/fonts/GT-Alpina-Typewriter-Italic-VAR.ttf) format("truetype-variations"); font-weight: 270 370; font-style: italic; } @font-face { font-family: "GT Alpina Typewriter Fallback"; src: url(/assets/fonts/GT-Alpina-Typewriter-Regular-Italic.woff2) format("woff2"), url(/assets/fonts/GT-Alpina-Typewriter-Regular-Italic.woff) format("woff"); font-weight: 340; font-style: italic; } @font-face { font-family: "GT Alpina Typewriter Fallback"; src: url(/assets/fonts/GT-Alpina-Typewriter-Light-Italic.woff2) format("woff2"), url(/assets/fonts/GT-Alpina-Typewriter-Light-Italic.woff) format("woff"); font-weight: 270; font-style: italic; } h1, h1 p { font-family: "ROM Medium", Arial, Helvetica, sans-serif; font-size: var(--font-medium); line-height: 115%; } h1.lg, h1 p.lg { font-size: var(--font-big); } @media (max-width: 540px) { h1.lg, h1 p.lg { font-size: calc(1.25 * var(--font-medium)); } } @media (max-width: 540px) { h1, h1 p { font-size: var(--font-body-lg); line-height: 126%; } } h2, h2 p { font-family: "GT Alpina Typewriter VAR", "GT Alpina Typewriter Fallback", Courier, monospace; font-variation-settings: "wght" 340; font-variant-numeric: oldstyle-nums; font-variant-caps: all-small-caps; font-synthesis: none; font-size: var(--font-body); line-height: 132%; text-wrap: pretty; } h3, strong, h3 p { font-family: "ROM Medium", Arial, Helvetica, sans-serif; font-size: var(--font-body-lg); line-height: 122%; text-wrap: pretty; } body, p { font-family: "ROM Mono Regular", Courier, monospace; font-size: var(--font-body); font-variant-numeric: diagonal-fractions; line-height: 134%; text-wrap: pretty; } @media (max-width: 540px) { body, p { line-height: 148%; } } h4, li, h4 p { font-family: "GT Alpina Typewriter VAR", "GT Alpina Typewriter Fallback", Courier, monospace; font-variation-settings: "wght" 340; font-variant-numeric: oldstyle-nums; font-synthesis: none; font-size: var(--font-body); line-height: 136%; text-wrap: pretty; } figcaption, figcaption p { font-family: "ROM Mono Regular", Courier, monospace; font-size: var(--font-small); line-height: 143%; text-wrap: balance; } figcaption a, figcaption p a { text-decoration: underline; } @media (max-width: 540px) { figcaption, figcaption p { font-size: var(--font-tiny); } } i { font-style: italic; } .sc { font-variant-caps: all-small-caps; } header .links h2, #contact h2, .list .email span { letter-spacing: -0.045em; font-variation-settings: "wght" 370; } html { scroll-behavior: smooth; font-size: var(--base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: var(--antara-bone); background-color: var(--antara-white); color: var(--antara-earth); } body.no-scroll { overflow: hidden; } p:not(:first-child) { padding-top: var(--small); } @media (min-width: 960px) { a:hover { opacity: var(--hover-opacity); } } hr { border-bottom: var(--divider); margin: var(--small) 0; } .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } strong { display: inline; margin-bottom: var(--tiny); } .hide { display: none !important; } *[data-ratio="3/2"] { aspect-ratio: 3/2; } @media (max-width: 540px) { *[data-ratio="3/2"] { aspect-ratio: 4/3; } } *[data-ratio="1/1"] { aspect-ratio: 1/1; } *[data-ratio="4/5"] { aspect-ratio: 4/5; } *[data-ratio="16/9"] { aspect-ratio: 16/9; } @media (max-width: 540px) { *[data-ratio="16/9"] { aspect-ratio: 4/3; } } img { width: 100%; height: auto; height: -webkit-fill-available; object-fit: cover; } img[data-lazyload][data-srcset] { filter: blur(var(--small)); } @media (prefers-reduced-motion: no-preference) { img[data-lazyload] { transition: var(--transition-4-img); transition-property: filter, transform; /* Hint browser at change for better performance */ will-change: filter, transform; transition-delay: 0.15s; } } :root { --gc1-4: 1/4; --gc1-5: 1/5; --gc1-7: 1/7; --gc3-7: 3/7; --gc4-7: 4/7; --gc5-7: 5/7; --gc2-8: 2/8; --gc2-12: 2/12; --gc1-9: 1/9; --gc5-9: 5/9; --gc7-9: 7/9; --gc4-10: 4/10; --gc7-10: 7/10; --gc3-11: 3/11; --gc1-13: 1/13; --gc7-13: 7/13; --gc10-13: 10/13; --gc9-13: 9/13; --sgc1-6: 1/6; --sgc2-8: 2/8; --sgc6-7: 6/7; --sgc1-7: 1/7; --sgc5-9: 5/9; } @media (max-width: 960px) { :root { --gc1-5: 1/9; --gc5-7: 1/9; --gc3-11: 2/12; --gc1-4: 1/7; --gc1-7: 2/12; --gc4-7: 7/13; --gc7-10: 1/7; --gc7-13: 2/12; --gc10-13: 7/13; --gc5-9: 4/10; } :root .address { --gc7-13: 7/13; } } @media (max-width: 540px) { :root { --gc2-8: 1/9; --gc1-9: 1/11; --gc5-9: 3/11; --gc3-11: 1/13; --gc1-7: 1/13; --gc9-13: 1/13; --gc1-4: 1/13; --gc4-7: 1/13; --gc4-10: 1/13; --gc7-10: 1/13; --gc7-13: 1/13; --gc10-13: 1/13; --sgc5-9: 1/11; } } .grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); padding: var(--gutter); } @media (max-width: 540px) { .grid { padding: var(--gutter) var(--gutter) var(--body-lg) var(--gutter); } } .subgrid-8 { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); } @media (max-width: 540px) { .subgrid-8 { grid-template-columns: repeat(8, 1fr); } } .subgrid-6 { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--gutter); } header #popUp .container { grid-column: var(--gc3-11); } header #popUp .container .heading { grid-column: var(--gc1-9); } header #popUp .container nav { grid-column: var(--gc1-9); } header #popUp .container nav a.p { grid-column: var(--gc1-9); } header #popUp .container nav a.a { grid-column: var(--gc1-9); } header #popUp .container nav a.e { grid-column: var(--gc1-9); } header #popUp .container .links { grid-column: var(--sgc5-9); } main section#announcement .container { grid-column: var(--gc3-11); } main section#announcement .container .heading, main section#announcement .container .text, main section#announcement .container a { grid-column: var(--sgc2-8); } main section.hero .logo { grid-column: var(--gc5-9); } main section.hero .address { grid-column: var(--gc7-13); } main section.hero .intro { grid-column: var(--gc1-13); } main section.about .section .container { grid-column: var(--gc3-11); } main section.about .section .container .carousel .splide { grid-column: var(--gc2-8); } main section.about .section .container .carousel .splide[data-ratio="4/5"], main section.about .section .container .carousel .splide[data-ratio="1/1"] { grid-column: var(--gc3-7); } main section#menus .menu .heading, main section#menus .menu-new .heading { grid-column: var(--gc4-10); text-align: center; } main section#menus .menu .image, main section#menus .menu-new .image { grid-column: var(--gc1-7); } @media (max-width: 960px) { main section#menus .menu .image, main section#menus .menu-new .image { display: none; } } main section#menus .menu .items, main section#menus .menu-new .items { grid-column: var(--gc4-10); } main section#menus .menu .items .lhs, main section#menus .menu-new .items .lhs { grid-column: var(--gc1-7); } main section#menus .menu .items .rhs, main section#menus .menu-new .items .rhs { grid-column: var(--gc7-13); } main section#menus .menu .items .item, main section#menus .menu-new .items .item { grid-column: var(--sgc1-7); } main section#menus .menu .items .item .title, main section#menus .menu-new .items .item .title { grid-column: var(--sgc1-7); } main section#menus .menu .items .item .name, main section#menus .menu .items .item .desc, main section#menus .menu-new .items .item .name, main section#menus .menu-new .items .item .desc { grid-column: var(--sgc1-6); } main section#menus .menu .items .item .name.no-price, main section#menus .menu .items .item .desc.no-price, main section#menus .menu-new .items .item .name.no-price, main section#menus .menu-new .items .item .desc.no-price { grid-column: var(--sgc1-7); } main section#menus .menu .items .item .price, main section#menus .menu-new .items .item .price { grid-column: var(--sgc6-7); text-align: right; } main section#menus .menu .note, main section#menus .menu-new .note { grid-column: var(--gc1-13); } main section.events .container { grid-column: var(--gc3-11); } main section.events .container .event a { grid-column: var(--gc1-9); } main section.events .container .event a .date, main section.events .container .event a .title { grid-column: var(--gc1-5); } main section.events .container .event a .location { grid-column: var(--gc5-7); } main section.events .container .event a .more { grid-column: var(--gc7-9); } main section#gallery .row { grid-column: var(--gc2-12); gap: var(--gutter); } @media (max-width: 960px) { main section#gallery .row { grid-column: var(--gc3-11); } } @media (min-width: 1601px) { main section#gallery .row { grid-column: var(--gc3-11); } } main section.content .block.gallery { grid-column: var(--gc1-13); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); } main section.content .block.gallery .row { grid-column: var(--gc2-12); gap: var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); } main section.content .block.gallery .row figure { grid-column: auto/span 3; } @media (max-width: 960px) { main section.content .block.gallery .row { grid-column: var(--gc3-11); } main section.content .block.gallery .row figure { grid-column: auto/span 6; } } @media (min-width: 1601px) { main section.content .block.gallery .row { grid-column: var(--gc3-11); } } main section#open-hours .heading, main section#open-hours .hours, main section#open-hours .note { grid-column: var(--gc3-11); } main section#newsletter .heading, main section#newsletter form { grid-column: var(--gc1-13); } main section#newsletter .heading .fields .field-1, main section#newsletter form .fields .field-1 { grid-column: var(--gc1-4); } main section#newsletter .heading .fields .field-2, main section#newsletter form .fields .field-2 { grid-column: var(--gc4-7); } main section#newsletter .heading .fields .field-3, main section#newsletter form .fields .field-3 { grid-column: var(--gc7-10); } main section#newsletter .heading .fields #submit, main section#newsletter form .fields #submit { grid-column: var(--gc10-13); } main section#newsletter .heading .fields .responses, main section#newsletter form .fields .responses { grid-column: auto/span 4; } body:not(.home) main section.content .block.image, body:not(.home) main section.content .block.heading, body:not(.home) main section.content .block.text { grid-column: var(--gc3-11); } body:not(.home) main section.content .block.image { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); } body:not(.home) main section.content .block.image figure { grid-column: var(--gc2-8); } body:not(.home) main section.content .block.image figure[data-ratio="4/5"], body:not(.home) main section.content .block.image figure[data-ratio="1/1"] { grid-column: var(--gc3-7); } body:not(.home) main section.content .block.image.full-width { grid-column: var(--gc1-13); } body:not(.home) main section.content .block.image.full-width figure { grid-column: var(--gc1-9); } body:not(.home) main section.intro .text { grid-column: var(--gc3-11); } body:not(.home) main section.list .heading, body:not(.home) main section.list ol, body:not(.home) main section.list .email { grid-column: var(--gc3-11); } body:not(.home) main section.list .heading a .role, body:not(.home) main section.list ol a .role, body:not(.home) main section.list .email a .role { grid-column: var(--gc1-4); } @media (max-width: 540px) { body:not(.home) main section.list .heading a .role, body:not(.home) main section.list ol a .role, body:not(.home) main section.list .email a .role { grid-column: 1/6; } } body:not(.home) main section.list .heading a .note, body:not(.home) main section.list ol a .note, body:not(.home) main section.list .email a .note { grid-column: var(--gc4-7); } body:not(.home) main section.list .heading a .status, body:not(.home) main section.list ol a .status, body:not(.home) main section.list .email a .status { grid-column: var(--gc7-9); } @media (max-width: 540px) { body:not(.home) main section.list .heading a .status, body:not(.home) main section.list ol a .status, body:not(.home) main section.list .email a .status { grid-column: 6/9; } } body:not(.home) main section.form .container { grid-column: 3/11; } @media (max-width: 540px) { body:not(.home) main section.form .container { grid-column: 1/13; } } footer .footer-graphic { grid-column: var(--gc1-13); } footer #contact { grid-column: var(--gc1-7); } @media (max-width: 960px) { footer #contact { grid-column: var(--gc1-5); } } @media (max-width: 540px) { footer #contact { grid-column: var(--gc1-13); } } footer .copyright { grid-column: var(--gc9-13); } header { position: absolute; z-index: 100; } header #fixed { position: fixed; width: 100%; display: flex; align-items: center; z-index: 80; } header #fixed button, header #fixed nav { margin: var(--small); background-color: var(--antara-bone-75); color: var(--antara-earth-dark); border-radius: var(--small); box-shadow: var(--box-shadow-header); backdrop-filter: blur(var(--tiny)) opacity(1); -webkit-backdrop-filter: blur(var(--tiny)) opacity(1); } @media (min-width: 960px) { header #fixed button:hover, header #fixed nav:hover { background-color: var(--antara-bone); } } header #fixed button { padding: var(--small) var(--tiny); width: calc(var(--big) + var(--small)); text-align: center; cursor: pointer; } header #fixed nav { padding: var(--small) var(--body); margin-left: initial; display: flex; width: 100%; justify-content: space-between; transition: var(--transition-4); transition-property: opacity, transform; } header #fixed nav a { padding: 0 var(--body); } @media (max-width: 960px) { header #fixed nav.t-0 a, header #fixed nav.t-1 a, header #fixed nav.t-2 a, header #fixed nav.t-3 a, header #fixed nav.t-4 a, header #fixed nav.t-5 a, header #fixed nav.t-6 a, header #fixed nav.t-7 a { display: none; } header #fixed nav.t-0 a:nth-child(1), header #fixed nav.t-1 a:nth-child(2), header #fixed nav.t-2 a:nth-child(3), header #fixed nav.t-3 a:nth-child(4), header #fixed nav.t-4 a:nth-child(5), header #fixed nav.t-5 a:nth-child(6), header #fixed nav.t-6 a:nth-child(7), header #fixed nav.t-7 a:nth-child(8) { display: initial; } } @media (max-width: 540px) { header #fixed nav.t-0 a:nth-child(1), header #fixed nav.t-1 a:nth-child(2), header #fixed nav.t-2 a:nth-child(3), header #fixed nav.t-3 a:nth-child(4), header #fixed nav.t-4 a:nth-child(5), header #fixed nav.t-5 a:nth-child(6), header #fixed nav.t-6 a:nth-child(7), header #fixed nav.t-7 a:nth-child(8) { display: none; } header #fixed nav.m-0 a, header #fixed nav.m-1 a, header #fixed nav.m-2 a, header #fixed nav.m-3 a, header #fixed nav.m-4 a, header #fixed nav.m-5 a, header #fixed nav.m-6 a, header #fixed nav.m-7 a { display: none; } header #fixed nav.m-0 a:nth-child(1), header #fixed nav.m-1 a:nth-child(2), header #fixed nav.m-2 a:nth-child(3), header #fixed nav.m-3 a:nth-child(4), header #fixed nav.m-4 a:nth-child(5), header #fixed nav.m-5 a:nth-child(6), header #fixed nav.m-6 a:nth-child(7), header #fixed nav.m-6 a:nth-child(8) { display: initial; } } header #fixed nav.is-hidden { opacity: 0; transform: translateY(calc(var(--medium) * -2)); } header #popUp { position: fixed; background-color: var(--antara-stone); color: var(--antara-bone); top: 0; left: 0; width: 100vw; height: 100dvh; z-index: 90; opacity: 1; pointer-events: all; } header #popUp .container { margin: auto 0; } header #popUp .container .heading { text-align: center; margin: var(--small) auto var(--big) auto; } header #popUp .container .heading a { display: flex; justify-content: center; } @media (min-width: 960px) { header #popUp .container .heading a:hover { opacity: 1; } } header #popUp .container .heading a .symbol { width: var(--font-big); overflow: visible; } header #popUp .container .heading a .symbol svg { width: 100%; height: auto; fill: var(--antara-bone); } @media (min-width: 960px) { header #popUp .container .heading a .symbol svg:hover { fill: var(--antara-kaya); } } header #popUp .container nav { width: 100%; max-height: 60vh; overflow: scroll; position: relative; } @media (min-width: 960px) { header #popUp .container nav:hover h1 { opacity: 0.25; } } header #popUp .container nav a { padding: var(--small) 0 var(--tiny) 0; border-bottom: var(--divider-menu); display: flex; justify-content: space-between; } header #popUp .container nav a h1 { transition: var(--transition-2); transition-property: padding-left; } @media (max-width: 540px) { header #popUp .container nav a { padding: var(--font-tiny) 0 calc(var(--font-tiny) / 1.72) 0; } } @media (min-width: 960px) { header #popUp .container nav a:hover { opacity: 1; } header #popUp .container nav a:hover h1 { opacity: 1; } } header #popUp .container nav a.a { padding-left: var(--body-lg); } @media (min-width: 960px) { header #popUp .container nav a.a:hover h1 { padding-left: var(--small); } } header #popUp .container nav a.e { padding-left: calc(var(--body-lg) * 2); padding-right: var(--body-lg); } @media (min-width: 960px) { header #popUp .container nav a.e:hover::after { content: "↗"; height: 0; } header #popUp .container nav a.e:hover h1 { padding-left: initial; } } @media (max-width: 540px) { header #popUp .container nav a.e { padding-left: var(--body-lg); } header #popUp .container nav a.e::after { content: "↗"; height: 0; } } header #popUp .container nav a:last-of-type { margin-bottom: var(--big); } header #popUp .container nav .overlay { width: 100%; height: var(--big); position: absolute; bottom: 0; left: 0; pointer-events: none; } header #popUp .container nav .overlay .inner { background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 4%, var(--antara-stone) 99%, var(--antara-stone) 100%); width: 65vw; height: var(--big); position: fixed; } @media (max-width: 960px) { header #popUp .container nav .overlay .inner { width: 80vw; } } @media (max-width: 540px) { header #popUp .container nav .overlay .inner { width: 92vw; } } header #popUp .container .links { text-align: center; margin-top: var(--medium); display: flex; align-items: flex-end; justify-content: center; column-gap: var(--tiny); } header #popUp .container .links a h4 { display: inline-flex; } header #popUp .container .links a:not(:last-child)::after { content: ", "; height: 0; display: inline-flex; } header #popUp .container .links a.site-credit h4:hover:after { content: "John Szetho"; } header #popUp .container .links a.site-credit h4:hover span { display: none; } header #popUp:not(.show) { opacity: 0; pointer-events: none; } header #popUp.show nav { pointer-events: all; } header #popUp.show nav a { pointer-events: all; } @media (max-width: 540px) { header #popUp .container { margin: initial; } header #popUp .container nav { max-height: 50vh; } } main section#announcement { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: var(--antara-bone-50); backdrop-filter: blur(var(--tiny)) opacity(1); -webkit-backdrop-filter: blur(var(--tiny)) opacity(1); } main section#announcement .container { margin: auto 0; padding: var(--big) 0; border-radius: var(--small); overflow: hidden; position: relative; background-color: var(--antara-white); box-shadow: var(--box-shadow-header); } main section#announcement .container #close { position: absolute; top: 0; right: 0; padding: var(--body); cursor: pointer; } main section#announcement .container #close h2 { font-size: var(--font-medium); line-height: 60%; } main section#announcement .container .heading:not(:last-child), main section#announcement .container .text:not(:last-child), main section#announcement .container a:not(:last-child) { margin-bottom: var(--big); } main section#announcement .container .heading, main section#announcement .container a { text-align: center; } main section#announcement .container a { display: inline; margin-left: auto; margin-right: auto; } main section#announcement .container a h4 { padding: var(--tiny) var(--small); border-radius: var(--tiny); border: var(--keyline-thin) solid var(--antara-earth); } main section.hero .container { position: relative; min-height: 100svh; background-size: cover; background-position: center top; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; transition: min-height var(--transition-4-hero); color: var(--antara-bone); } @media (max-width: 540px) { @supports (-webkit-overflow-scrolling: touch) { main section.hero .container { background-attachment: scroll; } } } main section.hero .container .logo { position: absolute; height: 100%; display: flex; align-items: center; padding: var(--big); } @media (max-width: 540px) { main section.hero .container .logo { padding: calc(var(--medium) - var(--tiny)); } } main section.hero .container .logo .inner img { height: auto; } main section.hero .container .address { text-align: center; height: 100%; margin: 0 auto; display: flex; align-items: flex-end; } main section.hero .container .intro { text-shadow: var(--tiny) 0 var(--small) var(--antara-earth); } main section.hero .container .address.dark, main section.hero .container .intro.dark { color: var(--antara-earth); } main section.hero .container:not(:first-child) { mix-blend-mode: multiply; } main section.about .section:not(:last-child):not(:nth-last-child(-n+2)) { border-bottom: var(--divider); } main section.about .section .container { padding: var(--huge) 0; display: flex; flex-direction: column; } main section.about .section .container .heading { display: flex; align-items: baseline; margin-bottom: var(--big); column-gap: var(--gutter); row-gap: var(--tiny); } main section.about .section .container .heading h1, main section.about .section .container .heading h2 { width: 50%; } main section.about .section .container .heading h2 { text-align: center; } @media (max-width: 960px) { main section.about .section .container .heading { flex-direction: column; margin-bottom: var(--big); } main section.about .section .container .heading h1, main section.about .section .container .heading h2 { width: 100%; text-align: initial; } } @media (max-width: 540px) { main section.about .section .container .heading { row-gap: calc(var(--tiny) / 3); } main section.about .section .container .heading h1, main section.about .section .container .heading h2 { text-align: center; } } main section.about .section .container .carousel { margin-top: var(--big); } main section.about .section .container .carousel .splide .splide__track { border-radius: var(--small); overflow: hidden; } main section.about .section .container .carousel img { object-fit: cover; } main section.about .section .container figcaption { margin-top: var(--big); text-align: center; } main section#menus { position: relative; padding: var(--body) var(--body) 0 var(--body); } main section#menus .menu { background-color: var(--antara-white); padding-top: var(--big); padding-bottom: var(--big); margin: 0 var(--small) var(--small) var(--small); border-radius: var(--small); box-shadow: var(--box-shadow-menus); position: relative; transition: var(--transition-2); transition-property: padding, margin; } @media (max-width: 540px) { main section#menus .menu { padding-top: var(--medium); padding-bottom: var(--medium); } main section#menus .menu .image { display: none; } } main section#menus .menu .heading { text-align: center; margin-top: var(--big); margin-bottom: var(--big); display: flex; flex-direction: column; width: 100%; row-gap: var(--tiny); cursor: default; } @media (max-width: 540px) { main section#menus .menu .heading { margin-top: var(--medium); row-gap: calc(var(--tiny) / 3); } } main section#menus .menu .items { padding-top: var(--medium); margin-bottom: var(--big); column-gap: var(--big); position: relative; transition-delay: 0.2s; transition: padding var(--transition-2); cursor: text; } @media (max-width: 960px) { main section#menus .menu .items { row-gap: calc(var(--medium) + var(--small)); column-gap: var(--gutter); padding: initial; } } main section#menus .menu .items .lhs, main section#menus .menu .items .rhs { margin-bottom: auto; } main section#menus .menu .items .rhs::before { content: ""; height: 100%; border-left: var(--divider-list); position: absolute; margin-left: calc(var(--big) / -2); } @media (max-width: 960px) { main section#menus .menu .items .rhs::before { display: none; } } main section#menus .menu .items .item { padding-top: var(--small); } main section#menus .menu .items .item:first-of-type, main section#menus .menu .items .item .title, main section#menus .menu .items .item .name, main section#menus .menu .items .item .price, main section#menus .menu .items .item .desc { padding-top: initial; } main section#menus .menu .items .item:not(:first-of-type) .title { padding-top: var(--body-lg); } @media (max-width: 960px) { main section#menus .menu .items .item:not(:first-of-type) .title { padding-top: var(--medium); } } main section#menus .menu .items .item .name, main section#menus .menu .items .item .desc { margin-left: var(--font-body-lg); } @media (max-width: 960px) { main section#menus .menu .items .item .name, main section#menus .menu .items .item .desc { margin-left: initial; } } main section#menus .menu .items .item .price { text-align: right; display: flex; justify-content: flex-end; align-items: flex-end; font-variant-caps: all-small-caps; font-variant-numeric: oldstyle-nums; } main section#menus .menu .note { padding-top: var(--big); padding-bottom: var(--medium); text-align: center; transition-delay: 0.2s; transition: padding var(--transition-2); } @media (max-width: 540px) { main section#menus .menu .note { padding-top: var(--body-lg); } } main section#menus .nav { position: absolute; height: 96%; z-index: 50; } @media (max-width: 540px) { main section#menus .nav { position: initial; height: initial; text-align: center; } } main section#menus .nav .inner { position: sticky; top: 40%; left: 0; padding: var(--medium) 0; } main section#menus .nav .inner li { padding-bottom: var(--body); } main section#menus .nav .inner li a.active { border-bottom: var(--keyline-thin) solid var(--antara-earth); } @media (max-width: 540px) { main section#menus .nav .inner { display: flex; flex-direction: row; justify-content: center; column-gap: var(--medium); row-gap: var(--tiny); flex-wrap: wrap; } main section#menus .nav .inner li { padding-bottom: 0; } } main section#menus .container { position: relative; padding: var(--huge) 0; } main section#menus .menu-new { padding: 0; } main section#menus .menu-new p { padding-top: 0; } main section#menus .menu-new p.title { padding-bottom: 0.25rem; border-bottom: var(--keyline-thin) dotted var(--antara-earth); margin-bottom: 1rem; font-family: "ROM Medium"; font-variant: all-small-caps; letter-spacing: 1.0125; } main section#menus .menu-new p.desc { padding-left: var(--font-body-lg); } main section#menus .menu-new .item > p { padding-top: var(--tiny); } main section#menus .menu-new .item:not(:first-child) .title { margin-top: var(--big); } main section#menus .menu-new .item .spacer { height: var(--big); } main section#menus .menu-new .items { margin-top: var(--big); } main section#menus .menu-new .items.lay-b .item { display: block; width: 100%; margin-left: auto; margin-right: auto; text-align: center; } main section#menus .menu-new .items.lay-b .item .name, main section#menus .menu-new .items.lay-b .item .desc, main section#menus .menu-new .items.lay-b .item .price { display: inline-block; width: auto; } main section#menus #wine-list { background-color: var(--antara-earth); color: var(--antara-white); padding: var(--huge) var(--body); margin: var(--small); border-radius: var(--small); text-align: center; position: relative; z-index: 80; } main section#menus #wine-list a { text-decoration: underline; cursor: pointer !important; } main section#menus #wine-list a h1 { padding: var(--medium) 0; } @media (max-width: 540px) { main section#menus #wine-list { padding: calc(var(--huge) * 2) var(--body); } main section#menus #wine-list a h1 { font-size: var(--font-body-lg); } } main section#gallery { padding: var(--huge) var(--body); } @media (max-width: 540px) { main section#gallery { padding: calc(var(--huge) + var(--tiny)) var(--body); } } main section#gallery .row { display: flex; flex-direction: row; } main section#gallery .row figure { aspect-ratio: 3/4; width: 100%; height: auto; } main section#gallery .row:not(:last-child) { padding-bottom: var(--big); } @media (max-width: 960px) { main section#gallery .row:not(:last-child) { padding-bottom: var(--gutter); } } @media (max-width: 960px) { main section#gallery .row { flex-wrap: wrap; } main section#gallery .row figure { width: calc(50% - var(--gutter) / 2); } } main section#open-hours { padding: var(--huge) var(--body); text-align: center; } main section#open-hours .heading { margin-bottom: var(--big); } @media (max-width: 540px) { main section#open-hours .heading h1 { font-size: var(--font-medium); } } main section#open-hours .hours { display: flex; flex-direction: column; } main section#open-hours .hours h3 { font-family: "ROM Medium"; font-variant: all-small-caps; letter-spacing: 1.0125; } main section#open-hours .hours p { padding-top: initial; font-family: "GT Alpina Typewriter VAR", "GT Alpina Typewriter Fallback", Courier, monospace; font-variation-settings: "wght" 340; font-variant-numeric: oldstyle-nums; font-variant-caps: all-small-caps; font-synthesis: none; font-size: var(--font-body); line-height: 132%; } main section#open-hours .hours p:not(:last-child) { padding-bottom: var(--medium); } main section#open-hours .note { text-align: center; margin-top: var(--big); } main section.events { padding: var(--huge) var(--body); } main section.events .container { pointer-events: none; } main section.events .container .heading { display: flex; flex-direction: column; width: 100%; row-gap: var(--tiny); margin-bottom: var(--big); } @media (max-width: 540px) { main section.events .container .heading { text-align: center; row-gap: calc(var(--tiny) / 3); margin-bottom: var(--huge); } } @media (min-width: 960px) { main section.events .container:hover .event a, main section.events .container:hover .event-past a { opacity: var(--hover-opacity); } } main section.events .container .event, main section.events .container .event-past { padding: initial; pointer-events: all; } main section.events .container .event a, main section.events .container .event-past a { padding: var(--small) 0 var(--small) 0; border-bottom: var(--divider-events); transition: var(--transition-2); transition-property: padding-left; row-gap: var(--tiny); } @media (max-width: 540px) { main section.events .container .event a, main section.events .container .event-past a { row-gap: calc(var(--tiny) / 3); } } main section.events .container .event a .date, main section.events .container .event a .location, main section.events .container .event a .more, main section.events .container .event a .title, main section.events .container .event-past a .date, main section.events .container .event-past a .location, main section.events .container .event-past a .more, main section.events .container .event-past a .title { margin: initial; padding: initial; } main section.events .container .event a .date, main section.events .container .event-past a .date { font-variant: unicase; font-variant-numeric: oldstyle-nums; } @media (max-width: 540px) { main section.events .container .event a .date, main section.events .container .event-past a .date { font-size: var(--font-body); } } main section.events .container .event a .more::after, main section.events .container .event-past a .more::after { content: "↗"; padding-left: var(--gutter); opacity: 0; transition: var(--transition-2); transition-property: opacity; } @media (max-width: 960px) { main section.events .container .event a .location, main section.events .container .event a .more, main section.events .container .event-past a .location, main section.events .container .event-past a .more { display: none; } } @media (min-width: 960px) { main section.events .container .event a:hover, main section.events .container .event-past a:hover { padding-left: var(--small); opacity: 1; } main section.events .container .event a:hover .more::after, main section.events .container .event-past a:hover .more::after { opacity: 1; } } main section.events .container .event:nth-child(2) a, main section.events .container .event-past:nth-child(2) a { padding-top: 0; } main section#newsletter { background-color: var(--antara-bone); padding: var(--huge) var(--body) 0 var(--body); } main section#newsletter .heading { margin-bottom: var(--big); display: flex; flex-direction: column; width: 100%; row-gap: var(--tiny); } @media (max-width: 540px) { main section#newsletter form { margin-bottom: var(--small); } } main section#newsletter form .fields { padding: initial; row-gap: var(--medium); } main section#newsletter form .fields .field-1, main section#newsletter form .fields .field-2, main section#newsletter form .fields .field-3, main section#newsletter form .fields #submit { padding-bottom: var(--small); border-bottom: var(--divider-form); } @media (max-width: 540px) { main section#newsletter form .fields .field-1, main section#newsletter form .fields .field-2, main section#newsletter form .fields .field-3, main section#newsletter form .fields #submit { padding-bottom: var(--tiny); } } main section#newsletter form .fields .field-1 input::placeholder, main section#newsletter form .fields .field-2 input::placeholder, main section#newsletter form .fields .field-3 input::placeholder, main section#newsletter form .fields #submit input::placeholder { color: var(--antara-earth-25); } main section#newsletter form .fields #submit { cursor: pointer; } @media (min-width: 960px) { main section#newsletter form .fields #submit input:hover { opacity: var(--hover-opacity); } } footer { background-color: var(--antara-bone); align-items: flex-end; padding: var(--huge) var(--body) var(--body) var(--body) !important; } footer.grid { row-gap: var(--huge); } footer .footer-graphic svg { width: 100%; height: auto; stroke-dasharray: var(--keyline-svg); } @media (max-width: 540px) { footer .footer-graphic { display: none; } } footer #contact li { display: flex; } footer #contact li h2 { margin-right: calc(var(--tiny) * 2); } @media (max-width: 540px) { footer #contact li h2 { margin-right: var(--small); } } body.home main section.ordered { display: flex; flex-direction: column; } body.home main section.ordered > section:not(:last-child) { border-bottom: var(--divider); } body.home main section.ordered > section.order-1 { order: 1; } body.home main section.ordered > section.order-2 { order: 2; } body.home main section.ordered > section.order-3 { order: 3; } body.home main section.ordered > section.order-4 { order: 4; } body.home main section.ordered > section.order-5 { order: 5; } body.home main section.ordered > section.order-6 { order: 5; } body.home main section.ordered > section.about > div:not(:last-child) { border-bottom: var(--divider); } @media (max-width: 540px) { body.home main section .container .event:last-child a { border-bottom: initial; padding-bottom: initial; } } body:not(.home) main { padding-top: var(--big); margin-bottom: var(--big); } body:not(.home) main section.title { margin-top: var(--big); margin-bottom: var(--huge); text-align: center; display: flex; flex-direction: column; width: 100%; row-gap: var(--tiny); } body:not(.home) main section.content .block.image { margin-bottom: var(--huge); } body:not(.home) main section.content .block.image figure img { border-radius: var(--tiny); overflow: hidden; } body:not(.home) main section.content .block.image figure figcaption { margin-top: var(--tiny); } body:not(.home) main section.content .block.heading, body:not(.home) main section.content .block.text { text-align: initial; padding-top: var(--tiny); } body:not(.home) main section.content .block.heading:not(:first-child), body:not(.home) main section.content .block.text:not(:first-child) { padding-top: var(--medium); } body:not(.home) main section.content .block.heading a, body:not(.home) main section.content .block.text a { text-decoration: underline; } body:not(.home) main section.content .block.heading h1, body:not(.home) main section.content .block.text h1 { margin-bottom: var(--small); } body:not(.home) main section.content .block.heading.left, body:not(.home) main section.content .block.text.left { text-align: left; } body:not(.home) main section.content .block.heading.center, body:not(.home) main section.content .block.text.center { text-align: center; } body:not(.home) main section.content .block.heading.right, body:not(.home) main section.content .block.text.right { text-align: right; } body:not(.home) main section.content .block.heading.above, body:not(.home) main section.content .block.text.above { padding-top: var(--big); } body:not(.home) main section.content .block.heading.below, body:not(.home) main section.content .block.text.below { padding-bottom: var(--big); } body:not(.home) main section.content .block.gallery .row { padding-top: var(--big); padding-bottom: var(--big); } body:not(.home) main section.content .block.gallery .row figure { aspect-ratio: 3/4; border-radius: var(--tiny); overflow: hidden; } body:not(.home) main section.events { margin: initial; padding-bottom: initial; } body:not(.home) main section.events:not(.past) { padding-top: var(--small); } @media (max-width: 540px) { body:not(.home) main section.events { padding-bottom: var(--huge); } } body:not(.home) main section.intro { margin-bottom: var(--huge); padding-bottom: initial; } @media (max-width: 540px) { body:not(.home) main section.intro { margin-bottom: var(--huge); padding-bottom: var(--medium); } } body:not(.home) main section.list .heading { display: flex; flex-direction: column; row-gap: var(--huge); padding-bottom: var(--tiny); border-bottom: var(--divider-form); } body:not(.home) main section.list ol { margin-top: var(--medium); } @media (min-width: 960px) { body:not(.home) main section.list ol:hover li a { opacity: var(--hover-opacity); } } body:not(.home) main section.list ol li a { padding-top: var(--small); padding-bottom: var(--tiny); border-bottom: var(--divider-list); } body:not(.home) main section.list ol li a .status { font-size: 88%; text-align: right; } body:not(.home) main section.list ol li a .status span { background-color: var(--antara-bone); border-radius: var(--tiny); padding: 0 var(--tiny) calc(var(--tiny) / 3) var(--tiny); } @media (max-width: 540px) { body:not(.home) main section.list ol li a .status span { border-radius: calc(var(--tiny) / 3); padding: 0 calc(var(--tiny) / 3) calc(var(--tiny) / 6) calc(var(--tiny) / 3); } } body:not(.home) main section.list ol li a .status::after { content: "↗"; padding-left: var(--small); opacity: 0; transition: var(--transition-2); transition-property: opacity; } @media (max-width: 960px) { body:not(.home) main section.list ol li a .status::after { display: none; } } body:not(.home) main section.list ol li a p { padding: initial; } @media (min-width: 960px) { body:not(.home) main section.list ol li a:hover { opacity: 1; } body:not(.home) main section.list ol li a:hover .status::after { opacity: 1; } } body:not(.home) main section.list ol li a.soon .role { color: var(--antara-earth-25); } body:not(.home) main section.list ol li a.soon .status span { background-color: var(--antara-bone-25); color: var(--antara-earth-25); } body:not(.home) main section.list .email { margin-top: var(--huge); text-align: center; } body:not(.home) main section.form { padding-top: var(--huge); border-top: var(--divider-form); } body:not(.home) main section.form .container table { width: 100%; } body:not(.home) main section.form .container table label { margin-bottom: var(--tiny); } body:not(.home) main section.form .container table input, body:not(.home) main section.form .container table textarea { width: 100% !important; border: none !important; border-bottom: var(--divider-form) !important; padding-top: var(--small); padding-bottom: var(--small); } @media (min-width: 960px) { body:not(.home) main section.form .container table input:hover, body:not(.home) main section.form .container table textarea:hover { background-color: var(--antara-stone-5); } } @media (max-width: 960px) { body:not(.home) main section.form .container table input, body:not(.home) main section.form .container table textarea { background-color: var(--antara-stone-5); } } body:not(.home) main section.form .container table .fa-exclamation-triangle { width: auto; } body:not(.home) main section.form .container table .row_contact_header:not(:first-child) td h2, body:not(.home) main section.form .container table .row_details_header:not(:first-child) td h2 { margin-top: var(--big) !important; } body:not(.home) main section.form .container table .row_contact_header td h2, body:not(.home) main section.form .container table .row_details_header td h2 { margin-bottom: var(--medium) !important; } body:not(.home) main section.form .container table .row_referred_by { display: none; } body:not(.home) main section.form .container table #lead_form_submit :last-child { display: none; } body:not(.home) main section.form .container table .row_submit input { font-family: "ROM Medium", Arial, Helvetica, sans-serif !important; font-size: var(--body) !important; } body:not(.home) main section.form .container h2, body:not(.home) main section.form .container .errorExplanation { font-variant-caps: initial !important; font-family: "ROM Medium", Arial, Helvetica, sans-serif !important; font-size: var(--body-lg) !important; line-height: 122% !important; text-wrap: pretty; } body:not(.home) main section.form .container h2 li, body:not(.home) main section.form .container .errorExplanation li { font-family: "ROM Mono Regular", Courier, monospace; font-size: var(--body); line-height: 134%; } body:not(.home) div.timeselect { width: 25vw !important; } body:not(.home) div.timeselect > a { margin-bottom: var(--small); } body:not(.home) div.timeselect > a:first-child { margin-top: var(--small); } body.events { background-color: var(--antara-earth-dark); color: var(--antara-kaya); } body.events main section.events { background-color: initial; } body.events main section.events .container .event a { border-bottom: var(--divider-events-rev); } body.events main section.events.upcoming .container .heading { display: none; } body.event, body.event-past, body.careers { background-color: var(--antara-white); } .items figure { width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; } .items figure:not(:first-of-type) { opacity: 0; } .hvr-4:hover .items figure:nth-of-type(2) { opacity: 1; } /*# sourceMappingURL=style.css.map */