/* Theme Name: Wilma Theater 2026 Template: wilma2020 Text Domain: ip-wilma-2026 Author: Inverse Paradox Description: Child theme of Wilma Theater 2020. Holds the refactored template hierarchy and the active stylesheet for the 2026 rebuild. Version: 0.2.0 ──────────────────────────────────────────────────────────────────────────── Stylesheet conventions ──────────────────────────────────────────────────────────────────────────── - Mobile-first. Base rules target the smallest viewport; larger breakpoints add (or override) with @media (min-width: …) progressive enhancements. - Breakpoint scale used throughout this file: sm 500px small phone landscape / large phone md 700px small tablet portrait lg 900px tablet landscape xl 1120px small desktop content width 2xl 1350px full desktop (cutover for primary nav vs mobile nav) 3xl 1600px wide desktop 4xl 1800px ultra-wide Table of contents: 1. Font import 2. Reset 3. Typography 4. Layout (container, frame, leftcol/primary) 5. Links & buttons 6. Breadcrumb 7. Forms 8. Site header (#hd, desktop nav) 9. Mobile navigation (#mobilemenu) 10. Search modal 11. Announcement bar 12. Hero & slider 13. Tiles 14. Tile / post lists 15. Listings 16. Calendar grid (.calendar-month) 17. Month grids (.month - single-event ticketzone) 18. Video 19. Artists 20. Zones (reversed / next / related / ticketzone / meet-artists / education) 21. Footer 22. WP block overrides 23. WPForms repairs 24. Misc (#totop, action tiles) ──────────────────────────────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────────────────────────── */ /* 1. Font */ /* ──────────────────────────────────────────────────────────────────────── */ /* Jost is enqueued as a separate stylesheet via functions.php so it loads in parallel with this file; preconnect hints are added to . */ /* ──────────────────────────────────────────────────────────────────────── */ /* 2. Reset */ /* ──────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { border: 0; outline: 0; } html { height: 100%; -webkit-text-size-adjust: 100%; } table { border: 0; padding: 0; border-spacing: 0; border-collapse: collapse; } /* max-width + height:auto lets the width/height attributes reserve correct space and preserve aspect ratio when a container constrains the width (prevents CLS). Elements that want a fixed box (logo, circular avatars) override height via more-specific rules below. */ img { vertical-align: bottom; max-width: 100%; height: auto; } sup, sub { vertical-align: baseline; position: relative; top: -0.4em; } sub { top: 0.4em; } a[name] { position: relative; top: -120px; } .img { width: 100%; aspect-ratio: 2 / 1; margin-bottom: 12px; background-position: center center; background-size: cover; } .screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; } /* ──────────────────────────────────────────────────────────────────────── */ /* 3. Typography */ /* ──────────────────────────────────────────────────────────────────────── */ body { color: #000; background-color: #000; margin: 0; padding: 0; } body, input, textarea, select, button { font: 300 16px/20px 'Jost', sans-serif; } b { font-weight: 600; } h2 { font-weight: 600; font-size: 190%; line-height: 110%; margin: 0; text-transform: uppercase; } h2 select { font-weight: 300; margin: 0; font-size: inherit; line-height: inherit; text-transform: uppercase; border: 1px solid #DEDEDE; cursor: pointer; } h2 .prevnext { font-weight: 300; } h2.subtitle { font-family: 'Jost', sans-serif; font-size: 150%; line-height: 110%; font-style: italic; margin-top: 10px; font-weight: 300; letter-spacing: -.02em; text-transform: none; } h3 { font-weight: 600; font-size: 150%; line-height: 110%; margin: 0; color: #000; } h4 { font-weight: 400; font-size: 150%; line-height: 100%; margin: 0; text-transform: uppercase; } h5 { font-weight: 600; font-size: 150%; line-height: 100%; margin: 0; padding: 0; text-transform: uppercase; color: #000; } .reversed h5, .ticketzone h5 { color: #000; } h1.black, h2.black, h3.black, h4.black, h5.black { color: #000; } h1.blue, h2.blue, h3.blue, h4.blue, h5.blue { color: #382EFE; } body.home .tile h4 { margin-bottom: 10px; color: #000; font-weight: 400; } .date { font-weight: 600; text-transform: uppercase; } .credits { text-transform: uppercase; letter-spacing: .03em; font-weight: 400; } .warm, .credits { color: #5D5D5E; } /* quote styles */ blockquote { margin: 35px 0; padding: 0 40px; position: relative; } blockquote p { font-size: 150%; line-height: 115%; font-weight: 300; margin-bottom: 10px; } blockquote p cite { font-size: 55%; } cite { display: block; text-align: right; font-weight: 400; font-style: italic; } cite::before { content: "\2014"; display: inline-block; margin-right: 5px; } blockquote::before, blockquote::after { position: absolute; display: block; width: 25px; top: 0; bottom: 0; background-size: contain; background-repeat: no-repeat; content: ""; } blockquote::before { left: 0; background-image: url('images/quote-left.svg'); background-position: center top; } blockquote::after { right: 0; background-image: url('images/quote-right.svg'); background-position: center bottom; } .dq::before { background: transparent url('images/quote-left.svg') center top no-repeat; margin-right: 6px; } .dq::after { background: transparent url('images/quote-right.svg') center top no-repeat; margin-left: 6px; } .dq::before, .dq::after { width: 8px; height: 15px; background-size: contain; display: inline-block; content: ""; } .reversed .dq::before, .reversed blockquote::before { background-image: url('images/quote-left-rev.svg'); } .reversed .dq::after, .reversed blockquote::after { background-image: url('images/quote-right-rev.svg'); } @media (min-width: 700px) { h2 { font-size: 300%; } h3 { font-size: 175%; } h5 { font-size: 175%; } blockquote { padding: 0 60px; } blockquote p { font-size: 190%; } blockquote::before, blockquote::after { width: 35px; } .dq::before, .dq::after { width: 11px; height: 16px; } } @media (min-width: 1350px) { body, input, textarea, select, button { font-size: 18px; line-height: 25px; } } @media (min-width: 1800px) { body, input, textarea, select, button { font-size: 20px; line-height: 28px; } } /* ──────────────────────────────────────────────────────────────────────── */ /* 4. Layout */ /* ──────────────────────────────────────────────────────────────────────── */ .container { color: #000; background-color: #fff; text-align: left; } .container.reversed { color: #fff; background-color: #000; } body.no-hero .container { padding-top: 80px; } .frame { padding-left: 0; padding-right: 0; display: flex; flex-wrap: wrap; text-align: left; max-width: 1600px; margin: 0 auto; } .content { padding-top: 35px; padding-bottom: 0; } .leftcol, .primary { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; padding: 0 25px 25px 25px; } .leftcol .art { width: 100%; height: auto; } .leftcol .info { margin: 30px 0; padding: 30px 0; border-top: 2px dotted #666; border-bottom: 2px dotted #666; } .leftcol ul { list-style: none; padding: 0; margin: 30px 0; border-top: 2px dotted #DEDEDE; } .leftcol li { list-style: none; padding: 5px 0; margin: 0; display: block; font-weight: 400; border-bottom: 2px dotted #DEDEDE; } .twocol h5 { margin-bottom: 1em; } /* mobile only: when .frame wraps, push these sidebars below the primary */ @media (max-width: 699px) { body.single-artist .leftcol { order: 2; } .leftcol.below { order: 3; } } @media (min-width: 700px) { .frame { flex-wrap: nowrap; } .leftcol { flex-basis: 215px; flex-grow: 0; flex-shrink: 0; padding-right: 0; } .primary { flex-basis: auto; max-width: none; } } @media (min-width: 1350px) { .frame { padding-left: 35px; padding-right: 35px; } .content { padding-top: 70px; padding-bottom: 35px; } .leftcol { width: 220px; flex-basis: 220px; padding: 0 0 35px 35px; } .primary { padding: 0 35px 35px 35px; } } @media (min-width: 1600px) { .leftcol { width: 370px; flex-basis: 370px; padding: 0 35px 35px 35px; } } @media (min-width: 1800px) { .leftcol { width: 460px; flex-basis: 460px; } } /* ──────────────────────────────────────────────────────────────────────── */ /* 5. Links & buttons */ /* ──────────────────────────────────────────────────────────────────────── */ a { text-decoration: none; color: #000; } .reversed a { color: #000; } a:hover, .reversed a:hover { color: #5D5D5E; } .btn, a.btn, .ghostbtn, a.ghostbtn, button { color: #fff; display: inline-block; padding: 10px 12px 8px 12px; text-transform: uppercase; letter-spacing: .1em; line-height: 100%; cursor: pointer; font-weight: 400; white-space: nowrap; border: 1px solid #382EFE; } .reversed a.btn { border-color: #fff; } .ghostbtn, a.ghostbtn { border: 1px solid #382EFE; color: #382EFE; } .btn, a.btn, button { background-color: #382EFE; } .btn:hover, a.btn:hover, .reversed a.btn:hover, .ghostbtn:hover, a.ghostbtn:hover, button:hover { color: #fff; background-color: #000; border-color: #000; } .btn.tickets, .ghostbtn.tickets { background-image: url('images/icon-ticket.svg'); background-position: 5px center; background-size: auto 65%; background-repeat: no-repeat; padding: 10px 12px 8px 45px; } .btn.bigtickets { background-image: url('images/icon-ticket.svg'); background-position: 10px center; background-size: auto 65%; background-repeat: no-repeat; font-size: 115%; line-height: 100%; padding: 12px 15px 8px 50px; } .btn.info, .ghostbtn.info { background-image: url('images/icon-info-p.svg'); background-position: 7px center; background-size: auto 65%; background-repeat: no-repeat; padding-left: 30px; } .ghostbtn.info:hover { background-image: url('images/icon-info.svg'); } .btn.wilmabill, .ghostbtn.wilmabill { padding-left: 40px; background-image: url('images/icon-download-b.svg'); background-position: 13px center; background-size: auto 65%; background-repeat: no-repeat; } .btnbar { margin-top: 8px; } @media (min-width: 1350px) { .btn, a.btn, .ghostbtn, a.ghostbtn, button { padding: .25em .5em .2em .5em; } .btn.tickets, .ghostbtn.tickets { padding: .25em .5em .2em .5em; padding-left: 30px; } } /* ──────────────────────────────────────────────────────────────────────── */ /* 6. Breadcrumb */ /* ──────────────────────────────────────────────────────────────────────── */ .breadcrumb { margin-bottom: 15px; text-transform: uppercase; letter-spacing: .03em; font-weight: 400; white-space: collapse; } .breadcrumb a { display: inline-block; padding-right: 20px; margin-right: 5px; color: #000; background: transparent url('images/breadcrumb-grey.svg') right center no-repeat; background-size: contain; } .breadcrumb a:hover { color: #000; } .anchor { display: block; position: relative; height: 1px; width: 1px; top: -200px; } /* ──────────────────────────────────────────────────────────────────────── */ /* 7. Forms */ /* ──────────────────────────────────────────────────────────────────────── */ input, select, textarea { background-color: #EFEFEF; } input[type=checkbox] { background-color: transparent; } fieldset { margin: 5px 0; padding: 0 20px 0 0; display: block; width: 100%; } fieldset.half { float: left; width: 50%; } fieldset label { font-size: 90%; } fieldset label input { display: block; width: 100%; } /* ──────────────────────────────────────────────────────────────────────── */ /* 8. Site header */ /* ──────────────────────────────────────────────────────────────────────── */ #hd-container { position: fixed; top: 0; left: 0; right: 0; color: #888; z-index: 100; background: none; padding-bottom: 0; } #hd-backplate { position: fixed; top: 0; left: 0; right: 0; height: 56px; background-color: #000; opacity: 0; transition: opacity 0.6s ease; z-index: 99; } #hd-backplate.scrolled, body.no-hero #hd-backplate { opacity: 0.7; } #hd { padding: 2px 25px 0 20px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; text-align: left; max-width: 1600px; margin: 0 auto; } #hd a { color: #fff; display: inline-block; padding: 0 4px; font-weight: 400; margin: -1px 0; } #hd a:hover { color: #ADADAE; } #hd .logo { width: 100px; flex-basis: 100px; flex-grow: 0; flex-shrink: 0; padding-top: 3px; padding-bottom: 2px; } #hd .logo img { width: 92px; height: 27px; display: table; margin: 0; } #hd .controls { flex-grow: 1; flex-shrink: 0; margin-right: -10px; white-space: nowrap; display: flex; justify-content: flex-end; padding-top: 0; } #hd .tickets { display: none; color: #fff; border: 1.5px solid #fff; padding: 2px 10px 0 10px; cursor: pointer; margin-right: 8px; font-weight: 400; align-items: center; text-transform: uppercase; font-size: 80%; line-height: 80%; letter-spacing: 1px; border-radius: 20px; } #hd .tickets:hover { color: #000; background-color: #fff; } #hd .calendar { background: transparent url('images/icon-calendar.svg') center center no-repeat; } #hd .searchbtn { background: transparent url('images/icon-search.svg') center center no-repeat; } #hd .navbtn { background: transparent url('images/icon-nav.svg') center center no-repeat; } #hd .calendar, #hd .searchbtn, #hd .navbtn { width: 40px; height: 30px; background-size: 24px auto; cursor: pointer; } /* primary nav is hidden by default (mobile); revealed at 1350+ */ ul#menu { display: none; padding: 0; margin: 0; list-style: none; flex-grow: 1; flex-shrink: 1; } ul#menu li { margin: 0; padding: 0; list-style: none; } @media (min-width: 700px) { #hd { padding: 5px 25px 3px 35px; } #hd .logo { width: 185px; flex-basis: 185px; padding-top: 0; padding-bottom: 0; } #hd .logo img { width: 177px; height: 41px; margin: 7px 0 10px; } #hd-backplate { height: 71px; } #hd .tickets { display: flex; } } @media (min-width: 1350px) { #hd { padding: 14px 70px 3px 70px; } #hd-container { padding-bottom: 30px; } #hd-backplate { height: 99px; } #hd .logo { width: 200px; flex-basis: 200px; } #hd .logo img { width: 192px; height: 56px; margin: 11px 0 7px; } #hd .controls { flex-grow: 0; padding-top: 13px; margin-right: -10px; } #hd .tickets { margin-right: 15px; } ul#menu { display: block; padding-left: 25px; padding-top: 13px; } ul#menu li { display: inline-block; float: left; padding-right: 2px; } ul#menu li a { display: block; padding: 14px 15px 14px 12px; background: transparent url('images/dot.png') right center no-repeat; background-size: 3px 3px; } ul#menu li:last-child a { background-image: none; } ul#menu li.has-submenu:hover { background: transparent url('images/icon-submenu-black.svg') 10px 40px no-repeat; background-size: auto 20px; } ul#menu li ul { display: none; position: absolute; z-index: 220; margin: 0; padding: 0; list-style: none; } ul#menu li:hover ul { display: block; text-align: left; } ul#menu li ul li { margin: 0; padding: 0; text-transform: none; display: block; float: none; } ul#menu li ul li a { color: #fff; display: block; font-size: 16px; padding: 4px 12px; background-color: #000; background-image: none; } ul#menu li ul li:first-child { border-top: 6px solid #000; } ul#menu li ul li:last-child { border-bottom: 6px solid #000; } ul#menu li ul li a:hover { color: #fff; background-color: #5D5D5E; opacity: 1; } } @media (min-width: 1350px) and (max-width: 1599px) { ul#menu { padding-left: 15px; } ul#menu li a { padding: 14px 11px 14px 8px; } } /* ──────────────────────────────────────────────────────────────────────── */ /* 9. Mobile navigation */ /* ──────────────────────────────────────────────────────────────────────── */ /* .mobileonly is visible by default (mobile-first), hidden at desktop */ #mobilemenu { position: fixed; top: 0; right: 0; left: 0; z-index: 99; overflow: hidden; height: 0; opacity: 0; transition-duration: 0.3s; background-color: rgba(0,0,0,0.95); width: 100%; } #mobilemenu.active { height: 100vh; opacity: 1; } #mobilemenu .frame { padding: 80px 22px 0 22px; display: block; } #mobilemenu a { color: #fff; display: block; font-size: 24px; line-height: 24px; padding: 8px 10px 8px 0; font-weight: 300; } #mobile-menu { list-style: none; margin: 0; padding: 0; color: #fff; width: 100%; } #mobile-menu ul { list-style: none; margin: 0; } #mobile-menu > li { border-bottom: 1px solid rgba(255,255,255,0.33); padding-right: 50px; } #mobile-menu > li.menu-item-has-children { background: transparent url('images/icon-down.svg') right 9px no-repeat; background-size: 13px auto; cursor: pointer; } #mobile-menu > li.menu-item-has-children.expanded { background-image: url('images/icon-up.svg'); } #mobile-menu > li > ul { display: none; } #mobile-menu > li.expanded > ul { display: block; list-style: disc; margin-bottom: 15px; } #mobile-menu > li > ul > li a { font-size: 16px; line-height: 1; padding: 7px 0; } ul.mobilebuttons { margin-left: 0; padding-left: 0; list-style: none; } @media (min-width: 1350px) { .mobileonly, #hd .mobileonly { display: none; } } /* ──────────────────────────────────────────────────────────────────────── */ /* 10. Search modal */ /* ──────────────────────────────────────────────────────────────────────── */ #searchmodal { position: fixed; top: 0; right: 0; left: 0; z-index: 500; overflow: hidden; height: 0; opacity: 0; transition-duration: 0.3s; background-color: rgba(255,255,255,0.97); } #searchmodal.active { height: 100vh; opacity: 1; overflow: auto; } #searchmodal .content { padding-top: 35px; } #searchmodal .closebtn { width: 50px; height: 48px; background: transparent url('images/icon-close.svg') center center no-repeat; background-size: contain; cursor: pointer; opacity: 0.5; } #searchmodal .closebtn:hover { opacity: 1; } #searchmodal form { white-space: nowrap; display: flex; align-items: flex-end; } #searchmodal input { font-size: 48px; line-height: 48px; background-color: transparent; border: none; -webkit-appearance: none; border-radius: 0; } #searchmodal input:focus { outline: none; } #searchmodal input#s { width: calc(100% - 60px); border-bottom: 2px dotted #666; color: #000; margin-right: 10px; font-family: Jost; font-weight: 300; } #searchmodal.active::after { position: fixed; left: 0; right: 0; bottom: 0; height: 100px; z-index: 501; content: " "; display: block; background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0)); } #autoresults .tiles { margin-top: 40px; } #autoresults h3 { margin-bottom: 20px; } #autoresults .searchresult { margin-bottom: 10px; } #autoresults .searchresult .excerpt { color: #777; font-size: 90%; line-height: 115%; } #autoresults .date { font-size: 90%; } #autoresults .searchresult.artists img { width: 150px; height: 150px; border-radius: 50%; display: block; margin-bottom: 10px; } /* ──────────────────────────────────────────────────────────────────────── */ /* 11. Announcement bar */ /* ──────────────────────────────────────────────────────────────────────── */ #announce { color: #fff; background-color: #F32E33; padding: 12px 20px 10px 20px; text-align: center; font-size: 150%; line-height: 100%; font-weight: 400; } a:hover #announce { background-color: #F4AC11; } /* ──────────────────────────────────────────────────────────────────────── */ /* 12. Hero & slider */ /* ──────────────────────────────────────────────────────────────────────── */ .herocon { max-height: calc(100vh - 200px); overflow: hidden; position: relative; } .herocon .caption, .hero .caption { position: absolute; bottom: 0; right: 0; color: #fff; background-color: rgba(0,0,0,0.5); padding: 4px 8px; display: inline-block; } img.hero { width: 100%; height: auto; } div.hero, div.slider, div.slide { width: 100%; height: 60vw; max-height: calc(100vh - 200px); background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; } div.slide { height: 0; padding-top: 66%; } body.home div.slide { padding-top: 0; } body.home div.slider, body.home a.slide, body.home div.slide { height: 80vw; background-color: #000; background-position: center top; background-size: 100% auto; } body.home div.slider .overlay { min-height: 30vw; background-color: #000; padding-top: 15px; padding-bottom: 15px; } body.home .slide .subtitle, body.home .slide .quote { font-size: 95%; margin-bottom: 0; } body.home .slide .primary { padding-left: 25px; } .hero .overlay, .slider .overlay { position: absolute; bottom: 0; left: 0; right: 0; color: #fff; padding-top: 25px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.9)); } .slider h2 { text-shadow: 5px 5px 15px rgba(0,0,0,0.4); } .slider .subtitle { font-size: 135%; line-height: 150%; text-shadow: 5px 5px 15px rgba(0,0,0,0.4); } a.slide { color: #fff; } .slide-container { position: relative; } /* hide lightSlider pager dots on per-page hero sliders; auto-advance keeps working */ .slide-container.sub-page .lSSlideOuter .lSPager.lSpg { display: none; } /* shade over sliders and hero images */ body.home::after, body.has-hero::after { position: absolute; top: 0; left: 0; right: 0; height: 150px; content: " "; background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); z-index: 95; } /* per-slide content */ .slide { padding: 0; display: block; position: relative; } .slide .frame { align-items: center; height: 100%; } .slide .leftcol { padding-top: 0; padding-bottom: 0; flex-basis: 25%; padding-right: 0; } .slide .primary { padding: 0 17px 0 35px; flex-basis: 75%; } .slide .leftcol .art { max-width: 100%; } .slide h2 { font-weight: 600; margin-bottom: 10px; font-size: 125%; } .slide .subtitle { font-size: 125%; line-height: 110%; margin: 0 0 15px; } .slide .quote { font-size: 125%; line-height: 110%; margin: 15px 0 0; } .slide .date { font-size: 100%; } .slide .dq::before, .slide .dq::after { width: 8px; height: 15px; background-size: contain; } .slide .dq::before { background-image: url('images/quote-left-rev.svg'); margin-right: 6px; } .slide .dq::after { background-image: url('images/quote-right-rev.svg'); margin-left: 6px; } .slide .caption { position: absolute; bottom: 0; right: 0; color: #fff; background-color: rgba(0,0,0,0.5); padding: 4px 8px; display: inline-block; } .slider { z-index: 50; } .slider.multi { color: #fff; background-color: #000; } .slider.multi .slide img { height: 55vw; } .slider.multi .slide .video-container { height: 55vw; width: 95vw; } @media (min-width: 500px) { body.home div.slider, body.home a.slide, body.home div.slide { height: 70vw; } body.home div.slider .overlay { min-height: 20vw; } } @media (min-width: 700px) { body.home div.slider, body.home a.slide, body.home div.slide { height: 50vw; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: transparent; } body.home div.slider .overlay { min-height: 0; background-color: transparent; padding-top: 100px; padding-bottom: 0; } body.home .slide .subtitle, body.home .slide .quote { font-size: 135%; } .hero .overlay, .slider .overlay { padding-top: 100px; } .slide h2 { font-size: 175%; margin-bottom: 15px; } .slide .subtitle { font-size: 125%; } } @media (min-width: 980px) { .slider.multi .slide img { height: 35vw; } .slider.multi .slide .video-container { height: 35vw; width: 52vw; } } @media (min-width: 1120px) { .slider.multi .slide img { height: 30vw; } .slider.multi .slide .video-container { height: 30vw; width: 45vw; } } @media (min-width: 1350px) { .slide .leftcol, .slide .primary { flex-basis: auto; } .slide .primary { padding: 35px; } .slide h2 { font-size: 175%; margin-bottom: 15px; } .slide .subtitle, .slide .quote { font-size: 150%; line-height: 110%; } .slide .dq::before, .slide .dq::after { width: 11px; height: 20px; } } @media (min-width: 1600px) { body.home .slide h2 { font-size: 350%; } .slider.multi .slide img { height: 500px; } .slider.multi .slide .video-container { height: 500px; width: 889px; } } /* ──────────────────────────────────────────────────────────────────────── */ /* 13. Tiles */ /* ──────────────────────────────────────────────────────────────────────── */ .tiles { display: flex; margin: 0 -17px -35px -17px; flex-wrap: wrap; align-items: flex-start; } .tiles.events { align-items: stretch; } .tiles.events .tile { display: flex; } .tile { width: calc(100% - 34px); margin: 0 17px 35px 17px; background-position: center center; background-size: cover; } .tile .date .subtitle { display: none; color: #000; } .tile img { width: 100%; height: auto; display: block; margin: 0 0 10px 0; } .tile .img { width: 100%; aspect-ratio: 2 / 1; margin-bottom: 12px; background-position: center; background-size: cover; } .tile.wide { align-self: center; } #autoresults .tile, .tiles.onecolumn .tile, body.onecolumn .tile { width: calc(100% - 34px); } .tiles.events .tile .img { width: 25%; height: auto; margin-bottom: 0; padding: 0; } .tiles.events .tile .content { align-self: center; padding: 8px 17px; color: #000; font-size: 100%; } .tiles.events .tile h3 { font-family: 'DV', sans-serif; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; font-size: 125%; line-height: 100%; } .tiles.events .tile .date { color: #fff; font-weight: 400; margin: 6px 0 0 0; line-height: 105%; } a.tile:hover { opacity: 0.8; } .tiles.linktiles a.tile:hover { opacity: 1; } .tiles.linktiles .tile { width: calc(100% - 34px); } .tiles.linktiles .tile .contents { width: 100%; height: 0; padding-top: 50%; position: relative; } .tiles.linktiles .tile h4 { display: inline-block; padding: 8px; position: absolute; bottom: 0; left: 0; text-transform: none; font-size: 125%; line-height: 100%; color: #fff; background-color: #000; font-weight: 400; } .tiles.linktiles a.tile:hover h4 { background-color: #5D5D5E; } .related .tiles .tile b { font-size: 22px; line-height: 1.2; } @media (min-width: 500px) { #autoresults .tile, .tiles.onecolumn .tile, .tiles.linktiles .tile { width: calc(50% - 34px); } } @media (min-width: 700px) { .tile .date .subtitle { display: block; } .tiles.events .tile .img { width: 18%; } .tiles.events .tile .content { padding: 8px 17px; } } @media (min-width: 900px) { .tile { width: calc(50% - 34px); } body.onecolumn .tile, #autoresults .tile, .tiles.onecolumn .tile { width: calc(33.333% - 34px); } } @media (min-width: 1300px) { .tiles.events .tile .content { padding: 17px; font-size: 100%; } .tiles.events .tile h3 { font-size: 125%; } } @media (min-width: 1350px) { .tiles.events .tile .content { padding: 17px 35px; } .tiles.events .tile h3 { font-size: 175%; line-height: 100%; } .tiles.events .tile .img { width: 33.333%; } } @media (min-width: 1400px) { .tiles.linktiles .tile { width: calc(33.333% - 34px); } .tiles .tile.wide, .tiles.linktiles .tile.wide { width: calc(66.664% - 34px); } } @media (min-width: 1600px) { .tiles.events .tile h3 { font-size: 175%; } .tiles.events .tile .content { font-size: 125%; } } /* ──────────────────────────────────────────────────────────────────────── */ /* 14. Tile / post lists */ /* ──────────────────────────────────────────────────────────────────────── */ .tile ul, ul.post-list { list-style: none; margin: 20px 0 0 0; padding: 0; } .tile li, ul.post-list li { list-style: none; margin: 10px 0 0 0; padding: 0; } .tile li a, ul.post-list li a { font-weight: 400; font-size: 115%; line-height: 110%; } .tile li .date, ul.post-list li .date { font-size: 90%; } .tile .date, ul.post-list li .date { text-transform: uppercase; letter-spacing: .03em; font-weight: 400; color: #5D5D5E; } /* ──────────────────────────────────────────────────────────────────────── */ /* 15. Listings */ /* ──────────────────────────────────────────────────────────────────────── */ .listing { display: flex; align-items: center; margin: 8px 0; } .listing .day { font-size: 150%; line-height: 100%; width: 40px; text-align: center; margin-right: 15px; font-weight: 300; } .listing .info a { font-weight: 600; } /* ──────────────────────────────────────────────────────────────────────── */ /* 16. Calendar grid */ /* ──────────────────────────────────────────────────────────────────────── */ .calendar-icon { width: 0.9em; height: 0.9em; vertical-align: -0.05em; margin-right: 0.2em; filter: brightness(0); } .calendar-controls { float: right; margin: 0 0 20px 20px; } .calendar-controls a, .calendar-controls span { display: inline-block; width: 40px; height: 40px; margin-left: 5px; border-radius: 50%; background-color: #5D5D5E; background-position: center; background-repeat: no-repeat; background-size: 50% auto; } .calendar-controls .view-list { background-image: url('images/icon-list.svg'); } .calendar-controls .view-grid { background-image: url('images/icon-calendar.svg'); } .calendar-controls a:hover { background-color: #000; } .calendar-controls span.current { background-color: #000; } .primary div.calendar { margin: 0 -20px; } table.calendar-month { border-spacing: 20px; border-collapse: separate; width: 100%; font-size: 90%; } table.calendar-month th { font: 700 18px/18px 'lars', sans-serif; text-align: left; padding: 0; } table.calendar-month td { padding: 20px 0; border-top: 1px solid #000; width: 14.286%; color: #000; font-size: 16px; line-height: 20px; vertical-align: top; } table.calendar-month td h3 { font-weight: 400; font-size: 20px; line-height: 20px; color: inherit; margin-bottom: 8px; } table.calendar-month td.empty { color: #999; border-color: #CCC; } table.calendar-month td.blank { border-color: transparent; } table.calendar-month tbody tr:first-child td.empty, table.calendar-month tbody tr:first-child td.blank { border-color: #000; } table.calendar-month td.today { border-top: 3px solid #5D5D5E; padding-top: 18px; } table.calendar-month td.today h3 { color: #5D5D5E; font-weight: 700; } table.calendar-month td a { display: block; font-weight: 400; margin-bottom: 10px; } table.calendar-month td a:last-child { margin-bottom: 0; } table.calendar-month td img { display: block; width: 100%; height: auto; margin: 6px 0; } table.calendar-month td .time { color: #5D5D5E; display: block; } @media (min-width: 1120px) { table.calendar-month { font-size: 100%; } } /* ──────────────────────────────────────────────────────────────────────── */ /* 17. Month grids (single-event ticketzone) */ /* ──────────────────────────────────────────────────────────────────────── */ table.month { width: 100%; border-collapse: collapse; font-size: 90%; } table.month caption { text-align: center; font-size: 110%; font-weight: 600; padding-bottom: 10px; color: #000; } table.month th { color: #000; background-color: rgba(255,255,255,0.6); line-height: 100%; padding: 4px 0 1px 0; } table.month th, table.month td { width: 14.2857%; vertical-align: top; text-align: center; } table.month td { border-top: 1px solid rgba(0,0,0,0.75); min-height: 70px; } table.month td .daynum { font-weight: 300; display: block; height: 25px; font-size: 80%; color: rgba(0,0,0,0.75); } table.month td.blank { padding-top: 76px; } table.month td.empty .daynum { height: 75px; } table.month td a { display: block; height: 25px; color: #5D5D5E; font-weight: 400; font-size: 18px; } table.month td span { display: block; height: 25px; color: #fff; font-weight: 400; } table.month td a:hover { color: #fff; background-color: #382EFE; } @media (min-width: 1120px) { table.month { font-size: 100%; } } /* ──────────────────────────────────────────────────────────────────────── */ /* 18. Video */ /* ──────────────────────────────────────────────────────────────────────── */ .video-container { overflow: hidden; height: 0; padding-bottom: 56.25%; position: relative; margin-bottom: 30px; } .video-container iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } /* ──────────────────────────────────────────────────────────────────────── */ /* 19. Artists */ /* ──────────────────────────────────────────────────────────────────────── */ .artists { display: flex; flex-wrap: wrap; align-items: flex-start; margin: -17px; } .artists .artist { width: 130px; margin: 17px; text-align: center; line-height: 100%; font-size: 95%; } .artists.landing .artist { width: 150px; } .artists .artist img { width: 100%; height: auto; border-radius: 50%; display: block; margin-bottom: 10px; } .artists .artist .name { display: block; font-weight: 400; } .artists .artist .role { display: block; color: #5D5D5E; font-size: 85%; line-height: 100%; margin-top: 5px; font-weight: 400; text-transform: uppercase; } @media (min-width: 1350px) { .artists .artist { width: 150px; font-size: 100%; } .artists.landing .artist { width: 250px; } } /* ──────────────────────────────────────────────────────────────────────── */ /* 20. Zones */ /* ──────────────────────────────────────────────────────────────────────── */ .reversed { color: #000; background-color: #fff; } .next { background-color: #fff; border-bottom: 1px solid #000; } .next h4 { font-weight: 600; } /* Donate Now tile spans the full row (no set width) like prod */ .home .zone.grey .tile { width: calc(100% - 34px); } a.zone-education { display: flex; flex-wrap: wrap; background-color: #46365E; color: #fff; } a.zone-education div.img { flex-basis: 100%; background: #000 url('/wp-content/uploads/2020/02/education-home-2.jpg') center center no-repeat; background-size: cover; height: 30vw; padding-top: 0; margin-bottom: 0; } a.zone-education div.info { flex-basis: 100%; padding: 25px; } a.zone-education div.info div { max-width: 680px; } a.zone-education h3 { color: #ebc325; margin-top: 0; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; } a.zone-education:hover .ghostbtn { background-color: #F6014F; } @media (min-width: 700px) { a.zone-education { flex-wrap: nowrap; } a.zone-education div.img { flex-basis: 50%; height: auto; } a.zone-education div.info { flex-basis: 50%; padding: 35px; } } @media (min-width: 980px) { a.zone-education div.info { padding: 70px 35px; } } @media (min-width: 1120px) { a.zone-education div.info { padding: 70px; } } /* ──────────────────────────────────────────────────────────────────────── */ /* 21. Footer */ /* ──────────────────────────────────────────────────────────────────────── */ .footer { font-weight: 300; padding: 25px 0 10px; color: #fff; background-color: #000; } .footer .primary a { color: #fff; border-bottom: 2px dotted rgba(255,255,255,0.5); } .footer a:hover { color: #5D5D5E; } .footer a { white-space: nowrap; } .footer a.tel { color: #fff; } /* left column: logo above socials, both left-aligned */ .footer .wilma-theater { display: block; margin: 0 0 20px 0; } .footer .wilma-theater img { width: 150px; height: auto; } .footer .social { display: flex; gap: 8px; margin: 0; padding-bottom: 0; } .footer .social a { display: inline-block; width: 40px; height: 40px; background-position: center center; background-repeat: no-repeat; } .footer .social a.facebook { background-image: url('images/icon-facebook-w.svg'); background-size: auto 28px; } .footer .social a.instagram { background-image: url('images/icon-instagram-w.svg'); background-size: auto 30px; } .footer .social a.youtube { background-image: url('images/icon-youtube-w.svg'); background-size: 33px auto; } .footer .social a:hover { opacity: 0.75; } /* right column: stacked address blocks */ .footer .address { display: flex; flex-wrap: wrap; padding-top: 23px; margin-right: 0; } .footer .address div { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; padding: 0 0 20px 0; } /* widget-area columns (fallback static markup doesn't use these) */ .footer-col { padding: 0 25px 25px; flex: 1 1 100%; } @media (min-width: 700px) { .footer { padding: 45px 35px 10px; } .footer .address { padding-top: 0; } .footer-col { flex: 1 1 50%; } } @media (min-width: 1350px) { .footer .address { flex-wrap: nowrap; margin-right: -40px; } .footer .address div { padding: 0 40px 20px 0; flex-basis: 50%; } .footer .leftcol { padding-bottom: 0; } .footer-col { flex: 1 1 25%; } } /* ──────────────────────────────────────────────────────────────────────── */ /* 22. WP block overrides */ /* ──────────────────────────────────────────────────────────────────────── */ figure.wp-block-table { margin: 20px 0; padding: 0; } figure.wp-block-table table { border-top: 2px dotted #DEDEDE; width: 100%; } figure.wp-block-table table tr { border-bottom: 2px dotted #DEDEDE; vertical-align: top; } figure.wp-block-table table th { font-weight: 600; text-align: left; } figure.wp-block-table table td, figure.wp-block-table table th { padding: 7px 15px 7px 0; } figure.wp-block-table table td:last-child, figure.wp-block-table table th:last-child { padding-right: 0; } /* Gallery block - both legacy (blocks-gallery-grid) and modern shapes. WP's wp-block-library doesn't ship the legacy grid layout, so unstyled it falls back to a vertical bulleted list of full-size images. */ .wp-block-gallery { display: block; } .wp-block-gallery .blocks-gallery-grid, .wp-block-gallery.has-nested-images { display: flex; flex-wrap: wrap; gap: 16px; padding: 0; margin: 0 0 1em; list-style: none; } .wp-block-gallery .blocks-gallery-item { flex: 1 1 calc(50% - 8px); margin: 0; padding: 0; list-style: none; min-width: 0; } .wp-block-gallery .blocks-gallery-item figure { margin: 0; } .wp-block-gallery .blocks-gallery-item img { display: block; width: 100%; height: auto; max-width: 100%; } .wp-block-gallery.columns-1 .blocks-gallery-item { flex-basis: 100%; } .wp-block-gallery.columns-2 .blocks-gallery-item { flex-basis: calc(50% - 8px); } .wp-block-gallery.columns-3 .blocks-gallery-item { flex-basis: calc(33.333% - 11px); } .wp-block-gallery.columns-4 .blocks-gallery-item { flex-basis: calc(25% - 12px); } .wp-block-gallery.columns-5 .blocks-gallery-item { flex-basis: calc(20% - 13px); } .wp-block-gallery.columns-6 .blocks-gallery-item { flex-basis: calc(16.666% - 14px); } .wp-block-gallery .blocks-gallery-item__caption { margin: 4px 0 0; font-size: 90%; color: #5D5D5E; } /* Media + Text block - cap media side so it doesn't span half a wide column */ .wp-block-media-text__media { max-width: 512px; } .wp-block-media-text__media img { width: 100%; height: auto; } @media (min-width: 700px) { .wp-block-media-text { grid-template-columns: minmax(0, 512px) 1fr; gap: 35px; } .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr minmax(0, 512px); } } .primary .wp-block-buttons { margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0; } .primary .wp-block-buttons .wp-block-button { background-color: #382EFE; display: flex; align-items: center; width: 100%; } .primary .wp-block-buttons .wp-block-button:nth-child(even), .primary .wp-block-buttons .wp-block-button:nth-child(even) a.wp-block-button__link { background-color: #5D5D5E; } .primary .wp-block-buttons .wp-block-button a.wp-block-button__link { border-radius: 0; text-transform: uppercase; font-weight: 400; background-color: #382EFE; width: 100%; } .primary .wp-block-buttons .wp-block-button:hover, .primary .wp-block-buttons .wp-block-button:hover a.wp-block-button__link { background-color: #000; } @media (min-width: 950px) { .primary .wp-block-buttons { flex-wrap: nowrap; gap: 20px; } .primary .wp-block-buttons .wp-block-button { width: auto; } } /* ──────────────────────────────────────────────────────────────────────── */ /* 23. WPForms repairs */ /* ──────────────────────────────────────────────────────────────────────── */ div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button { color: #fff !important; background-color: #000 !important; display: inline-block; padding: .3em .5em .2em .5em !important; text-transform: uppercase; letter-spacing: .1em; line-height: 100%; cursor: pointer; font-weight: 400; white-space: nowrap; border: 0 !important; } div.wpforms-container-full .wpforms-form input[type=submit]:hover, div.wpforms-container-full .wpforms-form button[type=submit]:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:hover { background-color: #5D5D5E !important; } /* ──────────────────────────────────────────────────────────────────────── */ /* 24. Misc */ /* ──────────────────────────────────────────────────────────────────────── */ a#totop { position: fixed; width: 100px; height: 100px; bottom: 0; left: 50%; margin-left: -50px; margin-bottom: -55px; z-index: 25; text-align: center; color: #fff; background-color: #5D5D5E; border-radius: 50px; display: none; font: 700 60px/60px 'Jost', sans-serif; } a#totop:hover { color: #fff; background-color: #000; } .tile a.donate, .tile a.mailing-list { color: #000; display: block; } .tile a.donate h4, .tile a.mailing-list h4 { color: #BC0149; margin-bottom: 10px; padding-left: 40px; background: transparent url('images/icon-heart.svg') left center no-repeat; background-size: contain; } .tile a.mailing-list h4 { color: #5D5D5E; background-image: url('images/icon-at.svg'); } .tile a.donate:hover h4, .tile a.mailing-list:hover h4 { color: #000; background-image: url('images/icon-right.svg'); }