/* Static homepage styling for The Isaacs. Based on the crawled Joomla template at templates/isaacs/css/layout.css plus the live homepage widget overrides from the rendered crawl. */ :root { --site-black: #000000; --site-white: #ffffff; --site-light: #f9f9f9; --site-blue-light: #dbe6f0; --site-gray: #686868; --site-gray-dark: #3b3b3b; --site-link-hover: #b3b3b3; --site-focus: #90c7ff; --site-shell: 1110px; } body { background: var(--site-black); color: var(--site-white); font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 300; line-height: 1.625; text-rendering: optimizeLegibility; } main { background: var(--site-white); color: var(--site-black); } h1, h2, h3, h4 { color: var(--site-black); font-weight: 400; letter-spacing: 0; line-height: 1.1; text-transform: uppercase; } h1, .news-section h2 { font-size: clamp(2.25rem, 4vw, 3.25rem); } a:not(.btn) { color: var(--site-black); text-decoration: none; } a:not(.btn):hover { color: #333333; } img, video { display: block; max-width: 100%; } img { height: auto; } input { color: #333333; } a:focus-visible, button:focus-visible, input:focus-visible, .nav-link:focus-visible { box-shadow: 0 0 0 0.25rem rgba(144, 199, 255, 0.45); outline: 2px solid var(--site-focus); outline-offset: 3px; } .site-shell { max-width: calc(var(--site-shell) + 1.5rem); } .skip-link { background: var(--site-white); border: 2px solid var(--site-focus); color: var(--site-black); left: 1rem; padding: 0.5rem 0.75rem; position: absolute; top: 1rem; transform: translateY(-150%); transition: transform 160ms ease; z-index: 2000; } .skip-link:focus { transform: translateY(0); } .site-header { background: var(--site-black); } .navbar { padding: 0.65rem 0 1.2rem; } .site-logo { max-width: 18.75rem; padding: 0; } .site-logo img { padding: 0; width: 100%; } .navbg { flex: 1 1 auto; padding-top: 0.2rem; } .navbar-toggler { border-color: rgba(255, 255, 255, 0.55); } .nav-item { color: var(--site-white); font-size: 1rem; padding-left: 0; } .navbar .nav-link { color: var(--site-white); font-weight: 400; padding-left: 0; padding-right: 0; white-space: nowrap; text-transform: lowercase; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: #cccccc; } .primary-menu { gap: 1.7rem; row-gap: 0.5rem; } .social-list { gap: 0.5rem; } .social-list .nav-item { padding-left: 0; } .social-list img { height: 2.55rem; object-fit: contain; width: 2.55rem; } .feature-video { background: var(--site-black); padding: 0 0 2rem; } .site-section { background: var(--site-white); color: var(--site-black); padding: 2.5rem 0 3rem; } .videos-page main, main.videos-page, .videos-page .videos-section { background: var(--site-black); color: var(--site-white); } .content-flow p+p { margin-top: 1rem; } .meet-page-section { background-color: #f7f3ea; background-image: url("../images/fallback/2023/03/06/barnbg.jpg"); background-image: image-set( url("../images/2023/03/06/barnbg.webp") type("image/webp"), url("../images/fallback/2023/03/06/barnbg.jpg") type("image/jpeg") ); background-position: center top; background-repeat: repeat-y; background-size: contain; padding: 4.7rem 0 4.75rem; } .meet-page__content { color: var(--site-black); } .meet-page__heading { margin-bottom: 2.25rem; } .meet-page__grid { display: grid; gap: 1.75rem 1.5rem; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 2.35rem; text-align: center; } .meet-page__tile { color: var(--site-black); display: block; } .meet-page__tile img { margin: 0 auto 0.7rem; max-width: 200px; transition: opacity 160ms ease, transform 160ms ease; width: 100%; } .meet-page__tile span { display: block; font-size: 1.05rem; font-weight: 400; text-transform: none; } .meet-page__tile:hover img, .meet-page__tile:focus-visible img { opacity: 0.9; transform: translateY(-2px); } .meet-page__copy { max-width: 58rem; } .meet-page__detail { border-top: 1px solid rgba(0, 0, 0, 0.14); margin-top: 2rem; padding-top: 2rem; scroll-margin-top: 1.5rem; } .meet-page__detail h2 { margin-bottom: 1rem; } .meet-page__detail h3 { margin-bottom: 0.85rem; text-transform: none; } .meet-page__list { margin: 0; padding-left: 1.25rem; } .meet-page__list li+li { margin-top: 0.6rem; } .meet-page__album { align-items: flex-start; display: grid; gap: 1rem; grid-template-columns: 140px 1fr; } .meet-page__album img { width: 100%; } .feature-video .ratio { background: #111111; } .feature-video video { object-fit: cover; } .foundation-cta { background: var(--site-white); padding: 2rem 0 2.2rem; } .foundation-cta__link { display: block; margin: 0 auto; max-width: var(--site-shell); width: fit-content; } .foundation-cta img { border: 8px solid #2b16ff; } .tour-section { background-color: var(--site-blue-light); background-image: url("../images/fallback/content/bus-side-2.jpg"); background-image: image-set( url("../images/content/bus-side-2.webp") type("image/webp"), url("../images/fallback/content/bus-side-2.jpg") type("image/jpeg") ); background-position: center bottom; background-repeat: no-repeat; background-size: cover; color: var(--site-black); min-height: 42rem; padding: 2rem 0 2.5rem; } .tour-section h1 { margin-bottom: 0.85rem; } .listen-section { background-color: #1c1815; background-image: url("../images/fallback/content/music-bg.jpg"); background-image: image-set( url("../images/content/music-bg.webp") type("image/webp"), url("../images/fallback/content/music-bg.jpg") type("image/jpeg") ); background-position: center; background-repeat: repeat; background-size: auto; color: var(--site-white); padding: 2rem 0 2.25rem; } .listen-section h2, .email-section h2, .site-footer h2, .site-footer h3 { color: var(--site-white); } .listen-section h2 { font-size: 3rem; margin-bottom: 1.6rem; } .music-rows { display: grid; gap: 2rem; justify-items: center; } .music-row { display: grid; gap: 2.125rem; } .music-row--four { grid-template-columns: repeat(4, 250px); } .music-row--three { grid-template-columns: repeat(3, 250px); } .music-row a { display: block; overflow: hidden; } .music-row img { transition: transform 180ms ease; } .music-row a:hover img, .music-row a:focus-visible img { transform: scale(1.04); } .news-section { background: var(--site-white); color: var(--site-black); padding-bottom: 4.3rem; } .instagram-embed__wrap { display: block; } .instagram-frame { background: #ffffff; border: 1px solid #dbdbdb; border-radius: 3px; box-shadow: none; display: block; min-height: 60rem; width: 100%; } .instagram-embed__fallback { margin-top: 0.75rem; } .email-section { background: var(--site-black); color: var(--site-white); padding-bottom: 2.75rem; padding-top: 1.5rem; } .email-intro { align-items: center; display: grid; gap: 1.25rem; grid-template-columns: 12rem 1fr; padding: 2rem 0 0; } .email-intro p { font-size: 1.1rem; margin: 0; } .email-icon { display: block; line-height: 1; } .grey { color: var(--site-gray); } .signup-form .row { --bs-gutter-x: 1rem; } .signup-form .form-control { border-radius: 0.25rem; min-height: 2.35rem; } .required-indicator { color: var(--site-white); font-weight: 700; margin-left: 0.1rem; } .form-note { color: #d4d4d4; } .btn-primary { --bs-btn-bg: var(--site-gray); --bs-btn-border-color: var(--site-gray-dark); --bs-btn-color: var(--site-white); --bs-btn-hover-bg: #c2c2c2; --bs-btn-hover-border-color: var(--site-gray-dark); --bs-btn-hover-color: var(--site-white); --bs-btn-active-bg: #c2c2c2; --bs-btn-active-border-color: var(--site-gray-dark); --bs-btn-active-color: var(--site-white); } .site-footer { background: var(--site-black); color: var(--site-white); padding: 1.5rem 0 2rem; } .footer-heading { font-size: 2rem; font-weight: 400; margin-bottom: 0.65rem; } .site-footer a:not(.btn) { color: var(--site-white); } .site-footer a:not(.btn):hover { color: var(--site-link-hover); } .footer-socials { gap: 0.9rem; } .copyright p { margin: 0; } .copyright { font-size: 0.95rem; } /* Bandsintown widget styling from the live homepage */ .bit-widget { background-color: rgba(0, 0, 0, 0); color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 16px; min-width: 250px; padding-bottom: 10px; width: 100%; } .bit-widget .bit-spacer { height: 10px; } .bit-widget .bit-top-track-button { display: block; font-size: 16px; font-weight: 700; padding: 5px 40px 0 10px; } .bit-widget .bit-top-track-button span { text-decoration: underline; } .bit-widget .bit-nav-bar-container { padding: 0 10px; } .bit-widget .bit-nav-bar { align-items: flex-end; display: flex; flex-direction: row; padding: 0 0 10px; } .bit-widget .bit-logo-container { margin: 0 0 0 auto; } .bit-widget .bit-upcoming-events { border-bottom: 1px solid rgba(255, 255, 255, 0.5); margin: 0 10px 10px; } .bit-widget .bit-event-list-title { display: inline-block; font-size: 14px; font-weight: 700; padding: 0 12px 0 0; } .bit-widget .bit-event { border-top: 1px solid rgba(255, 255, 255, 0.5); color: #000000; line-height: 22px; padding: 10px 6px; } .bit-widget .bit-event:hover { background-color: rgba(81, 81, 81, 0.1); } .bit-widget .bit-details { align-items: center; display: flex; flex-direction: row; justify-content: flex-start; } .bit-widget .bit-date { font-weight: 700; margin: 0 15px 0 0; min-width: 95px; } .bit-widget .bit-titleWrapper { margin-right: auto; } .bit-widget .bit-venue { color: #333333; margin: 0 auto 0 0; } .bit-widget .bit-location { color: #333333; font-weight: 400; hyphens: auto; margin: 0 14px 0 5px; text-align: right; } .bit-widget .bit-event-buttons { display: flex; flex-direction: row; } .bit-widget .bit-button { font-weight: 700; line-height: 44px; text-align: center; width: 150px; } .bit-widget .bit-rsvp { background-color: rgba(0, 0, 0, 0); border: 1px solid #333333; color: #333333; font-size: 0.88em; margin-top: 0; text-transform: uppercase; } .bit-widget .bit-offers { background-color: #333333; border: 1px solid #333333; color: #ffffff; cursor: pointer; margin-left: 15px; margin-top: 0; position: relative; } .bit-widget .bit-offers-text { font-size: 0.88em; text-transform: uppercase; white-space: nowrap; } .bit-widget .bit-upcoming-events-show-all-button { background-color: rgba(0, 0, 0, 0); border: 1px solid #333333; color: #333333; cursor: pointer; font-size: 0.88em; font-weight: 700; line-height: 44px; margin: 0 10px; text-align: center; text-transform: uppercase; } .bit-widget .bit-play-my-city-button { background-color: #333333; border: 1px solid #333333; color: #ffffff; } .bit-widget .bit-clickable { color: #333333; } .bit-widget .bit-logo-desktop { display: block; } .bit-widget .bit-logo-mobile, .bit-widget .google-pixel-iframe { display: none; } @media (max-width: 991.98px) { .navbar { padding-bottom: 0.9rem; } .navbar-collapse { padding-bottom: 1rem; padding-top: 0.75rem; } .nav-item { display: inline-block; padding-left: 0; text-align: right; } .primary-menu { align-items: flex-end; gap: 0.35rem; } .feature-video { padding-bottom: 1.5rem; } .meet-page__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .music-row--four { gap: 1.25rem; grid-template-columns: repeat(2, 250px); } .music-row--three { gap: 1.25rem; grid-template-columns: repeat(2, 250px); } .bit-widget .bit-event { padding: 16px 10px; } .bit-widget .bit-details { align-items: flex-start; flex-direction: column; justify-content: center; } .bit-widget .bit-event-buttons { flex-direction: column-reverse; margin: 0 0 0 15px; } .bit-widget .bit-rsvp, .bit-widget .bit-offers, .bit-widget .bit-button { width: 150px; } } @media (max-width: 767.98px) { h1, .news-section h2, .listen-section h2, .footer-heading { font-size: 2.25rem; } .site-logo { max-width: min(15rem, 58vw); } .social-list img { height: 2.15rem; width: 2.15rem; } .foundation-cta { padding: 1.25rem 0; } .foundation-cta img { border-width: 6px; } .site-section, .meet-page-section { padding-bottom: 2.5rem; padding-top: 2.5rem; } .meet-page__grid { gap: 1.35rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .meet-page__album { grid-template-columns: 110px 1fr; } .tour-section { min-height: 30rem; padding-bottom: 2rem; } .instagram-frame { min-height: 42rem; } .email-intro { grid-template-columns: 1fr; padding-top: 1rem; } .email-icon { font-size: 5.5rem; } } @media (max-width: 575.98px) { .music-row--four, .music-row--three { gap: 1rem; grid-template-columns: 1fr; } .music-row img { margin: 0 auto; } .instagram-frame { min-height: 32rem; } .meet-page__grid { grid-template-columns: 1fr; } .meet-page__album { grid-template-columns: 1fr; } .meet-page__album img { max-width: 180px; } .footer-socials { justify-content: flex-start; } } .store-section { padding: 3rem 0; } .store-section h1 { margin-bottom: 2rem; } .contact-info-row { margin-left: auto; margin-right: auto; max-width: 860px; } .contact-logo-column { display: grid; gap: 7rem; justify-items: center; } .contact-logo { height: auto; max-width: 300px; width: 100%; } .booking-section { margin-top: 4rem; max-width: 100%; overflow-x: clip; } .booking-section h2 { margin-bottom: 1.5rem; } .gigwell-booking-form-wrapper, .gigwell-booking-form-wrapper gigwell-booking-form { display: block; max-width: 100%; width: 100%; } @media (max-width: 991.98px) { .contact-logo-column { gap: 3rem; } }