@layer reset, defaults, design, utilities; /* # SCREEN-CORE.CSS - This file is _always_ loaded, it's referenced in the of all pages. - It should therefor contain styles that are _very likely_ to be used on the majority of pages, and should avoid styles for things that are unlikely to appear on many pages. _Those_ styles belong in their own stylesheet, and should be loaded on a page only when needed. - This is meant to strike something of a balance between practicality and the theoretical goodness of "critical CSS" - which is almost never worth the effort or build steps required. # CSS Cascade Layers NOTES: Layers should be declared before all other CSS. REFERENCES: - https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers - https://css-tricks.com/css-cascade-layers/ Reset: Undo inconsistent default browsers styles, so there are no differences between them. Defaults: Styles for "default" elements and "core level" markup. E.g., Fonts, Headings, how a

or etc look by default, or how a basic form looks - without any component or page specific design over-rides. Design: The actual design of the site. How components look, how things are laid out, page specific styling, etc. Utilities: For the rare case where it makes sense, utility classes should override everything else. e.g., heading styles should _not_ be mapped to HTML heading level, but it's handy to map to a utility class. */ @layer reset { /* Use a sensible CSS box model */ *, *:before, *:after { box-sizing : border-box; } /* Ensure consistent default margins, paddings, borders. Make everything inherit font styles. Background-repeat should by default not repeat. Use more modern text wrap to help ensure no typographic widows */ * { margin: 0; padding: 0; border-width: 0; font-size: 100%; font: inherit; background-repeat: no-repeat; text-wrap: pretty; } img { display: block; } html { text-size-adjust: none; /* Text size only controlled by font-size */ -webkit-font-smoothing: antialiased; /* This is a good default in a modern Retina world */ scroll-behavior: smooth; /* Default to smooth scrolling (disabled conditionally later, for a11y) */ } /* Any CSS that would remove the bullet or number indicators of a list’s items will also remove the semantics. REFERENCE: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html So here we allow visually removing a bullet only if the markup explicitly adds back the list semantics through having a role='list' property value. TL:DR; To get rid of a bullet, add `role="list"` to the UL or OL element. */ :where(ul, ol)[role='list'] { list-style: none; } :where(ul, ol):not([role='list']) { /* Ensure any lists without an explicit role attribute display their default bullet styling */ margin-inline-start: 2em; } /* form resets */ :where(button, input, select, textarea) { color: inherit; font-family: inherit; font-style: inherit; font-weight: inherit; } :where(button) { appearance: none; /* Don't use the OS's theming */ display: inline-block; cursor: pointer; touch-action: manipulation; /* faster taps as long as we're not zooming etc */ -webkit-tap-highlight-color: transparent; /* No, Safari */ } :where([disabled]), :where([disabled]) * { /* if anything is marked as disabled, the cursor should reflect that status */ cursor: not-allowed; filter: grayscale(1); } /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ @media (prefers-reduced-motion) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Becuase :is() and :where() are forgiving selectors, we can add multiple rules that might be unrecognised by the browser - and if a selector matches the rules are applied to that selector match. Without using :is(), when a browser doesn't recognise a single selector in a selector list the browser will discards the whole ruleset. :where has no specificity, :is takes the specificity of the most specific selector within the group. :is vs :where examples - https://developer.mozilla.org/en-US/docs/Web/CSS/:where#examples */ :where( ::-webkit-selection, ::-moz-selection, ::selection ) { background-color: hsl( var(--brand-colour, 100 20% 20%) ); color: #fff; } :where( ::-webkit-input-placeholder, input:-moz-placeholder, ::placeholder ) { font-size: 1em; } /* kill default HTML5 styling on webkit */ input[type=search], input[type=submit] { -webkit-appearance : none; } input[type="search"]:where( ::-webkit-search-decoration, ::-webkit-search-cancel-button ), ::-webkit-details-marker { display: none; } } @layer defaults { /* # Font Imports */ /* .e.,g... @font-face { font-family: 'Poppins'; src: url('/assets/fonts/subset-Poppins-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } */ /* # Focus management */ *:focus { /* fallback for older browsers that don't support 'focus-visible' */ outline: max(2px, 0.2em) solid currentColor !important; outline-offset: 0.25em; z-index: 1000; scroll-padding-block-end: 10vh; /* ensure it's in the viewport */ } @supports selector(:focus-visible) { *:focus { /* Do nothing with 'focus', as that activates on click as well as keyboard */ outline: none !important; text-decoration: none; } *:focus-visible { /* Let the browser decide when things "should" have focus - e.g., keyboard, not click */ } } :target { /* ensure it's clearly in the viewport */ scroll-padding-block: 2rem 10vh; } /* # CSS Custom Properties NOTES: Experimenting with "Custom property values with defaults" https://lea.verou.me/2021/10/custom-properties-with-defaults/ :root { --variable-name: value; } element { --_variable-name: var(--variable-name, fallback-if-no-such-variable); property: var(--_variable-name); } */ :root { /* Generic measures */ --gap: var(--font-size-base); --letter-spacing: 0.025em; /* measures intended for "row" layout rather than component layout */ --row-width-max: 1280px; --row-padding-block: var(--gap); --row-padding-inline: var(--gap); /* Animation speeds */ --very-fast: 0.15s; --fast: 0.3s; --slow: 0.6s; --very-slow: 1.3s; --font-family-primary : "Toronto Subway", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-family-headings : "fino-sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-family-helvetica : "Helvetica Neue", Helvetica, Arial, sans-serif; /* Colour / theme related (hsl). I can't wait for Color Module Level 5 so this can be re-worked. WAITING FOR... https://12daysofweb.dev/2022/css-color-spaces-relative-color-syntax/ */ --ui-green: 103 46% 48%; --ui-red: 17 46% 48%; --black: 0 0% 0%; --white: 0 0% 100%; --brand-colour: 120 40% 40%; --brand-colour-contrast: 300 60% 60%; --brand-purple: 330 58% 7%; --subtle-purple: 349 28% 17%; --pale-purple: 330 35% 74%; --brand-Gold: 40 59% 57%; --frame-size: 60px; } @media screen and (min-width: 960px) { :root { --frame-size: 80px; } } /* # Base Elements */ html { background-color: hsl( var(--brand-purple) ); color : hsl( var(--pale-purple) ); accent-color : var(--brand-gold, auto); /* https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */ font-size : 16px; } :where(body) { font-size: var(--font-size-base, 100%); line-height: 1.375; font-family: var(--font-family-primary); hyphens: none; } sup { vertical-align: top; font-size: .75em; } sub { vertical-align: bottom; font-size: .75em; } strong { font-weight: bold; } em { font-style: italic; } code { font: .85em/1 Courier, monospace; } a:link { -webkit-tap-highlight-color: hsl( var(--brand-Gold) ); text-decoration: none; } a:link, a:visited { color: inherit; } a:hover { } a:focus, a:active { outline-color: transparent; } /* Not "0 outline" as that wouldn't be accessible for high contrast etc */ /* # HTML "Components" - some basic HTML stuff is now more mark-up pattern than individual elements */ /* ## Details */ details > summary { list-style-type: none; padding: 0.5em var(--gap) 0.25em 0; border: 1px solid transparent; border-bottom-color: currentColor; background: transparent url(/assets/images/plus.svg) 100% 5px no-repeat; cursor: pointer; } details > summary:focus { text-decoration: none; } details[open] > summary { background: transparent url(/assets/images/minus.svg) 100% 5px no-repeat; } details .content { padding: var(--gap, 1rem) 0; } /* ## Dialog */ body:has(dialog[open]) { /* Stop page scrolling if there's an open dialog */ overflow: hidden; } dialog.modal { position: sticky; inset: 0; max-width: 40ch; border: 0; padding: var(--gap); background-color: hsl( var(--black) / 0.2 ); box-shadow: 0 0 var( --gap ) hsl( var(--black) / 0.6 ); backdrop-filter: blur(10px); } /* ## Tables */ table { border-collapse: collapse; /* Make it behave like every other HTML element */ } caption, th, td { padding: 0.5rem; text-align: left; } tr:nth-of-type(2n) td { background-color: hsl(0 0% 0% / 0.1) } caption { text-transform: uppercase; font-size: 0.875em; letter-spacing: 0.02em; font-weight: bold; } thead { border-block-end: 1px solid currentColor; } tbody th { border-inline-end: 1px solid currentColor; } tfoot { border-block-start: 1px solid currentColor; } /* # Image management */ img { max-width: 100%; } a img { margin: 0; } img[data-object-fit="contain"] { object-fit: contain; } img[data-object-fit="cover"] { object-fit: cover; } picture { display: flex; } picture > img { width: 100%; height: 100%; } /* loading spinner bg on elements */ picture { background-color: hsl( var(--black) / 0.2 ); position: relative; } picture > img { z-index: 1; } picture:before { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); content: ""; display: block; width: 3em; height: 3em; margin: 8px; border-radius: 50%; border: 0.5em solid #fff; border-color: #fff transparent #fff transparent; animation: loadingSpinner var(--slow, 0.9s) linear infinite; } @keyframes loadingSpinner { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } } /* Only render images when in the viewport, we can assume any image inside

is already in the viewport REFERENCE: https://www.industrialempathy.com/posts/image-optimizations/ */ main img, footer img { content-visibility: auto; } } @layer design { /* This is where you would add the CSS for your design. There is nothing here, so that the file can be duplicated easily as a starting point for other projects. The styles for the demo site are stored in `screen-demo.css` and are slotted into the design layer. Just removing that file brings things back to a "standard" blank starting position ready for any project. */ header { position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: var(--frame-size); display: flex; justify-content: space-between; border-bottom: 1px solid hsl( var(--brand-Gold) ); @media screen and (max-width: 739px) { background: hsl( var(--brand-purple) ); } #enupal-stripe-cart { position: relative; svg { width: 20px; height: auto; path { fill: white; } } .badge { position: absolute; top: 0px; left: -15px; color: hsl( var(--brand-purple) ); background: hsl( var(--brand-Gold) ); display: block; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 13px; } } .k-icon, .peacock-icon { display: flex; justify-content: center; align-items: center; width: var(--frame-size); height: var(--frame-size); transition: all ease 0.3s; aspect-ratio: 1; svg { width: calc( var(--frame-size) / 1.4 ); path { transition: all ease 0.3s; } } .siteName { display: none; } &:hover, &:focus { transform: scale(1.1); svg { path { fill: white !important; } } } } .k-icon { &:before { content: ""; width: 1px; height: 100%; position: absolute; top: 0px; left: var(--frame-size); background-color: hsl( var(--brand-Gold) ); z-index: 100; } } .navBar { flex-grow: 1; display: flex; align-items: center; ul { margin-left: 0px; list-style: none; gap: 20px; a { letter-spacing: 1px; color: hsl( var(--brand-Gold) ); text-transform: uppercase; font-weight: bold; transition: all ease 0.3s; &:hover, &:focus { color: white; } } } @media screen and (max-width: 739px) { justify-content: center; button { background: transparent; color: hsl( var(--brand-Gold) ); font-weight: bold; text-transform: uppercase; } .inner { position: absolute; top: var( --frame-size); left: 0px; width: 100%; ul { background: hsl( var(--brand-Gold) ); li { display: block; a { color: hsl( var(--brand-purple) ); padding: 10px 14px; text-align: center; display: block; } } } } } @media screen and (min-width: 740px) { #enupal-stripe-cart { padding-right: calc( var(--frame-size) / 2); } #hamburger { display: none; } width: calc(100% - (var(--frame-size) * 2) ); .inner { flex-grow: 1; padding-left: 20px; ul { display: flex; } } } } } @media screen and (max-width: 739px) { html { .navBar { width: calc(100% - (var(--frame-size) * 2) ); padding-left: calc( var(--frame-size) / 2); padding-right: calc( var(--frame-size) / 2); justify-content: space-between; #enupal-stripe-cart { justify-self: flex-end; } border-right: 1px solid hsl( var(--brand-Gold)); } .inner { opacity: 0; pointer-events: none; transform: translateX(-20%); transition: all ease 0.3s; z-index: -11; position: relative; } &.nav-active { .inner { pointer-events: auto; display: block; opacity: 1; transform: translateX(0%); } } } } body { height: 100%; position: relative; span.grid { z-index: 1; height: 100%; position: absolute; width: 60%; top: 0px; left: 50%; transform: translateX(-50%); border-left: 1px solid hsl( var(--subtle-purple) ); border-right: 1px solid hsl( var(--subtle-purple) ); .center { height: 100%; position: absolute; width: 50%; top: 0px; left: 50%; transform: translateX(-50%); border-left: 1px solid hsl( var(--subtle-purple) ); border-right: 1px solid hsl( var(--subtle-purple) ); &:after { content: ""; width: 1px; height: 100%; position: absolute; top: 0px; left: 50%; transform: translateX(-0%); background-color: hsl( var(--subtle-purple) ); z-index: 100; } } } } html:not(.mobile-nav) { body { &:before { content: ""; width: 1px; height: 100%; position: absolute; top: 0px; left: var(--frame-size); background-color: hsl( var(--brand-Gold) ); z-index: 100; } &:after { content: ""; width: 1px; height: 100%; position: absolute; top: 0px; right: var(--frame-size); background-color: hsl( var(--brand-Gold) ); z-index: 100; } } } @keyframes test { 0% { transform: scale(1.4) } 100% { transform: scale(1) } } .pageBanner { .swiper { width: 100%; } position: relative; z-index: 1; background: hsl( var(--brand-purple) ); &:before { content: ""; width: 100%; height: 140px; background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); display: block; position: absolute; top: 0px; left: 0px; z-index: 2; } &:after { content: ""; width: 100%; height: 1px; position: absolute; bottom: var(--frame-size); left: 0px; background-color: hsl( var(--brand-Gold) ); z-index: 10; } .imageBanner { position: relative; overflow: hidden; max-height: 100vh; overflow: hidden; width: 100%; .peacock-branding { position: absolute; top: 50%; left: 50%; max-height: 80%; width: 30%; z-index: 1; transition: all ease 0.4s; transition-delay: 0.4s; .cta { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%) translateY( calc(100% - 6px ) ); overflow: hidden; width: 100%; height: 50px; text-align: center; a { white-space: nowrap; display: inline-block; background: hsl( var(--brand-Gold) ); color: hsl( var(--brand-purple) ); padding: 10px 15px; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; margin: 0 auto; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); transition: all ease 0.4s; transition-delay: 0.6s; } } } picture.scale { width: 100%; opacity: 0.8; animation: test 40s infinite; animation-direction: alternate; img { width: 100%; } } &:not(.swiper-slide-active) { .peacock-branding { opacity: 0; transform: translateX(-50%) translateY(-50%) scale(0.8); filter: blur(20px); } } &.swiper-slide-active { .peacock-branding { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); filter: blur(0px); .cta { a { top: 0px; } } } } } } html.mobile-nav { .pageBanner { padding-top: var(--frame-size); &:after { content: none; } .peacock-branding { width: 70%; max-height: 95%; top: 45%; .cta { font-size: 13px; a { padding: 7px 12px; } } } } } .container { position: relative; z-index: 1; .innerFrame { margin: 0 auto; width: calc(100% - (var(--frame-size) * 1) ); @media screen and (min-width: 720px) { width: calc(100% - (var(--frame-size) * 3) ); } padding-top: var(--frame-size); padding-bottom: var(--frame-size); } &.borderBottom { border-bottom: 1px solid hsl( var(--brand-Gold) ); } } .innerContainer { max-width: 1100px; width: 100%; margin: 0 auto calc( var(--frame-size) / 2) auto; &.tiny { max-width: 500px; } &.twoColumn { display: grid; gap: 0px; @media screen and (min-width: 960px) { gap: 40px; grid-template-columns: 1fr 1fr; } @media screen and (min-width: 1280px) { gap: 60px; } } } .introBlock { text-align: center; max-width: 1100px; margin: 0 auto calc( var(--frame-size) / 2) auto; p { font-size: 20px; } @media screen and (min-width: 960px) { p { font-size: 30px; } } } .blockquote { @media screen and (min-width: 960px) { aspect-ratio: 1; } background: url(../images/blockquote-pattern.jpg); padding: calc( var(--frame-size) / 2 ); color: hsl( var(--brand-Gold) ); .quote { font-family: var(--font-family-headings); font-size: 28px; margin-bottom: 20px; &:before { content: open-quote; font-weight: bold; font-size: 36px; line-height: 20px; } } .author { text-transform: uppercase; letter-spacing: 1px; } @media screen and (min-width: 960px) and (max-width: 1280px) { .quote { font-size: 36px; } } @media screen and (min-width: 1281px) { .quote { font-size: 40px; } } } .textImageBlock { .textBlock { background: url(../images/blockquote-pattern.jpg); padding: calc( var(--frame-size) / 2 ); @media screen and (min-width: 1281px) { display: flex; flex-direction: column; justify-content: center; align-items:center; } } } .quoteRow { &:nth-of-type(2n) { @media screen and (min-width: 960px) { .image { order: 2; } .blockquote { order: 1; } } } } h2 { color: hsl( var(--brand-Gold) ); font-size: 20px; } h1 { color: hsl( var(--brand-Gold) ); } .sectionTitle { font-family: var(--font-family-headings); font-size: 40px; line-height: 40px; text-align: center; position: relative; display: flex; justify-content: center; align-items: center; gap: 15px; span.innerTitle { display: block; white-space: no-break; } &:before { content:""; display: block; width: 36px; height: 10px; background-size: contain; background: url(../images/section-divider.svg) center center no-repeat; } &:after { transform: rotate(180deg); content:""; display: block; width: 36px; height: 10px; background-size: contain; background: url(../images/section-divider.svg) center center no-repeat; } @media screen and (min-width: 960px) { font-size: 50px; line-height: 46px; } } .tourList { background: hsl( var(--brand-purple) ); padding: calc( var(--frame-size) / 3 ); @media screen and (min-width: 960px) { padding: calc( var(--frame-size) / 2 ); } ul { list-style: none; display: grid; gap: 14px; margin-left: 0px; li { .date { white-space: nowrap; } .left { flex-grow: 1; text-transform: uppercase; color: hsl( var(--brand-Gold) ); .topLine { font-weight: bold; } .location { color: white; } } .links { text-transform: uppercase; font-weight: bold; letter-spacing: 1px; } @media screen and (min-width: 1024px) { display: flex; justify-content: space-between; } @media screen and (max-width: 1200px) { .date { display: block; } } @media screen and (max-width: 959px) { &:not(:last-of-type) { padding-bottom: 14px; border-bottom: 1px solid hsl( var(--subtle-purple) ); } } @media screen and (min-width: 960px) { &:nth-of-type(-n + 8) { padding-bottom: 14px; border-bottom: 1px solid hsl( var(--subtle-purple) ); } } } @media screen and (min-width: 960px) { &.twoColumn { gap: 30px; grid-template-columns: 1fr 1fr; grid-column-gap: 60px; grid-direction: column; } } @media screen and (min-width: 1200px) { .location { &:after { content: "|"; margin-left: 6px; margin-right: 6px; color: hsl( var(--subtle-purple) ); } } } } } .swiper-slide { img { width: 100%; } } .buttons { &.centered { text-align: center; } } .cms-textblock { p.meta { opacity: 0.6; font-size: 14px; font-weight: bold; } h2 { font-family: var(--font-family-headings); font-size: 28px; line-height: 28px; margin-bottom: 14px; color: hsl( var(--brand-Gold) ); font-weight: bold; @media screen and (min-width: 720px) { font-size: 36px; line-height: 36px; } @media screen and (min-width: 720px) { font-size: 48px; line-height: 48px; } &:has( + .meta ) { margin-bottom: 0px; } } h3 { font-family: var(--font-family-headings); font-size: 24px; line-height: 24px; margin-bottom: 14px; color: hsl( var(--brand-Gold) ); font-weight: bold; @media screen and (min-width: 720px) { font-size: 28px; line-height: 28px; } @media screen and (min-width: 720px) { font-size: 36px; line-height: 36px; } } h4 { color: hsl( var(--brand-Gold) ); font-weight: bold; font-size: 20px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; @media screen and (min-width: 720px) { font-size: 24px; } } h5 { color: hsl( var(--brand-Gold) ); font-weight: bold; font-size: 20px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; } h6 { color: hsl( var(--brand-Gold) ); font-weight: bold; font-size: 20px; margin-bottom: 0px; text-transform: uppercase; letter-spacing: 1px; } p { &:not(:last-of-type) { margin-bottom: 1em; a { text-decoration: underline; &:hover, &:focus { color: hsl( var(--brand-Gold) ) !important; } } } } *:last-child:has(a) { text-decoration: none !important; border: 2px solid hsl( var(--brand-Gold) ); padding: 10px 15px; display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; color: hsl( var(--brand-Gold) ); &:hover, &:focus { background-color: hsl( var(--brand-Gold) ); color: hsl( var(--brand-purple) ) !important; } } } .footer { border-top: 1px solid hsl( var(--brand-Gold) ); text-align: center; .siteTitle { font-family: var(--font-family-headings); font-size: 40px; line-height: 40px; letter-spacing: 1px; text-align: center; text-transform: uppercase; color: hsl( var(--brand-Gold) ); margin: 0 auto calc(var(--frame-size) / 2) ; @media screen and (min-width: 960px) { font-size: 50px; line-height: 50px; } } .peacock-icon { margin: 0 auto calc(var(--frame-size) / 2) ; width: 42px; display: block; } .messages { font-size: 14px; margin: 0 auto calc(var(--frame-size) / 2) ; a { text-decoration: underline; } } .socialMedia { margin: 0 auto calc(var(--frame-size) / 2) ; ul { list-style: none; display: flex; justify-content: center; align-items: center; gap: 10px; margin-left: 0px; li { .icon { display: block; svg { width: 32px; height: 32px; display: block; path { transition: all ease 0.3s; fill: hsl( var(--brand-Gold) ); } } } .text { display: none; } &.x { .icon { svg { max-width: 24px; max-height: 24px; } } } a { &:hover, &:focus { svg { path { fill: white; } } } } } } } .credit { font-size: 13px; letter-spacing: 1px; opacity: 0.5; text-transform: uppercase; } } .podcastGrid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); @media screen and (min-width: 720px) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; } @media screen and (min-width: 1024px) { gap: 40px; } ul.options { list-style: none; margin: 14px 0 0 0; display: flex; gap: 10px; align-items: center; text-transform: uppercase; letter-spacing: 1px; border: none !important; padding: 0px; &:hover, &:focus { background: transparent; color: hsl( var(--brand-Gold) ) !important; } li { border: none !important; padding: 0px; &:hover, &:focus { background: transparent; color: hsl( var(--brand-Gold) ) !important; } } span.icon { width: 24px; height: 24px; display: flex; flex-direction: column; align-items: center; justify-column: center; svg { width: 100%; height: 100%; max-width: 24px; max-height: 24px; path { fill: hsl( var(--brand-Gold) ); } } } span.text { display: none; } a { display: block; &:hover, &:focus { cursor: pointer; svg { path { fill: white; } } } } } .image { margin-bottom: 20px; } h3 { font-family: var(--font-family-headings); font-size: 28px; line-height: 28px; margin-bottom: 14px; color: hsl( var(--brand-Gold) ); font-weight: normal; @media screen and (min-width: 720px) { font-size: 36px; } } } .buildingBlocks { .socialMedia { margin: 0 auto calc(var(--frame-size) / 2) ; .actions { display: flex; justify-content: center; margin-top: 10px; } ul { list-style: none; display: flex; justify-content: center; align-items: center; gap: 10px; margin-left: 0px; li { .icon { display: block; svg { width: 32px; height: 32px; display: block; path { transition: all ease 0.3s; fill: hsl( var(--brand-Gold) ); } } } .text { display: none; } &.x { .icon { svg { max-width: 24px; max-height: 24px; } } } a { &:hover, &:focus { svg { path { fill: white; } } } } } } } .innerContainer { padding-top: 40px; @media screen and (min-width: 720px) { padding-top: 60px; } margin-bottom: 0px; } display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); @media screen and (min-width: 720px) { gap: 60px; } .textBlockRow { .cms-textblock { margin: 0 auto; max-width: 720px; } } .textImageBlock.newsItem { .cms-textblock { text-align: center; p { font-size: 120%; } } } @media screen and (min-width: 720px) { .textImageBlock:nth-of-type(even):has( ~ .textImageBlock ) { .image, .video { order: 2; } } } .imageGrid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); @media screen and (min-width: 720px) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } @media screen and (min-width: 1024px) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } a { overflow: hidden; img { transition: all ease 0.3s; } &:hover, &:focus { img { transform: scale(1.1); } } } } .columnWrapper { display: grid; gap: 20px; .column { .image, .video { margin-bottom: 20px; } } &.columnCount-2 { @media screen and (min-width: 640px) { gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } &.columnCount-3 { @media screen and (min-width: 960px) { gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } @media screen and (min-width: 960px) { gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } } } } } @layer utilities { /* Utility classes start with a uc_ prefix, so they're obvious in markup */ /* Heading styles should not be set on the naked elements. Doing so often encourages people to use the wrong heading level purely to get the right look. Instead, use the right semantic heading level and apply a class to get the appropriate look. */ :where( .uc_h1, .uc_h2, .uc_h3 ) { font-family : var(--font-family-headings); font-weight : bold; letter-spacing: var(--letter-spacing); text-wrap : balance; } :where(.uc_h1) { font-size: var(--font-size-heading-large) } :where(.uc_h2) { font-size: var(--font-size-heading) } :where(.uc_h3) { font-size: var(--font-size-heading-small) } :where(.uc_hide-visually):not(:focus):not(:active) { /* screen readers still get the content */ /* Source: https://www.tpgi.com/the-anatomy-of-visually-hidden/ https://www.a11yproject.com/posts/how-to-hide-content/ */ position: absolute; height: 1px; width: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } :where(.uc_hide-for-everyone) { /* screen readers also get the content hidden */ display: none !important; } :where(.uc_button) { display: inline-flex; align-items: center; gap: calc( var(--gap) / 2 ); color: hsl( var(--brand-Gold) ); transition: background-color, var(--fast); border: solid 2px hsl( var(--brand-Gold) ); padding: 10px 15px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; background: transparent; } :where(.uc_button):hover { background-color: hsl( var(--brand-Gold) / 1 ); color: hsl( var(--brand-purple) ); } /* Styling "blocks" of text such as from a Rich Text Editor, that contains multiple types of mostly text mark-up, such as paragraphs, ul, li, etc */ :where(.uc_rich-text) { & > * + * { /* This method of getting vertical spacing may end up redundant if margin-trim lands: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim */ margin-block-start: var(--gap); } &:not([data-allow-long-lines]) > * { max-inline-size: 72ch; /* Don't allow hard to read line-lengths unless there's a data attribute to say to allow it */ } /* Styling Headings This is where CSS's lack of "mixin" feature hurts. In a "rich text" area, it's unlikely that the CMS would allow the addition of classes to headings - and even if it did many people aren't going to do that. So, we must try to scope our heading styles onto "raw heading tags" when we're inside a Rich Text area. That's what I'm doing here - if a heading *does not have a utility class on it* then we apply these styles to it. In an ideal world we'd define our heading styles as re-usable chunks of CSS rulesets, and include them where we need them. Something like: @mixin h1 { // all the visual styles that make up a h1 } .anything { @output-mixin h1; // dumps all those styles into this selector ruleset } But no such pattern exists in CSS and the alternative - add the selectors you want to the same ruleset - is a method that disallows all sorts of organisational methodology in authoring. */ & h2:not([class*="uc_h"]) { /* A h2 that doesn't have any heading related utility class on it */ font-size: var(--font-size-heading); } & h3:not([class*="uc_h"]) { /* A h3 that doesn't have any heading related utility class on it */ font-size: var(--font-size-heading-small); } & h4:not([class*="uc_h"]) { /* A h4 that doesn't have any heading related utility class on it */ font-size: var(--font-size-promoted); } & a:not([class]) { /* Anchors that have a class likely have some unique styling */ text-decoration: underline; text-underline-offset: 0.15em; } & li + li { margin-block-start: 0.5em; } & ol { margin-left: 1.7em; & li::marker { font-family: monospace; font-size: 0.875em; } } & ul { margin-left: 1.2em; } & blockquote { padding: 1em; margin-bottom: 1em; & p:last-child { margin-bottom: 0; } } & iframe { display: block; } } /* Blocks of content that are loaded via things like an iframe don't have an intrinsic known aspect-ratio, and setting "width: 100%" does not change the height as needed, like it would with an image element. This is how we work around that. */ :where(.uc_embedContainer) { position: relative; width: 100%; overflow: hidden; @supports not (aspect-ratio: 1 / 1) { /* 4:3 ratio (olden standard ratio) */ height: 0; padding-bottom: 75%; max-width: 100%; } & iframe, & object, & embed, & > div { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; & * { box-sizing: content-box; } & img { width: auto; max-width: none; } } &.widescreen { /* 16:9 ratio (common TV/Video ratio) */ @supports (aspect-ratio: 1 / 1) { aspect-ratio: 16 / 9; } @supports not (aspect-ratio: 1 / 1) { padding-bottom: 56.25%; } } &.cinema185 { /* 1.85:1 */ @supports (aspect-ratio: 1 / 1) { aspect-ratio: 1.85 / 1; } @supports not (aspect-ratio: 1 / 1) { padding-bottom: 54.05405405%; } } &.cinema239 { /* 2.39:1 */ @supports (aspect-ratio: 1 / 1) { aspect-ratio: 2.39 / 1; } @supports not (aspect-ratio: 1 / 1) { padding-bottom: 43%; } } } } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } html.js-supportsIntersectionObserver { .introBlock { &[data-scroll-reveal="introRow"] { .sectionTitle { opacity: 0; } p { opacity: 0; } &.js-inViewport { .sectionTitle { opacity: 1; transition: all ease 0.3s; transition-delay: 0.3s; } p { opacity: 1; transition: all ease 0.3s; transition-delay: 0.6s; } } } } .blockquoteRow { [data-scroll-reveal="blockquoteRows"] { &.twoColumn { .image { opacity:0; position: relative; left: -50px; } .blockquote { opacity: 0; .quote, .author { opacity: 0; } } &:nth-of-type(2n) { .image { left: auto; right: -50px; } } &.js-inViewport { .blockquote { opacity: 1; transition: all ease 0.3s; .quote, .author { opacity: 1; transition: all ease 0.3s; transition-delay: 0.5s; } } .image { left: 0px; opacity: 1; transition: all ease 0.5s; transition-delay: 0.5s; } &:nth-of-type(2n) { .image { left: auto; right: 0px; } } } } } } .eventsRow { &[data-scroll-reveal="tourRow"] { .sectionTitle { opacity: 0; position: relative; top: -30px; } .tourList { opacity: 0; } .buttons { opacity: 0; position: relative; top: 30px; } &.js-inViewport { .sectionTitle { opacity: 1; top: 0; transition: all ease 0.3s; transition-delay: 0.2s; } .tourList { opacity: 1; transition: all ease 0.3s; transition-delay: 0.4s; } .buttons { opacity: 1; top: 0; transition: all ease 0.3s; transition-delay: 0.6s; } } } } .slideshowWrapper{ &[data-scroll-reveal] { opacity: 0; } &.js-inViewport { opacity: 1; transition: all ease 0.3s; transition-delay: 0.2s; } } .textBlockRow { &[data-scroll-reveal] { .innerContainer { opacity: 0; } &.js-inViewport { .innerContainer { opacity: 1; transition: all ease 0.3s; transition-delay: 0.2s; } } } } .columns { .column { &[data-scroll-reveal] { opacity: 0; &.js-inViewport { opacity: 1; transition: all ease 0.3s; transition-delay: 0.2s; &:nth-of-type(2n) { transition-delay: 0.4s; } &:nth-of-type(3n) { transition-delay: 0.6s; } &:nth-of-type(4n) { transition-delay: 0.8s; } &:nth-of-type(5n) { transition-delay: 1s; } &:nth-of-type(6n) { transition-delay: 1.2s; } } } } } .podcastGrid { .podcast { &[data-scroll-reveal] { opacity: 0; &.js-inViewport { opacity: 1; transition: all ease 0.3s; transition-delay: 0.2s; &:nth-of-type(2n) { transition-delay: 0.4s; } &:nth-of-type(3n) { transition-delay: 0.6s; } &:nth-of-type(4n) { transition-delay: 0.8s; } &:nth-of-type(5n) { transition-delay: 1s; } &:nth-of-type(6n) { transition-delay: 1.2s; } } } } } .imageGrid { a { &[data-scroll-reveal] { opacity: 0; &.js-inViewport { opacity: 1; transition: all ease 0.3s; transition-delay: 0.2s; &:nth-of-type(2n) { transition-delay: 0.4s; } &:nth-of-type(3n) { transition-delay: 0.6s; } &:nth-of-type(4n) { transition-delay: 0.8s; } &:nth-of-type(5n) { transition-delay: 1s; } &:nth-of-type(6n) { transition-delay: 1.2s; } &:nth-of-type(7n) { transition-delay: 1.4s; } &:nth-of-type(8n) { transition-delay: 1.6s; } &:nth-of-type(9n) { transition-delay: 1.8s; } &:nth-of-type(10n) { transition-delay: 2s; } &:nth-of-type(11n) { transition-delay: 2.2s; } &:nth-of-type(12n) { transition-delay: 2.4s; } } } } } .newsItem, .textImageBlock { &[data-scroll-reveal="newsItems"] { & .twoColumn { .image, .video { opacity:0; position: relative; left: -50px; } .textBlock { position: relative; opacity: 0; right: -50px; .cms-textblock { opacity: 0; } } } &:nth-of-type(2n) { & .twoColumn { .image, .video { left: auto; right: -50px; } .textBlock { right: auto; left: -50px; } } } &.js-inViewport { & .twoColumn { .textBlock { right: 0px; opacity: 1; transition: all ease 0.3s; .cms-textblock { opacity: 1; transition: all ease 0.3s; transition-delay: 0.5s; } } .image, .video { left: 0px; opacity: 1; transition: all ease 0.5s; transition-delay: 0.5s; } } &:nth-of-type(2n) { & .twoColumn { .image, .video { left: auto; right: 0px; } .textBlock { left: 0px; } } } } } } } .newsletterPopup { position: fixed; top: 40%; left: 50%; transform: translate(-50%,-50%); width: 90%; max-width: 480px; padding: 15px; @media screen and (min-width: 720px) { padding: 30px; } color: white; background: hsl( var(--brand-purple) ); z-index: 11; pointer-events: none; opacity: 0; transition: all ease 0.3s; text-align: center; transition-delay: 5s; max-height: 70%; overflow-y:scroll; &:not(.show) { transition-delay: 0s; } .sib-form { } outline-offset: -10px; outline: 2px solid hsl( var(--brand-Gold) ); p { margin-bottom: 14px; } .field { margin-bottom: 14px; label { display: block; position: relative; span.label { position: absolute; top: 50%; left: 0%; width: 100%; transform: translateY(-50%); display: block; font-size: 14px; transition: all ease 0.3s; } input { position: relative; padding: 24px 20px 16px 20px; background: transparent !important; border: 2px solid hsl( var(--brand-Gold) ); outline: 0; display: block; width: 100%; text-align: center; color: hsl( var(--brand-Gold) ); &::placeholder { transition: all ease 0.3s; font-size: 13px; color: white; } } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out"; -webkit-transition-delay: 9999s; } input[data-autocompleted] { background-color: transparent !important; } } &:has(input:focus) span.label { top: 16px; } &:has(input:not(:placeholder-shown)) span.label { top: 16px; } } h3 { color: hsl(var(--brand-Gold)); text-transform: uppercase; font-family: var(--font-family-headings); font-size: 36px; letter-spacing: 2px; font-weight: 700; } #declineBtn { font-size: 14px; background: transparent; text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; } .actions { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 20px input { cursor: pointer; } } &.show, &.open { display: block; top: 50%; opacity: 1; pointer-events: auto; } } .productRow { h1 { font-family: var(--font-family-headings); font-size: 40px; line-height: 40px; letter-spacing: 2px; @media screen and (min-width: 960px) { font-size: 50px; line-height: 46px; } } .pageIntro { font-size: 20px; margin-bottom: 20px; @media screen and (min-width: 960px) { font-size: 24px; } } .cms-textblock { margin-bottom: 20px; } .price { font-size: 24px; color: hsl(var(--brand-Gold)); font-weight: bold; span { font-weight: normal; font-size: 14px; color: #d4a6bd; display: block; } } } .paymentForm { display: flex; align-items: center; justify-content: space-between; form { display: flex; align-items: center; justify-content: space-between; gap: 20px; .form-group { display: flex; gap: 10px; align-items: center; } select { display: inline-flex; align-items: center; gap: calc(var(--gap) / 2); color: hsl(var(--brand-Gold)); transition: background-color, var(--fast); border: solid 2px hsl(var(--brand-Gold)); padding: 10px 15px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; background: transparent; } } } .enupal-stripe-form { display: flex; align-items: center; justify-content: space-between; gap: 20px; select { padding: 6px 10px; border-radius: 5px; color: hsl( var(--brand-purple) ); } } .productsRow { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; @media screen and (min-width: 720px) { grid-template-columns: 1fr 1fr 1fr; } & > div { display: flex; flex-direction: column; } a.product { height: 100%; margin-bottom: 14px; .image { display: block; margin-bottom: 14px; } h2 { color: hsl(var(--brand-Gold)); font-family: var(--font-family-headings); font-size: 30px; line-height: 40px; } .price { font-size: 24px; color: hsl(var(--brand-Gold)); font-weight: bold; span { font-weight: normal; font-size: 14px; color: #d4a6bd; } } .cms-textblock { margin-bottom: 14px; font-size: 20px; } } } .noBanner { padding-top:var(--frame-size); } .paddingBottom { padding-bottom:var(--frame-size); } [data-entry-type="newsletterPage"] { .sib_signup_form { .field { display: block; margin-bottom: 20px; span.label { margin-bottom: 10px; display: block; } input { position: relative; padding: 16px 20px 16px 20px; background: transparent !important; border: 2px solid hsl( var(--brand-Gold) ); outline: 0; display: block; width: 100%; text-align: left; color: hsl( var(--brand-Gold) ); &::placeholder { transition: all ease 0.3s; font-size: 13px; color: white; } } } .actions { margin-top: 20px; } } } .sib-form { padding: 0px !important; background: transparent !important; } #sib-container { background: transparent !important; border: 0px !important; color: white !important; p { color: white !important; } label { color: white !important; } } .sib-form-block__button { background: hsl( var(--brand-Gold) ) !important; }