- itself; the page
list WordPress falls back to when no menu is assigned to the
location wraps that
- in a
and puts the class there. Both
shapes are styled so the menu does not depend on which one renders
- and so the breakpoint overrides below, which key off the link
alone, are not outweighed by a selector naming the
- .
*/
}
body.wp-theme-nfo-song-cycle .nav-overlay__menu,
body.wp-theme-nfo-song-cycle .nav-overlay__menu ul {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
}
body.wp-theme-nfo-song-cycle .nav-overlay__menu li {
margin: 0;
}
body.wp-theme-nfo-song-cycle .nav-overlay__menu a {
font-family: "veneer", sans-serif;
font-weight: 400;
font-style: normal;
display: inline-block;
font-size: 4.5rem;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
color: inherit;
transition: opacity 0.4s ease-in-out;
}
body.wp-theme-nfo-song-cycle .nav-overlay__menu a:hover, body.wp-theme-nfo-song-cycle .nav-overlay__menu a:focus-visible {
color: inherit;
opacity: 0.65;
}
body.wp-theme-nfo-song-cycle .nav-overlay__menu .is-current > a,
body.wp-theme-nfo-song-cycle .nav-overlay__menu .current-menu-item > a,
body.wp-theme-nfo-song-cycle .nav-overlay__menu .current_page_item > a {
text-decoration: underline;
text-underline-position: from-font;
}
body.wp-theme-nfo-song-cycle .nav-overlay__footer {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
text-align: center;
}
body.wp-theme-nfo-song-cycle .nav-overlay__email {
font-family: "veneer", sans-serif;
font-weight: 400;
font-style: normal;
margin: 0;
font-size: 2.25rem;
line-height: 1;
text-transform: uppercase;
overflow-wrap: anywhere;
}
body.wp-theme-nfo-song-cycle .nav-overlay__email a {
color: inherit;
text-decoration: none;
}
body.wp-theme-nfo-song-cycle .nav-overlay__email a:hover, body.wp-theme-nfo-song-cycle .nav-overlay__email a:focus-visible {
color: inherit;
text-decoration: underline;
text-underline-position: from-font;
}
body.wp-theme-nfo-song-cycle.nav-open {
overflow: hidden;
}
body.wp-theme-nfo-song-cycle {
/*
The bar is fixed, so it sits over the top of the page. A hero is drawn
for that - the artwork runs up behind the bar by design. Anything else
(the blog, search, 404) needs to start below it.
*/
}
body.wp-theme-nfo-song-cycle .site-main:not(:has(.page-hero)) {
padding-top: var(--header-height);
}
@media (max-width: 1199px) {
body.wp-theme-nfo-song-cycle .site-header__bar {
padding-inline: 2.5rem;
}
}
@media (max-width: 991px) {
body.wp-theme-nfo-song-cycle .site-header__bar {
padding-inline: 1.375rem;
}
body.wp-theme-nfo-song-cycle .site-header__logo img {
height: 7.5rem;
}
body.wp-theme-nfo-song-cycle .nav-overlay {
padding-bottom: 3.75rem;
}
body.wp-theme-nfo-song-cycle .nav-overlay__menu,
body.wp-theme-nfo-song-cycle .nav-overlay__menu ul {
gap: 1.4375rem;
}
body.wp-theme-nfo-song-cycle .nav-overlay__menu a {
font-size: 3.75rem;
}
body.wp-theme-nfo-song-cycle .nav-overlay__email {
font-size: 1.5rem;
}
}
@media (max-width: 767px) {
body.wp-theme-nfo-song-cycle .site-header__bar {
padding-inline: 1rem;
}
body.wp-theme-nfo-song-cycle .site-header__logo img {
height: 6.25rem;
}
body.wp-theme-nfo-song-cycle .nav-overlay {
padding-bottom: 2.5rem;
}
body.wp-theme-nfo-song-cycle .nav-overlay__menu,
body.wp-theme-nfo-song-cycle .nav-overlay__menu ul {
gap: 1.6875rem;
}
body.wp-theme-nfo-song-cycle .nav-overlay__menu a {
font-size: 3rem;
}
}
@media (max-width: 575px) {
body.wp-theme-nfo-song-cycle .nav-overlay__email {
font-size: 1.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
body.wp-theme-nfo-song-cycle .site-header__bar,
body.wp-theme-nfo-song-cycle .site-header__logo,
body.wp-theme-nfo-song-cycle .nav-overlay,
body.wp-theme-nfo-song-cycle .nav-toggle__bar {
transition: none;
}
}
/*
Footer-specific styles
The footer is a centred two-line block - a contact email set in Veneer at
the H2 size, and a copyright line in Montserrat beneath it - on the same
dark brown as the rest of the page.
Measurements come from the Figma frames: desktop 60px email / 18px
copyright with a 32px gap and 120px of space above and below; mobile 24px
email / 14px copyright with a 24px gap.
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .site-footer {
background-color: #4F4641;
color: #FFFFFF;
padding: var(--section-spacing) 0;
}
body.wp-theme-nfo-song-cycle .site-footer__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
body.wp-theme-nfo-song-cycle .site-footer__email {
font-size: 2.25rem;
margin-bottom: 0;
overflow-wrap: anywhere;
}
body.wp-theme-nfo-song-cycle .site-footer__email a {
color: inherit;
text-decoration: none;
}
body.wp-theme-nfo-song-cycle .site-footer__email a:hover, body.wp-theme-nfo-song-cycle .site-footer__email a:focus-visible {
color: inherit;
text-decoration: underline;
text-underline-position: from-font;
}
body.wp-theme-nfo-song-cycle .site-footer__copyright {
margin-bottom: 0;
line-height: 1.6;
}
@media (max-width: 991px) {
body.wp-theme-nfo-song-cycle .site-footer {
padding-bottom: 2.5rem;
}
}
@media (max-width: 575px) {
body.wp-theme-nfo-song-cycle .site-footer__inner {
gap: 1.5rem;
}
body.wp-theme-nfo-song-cycle .site-footer__email {
font-size: 1.5rem;
}
body.wp-theme-nfo-song-cycle .site-footer__copyright {
font-size: 0.875rem;
line-height: 1.5;
}
}
/*
Bootstrap Carousel partial styles
@package nfo-song-cycle
*/
div.carousel .carousel-caption {
bottom: 0;
right: 0;
left: 0;
padding-bottom: 2.5rem;
--bs-bg-opacity: .5;
}
/*
Search Form styles
@package nfo-song-cycle
*/
/*
Social icon links
Rendered by template-parts/partial-social-links.php from the Social Links
repeater on the Site Options page. Currently used at the bottom of the
full-screen menu; the styles are kept here rather than in the header so
the partial can be dropped in anywhere.
The icons are inlined SVGs drawing in currentColor, so they take the
colour of whatever they sit in. They are sized by height rather than
width so marks with different aspect ratios - the tall Facebook "f"
against the near-square X - sit on the same optical line, which is what
the design does.
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .social-links {
display: flex;
align-items: center;
justify-content: center;
gap: 1.125rem;
margin: 0;
padding: 0;
list-style: none;
}
body.wp-theme-nfo-song-cycle .social-links__item {
margin: 0;
}
body.wp-theme-nfo-song-cycle .social-links__link {
display: block;
color: inherit;
transition: opacity 0.4s ease-in-out;
}
body.wp-theme-nfo-song-cycle .social-links__link:hover, body.wp-theme-nfo-song-cycle .social-links__link:focus-visible {
color: inherit;
opacity: 0.65;
}
body.wp-theme-nfo-song-cycle .social-links__icon {
display: block;
}
body.wp-theme-nfo-song-cycle .social-links__icon svg, body.wp-theme-nfo-song-cycle .social-links__icon img {
display: block;
height: 2.1875rem;
width: auto;
}
/*
Content Block component styles
TODO: cleanup - keep any?
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .content-block {
background-color: #E7E6E4;
color: #4F4641;
padding: 3.75rem 0;
}
body.wp-theme-nfo-song-cycle .content-block h1 {
font-size: 4rem;
text-transform: none;
}
body.wp-theme-nfo-song-cycle .content-block h2, body.wp-theme-nfo-song-cycle .content-block h3, body.wp-theme-nfo-song-cycle .content-block h4, body.wp-theme-nfo-song-cycle .content-block h5, body.wp-theme-nfo-song-cycle .content-block h6 {
font-size: 1.75rem !important;
text-transform: none;
}
body.wp-theme-nfo-song-cycle .content-block h3 {
font-size: 1.5rem !important;
}
body.wp-theme-nfo-song-cycle .content-block h4 {
font-size: 1.25rem !important;
}
body.wp-theme-nfo-song-cycle .content-block h5 {
font-size: 1.125rem !important;
}
body.wp-theme-nfo-song-cycle .content-block h6 {
font-size: 1rem !important;
}
/*
Content with Accordion component styles
TODO: cleanup - keep any?
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .content-with-accordion {
background-color: #4F4641;
color: rgb(72.4705882353%, 72.1568627451%, 71.5294117647%);
padding: 3.75rem 0;
}
body.wp-theme-nfo-song-cycle .content-with-accordion .eyebrow {
color: #E7E6E4;
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion, body.wp-theme-nfo-song-cycle .content-with-accordion .accordion-item, body.wp-theme-nfo-song-cycle .content-with-accordion .accordion-button, body.wp-theme-nfo-song-cycle .content-with-accordion .accordion-collapse {
background-color: transparent;
border: none;
--bs-accordion-border-color: transparent;
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion {
border-bottom: 1px solid #E7E6E4;
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item {
border-top: 1px solid #E7E6E4;
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item .accordion-header {
margin: 0;
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item .accordion-header .accordion-button {
font-size: 1.125rem;
color: rgb(72.4705882353%, 72.1568627451%, 71.5294117647%);
padding: 1.5rem 1.5rem 1.4rem;
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item .accordion-header .accordion-button.collapsed {
color: #E7E6E4;
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item .accordion-header .accordion-button {
/* COLLAPSED (down arrow) */
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item .accordion-header .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E7E6E4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item .accordion-header .accordion-button {
/* EXPANDED (rotated arrow, pointing up) */
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B9B8B6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item .accordion-header .accordion-button:hover {
color: rgb(72.4705882353%, 72.1568627451%, 71.5294117647%);
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item .accordion-header .accordion-button:hover::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B9B8B6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item .accordion-body {
padding: 0 1.5rem 1.5rem;
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item .accordion-body p {
margin: 0;
line-height: 1.5em;
}
@media (max-width: 991px) {
body.wp-theme-nfo-song-cycle .content-with-accordion {
padding: 2rem 0;
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item .accordion-header .accordion-button {
padding: 1.5rem 0.5rem 1.4rem;
}
body.wp-theme-nfo-song-cycle .content-with-accordion .accordion .accordion-item .accordion-body {
padding: 0 0.5rem 1.5rem !important;
}
}
/*
Content With Image component base styles
Two equal columns with a 60px gutter at the 1600px design width - a
photograph on one side, a column of copy on the other. In the design the
copy column measures 690px against a 690px image inside the 1440px content
area, so the split is an even 50/50 either way round.
Modifiers:
- --image-left / --image-right : which side the photograph sits on
- --top / --center : how the two columns align to one another
The copy column comes first in the markup so the stacked layout reads
heading, copy, image without any DOM reordering. Which column the image
lands in on the wide layout is set explicitly on the grid.
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .content-with-image__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.75rem;
max-width: 1200px;
margin-inline: auto;
}
body.wp-theme-nfo-song-cycle .content-with-image__content, body.wp-theme-nfo-song-cycle .content-with-image__media {
grid-row: 1;
}
body.wp-theme-nfo-song-cycle .content-with-image {
/*
Copy column
*/
}
body.wp-theme-nfo-song-cycle .content-with-image__content {
display: flex;
flex-direction: column;
gap: 2rem;
}
body.wp-theme-nfo-song-cycle .content-with-image__heading {
display: flex;
flex-direction: column;
gap: 2rem;
}
body.wp-theme-nfo-song-cycle .content-with-image__eyebrow, body.wp-theme-nfo-song-cycle .content-with-image__headline {
margin-bottom: 0;
}
body.wp-theme-nfo-song-cycle .content-with-image__heading--lockup {
align-items: center;
text-align: center;
}
body.wp-theme-nfo-song-cycle .content-with-image__logo {
display: block;
width: clamp(240px, 25vw, 400px);
max-width: 100%;
height: auto;
}
body.wp-theme-nfo-song-cycle .content-with-image {
/*
Image column
*/
}
body.wp-theme-nfo-song-cycle .content-with-image__media {
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
align-self: start;
}
body.wp-theme-nfo-song-cycle .content-with-image__image {
display: block;
width: 100%;
height: auto;
}
body.wp-theme-nfo-song-cycle .content-with-image__credit {
text-align: left;
margin-bottom: 0;
}
body.wp-theme-nfo-song-cycle {
/*
Image position
*/
}
body.wp-theme-nfo-song-cycle .content-with-image--image-left .content-with-image__media {
grid-column: 1;
}
body.wp-theme-nfo-song-cycle .content-with-image--image-left .content-with-image__content {
grid-column: 2;
}
body.wp-theme-nfo-song-cycle .content-with-image--image-right .content-with-image__content {
grid-column: 1;
}
body.wp-theme-nfo-song-cycle .content-with-image--image-right .content-with-image__media {
grid-column: 2;
}
body.wp-theme-nfo-song-cycle {
/*
Column alignment
*/
}
body.wp-theme-nfo-song-cycle .content-with-image--top .content-with-image__inner {
align-items: start;
}
body.wp-theme-nfo-song-cycle .content-with-image--center .content-with-image__inner {
align-items: center;
}
@media (max-width: 991px) {
body.wp-theme-nfo-song-cycle .content-with-image__inner {
gap: 2rem;
}
}
@media (max-width: 767px) {
body.wp-theme-nfo-song-cycle .content-with-image__inner {
grid-template-columns: 1fr;
gap: 1.5rem;
}
body.wp-theme-nfo-song-cycle .content-with-image__logo {
width: 100%;
}
body.wp-theme-nfo-song-cycle .content-with-image__heading {
gap: 1rem;
}
body.wp-theme-nfo-song-cycle .content-with-image__content.text-center {
text-align: left !important;
}
body.wp-theme-nfo-song-cycle .content-with-image__content.text-center .content-with-image__heading--lockup {
text-align: center !important;
}
body.wp-theme-nfo-song-cycle .content-with-image--image-left .content-with-image__content,
body.wp-theme-nfo-song-cycle .content-with-image--image-left .content-with-image__media,
body.wp-theme-nfo-song-cycle .content-with-image--image-right .content-with-image__content,
body.wp-theme-nfo-song-cycle .content-with-image--image-right .content-with-image__media {
grid-column: 1;
grid-row: auto;
}
body.wp-theme-nfo-song-cycle .content-with-image--top .content-with-image__inner,
body.wp-theme-nfo-song-cycle .content-with-image--center .content-with-image__inner {
align-items: stretch;
}
}
/*
Content with Media component styles
TODO: cleanup - keep any?
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .content-with-media {
background-color: #4F4641;
color: rgb(72.4705882353%, 72.1568627451%, 71.5294117647%);
padding: 3.75rem 0;
}
body.wp-theme-nfo-song-cycle .content-with-media.primary .eyebrow, body.wp-theme-nfo-song-cycle .content-with-media.dark .eyebrow {
color: #fff;
}
@media (max-width: 991px) {
body.wp-theme-nfo-song-cycle .content-with-media {
padding: 2rem 0;
}
body.wp-theme-nfo-song-cycle .content-with-media .eyebrow {
margin-top: 1.5rem;
}
}
/*
Error Page component styles
TODO: cleanup - keep any?
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .error-page {
background-color: #4F4641;
color: rgb(72.4705882353%, 72.1568627451%, 71.5294117647%);
padding: 12rem 0;
}
body.wp-theme-nfo-song-cycle .error-page .ae-anim {
position: fixed;
width: 600px;
transform: translate(0, -50%) rotate(200deg) rotateX(180deg);
top: 300px;
right: -5%;
z-index: 100 !important;
opacity: 0.6;
}
body.wp-theme-nfo-song-cycle .error-page .ae-anim svg {
z-index: 110 !important;
}
body.wp-theme-nfo-song-cycle .error-page .ae-anim svg * {
z-index: 120 !important;
}
body.wp-theme-nfo-song-cycle .error-page .ae-anim svg * * {
z-index: 130 !important;
}
body.wp-theme-nfo-song-cycle .error-page h2 {
font-size: 4rem;
text-transform: none;
color: #E7E6E4;
margin: 0;
}
body.wp-theme-nfo-song-cycle .error-page p {
font-size: 1.25rem;
}
@media (max-width: 767px) {
body.wp-theme-nfo-song-cycle .error-page {
padding: 2.5rem 1.875rem;
}
body.wp-theme-nfo-song-cycle .error-page .ae-anim {
width: 400px;
top: 300px;
right: -10%;
}
}
/*
Gravity Forms Embed component styles
TODO: cleanup - keep any?
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .gravity-forms-embed {
background-color: #4F4641;
color: rgb(72.4705882353%, 72.1568627451%, 71.5294117647%);
padding: 2.5rem 0;
min-height: 48rem;
}
body.wp-theme-nfo-song-cycle .gravity-forms-embed h2 {
font-size: 6rem;
color: #E7E6E4;
}
body.wp-theme-nfo-song-cycle .gravity-forms-embed button {
background-color: #E7E6E4 !important;
border-color: #E7E6E4 !important;
color: #4F4641 !important;
}
body.wp-theme-nfo-song-cycle .gravity-forms-embed button:hover, body.wp-theme-nfo-song-cycle .gravity-forms-embed button.hover {
background-color: #4F4641 !important;
border-color: #E7E6E4 !important;
color: #E7E6E4 !important;
}
@media (max-width: 1199px) {
body.wp-theme-nfo-song-cycle .gravity-forms-embed .contact-text {
text-align: center;
margin-right: 0 !important;
}
}
@media (max-width: 767px) {
body.wp-theme-nfo-song-cycle .gravity-forms-embed {
padding: 2.5rem 1.875rem;
}
body.wp-theme-nfo-song-cycle .gravity-forms-embed .contact-text {
font-weight: 300 !important;
font-size: 1.875rem;
}
}
/*
Latest Posts component base styles
The "Project Updates" block - a display heading over a centred row of the
three most recent posts, closed by an underlined "View All Updates" link.
Almost all of the type in this component is already the theme's scale: the
heading is a plain H2 (Veneer, uppercase, up to 60px), the post titles are
plain H3s (Montserrat SemiBold 24/1.2) and the excerpts are the default
paragraph (17-20px/1.6, which covers the design's 18px). So this file only
handles the row layout and the three vertical gaps the design calls for.
Unlike most components this one is not constrained to the 1200px text
column - in the design the card row spans the full content area, so it
takes the Bootstrap container's width and the columns divide that.
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .latest-posts__headline {
margin-bottom: 3.75rem;
}
body.wp-theme-nfo-song-cycle .latest-posts__list {
--bs-gutter-x: 1.875rem;
row-gap: 3rem;
}
body.wp-theme-nfo-song-cycle .latest-posts__item {
display: flex;
flex-direction: column;
}
body.wp-theme-nfo-song-cycle .latest-posts__item-link {
color: inherit;
text-decoration: none;
}
body.wp-theme-nfo-song-cycle .latest-posts__item-link:hover, body.wp-theme-nfo-song-cycle .latest-posts__item-link:focus-visible {
text-decoration: underline;
}
body.wp-theme-nfo-song-cycle .latest-posts__view-all {
font-family: "montserrat", sans-serif;
font-weight: 600;
display: inline-block;
margin-top: 3.75rem;
line-height: 1.6;
text-transform: uppercase;
text-decoration: underline;
color: inherit;
}
body.wp-theme-nfo-song-cycle .latest-posts__view-all:hover, body.wp-theme-nfo-song-cycle .latest-posts__view-all:focus-visible {
text-decoration: none;
}
@media (max-width: 991px) {
body.wp-theme-nfo-song-cycle .latest-posts__list {
row-gap: 3rem;
}
}
@media (max-width: 767px) {
body.wp-theme-nfo-song-cycle .latest-posts__inner.text-center {
text-align: left !important;
}
body.wp-theme-nfo-song-cycle .latest-posts__headline {
margin-bottom: 3rem;
}
body.wp-theme-nfo-song-cycle .latest-posts__list {
row-gap: 2rem;
}
}
/*
Page Content component styles
@package nfo-song-cycle
*/
/*
Page Hero component base styles
Two variants, toggled per page in ACF:
- .page-hero--tall : 1600x800 (2:1) artwork with the full 582x369 logo lockup
- .page-hero--short : 1600x533 (3:1) artwork with the smaller 350x222 logo lockup
Both sit on the dark brown page background with the H1 (and optional
description) centred directly beneath the artwork.
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .page-hero {
padding: 0;
background-color: #4F4641;
color: #FFFFFF;
}
body.wp-theme-nfo-song-cycle .page-hero__media {
position: relative;
width: 100%;
overflow: hidden;
}
body.wp-theme-nfo-song-cycle .page-hero picture {
display: contents;
}
body.wp-theme-nfo-song-cycle .page-hero__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
body.wp-theme-nfo-song-cycle .page-hero__logo-link {
position: absolute;
top: 0;
left: clamp(1.5rem, 5vw, 5rem);
z-index: 2;
display: block;
line-height: 0;
text-decoration: none;
}
body.wp-theme-nfo-song-cycle .page-hero__logo {
display: block;
width: 100%;
height: auto;
}
body.wp-theme-nfo-song-cycle .page-hero__intro {
padding-top: 1rem;
padding-bottom: var(--section-spacing);
text-align: center;
}
body.wp-theme-nfo-song-cycle .page-hero__content {
max-width: 1200px;
margin-inline: auto;
}
body.wp-theme-nfo-song-cycle .page-hero__heading {
margin-bottom: 0;
}
body.wp-theme-nfo-song-cycle .page-hero__description {
font-family: "montserrat", sans-serif;
font-weight: 500;
font-size: clamp(1.25rem, 1.75vw, 1.75rem);
line-height: 1.2;
margin-top: 1rem;
margin-bottom: 0;
}
body.wp-theme-nfo-song-cycle .page-hero--tall .page-hero__media {
aspect-ratio: 13/6;
}
body.wp-theme-nfo-song-cycle .page-hero--tall .page-hero__image {
object-position: center bottom;
}
body.wp-theme-nfo-song-cycle .page-hero--tall .page-hero__logo-link {
width: clamp(220px, 36.375vw, 582px);
}
body.wp-theme-nfo-song-cycle .page-hero--short .page-hero__media {
aspect-ratio: 3/1;
}
body.wp-theme-nfo-song-cycle .page-hero--short .page-hero__logo-link {
width: clamp(180px, 21.875vw, 350px);
}
body.wp-theme-nfo-song-cycle .page-hero--media-only {
padding-bottom: 0;
}
@media (max-width: 767px) {
body.wp-theme-nfo-song-cycle .page-hero__intro {
text-align: left;
}
body.wp-theme-nfo-song-cycle .page-hero__logo {
width: auto;
height: 100%;
}
body.wp-theme-nfo-song-cycle .page-hero--tall {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh;
}
body.wp-theme-nfo-song-cycle .page-hero--tall .page-hero__media {
aspect-ratio: auto;
flex: 1 1 auto;
min-height: 45vh;
}
body.wp-theme-nfo-song-cycle .page-hero--tall .page-hero__intro {
flex: 0 0 auto;
padding-top: 0;
}
body.wp-theme-nfo-song-cycle .page-hero--tall .page-hero__heading {
font-size: clamp(2.75rem, 84.6px - 5.29vw, 4rem);
}
body.wp-theme-nfo-song-cycle .page-hero--tall .page-hero__description {
font-size: clamp(1.25rem, 36.25px - 2.12vw, 1.75rem);
font-weight: 600;
line-height: 1.3;
}
body.wp-theme-nfo-song-cycle .page-hero--tall .page-hero__logo-link {
width: auto;
height: 6.25rem;
}
body.wp-theme-nfo-song-cycle .page-hero--short .page-hero__media {
aspect-ratio: 3/2;
}
body.wp-theme-nfo-song-cycle .page-hero--short .page-hero__logo-link {
width: auto;
height: 6.25rem;
}
}
/*
Text Content component base styles
A single centred column of body copy - the "Introduction" block in the
design. The copy is one step larger than the default paragraph (Montserrat
Medium 32/1.6 at the 1600px design width), which the shared .text-large
class already provides, so this file only handles the column width and the
alignment.
The block keeps the section padding every other block has, including where
it follows the hero - it stands as its own section, with the same 120px of
air above it that sits between it and Weary Ramblers.
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .text-content__inner {
max-width: 1200px;
margin-inline: auto;
}
body.wp-theme-nfo-song-cycle .text-content__headline {
margin-bottom: 2rem;
}
@media (max-width: 767px) {
body.wp-theme-nfo-song-cycle .text-content__inner.text-center {
text-align: left !important;
}
}
/*
Project update posts - tokens and styles shared by the listing and the post
The design draws these two screens on the same 1600px artboard as the rest
of the site, but the text column is narrower than the 1200px used elsewhere
(950px), so the widths and the few type sizes that are specific to posts are
kept here rather than in config/.
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle {
/*
Byline - Montserrat SemiBold, 18px in the listing and 20px on the post.
inline-flex keeps the separator spacing under CSS control while still
letting the parent's text-align place the whole byline.
*/
}
body.wp-theme-nfo-song-cycle .post-meta {
font-family: "montserrat", sans-serif;
font-weight: 600;
font-size: clamp(1rem, 1.125vw, 1.125rem);
line-height: 1.1;
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0;
}
/*
Project updates listing styles
A single centred 950px column of post summaries beneath the short hero.
Everything in the listing is centre-aligned in the design - title, byline,
excerpt and the "Read more" link - on the dark page background.
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .post-archive__inner {
max-width: 950px;
margin-inline: auto;
text-align: center;
}
body.wp-theme-nfo-song-cycle .post-archive__list {
display: flex;
flex-direction: column;
gap: clamp(3rem, 5vw, 5rem);
}
body.wp-theme-nfo-song-cycle .post-archive__pagination {
margin-top: 7.5rem;
}
body.wp-theme-nfo-song-cycle .post-archive__pagination .page-numbers {
font-family: "montserrat", sans-serif;
font-weight: 600;
font-size: clamp(1rem, 1.125vw, 1.125rem);
display: inline-block;
padding: 0 0.5rem;
text-decoration: none;
}
body.wp-theme-nfo-song-cycle .post-archive__pagination .page-numbers.current {
text-decoration: underline;
text-underline-position: from-font;
}
body.wp-theme-nfo-song-cycle .post-archive__empty {
font-size: clamp(1.25rem, 2vw, 2rem);
}
body.wp-theme-nfo-song-cycle {
/*
One listing entry - a 32px gap between the title/byline block and the
excerpt, and 16px between the title and the byline inside it.
*/
}
body.wp-theme-nfo-song-cycle .post-summary {
display: flex;
flex-direction: column;
gap: 2rem;
}
body.wp-theme-nfo-song-cycle .post-summary__header {
display: flex;
flex-direction: column;
gap: 1rem;
}
body.wp-theme-nfo-song-cycle .post-summary__title {
font-family: "montserrat", sans-serif;
font-weight: 600;
font-size: clamp(1.75rem, 2.25vw, 2.25rem);
line-height: 1.1;
text-transform: none;
letter-spacing: 0;
margin-bottom: 0;
}
body.wp-theme-nfo-song-cycle .post-summary__title a {
text-decoration: none;
}
body.wp-theme-nfo-song-cycle .post-summary__title a:hover, body.wp-theme-nfo-song-cycle .post-summary__title a:focus-visible {
text-decoration: underline;
text-underline-position: from-font;
}
body.wp-theme-nfo-song-cycle .post-summary__more {
margin-bottom: 0;
}
body.wp-theme-nfo-song-cycle .post-summary .link-cta {
font-family: "montserrat", sans-serif;
font-weight: 400;
font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
text-transform: none;
}
body.wp-theme-nfo-song-cycle .page-hero + .post-archive {
padding-top: 0;
}
@media (max-width: 767px) {
body.wp-theme-nfo-song-cycle .post-summary__body {
text-align: left;
}
}
@media (max-width: 575px) {
body.wp-theme-nfo-song-cycle .post-archive__pagination {
margin-top: 3.75rem;
}
}
/*
Single project update post styles
A left-aligned 950px column beneath the media-only hero band: back link,
Veneer H1, byline, then body copy. The hero carries no heading on this
screen, so the column supplies its own top spacing.
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .post-single {
padding-top: 1rem;
}
body.wp-theme-nfo-song-cycle .post-single__inner {
max-width: 950px;
margin-inline: auto;
text-align: left;
}
body.wp-theme-nfo-song-cycle .post-single__back {
margin-bottom: 2rem;
}
body.wp-theme-nfo-song-cycle .post-single__back-link {
font-family: "montserrat", sans-serif;
font-weight: 600;
font-size: 1.25rem;
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
text-decoration: none;
}
body.wp-theme-nfo-song-cycle .post-single__back-link:hover, body.wp-theme-nfo-song-cycle .post-single__back-link:focus-visible {
text-decoration: underline;
text-underline-position: from-font;
}
body.wp-theme-nfo-song-cycle .post-single__back-link i {
font-size: clamp(1rem, 1.125vw, 1.125rem);
}
body.wp-theme-nfo-song-cycle .post-single__header {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 3rem;
}
body.wp-theme-nfo-song-cycle .post-single__title {
margin-bottom: 0;
}
body.wp-theme-nfo-song-cycle .post-single .post-meta {
font-size: 1.25rem;
}
body.wp-theme-nfo-song-cycle .post-single__body a {
text-decoration: underline;
text-underline-position: from-font;
}
body.wp-theme-nfo-song-cycle .post-single__body img {
max-width: 100%;
height: auto;
}
@media (max-width: 767px) {
body.wp-theme-nfo-song-cycle .post-single__back {
margin-bottom: 1.5rem;
}
body.wp-theme-nfo-song-cycle .post-single__header {
margin-bottom: 2rem;
}
}
/*
Home Page specific styles
@package nfo-song-cycle
*/
/*
Styleguide specific styles
@package nfo-song-cycle
*/
body.wp-theme-nfo-song-cycle .styleguide .section-nav {
position: fixed;
top: 105px;
right: 10px;
text-align: right;
padding: 1rem 1.1rem 0.5rem;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
border-radius: 1rem;
}
body.wp-theme-nfo-song-cycle .styleguide .section-nav a {
margin-bottom: 0.5rem;
}
body.wp-theme-nfo-song-cycle .styleguide.dark .section-nav {
background-color: rgba(255, 255, 255, 0.1);
}
body.wp-theme-nfo-song-cycle .styleguide .desc {
font-style: italic !important;
}
body.wp-theme-nfo-song-cycle .styleguide p.info {
background-color: rgba(0, 0, 0, 0.85);
padding: 0.75rem 1.25rem;
width: auto;
display: inline-block;
border-radius: 0.75rem;
color: lightblue;
margin-bottom: 2rem;
margin-right: 1rem;
font-size: 0.9rem;
border: 1px solid rgba(0, 0, 0, 0.6);
}
body.wp-theme-nfo-song-cycle .styleguide p.info.hide {
display: none;
}
body.wp-theme-nfo-song-cycle .styleguide p.info strong {
color: white;
}
body.wp-theme-nfo-song-cycle .styleguide p.info em {
color: plum;
}
body.wp-theme-nfo-song-cycle .styleguide p.info b {
color: darkorange;
}
body.wp-theme-nfo-song-cycle .styleguide.dark p.info {
border: 1px solid rgba(255, 255, 255, 0.6);
}
body.wp-theme-nfo-song-cycle .styleguide .bs-component .btn {
margin-right: 1rem;
}
body.wp-theme-nfo-song-cycle .styleguide .bs-component .btn-group .btn {
margin: 0;
}
body.wp-theme-nfo-song-cycle .styleguide .colors .col-1 {
min-width: 7rem;
}
body.wp-theme-nfo-song-cycle .styleguide .colors .col-1 div {
border-radius: 50vh !important;
width: 8rem;
height: 8rem;
padding: 2.8em 0 !important;
font-weight: bold;
border: 2px solid rgba(0, 0, 0, 0.3);
line-height: 1.2;
}
body.wp-theme-nfo-song-cycle .styleguide .colors .col-1 div small {
display: block;
font-weight: normal;
font-style: italic;
}
body.wp-theme-nfo-song-cycle .styleguide.dark .colors .col-1 div {
border-color: rgba(255, 255, 255, 0.6);
}
body.wp-theme-nfo-song-cycle .styleguide .example {
font-size: 2.5rem;
padding-bottom: 0.125rem;
border-bottom: 2px solid #d7d7d7;
}
body.wp-theme-nfo-song-cycle .styleguide .button-styles :not(label).btn {
margin-bottom: 0.5rem;
}
/*
Global overrides for accessibility
@package nfo-song-cycle
*/
/*
Visually hidden, still announced
The accessible name of anything that reads as an icon rather than as text -
the menu toggle, the social links - is carried by a span with this class.
Clipping rather than display: none keeps it in the accessibility tree.
Anything focusable that uses it - the skip link - comes back into view on
focus.
*/
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip-path: none;
white-space: normal;
}
.skip-link {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: static;
width: auto;
height: auto;
}
/*
Global overrides for states such as light mode/dark mode, etc.
@package nfo-song-cycle
*/
/*# sourceMappingURL=style.css.map */