/* ===================== COLOR KEY AND OTHER VARIABLES ===================== */ /* variables */ :root { --purdeeskyblue: #77DEEF; --purdeedarkpurple: #19005F; --forestgreen: #228B22; --ivory: #FFFFF0; --mintgreen: #AAF0D1; --footer-gradient-height: 550px; --bordergrey: #9B9B9B; } /* ===================== FONTS ===================== */ @font-face { font-family: 'Gabriela'; src: url('../fonts/gabriela-regular-webfont.woff2') format('woff2'), url('../fonts/gabriela-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Comic Neue Regular'; src: url('../fonts/comicneue-regular-webfont.woff2') format('woff2'), url('../fonts/comicneue-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Comic Neue Bold'; src: url('../fonts/comicneue-bold-webfont.woff2') format('woff2'), url('../fonts/comicneue-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Solitreo'; src: url('../fonts/solitreo-latin-regular.woff2') format('woff2'), url('../fonts/solitreo-latin-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* ===================== BASE STYLES ===================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; /* set root font-size (rem) */ overflow-x: clip; /* prevents ALL horizontal scrolling, which might be unintentionally created by other CSS design techniques */ } body { /* set page min height to fit screen height */ min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; /* prevents ALL horizontal scrolling, which might be unintentionally created by other CSS design techniques */ margin: 0; font-family: 'Comic Neue Regular', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; color: var(--purdeedarkpurple); background-color: var(--purdeeskyblue); /* ultimate fallback */ background-image: linear-gradient(to top, #4682B4 0%, #73DCF500 100%), /*rgba(115, 220, 245, 0) 100% ), */ /* footer gradient */ url('../images/assets/sky-bg-tile.png'); /* sky and clouds */ /* footer gradient layer fills whole page but starts solid colour and finishes fully transparent so it smoothly blends into bg image tile layer below it */ /* apply attributes to each background-image in order, respectively */ background-repeat: no-repeat, repeat; background-position: bottom, top; background-size: 100% var(--footer-gradient-height), auto; font-size: 1.125em; /* 18px - is parent basis for many 'em' font-sizes below */ } .wrapper { width: 100%; max-width: 1440px; margin: 0 auto; } a { text-decoration: none; } ul { list-style: none; } main { flex: 1; /* expands to fit spare space in flex container so it at least fills screen height */ } main a { text-decoration: underline; color: var(--purdeedarkpurple); } main a:hover, main a:focus { color: darkmagenta; } h1, h2, h3 { font-family: 'Gabriela', Georgia, Times New Roman, serif; text-align: center; text-transform: uppercase; } /* ===================== HEADER ===================== */ #site-header { display: grid; grid-template-columns: 1fr 1024px 1fr; /* display: flex; */ font-family: 'Gabriela', Georgia, Times New Roman, serif; font-size: 1.5em; text-transform: uppercase; position: sticky; /* header stays visible at top when scrolling down */ top: 0; z-index: 999; /* not overlapped by elements below when scrolling */ background-color: var(--purdeeskyblue); /* ultimate fallback */ background-image: url('../images/assets/sky-bg-tile.png'); /* sky and clouds */ /* apply attributes to each background-image in order, respectively */ background-repeat: repeat; background-position: top; background-size: auto; } /* add shadow under sticky header when user scrolls */ header.active { box-shadow: rgba(0, 0, 0, 0.25) 0 0.5rem 1rem; transition-duration: 400ms; } .spacer { height: 150px; border-bottom: 2px solid var(--purdeedarkpurple); } .logo-silhouette { width: 75px; } .logo-silhouette img { width: 100%; height: auto; } .header-inner { grid-column: 2 / 3; /* margin: 0 auto; */ /* padding: 0 0; */ /* flex: 0 1 1024px; old flex code - redundant? display: flex; align-items: flex-end; justify-content: flex-start; */ display: grid; grid-template-columns: 30px 215px 1fr; } .site-logo { display: flex; align-items: flex-end; position: relative; padding-top: 10px; } .site-logo img { display: block; width: 100%; height: auto; } .nav-container { height: 150px; display: flex; align-items: flex-end; justify-content: flex-start; border-bottom: 2px solid var(--purdeedarkpurple); } .primary-nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 3rem; } .primary-nav a, .mobile-menu a { color: var(--purdeedarkpurple); padding: 0 5px; } .primary-nav li:hover, .primary-nav li:focus-within, .primary-nav li.active { background-color: var(--purdeedarkpurple); border-radius: 8px 8px 0 0; } .primary-nav li:hover > a, .primary-nav li:focus-within > a, .primary-nav li.active > a, .mobile-menu li:hover > a, .mobile-menu li:focus-within > a, .mobile-menu li.active > a{ color: var(--ivory); } .mobile-menu li:hover, .mobile-menu li:focus-within, .mobile-menu li.active { background-color: var(--purdeedarkpurple); border-radius: 8px; } /* MOBILE MENU */ #mobile-menu-container { display: none; /* hide mobile menu by default */ } /* .menu-backdrop { height: 114px; position: absolute; inset: 0; background: transparent; } */ /* menu button */ .menu-toggle { background: none; border: 0; padding: 5px 5px 0.5rem 0.5rem; cursor: pointer; position: absolute; right: 0px; top: 0px; display: flex; flex-direction: column; justify-content: flex-start; } .menu-toggle img { display: block; width: 38px; height: auto; } .menu-toggle span { font-family: 'Comic Neue Regular', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 0.8125rem; text-transform: uppercase; padding-top: 2px; color: var(--purdeedarkpurple); } .mobile-menu { position: absolute; top: 114px; left: 0; right: 0; bottom: 0; z-index: 100; min-height: 100vh; border-bottom: solid 3px var(--forestgreen); /* transition effect - starting position - menu will slide in from top of screen. Set the negative Y position and transition times to preference - in this case it factors in that .mobile-menu is positioned 114px down from top. */ transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 300ms ease-out; background-color: var(--purdeeskyblue); /* ultimate fallback */ background-image: url('../images/assets/giffy-tree.png'), linear-gradient(to top, #4682B4 0%, #73DCF500 100%), /* footer gradient */ url('../images/assets/sky-bg-tile.png'); /* sky and clouds */ /* footer gradient layer fills whole page but starts solid colour and finishes fully transparent so it smoothly blends into bg image tile layer below it */ /* apply attributes to each background-image in order, respectively */ background-repeat: no-repeat, no-repeat, repeat; background-position: center bottom, bottom, top; background-size: cover, 100% 100%, auto; } /* menu open state - slides in from top (displays) */ .menu-toggle[aria-expanded="true"] + .mobile-menu { transform: translateY(0); opacity: 1; pointer-events: auto; } /* menu closing state (slides back to 'off' hidden position) */ .mobile-menu.is-closing { transform: translateY(-8px); opacity: 0; pointer-events: none; } /* animation on toggle button */ .menu-toggle img { transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 30ms; } /* rotate when toggling between open/close icons */ .menu-toggle[aria-expanded="true"] img { transform: rotate(90deg); } .mobile-menu ul { list-style: none; padding: 0; margin: 120px 0 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 1.5rem; font-size: 1.67rem; /* relative to .site-header */ } .mobile-menu li { background-color: #FFFFFF25; border-radius: 8px; } /* ===================== HOME PAGE ===================== */ /* HERO SLIDER */ .viewport { overflow-x: hidden; /* will clip content so images exceeding its width are horizontally cut on mobile screen edges */ } .hero { position: relative; /* background: linear-gradient(to top, var(--forestgreen) 0%, var(--forestgreen) 50%, transparent 50%, transparent 100%); */ padding: 0 0 3rem; overflow: hidden; } /* curved green bg top */ .hero::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: 0; height: 50%; background: var(--forestgreen); border-radius: 30% 30% 0 0; z-index: 0; } /* curved bg bottom (ivory bg eats into green above it) */ .hero::after { content: ''; position: absolute; left: -3%; right: -3%; bottom: -8%; height: 15%; background: var(--ivory); border-radius: 90% 90% 0 0; z-index: 0; } .hero-frame { position: relative; width: 100%; max-width: 1464px; aspect-ratio: 1464 / 590; /* keep height-width ratio as it downsizes */ margin: 0 auto; overflow: visible; } .hero-frame::before { content: ''; position: absolute; inset: 0; z-index: 1; background: url('../images/assets/trees-frame.png') no-repeat center / contain; pointer-events: none; } .hero-slides { position: absolute; bottom: 20px; left: 50%; /* center it within hero-frame */ transform: translateX(-50%); width: 70%; /* relative to hero-frame */ height: 85%; /* relative to hero-frame */ max-width: 1024px; /* margin: 0 auto; */ z-index: 0; border: solid 2px var(--purdeedarkpurple); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25); } .hero-slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1.5s ease-in-out; } .hero-slide.is-active { opacity: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } /* INTRO */ .intro { background-color: var(--ivory); padding-bottom: 10px; } .intro .wrapper { display: grid; grid-template-columns: 1fr 2fr 4fr 1fr; } .intro-illustrations img { width: 100%; height: auto; filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.25)); } .intro-illustrations { display: flex; align-items: center; justify-content: space-around; } .intro-illustrations.flowers { align-items: flex-end; } .intro-text { text-align: center; margin: auto 0; } /* CHARACTER CAROUSEL */ .characters { position: relative; overflow: hidden; background-color: var(--ivory); } /* curved green bg top */ .characters::before { content: ''; position: absolute; left: -33%; right: -33%; bottom: 0; height: 92%; background: var(--forestgreen); border-radius: 50% 50% 0 0; z-index: 0; } /* curved bg bottom (sky bg eats into green above it) */ .characters::after { content: ''; position: absolute; left: -3%; right: -3%; bottom: -8%; height: 15%; background-color: var(--purdeeskyblue); /* ultimate fallback */ background-image: url('../images/assets/sky-bg-tile.png'); /* sky and clouds */ /* apply attributes to each background-image in order, respectively */ background-repeat: repeat; background-position: top; background-size: auto; border-radius: 90% 90% 0 0; z-index: 0; } main h1 { padding: 3rem 0; margin: 0; background: url('../images/assets/cloud-1.png') no-repeat center / contain; display: block; position: relative; z-index: 2; /* display over background */ } .characters-carousel { max-width: 1024px; margin: 0 auto; padding: 0 5px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative; z-index: 1; } .character-column { height: 400px; } .character-column img { width: 100%; height: auto; display: block; } .character-content { display: grid; grid-template-rows: 1fr auto; opacity: 1; filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); color: var(--ivory); text-shadow: 1px 0 var(--purdeedarkpurple), -1px 0 var(--purdeedarkpurple), 0 1px var(--purdeedarkpurple), 0 -1px var(--purdeedarkpurple), 1px 1px var(--purdeedarkpurple), -1px -1px var(--purdeedarkpurple), 1px -1px var(--purdeedarkpurple), -1px 1px var(--purdeedarkpurple); /* hack for text outline that doesn't eat into letters like -webkit-text-stroke */ text-align: center; letter-spacing: 1px; margin: 0 auto; } /* transitions on character changes */ .character-content img { transition: opacity 0.8s ease; opacity: 1; } /* subtle smooth vertical movement on text transition */ .character-content h2, .character-content p { transform: translateY(0); transition: opacity 0.8s ease, transform 0.8s ease; opacity: 1; margin: 0; font-size: 1.17rem; } /* stagger elements on fade-in */ .character-content img { transition-delay: 0ms; } .character-content h2 { transition-delay: 80ms; } .character-content p { transition-delay: 160ms; font-size: 0.89em; } /* fade-out state */ .character-content.is-fading img, .character-content.is-fading h2, .character-content.is-fading p { opacity: 0; transition-delay: 0ms; /* all fade out together */ } /* subtle smooth vertical movement on text fade out */ .character-content.is-fading h2, .character-content.is-fading p { transform: translateY(4px); } /* HOME PAGE CONTENT LINKS */ .content-links { position: relative; z-index: 1; /* prevent footer-tree obscuring */ padding: 1em 0 3em; } .content-links .wrapper { display: grid; grid-template-columns: 20% 1fr 1fr; grid-template-rows: auto auto; grid-column-gap: 10px; } .pointing-tree { pointer-events: none; } .pointing-tree img { filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.25)); width: 100%; max-width: 330px; } .content-link a { display: inline-block; } .content-link.films { display: flex; align-items: center; } .content-link.artists { display: flex; align-items: flex-end; } .content-link.films img { width: 100%; max-width: 500px; height: auto; } .content-link.artists img { width: 100%; max-width: 500px; height: auto; } .content-link.multimedia { grid-column: 1 / 3; /* span columns 1 - 2 */ grid-row: 2 / 3; /* on second row */ display: flex; justify-content: center; align-items: center; } .content-link.multimedia img { width: 100%; max-width: 660px; height: auto; } /* ===================== FILMS PAGE ===================== */ .heading-container { display: flex; justify-content: flex-start; } .film-1 { padding-top: 2rem; } .blurb-container { display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; flex-wrap: wrap; } .film-poster { display: flex; justify-content: flex-end; flex: 1 1 300px; max-width: 450px; } .film-poster img { width: 100%; } /* scroll bg and text should scale together fluidly */ .scroll { background: center / contain no-repeat url('../images/assets/parchment@720px.png'); width: 100%; max-width: 660px; aspect-ratio: 660 / 350; padding: 4% 5% 4% 7%; display: flex; align-items: center; justify-content: center; flex: 2 1 400px; /* it uses roughly twice the space of .film-poster, which has flex-grow: 1; retains proportional size of each as screen reduces */ } .scroll-inner { text-align: center; line-height: 1.15; /* padding-left: 20px; */ font-size: 1.1em; /* 20px */ } .scroll h3, .scroll h2 { font-family: 'Comic Neue Bold', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 15px 0 0.5em; font-size: 1.1em; /* 22px - relative to .scroll-inner */ } .scroll p { margin-top: 0; } .film-embed { position: relative; padding: 0 0 3rem; overflow: hidden; z-index: 1; } /* curved green bg top */ .film-embed::before { content: ''; position: absolute; left: -20%; right: -20%; bottom: 0; height: 70%; background: var(--forestgreen); border-radius: 35% 35% 0 0; z-index: -1; } /* curved bg bottom (ivory bg eats into green above it) */ .film-embed::after { content: ''; position: absolute; left: -3%; right: -3%; bottom: -8%; height: 14%; background: var(--ivory); border-radius: 90% 90% 0 0; z-index: -1; } .film-frame { position: relative; width: 100%; max-width: 1440px; aspect-ratio: 1440 / 680; /* keep height-width ratio as it downsizes */ } .film-frame::before { content: ''; position: absolute; inset: 0; background: url('../images/assets/film-frame.png') no-repeat center / contain; pointer-events: none; } .film-frame img { width: 100%; height: 100%; max-width: 960px; max-height: 530px; display: block; } .film-frame .placeholder { filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); position: absolute; bottom: 20px; left: 50%; /* center it within film-frame */ transform: translateX(-50%); width: 68%; /* relative to film-frame */ max-width: 980px; aspect-ratio: 980 / 550; /* keep height-width ratio as it downsizes */ background: url('../images/media/adventures-baby-bees-boot-embed-placeholder@2x.jpg') no-repeat center / cover; display: flex; align-items: flex-end; justify-content: flex-end; border: solid black 10px; border-radius: 10px; } .film-frame iframe, .yt-embed .film-frame .video-preview { border: 10px solid black; border-radius: 10px; filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); position: absolute; bottom: 20px; left: 50%; /* center it within film-frame */ transform: translateX(-50%); width: 68%; /* relative to film-frame */ max-width: 980px; aspect-ratio: 16 / 9; /* keep height-width ratio as it downsizes */ display: block; } .yt-embed .film-frame .video-preview { position: relative; bottom: 0; } /* YouTube-style video play button on preview img */ .yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; background: #ff0000; color: white; border: none; border-radius: 14px; padding: 12px 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } /* white triangle */ .yt-play::before { content: ""; width: 0; height: 0; border-left: 16px solid white; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; } /* hover effect */ .yt-play:hover, .yt-play:focus { background: #cc0000; } .yt-consent-message { display: none; } .yt-embed.request-consent .yt-consent-message { display: block; position: absolute; left: 50%; transform: translate(-50%, -10%); bottom: 10%; width: 100%; /* match width of video preview it overlays */ background-color: rgba(0,0,0,0.7); padding: 0 20px; } .yt-consent-message p { color: var(--ivory); font-weight: bold; text-align: center; margin-bottom: 0.5em; } .cky-banner-element { display: block; margin: 0 auto; background: var(--mintgreen); color: var(--purdeedarkpurple); font-weight: bold; border-radius: 10px; padding: 2px 5px 1px 5px; border: solid 2px var(--forestgreen); margin-bottom: 1em; cursor: pointer; transition: background 0.2s ease; } .cky-banner-element:hover, .cky-banner-element:focus { background: #98FB98; } ul.credits { padding-left: 0; text-align: center; margin: 1rem auto; width: max-content; display: flex; flex-direction: column; align-items: center; max-width: 100%; } .credits li { filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); font-size: 1.11em; /* 20px */ display: flex; flex-wrap: wrap; justify-content: center; } .credits li span:not(.copy-container), .credits li span:not(.copy-symbol) { padding: 0 5px; } /* needed to align copyright symbol to text */ .copy-container { position: relative; } .credits .copy-symbol { font-size: 1.7em; position: absolute; bottom: 20px; left: -19px; height: 16px; } .laurels { padding-left: 0; display: flex; justify-content: center; gap: 2%; } .laurels li { flex: 0 1 300px; /* don't grow above 300px */ min-width: 150px; } .laurels li img { width: 100%; } .laurels li:first-child { margin-top: 15px; } .laurels li:last-child { margin-top: 20px; } .cinemas { position: relative; background-color: var(--ivory); } /* curved bg bottom (sky bg eats into colour above it) */ .cinemas::after { content: ''; position: absolute; left: -3%; right: -3%; bottom: -8%; height: 14%; background-color: var(--purdeeskyblue); /* ultimate fallback */ background-image: url('../images/assets/sky-bg-tile.png'); /* sky and clouds */ background-repeat: repeat; background-position: top; background-size: auto; border-radius: 90% 90% 0 0; z-index: 0; } .cinemas .wrapper { max-width: 1024px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5,1fr); } .cinemas .wrapper div { display: flex; align-items: center; } div.cinema-1 { grid-area: 1 / 1 / 2 / 2; justify-content: flex-end; } figure.cinema-1 { grid-area: 1 / 2 / 3 / 3; margin: 0 0 0 4%; } figure.cinema-1 img { transform: rotate(5deg); } div.cinema-2 { grid-area: 3 / 2 / 4 / 3; justify-content: flex-start; } figure.cinema-2 { grid-area: 2 / 1 / 4 / 2; margin: 0 4% 0 0; display: flex; align-items: center; } figure.cinema-2 img { transform: rotate(-5deg); } .cinemas .wrapper div.cinema-3 { grid-area: 4 / 1 / 5 / 2; justify-content: flex-end; align-items: flex-end; } figure.cinema-3 { grid-area: 4 / 2 / 6 / 3; margin: 0 0 0 4%; z-index: 1; /* overflow over sky bg curving in below it */ } figure.cinema-3 img { transform: rotate(5deg); } .cinemas .wrapper figure img { max-width: 100%; } .cinemas .wrapper p { width: 66%; min-width: 300px; font-size: 1.11em; /* 20px */ text-align: center; } .film-2 { position: relative; } .film-2 .blurb-container { flex-direction: row; margin-bottom: 2rem; z-index: 1; } .film-2 .blurb-container .film-poster { justify-content: flex-start; } .film-2 .film-embed::before { height: 50%; } .film-2 .film-embed::after { background-color: var(--purdeeskyblue); /* ultimate fallback */ background-image: url('../images/assets/sky-bg-tile.png'); /* sky and clouds */ background-repeat: repeat; background-position: top; background-size: auto; z-index: 0; } .film-2 .film-frame::before { background: url('../images/assets/film-frame-2.png') no-repeat center / contain; } .more-films { padding-top: 2rem; } .more-films .wrapper { position: relative; display: grid; grid-template-columns: 20% 1fr 30%; grid-template-rows: auto auto auto; grid-column-gap: 10px; padding-bottom: 2rem; } .more-films .pointing-tree { grid-area: 1 / 1 / 3 / 2; z-index: 2; } .more-films .heading-container { grid-area: 1 / 2 / 2 / 4; z-index: 1; margin-bottom: 1rem; } .scroll.film-3 { grid-area: 3 / 1 / 4 / 3; justify-self: center; max-width: 560px; padding: 4% 6% 4% 10%; } .film-poster.film-3 { grid-area: 2 / 2 / 3 / 3; justify-self: end; } /* ===================== MULTIMEDIA PAGE ===================== */ .video-game .film-poster { max-width: 620px; } .video-game .scroll { flex: 1 1 400px; max-width: 560px; /* padding: 4% 6% 4% 10%; */ } .video-game .film-embed::before { height: 50%; } .video-game .film-embed::after { background-color: var(--purdeeskyblue); /* ultimate fallback */ background-image: url('../images/assets/sky-bg-tile.png'); /* sky and clouds */ background-repeat: repeat; background-position: top; background-size: auto; z-index: -1; } .video-game .film-embed { padding-bottom: 4rem; } .music { position: relative; overflow-x: clip; /* prevents horizontal scroll off screen edge caused by child .music-player-bg settings used to create curve bg */ } .music-blurb.wrapper { max-width: 1024px; } .music .blurb-container { position: relative; aspect-ratio: 1024 / 575; align-items: flex-end; flex-direction: row; justify-content: flex-start; } .music-wave { position: absolute; top: -70px; left: 50%; transform: translateX(-50%) rotate(8deg); width: 120%; max-width: 100vw; pointer-events: none; display: block; z-index: 2; /* overlap preceding section and music-blurb scroll */ } .music-blurb .scroll { position: relative; z-index: 1; flex: 3 1 0; /* allowed 3 times more space than .baby-bee (=75%) */ min-width: 0; /* override default flex setting of 'auto' */ } .baby-bee { flex: 1 1 0; /* allowed 25% of the space next to .scroll */ z-index: 3; min-width: 0; /* override default flex setting of 'auto' */ } .baby-bee img { width: 100%; max-width: 220px; filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); } .music-player-bg { padding: 2rem 0 6rem; } /* curved ivory bg top */ .music-player-bg::before { content: ''; position: absolute; left: -20%; right: -20%; bottom: 0; height: 55%; background: var(--ivory); border-radius: 35% 35% 0 0; z-index: -1; } .music-player-bg::after { content: ''; position: absolute; left: -5%; right: -5%; bottom: -8%; height: 14%; background-color: var(--purdeeskyblue); /* ultimate fallback */ background-image: url('../images/assets/sky-bg-tile.png'); /* sky and clouds */ background-repeat: repeat; background-position: top; background-size: auto; border-radius: 90% 90% 0 0; z-index: -1; } .music-player-bg .wrapper { display: flex; justify-content: space-around; align-items: center; } /* music player */ .music-player { flex: 2 1 0; max-width: 600px; border: solid 1px var(--bordergrey); border-radius: 50px 10px; background-color: var(--mintgreen); filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); margin-left: 5px; } .music-player h3 { font-family: 'Comic Neue Bold', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin-top: 5px; line-height: 1.15; font-size: 1em; } .playlist-container { display: flex; } .album-cover { flex: 0 1 200px; aspect-ratio: 600 / 600; padding: 5px 10px; min-width: 150px; max-width: 300px; } .album-cover img { width: 100%; border: solid 1px var(--bordergrey); border-radius: 10px; } .plyr { border-radius: 0 0 50px 10px; } /* round off button corners to fit curved shape of player */ .music-player button.plyr__control { border-radius: 8px; } /* button colours */ .music-player button.plyr__control:hover, .music-player button.plyr__control:focus { background-color: var(--purdeeskyblue); } .music-player .plyr--full-ui input[type="range"] { color: var(--purdeeskyblue); } .playlist { /* grid-area: 1 / 2 / 2 / 3; */ padding: 0 2px 0 0; margin: 0; flex: 2 0 300px; } .playlist li { display: flex; justify-content: flex-start; align-items: center; cursor: pointer; padding: 0.5rem 3px; /* transition: opacity 0.2s ease, transform 0.15s ease; */ gap: 3px; width: 100%; font-size: 0.89em; /* 16px */ border-bottom: solid 1px #9B9B9B75; } .playlist li:last-child { border-bottom: none; } .track-length { margin-left: auto; font-size: 0.875em; align-self: flex-end; } .track-number { align-self: flex-start; } .playlist li.active { font-weight: 600; opacity: 1; background-color: #95E0E8; } .playlist li:not(.active) { opacity: 0.7; } .playlist li:hover { opacity: 1; background-color: #95E0E8; } .eq { display: flex; gap: 3px; height: 15px; padding-bottom: 3px; align-items: flex-end; visibility: hidden; } .playlist li.active.playing .eq { visibility: visible; } .eq span { width: 3px; height: 4px; background: currentColor; border-radius: 2px; animation: pulse 1.2s infinite ease-in-out; } .eq span:nth-child(2) { animation-delay: 0.15s; } .eq span:nth-child(3) { animation-delay: 0.3s; } @keyframes pulse { 0%, 100% { height: 4px; } 40% { height: 10px; } 70% { height: 6px; } } /* books */ .books.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; grid-column-gap: 10px; grid-row-gap: 20px; padding-bottom: 2rem; } .books .heading-container { grid-area: 1 / 1 / 2 / 2; justify-self: flex-end; } .books a, .scripts a { display: block; } .book-1 { grid-area: 1 / 2 / 2 / 4; justify-self: center; } .book-2 { grid-area: 2 / 1 / 3 / 3; justify-self: center; } .book-1 img { width: 100%; max-width: 425px; } .book-2 img { width: 100%; max-width: 450px; } /* ===================== ARTISTS ===================== */ .artist-1 .scroll { min-width: 0; /* override default flex setting of 'auto' */ flex: 3 1 0; /* allowed 3 times the space on row as .profile-photo-1 */ } .artist-2 .scroll { min-width: 0; /* override default flex setting of 'auto' */ flex: 2 1 0; /* allowed 2 times the space on row as .profile-photo-1 */ } figure.profile-photo-1 { display: flex; justify-content: flex-end; flex: 1 1 0; margin: 0; min-width: 0; /* override default flex setting of 'auto'; allows flex item to shrink */ } .profile-photo-1 img { width: 100%; } .artist-1 .profile-photo-1 { max-width: 230px; } .artist-2 .profile-photo-1 { max-width: 320px; } .artist-blurb-bg { position: relative; background: var(--ivory); padding-bottom: 2rem; } .artist-2 .artist-blurb-bg { padding: 1rem 0 4rem; } /* curved ivory bg top */ .artist-blurb-bg::before, .mailing-list .signup-form-bg::before { content: ''; position: absolute; left: -1%; right: -1%; top: -10%; height: 12%; background: var(--ivory); border-radius: 50% 50% 0 0; z-index: -1; pointer-events: none; } .artist-blurb-bg::after, .mailing-list .signup-form-bg::after { content: ''; position: absolute; left: -1%; right: -1%; bottom: -5%; height: 10%; border-radius: 50% 50% 0 0; background-color: var(--forestgreen); pointer-events: none; } .artist-2 .artist-blurb-bg::after, .mailing-list .signup-form-bg::after { background-color: var(--purdeeskyblue); /* ultimate fallback */ background-image: url('../images/assets/sky-bg-tile.png'); /* sky and clouds */ background-repeat: repeat; background-position: top; background-size: auto; } .artist-blurb-bg .wrapper, .rk-illustrations .wrapper { max-width: 1024px; padding: 0 10px; } figure.profile-photo-2 { width: 50%; max-width: 500px; float: right; transform: rotate(5deg); margin: 0 10px; pointer-events: none; position: relative; z-index: 1; /* display over curved background */ } .profile-photo-2 img { width: 100%; } .rk-illustrations { background-color: var(--forestgreen); /* ultimate fallback */ background-image: url('../images/assets/characters-bg-green.jpg'); background-size: contain; background-repeat: repeat; background-position: center; padding-bottom: 6rem; position: relative; /* z-index: -2; */ } .rk-illustrations::after { content: ''; position: absolute; left: -8%; right: -8%; bottom: -8%; height: 14%; border-radius: 50% 50% 0 0; background-color: var(--purdeeskyblue); /* ultimate fallback */ background-image: url('../images/assets/sky-bg-tile.png'); /* sky and clouds */ background-repeat: repeat; background-position: top; background-size: auto; /* z-index: -1; */ pointer-events: none; } .rk-illustrations .wrapper { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr 2fr; } .illustration-1 { grid-area: 1 / 1 / 2 / 2; display: flex; align-items: flex-start; justify-content: center; } .illustration-2 { grid-area: 1 / 2 / 3 / 3; display: flex; align-items: center; justify-content: center; } .illustration-3 { grid-area: 2 / 1 / 4 / 2; display: flex; align-items: center; justify-content: center; } .illustration-4 { grid-area: 3 / 2 / 4 / 3; display: flex; align-items: flex-end; justify-content: center; } .illustration-1 img, .illustration-4 img{ width: 100%; max-width: 400px; } .illustration-2 img, .illustration-3 img { width: 100%; max-width: 300px; } .illustration-1 img, .illustration-3 img { transform: rotate(-2deg); filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); border: solid 1px var(--bordergrey); } .illustration-2 img, .illustration-4 img { transform: rotate(2deg); filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); border: solid 1px var(--bordergrey); } .artist-2 .blurb-container { position: relative; z-index: 1; /* display over curved bg top */ } .lg-art.wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: auto auto; } .lg-art figure { max-width: 325px; justify-self: center; } .lg-art figure.art-4 { grid-area: 2 / 1 / 3 / 3; /* second row */ width: 34%; justify-self: end; } .lg-art figure:nth-child(odd) { transform: rotate(2deg); } .lg-art figure:nth-child(even) { transform: rotate(-2deg); } .lg-art img { width: 100%; /* max-width: 325px; */ filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); } /* ===================== MAILING LIST ===================== */ .mailing-list .scroll { min-width: 0; /* override default flex setting of 'auto */ flex: 1.5 1 0; } .mailing-list-graphic { display: flex; justify-content: flex-end; flex: 1 1 0; max-width: 450px; min-width: 0; /* override default flex setting of 'auto'; allows flex item to shrink */ } .mailing-list-graphic img { width: 100%; } .signup-form-bg { position: relative; background-color: var(--ivory); padding-bottom: 4rem; } .signup-form-bg .wrapper { max-width: 1024px; display: flex; justify-content: center; } .sender-form-field { filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); } .signup-form-bg .sender-form-compliance-text { margin-bottom: 20px; } .subscribe-offer.wrapper { display: grid; grid-template-columns: 1fr 30%; grid-template-rows: auto; padding: 2rem 0; } .subscribe-offer img { grid-column: 1 / 2; justify-self: end; width: 98%; max-width: 480px; margin: 0 auto; } .subscribers .scroll { min-width: 0; flex: 2 1 0; } .abacus { flex: 1 1 0; filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); min-width: 0; max-width: 300px; display: flex; justify-content: flex-end; } .abacus img { width: 100%; } .scripts.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; grid-column-gap: 10px; grid-row-gap: 20px; padding-bottom: 2rem; } .scripts .heading-container { grid-area: 1 / 1 / 2 / 2; justify-self: flex-end; } .script-1 { grid-area: 1 / 2 / 2 / 4; justify-self: center; } .script-2 { grid-area: 2 / 1 / 3 / 3; justify-self: center; } .script-1 img { width: 100%; max-width: 425px; } .script-2 img { width: 100%; max-width: 450px; } /* ===================== WOODEN SIGNS ===================== */ /* sign commonalities */ /* rectangular sign */ .wooden-sign { background: url('../images/assets/wooden-sign.svg') no-repeat center / contain; filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); text-align: center; display: flex; align-items: center; justify-content: center; } /* arrow sign */ .wooden-sign.arrow { background: url('../images/assets/wooden-sign-arrow.svg') no-repeat center / contain; transform: rotate(15deg); } .wooden-sign h2, .wooden-sign p { margin: 0; font-family: 'Solitreo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.15; color: white; font-size: 2em; text-transform: uppercase; font-weight: bold; } .wooden-sign .sign-inner { padding-top: 0.5em; /* help vertically center text in sign */ } /* specific signs */ .more-films .wooden-sign.arrow { width: 240px; aspect-ratio: 240 / 120; padding: 1rem 1rem 1rem 0; /* help vertically center text in sign */ } .more-films .wooden-sign.arrow .sign-inner { width: 60%; } .film-frame .placeholder .wooden-sign { width: 25%; max-width: 220px; min-width: 110px; aspect-ratio: 280 / 190; margin-bottom: 5px; } .film-frame .placeholder .wooden-sign .sign-inner { width: 86%; } .film-frame .placeholder .wooden-sign p { font-size: clamp(0.9rem, 2vw, 1.5em); /* scale font-size */ line-height: 1.1em; } .music-player-bg .wooden-sign { max-width: 280px; aspect-ratio: 280 / 190; margin: 3rem 5px; } .music-player-bg .wooden-sign .sign-inner { width: 80%; } .music-player-bg .wooden-sign p { font-size: clamp(0.9rem, 4vw, 2em); /* scale font-size */ } /* link on wooden sign */ a.album-link { flex: 1 1 0; max-width: max-content; } .scripts .wooden-sign.arrow { width: 280px; max-width: 280px; aspect-ratio: 280 / 190; } .books .wooden-sign.arrow { width: 200px; max-width: 200px; aspect-ratio: 280 / 190; } .books .wooden-sign .sign-inner, .scripts .wooden-sign.arrow .sign-inner { width: 80%; } /* ===================== BASIC PAGES ===================== */ .basic-page { margin-bottom: 250px; /* clear footer tree */ } .basic-page article { max-width: 1024px; margin: 0 auto; background-color: var(--ivory); padding: 10px; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25); } .basic-page article h2, .basic-page article h3 { text-transform: none; text-align: left; } .basic-page article li { list-style-type: circle; } /* ===================== FOOTER ===================== */ .site-footer { padding-top: 40px; font-size: 0.83em; position: relative; } .site-footer p, .site-footer li, .site-footer a, .credits li { color: var(--ivory); text-shadow: 1px 0 var(--purdeedarkpurple), -1px 0 var(--purdeedarkpurple), 0 1px var(--purdeedarkpurple), 0 -1px var(--purdeedarkpurple), 1px 1px var(--purdeedarkpurple), -1px -1px var(--purdeedarkpurple), 1px -1px var(--purdeedarkpurple), -1px 1px var(--purdeedarkpurple); /* hack for text outline that doesn't eat into letters like -webkit-text-stroke */ letter-spacing: 0.5px; } .site-footer .wrapper { position: relative; display: grid; grid-template-columns: 400px 1fr 440px; grid-template-rows: auto auto; z-index: 1; } .footer-mailing-list { grid-column: 1 / 2; /* span first column */ grid-row: 1 / 3; /* span both rows */ /* position: relative; */ padding-left: 20px; display: flex; align-items: flex-end; } .footer-mailing-list img { width: 100%; height: auto; /* position: absolute; bottom: 0; */ display: block; } .footer-branding { grid-column: 2 / 3; /* span middle column */ grid-row: 1 / 2; /* span first row */ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; } .footer-branding img { width: 200px; max-width: 100%; } .footer-contact { font-style: normal; } .footer-contact p { margin: 5px; } .footer-contact p.tel { margin: 0; } .footer-legal { grid-column: 2 / 3; /* column 2 */ grid-row: 2 / 3; /* second row */ display: flex; align-items: flex-end; padding-bottom: 2px; } .footer-legal ul { margin: 0; width: 100%; } .legal-links { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: 20px; padding-left: 0; } .copyright { grid-column: 3 / 4; /* last column */ grid-row: 2 / 3; /* second row */ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; padding-bottom: 2px; } .copyright p { margin: 0 5px 0 0; } .copy { position: relative; } /* needed to align copyright symbol to text */ .copy span { font-size: 1.6em; position: absolute; bottom: 12px; left: -14px; height: 14px; } /* tree needs to be outside the footer grid for .site-footer .viewport clipping to work when required */ .footer-tree { pointer-events: none; position: absolute; bottom: 0; right: 0; display: flex; align-items: flex-end; z-index: -1; /* decorative tree displays below other footer content if there is overlap */ grid-column: 3 / 4; /* span last column */ grid-row: 1 / 3; /* span both rows */ overflow: visible; } .footer-tree img { height: var(--footer-gradient-height); width: auto; } /* ===================== Accessibility ===================== */ /* for screen readers, include hidden text when using image-only links or nav elements */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* If user prefers 'reduce motion' in their device settings, override transition effects defined further above. */ @media (prefers-reduced-motion: reduce) { /* turn off transition on mobile menu open/close */ .mobile-menu { transition: none; } /* turn off fade transition in hero slider */ .hero-slide { transition: none; } }