:root { --black: #000000; --charcoal: #38383b; --light-gray: #dedede; --petrol: #476c77; --off-white: #fdfdfd; --gothic: 'Didact Gothic', sans-serif; --garamond: 'Cormorant Garamond', serif; } * { box-sizing: border-box; } html { font-size: 20px; } body { margin: 0; padding: 0; background-color: var(--petrol); } .header-banner-container { background-color: var(--petrol); font-family: var(--gothic); } header { display: flex; align-items: flex-end; justify-content: space-between; padding: 15px 25px; color: var(--off-white); } header .titles { display: flex; align-items: baseline; column-gap: 15px; } header .titles * { margin: 0; } header .titles h1 { font-size: 1.75em; letter-spacing: 0.1em; } header .titles h2 { display: none; } nav .bars-wrapper { background: none; padding: 0; border: none; } nav .bars-wrapper svg { fill: var(--light-gray); height: 48px; width: 48px; } nav .bars-wrapper svg:hover { fill: var(--off-white); cursor: pointer; } nav ul { display: none; column-gap: 25px; list-style: none; margin: 0; padding: 0; } nav a, nav a:visited { letter-spacing: 0.1em; color: var(--light-gray); text-decoration: none; } nav a:hover { color: var(--off-white); } .banner, .landscape-banner { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-bottom: 20px; color: var(--off-white); } :is(.banner, .landscape-banner) > * { width: 100%; } .banner-text { padding-inline: 20px; letter-spacing: 0.1em; } main { background-color: var(--off-white); display: flex; flex-direction: column; align-items: center; } .article-container { display: flex; flex-direction: column; row-gap: 25px; padding: 25px; width: min(100%, 70ch); font-family: var(--garamond); letter-spacing: 0.05em; } article { text-align: justify; } article h1 { font-size: 1.5em; } article h2 { font-size: 1.25em; } article h3 { font-size: 1em; } article ul { padding-inline: 40px; text-align: left; } article ul li { padding-block: 4px; } footer { display: flex; flex-direction: column; align-items: center; row-gap: 20px; padding: 25px; background-color: var(--petrol); color: var(--off-white); font-family: var(--garamond); } footer .social-icons { display: flex; column-gap: 30px; } footer svg { height: 48px; fill: var(--light-gray); } footer svg:hover { fill: var(--off-white); } footer p { text-align: center; } input, textarea, button { border-radius: 3px; } a { color: var(--petrol); } a:hover { color: rgba(from var(--petrol) r g b / 0.5); } .headshot-container, .landscape-photo-container { display: flex; flex-direction: column; align-items: center; } .portrait-photo, .landscape-photo { width: 100%; } .biography-banner .blurb-container { display: flex; flex-direction: column; row-gap: 36px; } .biography-banner .blurb-container > * { margin: 0; } .biography-banner .blurb-container p { font-size: 1.25em; } .biography-banner .blurb-container p#jesse-brault-name { display: none; letter-spacing: 0.1em; font-size: 1.5em; } .biography-banner .blurb-container button { display: none; border: 1px solid var(--charcoal); background-color: var(--light-gray); width: 150px; height: 40px; font-family: var(--gothic); font-size: 18px; } .biography-banner .blurb-container button:hover { background-color: var(--off-white); cursor: pointer; } article.compositions { text-align: unset; } .composition-categories { display: flex; flex-direction: column; row-gap: 30px; } .composition-categories h3 { font-size: 1.25em; } .composition-listings > * { border-top: 1px solid var(--light-gray); } .composition-listings:last-child { border-bottom: 1px solid var(--light-gray); } .composition-listing { display: flex; flex-direction: column; row-gap: 10px; padding-block: 20px; } .composition-listing .info-row-1 { display: flex; flex-direction: column; gap: 10px; } .composition-listing .info-row-1 .title { margin: 0; font-size: 1.25em; } .composition-listing .info-row-1 .title a { color: var(--charcoal); &:hover { color: hsl(from var(--charcoal) h s l / 0.75); } } .composition-listing .info-row-1 .sub-title { margin: 0; } .composition-listing .date-column { grid-area: date; justify-self: center; font-size: 1.25em; } .composition-info { display: flex; flex-direction: column; row-gap: 20px; border-bottom: 1px solid var(--light-gray); padding-block-end: 2em; } .composition-info .composition-titles-year-container { display: flex; flex-direction: column; row-gap: 20px; } .composition-info p, .composition-info .title { margin-block: 0; } .composition-info .year { font-size: 1.5em; } .composition-info :is(.recordings, .external-links, .alternate-versions) { display: flex; flex-direction: column; row-gap: 10px; } .composition-info :is(.recordings, .external-links, .alternate-versions) ul { margin: 0; } .composition-info :is(.recordings, .external-links, .alternate-versions) a span { display: flex; align-items: center; column-gap: 5px; } .composition-info :is(.recordings, .external-links, .alternate-versions) span svg { pointer-events: none; height: 0.8em; fill: var(--petrol); } .composition-text p:first-child { margin-block-start: 2em; } #lessons-banner-text, #videos-banner-text { text-align: center; } #videos-banner-text :is(a, a:visited) { color: var(--light-gray); } #videos-banner-text a:hover { color: var(--off-white); } .contact-banner article.social-media-links { font-family: var(--gothic); } .contact-banner article.social-media-links h1 { margin: 0; margin-bottom: 20px; font-size: 1.5em; color: var(--light-gray); } .contact-banner div.social-media-links { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 20px; } .contact-banner a { display: contents; color: var(--light-gray); fill: var(--light-gray); text-decoration: none; } .contact-banner a:hover { & span { color: var(--off-white); } & svg { fill: var(--off-white); } } .contact-banner a:visited { & span { color: var(--off-white); } & svg { fill: var(--off-white); } } .contact-banner svg { height: 48px; justify-self: center; } .contact-banner a span { font-size: 1em; justify-self: stretch; } article.contact { min-width: min(100%, 500px); } form.contact { width: 100%; display: flex; flex-direction: column; row-gap: 10px; } .contact .control { display: flex; flex-direction: column; row-gap: 5px; } .contact .control * { width: 100%; } .contact .control input, .contact .control textarea { min-height: 40px; font-family: var(--garamond); font-size: 18px; padding: 5px; border: 1px solid var(--charcoal); } .contact .control textarea { min-height: 160px; } .contact .control input[type='submit'] { background-color: var(--petrol); color: var(--off-white); height: 60px; } .contact .control input[type='submit']:hover { background-color: rgba(from var(--petrol) r g b / 0.5); cursor: pointer; } .contact .control input.invalid, .contact .control textarea.invalid { border: 1px solid red; } .contact .control .message { margin: 0; } .contact .control .error { color: red; } @media screen and (min-width: 768px) { html { font-size: 18px; } header { padding-inline: 30px; } header .titles h2 { display: unset; font-size: 2em; font-size: 18px; letter-spacing: 0.15em; } .banner, .landscape-banner { flex-direction: unset; padding: 0 30px 30px; gap: 30px; } .banner-text { padding-inline: unset; letter-spacing: 0.15em; } article h1 { font-size: 2em; } article h2 { font-size: 1.5em; } article h3 { font-size: 1.25em; } footer { flex-direction: unset; justify-content: space-between; padding: 20px 30px; } .biography-banner .blurb-container p#jesse-brault-name { display: unset; letter-spacing: 0.15em; font-size: 2em; } .composition-listing { display: grid; grid-template-columns: 4fr 1fr; grid-template-areas: 'r1 date' 'r2 .' 'r3 .'; row-gap: 10px; } .composition-listing .info-row-1 { grid-area: r1; flex-direction: unset; align-items: baseline; } .composition-listing .info-row-1 .title { font-size: 1.5em; } .composition-listing .date-column { align-self: center; } .composition-listing .info-row-2 { grid-area: r2; } .composition-listing .info-row-3 { grid-area: r3; } .composition-info .composition-titles-year-container { flex-direction: unset; row-gap: unset; align-items: baseline; justify-content: space-between; } #lessons-banner-text, #videos-banner-text { font-size: 1.5em; } } @media screen and (max-width: 1023px) { nav ul { position: absolute; left: 0; z-index: 1; width: 100%; display: none; flex-direction: column; align-items: center; row-gap: 10px; padding: 20px; background-color: var(--petrol); border-bottom: 1px solid var(--charcoal); } } @media screen and (min-width: 1024px) { header { align-items: center; padding-inline: 50px; } header .titles h1 { font-size: 2.5em; letter-spacing: 0.175em; } header .titles h2 { display: none; } nav .bars-wrapper { display: none; } nav ul { display: flex; } .banner, .landscape-banner { padding: 0 50px 50px; gap: 50px; } .landscape-banner { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; } footer { padding-inline: 50px; } .biography-banner .blurb-container p { font-size: 2em; } .biography-banner .blurb-container p#jesse-brault-name { display: unset; letter-spacing: 0.15em; font-size: 3em; } .biography-banner .blurb-container button { display: unset; } #lessons-banner-text, #videos-banner-text { font-size: 2em; } } @media screen and (min-width: 1200px) { header .titles h2 { display: unset; } .contact-banner svg { height: 72px; } .contact-banner article.social-media-links h1 { font-size: 2em; } .contact-banner a span { font-size: 1.75em; } }