/* * DII site shell presentation (P2-WP-07 DII Homepage Composition; header and * footer reworked in Approved-Design Conformance): base type, skip link, the * two-row header, primary navigation and the footer framework. Site-wide, so * it is loaded on every template; the homepage sections live in * dii-homepage.css. * * Every rule is scoped under `.dii-site` (added to by the theme) so DII * presentation outranks the GeneratePress base without !important. * * Only DII tokens (dii-tokens.css) and, where present, the shared Foundation * tokens are used, and every Foundation reference carries a fallback so the * shell stays usable when the packaged Foundation CSS is absent. Tints and * on-dark text are derived from the approved brand values with color-mix(); * no new brand colour, no external font and no font file: Inter is named by * the DII font stack and falls back to the system stack. */ *, *::before, *::after { box-sizing: border-box; } body.dii-site { margin: 0; color: var(--dii-color-text-primary); background: white; font-family: var(--dii-font-family-base); font-size: var(--cdi-font-size-body, 1rem); line-height: var(--cdi-line-height-body, 1.5); -webkit-font-smoothing: antialiased; } .dii-site img, .dii-site svg { max-width: 100%; } .dii-site a { color: var(--dii-color-link); } .dii-site a:focus-visible, .dii-site main:focus-visible, .dii-site input:focus-visible, .dii-site button:focus-visible { outline: 2px solid var(--dii-color-focus); outline-offset: 2px; } .dii-site .skip-link { position: absolute; top: 0; left: 0; padding: var(--cdi-spacing-sm, 0.5rem) var(--cdi-spacing-md, 1rem); transform: translateY(-100%); color: var(--dii-color-brand-primary); background: white; font-weight: 700; } .dii-site .skip-link:focus { transform: translateY(0); z-index: 100; } /* Header: brand and utility row, then the navigation row */ .dii-site .site-header { background: white; border-bottom: 1px solid var(--dii-color-border-subtle); } .dii-site .site-header__inner, .dii-site .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cdi-spacing-sm, 0.5rem) var(--cdi-spacing-lg, 1.5rem); max-width: var(--cdi-grid-max-content-width, 75rem); margin: 0 auto; padding: var(--cdi-spacing-md, 1rem); } .dii-site .site-header__top .site-header__inner { padding-top: var(--cdi-spacing-md, 1rem); padding-bottom: var(--cdi-spacing-md, 1rem); } .dii-site .site-branding__link { color: var(--dii-color-brand-primary); font-size: var(--cdi-font-size-h4, 1.5rem); font-weight: 800; letter-spacing: -0.02em; text-decoration: none; } .dii-site .site-header__actions { display: flex; align-items: center; gap: var(--cdi-spacing-md, 1rem); margin: 0 0 0 auto; padding: 0; list-style: none; } .dii-site .site-header__action { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--dii-color-brand-primary); font-weight: 600; text-decoration: none; } .dii-site a.site-header__action--subscribe { padding: 0 var(--cdi-spacing-lg, 1.5rem); border-radius: 0.375rem; color: white; background: var(--dii-color-brand-secondary); } .dii-site .site-header__nav { border-top: 1px solid var(--dii-color-border-subtle); background: white; } .dii-site .site-header__nav .site-header__inner { padding-top: 0; padding-bottom: 0; } .dii-site .site-header nav ul, .dii-site .site-footer nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--cdi-spacing-xl, 2rem); margin: 0; padding: 0; list-style: none; } .dii-site .site-header nav a { display: inline-flex; align-items: center; min-height: 3rem; border-bottom: 3px solid transparent; color: var(--dii-color-brand-primary); font-size: var(--cdi-font-size-body-small, 0.875rem); font-weight: 600; text-decoration: none; } .dii-site .site-header nav a:hover { border-bottom-color: var(--dii-color-brand-secondary); color: var(--dii-color-brand-secondary); } .dii-site .site-header nav a[aria-current='page'] { border-bottom-color: var(--dii-color-brand-secondary); color: var(--dii-color-brand-secondary); } /* Menu toggle: shown only when the navigation script is running */ .dii-site .site-menu-toggle { display: inline-flex; align-items: center; gap: var(--cdi-spacing-sm, 0.5rem); min-height: 2.75rem; padding: 0 var(--cdi-spacing-md, 1rem); border: 1px solid var(--dii-color-border-subtle); border-radius: 0.375rem; color: var(--dii-color-brand-primary); background: white; font: inherit; font-weight: 600; cursor: pointer; } .dii-site .site-menu-toggle[hidden] { display: none; } .dii-site .site-menu-toggle__icon, .dii-site .site-menu-toggle__icon::before, .dii-site .site-menu-toggle__icon::after { display: block; width: 1.125rem; height: 0.125rem; border-radius: 0.125rem; background: currentcolor; } .dii-site .site-menu-toggle__icon { position: relative; } .dii-site .site-menu-toggle__icon::before, .dii-site .site-menu-toggle__icon::after { content: ''; position: absolute; left: 0; } .dii-site .site-menu-toggle__icon::before { top: -0.3125rem; } .dii-site .site-menu-toggle__icon::after { top: 0.3125rem; } /* Footer: a dark institutional framework */ .dii-site .site-footer { margin-top: 0; border: 0; color: color-mix(in srgb, white 82%, var(--dii-color-brand-primary)); background: var(--dii-color-brand-primary); } .dii-site .site-footer__inner { align-items: flex-start; gap: var(--cdi-spacing-xl, 2rem) var(--cdi-spacing-3xl, 4rem); padding-top: var(--cdi-spacing-2xl, 3rem); padding-bottom: var(--cdi-spacing-2xl, 3rem); } .dii-site .site-footer__name { margin: 0; color: white; font-size: var(--cdi-font-size-h4, 1.5rem); font-weight: 800; letter-spacing: -0.02em; } .dii-site .site-footer__tagline { margin: var(--cdi-spacing-sm, 0.5rem) 0 0; color: color-mix(in srgb, white 82%, var(--dii-color-brand-primary)); } .dii-site .site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--cdi-spacing-xl, 2rem) var(--cdi-spacing-3xl, 4rem); } .dii-site .site-footer__title { margin: 0 0 var(--cdi-spacing-md, 1rem); color: color-mix(in srgb, var(--dii-color-brand-secondary) 45%, white); font-size: var(--cdi-font-size-body-small, 0.875rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .dii-site .site-footer nav ul { flex-direction: column; gap: 0; } .dii-site .site-footer nav a { display: inline-block; padding: var(--cdi-spacing-xs, 0.25rem) 0; min-height: 2.25rem; color: white; font-size: var(--cdi-font-size-body-small, 0.875rem); text-decoration: none; } .dii-site .site-footer nav a:hover { text-decoration: underline; } .dii-site .site-footer a:focus-visible { outline-color: color-mix(in srgb, var(--dii-color-brand-secondary) 45%, white); } .dii-site .site-footer__meta { border-top: 1px solid color-mix(in srgb, white 16%, transparent); } .dii-site .site-footer__meta ul { display: flex; flex-wrap: wrap; gap: var(--cdi-spacing-md, 1rem) var(--cdi-spacing-lg, 1.5rem); max-width: var(--cdi-grid-max-content-width, 75rem); margin: 0 auto; padding: var(--cdi-spacing-md, 1rem); list-style: none; } .dii-site .site-footer__meta a { color: white; } /* Small screens: the navigation collapses behind the menu button once the script runs */ @media (min-width: 64rem) { .dii-site .site-menu-toggle { display: none; } .dii-site .site-footer nav ul { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: var(--cdi-spacing-xl, 2rem); } } @media (max-width: 63.99rem) { .dii-site .site-header__top .site-header__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'brand search actions' 'toggle toggle toggle'; align-items: center; gap: var(--cdi-spacing-md, 1rem); } .dii-site .site-header__top .site-header__inner:not(:has(.site-header__actions)) { grid-template-areas: 'brand search search' 'toggle toggle toggle'; } .dii-site .site-branding { grid-area: brand; } .dii-site .site-header .site-search { grid-area: search; max-width: none; margin: 0; } .dii-site .site-header__actions { grid-area: actions; margin: 0; } .dii-site .site-header .site-menu-toggle { grid-area: toggle; width: 100%; justify-content: flex-start; } .dii-site .site-header .site-logo { max-width: 18rem; } .dii-site .site-footer nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cdi-spacing-lg, 1.5rem); } .dii-js .dii-site .site-header__nav, .dii-js.dii-site .site-header__nav { display: none; } .dii-js .dii-site .site-header__nav.is-open, .dii-js.dii-site .site-header__nav.is-open { display: block; } .dii-site .site-header nav ul { flex-direction: column; gap: 0; } .dii-site .site-header nav a { width: 100%; min-height: 2.75rem; border-bottom: 1px solid var(--dii-color-border-subtle); } .dii-site .site-header nav li:last-child a { border-bottom: 0; } } @media (max-width: 47.99rem) { .dii-site .site-header__top .site-header__inner { padding-top: var(--cdi-spacing-md, 1rem); } .dii-site .site-header__top .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'brand brand' 'search actions' 'toggle toggle'; } .dii-site .site-header__top .site-header__inner:not(:has(.site-header__actions)) { grid-template-areas: 'brand brand' 'search search' 'toggle toggle'; } .dii-site .site-header .site-logo { max-width: 22rem; } .dii-site .site-branding { flex-wrap: wrap; } .dii-site .site-branding__link { font-size: var(--cdi-font-size-h5, 1.25rem); } .dii-site .site-footer__inner { flex-direction: column; } } /* Screen-reader-only text (GeneratePress also defines this class; DII does not rely on it) */ .dii-site .screen-reader-text { position: absolute; width: 0.0625rem; height: 0.0625rem; margin: -0.0625rem; overflow: hidden; clip-path: inset(50%); } /* Brand: the approved logo asset when present, otherwise the text identity */ .dii-site .site-branding { display: flex; align-items: center; gap: var(--cdi-spacing-sm, 0.5rem); min-width: 0; } .dii-site .site-branding__link--logo { display: block; line-height: 0; } .dii-site .site-logo { display: block; width: 100%; max-width: 22rem; height: auto; } .dii-site .site-environment { padding: 0.125rem 0.5rem; border: 1px solid var(--dii-color-border-subtle); border-radius: 62.4375rem; color: var(--dii-color-text-secondary); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.4; } /* Header search: WordPress-native GET form, no script */ .dii-site .site-search { position: relative; flex: 1 1 20rem; max-width: 28rem; margin: 0 auto; } .dii-site .site-search__input { width: 100%; min-height: 2.75rem; padding: 0 3rem 0 var(--cdi-spacing-md, 1rem); border: 1px solid var(--dii-color-border-subtle); border-radius: 0.375rem; color: var(--dii-color-text-primary); background: white; font: inherit; -webkit-appearance: none; appearance: none; } .dii-site .site-search__input::placeholder { color: var(--dii-color-text-secondary); opacity: 1; } .dii-site .site-search__button { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 2.75rem; padding: 0; border: 0; border-radius: 0 0.375rem 0.375rem 0; color: var(--dii-color-brand-primary); background: transparent; cursor: pointer; } .dii-site .site-search__icon { display: block; width: 1.25rem; height: 1.25rem; } .dii-site .site-search__icon svg { display: block; width: 100%; height: 100%; } /* Search results (native search, minimal listing) */ .dii-site .dii-search { max-width: var(--cdi-grid-max-content-width, 75rem); margin: 0 auto; padding: var(--cdi-spacing-2xl, 3rem) var(--cdi-spacing-md, 1rem); } .dii-site .dii-search__title { margin: 0 0 var(--cdi-spacing-xl, 2rem); color: var(--dii-color-brand-primary); font-size: var(--cdi-font-size-h2, 2.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .dii-site .dii-search__list { display: grid; gap: 0; max-width: 48rem; margin: 0; padding: 0; list-style: none; } .dii-site .dii-search__item { padding: var(--cdi-spacing-md, 1rem) 0; border-top: 1px solid var(--dii-color-border-subtle); } .dii-site .dii-search__item-title { margin: 0; font-size: var(--cdi-font-size-h5, 1.25rem); font-weight: 700; line-height: 1.3; } .dii-site .dii-search__item-title a { color: var(--dii-color-brand-primary); text-decoration: none; } .dii-site .dii-search__item-title a:hover { color: var(--dii-color-brand-secondary); text-decoration: underline; } .dii-site .dii-search__item-meta { margin: 0.25rem 0 0; color: var(--dii-color-text-secondary); font-size: var(--cdi-font-size-body-small, 0.875rem); } .dii-site .dii-search__item-excerpt { margin: 0.5rem 0 0; color: var(--dii-color-text-secondary); } .dii-site .dii-search__empty { margin: 0; color: var(--dii-color-text-secondary); }