/* Page structure: container, notice bar, header, navigation, footer. */ .container { width: min(var(--container), 100%); margin-inline: auto; padding-inline: var(--pad); } .site-main:focus { outline: none; } /* Basic inner pages until each gets its own design. */ .page-header { padding-block: clamp(2.5rem, 6vw, 6rem) clamp(1.25rem, 3vw, 2.5rem); } .page-header h1 { font: 700 clamp(2.5rem, 6vw, 6rem)/0.94 var(--m); letter-spacing: -0.07em; } .page-header__meta { font: 500 0.7812rem/1.5 var(--g); letter-spacing: 0.06em; color: var(--mute); } .prose { max-width: 46rem; padding-bottom: clamp(3rem, 6vw, 6rem); font-size: 1.0625rem; color: var(--soft); } .prose a { color: var(--cyan); } /* ---------- Notice bar ---------- */ .notice-bar { background: var(--cyan); color: var(--ink); font: 500 0.8438rem/1.4 var(--g); } .notice-bar p { margin: 0; padding-block: 0.5625rem; text-align: center; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--ink); border-bottom: 1px solid var(--rule); } .admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.75rem, 2.4vw, 2.125rem); min-height: 4.25rem; } /* Brand: the logo mark beside the wordmark (first word large, the rest as a small caps line). */ .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .brand__text { display: block; font: 700 1.875rem/0.9 var(--m); letter-spacing: -0.07em; white-space: nowrap; } .brand__text > span { display: block; margin-top: 0.25rem; font: 500 0.625rem/1.3 var(--g); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); } .logo-mark { flex: none; width: auto; background: none; } .brand .logo-mark { height: 2.75rem; } .site-nav { margin-left: auto; } .site-nav__menu { display: flex; align-items: center; gap: 1.5625rem; } .site-nav__menu a { display: block; padding: 0.625rem 0; font: 500 0.8438rem/1 var(--m); color: var(--paper); text-decoration: none; } .site-nav__menu a:hover, .site-nav__menu .current-menu-item > a { color: var(--cyan); box-shadow: 0 1px 0 var(--cyan); } .site-nav__menu .sub-menu { display: none; } /* Open now / Closed */ .open-state { display: inline-flex; align-items: center; gap: 0.5625rem; font: 500 0.7812rem/1 var(--g); color: var(--mute); white-space: nowrap; } .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #5b6e6f; } [data-state="open"] .dot { background: var(--green); animation: beat 2.8s infinite; } @keyframes beat { 0% { box-shadow: 0 0 0 0 rgb(187 239 101 / 0.5); } 70% { box-shadow: 0 0 0 0.5625rem rgb(187 239 101 / 0); } 100% { box-shadow: 0 0 0 0 rgb(187 239 101 / 0); } } .header-cta { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.6875rem 1.0625rem; border: 1px solid var(--cyan); color: var(--cyan); font: 600 0.7812rem/1 var(--g); letter-spacing: 0.06em; white-space: nowrap; text-decoration: none; } .header-cta:hover { background: var(--cyan); color: var(--ink); } .nav-toggle { display: none; min-height: 2.75rem; padding: 0.5rem 0.75rem; background: none; border: 1px solid var(--paper); color: var(--paper); font: 500 0.875rem/1 var(--m); } .nav-toggle[aria-expanded="true"] { background: var(--paper); color: var(--ink); } @media (max-width: 1080px) { .open-state { display: none; } } @media (max-width: 760px) { .nav-toggle { display: block; margin-left: auto; } /* Without JS the menu stays visible; the .js class is set inline in . */ .js .site-nav { display: none; } .site-nav { order: 5; width: 100%; margin-left: 0; } .js .site-nav.is-open { display: block; } .site-nav__menu { flex-wrap: wrap; gap: 0.5rem 1.375rem; padding: 0.75rem 0; border-top: 1px solid var(--rule); } .site-nav__menu .sub-menu { display: block; padding-left: 1rem; } } @media (max-width: 520px) { .brand { gap: 0.5625rem; } .brand__text { font-size: 1.5rem; } .brand .logo-mark { height: 2.25rem; } .site-header__inner { gap: 0.625rem 0.75rem; min-height: 0; padding-block: 0.75rem; } .header-cta { padding: 0.625rem 0.8125rem; font-size: 0.7188rem; } .nav-toggle { padding: 0.5rem 0.6875rem; font-size: 0.8125rem; } } /* ---------- Footer ---------- */ .site-footer { padding-block: clamp(2.125rem, 4.5vw, 4.75rem) 2.75rem; background: var(--ink); border-top: 1px solid var(--rule); } .wordmark { display: flex; align-items: center; gap: clamp(0.875rem, 2vw, 2rem); padding-bottom: clamp(1.25rem, 2.6vw, 2.125rem); margin-bottom: clamp(1.5rem, 3vw, 2.75rem); border-bottom: 2px solid var(--paper); } .wordmark .logo-mark { height: clamp(3.5rem, 9vw, 9.375rem); } .wordmark__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 1.375rem; margin: 0; font: 700 clamp(3.5rem, 10vw, 10.5rem)/0.85 var(--m); letter-spacing: -0.075em; } .wordmark__text > span { font: 500 clamp(0.875rem, 1.4vw, 1.25rem)/1.2 var(--m); letter-spacing: -0.02em; color: var(--mute); } .site-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(1.125rem, 3vw, 3.5rem); } .site-footer__heading { margin-bottom: 0.875rem; font: 700 clamp(1.5rem, 2.3vw, 2.125rem)/1.04 var(--m); letter-spacing: -0.055em; } .site-footer address { font-size: 0.9688rem; line-height: 1.6; color: var(--soft); } .site-footer .phone { display: inline-block; margin-top: 0.8125rem; font: 700 1.4375rem/1 var(--m); letter-spacing: -0.04em; color: var(--cyan); text-decoration: none; } .site-footer__col-title { margin-bottom: 0.75rem; font: 600 0.625rem/1.5 var(--g); letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); } .site-footer__col li { padding: 0.25rem 0; font-size: 0.9375rem; color: #c1cac5; } .site-footer__col a { text-decoration: none; } .site-footer__col a:hover { color: var(--cyan); } .colour-key { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin-top: 1rem; } .colour-key li { display: inline-flex; align-items: center; gap: 0.4375rem; font: 500 0.6875rem/1 var(--g); color: var(--mute); } .colour-key i { display: inline-block; width: 0.5625rem; height: 0.5625rem; } .site-footer__line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.625rem 1.625rem; margin-top: clamp(1.625rem, 4vw, 3.25rem); padding-top: 1.125rem; border-top: 1px solid var(--rule); font: 500 0.7188rem/1.5 var(--g); letter-spacing: 0.1em; color: var(--mute); } .site-footer__line p { margin: 0; line-height: 1.5; } .site-footer__line ul { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; } .site-footer__line a { text-decoration: none; } .site-footer__line a:hover { color: var(--cyan); } @media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .site-footer__grid { grid-template-columns: 1fr; } }