/* Tohar Brands — the opening. A black screen with the gold ring closing around the wordmark, held over the page for five seconds while the rest of it arrives, then faded away. The same idea as the garage site's intro: once per visit, and gone on its own. The part that has to be right on the very first paint - the black cover itself - is inlined in the of every page. This file is everything after that. */ .tb-intro { position: fixed; inset: 0; z-index: 2147483000; display: none; align-items: center; justify-content: center; background: #000; opacity: 1; transition: opacity .62s ease, transform .62s cubic-bezier(.22, .61, .36, 1); will-change: opacity; } html.tb-intro-on .tb-intro { display: flex } /* the ring is square, so the box it sits in is too - the still and the film are laid one on the other inside it, both filling it exactly */ .tb-intro__stage { position: relative; width: min(84vw, 480px); height: min(84vw, 480px); /* the film's own ground is a hair above black and its glow reaches the frame edge, which would draw a faint square on the cover. The ring ends at 88% of the way out, so fading everything past that takes the edge away and leaves it untouched. */ -webkit-mask-image: radial-gradient(closest-side, #000 88%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(closest-side, #000 88%, rgba(0, 0, 0, 0) 100%); } .tb-intro__still, .tb-intro__film { position: absolute; inset: 0; width: 100% !important; /* the theme sets img{width:100%!important} of its own */ height: 100% !important; max-width: none; display: block; border: 0; outline: 0; object-fit: contain; background: transparent; pointer-events: none; } /* the film stays invisible until it is genuinely running. A browser that refuses to start it draws its own play button over the picture, and nobody should ever see that - what they see instead is the still, and then the animation that replaces it */ .tb-intro__film { opacity: 0; transition: opacity .3s ease } .tb-intro.is-playing .tb-intro__film { opacity: 1 } /* the ring is the whole picture on a phone - let it take the width it needs */ @media (max-width: 520px) { .tb-intro__stage { width: 88vw; height: 88vw } } /* the way out: the cover lifts and the ring grows a little as it goes */ .tb-intro.is-out { opacity: 0; transform: scale(1.045); pointer-events: none } /* nothing scrolls underneath while the cover is up - the lock is lifted a moment before the cover itself, so the page is usable through the fade */ html.tb-intro-lock, html.tb-intro-lock body { overflow: hidden !important } @media print { .tb-intro { display: none !important } }