@brandlab-digital/site-next 3.9.0 → 3.11.0

package/dist/ui-kit/structure.css

@@ -714,4 +714,770 @@
     outline: none;
   }
 
+  /* 20-form.css */
+  /* Quote form, photo upload and fields: layout and behaviour only. Labels sit above fields; one column below 640 px. */
+
+  /* A size container can't take its width from its content, so it fills its parent even inside a shrink-to-fit box. */
+  [data-bl='quote-form'] {
+    display: grid;
+    gap: 1.25rem;
+    inline-size: 100%;
+    container-type: inline-size;
+  }
+  [data-bl='quote-form'][data-density='compact'] {
+    gap: 0.875rem;
+  }
+  [data-bl='quote-form'] [data-slot='row'] {
+    display: grid;
+    gap: inherit;
+    grid-template-columns: minmax(0, 1fr);
+  }
+  @media (min-width: 640px) {
+    @container (min-width: 28rem) {
+      [data-bl='quote-form'] [data-slot='row'] {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+  }
+
+  :where([data-bl='quote-form'], [data-bl='field'], [data-bl='photo-upload']) {
+    min-width: 0;
+  }
+  [data-bl='field'],
+  [data-bl='photo-upload'] {
+    display: grid;
+    gap: 0.375rem;
+    align-content: start;
+  }
+  :where([data-bl='quote-form'], [data-bl='field']) :where(input:not([type='file']), textarea, select) {
+    width: 100%;
+    min-height: 44px;
+    font: inherit;
+  }
+  :where([data-bl='quote-form'], [data-bl='field']) textarea {
+    resize: vertical;
+  }
+
+  /* The drop box: the label covers the whole box, so a tap anywhere opens the picker; the hidden input keeps focus. */
+  [data-bl='photo-upload'] [data-slot='drop'] {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem 1rem;
+    min-height: 44px;
+    padding: 0.75rem 1rem;
+    border: 1px dashed var(--bl-color-line, currentColor);
+    border-radius: var(--bl-radius-control, 0);
+    cursor: pointer;
+  }
+  [data-bl='photo-upload'] [data-slot='drop'][data-disabled='true'] {
+    cursor: not-allowed;
+  }
+  [data-bl='photo-upload'] [data-slot='drop'][data-state='busy'] {
+    cursor: progress;
+  }
+  [data-bl='photo-upload'] [data-slot='drop']:has(input:focus-visible) {
+    outline: 2px solid var(--bl-color-focus, currentColor);
+    outline-offset: 3px;
+  }
+  [data-bl='photo-upload'] [data-slot='drop'] [data-slot='label'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: inherit;
+  }
+  [data-bl='photo-upload'] [data-slot='drop'] [data-slot='label']::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+  [data-bl='photo-upload'] [data-slot='dropIcon'] svg {
+    width: 1.5em;
+    height: 1.5em;
+  }
+  [data-bl='photo-upload'] [data-slot='photos'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl='photo-upload'] [data-slot='photo'] {
+    position: relative;
+  }
+  [data-bl='photo-upload'] [data-slot='thumb'] {
+    display: block;
+    width: 4rem;
+    height: 4rem;
+    object-fit: cover;
+    border-radius: var(--bl-radius-control, 0);
+  }
+  [data-bl='photo-upload'] [data-slot='remove'] {
+    position: absolute;
+    inset-block-start: -0.75rem;
+    inset-inline-end: -0.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+  }
+  [data-bl='photo-upload'] [data-slot='remove'] svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  [data-bl='quote-form'] [data-slot='submit'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 44px;
+    justify-self: start;
+  }
+  [data-bl='quote-form'][data-variant='card'] [data-slot='submit'],
+  [data-bl='quote-form'][data-variant='inline'] [data-slot='submit'] {
+    justify-self: stretch;
+  }
+  [data-bl='quote-form'] [data-slot='submit'][data-state='busy'] {
+    cursor: progress;
+  }
+  [data-bl='quote-form'] :where([data-slot='consent'], [data-slot='status']) {
+    margin: 0;
+  }
+  /* Empty, the status region stays in the accessibility tree (visually hidden), so its next message is announced. */
+  [data-bl='quote-form'] [data-slot='status']:empty {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* 21-dialog.css */
+  /* Dialog: a native modal. The page behind doesn't scroll; the body scrolls inside the panel on short screens. */
+
+  [data-bl='dialog'] {
+    width: min(40rem, calc(100% - 2 * var(--bl-gutter, 1rem)));
+    max-height: calc(100dvh - 2rem);
+    padding: 0;
+    border: 0;
+    overflow: auto;
+    background: var(--bl-color-surface, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+    border-radius: var(--bl-radius-card, 0);
+    box-shadow: var(--bl-shadow-overlay, none);
+  }
+  :root:has([data-bl='dialog'][open]) {
+    overflow: hidden;
+  }
+  [data-bl='dialog'] [data-slot='header'] {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem var(--bl-gutter, 1.25rem) 0;
+  }
+  [data-bl='dialog'] [data-slot='title'] {
+    margin: 0;
+  }
+  [data-bl='dialog'] [data-slot='close'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+  }
+  [data-bl='dialog'] [data-slot='close'] svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  [data-bl='dialog'] [data-slot='body'] {
+    padding: 1rem var(--bl-gutter, 1.25rem) var(--bl-gutter, 1.25rem);
+  }
+
+  /* 30-reviews.css */
+  /* S7 reviews band and the rating chip: layout only. Colours, fonts and shapes come from each site's skin. */
+
+  [data-bl='rating-chip'] {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem 0.5rem;
+    margin: 0;
+  }
+  [data-bl='rating-chip'] > [data-slot='source'] {
+    display: inline-flex;
+    align-items: center;
+    min-height: 24px;
+  }
+
+  [data-bl-section='reviews'] {
+    container: bl-reviews / inline-size;
+    isolation: isolate;
+  }
+  [data-bl-section='reviews'] :where(ul[data-slot='list'], figure, blockquote, blockquote p, [data-slot='disclosure']) {
+    margin: 0;
+  }
+  [data-bl-section='reviews'] [data-slot='top'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 1.5rem 2.5rem;
+  }
+  [data-bl-section='reviews'][data-align='center'] [data-slot='top'] {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  [data-bl-section='reviews'] [data-slot='list'] {
+    display: grid;
+    gap: 1.25rem;
+    margin-top: 2.5rem;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='reviews'] [data-slot='item'] > figure {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    height: 100%;
+  }
+  [data-bl-section='reviews'] [data-slot='quote'] {
+    flex: 1;
+  }
+  /* The reviewer's own line breaks stay. */
+  [data-bl-section='reviews'] [data-slot='quote'] p {
+    white-space: pre-line;
+  }
+  [data-bl-section='reviews'] [data-slot='more'] {
+    margin-top: 0.5rem;
+  }
+  [data-bl-section='reviews'] [data-slot='more'] > summary {
+    min-height: 24px;
+    cursor: pointer;
+  }
+  [data-bl-section='reviews'] [data-slot='more'][open] > summary {
+    margin-bottom: 0.5rem;
+  }
+  [data-bl-section='reviews'] [data-slot='author'] {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: 0.75rem;
+    align-items: center;
+  }
+  [data-bl-section='reviews'] [data-slot='avatar'] {
+    grid-row: span 2;
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+  }
+  [data-bl-section='reviews'] [data-slot='author'] > :not([data-slot='avatar']) {
+    grid-column: 2;
+  }
+  [data-bl-section='reviews'] [data-slot='author']:not(:has([data-slot='avatar'])) {
+    grid-template-columns: 1fr;
+  }
+  [data-bl-section='reviews'] [data-slot='author']:not(:has([data-slot='avatar'])) > * {
+    grid-column: 1;
+  }
+  [data-bl-section='reviews'] [data-slot='disclosure'] {
+    margin-top: 2rem;
+  }
+  [data-bl-section='reviews'][data-align='center'] [data-slot='disclosure'] {
+    text-align: center;
+  }
+  [data-bl-section='reviews'] [data-slot='profileLink'] {
+    display: inline-flex;
+    align-items: center;
+    min-height: 24px;
+  }
+
+  /* The reviews page: a wall of every review, in balanced columns. */
+  [data-bl-section='reviews'][data-variant='wall'] [data-slot='list'] {
+    display: block;
+    columns: 1;
+    column-gap: 1.25rem;
+  }
+  [data-bl-section='reviews'][data-variant='wall'] [data-slot='item'] {
+    break-inside: avoid;
+    margin-bottom: 1.25rem;
+  }
+
+  @container bl-reviews (min-width: 768px) {
+    [data-bl-section='reviews']:is([data-columns='2'], [data-columns='3']) [data-slot='list'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    [data-bl-section='reviews'][data-variant='feature'] [data-slot='list'] {
+      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+      align-items: start;
+    }
+    [data-bl-section='reviews'][data-variant='feature'] [data-slot='item'][data-lead='true'] {
+      grid-row: span 2;
+    }
+    [data-bl-section='reviews'][data-variant='wall']:is([data-columns='2'], [data-columns='3']) [data-slot='list'] {
+      columns: 2;
+    }
+  }
+  @container bl-reviews (min-width: 1024px) {
+    [data-bl-section='reviews'][data-columns='3']:not([data-variant='feature']) [data-slot='list'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    [data-bl-section='reviews'][data-variant='wall'][data-columns='3'] [data-slot='list'] {
+      columns: 3;
+    }
+  }
+
+  /* 31-cta.css */
+  /* S8 CTA band: layout only. The photo variant's backdrop fills the band behind the content. */
+
+  [data-bl-section='cta'] {
+    container: bl-cta / inline-size;
+    isolation: isolate;
+  }
+  [data-bl-section='cta'] :where(h2, p) {
+    margin: 0;
+  }
+  [data-bl-section='cta'] > [data-slot='media'] {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  [data-bl-section='cta'] > [data-slot='media'] :where(img, picture, video) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  [data-bl-section='cta'] [data-slot='content'] {
+    display: grid;
+    justify-items: start;
+    align-content: start;
+    gap: 1rem;
+  }
+  [data-bl-section='cta'][data-align='center'] [data-slot='content'] {
+    justify-items: center;
+    text-align: center;
+  }
+  [data-bl-section='cta'] [data-slot='actions'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem 1.25rem;
+    margin-top: 0.5rem;
+  }
+  [data-bl-section='cta'][data-align='center'] [data-slot='actions'] {
+    justify-content: center;
+  }
+  [data-bl-section='cta'][data-variant='form'] > [data-slot='inner'] {
+    display: grid;
+    gap: 2.5rem;
+  }
+
+  @container bl-cta (min-width: 1024px) {
+    [data-bl-section='cta'][data-variant='form'] > [data-slot='inner'] {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
+      align-items: start;
+      gap: 4rem;
+    }
+  }
+
+  /* 32-footer.css */
+  /* S27 footer: layout only. Tone (light, ink or the photo panel) comes from each site's skin. */
+
+  [data-bl='footer'] {
+    position: relative;
+    isolation: isolate;
+    container: bl-footer / inline-size;
+  }
+  [data-bl='footer'] :where(ul) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl='footer'] :where(p, h2) {
+    margin: 0;
+  }
+  [data-bl='footer'] > [data-slot='decoration'] {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    pointer-events: none;
+  }
+  [data-bl='footer'] [data-slot='panel'] {
+    position: relative;
+    isolation: isolate;
+  }
+  [data-bl='footer'] [data-slot='panel'] > [data-slot='media'] {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  [data-bl='footer'] [data-slot='panel'] > [data-slot='media'] :where(img, picture) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  [data-bl='footer'] [data-slot='inner'] {
+    display: grid;
+    gap: 2.5rem;
+    max-width: var(--bl-container, 80rem);
+    margin-inline: auto;
+    padding: var(--bl-space-section, 4rem) var(--bl-gutter, 1.25rem) 3rem;
+  }
+  [data-bl='footer'] [data-slot='brand'] {
+    display: grid;
+    align-content: start;
+    gap: 1.25rem;
+  }
+  [data-bl='footer'] [data-slot='logo'] {
+    display: inline-flex;
+    justify-self: start;
+  }
+  [data-bl='footer'] [data-slot='logo'] img {
+    display: block;
+    width: auto;
+    height: var(--bl-footer-logo-h, 56px);
+  }
+  [data-bl='footer'] [data-slot='licences'] {
+    display: grid;
+    gap: 0.25rem;
+  }
+  /* WCAG 2.5.8: every footer link is at least 24 px tall without relying on the spacing exception. */
+  [data-bl='footer'] [data-slot='licenceLink'] {
+    display: inline-flex;
+    align-items: center;
+    min-height: 24px;
+  }
+  [data-bl='footer'] [data-slot='social'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  [data-bl='footer'] [data-slot='socialLink'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+  }
+  [data-bl='footer'] [data-slot='social'] svg {
+    width: 1.05rem;
+    height: 1.05rem;
+  }
+  [data-bl='footer'] [data-slot='contact'] {
+    display: grid;
+    justify-items: start;
+    gap: 0.25rem;
+  }
+  [data-bl='footer'] [data-slot='contact'] > a {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+  }
+  [data-bl='footer'] [data-slot='columns'] {
+    display: grid;
+    gap: 2rem;
+  }
+  [data-bl='footer'] [data-slot='columns'][data-accordion='true'] {
+    gap: 0;
+  }
+  [data-bl='footer'] [data-slot='column'] > [data-slot='list'] {
+    display: grid;
+    gap: 0.15rem;
+    margin-top: 0.75rem;
+  }
+  [data-bl='footer'] [data-slot='column'] > [data-slot='list'] a {
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+  }
+  [data-bl='footer'] [data-slot='toggle'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 52px;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    text-align: start;
+    text-transform: inherit;
+    cursor: pointer;
+  }
+  [data-bl='footer'] [data-slot='toggle'] svg {
+    width: 1.1rem;
+    height: 1.1rem;
+    transition: rotate 150ms ease;
+  }
+  [data-bl='footer'] [data-slot='toggle'][aria-expanded='true'] svg {
+    rotate: 180deg;
+  }
+  [data-bl='footer'] [data-slot='columns'][data-accordion='true'] [data-slot='column'] > [data-slot='list'] {
+    margin-top: 0;
+    padding-bottom: 1rem;
+  }
+  [data-bl='footer'] [data-slot='bottomInner'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem 1.5rem;
+    max-width: var(--bl-container, 80rem);
+    margin-inline: auto;
+    padding: 1.25rem var(--bl-gutter, 1.25rem);
+  }
+  /* The ABN never breaks across lines on a phone. */
+  [data-bl='footer'] [data-slot='legal'] > span:not([aria-hidden]) {
+    white-space: nowrap;
+  }
+  [data-bl='footer'] [data-slot='policies'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem 1.25rem;
+  }
+  [data-bl='footer'] [data-slot='policyLink'] {
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+  }
+
+  @container bl-footer (min-width: 640px) {
+    [data-bl='footer'] [data-slot='columns'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  @container bl-footer (min-width: 1024px) {
+    [data-bl='footer'] [data-slot='inner'] {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
+      gap: 4rem;
+    }
+  }
+
+  /* 33-faqs.css */
+  /* Accordion and FAQs: native <details name> disclosures (one open at a time); two columns from 48rem of the section. */
+
+  [data-bl='accordion'] > [data-slot='item'] > [data-slot='summary'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    min-height: 44px;
+    cursor: pointer;
+    list-style: none;
+  }
+  [data-bl='accordion'] > [data-slot='item'] > [data-slot='summary']::-webkit-details-marker {
+    display: none;
+  }
+  [data-bl='accordion'] [data-slot='marker'] svg {
+    width: 1.25em;
+    height: 1.25em;
+    transition: transform 150ms ease;
+  }
+  [data-bl='accordion'] > [data-slot='item'][open] > [data-slot='summary'] [data-slot='marker'] svg {
+    transform: rotate(180deg);
+  }
+
+  [data-bl-section='faqs'] {
+    container-type: inline-size;
+  }
+  [data-bl-section='faqs'] [data-slot='columns'] {
+    display: grid;
+    gap: 0 calc(var(--bl-gutter, 1.25rem) * 2);
+  }
+  @container (min-width: 48rem) {
+    [data-bl-section='faqs'] [data-slot='columns'][data-columns='2'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      align-items: start;
+    }
+  }
+
+  /* 34-prices.css */
+  /* Price table and price guide. Below 40rem of its own width the table stacks its rows; its explicit roles keep the
+     table semantics, and each cell shows its column label (aria-hidden) for sighted readers. Lists styled without
+     bullets carry role="list", so Safari keeps announcing them as lists. */
+
+  [data-bl='price-table'] {
+    container-type: inline-size;
+  }
+  [data-bl='price-table'] > table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  [data-bl='price-table'] caption,
+  [data-bl='price-table'] :where(th, td) {
+    text-align: start;
+    vertical-align: top;
+  }
+  [data-bl='price-table'] [data-slot='label'] {
+    display: none;
+  }
+  :where([data-bl='price-table'], [data-bl-section='price-guide']) [data-slot='range'] {
+    white-space: nowrap;
+  }
+  @container (max-width: 40rem) {
+    [data-bl='price-table'] :where(table, tbody, tr, th, td) {
+      display: block;
+    }
+    [data-bl='price-table'] thead {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    [data-bl='price-table'] [data-slot='label'] {
+      display: block;
+    }
+  }
+
+  [data-bl-section='price-guide'] :where([data-slot='cards'], [data-slot='bands']) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='price-guide'] [data-slot='cards'] {
+    display: grid;
+    gap: var(--bl-gutter, 1.25rem);
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+  }
+  [data-bl-section='price-guide'] [data-slot='bands'] {
+    display: grid;
+    gap: 0.75rem;
+  }
+  [data-bl-section='price-guide'] [data-slot='band'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.25rem 1rem;
+  }
+  [data-bl-section='price-guide'] [data-slot='band'] > :where([data-slot='includes'], [data-slot='excludes']) {
+    flex-basis: 100%;
+  }
+
+  /* 35-proof.css */
+  /* Proof strip: one wrapping row (inline) or a grid of tiles. */
+
+  [data-bl-section='proof-strip'] [data-slot='list'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem 2rem;
+  }
+  [data-bl-section='proof-strip'][data-variant='tiles'] [data-slot='list'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
+    align-items: stretch;
+    gap: var(--bl-gutter, 1.25rem);
+  }
+  [data-bl-section='proof-strip'] [data-slot='item'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem 0.5rem;
+  }
+  [data-bl-section='proof-strip'] [data-slot='icon'] svg {
+    width: 1.5em;
+    height: 1.5em;
+  }
+  [data-bl-section='proof-strip'] [data-slot='logos'] {
+    margin-top: 1.5rem;
+  }
+
+  /* 36-page-header.css */
+  /* Page header. The photo variant puts the site's image and its scrim behind the text, edge to edge. */
+
+  [data-bl-section='page-header'][data-variant='photo'] {
+    isolation: isolate;
+    overflow: hidden;
+  }
+  [data-bl-section='page-header'][data-variant='photo'] > [data-slot='inner'] {
+    position: static;
+  }
+  [data-bl-section='page-header'] :where([data-slot='media'], [data-slot='scrim']) {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+  }
+  [data-bl-section='page-header'] [data-slot='media'] :where(img, picture, video) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* 37-contact.css */
+  /* Contact block: the form and the details side by side from 48rem of the section (form at the start by default). */
+
+  [data-bl-section='contact'] {
+    container-type: inline-size;
+  }
+  [data-bl-section='contact'] > [data-slot='inner'] {
+    display: grid;
+    gap: calc(var(--bl-gutter, 1.25rem) * 2);
+  }
+  [data-bl-section='contact'] [data-slot='list'] {
+    margin: 0;
+  }
+  [data-bl-section='contact'] [data-slot='value'] {
+    margin: 0 0 1rem;
+  }
+  [data-bl-section='contact'] [data-slot='line'] {
+    display: block;
+  }
+  @container (min-width: 48rem) {
+    [data-bl-section='contact'] > [data-slot='inner'] {
+      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+      align-items: start;
+    }
+    [data-bl-section='contact'][data-form-side='end'] > [data-slot='inner'] {
+      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    }
+    [data-bl-section='contact'][data-form-side='end'] [data-slot='form'] {
+      order: 2;
+    }
+  }
+
+  /* 38-sequence.css */
+  /* Section tones assigned by SectionSequence, from the site's tokens. The photo tone takes its look from its image. */
+
+  [data-bl-section][data-tone='canvas'] {
+    background-color: var(--bl-color-canvas, transparent);
+  }
+  [data-bl-section][data-tone='surface'] {
+    background-color: var(--bl-color-surface, transparent);
+  }
+  [data-bl-section][data-tone='band'] {
+    background-color: var(--bl-color-band, transparent);
+    color: var(--bl-color-on-band, inherit);
+  }
+
 }