/* Highway Template https://templatemo.com/tm-520-highway */ body { font-family: 'Kanit', sans-serif; background-color: #000; } body::-webkit-scrollbar { width: 8px; height: 8px; background-color: rgba(0, 0, 0, 0.9); } /* Add a thumb */ body::-webkit-scrollbar-thumb { background: rgba(250, 250, 250, 0.5); } /* height:100% together with overflow-x:hidden turned into its own scroll container: the window never scrolled, which broke scroll-margin, native smooth scrolling and any scroll listener. The page scrolls on the viewport now — min-height keeps short pages filling the screen. */ body, html { min-height: 100%; overflow-x: hidden; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .page-heading { background-image: url(../img/heading_bg.png); background-repeat: no-repeat; background-size: cover; background-position: center center; width: 100%; text-align: center; } .page-heading .heading-content h1 { font-size: 32px; text-transform: uppercase; color: #fff; letter-spacing: 1px; background-color: rgba(250, 250, 250, 0.1); display: inline-block; margin-bottom: 0; margin-top: 220px; padding: 20px 60px; } .page-heading .heading-content em { font-style: normal; font-weight: 200; } /* Nav Bar */ nav .logo { float: left; margin-left: 30px; } nav .logo a { font-size: 28px; line-height: 80px; text-transform: uppercase; color: #fff; text-decoration: none; letter-spacing: 0.5px; } nav .logo em { font-style: normal; font-weight: 200; } nav { background: rgba(250, 250, 250, 0.2); height: 80px; position: fixed; width: 100%; left: 0; top: 0; z-index: 300; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5); } .menu-icon { background: transparent; border: 1px solid #fff; width: 50px; height: 50px; margin: 15px 39px 0 auto; position: relative; cursor: pointer; transition: background 0.5s; border-radius: 5px; } .menu-icon span, .menu-icon span:before, .menu-icon span:after { cursor: pointer; border-radius: 1px; height: 2px; width: 35px; background: white; position: absolute; left: 15%; top: 50%; display: block; content: ''; transition: all 0.5s ease-in-out; } .menu-icon span:before { left: 0; top: -10px; } .menu-icon span:after { left: 0; top: 10px; } .menu-icon.active { background: rgba(250, 250, 250, 0.2); } .menu-icon.active span { background-color: transparent; } .menu-icon.active span:before, .menu-icon.active span:after { top: 0; } .menu-icon.active span:before { transform: rotate(135deg); } .menu-icon.active span:after { transform: rotate(-135deg); } /* Menu */ .overlay-menu { background: rgba(0, 0, 0, 0.95); color: #ffffff; position: fixed; z-index: 100; left: 0; top: 0; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; padding: 50px 0; opacity: 0; text-align: center; transform: translateY(-100%); transition: all 0.5s; } .overlay-menu.open { opacity: 1; transform: translateY(0%); } .overlay-menu .main-menu { transform: translateY(50%); opacity: 0; transition: all 0.3s; transition-delay: 0s; } .overlay-menu.open .main-menu { transition: all 0.7s; transition-delay: 0.7s; opacity: 1; transform: translateY(0%); } .overlay-menu .main-menu:nth-child(2) { transition-delay: 0s; } .overlay-menu.open .main-menu:nth-child(2) { transition-delay: 1.25s; } .overlay-menu { overflow: scroll; } .overlay-menu::-webkit-scrollbar { display: none; } .overlay-menu ul { list-style: none; margin-top: 80px; padding: 0px; } .overlay-menu ul li { padding: 15px 0px; } .overlay-menu ul li a { font-size: 24px; font-weight: 300; color: #fff; text-decoration: none; transition: all 0.5s; } .overlay-menu ul li a:hover { color: rgba(250, 250, 250, 0.5); } .overlay-menu p { margin-top: 60px; font-size: 13px; text-transform: uppercase; color: #fff; font-weight: 200; letter-spacing: 0.5px; text-align: center; } #video-container { position: relative; width: 100%; /* stop short of the full viewport so the atelier header peeks above the fold and visitors know there is more content below */ height: calc(100vh - 170px); height: calc(100svh - 170px); min-height: 520px; overflow: hidden; z-index: 1; } #video-container video, .video-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; } #video-container .video-overlay { z-index: 9999; background: rgba(0, 0, 0, 0.5); width: 100%; } #video-container .video-content { z-index: 99999; position: absolute; height: 100%; width: 100%; } #video-container .video-content .inner { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; flex-flow: column wrap; } #video-container .video-content .inner h1 { font-size: clamp(32px, 9vw, 64px); text-transform: uppercase; color: #fff; letter-spacing: 2px; /* same weight as the atelier / next-era headings so the whole site reads as one typographic voice (Kanit 800 for titles) */ font-weight: 800; text-align: center; } #video-container .video-content .inner em { font-style: normal; font-weight: 200; } #video-container .video-content .inner p { color: #fff; font-size: clamp(15px, 4.5vw, 22px); font-weight: 200; letter-spacing: 1.5px; text-align: center; padding: 0px 30px; } /* the template underlined every link in the hero; the menu props and the scroll cue are objects, not sentences, so they opt out */ #video-container .video-content .inner a:not(.zip-mark):not(.hero-scroll) { color: #fff; text-decoration: underline; } #video-container .video-content .inner .scroll-icon { margin-top: 45px; } .full-screen-portfolio .container-fluid, .full-screen-portfolio .col-md-4, .col-md-8 { padding-left: 0px; padding-right: 0px; } .portfolio-item img { width: 100%; overflow: hidden; } .portfolio-item .video { position: relative; width: 100%; /* aspect-ratio: 3 / 4; */ overflow: hidden; } .portfolio-item .thumb-cover { width: 100%; height: 100%; object-fit: cover; /* crop to fill, no distortion */ object-position: center; display: block; } .portfolio-item .hover-effect .hover-content { position: absolute; text-align: left; width: 100%; bottom: 0; left: 0; } /* parent already position:relative via your .thumb */ .portfolio-item .thumb { position: relative; } /* bottom label over the video/image */ .media-title { position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 10px 14px; color: #fff; font-size: 16px; letter-spacing: .5px; background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0)); pointer-events: none; /* clicks pass through to the link/video controls */ } .full-screen-portfolio .portfolio-item h1 { position: relative; font-size: 22px; text-transform: uppercase; color: #fff; display: inline-block; padding-left: 20px; line-height: 15px; transform: translateY(25px); transition: .5s ease-in-out; letter-spacing: 0.5px; } .full-screen-portfolio .portfolio-item em { font-style: normal; font-weight: 200; } .full-screen-portfolio .portfolio-item:hover h1 { transform: translateY(0); } .full-screen-portfolio .portfolio-item p { padding-left: 20px; font-weight: 300 !important; letter-spacing: 0.5px; font-size: 14px; color: #fff; opacity: 0; transform: translateY(10px); transition: .5s ease-in-out; text-transform: uppercase; } .full-screen-portfolio .portfolio-item { text-align: center; line-height: 150%; text-transform: lowercase; cursor: pointer; } .full-screen-portfolio .portfolio-item:hover p { opacity: 1; transform: translateY(0); } .popup-icon { position: fixed; bottom: 30px; right: 30px; z-index: 300; display: inline-block; width: 60px; height: 60px; } .popup-icon button { background-color: transparent; outline: none; border: none; } .modal-btn img { width: 60px; height: 60px; } /* Modal */ .modal { background-color: rgba(0, 0, 0, .95); display: none; overflow: auto; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; transform: all 0.6s; overflow: scroll; } .modal::-webkit-scrollbar { display: none; } /* Modal Content */ .modal-content { text-align: center; position: relative; top: 0; width: 100%; margin: 0 auto; background-color: transparent; } .modal-animated-in { animation: totop-in .6s ease; } .modal-animated-out { animation: totop-out .6s ease forwards; } .modal-header { border-bottom: none; } .modal-header h3 { color: #fff; font-weight: 400; letter-spacing: 1px; font-size: 64px; margin-top: 5%; border-bottom: none; margin-bottom: 20px; } .modal-header em { font-style: normal; font-weight: 200; } .modal-content .close-btn { position: absolute; z-index: 99999999; color: #fff; right: 38px; top: 15px; width: 50px; height: 50px; text-align: center; cursor: pointer; } .modal-body { text-align: center; margin: 0 auto; } .modal-body input { border-radius: 5px; padding-left: 15px; font-size: 14px; font-weight: 200; color: #fff; background-color: rgba(250, 250, 250, 0.15); outline: none; border: none; box-shadow: none; line-height: 40px; height: 40px; width: 60%; margin-left: auto; margin-right: auto; margin-bottom: 25px; } .modal-body textarea { border-radius: 5px; padding-left: 15px; padding-top: 10px; font-size: 14px; font-weight: 200; color: #fff; background-color: rgba(250, 250, 250, 0.15); outline: none; border: none; box-shadow: none; height: 165px; max-height: 220px; width: 60%; margin-left: auto; margin-right: auto; max-width: 100%; margin-bottom: 25px; } .modal-body button { border-radius: 0px; font-size: 13px; text-transform: uppercase; font-weight: 600; background-color: transparent; color: #fff; letter-spacing: 2px; border-bottom: 3px solid #fff; display: inline-block; padding: 0px 0px 3px 0px; transition: all 0.5s; border-top: none; border-right: none; border-left: none; } .modal-body button:hover { color: rgba(250, 250, 250, 0.5); border-color: rgba(250, 250, 250, 0.5); outline: none; } /* Keyframes */ @keyframes totop-in { 0% { top: 600px; opacity: 0; } 100% { top: 0%; opacity: 1; } } @keyframes totop-out { 0% { top: 0px; opacity: 1; } 100% { top: -100%; opacity: 0; } } footer { width: 100%; height: 150px; background-color: #313131; overflow: hidden; } .footer-rain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } footer .container-fluid { position: relative; } footer p { text-align: center; color: #fff; font-weight: 200; font-size: 13px; text-transform: uppercase; padding-top: 68px; letter-spacing: 0.5px; } footer a { color: #aaa; text-decoration: none; } footer a:hover { text-decoration: none; color: #aaa; } .masonry-portfolio .container-fluid { padding-right: 0px; padding-left: 0px; } .masonry .col-md-4, .masonry .col-md-8 { padding-right: 0px; padding-left: 0px; } .masonry { width: 100%; background-color: transparent; position: relative; } .masonry .item { display: inline-block; float: left; } .masonry .first-item { margin-bottom: -0.5px; } .masonry .last-item { float: left; } .masonry .item img { width: 100%; overflow-y: hidden; } .masonry .item .thumb { position: relative; } .masonry .item .hover-effect .hover-content { position: absolute; text-align: left; width: 100%; bottom: 5px; left: 0; } .masonry .item h1 { position: relative; font-size: 22px; text-transform: uppercase; color: #fff; display: inline-block; padding-left: 20px; line-height: 15px; transform: translateY(25px); transition: .5s ease-in-out; letter-spacing: 0.5px; } .masonry .item em { font-style: normal; font-weight: 200; } .masonry .item:hover h1 { transform: translateY(0); } .masonry .item p { padding-left: 20px; font-weight: 300 !important; letter-spacing: 0.5px; font-size: 14px; color: #fff; opacity: 0; transform: translateY(10px); transition: .5s ease-in-out; text-transform: uppercase; } .masonry .item { text-align: center; line-height: 150%; text-transform: lowercase; cursor: pointer; } .masonry .item:hover p { opacity: 1; transform: translateY(0); } .grid-portfolio { padding: 65px 0px; background-color: transparent; } .grid-portfolio .portfolio-item { margin: 15px 0px; } .portfolio-item .hover-effect .hover-content { position: absolute; text-align: left; width: 100%; bottom: 5px; left: 0; } .grid-portfolio .portfolio-item h1 { position: relative; font-size: 22px; text-transform: uppercase; color: #fff; display: inline-block; padding-left: 20px; line-height: 15px; transform: translateY(25px); transition: .5s ease-in-out; letter-spacing: 0.5px; } .grid-portfolio .portfolio-item em { font-style: normal; font-weight: 200; } .grid-portfolio .portfolio-item:hover h1 { transform: translateY(0); } .grid-portfolio .portfolio-item p { padding-left: 20px; font-weight: 300 !important; letter-spacing: 0.5px; font-size: 14px; color: #fff; opacity: 0; transform: translateY(10px); transition: .5s ease-in-out; text-transform: uppercase; } .grid-portfolio .portfolio-item:hover p { opacity: 1; transform: translateY(0); } .grid-portfolio .load-more-button { margin-top: 15px; } .grid-portfolio .load-more-button a { width: 100%; height: 80px; display: inline-block; text-align: center; line-height: 80px; font-size: 15px; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; color: #fff; background-color: #313131; transition: all 0.5s; } .grid-portfolio .load-more-button a:hover { color: rgba(250, 250, 250, 0.5); } .services { background-color: #232323; padding: 65px 0px; } .services .service-item { margin: 15px 0px; padding: 20px; text-align: center; transition: all 0.5s; } .services .service-item:hover { background-color: #313131; } .services .service-item .icon { width: 50px; height: 50px; text-align: center; display: inline-block; line-height: 50px; } .services .service-item .icon img { max-width: 100%; } .services .service-item h4 { margin-top: 20px; color: #fff; font-size: 20px; text-transform: capitalize; letter-spacing: 0.5px; font-weight: 300; } .services .service-item p { color: #bbb; font-size: 16px; font-weight: 300; line-height: 28px; } .more-about-us { background-image: url(../img/about_us.png); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center center; width: 100%; text-align: center; } .more-about-us .content { background-color: rgba(0, 0, 0, 0.8); text-align: left; padding: 150px 60px; color: #fff; } .more-about-us .content h2 { margin-top: 0px; font-size: 34px; font-weight: 300; letter-spacing: 0.5px; margin-bottom: 5px; } .more-about-us .content span { font-size: 16px; font-weight: 200; display: inline-block; margin-bottom: 30px; letter-spacing: 0.5px; } .more-about-us .content p { color: #fff; font-size: 16px; font-weight: 300; line-height: 28px; } .more-about-us .content .simple-btn { margin-top: 30px; } .more-about-us .content .simple-btn a { font-size: 13px; text-transform: uppercase; font-weight: 600; background-color: transparent; color: #fff; letter-spacing: 2px; border-bottom: 3px solid #fff; padding-bottom: 3px; text-decoration: none; transition: all 0.5s; } .more-about-us .content .simple-btn a:hover { opacity: 0.5; } .pricing-tables { padding: 65px 0px; background-color: #232323; } .pricing-tables .table-item { padding: 60px 0px; margin: 15px 0px; text-align: center; background-color: #313131; } .pricing-tables .table-item h4 { margin-top: 0px; font-size: 36px; font-weight: 200; color: #f4dd5b; letter-spacing: 0.5px; } .pricing-tables .table-item span { font-size: 17px; display: inline-block; color: #aaa; letter-spacing: 0.5px; text-transform: capitalize; border-bottom: 1px solid #414141; width: 100%; padding-bottom: 40px; } .pricing-tables .table-item ul { list-style: none; padding: 0; margin-top: 35px; } .pricing-tables .table-item ul li { font-size: 15px; font-weight: 300; color: #fff; letter-spacing: 0.5px; margin: 15px 0px; } .pricing-tables .table-item .simple-btn { margin-top: 40px; padding-bottom: 10px; } .pricing-tables .table-item .simple-btn a { font-size: 13px; text-transform: uppercase; font-weight: 600; background-color: transparent; color: #f4dd5b; letter-spacing: 2px; border-bottom: 3px solid #f4dd5b; padding-bottom: 3px; text-decoration: none; transition: all 0.5s; } .pricing-tables .table-item .simple-btn a:hover { opacity: 0.5; } .pricing-tables .premium-item { background-color: #f4dd5b; } .pricing-tables .premium-item h4, .pricing-tables .premium-item span, .pricing-tables .premium-item ul li, .pricing-tables .premium-item .simple-btn a { color: #232323; border-color: #232323; } .blog-entries { padding: 80px 0px; background-color: #232323; } .blog-entries .blog-posts { margin-right: 30px; } .blog-post { border-bottom: 1px solid #414141; padding-bottom: 65px; margin-bottom: 60px; } .blog-post img { width: 100%; overflow-y: hidden; } .blog-post .text-content { margin-top: 30px; } .blog-post .text-content span { font-size: 16px; font-weight: 200; color: #fff; letter-spacing: 0.5px; } .blog-post .text-content span a { color: #f4dd5b; text-decoration: none; } .blog-post .text-content h2 { margin-top: 5px; font-size: 36px; color: #fff; letter-spacing: 0.5px; text-transform: capitalize; font-weight: 300; } .blog-post .text-content p { color: #bbb; font-size: 16px; font-weight: 300; line-height: 28px; margin-top: 20px; } .blog-post .text-content .simple-btn { margin-top: 25px; } .blog-post .text-content .simple-btn a { font-size: 13px; text-transform: uppercase; font-weight: 600; background-color: transparent; color: #fff; letter-spacing: 2px; border-bottom: 3px solid #fff; padding-bottom: 3px; text-decoration: none; transition: all 0.5s; } .blog-post .text-content .simple-btn a:hover { opacity: 0.5; } .blog-entries .page-number { padding: 0; margin: 0; list-style: none; } .blog-entries .page-number li { display: inline-block; margin-right: 3px; } .blog-entries .page-number li:last-child { margin-right: 0px; } .blog-entries .page-number li.active a { color: #232323; background-color: #fff; } .blog-entries .page-number li.active a:hover { opacity: 1; } .blog-entries .page-number li a { font-size: 18px; color: #fff; text-decoration: none; width: 50px; height: 50px; display: inline-block; line-height: 50px; text-align: center; background-color: #414141; transition: all 0.5s; } .blog-entries .page-number li a:hover { opacity: 0.5; } .single-blog-post { margin-right: 30px; } .single-blog-post img { width: 100%; overflow-y: hidden; } .single-blog-post .text-content { margin-top: 20px; } .single-blog-post .text-content span { font-size: 16px; font-weight: 200; color: #fff; letter-spacing: 0.5px; border-bottom: 1px solid #414141; padding-bottom: 25px; display: inline-block; width: 100%; margin-bottom: 0px; } .single-blog-post .text-content span a { color: #f4dd5b; text-decoration: none; } .single-blog-post .text-content h2 { margin-top: 0px; font-size: 36px; color: #fff; letter-spacing: 0.5px; text-transform: capitalize; font-weight: 300; } .single-blog-post .text-content p { color: #bbb; font-size: 16px; font-weight: 300; line-height: 28px; margin-top: 20px; margin-bottom: 30px; } .single-blog-post .tags-share { border-top: 1px solid #414141; border-bottom: 1px solid #414141; padding: 8px 0px 10px 0px; } .single-blog-post .tags-share ul { padding: 0; margin: 0; list-style: none; } .single-blog-post .tags-share ul li:first-child { color: #fff; font-size: 16px; font-weight: 200; letter-spacing: 0.5px; } .single-blog-post .tags-share ul li { display: inline-block; color: #fff; } .single-blog-post .tags-share ul li a { font-size: 16px; font-weight: 200; letter-spacing: 0.5px; color: #f4dd5b; text-decoration: none; transition: all 0.5s; } .single-blog-post .tags-share ul li a:hover { opacity: 0.5; } .single-blog-post .tags-share .share { text-align: right; } .blog-entries .search input { background-color: rgba(250, 250, 250, 0.1); width: 100%; height: 50px; line-height: 50px; padding-left: 15px; color: #fff; font-size: 15px; font-weight: 300; border-radius: 0px; outline: none; border: none; } .sidebar-heding h2 { font-size: 20px; text-transform: capitalize; color: #fff; margin-top: 40px; letter-spacing: 0.5px; padding-bottom: 10px; border-bottom: 1px solid #414141; margin-bottom: 20px; } .archives ul, .categories ul { margin-top: -5px; padding: 0; list-style: none; } .archives ul li, .categories ul li { margin-bottom: 12px; } .archives ul li:last-child, .categories ul li:last-child { margin-bottom: 0px; } .archives ul li a, .categories ul li a { font-size: 15px; font-weight: 200; color: #fff; text-decoration: none; letter-spacing: 0.5px; transition: all 0.5s; } .archives ul li a:hover, .categories ul li a:hover { opacity: 0.5; } .recent-posts ul { padding: 0; list-style: none; } .recent-posts ul li { margin-bottom: 15px; } .recent-posts ul a { text-decoration: none; } .recent-posts ul li img { display: inline-block; max-width: 100%; margin-right: 15px; } .recent-posts ul li .text { display: inline-block; } .recent-posts ul li h6 { margin-bottom: 5px; padding-top: 0px; margin-top: 0px; display: block; font-size: 16px; color: #fff; letter-spacing: 0.5px; } .recent-posts ul li span { display: inline-block; font-size: 14px; font-weight: 200; color: #f4dd5b; } .latest-gallery ul { padding: 0; margin: 0; list-style: none; } .latest-gallery ul li { display: inline-block; max-width: 59px; overflow-y: hidden; margin-bottom: 3px; margin-right: 1px; } .latest-gallery ul li:nth-child(4) { margin-right: 0px; } .latest-gallery ul li:nth-child(8) { margin-right: 0px; } .latest-gallery ul li img { width: 100%; transition: all 0.5s; } .latest-gallery ul li img:hover { cursor: pointer; opacity: 0.5; } @media (max-width: 530px) { .modal-header h3 { margin-top: 15%; } .modal-body input { width: 100%; } .modal-body textarea { width: 100%; } .modal-content { padding-bottom: 40px; } .grid-portfolio { padding: 0px 0px; } .grid-portfolio .portfolio-item { margin: 30px 0px; } .grid-portfolio .load-more-button { padding-bottom: 30px; } .more-about-us .content { padding: 60px 30px; } } @media (max-width: 992px) { .blog-entries .blog-posts { margin-right: 0px; } .single-blog-post { margin-right: 0px; margin-bottom: 80px; } .blog-entries .page-number { margin-bottom: 80px; } .single-blog-post .tags-share .tags { text-align: center; } .single-blog-post .tags-share .share { text-align: center; } } /* Custom css*/ .video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio → 9/16 = 0.5625 */ height: 0; overflow: hidden; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Page-wide heart rain: fixed canvas behind everything; it shows through the transparent nav and the black .rain-gap spacers */ #page-rain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } #video-container, .full-screen-portfolio, .grid-portfolio, .atelier, .next-era, footer { position: relative; z-index: 1; } .full-screen-portfolio { background-color: #000; } /* rain strips: exactly as thick as the header bar; the top one sits behind the fixed transparent nav, so the video starts right below it */ .rain-gap { height: 80px; } /* keep every portfolio tile the same height so the rows always align, even if a photo with different dimensions is swapped in later */ .full-screen-portfolio .image { overflow: hidden; } .full-screen-portfolio .image img { width: 100%; aspect-ratio: 466 / 360; object-fit: cover; } /* photos exported with baked-in letterbox bars: zoom in just enough so the picture fills the tile and the rows look aligned */ .full-screen-portfolio .image img.zoom-fill { transform: scale(1.16); } .full-screen-portfolio .image img.zoom-fill-lg { transform: scale(1.38); } /* Atelier interactive croquis section */ .atelier { position: relative; background-color: #0a0a0a; overflow: hidden; text-align: center; padding: 65px 20px 70px 20px; } .atelier-spotlight { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: radial-gradient(circle 360px at var(--spot-x, 50%) var(--spot-y, 40%), rgba(250, 250, 250, 0.07), transparent 70%); } .atelier-rain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .atelier-header { position: relative; } .atelier-kicker { color: rgba(250, 250, 250, 0.5); font-size: 14px; font-weight: 300; letter-spacing: 6px; text-transform: uppercase; margin-bottom: 25px; } .atelier-header h2 { color: #fff; font-size: 40px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 18px 0; } .atelier-sub { color: rgba(250, 250, 250, 0.6); font-size: 16px; font-weight: 300; letter-spacing: 1px; line-height: 28px; max-width: 520px; margin: 0 auto; } .atelier-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 5vw; max-width: 900px; margin: 55px auto 0 auto; } .atelier-stage::after { content: ''; position: absolute; left: -8%; right: -8%; bottom: 86px; height: 1px; background: linear-gradient(90deg, transparent, rgba(250, 250, 250, 0.3), transparent); } .croquis-figure { cursor: pointer; -webkit-user-select: none; user-select: none; transition: transform 0.4s ease-out; will-change: transform; outline: none; } .croquis-figure .croquis { width: clamp(100px, 20vw, 175px); height: auto; display: block; margin: 0 auto; overflow: visible; transition: transform 0.4s ease; } .atelier-stage .croquis-figure:nth-child(2) .croquis { width: clamp(115px, 23vw, 205px); } .croquis-figure:hover .croquis, .croquis-figure:focus .croquis { transform: translateY(-8px); } .croquis path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; } .croquis .base path { stroke: rgba(250, 250, 250, 0.35); stroke-width: 1.6; } .croquis .face path { stroke: rgba(250, 250, 250, 0.75); stroke-width: 1.8; } .croquis .look path { stroke: rgba(250, 250, 250, 0.85); stroke-width: 2.4; } .croquis-figure:hover .look path { stroke: #fff; } .croquis-figure.drawn path { stroke-dashoffset: 0; fill-opacity: 1; } .croquis-caption { margin-top: 28px; margin-bottom: 0; color: rgba(250, 250, 250, 0.55); font-size: 12px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; } .croquis-caption em { font-style: normal; font-weight: 600; color: rgb(255, 166, 255); } .croquis-caption span { transition: opacity 0.25s ease; } .atelier-hint { position: relative; margin-top: 50px; margin-bottom: 0; color: rgba(250, 250, 250, 0.4); font-size: 12px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; } @media (max-width: 767px) { .atelier { padding: 42px 12px 55px 12px; } .atelier-header h2 { font-size: 26px; } .atelier-stage { gap: 3vw; } .croquis-caption { font-size: 9px; letter-spacing: 1px; } .croquis-caption em { display: none; } .atelier-stage::after { bottom: 62px; } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .croquis path { transition: none !important; stroke-dashoffset: 0; fill-opacity: 1; } } /* Next Era closing section */ .next-era { background-color: #0d0d0d; overflow: hidden; text-align: center; } .next-era .marquee { border-top: 1px solid rgba(250, 250, 250, 0.15); border-bottom: 1px solid rgba(250, 250, 250, 0.15); overflow: hidden; white-space: nowrap; padding: 20px 0; } .next-era .marquee-track { display: inline-block; animation: marquee-scroll 30s linear infinite; } .next-era .marquee-track span { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin: 0 20px; } .next-era .marquee-track em { font-style: normal; color: rgba(250, 250, 250, 0.4); font-size: 13px; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .next-era-content { padding: 100px 30px 110px; } .next-era-kicker { color: rgba(250, 250, 250, 0.5); font-size: 14px; font-weight: 300; letter-spacing: 6px; text-transform: uppercase; margin-bottom: 30px; } .next-era-content h2 { color: #fff; font-size: 44px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; line-height: 1.25; margin: 0 0 20px 0; } .next-era-content h2 span { display: block; font-size: 32px; font-weight: 200; letter-spacing: 8px; } .next-era-sub { color: rgba(250, 250, 250, 0.6); font-size: 16px; font-weight: 300; letter-spacing: 1px; line-height: 28px; max-width: 560px; margin: 0 auto 50px auto; } .next-era-cta { display: inline-block; color: #fff; border: 1px solid #fff; padding: 16px 50px; font-size: 14px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; transition: all 0.4s; } .next-era-cta:hover, .next-era-cta:focus { background-color: #fff; color: #0d0d0d; text-decoration: none; } @media (max-width: 767px) { .next-era-content { padding: 70px 20px 80px; } .next-era-content h2 { font-size: 28px; } .next-era-content h2 span { font-size: 20px; letter-spacing: 5px; } } /* Custom Premium Styles Added */ .hero-bg-image { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 900px; height: 100%; max-height: 90vh; object-fit: contain; z-index: 0; pointer-events: none; opacity: 0.9; } .premium-nav { display: flex; gap: 20px; margin-top: 50px; justify-content: center; flex-wrap: wrap; z-index: 10; } .premium-nav-link { position: relative; color: #fff; font-size: 15px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; padding: 14px 28px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 30px; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); overflow: hidden; z-index: 1; } .premium-nav-link::before { content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: #fff; z-index: -1; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .premium-nav-link:hover { color: #000; border-color: #fff; box-shadow: 0 0 20px rgba(255, 255, 255, 0.4); text-decoration: none; } .premium-nav-link:hover::before { width: 100%; } .portfolio-toggle-container { text-align: center; margin: 80px 0 60px; position: relative; z-index: 10; } .premium-btn { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4); padding: 18px 45px; color: #fff; font-size: 16px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; border-radius: 50px; cursor: pointer; transition: all 0.4s ease; outline: none; } .premium-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-5px); box-shadow: 0 15px 40px 0 rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.6); } /* toggle button inside the hero (was an inline style on index.html) */ #video-container .hero-toggle { margin: 55px 0 0; } /* compact hero for phones: smaller type and tighter spacing so the background illustration stays visible */ @media (max-width: 767px) { #video-container { min-height: 480px; } /* pin the illustration to the bottom of the hero: no dead band under her art-deco border, and the beret reaches up to the nav bar */ .hero-bg-image { height: 93%; max-height: none; width: auto; max-width: none; top: auto; bottom: 0; transform: translateX(-50%); } #video-container .video-content .inner h1 { letter-spacing: 1px; } .premium-nav { gap: 12px; margin-top: 28px; padding: 0 10px; } .premium-nav-link { font-size: 12px; letter-spacing: 1.5px; padding: 10px 20px; } #video-container .hero-toggle { margin: 32px 0 0; } .premium-btn { font-size: 13px; letter-spacing: 3px; padding: 14px 32px; } } /* Backstage moodboard: polaroids taped to the wall, revealed by the Explore Portfolio toggle */ .moodboard-section { position: relative; padding: 85px 6vw 90px 6vw; overflow: hidden; } .moodboard-rain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .moodboard-spot { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: radial-gradient(circle 460px at var(--mx, 50%) var(--my, 25%), rgba(250,250,250,0.1), transparent 70%); } .moodboard-header { position: relative; text-align: center; margin-bottom: 60px; } .moodboard-kicker { color: rgba(250,250,250,0.5); font-size: 14px; font-weight: 300; letter-spacing: 6px; text-transform: uppercase; margin-bottom: 25px; } .moodboard-header h2 { color: #fff; font-size: 40px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 18px 0; } .moodboard-sub { color: rgba(250,250,250,0.6); font-size: 16px; font-weight: 300; letter-spacing: 1px; line-height: 28px; max-width: 520px; margin: 0 auto; } .moodboard { position: relative; display: grid; /* 9 pieces = balanced 3x3 wall on desktop */ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 55px 40px; max-width: 980px; margin: 0 auto; } /* polaroids sketched in the same bone-white line work as the hero illustration: ink outline on black instead of white paper */ .polaroid { position: relative; display: block; background: rgba(10, 10, 10, 0.92); /* stitched seam instead of a hairline: the dashes are broken on purpose, so rotation can't leave a visible pixel staircase, and it echoes the dashed seams on the hero jacket illustration */ border: 2px dashed rgba(236, 229, 215, 0.65); border-radius: 2px; padding: 12px 12px 0 12px; box-shadow: 0 14px 34px rgba(0,0,0,0.55), 0 0 1px 0 rgba(236,229,215,0.4); outline: 1px solid transparent; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; text-decoration: none; } /* second, slightly tilted stroke so the frame feels hand-drawn */ /* second, slightly tilted stitch run: hand-sewn double seam */ .polaroid::before { content: ''; position: absolute; top: -7px; left: -7px; right: -7px; bottom: -7px; border: 1px dashed rgba(236, 229, 215, 0.3); border-radius: 2px; transform: rotate(0.9deg); pointer-events: none; } .polaroid-frame { display: block; overflow: hidden; aspect-ratio: 1 / 1.04; background: #101010; /* thicker solid line: at 2px the antialiasing has room to blend, so the slight rotation no longer reads as jagged */ border: 2px solid rgba(236, 229, 215, 0.5); border-radius: 1px; box-shadow: 0 0 1px 0 rgba(236,229,215,0.35); } .polaroid-frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.94) contrast(1.05); pointer-events: none; } /* photos exported with baked-in letterbox bars: zoom past the bars */ .polaroid-frame img.zoom-fill { transform: scale(1.18); } .polaroid-frame img.zoom-fill-lg { transform: scale(1.4); } .polaroid-caption { display: block; padding: 12px 6px 14px 6px; color: #ece5d7; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; } .polaroid-caption em { display: block; margin-top: 2px; font-style: normal; font-weight: 300; font-size: 10px; letter-spacing: 3px; color: rgba(236, 229, 215, 0.5); } .tape { position: absolute; top: -13px; left: 50%; width: 92px; height: 28px; transform: translateX(-50%) rotate(var(--tape-rot, -3deg)); background: rgba(236, 229, 215, 0.12); border: 1px solid rgba(236, 229, 215, 0.4); /* no backdrop-filter here: it forced the whole card onto a GPU layer that gets rotated without edge antialiasing, pixelating the lines */ box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 1px 0 rgba(236,229,215,0.3); outline: 1px solid transparent; pointer-events: none; } /* hidden state: undeveloped film, sunk below its pin */ .moodboard .polaroid { opacity: 0; transform: rotate(var(--rot, 0deg)) translate(var(--dx, 0px), calc(var(--dy, 0px) + 46px)) scale(0.86); filter: brightness(0.15) saturate(0); } /* revealed: develop to full color and settle into the scatter */ .moodboard.revealed .polaroid { opacity: 1; transform: rotate(var(--rot, 0deg)) translate(var(--dx, 0px), var(--dy, 0px)); filter: none; transition: opacity 0.6s ease, filter 1.2s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15), box-shadow 0.45s ease; } .moodboard.revealed .polaroid:hover, .moodboard.revealed .polaroid:focus { transform: rotate(0deg) translate(var(--dx, 0px), var(--dy, 0px)) scale(1.06); border-color: rgba(250, 250, 250, 0.95); box-shadow: 0 28px 60px rgba(0,0,0,0.75), 0 0 22px rgba(250,250,250,0.18); z-index: 60; text-decoration: none; transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15), border-color 0.45s ease, box-shadow 0.45s ease; } .moodboard.revealed .polaroid.dragging { transition: none; cursor: grabbing; } .moodboard-hint { position: relative; text-align: center; margin: 55px 0 0 0; color: rgba(250,250,250,0.4); font-size: 12px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; } .moodboard-shuffle { display: block; margin: 26px auto 0 auto; padding: 12px 34px; font-size: 12px; letter-spacing: 3px; } @media (max-width: 767px) { .moodboard-section { padding: 60px 18px 70px 18px; } .moodboard-header h2 { font-size: 26px; } .moodboard { grid-template-columns: repeat(2, 1fr); gap: 36px 18px; } .polaroid { padding: 8px 8px 0 8px; } .polaroid-caption { font-size: 10px; letter-spacing: 1px; padding: 9px 4px 10px 4px; } .polaroid-caption em { font-size: 8px; letter-spacing: 2px; } .tape { width: 62px; height: 20px; top: -9px; } } @media (prefers-reduced-motion: reduce) { .moodboard .polaroid { opacity: 1; transform: rotate(var(--rot, 0deg)) translate(var(--dx, 0px), var(--dy, 0px)); filter: none; transition: none !important; } } /* Tokio touch: page fade, hero entrance, sparkles, tile reveals */ html { scroll-behavior: smooth; } ::selection { background: #f4aac8; color: #000; } body::-webkit-scrollbar-thumb { background: rgba(244, 170, 200, 0.55); } body { animation: page-in 0.35s ease; } body.page-leave { opacity: 0; transition: opacity 0.2s ease; } @keyframes page-in { from { opacity: 0; } to { opacity: 1; } } .hero-ch { display: inline-block; opacity: 0; transform: translateY(0.55em) rotate(4deg); animation: hero-ch 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } @keyframes hero-ch { to { opacity: 1; transform: none; } } .hero-fade { opacity: 0; animation: hero-fade 0.8s ease forwards; } @keyframes hero-fade { to { opacity: 1; } } .sparkle { position: fixed; z-index: 9999; pointer-events: none; line-height: 1; animation: sparkle-fly 0.75s ease-out forwards; will-change: transform, opacity; } @keyframes sparkle-fly { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); opacity: 0; } } .tiles-animate .portfolio-item { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; } .tiles-animate .portfolio-item.tile-in { opacity: 1; transform: none; } .atelier-shuffle { position: relative; margin-top: 26px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body { animation: none; } .hero-ch, .hero-fade { animation: none; opacity: 1; transform: none; } .tiles-animate .portfolio-item { opacity: 1; transform: none; transition: none; } } /* Collections: shared editorial header + segmented tab bar for the Music Videos / Advertising / Merch pages */ .collection-head { position: relative; z-index: 1; text-align: center; padding: 55px 20px 15px 20px; } .collection-kicker { color: rgba(250,250,250,0.5); font-size: 14px; font-weight: 300; letter-spacing: 6px; text-transform: uppercase; margin-bottom: 22px; } .collection-head h1 { color: #fff; font-size: clamp(30px, 6vw, 44px); font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 16px 0; } .collection-sub { color: rgba(250,250,250,0.6); font-size: 15px; font-weight: 300; letter-spacing: 1px; line-height: 26px; max-width: 520px; margin: 0 auto; } .collection-tabs { display: inline-flex; margin-top: 32px; border: 1px solid rgba(250,250,250,0.3); } .collection-tabs a { display: block; padding: 13px 30px; color: rgba(250,250,250,0.7); font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; border-right: 1px solid rgba(250,250,250,0.3); transition: all 0.3s ease; white-space: nowrap; } .collection-tabs a:last-child { border-right: none; } .collection-tabs a:hover, .collection-tabs a:focus { color: #fff; background: rgba(250,250,250,0.1); text-decoration: none; } .collection-tabs a.active { background: #f4aac8; color: #000; font-weight: 600; } @media (max-width: 600px) { .collection-tabs a { padding: 11px 14px; font-size: 10px; letter-spacing: 2px; } } /* Lite YouTube embeds: thumbnail facade, real iframe only on click */ .yt-lite { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; padding: 0; border: none; background: #000; cursor: pointer; overflow: hidden; outline: none; } .yt-lite img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.4s ease, transform 0.4s ease; } .yt-lite:hover img, .yt-lite:focus img { opacity: 1; transform: scale(1.03); } .yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 66px; height: 46px; background: rgba(0, 0, 0, 0.75); border: 1px solid rgba(250,250,250,0.5); border-radius: 10px; transition: all 0.3s ease; } .yt-play::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; transition: border-left-color 0.3s ease; } .yt-lite:hover .yt-play, .yt-lite:focus .yt-play { background: #f4aac8; border-color: #f4aac8; box-shadow: 0 0 26px rgba(244, 170, 200, 0.5); } .yt-lite:hover .yt-play::after, .yt-lite:focus .yt-play::after { border-left-color: #000; } /* Home panels: every collection lives on the home page now. One opens at a time, driven by the hero links, and each gets the staging that suits it — a film strip, a TV set, a rail of hangers. */ .home-panel { position: relative; z-index: 1; /* the bar is fixed on top, so anchors have to stop short of it */ scroll-margin-top: 80px; } /* a hairline where one collection hands over to the next, so the long scroll still reads as rooms rather than one endless page */ .home-panel::before, .atelier::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(760px, 78%); height: 1px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(244, 170, 200, 0.4), transparent); } /* nothing folds away any more, so the entrance is tied to arriving at the section — and only when JS is around to give it back */ .js-reveal .home-panel { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .js-reveal .home-panel.is-in { opacity: 1; transform: none; } /* the hero links are anchors now, so they need the type reset */ a.premium-nav-link { display: inline-block; font-family: inherit; line-height: normal; cursor: pointer; } /* the chevron no longer opens anything — it points at where the link is about to take you, and leans that way when you reach for it */ .nav-chev { display: inline-block; margin-left: 8px; font-size: 11px; opacity: 0.5; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease; } .premium-btn .nav-chev { font-size: 12px; } .premium-nav-link:hover .nav-chev, .premium-nav-link:focus-visible .nav-chev { opacity: 1; transform: translateY(3px); } .premium-nav-link.is-active { border-color: rgba(244, 170, 200, 0.65); } .panel-head { padding-top: 70px; } .panel-hint { position: relative; text-align: center; margin: 45px 0 0 0; color: rgba(250, 250, 250, 0.4); font-size: 12px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; } .panel-close { display: block; margin: 26px auto 0 auto; padding: 12px 34px; font-size: 12px; letter-spacing: 3px; } /* the browser's default focus ring reads as a yellow box on this palette; swap it for a pink one, and only when keyboard-driven */ .home-panel :focus, .premium-nav-link:focus, .premium-btn:focus { outline: none; } .home-panel :focus-visible, .premium-nav-link:focus-visible, .premium-btn:focus-visible { outline: 2px solid #f4aac8; outline-offset: 3px; } /* The screening room: the reel as a strip of film you drag sideways */ .screening-room { padding-bottom: 80px; } .filmstrip-wrap { position: relative; margin-top: 46px; padding: 24px 0; background: rgba(8, 8, 8, 0.72); border-top: 1px solid rgba(236, 229, 215, 0.18); border-bottom: 1px solid rgba(236, 229, 215, 0.18); } /* sprocket holes punched along both edges of the strip */ .film-perf { position: absolute; left: 0; right: 0; height: 24px; pointer-events: none; background-image: radial-gradient(circle 4.5px at 18px 12px, rgba(236, 229, 215, 0.45) 96%, transparent 100%); background-size: 38px 24px; } .film-perf.top { top: 0; } .film-perf.bottom { bottom: 0; } .filmstrip { display: flex; gap: 16px; padding: 6px 5vw; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; } .filmstrip::-webkit-scrollbar { display: none; } .filmstrip.grabbing { cursor: grabbing; scroll-snap-type: none; } .film-cell { position: relative; flex: 0 0 clamp(240px, 30vw, 360px); aspect-ratio: 16 / 9; scroll-snap-align: center; background: #000; border: 1px solid rgba(236, 229, 215, 0.22); overflow: hidden; transition: border-color 0.35s ease, box-shadow 0.35s ease; } .film-cell:hover { border-color: rgba(244, 170, 200, 0.75); box-shadow: 0 0 26px rgba(244, 170, 200, 0.22); } .film-num { position: absolute; left: 10px; bottom: 8px; z-index: 2; color: rgba(236, 229, 215, 0.75); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); pointer-events: none; } .strip-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; padding: 0 0 4px 0; color: #fff; font-size: 26px; line-height: 1; background: rgba(10, 10, 10, 0.75); border: 1px solid rgba(236, 229, 215, 0.4); border-radius: 50%; cursor: pointer; outline: none; transition: all 0.3s ease; } .strip-arrow.prev { left: 12px; } .strip-arrow.next { right: 12px; } .strip-arrow:hover { background: #f4aac8; border-color: #f4aac8; color: #000; } .strip-arrow.is-off { opacity: 0.2; pointer-events: none; } /* On air: one TV set, every campaign a channel */ .onair { padding-bottom: 80px; } .tv-set { max-width: 900px; margin: 46px auto 0 auto; padding: 0 5vw; } .tv-screen { position: relative; aspect-ratio: 16 / 9; background: #000; border: 2px solid rgba(236, 229, 215, 0.35); border-radius: 16px; overflow: hidden; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(10, 10, 10, 0.9); } .tv-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: #000; } .tv-scanlines { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; opacity: 0.35; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0 1px, transparent 1px 3px); } .onair-badge { position: absolute; top: 14px; left: 16px; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 5px 12px; color: rgba(250, 250, 250, 0.9); font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(236, 229, 215, 0.3); border-radius: 30px; pointer-events: none; } .onair-badge i { width: 7px; height: 7px; border-radius: 50%; background: #f4aac8; animation: onair-pulse 1.6s ease-in-out infinite; } @keyframes onair-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(244, 170, 200, 0.9); } 50% { opacity: 0.35; box-shadow: none; } } /* a beat of static while the set changes channel */ .tv-screen.tuning::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 4; background: repeating-linear-gradient(to bottom, rgba(250, 250, 250, 0.22) 0 2px, rgba(0, 0, 0, 0.8) 2px 4px); animation: tv-static 0.24s steps(3) infinite; } @keyframes tv-static { 0% { transform: translateY(0); opacity: 0.9; } 50% { transform: translateY(-3px); opacity: 0.55; } 100% { transform: translateY(2px); opacity: 0.9; } } .tv-caption { margin: 22px 0 0 0; text-align: center; color: #ece5d7; font-size: 15px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; } .tv-caption em { display: block; margin-top: 5px; font-style: normal; font-weight: 300; font-size: 10px; letter-spacing: 4px; color: rgba(236, 229, 215, 0.5); } .channel-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 900px; margin: 34px auto 0 auto; padding: 0 5vw; } .channel { display: block; width: 132px; padding: 8px 8px 10px 8px; background: rgba(250, 250, 250, 0.04); border: 1px solid rgba(236, 229, 215, 0.22); cursor: pointer; outline: none; text-align: center; transition: all 0.3s ease; } .channel-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } .channel-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.65; transition: opacity 0.3s ease; } .channel-name { display: block; margin-top: 9px; color: rgba(250, 250, 250, 0.8); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; } .channel-no { display: block; margin-top: 3px; color: rgba(236, 229, 215, 0.4); font-size: 9px; font-weight: 300; letter-spacing: 3px; } .channel:hover { border-color: rgba(250, 250, 250, 0.6); transform: translateY(-3px); } .channel:hover .channel-thumb img { opacity: 1; } .channel.active { border-color: #f4aac8; background: rgba(244, 170, 200, 0.1); box-shadow: 0 0 22px rgba(244, 170, 200, 0.2); } .channel.active .channel-thumb img { opacity: 1; } .channel.active .channel-name { color: #f4aac8; } /* The rack: pieces hanging off a rail */ .rack-room { padding-bottom: 90px; } .rack { display: grid; grid-template-columns: repeat(5, 1fr); gap: 62px 26px; max-width: 1100px; margin: 70px auto 0 auto; padding: 0 5vw; } .hanger { position: relative; display: block; text-decoration: none; } .hanger:hover, .hanger:focus { text-decoration: none; } /* the rail: the overhang bridges the grid gap so a whole row reads as one continuous bar */ .hanger::before { content: ''; position: absolute; top: 0; left: -14px; right: -14px; height: 3px; border-radius: 2px; background: linear-gradient(to bottom, rgba(236, 229, 215, 0.8), rgba(236, 229, 215, 0.2)); } .swing { display: block; position: relative; padding-top: 30px; transform-origin: 50% 0; } .hanger:hover .swing, .hanger:focus .swing { animation: hanger-swing 1.2s ease-in-out; } @keyframes hanger-swing { 0% { transform: rotate(0deg); } 22% { transform: rotate(2.6deg); } 48% { transform: rotate(-1.9deg); } 72% { transform: rotate(1.1deg); } 88% { transform: rotate(-0.5deg); } 100% { transform: rotate(0deg); } } .hanger-hook { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 58px; height: 33px; fill: none; stroke: rgba(236, 229, 215, 0.7); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: stroke 0.35s ease; } .hanger:hover .hanger-hook { stroke: #f4aac8; } .garment { display: block; overflow: hidden; aspect-ratio: 3 / 4; background: #101010; border: 2px solid rgba(236, 229, 215, 0.4); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); transition: border-color 0.35s ease, box-shadow 0.35s ease; } .garment img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.94) contrast(1.05); transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .hanger:hover .garment { border-color: rgba(244, 170, 200, 0.85); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.7), 0 0 24px rgba(244, 170, 200, 0.18); } .hanger:hover .garment img { transform: scale(1.06); } /* the little cardboard tag stapled to the hem */ .price-tag { display: block; width: 74px; margin: 12px auto 0 auto; padding: 7px 4px 8px 4px; color: #ece5d7; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-align: center; background: rgba(10, 10, 10, 0.9); border: 1px dashed rgba(236, 229, 215, 0.55); transform: rotate(-2.5deg); transition: transform 0.35s ease, border-color 0.35s ease; } .price-tag em { display: block; margin-top: 3px; font-style: normal; font-weight: 300; font-size: 9px; letter-spacing: 3px; color: rgba(236, 229, 215, 0.5); } .hanger:hover .price-tag { transform: rotate(2deg); border-color: rgba(244, 170, 200, 0.7); } @media (max-width: 991px) { .rack { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .panel-head { padding-top: 50px; } .filmstrip-wrap { margin-top: 32px; } .filmstrip { padding: 6px 20px; } .film-cell { flex: 0 0 78vw; } .strip-arrow { display: none; } .tv-set, .channel-strip, .rack { padding: 0 18px; } .tv-screen { border-radius: 10px; } .channel { width: 116px; } .rack { grid-template-columns: repeat(2, 1fr); gap: 48px 20px; margin-top: 50px; } .panel-hint { letter-spacing: 2px; font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .js-reveal .home-panel { opacity: 1; transform: none; transition: none; } .hero-scroll-line::after { animation: none; } .hanger:hover .swing, .hanger:focus .swing { animation: none; } .onair-badge i, .tv-screen.tuning::after { animation: none; } } /* You in the Spotlight — the road a one-off commission walks. Five stations threaded on one continuous winding path that stitches itself as you scroll, with a spark travelling at the head of it. */ .spotlight-room { padding-bottom: 70px; overflow: hidden; /* the only place on the page with long copy, so the rain gets a veil here — still falling, no longer competing */ background: rgba(6, 6, 6, 0.84); } /* the light that follows the cursor, same trick as the atelier */ .room-spotlight { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle 200px at var(--spot-x, 50%) var(--spot-y, 30%), rgba(244, 221, 91, 0.05), transparent 70%), radial-gradient(circle 460px at var(--spot-x, 50%) var(--spot-y, 30%), rgba(250, 250, 250, 0.075), transparent 72%); } .spotlight-room > *:not(.room-spotlight) { position: relative; z-index: 1; } .journey { position: relative; max-width: 940px; margin: 50px auto 0 auto; padding: 0 24px; } /* the road itself, drawn behind the stations */ .journey-road { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; } .road-line { fill: none; stroke: rgba(250, 250, 250, 0.3); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } /* the running stitch laid along it */ .road-stitch { fill: none; stroke: rgba(244, 170, 200, 0.45); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .road-spark path { fill: #f4dd5b; stroke: none; opacity: 0; transition: opacity 0.7s ease; } .road-spark path.lit { opacity: 0.75; } .road-spark path.heart { fill: #f4aac8; } /* the spark walking the road, always at the head of what you have drawn */ .traveller { opacity: 0; transition: opacity 0.5s ease; } .traveller.on { opacity: 1; } .traveller-halo { fill: #f4aac8; opacity: 0.16; animation: traveller-breathe 2.4s ease-in-out infinite; } .traveller-core { fill: #f4dd5b; } @keyframes traveller-breathe { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.28; } } /* the stations */ .stop { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 96px 1fr; align-items: center; } .stop + .stop { margin-top: 200px; } /* the drawing and its marker are the handles: tap either to draw it again */ .stop-art, .stop-node { cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; } .stop-art { grid-row: 1; grid-column: 1; position: relative; display: flex; justify-content: center; } /* the section is called the spotlight: once a vignette has finished drawing itself, a soft beam blooms behind it */ .stop-art::before { content: ''; position: absolute; top: 50%; left: 50%; width: clamp(220px, 34vw, 360px); height: clamp(220px, 34vw, 360px); border-radius: 50%; background: radial-gradient(circle, rgba(244, 170, 200, 0.09) 0%, rgba(244, 221, 91, 0.05) 40%, transparent 68%); opacity: 0; transform: translate(-50%, -50%) scale(0.6); transition: opacity 1.4s ease 0.5s, transform 1.4s cubic-bezier(0.2, 0.9, 0.3, 1.1) 0.5s; pointer-events: none; } .stop.drawn .stop-art::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } .stop-node { grid-row: 1; grid-column: 2; position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; } .stop-copy { grid-row: 1; grid-column: 3; text-align: left; padding-left: 26px; } /* every other station mirrors, so the road weaves between the vignettes */ .stop.flip .stop-art { grid-column: 3; } .stop.flip .stop-copy { grid-column: 1; text-align: right; padding-left: 0; padding-right: 26px; } .node-dot { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(250, 250, 250, 0.35); background: #090909; box-shadow: 0 0 0 7px rgba(9, 9, 9, 0.92); transform: scale(0.4); opacity: 0; transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3), opacity 0.5s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .node-no { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #f4aac8; font-size: 13px; font-weight: 600; letter-spacing: 1px; opacity: 0; transition: opacity 0.5s ease 0.25s; } .stop.drawn .node-dot { transform: scale(1); opacity: 1; } .stop.drawn .node-no { opacity: 1; } /* the station you are pointing at lights up */ .stop:hover .node-dot, .stop.held .node-dot, .stop-art:focus-visible + .stop-node .node-dot { border-color: rgba(244, 170, 200, 0.85); box-shadow: 0 0 0 7px rgba(9, 9, 9, 0.92), 0 0 22px rgba(244, 170, 200, 0.35); } /* the vignettes */ .vignette { position: relative; z-index: 1; width: clamp(150px, 24vw, 240px); height: auto; display: block; transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .stop:hover .vignette, .stop.held .vignette, .stop-art:focus-visible .vignette { transform: translateY(-9px); } .vignette path { fill: none; stroke: rgba(250, 250, 250, 0.8); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; /* --d staggers each stroke; the fill lands once its outline has closed */ transition-property: stroke-dashoffset, fill-opacity; transition-duration: 0.9s, 0.7s; transition-timing-function: ease, ease; transition-delay: var(--d, 0s), calc(var(--d, 0s) + 0.55s); } .vignette path.faint { stroke: rgba(250, 250, 250, 0.34); stroke-width: 1.5; } .vignette path.soft { fill: rgba(250, 250, 250, 0.14); } .vignette path.ink { fill: #f4aac8; stroke: #f4aac8; } .vignette path.glint { fill: #f4dd5b; stroke: #f4dd5b; } .stop.drawn .vignette path { stroke-dashoffset: 0; fill-opacity: 1; } .stop:hover .vignette path, .stop.held .vignette path { stroke: #fff; } .stop:hover .vignette path.faint, .stop.held .vignette path.faint { stroke: rgba(250, 250, 250, 0.5); } .stop:hover .vignette path.ink, .stop.held .vignette path.ink { stroke: #f4aac8; } .stop:hover .vignette path.glint, .stop.held .vignette path.glint { stroke: #f4dd5b; } /* the words */ .stop-copy > * { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .stop.drawn .stop-copy > * { opacity: 1; transform: none; } .stop.drawn .stop-kicker { transition-delay: 0.15s; } .stop.drawn .stop-copy h3 { transition-delay: 0.25s; } .stop.drawn .stop-text { transition-delay: 0.35s; } .stop.drawn .stop-meta { transition-delay: 0.45s; } .stop-kicker { margin: 0 0 12px 0; color: rgba(250, 250, 250, 0.45); font-size: 11px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; } .stop-copy h3 { margin: 0 0 16px 0; color: #fff; font-size: 25px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; line-height: 32px; } .stop-text { margin: 0 0 16px 0; color: rgba(250, 250, 250, 0.62); font-size: 15px; font-weight: 300; line-height: 27px; } .stop-meta { margin: 0; color: rgba(244, 170, 200, 0.7); font-size: 11px; font-weight: 300; letter-spacing: 2.5px; text-transform: uppercase; } /* the invitation the road arrives at */ .journey-cta { position: relative; z-index: 1; text-align: center; margin-top: 150px; } .journey-cta-line { margin: 0 0 24px 0; color: rgba(250, 250, 250, 0.55); font-size: 14px; font-weight: 300; letter-spacing: 2px; } a.premium-btn { display: inline-block; text-decoration: none; } a.premium-btn:hover, a.premium-btn:focus { color: #fff; text-decoration: none; } @media (max-width: 767px) { .journey { padding: 0 14px; margin-top: 40px; } /* the road runs down the left and the stations stack beside it */ .stop, .stop.flip { grid-template-columns: 52px 1fr; } .stop + .stop { margin-top: 130px; } .stop-art, .stop.flip .stop-art { grid-row: 1; grid-column: 2; justify-content: flex-start; } .stop-copy, .stop.flip .stop-copy { grid-row: 2; grid-column: 2; text-align: left; padding: 4px 0 0 4px; } .stop-node, .stop.flip .stop-node { grid-row: 1 / span 2; grid-column: 1; align-items: flex-start; padding-top: 30px; } .node-dot { width: 40px; height: 40px; } .node-no { top: 50px; font-size: 11px; } .vignette { width: clamp(130px, 44vw, 190px); } .stop-copy h3 { font-size: 20px; line-height: 27px; } .stop-text { font-size: 14px; line-height: 25px; } .stop-meta { letter-spacing: 1.5px; } .journey-cta { margin-top: 110px; } } @media (prefers-reduced-motion: reduce) { .vignette, .vignette path, .node-dot, .node-no, .road-spark path, .traveller, .stop-copy > * { transition: none !important; } .traveller-halo { animation: none; } } /* --------------------------------------------------------------- The bar. Every collection on this page is open all the time, so the menu has one job left: say where you are and get you somewhere else fast. Over the hero it is only the logo — the big hero links are still right there. From the first scroll on, it carries the whole menu, lights the section you are standing in, and draws how far down the page you have come. --------------------------------------------------------------- */ nav { background: rgba(10, 10, 10, 0.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 0.45s ease, box-shadow 0.45s ease; } nav.is-browsing { background: rgba(8, 8, 8, 0.88); box-shadow: 0 2px 26px rgba(0, 0, 0, 0.7); } .nav-inner { position: relative; display: flex; align-items: center; gap: 18px; height: 80px; padding: 0 26px; } /* the arrow only exists while the strip has somewhere left to go */ .nav-more { display: none; position: absolute; right: 4px; top: 50%; width: 27px; height: 27px; margin-top: -13px; padding: 0 0 2px 1px; align-items: center; justify-content: center; color: #f4aac8; font-size: 19px; line-height: 1; background: rgba(10, 10, 10, 0.82); border: 1px solid rgba(244, 170, 200, 0.45); border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } nav.is-browsing.has-more-right .nav-more { opacity: 1; pointer-events: auto; /* three small leans, then it stops asking */ animation: moreLean 2.2s ease-in-out 3; } @keyframes moreLean { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(3px); } } /* the logo floated when it was alone in the bar; it has company now */ nav .logo { float: none; margin-left: 0; flex: 0 0 auto; } .nav-sections { flex: 1 1 auto; display: flex; justify-content: flex-end; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; /* asleep while the hero is on screen — and properly out of the way: visibility keeps it off the tab order too, not just out of sight */ opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0.45s; } .nav-sections::-webkit-scrollbar { display: none; } nav.is-browsing .nav-sections { opacity: 1; transform: none; visibility: visible; transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0s; } .nav-section-link { flex: 0 0 auto; color: rgba(250, 250, 250, 0.62); font-size: 11px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; white-space: nowrap; padding: 9px 16px; border: 1px solid transparent; border-radius: 30px; transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease; } .nav-section-link:hover, .nav-section-link:focus { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .nav-section-link.is-active { color: #0a0a0a; background: #f4aac8; border-color: #f4aac8; box-shadow: 0 0 18px rgba(244, 170, 200, 0.4); } .nav-section-link:focus-visible { outline: 2px solid #f4aac8; outline-offset: 3px; } /* how far down the page you are, drawn along the bottom of the bar */ .nav-progress { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.06); } .nav-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(244, 170, 200, 0.35), #f4aac8); box-shadow: 0 0 12px rgba(244, 170, 200, 0.55); } /* the cue at the foot of the hero: the page keeps going, and it says so */ .hero-scroll { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10; display: inline-flex; flex-direction: column; align-items: center; gap: 9px; color: rgba(250, 250, 250, 0.5); font-size: 10px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; text-decoration: none; transition: color 0.35s ease; } .hero-scroll:hover, .hero-scroll:focus { color: #f4aac8; text-decoration: none; } .hero-scroll-line { position: relative; width: 1px; height: 44px; background: linear-gradient(rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.55)); } /* a bead running down the thread, the way the rain does */ .hero-scroll-line::after { content: ""; position: absolute; left: -1px; top: 0; width: 3px; height: 3px; border-radius: 50%; background: #f4aac8; animation: heroDrop 2.4s ease-in-out infinite; } @keyframes heroDrop { 0% { transform: translateY(-4px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(44px); opacity: 0; } } @media (max-width: 991px) { nav, .nav-inner { height: 66px; } nav .logo a { font-size: 23px; line-height: 66px; } .nav-inner { gap: 10px; padding: 0 14px; } /* No room to right-align six pills on a phone: the strip starts at the left and slides, and the active pill is scrolled into sight. Whichever side still has links dissolves into the bar instead of ending on a clean edge — a cut-off pill is what tells you to keep swiping. */ .nav-sections { justify-content: flex-start; gap: 4px; --fade-l: 0px; --fade-r: 0px; /* let the strip bleed to the edge so it reads as scrollable */ margin-right: -14px; padding-right: 36px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); } nav.has-more-left .nav-sections { --fade-l: 28px; } nav.has-more-right .nav-sections { --fade-r: 44px; } .nav-more { display: flex; } .nav-section-link { font-size: 10px; letter-spacing: 1.5px; padding: 8px 12px; } .home-panel { scroll-margin-top: 66px; } .hero-scroll { display: none; } } /* --------------------------------------------------------------- The hero menu, as one zip. Downstairs every section is held by a single object — the reel holds the videos, the rail holds the merch, the wall holds the polaroids. The menu is one object too, and it had to be one that belongs to this page rather than to fashion in general: a tape measure reads couture atelier, this site reads Tokyo at night. A zip is the same idea in the right accent — hardware, streetwear, punk — and it earns the place by doing something no drawn menu can: the slider travels to whatever you point at, with a heart charm swinging off it. Nothing is painted behind any of it. Two hairlines, a run of teeth and a row of type — the line art in the hero stays the loudest thing on the screen. --------------------------------------------------------------- */ .zip-menu { position: relative; z-index: 10; display: flex; flex-direction: column; /* narrower than the hero on purpose: with air at both ends and hardware on the tips it reads as an object lying on the drawing, not a rule drawn across it */ width: min(780px, 90vw); /* the pull dangles below the teeth and needs its own air */ margin: 44px auto 0 auto; padding-bottom: 30px; } .zip-marks { display: flex; align-items: flex-end; } .zip-mark { flex: 1 1 auto; padding: 0 12px 11px 12px; color: rgba(255, 255, 255, 0.75); font-size: 11px; font-weight: 400; letter-spacing: 2.4px; -webkit-tap-highlight-color: transparent; text-align: center; text-transform: uppercase; text-decoration: none; white-space: nowrap; /* nothing is painted behind the type, so it carries its own contrast for wherever the line art underneath turns pale */ text-shadow: 0 1px 7px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.7); transition: color 0.3s ease; } /* every state by hand: the browser defaults for anchors — Bootstrap's blue focus text, the gold auto outline ring — read as glitches here. The slider running to the mark IS the focus indicator, so nothing else needs to light up. */ .zip-mark:hover, .zip-mark:focus, .zip-mark:focus-visible, .zip-mark:active, .zip-mark.is-active { color: #fff; text-decoration: none; outline: 0; } /* the zip itself: worn open behind the slider, meshed ahead of it. Tapes, teeth, the mouth and its lining are one little SVG that collections.js redraws as the slider travels, so the opening is a live shape rather than a painted line. */ .zip-track { position: relative; height: 30px; } .zip-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; overflow: visible; } /* the slider, and the charm hanging off it */ .zip-slider { position: absolute; /* measured off the bottom so it straddles the teeth whatever height the row of labels above it ends up being */ top: auto; bottom: 33px; left: 0; width: 27px; height: 25px; pointer-events: none; transform: translateX(var(--zip-x, 0px)); transition: transform 0.55s cubic-bezier(0.3, 1.15, 0.4, 1); } /* dark chrome with a lit rim: the teeth are the pale thing here, so the slider has to be the opposite of them or it disappears into the line */ .zip-body { display: block; width: 100%; height: 100%; border-radius: 4px 4px 9px 9px; background: linear-gradient(180deg, rgba(248, 246, 242, 0.95), rgba(96, 94, 90, 0.9) 46%, rgba(14, 14, 14, 0.95)); box-shadow: 0 0 14px rgba(244, 170, 200, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 2px 6px rgba(0, 0, 0, 0.6); } /* the slot the tape runs through */ .zip-body::after { content: ""; position: absolute; left: 50%; top: 5px; width: 3.5px; height: 10px; margin-left: -1.75px; border-radius: 2px; background: rgba(10, 10, 10, 0.7); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22); } .zip-pull { position: absolute; top: 22px; left: 50%; width: 18px; height: 26px; margin-left: -9px; transform-origin: 50% 1px; animation: pullIdle 5s ease-in-out infinite; } /* the little link between slider and charm */ .zip-pull::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 6px; margin-left: -0.5px; background: rgba(236, 229, 215, 0.7); } .zip-charm { position: absolute; left: 0; top: 6px; width: 18px; height: 18px; fill: #f4aac8; stroke: rgba(255, 255, 255, 0.6); stroke-width: 0.9; filter: drop-shadow(0 0 6px rgba(244, 170, 200, 0.6)); } /* it hangs, so it never sits perfectly still */ @keyframes pullIdle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } /* and it swings properly when the slider runs down the zip */ .zip-slider.is-sliding .zip-pull { animation: pullSwing 0.85s cubic-bezier(0.3, 1, 0.4, 1); } @keyframes pullSwing { 0% { transform: rotate(0deg); } 25% { transform: rotate(-19deg); } 55% { transform: rotate(11deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } /* On a phone the zip hangs the other way — the same object turned ninety degrees, teeth down the left, the charm swinging clear of the type. */ @media (max-width: 767px) { .zip-menu { flex-direction: row-reverse; justify-content: flex-end; width: min(236px, 74vw); margin-top: 30px; padding: 0 0 0 22px; } .zip-marks { flex: 1 1 auto; flex-direction: column; align-items: flex-start; } .zip-mark { width: 100%; padding: 12px 4px 12px 14px; font-size: 10px; letter-spacing: 1.6px; text-align: left; } .zip-track { flex: 0 0 24px; width: 24px; height: auto; } .zip-slider { top: 0; bottom: auto; left: 23px; width: 21px; height: 23px; transform: translateY(var(--zip-y, 0px)); } /* same dark chrome as the desktop slider, turned on its side */ .zip-body { border-radius: 8px 4px 4px 8px; background: linear-gradient(90deg, rgba(248, 246, 242, 0.95), rgba(96, 94, 90, 0.9) 46%, rgba(14, 14, 14, 0.95)); } .zip-body::after { left: 4px; top: 50%; width: 8px; height: 3px; margin-left: 0; margin-top: -1.5px; } /* the charm hangs out to the left, away from the labels */ .zip-pull { top: 50%; left: -21px; width: 21px; height: 14px; margin: -7px 0 0 0; transform-origin: 20px 50%; } .zip-pull::before { top: 50%; left: auto; right: 0; width: 6px; height: 1px; margin: -0.5px 0 0 0; } .zip-charm { left: 0; top: 0; } } @media (prefers-reduced-motion: reduce) { .zip-slider, .zip-mark { transition: none; } .zip-pull, .zip-slider.is-sliding .zip-pull { animation: none; } }