/*! Theme Name: crs2026 Theme URI: http://underscores.me/ Author: Teresa Nightingale Author URI: https://attentiondesign.ca Description: Custom theme for Coast Recital Society 2026 Version: 1.0.0 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: crs2026 crs2026 is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # CSS Reset # Typography # Elements # Forms # Navigation ## Links ## Menus # Accessibility # Alignments # Clearings # Widgets # Content ## Posts and pages ## Comments # Infinite scroll # Media ## Captions ## Galleries --------------------------------------------------------------*/ /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ /* *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } */ /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @media screen and (min-width: 1200px) { .mobile { display: none; } } :root :where(.is-layout-constrained) > * { margin-block-start: revert; margin-block-end: revert; } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ @font-face { font-family: 'Jost'; src: url('fonts/jost-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Jost'; src: url('fonts/jost-300-italic.woff2') format('woff2'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Jost'; src: url('fonts/jost-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Jost'; src: url('fonts/jost-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Jost'; src: url('fonts/jost-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Jost'; src: url('fonts/jost-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Jost'; src: url('fonts/jost-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Jost'; src: url('fonts/jost-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Jost'; src: url('fonts/jost-800-normal.woff2') format('woff2'); font-weight: 800; font-style: normal; } html { font-size: 18px; scroll-padding-top: 150px; } body, button, input, select, optgroup, textarea { color: var(--wp--preset--color--contrast); font-family: 'Jost', sans-serif; font-size: var(--wp--preset--font-size--normal); font-size: 1rem; line-height: 1.4; } @media screen and (min-width: 1200px) { body { overflow-x: hidden; } } .wp-block-button__link { border-radius: 1.5rem; border: none; color: var(--wp--preset--color--base); transition: background-color 0.3s ease; background-color: var(--wp--preset--color--contrast); text-transform: uppercase; padding: .5em 1.5em; } .wp-block-button__link:visited { color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--contrast); } .wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover { color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--accent-2); } h1, h2 { clear: both; } h1, h2, h3, h4, h5, h6 { margin-bottom: 1em; } h1, h1.page-title { font-size: var(--wp--preset--font-size--xx-large); font-weight: 800; line-height: 1.1; } h1.page-title { color: var(--wp--preset--color--base); } .home h1.page-title, .page-test-home h1.page-title { color: var(--wp--preset--color--contrast); text-transform: uppercase; text-align: center; font-size: clamp(1rem, 7.5vw, 3rem); font-weight: 700; letter-spacing: .08em; background-color: var(--wp--preset--color--base); padding: 0 10% 1rem; margin: 0; transform: translateY(-2px); } @media screen and (min-width: 1200px) { .home h1.page-title, .page-test-home h1.page-title { transform: translateY(-50%); } } h2 { font-size: var(--wp--preset--font-size--large); font-weight: 700; text-transform: uppercase; line-height: 1.1; } h3 { font-size: var(--wp--preset--font-size--large); font-weight: 700; } h4 { font-size: var(--wp--preset--font-size--medium-large); margin-bottom: .7em; } h5 { font-size: var(--wp--preset--font-size--normal); } h6 { font-size: var(--wp--preset--font-size--small); } p { font-size: var(--wp--preset--font-size--normal); margin-top: 1rem; margin-bottom: 1.5rem; } p:first-child { margin-top: 0; } .wp-block-quote { padding-left: 0; } dfn, cite, em, i { font-style: italic; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } strong { font-weight: 700; } /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ html { overflow-x: hidden; } body { background: #fff; /* Fallback for when there is no custom background color defined. */ margin: 0; } .site { max-width: 2000px !important; margin-left: auto; margin-right: auto; } .site-content { padding: 1.5rem 2rem; background: transparent url(img/beige-double-parabola-vert.svg) center -6rem no-repeat; background-size: 80% auto; } .wp-block-group { margin-top: var(--wp--preset--spacer--medium); margin-bottom: var(--wp--preset--spacer--medium); } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { font-size: var(--wp--preset--font-size--normal); margin: 0 0 1.5em 0; padding-left: 1em; } ul { list-style: disc; } ol { list-style: decimal; } ol li { margin-left: 0; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */ } table, .wp-block-table table { margin: 0 0 .5em; width: 100%; border-spacing: 0; border-collapse: collapse; font-size: .75em; border-top: 1px solid #000; } .wp-block-table { margin-bottom: 2em; } .wp-block-table td, .wp-block-table th { border: 1px solid #000; border-width: 0 0 1px 0; padding: .2em .5em .2em 0; } h2 + figure.wp-block-table, h3 + figure.wp-block-table { margin-top: 0; } .wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th { padding-left: .5em; } .wp-block-table figcaption { font-size: .85em; text-align: left; } @media screen and (min-width: 768px) { table, .wp-block-table table { font-size: .95em; } } /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ button, input[type="button"], input[type="reset"], input[type="submit"] { font-weight: bold; border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, 0.8); font-size: 12px; font-size: 0.75rem; line-height: 1; padding: .6em 1em .4em; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa; } button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus { border-color: #aaa #bbb #bbb; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111; } select { border: 1px solid #ccc; } textarea { width: 100%; } /*-------------------------------------------------------------- # Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Links --------------------------------------------------------------*/ a { color: var(--wp--preset--color--accent-2); } /* phone links not clickable or shown as links on widescreen */ @media screen and (min-width: 1200px) { a[href^="tel:"] { text-decoration: none; border: none; color: inherit; font-weight: inherit; pointer-events: none; } } a:visited { color: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--accent-6); } a:hover, a:focus, a:active { border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--contrast); } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /*-------------------------------------------------------------- ## Masthead ---------------------------------------------------------------*/ .site-header { position: relative; padding-bottom: .5rem; } .navbar .site-logo { padding-left: 5%; } @media screen and (min-width: 1200px) { .navbar .site-logo { border-right: 2px solid #000; padding: 0 3rem; } } .custom-logo-link { max-width: 40vw; padding: 0; display: block; } .site-header .site-logo img, .custom-logo-link img { display: block; margin: 0 auto; } .feature-img { position: relative; } .feature-img img { display: block; width: 100%; aspect-ratio: 3.75 / 2; object-fit: cover; } h2.site-tagline { position: absolute; top: 1.5rem; left: 50%; transform: translatex(-50%); text-align: center; width: 100%; color: var(--wp--preset--color--base); letter-spacing: .05em; margin: 0; max-width: 14em; line-height: 1.3; } @media screen and (min-width:768px) { .site-header { padding-bottom: 0; } .custom-logo-link { max-width: 200px; margin-bottom: 0; } h2.site-tagline { top: 2rem; margin-top: 109px; max-width: 100%; } } @media screen and (min-width: 1200px) { .feature-img img { aspect-ratio: 18 / 7; } .home .feature-img img { aspect-ratio: 1.86 / 1; object-position: 50% 100%; } h2.site-tagline { top: 3rem; font-size: var(--wp--preset--font-size--x-large); } } .title-elements { padding: 2rem; color: var(--wp--preset--color--contrast); margin: 0; width: 100%; height: auto; aspect-ratio: 3 / 1.25; position: relative; display: flex; flex-direction: column; justify-content: center; } .home .title-elements, .page-test-home .title-elements { aspect-ratio: 10 / 1; padding: 0; margin-top: -10vw; color: var(--wp--preset--color--base); } .title-elements .page-title { width: 100%; max-width: 1200px; margin: 0; position: relative; z-index: 2; } .title-elements svg { fill: currentColor; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .page-concert-artists .title-elements { color: var(--wp--preset--color--accent-10); } .page-about-us .title-elements { color: var(--wp--preset--color--accent-4); } .page-outreach .title-elements { color: var(--wp--preset--color--accent-5); } .page-supporters .title-elements { color: var(--wp--preset--color--accent-6); } .page-donate .title-elements { color: var(--wp--preset--color--accent-7); } .page-tickets .title-elements { color: var(--wp--preset--color--accent-11); } .page-contact-us .title-elements { color: var(--wp--preset--color--accent-8); } .single-concert .title-elements { color: var(--wp--preset--color--accent-3); } .single-concert.special-event .title-elements { color: var(--wp--preset--color--accent-9); } @media screen and (min-width: 768px) { .title-elements { aspect-ratio: 6 / 1; } .title-elements .page-title { width: 75%; left: 25%; } } @media screen and (min-width: 1200px) { .title-elements .page-title { width: 100%; max-width: 900px; left: unset; margin-left: auto; margin-right: auto; } } /*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ /* Small menu. */ .menu-button-text { display: none; } @media screen and (min-width: 768px) { .menu-button-text { display: inline-block; padding-right: 5px; font-size: .8rem; font-weight: bold; vertical-align: middle; } } .menu-toggle { color: #fff; background: transparent; display: inline-block; padding: 0; border: none; cursor: pointer; } .menu-toggle img { width: 30px; } .menu-toggle:hover, .menu-toggle:active, .menu-toggle:focus { color: #fff; background: transparent; outline: none; } .main-navigation.toggled ul { display: block; clear: right; } .close-icon, .hamburger-icon { width: 30px; height: 20px; display: inline; vertical-align: middle; } .hamburger-icon { display: inline; } .close-icon { display: none; } .toggled .hamburger-icon { display: none; } .toggled .close-icon { display: inline; } @media screen and (min-width: 768px) { .menu-toggle { top: 70px; width: auto; } .toggled .menu-main-nav-simple-container, .toggled .menu-main-nav-container { padding-top: 0; background: transparent; } } @media screen and (min-width: 1200px) { .menu-toggle { display: none; } } .navbar { display: flex; justify-content: space-between; padding: .75rem 1rem; background: var(--wp--preset--color--base); } .navbar.sticky { position: fixed; width: 100%; top: 0; left: 0; z-index: 999; box-shadow: 0 4px 10px rgba(0,0,0,.25); } @media screen and (min-width: 768px) { .navbar, .navbar.sticky { position: fixed; width: 100%; max-width: 2000px; top: 0; left: 50%; transform: translateX(-50%); z-index: 999; padding: 1.5rem 1rem; background: rgba(255,255,255,.85); } .navbar.sticky { background: rgba(255,255,255,.98); } .admin-bar .navbar { top: 32px; } } @media screen and (min-width: 1200px) { .navbar { justify-content: flex-start; gap: 2rem; } } .main-navigation { z-index: 100; clear: both; color: var(--wp--preset--color--contrast); padding: 10px 20px; display: flex; justify-content: space-between; position: relative; } .toggled .menu-main-nav-container { position: absolute; position: fixed; top: 100%; top: calc(1.5rem + 47px); right: 5px; right: 0; width: auto; width: 100%; padding: 2rem; background: #ffffffee; } .admin-bar .toggled .menu-main-nav-container { top: calc(1.5rem + 47px + 46px); } .admin-bar .sticky .toggled .menu-main-nav-container { top: calc(1.5rem + 47px); } .main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; font-size: .9rem; } .main-navigation ul li { position: static; } .main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 30px; left: -999em; z-index: 99999; border-top: 1px solid #999; background: transparent; transition: left 0.6s ease; } .main-navigation.toggled ul ul { padding: 0; width: 75%; margin-left: 20%; border-left: 1px solid #999; } .main-navigation ul li:hover > ul, .main-navigation ul li:focus > ul, .main-navigation ul li.focus > ul { left: 0; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation.toggled ul ul ul { margin-left: 25%; width: 79%; top: 26px; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li:focus > ul, .main-navigation ul ul li.focus > ul { left: 0; } .main-navigation li { position: relative; } .clicky-menu button, .main-navigation a { display: block; width: 100%; text-align: left; text-decoration: none; color: var(--wp--preset--color--contrast); font-weight: 600; line-height: 1.3; font-size: .9rem; text-transform: uppercase; padding: .75rem; white-space: nowrap; border: none; border-radius: 0; border-bottom: 1px solid #333; transition: all 0.3s ease; } .clicky-menu > li > button[aria-expanded="true"] { background-color: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast); } .main-navigation a:not([href]) { cursor: cell; } .main-navigation a:hover, .main-navigation a:active, .main-navigation a:focus { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast); outline: none; } @media screen and (max-width: 1199px) { .main-navigation ul .menu-item-has-children > a:after, .main-navigation ul .menu-item-has-children > button:after { content: "\25BA"; color: #999; font-size: 14px; padding-left: 5px; } .clicky-menu > li.menu-item-has-children > button[aria-expanded="true"]:after { color: #000; } } .main-navigation ul ul a { border-color: #999; font-weight: normal; background: #dee9e9; text-transform: none; font-size: .75rem; padding: .35rem .75rem; } @media screen and (max-width: 1199px) { .main-navigation ul ul .focus > a { font-weight: bold; } } .main-navigation ul ul ul a { background: #fff; } @media screen and (min-width: 1200px) { .main-navigation { position: relative; z-index: 9999; justify-content: center; align-items: center; padding: 0; color: var(--wp--preset--color--contrast); } .menu-main-nav-container { margin: 0; position: static; } .main-navigation .clicky-menu { position: relative; font-size: 1rem; list-style: none; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; background: transparent; border: 0; } .main-navigation li { float: none; } .main-navigation #primary-menu > li { padding: 0; display: flex; align-items: center; } .main-navigation #primary-menu > li:after { content: "|"; } .main-navigation #primary-menu > li:last-child:after { content: ""; } .main-navigation li a, .clicky-menu button { text-decoration: none; color: var(--wp--preset--color--contrast); padding: .2em 0; font-weight: 600; text-transform: none; line-height: 1.25; display: block; font-size: .9rem; text-align: left; border-radius: 0; border: 0; background: transparent; } .clicky-menu > li > a, .clicky-menu > li > button { font-size: .9rem; padding: .7em; text-transform: uppercase; cursor: pointer; letter-spacing: .05em; } .clicky-menu > li > button:after { content: "\276F"; transform: rotate(90deg) translateX(-2px); display: inline-block; font-size: .8em; margin-left: .5em; font-weight: normal; } .clicky-menu > li > button[aria-expanded="true"] { background-color: var(--wp--preset--color--accent-6); color: #fff; } .clicky-menu > li > button[aria-expanded="true"]:after { transform: rotate(-90deg) translateX(2px); } .main-navigation a:hover, .main-navigation a:focus, .main-navigation a:active, .clicky-menu button:hover, .clicky-menu button:focus { color: var(--wp--preset--color--accent-6); background: transparent; } /* 2nd level */ .main-navigation ul ul { box-shadow: none; float: none; left: 0; top: 100%; flex-direction: row; transition: none; min-width: 100%; border: 0; background: #fff; padding: 15px 26px 20px; margin: 0; height: auto; } .main-navigation ul ul a { color: #000; text-transform: none; font-size: 1rem; font-weight: bold; line-height: 1.2; padding: .2em 0; border: 0; background: transparent; } .clicky-menu ul[aria-hidden="false"] { position: absolute; display: flex; justify-content: space-between; flex: 0 0 auto; border-top: 8px solid var(--accent6); min-height: 300px; } .clicky-menu ul > li { margin-right: 2.5em; } /* 3rd level */ .main-navigation ul.nav-menu ul ul { display: flex; flex-direction: column; height: auto; width: auto; margin: 0; padding: 10px 0; position: static; } /* 3rd level list items */ .main-navigation ul ul ul li { height: auto; float: none; margin: 0; padding: 0; min-height: 0; width: auto; position: static; border-right: none; } /* 3rd level links */ .main-navigation ul ul ul li a { line-height: 1.2; font-size: .9rem; } .main-navigation > div > ul > li.current-menu-item > a, .main-navigation > div > ul > li.current_page_item > a, .main-navigation > div > ul > li.current-menu-ancestor > a, .main-navigation > div > ul > li.current_page_ancestor > a, .main-navigation > div > ul > li:hover > a { color: #777; } .main-navigation ul ul li.current-menu-item > a, .main-navigation ul ul li.current_page_item > a { color: #777; } } .footer-credits-navigation ul, .fat-footer-navigation ul { list-style: none; margin: 0; padding-left: 0; } .fat-footer-navigation ul ul { display: none; } .footer-credits-navigation ul.menu li { font-size: var(--wp--preset--font-size--small); margin-bottom: 1em; } .footer-credits-navigation { margin-top: 2rem; } #fatFooter { margin-bottom: 2rem; } ul.fat-footer-menu > li > div, .fat-footer-navigation ul.menu > li > a { font-weight: bold; padding: .2em 0; line-height: 1.4; display: inline-block; text-transform: uppercase; font-size: .8em; } .fat-footer-navigation ul.menu ul a { line-height: 1.3; } @media screen and (min-width: 1200px) { .fat-footer-navigation ul.menu > li > ul.sub-menu > li { margin: .15em 0; } } .entry-footer, .post-edit-link { display: none; } @media screen and (min-width: 1200px) { #fatFooter { margin-bottom: 4rem; } .footer-credits-navigation ul.menu, .fat-footer-navigation ul.menu { display: flex; justify-content: center; text-align: left; } .fat-footer-navigation ul.menu > li { padding: 0 1rem; } .fat-footer-navigation ul.menu > li > a { padding: 0; } .fat-footer-navigation ul.menu li { margin: 0 0 .7em 0; } .fat-footer-navigation ul.menu a { text-decoration: none; display: block; color: var(--wp--preset--color--contrast); font-weight: bold; line-height: 1.25; } .fat-footer-navigation ul ul { display: block; } .fat-footer-navigation ul.menu > li > ul.sub-menu { margin-top: .7em; } .fat-footer-navigation ul.menu > li > ul.sub-menu > li { font-size: .82em; line-height: 1.3; margin: .25em 0; } .footer-credits-navigation ul { gap: 2.5rem; } #colophon .fat-footer-navigation ul.menu > li > ul.sub-menu > li a { font-weight: 400; } } .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .floating-buttons { position: fixed; top: 10rem; right: 0; z-index: 99; transform: rotate(-90deg) translateY(-100%); transform-origin: top right; /* Pivot at top-right corner */ } .floating-buttons a { transition: background-color 0.3s ease; } .floating-buttons a:hover { background-color: var(--wp--preset--color--contrast) !important; } @media screen and (max-width: 768px) { .floating-buttons { top: 8rem; } .floating-buttons .wp-block-buttons { gap: var(--wp--preset--spacing--60) !important; font-size: var(--wp--preset--font-size--small); } .floating-buttons .wp-block-button__link { border-radius: 1em; } } /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /*-------------------------------------------------------------- # Alignments --------------------------------------------------------------*/ .wp-block-image .alignleft { margin-right: 1.5em; margin-top: 0; max-width: 35%; } .wp-block-image .alignright { margin-left: 1.5em; margin-top: 0; max-width: 35%; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /*-------------------------------------------------------------- # Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; /* Make sure select elements fit in widgets. */ } .widget select { max-width: 100%; } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ .page, .post { margin: 0 0 1.5em; } body.post, body.page { margin: 0; overflow-x: hidden; } .updated:not(.published) { display: none; } /*-------------------------------------------------------------- # Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Media --------------------------------------------------------------*/ /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } /* DETAILS BLOCK */ .wp-block-details { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); background-color: #74a39E75; } .wp-block-details summary::after { content: "\002B"; position: absolute; right: .25rem; top: 0; font-size: var(--wp--preset--font-size--large); line-height: .7; font-weight: 400; } .wp-block-details[open] summary::after { content: "\2212"; } .wp-block-details summary { position: relative; border: 0; font-size: 1em; font-weight: bold; text-transform: uppercase; line-height: 1.3; margin: 0; } /*-------------------------------------------------------------- ## Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } .wp-block-media-text { margin-bottom: 1.5rem; } @media screen and (min-width: 1200px) { .content-area { width: 75%; max-width: 1200px; margin-left: auto; margin-right: auto; } .page-tickets .content-area, .page-donate .content-area { max-width: 900px; } .single-concert .content-area { width: 100%; } } .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100%; border-bottom: 3px solid #000; margin: 2rem auto; } .donors h4 { margin-top: 1rem; line-height: 1.3; margin-bottom: .5rem; } .donors p { line-height: 1.1; margin-bottom: .33em; } /* ---------------------------------------------------- ## CONTACT FORM ------------------------------------------------------*/ .wpcf7 { position: relative; } .wpcf7-form input, .wpcf7-form textarea { border: 0; border-radius: 0; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="url"], .wpcf7-form input[type="number"], .wpcf7-form input[type="tel"] { width: 100%; } input.wpcf7-submit { background-color: var(--wp--preset--color--accent-8); color: #fff; text-transform: uppercase; font-weight: 600; border: 0; border-radius: 0; font-size: 1.1rem; margin-top: .5rem; padding: .35em 2em; cursor: pointer; transition: all 0.3s ease; } input.wpcf7-submit:hover { background-color: var(--wp--preset--color--contrast); } .wpcf7-form-control-wrap { display: block; margin: .5em 0 1em; } @media screen and (min-width: 1200px) { .wpcf7 .input-group > p { display: flex; gap: .5rem; } .wpcf7-form textarea { width: 66%; } input.wpcf7-submit { position: absolute; right: 0; bottom: 5rem; } } @media screen and (min-width: 768px) { .donors { columns: 3; column-gap: 1rem; } } @media screen and (min-width: 1200px) { .donors { columns: 5; } } /* Single Concert Page */ .single-concert.special-event .site-content { background: var(--wp--preset--color--accent-1) url(img/white-double-parabola-hori.svg) center top repeat-y; margin-top: var(--wp--preset--spacing--70); } .concert_type_holder { position: absolute; right: 2rem; top: 1.5rem; width: auto; max-width: 400px; color: var(--wp--preset--color--base); z-index: 9; text-align: right; } .concert-type { text-transform: uppercase; font-weight: 700; font-size: var(--wp--preset--font-size--x-large); letter-spacing: .14em; line-height: 1.1; } .concert-type-year { text-transform: uppercase; font-weight: 400; font-size: var(--wp--preset--font-size--x-large); letter-spacing: .14em; } .single-concert h1.page-title span { font-weight: 400; } .single-concert h1.page-title span.instrument { font-style: italic; font-size: .8em; } .concert-content .wp-block-image { margin-top: 0; margin-bottom: 2rem; } .concert-content .wp-block-image img { aspect-ratio: 2 / 1; object-fit: cover; } .wp-block-buttons.program { margin-top: 2.5rem; margin-bottom: 2.5rem; text-align: center; } .wp-block-button__link { display: block; } .concert-meta .wp-block-button__link { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); display: block; font-size: 1rem; text-align: center; text-transform: uppercase; padding: .8rem 1.1rem; border-radius: 1.8rem; border: none; transition: all 0.3s ease; } .read-more .wp-block-button__link { border-radius: 1.8rem; display: block; padding: .5rem 1.5rem; text-transform: uppercase; text-align: center; } .concert-meta .wp-block-button__link:hover { background: #000000bb; } .concert { margin-top: -3rem; } .single-concert .concert-meta .date { font-weight: 700; font-size: var(--wp--preset--font-size--large); text-transform: uppercase; letter-spacing: .02em; } .single-concert .concert-meta .when { padding-right: 12%; text-align: right; padding-bottom: 1rem; } .single-concert .concert-meta .time { letter-spacing: .05em; } .single-concert .concert-content p { max-width: 600px; } @media screen and (min-width: 768px) { .concert_type_holder { top: 40%; transform: translateY(-50%); right: unset; left: 0; width: 25%; max-width: 400px; padding-left: 2rem; } } @media screen and (min-width: 1200px) { .single-concert .site-content, .single-concert.special-event .site-content { margin-top: 8rem; } .concert-meta .wp-block-button__link { padding: .8rem; } .concert { display: flex; flex-wrap: nowrap; gap: 0; margin-top: -7rem; } .concert-meta { flex-basis: 25%; padding: 0 2rem 0 0; } .single-concert .concert-meta .when { padding-left: 20%; padding-right: 0; text-align: left; } .concert-content { flex-basis: 75%; } .concert-content .wp-block-image img { aspect-ratio: 18 / 7; } } /* Artists grid */ .concert-artist { margin-bottom: 2.5rem; } .artists-grid a { text-decoration: none; } .artists-grid img { max-width: 340px; } .artists-grid figcaption { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--contrast); margin-top: .5rem; } @media screen and (min-width: 768px) { .artists-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem 2rem; max-width: 900px; margin-left: auto; margin-right: auto; } .concert-artist { margin-bottom: 0; } } /* Home Page */ .page-test-home .site-content, .home .site-content { padding: 0 0 1.5rem 0; background-image: none; margin-top: 0; } .page-test-home .content-area, .home .content-area { max-width: unset; width: 100%; } .page-test-home .container, .home .container { margin-bottom: 4rem; } .container.special-events { margin-top: 0; padding: 0 2rem 2rem; border-top: 1.5rem solid var(--wp--preset--color--accent-1); background: var(--wp--preset--color--accent-1) url(img/white-double-parabola-hori.svg) repeat-y top left; background-size: 110% auto; background-repeat: space; } .container.subscription-series { border-left: 7.5rem solid var(--wp--preset--color--accent-2); padding: 0 0 0 1.25rem; } .concert-list { max-width: 1200px; margin-left: auto; margin-right: auto; } .concert-list > h2 { letter-spacing: .14em; margin-bottom: 3rem; margin-top: 0; } .subscription-series .concert-list > h2 { display: flex; flex-direction: column; } span.years { font-weight: 400; } .concert-list-item { display: flex; position: relative; z-index: 1; margin-bottom: 2.5rem; padding-bottom: 2.5rem; padding-right: 1.5rem; flex-direction: column; } .concert-list-item:last-child { margin-bottom: 0; } .special-events .concert-list-item { padding-right: 0; } @media screen and (max-width: 767px) { .subscription-series .concert-list-item:before { content: ""; width: 100vw; height: 100vw; position: absolute; right: 0; top: -.5rem; z-index: 0; background: transparent url(img/beige-double-parabola-hori.svg) no-repeat top center; background-size: 100% auto; } } @media screen and (min-width: 768px) { .subscription-series .concert-list > h2, .concert-list > h2 { flex-direction: row; gap: .5em; margin-bottom: 5rem; margin-top: 0; } .concert-list-item { flex-direction: row; } } /* black bottom border as :after element to calculate correct width */ .subscription-series .concert-list-item:after { content: ""; height: 0; width: calc(25% + 400px); max-width: 100%; border-top: 1px solid #000; position: absolute; bottom: 0; left: 0; } .subscription-series .concert-list-item:last-child:after { display: none; } .concert-list-meta { flex-basis: 25%; position: relative; z-index: 2; flex-shrink: 0; } .concert-list-media { position: relative; z-index: 2; } .concert-list-item .concert-title { text-transform: uppercase; font-size: var(--wp--preset--font-size--medium-large); padding-right: 1rem; line-height: 1.2; margin-top: 0; } .subscription-series .concert-list-meta { color: var(--wp--preset--color--accent-2); } .concert-list-meta .date { font-weight: 700; font-size: var(--wp--preset--font-size--medium-large); text-transform: uppercase; letter-spacing: .02em; } .concert-artist { display: flex; flex-wrap: wrap; gap: 1rem; font-size: var(--wp--preset--font-size--medium-large); margin-bottom: 1rem; } .concert-artist:last-child { margin-bottom: 0; } .concert-list-item .wp-block-buttons.read-more { margin-top: 2rem; position: relative; z-index: 2; } .subscription-series .concert-artist figcaption.artist { order: -1; } .special-events .concert-artist img { height: 300px; width: 300px; object-fit: cover; } .subscription-series .concert-list.button-holder { background: var(--wp--preset--color--base); padding-bottom: 1rem; } .special-events .concert-list-meta .when { margin-bottom: 1rem; letter-spacing: .08em; } .artist-thumb img { display: block; } @media screen and (max-width: 767px) { .special-events .concert-list-item { text-align: center; } .special-events .concert-list-meta .date { font-size: var(--wp--preset--font-size--xx-large); } .special-events .concert-artist { justify-content: center; gap: .5rem; margin-bottom: 2rem; } .special-events .concert-list-item .concert-title { font-size: var(--wp--preset--font-size--large); } .subscription-series .concert-list .when { position: absolute; left: -2rem; color: white; top: 0; transform: translatex(-100%); max-width: 5.5rem; } .special-events .concert-list-item .wp-block-buttons.read-more { justify-content: center; margin-top: 0; } } @media screen and (min-width: 768px) { .container.special-events { /* padding-left: 7rem; */ padding-right: 0; background-position: top -2rem right -12rem; background-size: 100% auto; padding-top: 3rem; border-top: 0; } .container.subscription-series { border: none; background-image: linear-gradient(to right, var(--wp--preset--color--accent-2) 0% 50%, white 50% 100%); padding-left: 2rem; padding-top: 0; } .subscription-series .concert-list { background: var(--wp--preset--color--base) url(img/beige-double-parabola-vert.svg) repeat-y top -7rem left 12rem; background-size: 100% auto; background-repeat: space; padding-left: 2rem; } .subscription-series .concert-artist figcaption.artist { order: unset; } .subscription-series .concert-list-meta .when { margin-bottom: 1rem; letter-spacing: .05em; } .subscription-series .concert-list-meta .date { font-size: var(--wp--preset--font-size--large); } .concert-artist { flex-wrap: nowrap; } .subscription-series .concert-artist a.artist-thumb { min-width: 325px; flex-basis: 325px; } .subscription-series .concert-artist .artist-thumb img { width: 100%; } .concert-list-item .wp-block-buttons.read-more { position: absolute; bottom: 3rem; left: calc(25% + 325px + 1rem); margin: 0; z-index: 10; } .subscription-series .concert-list-item:after { width: calc(25% + 325px); } .special-events .concert-list-item .wp-block-buttons.read-more { left: calc(25% + 300px + 1rem); } .wp-block-buttons.showall { justify-content: center; } } @media screen and (min-width: 1200px) { .container.subscription-series { margin-left: 0; } .concert-list-item .wp-block-buttons.read-more { left: calc(25% + 400px + 2rem); } .special-events .concert-list-item .wp-block-buttons.read-more { left: calc(25% + 300px + 2rem); } .concert-artist { gap: 2rem; } .subscription-series .concert-artist a.artist-thumb { min-width: 400px; flex-basis: 400px; } .subscription-series .concert-list-item:after { width: calc(25% + 400px); } } .about-circle { margin-top: 6rem; padding-top: 2rem; padding-bottom: 2rem; } .about-circle .wp-block-columns { max-width: 1350px; margin: 0 auto; gap: 2rem; position: relative; } .about-circle .wp-block-columns:after { content: ""; width: 100vw; height: 100vw; position: absolute; right: -3rem; top: 1rem; z-index: 2; background: transparent url(img/white-single-parabola-hori.svg) no-repeat right top; background-size: 100% auto; transform: rotate(26deg); } @media screen and (max-width: 781px) { .about-circle h2 { font-size: var(--wp--preset--font-size--xx-large); } } @media screen and (min-width: 782px) { .about-circle .wp-block-columns { transform: translateX(-10%); } .about-circle .wp-block-column figure { transform: translateY(-3%); } .about-circle .wp-block-column:first-child { position: relative; z-index: 1; } .about-circle .wp-block-column:last-child { position: relative; z-index: 3; } .about-circle .wp-block-columns:after { content: ""; width: 100%; height: 100%; right: -3rem; top: -5rem; background-size: 100% auto; } } @media screen and (min-width: 1024px) { .about-circle { padding-top: 0; padding-bottom: 0; } } /* --------------------------------------------------- ## FOOTER ------------------------------------------------------*/ #colophon { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast); padding: 2.5rem 4% 3.5rem; text-align: center; } #colophon a { color: var(--wp--preset--color--contrast); text-decoration: none; display: inline-block; } #colophon a:hover { color: var(--wp--preset--color--accent-9); } .footer-icons { justify-content: space-around !important; padding: 2rem; border-top: 1px solid var(--wp--preset--color--contrast); } .home .footer-icons { border: none; } .single-concert.special-event .footer-icons { background: var(--wp--preset--color--base); border: none; margin-left: -2rem; margin-right: -2rem; } /* -------------------------------------------------- ## THEME COLOURS ---------------------------------------------------*/ :root { --contrast: #000000; --base: #ffffff; --accent-1: #e4ded6; --accent-2: #b83393; --accent-3: #4281aa; --accent-4: #f5a800; --accent-5: #d4b762; --accent-6: #ae5012; --accent-7: #005da7; --accent-8: #b35913; --accent-9: #75a49f; --accent-10: #ef9b78; } .has-contrast-color { color: #000000 !important; } .has-contrast-background-color { background-color: #000000; } .has-base-color { color: #FFFFFF !important; } .has-base-background-color { background-color: #FFFFFF; } .has-accent-1-color { color: #e4ded6; } .has-accent-1-background-color { background-color: #e4ded6; } .has-accent-2-color { color: #b83393; } .has-accent-2-background-color { background-color: #b83393; } .has-accent-3-color { color: #4281aa; } .has-accent-3-background-color { background-color: #4281aa; } .has-accent-4-color { color: #f5a800; } .has-accent-4-background-color { background-color: #f5a800; } .has-accent-5-color { color: #d4b762; } .has-accent-5-background-color { background-color: #d4b762; } .has-accent-6-color { color: #ae5012; } .has-accent-6-background-color { background-color: #ae5012; } .has-accent-7-color { color: #005da7; } .has-accent-7-background-color { background-color: #005da7; } .has-accent-8-color { color: #b35913; } .has-accent-8-background-color { background-color: #b35913; } .has-accent-9-color { color: #75a49f; } .has-accent-9-background-color { background-color: #75a49f; } .has-accent-10-color { color: #ef9b78; } .has-accent-10-background-color { background-color: #ef9b78; } .has-accent-11-background-color { background-color: #004a87; } .has-transparent-color { color: transparent; } .has-transparent-background-color { background-color: transparent; }