/* * The Undercover Waiters — base layout. * * The page model the Showit design was built on: full-width sections, each * holding a fixed-size canvas (1200px wide on desktop, 320px on mobile) * whose elements are absolutely positioned. The canvas is scaled to the * window by --s (set in and by tuw.js); --o is the extra room either * side of the 1200px canvas on wide screens, used by edge-locked elements. * Per-element geometry lives in assets/css/pages/.css. */ /* ---------- reset ---------- */ html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, img, b, i, strong, em, ol, ul, li, form, label, table, tr, td, th, nav, section, article, header, footer, figure, video, canvas { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } article, aside, figure, footer, header, nav, section { display: block; } body { line-height: 1; position: relative; margin: 0; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; --s: 1; --o: 0px; } a, a:link, a:visited, a:active, a:focus { color: inherit; text-decoration: none; } b, strong { font-weight: 700; } em, i { font-style: italic; } input { font: inherit; } /* ---------- page, sections, canvases ---------- */ .sp { position: relative; width: 100%; min-width: 320px; overflow: clip; } .sb { position: relative; width: 100%; pointer-events: none; } .sc { position: relative; height: 100%; max-height: 5000em; pointer-events: none; left: 50%; transform: scale(var(--s)); transform-origin: 50% 0; } .d .sc { width: 1200px; margin-left: -600px; } .m .sc { width: 320px; margin-left: -160px; } .ss, .ss-s { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .ss { display: none; animation-fill-mode: both; } .ss.sactive, .ss.tuw-leaving { display: block; } .ss.tuw-leaving { animation: tuwFadeOut .6s both; } .ss.sactive.tuw-entering { animation: tuwFadeIn .6s both; } .se { position: absolute; display: block; box-sizing: border-box; outline: none; pointer-events: auto; transform-origin: 50% 50%; animation-fill-mode: both; } .d .se-bd, .m .se-bm { overflow: hidden; } /* Section background media */ .sb-m { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 100%; overflow: hidden; } .sb-m .sb-mc { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .d .tuw-only-m, .m .tuw-only-d { display: none !important; } .d .tuw-px-d .sb-m .tuw-bgm, .m .tuw-px-m .sb-m .tuw-bgm { height: calc(100% + 30vh); top: -30vh; will-change: transform; } .d .tuw-fx-d .sb-m, .m .tuw-fx-m .sb-m { clip-path: inset(0); } .d .tuw-fx-d .sb-m .tuw-bgm, .m .tuw-fx-m .sb-m .tuw-bgm { position: fixed; width: 100vw; height: 100vh; } /* Sticky and fixed sections */ /* (stacking order comes from each page's own .sib-* z-index rules, as on Showit) */ .d .tuw-lock-st-d, .m .tuw-lock-st-m { position: sticky; top: 0; } .d .tuw-lock-t-d, .m .tuw-lock-t-m { position: fixed; top: 0; left: 0; } .sb.tuw-shown { display: block !important; } /* e.g. the mobile menu, opened by the burger */ /* ---------- elements ---------- */ .se-t { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; } .se-t:focus { outline: none; border: 0; } .se-rc a { text-decoration: underline; } .se-rc a:hover { opacity: .8; } .se-t-list ul, .se-t-list ol { margin-left: 1.4em; } .se-t-list ul { list-style: disc; } .se-t-list ol { list-style: decimal; } .se-icon, .se-line { width: 100%; height: 100%; } .se-icon svg, .se-line svg { width: 100%; height: 100%; vertical-align: top; } .se-line { overflow: visible; display: block; } .se-img, .se-gr { width: 100%; height: 100%; } img.se-img { display: block; position: absolute; top: 0; left: 0; object-fit: cover; object-position: 50% 50%; border-radius: inherit; } .tuw-thumb { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; } .tuw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .se-simple, .se-button { width: 100%; height: 100%; box-sizing: border-box; border: 0 solid transparent; } .se-button { display: flex; align-items: center; justify-content: center; cursor: pointer; min-height: fit-content; transition-property: opacity, border-color, border-width, border-style, border-radius, box-shadow, background-color; } .se-button > * { user-select: none; } .se:has(.se-button) { cursor: pointer; min-height: fit-content; transition: none; } .se-button span { line-height: 1; min-height: fit-content; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition-property: opacity, color, font-size, letter-spacing, line-height, text-decoration, text-transform, font-family; } .se iframe, .se video { display: block; border: 0; } /* WordPress content inside text elements (blog) */ .se-wpt a:hover { opacity: .8; } .se-wpt-pc a, .se-wpt a:hover { text-decoration: underline; } .se-wpt b, .se-wpt strong { font-weight: 700; } .se-wpt em, .se-wpt i { font-style: italic; } .se-wpt ol, .se-wpt ul { margin-left: 20px; } .se-wpt ol { list-style-type: decimal; } .se-wpt-pc ul { list-style-type: disc; } .se-wpt-pc:after { content: ""; display: table; clear: both; } .se-wpt blockquote { background: hsla(0, 0%, 48%, .2); margin: 1em; max-width: 500px; padding: 1em; } .se-wpt img { max-width: 100%; height: auto; } .se-wpt .wp-caption { max-width: 96%; } .alignleft { float: left; display: inline; margin: .4em 1.6em 1.6em 0; } .alignright { float: right; display: inline; margin: .4em 0 1.6em 1.6em; } .aligncenter { display: block; margin: .4em auto 1.6em; clear: both; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .sb-wp404 { position: relative; width: 100%; height: 400px; } .sb-wp404 .sc { pointer-events: auto; } input[type=submit] { background: none; border: 1px solid hsla(0, 0%, 49%, .5); color: inherit; cursor: pointer; font: inherit; margin-top: 10px; padding: 10px; } /* ---------- galleries ---------- */ /* Fading slideshow */ .tuw-cycle { position: relative; width: 100%; height: 100%; } .tuw-cycle .tuw-slide { opacity: 0; transition: opacity .6s ease; } .tuw-cycle .tuw-slide.on { opacity: 1; } .tuw-cycle[data-notran] .tuw-slide { transition: none; } /* Filmstrip (Showit "sliding" gallery) */ .tuw-film { width: 100%; height: 100%; } .ssg-slider { position: relative; width: 100%; height: 100%; box-sizing: border-box; } .flickity-viewport { position: absolute; top: 0; bottom: 0; width: 100%; overflow: hidden; z-index: 1; touch-action: pan-y; } .flickity-slider { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: transform .7s ease; } .ssg-slider .ssg-slider-img { position: absolute; top: 0; display: block; height: 100%; width: auto; } .flickity-page-dots { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-align: center; line-height: 0; z-index: 2; } .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: rgba(0, 0, 0, .25); cursor: pointer; } .flickity-page-dots .dot.is-selected { background-color: rgba(0, 0, 0, 1); } /* Masonry tiles (Showit "tile" gallery) */ .tuw-tile { position: relative; width: 100%; box-sizing: border-box; } .tuw-tile .stg-grid-sizer { display: none; } .tuw-tile .stg-grid-item { position: absolute; box-sizing: border-box; cursor: zoom-in; } .tuw-tile .stg-grid-img { display: block; width: 100%; height: auto; } .tuw-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(38, 36, 36, 1); pointer-events: auto; } .tuw-lightbox img { max-width: 88vw; max-height: 86vh; object-fit: contain; } .tuw-lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 38px; line-height: 1; cursor: pointer; padding: 18px; } .tuw-lightbox .tuw-lb-close { top: 8px; right: 12px; } .tuw-lightbox .tuw-lb-prev { left: 8px; top: 50%; transform: translateY(-50%); } .tuw-lightbox .tuw-lb-next { right: 8px; top: 50%; transform: translateY(-50%); } /* Instagram strip (was Showit's live social grid). Tile size and the row/grid layout come from the page CSS, exactly as Showit set them. */ .tuw-ig { width: 100%; height: 100%; overflow: hidden; } .tuw-ig a { display: block; overflow: hidden; } .tuw-ig img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- entrance animations (the animate.css set the design uses) ---------- */ .tuw-wait { opacity: 0; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tuwFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tuwFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } from { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } to { transform: none; } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } from { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: reduce) { .tuw-wait { opacity: 1; } .flickity-slider, .tuw-cycle .tuw-slide { transition: none; } } /* ---------- Pure Marketing credit (below the Showit footer) ---------- */ .tuw-credit { background: rgba(43, 63, 69, 1); color: rgba(236, 235, 243, .72); font: 12px/1.4 Montserrat, Arial, sans-serif; letter-spacing: .04em; } .tuw-credit .footer-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 14px 20px; box-sizing: border-box; } .tuw-credit .back-to-top { display: inline-flex; align-items: center; gap: 8px; color: inherit; } .tuw-credit .back-to-top:hover, .tuw-credit .footer-credit:hover { color: #fff; } .tuw-credit .footer-credit { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none !important; border: 0 !important; box-shadow: none !important; } .tuw-credit .footer-credit-logo { height: 20px; width: auto; display: block; filter: brightness(0) invert(1); } @media (max-width: 767px) { .tuw-credit .footer-bottom-row { justify-content: center; text-align: center; } } /* ---------- background / decorative videos: no browser controls ---------- */ /* They autoplay muted on a loop; Safari (and iOS in Low Power Mode) otherwise overlays play/pause/skip buttons. */ video.sb-mc { pointer-events: none; } video.sb-mc::-webkit-media-controls, video.sb-mc::-webkit-media-controls-enclosure, video.sb-mc::-webkit-media-controls-panel, video.sb-mc::-webkit-media-controls-overlay-enclosure, video.sb-mc::-webkit-media-controls-overlay-play-button, video.sb-mc::-webkit-media-controls-start-playback-button, video.sb-mc::-webkit-media-controls-play-button { display: none !important; -webkit-appearance: none; opacity: 0 !important; } /* Background YouTube videos (controls=0): no hover or tap, so YouTube never draws its prev/pause/next overlay. */ .se iframe[src*="youtube.com/embed"][src*="controls=0"] { pointer-events: none; } .se:has(> iframe[src*="youtube.com/embed"][src*="controls=0"]) { pointer-events: none; }