/* Author: Fei Tang Date: Nov 28, 2023 Propose: Fei Tang - Project 2 - Oak Harbor Music Festival */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto+Condensed:wght@400;600&family=Slackey&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto+Condensed:wght@400;600;700&family=Slackey&display=swap'); /*************************************** * The new CSS reset start * ***************************************/ /*** The new CSS reset - version 1.8.5 (last updated 14.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the css of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list css (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /*************************************** * The new CSS reset end * ***************************************/ /* Root custom properties for theme colors and main container width */ :root { --main-container-width: 1440px; --theme-blue: #000338; --theme-red: #ED135A; } /* Styling for all buttons with a white border */ .white-border-btn { display: block; width: 215px; height: 54px; line-height: 54px; text-align: center; user-select: none; font-size: 20px; font-weight: bold; border: 1px solid white; border-radius: 54px ; color: white; } /* Adjusts the button style for devices with max-width of 1023px */ @media screen and (max-width: 1023px) { .white-border-btn { height: 32px; line-height: 32px; font-size: 14px; } } /* Basic HTML and body styling, setting font and background color */ html, html body { font-family: 'Roboto Condensed', sans-serif; background: var(--theme-blue); overflow-x: hidden; } /* Header styling */ .main-header { height: 149px; color: white; } /* Header container with flexbox layout */ .main-header .header-container { display: flex; align-items: center; max-width: var(--main-container-width); height: 100%; margin: 0 auto; } .main-header .logo { width: 125px; height: 98px; background-image: url( '../svgs/logo.svg'); background-size: 100% 100%; } /* Styling for desktop navigation in the header */ .main-header .pc-nav { display: flex; gap: 40px; margin-left: 229px; font-size: 24px; font-weight: bold; } /* Highlight style for desktop navigation items */ .main-header .pc-nav .highlight { color: var(--theme-red); } /* Get update button in the header */ .main-header .get-update-btn { margin-left: auto; width: 160px; } /* Hides mobile navigation elements by default */ .tablet-mobile-nav-btn, .tablet-mobile-nav, .mobile-brand-name { display: none; } /* Tablet and mobile navigation css */ @media screen and (max-width: 1439px) { #overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 5; } /* Hides the desktop navigation in the header for tablet and mobile screens */ .main-header .pc-nav { display: none; } /* Adjusts the header container layout for responsive design */ .header-container { justify-content: space-between; } /* Styling for the navigation close button on tablet and mobile devices */ .nav-close-btn { width: 20px; height: 20px; display: block; background-image: url( '../svgs/close_mobile.svg'); background-size: 100% 100%; margin: 54px 0 27px 9px; } /* Styles for the navigation in tablet and mobile devices */ .tablet-mobile-nav { position: fixed; left: 0; top: 0; z-index: 10; min-width: 375px; padding-left: 34px; background: white; color: black; font-size: 24px; font-weight: bold; } /* Display style for the tablet-mobile navigation when active */ .tablet-mobile-nav.showed { display: block; } /* Styles for links in the tablet-mobile navigation */ .tablet-mobile-nav a { display: block; padding: 10px 0; margin-bottom: 20px; } /* Highlight style for links in the navigation */ .tablet-mobile-nav a.highlight { color: var(--theme-red); } } /* Tablet-specific css */ @media screen and (min-width: 1024px) and (max-width: 1439px) { /* Tablet navigation button style */ .tablet-mobile-nav-btn { display: block; margin-left: 34px; width: 40px; height: 26px; background-image: url( '../svgs/nav_tablet.svg'); background-size: 100% 100%; } /* Tablet-specific logo css in the header */ .main-header .logo { margin-left: 40px; width: 100px; height: 78px; } /* Adjusts header height for tablet devices */ .main-header { height: 120px; } /* Styles for the 'Get Update' button in tablet view */ .main-header .get-update-btn { margin-right: 47px; margin-left: 0; } } /* Mobile-specific css */ @media screen and (max-width: 1023px) { /* Mobile navigation button style */ .tablet-mobile-nav-btn { display: block; margin-left: 20px; width: 24px; height: 16px; background-image: url( '../svgs/nav_mobile.svg'); background-size: 100% 100%; } /* Hides the logo in mobile view */ .main-header .logo { display: none; } /* Styles for brand name in mobile view */ .mobile-brand-name { display: block; font-size: 16px; font-weight: bold; margin-left: 40px; } /* Adjusts header height for mobile devices */ .main-header { height: 60px; } /* Adjusts the 'Get Update' button style for mobile devices */ .main-header .get-update-btn { width: 88px; margin-right: 30px; margin-left: 0; } } /* Video styling for the main section */ .main-video video { display: block; width: 100%; height: auto; object-fit: cover; } /* Main container styling for consistent width and center alignment */ .main-container { max-width: var(--main-container-width); margin: 0 auto; } /* Tablet-specific css for the main container */ @media screen and (min-width: 1024px) and (max-width: 1439px) { .main-container { padding-left: 68px; padding-right: 68px; } } /* Mobile-specific css for the main container */ @media screen and (max-width: 1023px) { .main-container { padding-left: 20px; padding-right: 20px; } } /* Styles for the festival description section */ .festival-desc { display: flex; gap: 121px; margin-top: 70px; color: white; } /* Styles for headings in the festival description */ .festival-desc h2 { max-width: 607px; font-size: 52px; font-weight: bold; } /* Styles for paragraph text in the festival description */ .festival-desc p { flex: 1; font-size: 20px; line-height: 30px; } /* Bold styling for specific parts in paragraphs */ .festival-desc p b { font-weight: bold; font-size: 22px; } /* Tablet and mobile specific css for the festival description */ @media screen and (max-width: 1439px) { .festival-desc { display: block; } } /* Tablet-specific adjustments for festival description */ @media screen and (min-width: 1024px) and (max-width: 1439px) { .festival-desc { margin-top: 60px; } .festival-desc p { margin-top: 40px; } } /* Mobile-specific adjustments for festival description */ @media screen and (max-width: 1023px) { .festival-desc { margin-top: 26px; } .festival-desc h2 { font-size: 32px; } .festival-desc p { margin-top: 19px; font-size: 14px; } .festival-desc p b { font-size: 16px; } } /* Styles for the schedule section */ .schedule { margin-top: 52px; } /* Styles for the tab links in the schedule section */ .schedule .schedule-tab-links { display: flex; gap: 90px; font-size: 30px; font-weight: bold; color: #7F819F; user-select: none; } /* Style for the selected tab link */ .schedule .schedule-tab-links .selected { text-decoration: underline; color: var(--theme-red); } /* Styles for the schedule contents */ .schedule .schedule-contents { color: white; } /* Initial hidden state for schedule content lists */ .schedule .schedule-contents > ul { display: none; margin-top: 46px; } /* Styles for schedule content links */ .schedule .schedule-contents a { display: block; text-align: center; width: 349px; height: 349px; } /* Display style for the active schedule content */ .schedule .schedule-contents > .showed { display: flex; gap: 14px; } /* Styles for links within the schedule contents, including layout and background */ .schedule .schedule-contents a { display: flex; flex-direction: column; justify-content: flex-end; border-radius: 20px; background-size: cover; } /* Styles for headings within schedule content links */ .schedule .schedule-contents a h5{ font-size: 20px; font-weight: bold; } /* Styles for span elements within schedule content links */ .schedule .schedule-contents a span { margin: 5px 0 24px; font-size: 16px; } /* Background images for different schedule items */ .schedule .schedule-contents a.friday_1 { background-image: url("../images/friday_1.png"); } .schedule .schedule-contents a.friday_2 { background-image: url("../images/friday_2.jpeg"); } .schedule .schedule-contents a.friday_3 { background-image: url("../images/friday_3.png"); } .schedule .schedule-contents a.friday_4 { background-image: url("../images/friday_4.png"); } .schedule .schedule-contents a.sat_1 { background-image: url("../images/sat_1.png"); } .schedule .schedule-contents a.sat_2 { background-image: url("../images/sat_2.png"); } .schedule .schedule-contents a.sat_3 { background-image: url("../images/sat_3.png"); } .schedule .schedule-contents a.sat_4 { background-image: url("../images/sat_4.png"); } .schedule .schedule-contents a.sunday_1 { background-image: url("../images/sunday_1.jpeg"); } .schedule .schedule-contents a.sunday_2 { background-image: url("../images/sunday_2.jpeg"); } .schedule .schedule-contents a.sunday_3 { background-image: url("../images/sunday_3.jpeg"); } .schedule .schedule-contents a.sunday_4 { background-image: url("../images/sunday_4.jpeg"); } /* Style for the schedule button */ .schedule .schedule-btn { margin: 53px auto 0; } /* Tablet and mobile specific css for the schedule section */ @media screen and (max-width: 1439px) { .schedule-contents { overflow-x: scroll; } } /* Tablet-specific css for the schedule section */ @media screen and (min-width: 1024px) and (max-width: 1439px) { .schedule { margin-top: 60px; } } /* Mobile-specific css for the schedule section */ @media screen and (max-width: 1023px) { .schedule { margin-top: 50px; } /* Adjusting font size and gap for schedule tab links on mobile */ .schedule .schedule-tab-links { font-size: 20px; gap: 60px; } /* Adjusting size of schedule content links on mobile */ .schedule .schedule-contents a { width: 286px; height: 286px; } /* Adjusting margin for the schedule button on mobile */ .schedule .schedule-btn { margin-top: 32px; } } /* Styles for the projects section */ .projects { display: flex; gap: 26px; margin-top: 90px; color: white; } /* Styles for list items in the projects section */ .projects li { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; height: 560px; padding: 56px 34px 28px; border: 1px solid white; border-radius: 20px; } /* Styles for headings in the projects section */ .projects li h4 { font-size: 52px; font-weight: bold; } /* Styles for article text in the projects section */ .projects li article { line-height: 30px; margin-top: 28px; font-size: 18px; } /* Styles for the footer in the projects section */ .projects footer { margin-top: auto; display: flex; gap: 70px; align-items: center; font-weight: bold; } /* Tablet and mobile specific css for the projects section */ @media screen and (max-width: 1439px) { .projects { display: block; } .projects li { height: 480px; } } /* Tablet-specific css for the projects section */ @media screen and (min-width: 1024px) and (max-width: 1439px) { .projects { display: block; } .projects li { margin-bottom: 65px; } } /* Mobile-specific css for the projects section */ @media screen and (max-width: 1023px) { .projects { margin-top: 65px; } .projects li { margin-bottom: 20px; } .projects li h4 { font-size: 30px; } .projects .project-btn { width: 100px; } .projects .project-detail { font-size: 14px; } } /* Styles for the sponsors section */ .sponsors { margin-top: 91px; } /* Header css within the sponsors section */ .sponsors header { display: flex; align-items: center; color: white; } /* Heading css within the sponsors header */ .sponsors header h4 { font-size: 52px; font-weight: bold; } /* Link css within the sponsors header */ .sponsors header a { font-size: 20px; margin-left: auto; font-weight: bold; } /* Styles for the list of sponsors */ .sponsors ul { display: flex; gap: 48px; margin-top: 46px; } /* Styles for links within the sponsors list */ .sponsors ul li a { display: block; width: 200px; height: 200px; } /* Styles for images within the sponsors list */ .sponsors ul li img { display: block; } /* Style for the sponsors button */ .sponsors .sponsors-btn { margin: 103px auto 0; } /* Tablet and mobile specific css for the sponsors section */ @media screen and (max-width: 1439px) { .sponsors ul { overflow-x: scroll; } } /* Tablet-specific css for the sponsors section */ @media screen and (min-width: 1024px) and (max-width: 1439px) { .sponsors { margin-top: 120px; } } /* Mobile-specific css for the sponsors section */ @media screen and (max-width: 1023px) { .sponsors { margin-top: 49px; } .sponsors header h4 { font-size: 30px; } .sponsors header a { font-size: 16px; } .sponsors ul { gap: 20px; margin-top: 32px; } .sponsors ul li a { width: 87px; height: 87px; } .sponsors .sponsors-btn { margin-top: 40px; width: 100px; } } /* Styles for the subscription section */ .subscription { margin-top: 129px; padding-top: 143px; margin-bottom: 59px; height: 677px; background-image: url("../images/get_updates.jpg"); background-repeat: no-repeat; background-size: auto 565px; background-position: top center; } .subscription > form { height: 534px; padding-top: 56px; background: white; border-radius: 20px; text-align: center; } .subscription h3 { font-size: 52px; margin-bottom: 21px; font-weight: bold; } .subscription p { font-size: 16px; } .subscription input[type="email"] { margin: 28px auto 16px; width: 528px; height: 63px; text-align: left; text-indent: 29px; border: 1px solid var(--theme-red); border-radius: 63px; } .subscription input[type="email"]::placeholder { text-align: left; text-indent: 29px; font-size: 20px; color: #696969; } .subscription button { width: 528px; height: 64px; border-radius: 64px; background: var(--theme-red); cursor: pointer; color: white; font-size: 20px; font-weight: bold; } .subscription .sub-socials { display: flex; gap: 30px; justify-content: center; margin-top: 28px; } .subscription .sub-socials .icon{ display: block; width: 32px; height: 32px; background-size: 100% 100%; } .subscription .sub-socials .icon-twitter { background-image: url( '../svgs/tw_black.svg'); } .subscription .sub-socials .icon-fb { background-image: url( '../svgs/fb_black.svg'); } .subscription .sub-socials .icon-ins { background-image: url( '../svgs/ins_black.svg'); } /* Tablet-specific css for the subscription section */ @media screen and (min-width: 1024px) and (max-width: 1439px) { .subscription { margin-top: 139px; } } /* Mobile-specific css for the subscription section */ @media screen and (max-width: 1023px) { .subscription { height: 438px; margin-top: 64px; margin-bottom: 146px; padding-top: 34px; background-size: auto 375px; } .subscription h3 { font-size: 30px; } .subscription p { font-size: 12px; } .subscription .main-container { margin-left: 20px; margin-right: 20px; } .subscription > form { padding-top: 31px; height: 404px; } .subscription h3 { margin-bottom: 10px; } .subscription input[type="email"] { width: 100%; margin: 22px auto 16px; } .subscription button { width: 100%; } } /* Styles for the main footer */ .main-footer { padding-top: 61px; padding-bottom: 84px; color: white; background: #010322; font-size: 18px; } /* Layout css for the main footer */ .main-footer > div { display: flex; gap: 105px; } /* Styles for the top part of the footer */ .main-footer .footer-top { display: flex; } /* Styles for the logo in the footer */ .main-footer .logo { margin-right: auto; width: 125px; height: 98px; background-image: url( '../svgs/logo.svg'); background-size: 100% 100%; } .main-footer address { margin-left: 279px; font-weight: bold; line-height: 40px; } .main-footer .footer-bottom { display: flex; flex: 1; } .main-footer .footer-bottom dl { line-height: 40px; } .main-footer .footer-bottom dt { font-weight: bold; } .main-footer .footer-bottom { gap: 84px; } .main-footer .footer-links { display: flex; gap: 104px; flex: 1; } .footer-sign-up { flex: 1; line-height: 40px; } .footer-sign-up .get-update-btn { width: 311px; margin-top: 17px; } .footer-sign-up .footer-socials { display: flex; gap: 20px; margin-top: 31px; } .footer-sign-up .footer-socials .icon{ display: block; width: 22px; height: 22px; background-size: 100% 100%; } .footer-sign-up .footer-socials .icon-twitter { background-image: url( '../svgs/twitter.svg'); } .footer-sign-up .footer-socials .icon-fb { background-image: url( '../svgs/fb.svg'); } .footer-sign-up .footer-socials .icon-ins { background-image: url( '../svgs/ins.svg'); } /* Tablet and mobile specific css for the main footer */ @media screen and (max-width: 1439px) { .main-footer > div { display: block; } .main-footer { padding-bottom: 36px; } } /* Tablet-specific css for the main footer */ @media screen and (min-width: 1024px) and (max-width: 1439px) { .main-footer > div { padding-left: 173px; padding-right: 173px; } .main-footer .footer-top { margin-bottom: 53px; } } /* Mobile-specific css for the main footer */ @media screen and (max-width: 1023px) { .main-footer > div { padding-left: 33px; padding-right: 33px; } .main-footer { padding-top: 41px; } .main-footer .footer-top { display: block; } .main-footer .footer-bottom { display: block; } .main-footer .footer-top { display: block; } .main-footer .logo { display: block; margin-bottom: 43px; } .main-footer address { margin-left: 0; margin-bottom: 30px; } .main-footer .footer-links { margin-bottom: 21px; } .main-footer .get-update-btn { width: 100%; height: 54px; line-height: 54px; font-size: 20px; } } /* Schedule Page */ .schedule-banner { display: flex; align-items: center; justify-content: center; height: 274px; background: url("../images/schedule_banner.jpg") no-repeat center center; background-size: cover; color: white; font-size: 52px; font-weight: bold; } @media screen and (min-width: 1024px) and (max-width: 1439px){ .schedule-banner { height: 210px; font-size: 44px; } } @media screen and (max-width: 1023px) { .schedule-banner { height: 130px; font-size: 32px; } } .schedule-table { padding: 37px 51px 51px; margin: 61px 0 64px; color: white; background: #201453; border: 1px solid #A28FF3; border-radius: 20px; } .schedule-table-tab-links { display: flex; justify-content: center; text-align: center; gap: 38px; } .schedule-table-tab-links h5 { font-size: 30px; font-weight: bold; } .schedule-table-tab-links .selected h5 { color: var(--theme-red); } .schedule-table-tab-links span { font-size: 14px; } .schedule-table-contents > div { display: none; } .schedule-table-contents > .showed { display: flex; flex-wrap: wrap; } .schedule-table-contents dl{ flex-basis: 25%; } @media screen and (min-width: 1024px) and (max-width: 1439px){ .schedule-table-contents dl{ flex-basis: 50%; } } @media screen and (max-width: 1023px) { .schedule-table-contents dl{ flex-basis: 100%; } .schedule-table-tab-links h5 { font-size: 24px; font-weight: bold; } } .schedule-table-contents dt { font-size: 20px; font-weight: bold; margin: 34px 0 27px; } .schedule-table-contents dd { display: flex; justify-content: center; margin-bottom: 17px; line-height: 30px; font-size: 18px; } .schedule-table-contents dd span:nth-child(1) { white-space: nowrap; margin-right: 18px; } .schedule-table-contents dd span:nth-child(2) { padding-right: 90px; flex-grow: 1; }