/* ============================================================================= dns-skin.css Components for dubainotaryservices.ae. Business rendering. REWRITTEN 4 SEPTEMBER 2026 against _design-spec-business.md, after the client rejected the editorial layout. The vocabulary the builder emits is unchanged (gutter, roll, docket, ruling, matrix, parallel, openqa, leaf), so every page rebuilds without a markup change. What changed is how each one renders: a section head made of a numeral chip, an eyebrow pill and a large heading; registers and checklists as card grids; tables in a rounded box with a dark header row; questions as accordion cards; lists as check items. No margin numerals, no ruled rows, no hairline only layouts. LOAD ORDER MATTERS. This file is enqueued after dns-tokens.css and is organised in four layers, in this order and no other: LAYER 1 region defaults, written in :where() at ZERO specificity LAYER 2 layout primitives, including the measure grid LAYER 3 components, at ordinary specificity LAYER 4 band scoped overrides, at (0,2,0) WHY THE LAYERS EXIST On privatenotaryindubai.ae the same bug shipped seven times: a region rule written at (0,3,1) silently outranked the component inside it at (0,1,0), so a footer default repainted a button, a post-footer default underlined a button, and a band default repainted grey help text white on a white card. The fix is structural, not case by case. A region default can never outrank a component if the region default has no specificity at all. So: WRITE :where(.dns-endpaper) a (0,0,0) NEVER .dns-endpaper .dns-note a (0,3,1) Layer 4 is the one deliberate exception. It must beat components, so it is written as a descendant of .dns-band at (0,2,0) against the component's (0,1,0). That is a real specificity win, not an !important. FOUR MORE RULES THAT ARE NOT NEGOTIABLE 1. Every interactive component states colour AND background together on every single state. A state that sets only colour inherits whatever background the last override happened to leave behind. 2. A modifier selector carries the block class too: .dns-band--dark.dns-band h2, never .dns-band--dark h2. Without it the two rules tie on specificity and source order decides, which is how white headings turned ink on an ink band. 3. Never style a button by position. Not :first-child, not "+ a". Style it by its own class. 4. Never !important to win an author versus author fight. It only moves the argument up a level, and the next rule that needs to win then needs one as well. NO max-inline-size ON TEXT. Not on a paragraph, a heading or a list item, anywhere in this file. The grid track sets the measure. Search for it: the only occurrence is on .dns-wrap, which is a container. The same goes for inline-size and width: a text element is never capped, a track is. THE MEASURE GRID A section's .dns-wrap, and a gutter's body, are two track grids: minmax(0, 62ch) then minmax(0, 1fr). Headings, paragraphs and ordered lists sit in the first track, so their measure is 62ch without any cap on the text. Modules (a card grid, a table, a register, a check list) span both tracks. Nothing is placed by auto flow, because auto flow would drop the first module beside the last paragraph. ========================================================================== */ /* ============================================================================= LAYER 1 Region defaults, zero specificity ========================================================================== */ /* NOT :where(body), and this is the one deliberate exception in Layer 1. :where() zeroes everything inside it INCLUDING the element selector, so :where(body) computes to (0,0,0) and loses to GeneratePress's own inline `body { background: var(--base-2) }` at (0,0,1), whatever the source order. Measured on the live site after the first deploy: body rendered #F7F8F9 and the system sans instead of #EFEBEF and Literata, while every component was already correct. The zero specificity convention exists so a REGION default cannot outrank a COMPONENT inside it. The base rule is not a region default. It is the base, and its job is to beat the parent theme. At (0,0,1) it ties with GeneratePress and wins on source order, which the enqueue dependency chain in inc/assets.php already guarantees. */ body { background: var(--dns-surface); color: var(--dns-text); font-family: var(--dns-font-text); font-size: var(--dns-text-base); line-height: var(--dns-leading-normal); } /* GeneratePress sets the family on form controls too, in `body, button, input, select, textarea` at (0,0,1). Native controls do not inherit font-family on their own, so without this the wizard fields would silently keep the parent theme's system stack while everything around them used Literata. Same specificity, later in the cascade. */ button, input, select, textarea { font-family: inherit; font-size: inherit; } /* GeneratePress's footer.php prints a bare
wrapper around whatever generate_footer outputs, so our colophon renders inside it. That is a wrapper, not a second footer, and unhooking cannot remove it because it is template markup rather than a hooked callback. Neutralised so it cannot contribute padding or a background of its own. */ .site-footer { background: transparent; padding: 0; margin: 0; } :where(body) p, :where(body) ul, :where(body) ol { margin-block: 0 var(--dns-s4); } :where(body) p:last-child, :where(body) ul:last-child, :where(body) ol:last-child { margin-block-end: 0; } :where(body) ul, :where(body) ol { padding-inline-start: 1.15em; } :where(body) li { margin-block-end: var(--dns-s2); } :where(body) h1, :where(body) h2, :where(body) h3, :where(body) h4, :where(body) h5, :where(body) h6 { font-family: var(--dns-font-display); font-weight: var(--dns-weight-bold); line-height: var(--dns-leading-snug); letter-spacing: 0; text-wrap: balance; color: var(--dns-ink); margin-block: 0 var(--dns-s4); } :where(body) h1 { font-size: var(--dns-text-4xl); line-height: var(--dns-leading-tight); letter-spacing: -0.02em; } :where(body) h2 { font-size: var(--dns-text-2xl); } :where(body) h3 { font-size: var(--dns-text-xl); } :where(body) h4 { font-size: var(--dns-text-lg); } :where(body) a { color: var(--dns-action); background: transparent; } :where(body) a:hover { color: var(--dns-action-hover); background: transparent; } :where(body) strong, :where(body) b { font-weight: var(--dns-weight-bold); } /* An author rule, on purpose. The user agent stylesheet's [hidden] loses to any author display declaration, so a component that sets display:flex un-hides its own hidden children. On site 1 that is exactly what put Continue and Send enquiry side by side in the wizard. This is at (0,1,0) so a component cannot accidentally beat it with a bare element selector. */ [hidden] { display: none; } /* Focus is never signalled by colour alone, and never removed. */ :where(body) :focus-visible { outline: var(--dns-focus-width) solid var(--dns-focus); outline-offset: var(--dns-focus-offset); } :where(body) ::selection { background: var(--dns-plum); color: var(--dns-leaf); } .dns-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================================= LAYER 2 Layout primitives ========================================================================== */ /* The only max-inline-size in this theme, and it is on a container. */ .dns-wrap { max-inline-size: var(--dns-wrap); margin-inline: auto; padding-inline: var(--dns-wrap-pad); } .dns-section { padding-block: var(--dns-section-y); } .dns-section--act.dns-section { padding-block: var(--dns-section-y-act); } /* --- the measure grid ---------------------------------------------------- Two tracks. Text lives in the first, which is at most 62ch wide, and a module spans both. Every child is placed explicitly: the first rule puts everything on the full span, the second pulls the text elements back into track one. With display: contents on the core/group wrapper the real children are the grid items. The inner container is assumed, as it is everywhere else in the theme: it is what core/group renders on this site. ------------------------------------------------------------------------ */ .dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap { display: grid; grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); column-gap: var(--dns-s6); align-content: start; min-inline-size: 0; } .dns-gutter__body > .wp-block-group__inner-container, .dns-section > .wp-block-group__inner-container > .dns-wrap > .wp-block-group__inner-container { display: contents; } :where(.dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap) > :where(.wp-block-group__inner-container) > * { grid-column: 1 / -1; min-inline-size: 0; } :where(.dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap) > :where(.wp-block-group__inner-container) > :where(h1, h2, h3, h4, h5, h6, p, ol, blockquote, .dns-form, .dns-drop) { grid-column: 1; } /* The section head. A large heading, then one lead paragraph a step up. The roll and the openqa can carry a heading in their lead, so they are listed. */ :where(.dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap, .dns-roll, .dns-openqa) > :where(.wp-block-group__inner-container) > h2 { font-family: var(--dns-font-display); font-size: var(--dns-text-2xl); font-weight: var(--dns-weight-heavy); line-height: var(--dns-leading-tight); letter-spacing: -0.02em; color: var(--dns-ink); margin-block: 0 var(--dns-s4); } @media (min-width: 62rem) { :where(.dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap, .dns-roll, .dns-openqa) > :where(.wp-block-group__inner-container) > h2 { font-size: var(--dns-text-3xl); } } :where(.dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap, .dns-roll, .dns-openqa) > :where(.wp-block-group__inner-container) > h2 + p { font-size: var(--dns-text-md); } /* A module that follows a head gets room above it. Margins do not collapse between grid items, so this adds to the paragraph's own end margin. */ :where(.dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap) > :where(.wp-block-group__inner-container) > :where(.dns-gutter, .dns-leafgrid, .dns-ruling, .dns-matrix, .dns-roll, .dns-docket, .dns-openqa, .dns-parallel, figure):where(:not(:first-child)) { margin-block-start: var(--dns-s6); } :where(.dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap) > :where(.wp-block-group__inner-container) > :where(ul):where(:not(:first-child)) { margin-block-start: var(--dns-s2); } /* --- the section head, from gutter --------------------------------------- The builder emits a reference cell holding two paragraphs, a two digit numeral and a bold label, then a body cell. The reference is no longer a margin column: it is a compact row above the body, the numeral as a muted chip and the label as an eyebrow pill. The body is a measure grid. ------------------------------------------------------------------------ */ .dns-gutter { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dns-s5); } .dns-gutter__ref { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dns-s2); } .dns-gutter__ref > .wp-block-group__inner-container { display: contents; } /* The numeral chip. Tabular so 01 and 10 are the same width. */ :where(.dns-gutter__ref) > :where(.wp-block-group__inner-container) > p:first-child { display: inline-flex; align-items: center; min-block-size: 1.75rem; padding-inline: var(--dns-s3); margin: 0; border: var(--dns-border-width) solid var(--dns-border); border-radius: var(--dns-radius-pill); background: var(--dns-surface-sunken); color: var(--dns-text-muted); font-family: var(--dns-font-display); font-size: var(--dns-text-sm); font-weight: var(--dns-weight-bold); font-variant-numeric: tabular-nums; line-height: 1; } /* The eyebrow pill. Action on action-soft measures 4.57:1, which is AA for the 12px label; the ratio is noted here because it is the tightest pair this file adds. */ :where(.dns-gutter__ref) > :where(.wp-block-group__inner-container) > p + p { display: inline-flex; align-items: center; min-block-size: 1.75rem; padding-inline: var(--dns-s3); margin: 0; border: var(--dns-border-width) solid transparent; border-radius: var(--dns-radius-pill); background: var(--dns-action-soft); color: var(--dns-action); font-family: var(--dns-font-text); font-size: var(--dns-text-xs); font-weight: var(--dns-weight-heavy); letter-spacing: var(--dns-tracking-label); text-transform: uppercase; line-height: 1; } .dns-gutter__ref strong { font-weight: inherit; } /* Tracking breaks Arabic letter joining. dns-rtl.css resets the ref itself, but the pill is a paragraph inside it and outranks the route wide reset, so it is reset here for the Arabic route. */ :where([dir="rtl"], [lang="ar"]) :where(.dns-gutter__ref) > :where(.wp-block-group__inner-container) > p + p { letter-spacing: normal; text-transform: none; } /* The body cell is the second of exactly two grid children. The grid places children, not runs of children, so both cells must be real boxes or the content is dealt alternately across the two tracks. */ .dns-gutter__body { min-inline-size: 0; } .dns-rule { border: 0; border-block-start: var(--dns-border-width) solid var(--dns-border); margin: 0; } .dns-eyebrow { font-family: var(--dns-font-text); font-size: var(--dns-text-xs); font-weight: var(--dns-weight-heavy); letter-spacing: var(--dns-tracking-label); text-transform: uppercase; color: var(--dns-action); margin-block: 0 var(--dns-s3); } /* ============================================================================= LAYER 3 Components Every interactive state below states colour AND background together. ========================================================================== */ /* --- the band ------------------------------------------------------------ */ .dns-band { background: var(--dns-surface-sunken); color: var(--dns-text); } /* --- the folio, a plum plate carrying a page opening --------------------- */ .dns-folio { background: var(--dns-surface-invert); color: var(--dns-text-invert); } /* (0,0,1). Beats the :where(body) heading default on source order because this layer loads later, and loses to any component class placed inside the folio. Written as .dns-folio.dns-folio h1 it would sit at (0,2,1) and silently outrank a component title, which is the site 1 bug class. */ :where(.dns-folio) h1, :where(.dns-folio) h2 { color: var(--dns-text-invert); } .dns-folio .dns-eyebrow { color: var(--dns-text-invert-muted); } .dns-folio__lede { color: var(--dns-text-invert-muted); font-size: var(--dns-text-lg); } .dns-folio__top { display: flex; flex-wrap: wrap; gap: var(--dns-s3) var(--dns-s8); justify-content: space-between; } .dns-folio__cap { font-family: var(--dns-font-display); font-size: var(--dns-text-sm); color: var(--dns-text-invert-muted); margin-block-start: var(--dns-s6); padding-block-start: var(--dns-s4); border-block-start: var(--dns-border-width) solid var(--dns-tint-lt); } /* --- the schedule, a rail of instruments so a buyer can skip the page ---- Named schedule, not index, because .dns-index is the site header: in this design the header IS the index tab strip. A schedule is the list attached to an instrument, which is exactly what this is. ------------------------ */ .dns-schedule { background: var(--dns-surface-sunken); border-block-end: var(--dns-border-width) solid var(--dns-border-strong); } .dns-schedule__lab { font-family: var(--dns-font-display); font-size: var(--dns-text-xs); font-weight: var(--dns-weight-bold); letter-spacing: var(--dns-tracking-label); color: var(--dns-text); margin-block: 0 var(--dns-s3); } .dns-schedule__list { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; } .dns-schedule__list li { flex: 1 1 210px; margin-block-end: 0; } /* The link carries its own class rather than being styled as a bare `a` inside the list. A .dns-schedule__list a rule would sit at (0,1,1) and outrank any component dropped into the rail later. */ .dns-schedule__link { display: block; font-family: var(--dns-font-display); font-size: var(--dns-text-md); font-weight: var(--dns-weight-medium); color: var(--dns-text); background: transparent; text-decoration: none; padding-block: var(--dns-s2); padding-inline: 0 var(--dns-s4); margin-inline-end: var(--dns-s4); border-block-end: var(--dns-border-width) solid var(--dns-border-strong); min-block-size: var(--dns-target-min); transition: color var(--dns-transition), background-color var(--dns-transition), border-color var(--dns-transition); } .dns-schedule__link:hover { color: var(--dns-action); background: var(--dns-surface); border-block-end-color: var(--dns-action); } .dns-schedule__link:focus-visible { color: var(--dns-action); background: var(--dns-surface); border-block-end-color: var(--dns-action); } /* --- the roll, a register of entries, rendered as a card grid ------------- Each row is a card: the reference as a small chip, the name as the card title, the description as body, and who it is for as a footer line pushed to the bottom so a row of cards lines up. Three columns at 62rem, two at 40rem. Anything before the first entry spans the row. ----------------- */ .dns-roll { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dns-s5); } .dns-roll > .wp-block-group__inner-container { display: contents; } @media (min-width: 40rem) { .dns-roll { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 62rem) { .dns-roll { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Anything before the first entry (a heading, a lead, a list) spans the row. A lead spanning two of three columns left the third cell free and auto placement put the first card beside it; measured. */ :where(.dns-roll) > :where(.wp-block-group__inner-container) > :where(p, h2, h3, h4, ul, ol) { grid-column: 1 / -1; } .dns-roll__row { display: flex; flex-direction: column; gap: var(--dns-s3); min-inline-size: 0; padding: var(--dns-s6); background: var(--dns-surface-raised); color: var(--dns-text); border: var(--dns-border-width) solid var(--dns-border); border-radius: var(--dns-radius-xl); box-shadow: var(--dns-lift-1); } .dns-roll__row > .wp-block-group__inner-container { display: contents; } .dns-roll__ref { align-self: flex-start; display: inline-flex; align-items: center; min-block-size: 1.75rem; padding-inline: var(--dns-s3); margin: 0; border-radius: var(--dns-radius-pill); background: var(--dns-surface-sunken); color: var(--dns-text-muted); font-family: var(--dns-font-display); font-size: var(--dns-text-sm); font-weight: var(--dns-weight-bold); font-variant-numeric: tabular-nums; line-height: 1; } .dns-roll__entry { display: block; min-inline-size: 0; } .dns-roll__name { margin-block: 0 var(--dns-s2); font-family: var(--dns-font-display); font-size: var(--dns-text-lg); font-weight: var(--dns-weight-bold); line-height: var(--dns-leading-snug); letter-spacing: -0.01em; color: var(--dns-ink); } .dns-roll__desc { margin: 0; font-size: var(--dns-text-base); color: var(--dns-text); } .dns-roll__who { margin-block: auto 0; padding-block-start: var(--dns-s4); border-block-start: var(--dns-border-width) solid var(--dns-border); font-family: var(--dns-font-text); font-size: var(--dns-text-sm); color: var(--dns-text-muted); } /* --- tables: the ruling (fees) and the matrix (a comparison) ------------- One rendering for both. The core table figure becomes a rounded, lifted box that scrolls on its own inline axis, the header row sits on the dark surface, body rows alternate onto the sunken ground, and the first column is the row label so it is set bold. Core's block library puts a border on every cell and a 3px rule under thead; both are reset here. --------------- */ .dns-ruling, .dns-matrix { display: block; } .dns-ruling .wp-block-table, .dns-matrix .wp-block-table { margin: 0; overflow-x: auto; background: var(--dns-surface-raised); border: var(--dns-border-width) solid var(--dns-border); border-radius: var(--dns-radius-lg); box-shadow: var(--dns-lift-1); } .dns-ruling table, .dns-matrix table { border-collapse: collapse; inline-size: 100%; min-inline-size: 36rem; margin: 0; } .dns-ruling thead, .dns-matrix thead { border: 0; } .dns-ruling th, .dns-ruling td, .dns-matrix th, .dns-matrix td { text-align: start; vertical-align: top; padding: var(--dns-s3) var(--dns-s4); border: 0; border-block-end: var(--dns-border-width) solid var(--dns-border); font-size: var(--dns-text-base); line-height: var(--dns-leading-normal); } .dns-ruling thead th, .dns-matrix thead th { background: var(--dns-surface-invert); color: var(--dns-text-invert); font-family: var(--dns-font-display); font-size: var(--dns-text-sm); font-weight: var(--dns-weight-bold); border-block-end: 0; } .dns-ruling tbody tr:nth-child(even) td, .dns-matrix tbody tr:nth-child(even) td { background: var(--dns-surface-sunken); } .dns-ruling tbody td:first-child, .dns-matrix tbody td:first-child { font-family: var(--dns-font-display); font-weight: var(--dns-weight-bold); color: var(--dns-ink); } .dns-ruling tbody tr:last-child td, .dns-matrix tbody tr:last-child td { border-block-end: 0; } /* --- THE LEAF. The card. ------------------------------------------------- Image on top bleeding to the card edges, an icon chip, a title, the fee, the body, a check list, a meta line under a rule, and one text action with an arrow. The card lifts on hover; the action carries the focus ring. The whole card is not a link, the action is. ------------------------------- */ .dns-leafgrid { display: grid; gap: var(--dns-s5); grid-template-columns: minmax(0, 1fr); /* Default stretch matches every card in a row to the tallest, and the ctawrap's auto margin then pushes the button down to fill whatever is left over. Measured on a card with a shorter body: a 186px empty gap between the checklist and the button. Each card takes its own height instead, so the button sits right after its own content. */ align-items: start; } .dns-leafgrid > .wp-block-group__inner-container { display: contents; } @media (min-width: 40rem) { .dns-leafgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 62rem) { .dns-leafgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dns-leaf { position: relative; display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; padding: var(--dns-s6); background: var(--dns-surface-raised); color: var(--dns-text); border: var(--dns-border-width) solid var(--dns-border); border-radius: var(--dns-radius-xl); box-shadow: var(--dns-lift-1); transition: transform var(--dns-transition), box-shadow var(--dns-transition), border-color var(--dns-transition), background-color var(--dns-transition); } .dns-leaf > .wp-block-group__inner-container { display: contents; } /* The photograph bleeds to the three card edges above the content. Written with the element so it outranks the block library's figure margin, which is (0,2,1). */ .dns-leaf figure.dns-leaf__img { margin: 0; margin-inline: calc(var(--dns-s6) * -1); margin-block: calc(var(--dns-s6) * -1) var(--dns-s5); aspect-ratio: 3 / 2; /* a flex item's automatic minimum is its content height, which for a portrait photograph is taller than 3:2; zeroed so the ratio wins */ min-block-size: 0; overflow: hidden; background: var(--dns-surface-sunken); } .dns-leaf figure.dns-leaf__img img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .dns-leaf__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 3.5rem; block-size: 3.5rem; margin-block-end: var(--dns-s5); border-radius: var(--dns-radius-lg); background: var(--dns-action); color: var(--dns-surface); box-shadow: var(--dns-lift-1); } .dns-leaf__icon svg { inline-size: 1.75rem; block-size: 1.75rem; } .dns-leaf__head { margin: 0; padding: 0; border: 0; background: transparent; } .dns-leaf__title { margin: 0; font-family: var(--dns-font-display); font-size: var(--dns-text-lg); font-weight: var(--dns-weight-bold); line-height: var(--dns-leading-snug); letter-spacing: -0.01em; color: var(--dns-ink); } /* The fee. Emitted by the builder between the head and the body. */ .dns-leaf__price { margin-block: var(--dns-s3) 0; font-family: var(--dns-font-display); font-size: var(--dns-text-xl); font-weight: var(--dns-weight-heavy); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--dns-ink); } .dns-leaf__body { padding-block-start: var(--dns-s4); font-size: var(--dns-text-base); color: var(--dns-text); } .dns-leaf__body p { margin-block: 0 var(--dns-s3); } .dns-leaf__body p:last-child { margin-block-end: 0; } .dns-leaf__metarule { margin-block-start: var(--dns-s5); border-block-start: var(--dns-border-width) solid var(--dns-border); } .dns-leaf__meta { margin: 0; padding-block-start: var(--dns-s3); font-family: var(--dns-font-text); font-size: var(--dns-text-sm); font-weight: var(--dns-weight-medium); font-variant-numeric: tabular-nums; color: var(--dns-text-muted); } /* The action. Pushed to the bottom so a row of cards lines up. */ .dns-leaf__ctawrap { margin-block: auto 0; padding-block-start: var(--dns-s5); } .dns-leaf__cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--dns-s2); inline-size: 100%; min-block-size: var(--dns-target-min); padding: var(--dns-s3) var(--dns-s5); border: var(--dns-border-width) solid var(--dns-border-strong); border-radius: var(--dns-radius); font-family: var(--dns-font-text); font-size: var(--dns-text-sm); font-weight: var(--dns-weight-bold); text-decoration: none; color: var(--dns-ink); background: transparent; transition: background-color var(--dns-transition), border-color var(--dns-transition), color var(--dns-transition); } .dns-leaf__cta:hover, .dns-leaf__cta:focus-visible { color: var(--dns-action-hover); background: var(--dns-action-soft); border-color: var(--dns-action); text-decoration: none; } .dns-leaf__cta:focus-visible { outline: var(--dns-focus-width) solid var(--dns-focus); outline-offset: var(--dns-focus-offset); } .dns-leaf__cta:active { color: var(--dns-action-hover); background: var(--dns-action-soft); border-color: var(--dns-action-hover); } /* The arrow is a directional glyph, so it is mirrored by hand on the Arabic route; logical properties cannot flip a character. */ .dns-leaf__ctaicon::after { content: "\2192"; display: inline-block; transition: transform var(--dns-transition); } .dns-leaf__cta:hover .dns-leaf__ctaicon::after, .dns-leaf__cta:focus-visible .dns-leaf__ctaicon::after { transform: translateX(0.2em); } :where([dir="rtl"]) .dns-leaf__ctaicon::after { content: "\2190"; } :where([dir="rtl"]) .dns-leaf__cta:hover .dns-leaf__ctaicon::after, :where([dir="rtl"]) .dns-leaf__cta:focus-visible .dns-leaf__ctaicon::after { transform: translateX(-0.2em); } /* --- leaf states. Colour AND background on every one. -------------------- */ .dns-leaf:hover, .dns-leaf:focus-within { background: var(--dns-surface-raised); color: var(--dns-text); border-color: var(--dns-tint-lt); box-shadow: var(--dns-lift-2); transform: translateY(-2px); } /* Unavailable. Opacity is never used, because reducing opacity silently destroys every contrast ratio measured in dns-tokens.css. Surface and text colour change instead. */ .dns-leaf--off.dns-leaf { background: var(--dns-surface); color: var(--dns-text-muted); border-color: var(--dns-border); box-shadow: none; } .dns-leaf--off.dns-leaf:hover, .dns-leaf--off.dns-leaf:focus-within { background: var(--dns-surface); color: var(--dns-text-muted); border-color: var(--dns-border); box-shadow: none; transform: none; } .dns-leaf--off.dns-leaf .dns-leaf__title, .dns-leaf--off.dns-leaf .dns-leaf__price, .dns-leaf--off.dns-leaf .dns-leaf__body, .dns-leaf--off.dns-leaf .dns-leaf__meta { color: var(--dns-text-muted); } .dns-leaf--off.dns-leaf .dns-leaf__cta { color: var(--dns-text-muted); background: transparent; border-color: var(--dns-border); text-decoration: none; } /* --- check items ----------------------------------------------------------- A list rendered as ticks instead of bullets. The tick is a disc drawn by ::before and a check drawn by ::after as a clip-path polygon, both placed in the first grid cell of the item so they stack; the item's text lands in the second cell by auto placement. A polygon is the same shape on both routes, where a rotated border would have mirrored. Two forms. Compact, inside a card or beside a photograph: just the tick. Carded, in a section head: each item is a white card, two columns at 62rem. ------------------------------------------------------------------ */ .dns-leaf__list, :where(.dns-split__copy) > :where(.wp-block-group__inner-container) > ul, :where(.dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap) > :where(.wp-block-group__inner-container) > ul { list-style: none; margin-block: 0 var(--dns-s4); margin-inline: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dns-s3); } .dns-leaf__list > li, :where(.dns-split__copy) > :where(.wp-block-group__inner-container) > ul > li, :where(.dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap) > :where(.wp-block-group__inner-container) > ul > li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--dns-s3); align-items: start; margin: 0; min-inline-size: 0; } :where(.dns-leaf__list) > li::before, :where(.dns-split__copy) > :where(.wp-block-group__inner-container) > ul > li::before, :where(.dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap) > :where(.wp-block-group__inner-container) > ul > li::before { content: ""; grid-area: 1 / 1; inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: 0.0625rem; border-radius: var(--dns-radius-pill); background: var(--dns-action-soft); } :where(.dns-leaf__list) > li::after, :where(.dns-split__copy) > :where(.wp-block-group__inner-container) > ul > li::after, :where(.dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap) > :where(.wp-block-group__inner-container) > ul > li::after { content: ""; grid-area: 1 / 1; justify-self: center; inline-size: 0.8rem; block-size: 0.8rem; margin-block-start: 0.4125rem; background: var(--dns-action); clip-path: polygon(14% 52%, 0 66%, 40% 100%, 100% 20%, 86% 6%, 40% 72%); } /* The carded form. */ :where(.dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap) > :where(.wp-block-group__inner-container) > ul > li { padding: var(--dns-s4) var(--dns-s5); background: var(--dns-surface-raised); border: var(--dns-border-width) solid var(--dns-border); border-radius: var(--dns-radius-lg); box-shadow: var(--dns-lift-1); } @media (min-width: 62rem) { :where(.dns-gutter__body, .dns-section > .wp-block-group__inner-container > .dns-wrap) > :where(.wp-block-group__inner-container) > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dns-s4); } } /* --- forms --------------------------------------------------------------- The enquiry forms sit flush into whatever plate they are placed on, not in a floating white card. Site 1 puts its wizard in an elevated card over a photograph; this one is a form printed on the page. Fields are underline rules rather than boxes, which is the register grammar, and every control restates colour and background on every state because a form control inherits neither from its ancestor. ------------------------------------------------------------------------ */ .dns-form { margin-block-start: var(--dns-s6); } .dns-form__lede { font-family: var(--dns-font-display); font-weight: var(--dns-weight-bold); font-size: var(--dns-text-lg); color: inherit; margin-block: 0 var(--dns-s5); } .dns-form__form { display: grid; gap: var(--dns-s5); } .dns-form__error { font-family: var(--dns-font-display); font-size: var(--dns-text-md); color: var(--dns-text-invert); background: var(--dns-action); padding: var(--dns-s3) var(--dns-s4); margin-block: 0 var(--dns-s4); } /* The honeypot. Off screen rather than display:none, because some bots skip anything that is display:none, and unreachable by keyboard and by screen reader through tabindex and aria-hidden on the wrapper. */ .dns-form__pot { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .dns-field { display: grid; gap: var(--dns-s2); margin-block: 0; } .dns-field__label { font-family: var(--dns-font-display); font-size: var(--dns-text-sm); font-weight: var(--dns-weight-bold); color: inherit; } .dns-field__optional { font-weight: var(--dns-weight-normal); opacity: 1; color: inherit; } .dns-field__help { font-family: var(--dns-font-text); font-size: var(--dns-text-sm); font-weight: var(--dns-weight-normal); color: inherit; display: block; } .dns-field__input { font-family: var(--dns-font-text); font-size: var(--dns-text-md); line-height: 1.5; inline-size: 100%; min-block-size: var(--dns-target-min); padding: var(--dns-s3); border: 0; border-block-end: 2px solid var(--dns-border-strong); border-radius: var(--dns-radius); color: var(--dns-ink); background: var(--dns-leaf); transition: border-color var(--dns-transition), background-color var(--dns-transition); } .dns-field__input:hover { color: var(--dns-ink); background: var(--dns-leaf); border-block-end-color: var(--dns-action); } .dns-field__input:focus-visible { color: var(--dns-ink); background: var(--dns-leaf); border-block-end-color: var(--dns-action); outline: var(--dns-focus-width) solid var(--dns-focus); outline-offset: var(--dns-focus-offset); } textarea.dns-field__input { min-block-size: 7rem; resize: vertical; } .dns-field--choices.dns-field { border: 0; padding: 0; margin: 0; } .dns-choices { display: grid; gap: var(--dns-s2); } @media (min-width: 700px) { .dns-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .dns-choice { display: flex; align-items: flex-start; gap: var(--dns-s3); font-family: var(--dns-font-display); font-size: var(--dns-text-md); min-block-size: var(--dns-target-min); padding: var(--dns-s3); color: var(--dns-ink); background: var(--dns-leaf); border: var(--dns-border-width) solid var(--dns-border-strong); cursor: pointer; transition: color var(--dns-transition), background-color var(--dns-transition), border-color var(--dns-transition); } .dns-choice:hover { color: var(--dns-text-invert); background: var(--dns-action); border-color: var(--dns-action); } .dns-choice:focus-within { color: var(--dns-text-invert); background: var(--dns-action); border-color: var(--dns-action); outline: var(--dns-focus-width) solid var(--dns-focus); outline-offset: var(--dns-focus-offset); } .dns-choice input { margin-block-start: 0.2em; } .dns-form__foot { display: grid; gap: var(--dns-s3); justify-items: start; } .dns-form__note { font-family: var(--dns-font-display); font-size: var(--dns-text-sm); color: inherit; margin: 0; } .dns-form--done.dns-form { display: grid; gap: var(--dns-s4); } .dns-form__title { color: inherit; margin: 0; } .dns-form__ref { font-family: var(--dns-font-display); } /* The wizard steps. Server rendered as one long form; the script adds the [hidden] attributes on init. */ .dns-wizard { display: grid; gap: var(--dns-s7); } /* THE TRAP. An author `display` beats the user agent's [hidden] rule regardless of specificity, because author origin outranks user agent origin. Without this companion rule every step shows at once the moment the script hides one, which is exactly what put two buttons side by side on site 1. */ .dns-wizard__step { display: grid; gap: var(--dns-s5); border: 0; padding: 0; margin: 0; } .dns-wizard__step[hidden] { display: none; } .dns-wizard__q { font-family: var(--dns-font-display); font-weight: var(--dns-weight-bold); font-size: var(--dns-text-lg); color: inherit; padding: 0; } .dns-wizard__progress { font-family: var(--dns-font-display); font-size: var(--dns-text-sm); color: inherit; margin: 0; } .dns-wizard__nav { display: flex; gap: var(--dns-s3); flex-wrap: wrap; } /* On the plum folio the labels and help text need the inverted pair, and the override removes the paper ground so it owns every colour that depended on it. */ .dns-folio .dns-field__label, .dns-folio .dns-field__help, .dns-folio .dns-field__optional, .dns-folio .dns-form__note, .dns-folio .dns-wizard__progress, .dns-folio .dns-wizard__q, .dns-folio .dns-form__lede { color: var(--dns-text-invert); } .dns-endpaper .dns-field__label, .dns-endpaper .dns-field__help, .dns-endpaper .dns-field__optional, .dns-endpaper .dns-form__note, .dns-endpaper .dns-wizard__progress, .dns-endpaper .dns-wizard__q, .dns-endpaper .dns-form__lede { color: var(--dns-text-invert); } /* Plum on plum deep measures 1.22:1, so the error strip inverts on a dark plate rather than keeping its plum ground. */ .dns-folio .dns-form__error, .dns-endpaper .dns-form__error { color: var(--dns-plum-deep); background: var(--dns-leaf); } /* --- the endpaper, one dark plate per page ------------------------------- */ .dns-endpaper { background: var(--dns-plum-deep); color: var(--dns-text-invert); } :where(.dns-endpaper) h2, :where(.dns-endpaper) h3 { color: var(--dns-text-invert); } :where(.dns-endpaper) p { color: var(--dns-text-invert-muted); } /* This override removes the page ground from under both buttons, so it owns every colour that depended on it. Both are restated in full, on every state. Plum on plum-deep measures 1.22:1, which is Rule 3, so neither button may carry the plum ground it uses elsewhere. */ .dns-endpaper .dns-btn--solid.dns-btn { color: var(--dns-plum-deep); background: var(--dns-leaf); border-color: var(--dns-leaf); } .dns-endpaper .dns-btn--solid.dns-btn:hover { color: var(--dns-plum-deep); background: var(--dns-tint-lt); border-color: var(--dns-tint-lt); } .dns-endpaper .dns-btn--solid.dns-btn:focus-visible { color: var(--dns-plum-deep); background: var(--dns-tint-lt); border-color: var(--dns-tint-lt); outline-color: var(--dns-leaf); } .dns-endpaper .dns-btn--line.dns-btn { color: var(--dns-leaf); background: transparent; border-color: var(--dns-tint-lt); } .dns-endpaper .dns-btn--line.dns-btn:hover { color: var(--dns-plum-deep); background: var(--dns-tint-lt); border-color: var(--dns-tint-lt); } .dns-endpaper .dns-btn--line.dns-btn:focus-visible { color: var(--dns-plum-deep); background: var(--dns-tint-lt); border-color: var(--dns-tint-lt); outline-color: var(--dns-leaf); } :where(.dns-endpaper) a { color: var(--dns-leaf); background: transparent; } :where(.dns-endpaper) a:hover { color: var(--dns-tint-lt); background: transparent; } /* The endpaper keeps its ground and its button overrides above; it only needed the section rhythm, which it never had. */ .dns-endpaper { padding-block: var(--dns-section-y); } /* --- the docket, a what to bring checklist, rendered as check cards ------- Two columns at 48rem. The number sits in a disc, the item is bold, and the reason is a small muted line under it. --------------------------------- */ .dns-docket { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dns-s4); } .dns-docket > .wp-block-group__inner-container { display: contents; } @media (min-width: 48rem) { .dns-docket { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .dns-docket__row { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--dns-s4); row-gap: var(--dns-s1); align-items: start; min-inline-size: 0; padding: var(--dns-s5); background: var(--dns-surface-raised); color: var(--dns-text); border: var(--dns-border-width) solid var(--dns-border); border-radius: var(--dns-radius-lg); box-shadow: var(--dns-lift-1); } .dns-docket__row > .wp-block-group__inner-container { display: contents; } .dns-docket__n { grid-column: 1; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; margin: 0; border-radius: var(--dns-radius-pill); background: var(--dns-action-soft); color: var(--dns-action); font-family: var(--dns-font-display); font-size: var(--dns-text-sm); font-weight: var(--dns-weight-heavy); font-variant-numeric: tabular-nums; line-height: 1; } .dns-docket__item { grid-column: 2; margin: 0; font-size: var(--dns-text-base); font-weight: var(--dns-weight-bold); color: var(--dns-ink); } .dns-docket__why { grid-column: 2; margin: 0; font-size: var(--dns-text-sm); color: var(--dns-text-muted); } /* --- the editorial CONFIRM marker --------------------------------------- Deliberately loud. It is not a design element, it is a blocker, and it is supposed to be impossible to mistake for body copy or to miss in a review. It should never reach a published page: the builder holds back any section that is mostly markers, and the remainder are reported on every build. --- */ .dns-confirm { background: var(--dns-action); color: var(--dns-text-invert); font-family: var(--dns-font-display); font-size: var(--dns-text-sm); font-weight: var(--dns-weight-bold); padding: 2px var(--dns-s2); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .dns-endpaper .dns-confirm, .dns-folio .dns-confirm { background: var(--dns-leaf); color: var(--dns-plum-deep); } /* --- the parallel, English and Arabic of the same clause ------------------ Two cards side by side at 48rem, each with a language tag chip. The spine the builder emits between them is hidden. ------------------------------ */ .dns-parallel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dns-s5); } .dns-parallel > .wp-block-group__inner-container { display: contents; } @media (min-width: 48rem) { .dns-parallel { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .dns-parallel__spine { display: none; } .dns-parallel__col { display: block; min-inline-size: 0; padding: var(--dns-s6); background: var(--dns-surface-raised); color: var(--dns-text); border: var(--dns-border-width) solid var(--dns-border); border-radius: var(--dns-radius-xl); box-shadow: var(--dns-lift-1); } .dns-parallel__lang { display: inline-flex; align-items: center; min-block-size: 1.75rem; padding-inline: var(--dns-s3); margin-block: 0 var(--dns-s4); border-radius: var(--dns-radius-pill); background: var(--dns-action-soft); color: var(--dns-action); font-family: var(--dns-font-text); font-size: var(--dns-text-xs); font-weight: var(--dns-weight-heavy); letter-spacing: var(--dns-tracking-label); text-transform: uppercase; line-height: 1; } /* The Arabic column carries its own direction regardless of the page route, so the specimen is a genuine parallel text on both / and /ar/. */ .dns-parallel__ar { direction: rtl; text-align: start; } .dns-parallel__ar .dns-parallel__lang { letter-spacing: normal; text-transform: none; } /* --- the openqa, questions as accordion cards ------------------------------ The builder emits a lead paragraph then core/details blocks: a bare summary and the answer blocks. Each details is a card; the summary carries a plus drawn in CSS that turns into a cross when the card opens, and the open card is tinted. The card is itself a measure grid so the answer sits on a 62ch track while the question runs the full width. dns-ui.js keeps one card open per group. ----------------------------------------------- */ .dns-openqa { display: grid; grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); column-gap: var(--dns-s6); row-gap: var(--dns-s3); } .dns-openqa > .wp-block-group__inner-container { display: contents; } :where(.dns-openqa) > :where(.wp-block-group__inner-container) > * { grid-column: 1 / -1; min-inline-size: 0; } :where(.dns-openqa) > :where(.wp-block-group__inner-container) > :where(p, h2, h3, h4) { grid-column: 1; } :where(.dns-openqa) > :where(.wp-block-group__inner-container) > p { margin-block: 0 var(--dns-s3); font-size: var(--dns-text-md); color: var(--dns-text); } .dns-openqa__title { grid-column: 1 / -1; margin-block: 0 var(--dns-s3); font-family: var(--dns-font-display); font-size: var(--dns-text-2xl); font-weight: var(--dns-weight-bold); line-height: var(--dns-leading-tight); color: var(--dns-ink); } .dns-openqa__item { display: grid; grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); column-gap: var(--dns-s6); overflow: hidden; background: var(--dns-surface-raised); color: var(--dns-text); border: var(--dns-border-width) solid var(--dns-border); border-radius: var(--dns-radius-lg); box-shadow: var(--dns-lift-1); transition: background-color var(--dns-transition), border-color var(--dns-transition); } .dns-openqa__item > * { grid-column: 1; min-inline-size: 0; } .dns-openqa__item[open] { background: var(--dns-action-soft); color: var(--dns-text); border-color: var(--dns-tint-lt); padding-block-end: var(--dns-s5); } .dns-openqa__item > summary { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 1.75rem; align-items: center; column-gap: var(--dns-s4); min-block-size: var(--dns-target-min); padding: var(--dns-s4) var(--dns-s5); list-style: none; cursor: pointer; font-family: var(--dns-font-display); font-size: var(--dns-text-md); font-weight: var(--dns-weight-bold); line-height: var(--dns-leading-snug); color: var(--dns-ink); background: transparent; transition: color var(--dns-transition); } .dns-openqa__item > summary::-webkit-details-marker { display: none; } /* The plus: two bars of currentColor on a soft disc. */ .dns-openqa__item > summary::after { content: ""; inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--dns-radius-pill); background-color: var(--dns-action-soft); background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0.75rem 2px, 2px 0.75rem; background-position: center; background-repeat: no-repeat; color: var(--dns-action); transition: transform var(--dns-transition), background-color var(--dns-transition), color var(--dns-transition); } .dns-openqa__item > summary:hover { color: var(--dns-action); background: transparent; } .dns-openqa__item > summary:focus-visible { color: var(--dns-action); background: transparent; outline: var(--dns-focus-width) solid var(--dns-focus); outline-offset: calc(var(--dns-focus-width) * -1); } .dns-openqa__item > summary:active { color: var(--dns-action-hover); background: transparent; } .dns-openqa__item[open] > summary { color: var(--dns-ink); background: transparent; padding-block-end: var(--dns-s2); } .dns-openqa__item[open] > summary:hover, .dns-openqa__item[open] > summary:focus-visible { color: var(--dns-action); background: transparent; } .dns-openqa__item[open] > summary::after { transform: rotate(45deg); background-color: var(--dns-action); color: var(--dns-text-invert); } :where(.dns-openqa__item) > p, :where(.dns-openqa__item) > ul, :where(.dns-openqa__item) > ol { margin-inline: var(--dns-s5); } /* --- the colophon, pre footer -------------------------------------------- */ .dns-colophon { font-family: var(--dns-font-display); font-size: var(--dns-text-md); color: var(--dns-text-muted); } .dns-colophon__reviewed { font-size: var(--dns-text-sm); } /* --- the index. The site header, which in this design is the tab strip --- cut into the fore edge of a bound register. The wordmark carries a solid plum rule rather than sitting inside a badge, because a circular monogram lockup is what site 1 owns. ---------------------------------------------- */ .dns-index { background: var(--dns-surface); color: var(--dns-text); border-block-end: var(--dns-border-width) solid var(--dns-border); } .dns-index__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dns-s4) var(--dns-s6); padding-block: var(--dns-s4); } .dns-index__brand { text-decoration: none; color: var(--dns-action); background: transparent; } .dns-index__brand:hover { color: var(--dns-action-hover); background: transparent; } .dns-index__wordmark { display: inline-grid; gap: 3px; } .dns-index__name { font-family: var(--dns-font-display); font-weight: var(--dns-weight-heavy); font-size: var(--dns-text-md); line-height: 1; color: var(--dns-action); } /* The tab. A solid rule, full width of the wordmark, no enclosing shape. */ .dns-index__tab { block-size: 5px; background: var(--dns-action); } .dns-index__strapline { font-family: var(--dns-font-display); font-size: var(--dns-text-xs); font-weight: var(--dns-weight-bold); letter-spacing: var(--dns-tracking-label); color: var(--dns-text-muted); } .dns-index__nav { margin-inline-start: auto; } .dns-index__list { display: flex; flex-wrap: wrap; gap: var(--dns-s5); list-style: none; margin: 0; padding: 0; } .dns-index__list li { margin-block-end: 0; } .dns-index__link { display: inline-flex; align-items: center; min-block-size: var(--dns-target-min); font-family: var(--dns-font-display); font-size: var(--dns-text-md); font-weight: var(--dns-weight-medium); color: var(--dns-text); background: transparent; text-decoration: none; border-block-end: 2px solid transparent; transition: color var(--dns-transition), background-color var(--dns-transition), border-color var(--dns-transition); } .dns-index__link:hover { color: var(--dns-action); background: transparent; border-block-end-color: var(--dns-action); } .dns-index__link:focus-visible { color: var(--dns-action); background: transparent; border-block-end-color: var(--dns-action); } /* The current item is marked by weight and rule, never by colour alone. */ .dns-index .current-menu-item > .dns-index__link { color: var(--dns-action); background: transparent; font-weight: var(--dns-weight-bold); border-block-end-color: var(--dns-action); } .dns-index__aside { display: flex; align-items: center; gap: var(--dns-s4); } .dns-index__phone { font-family: var(--dns-font-display); font-size: var(--dns-text-md); font-weight: var(--dns-weight-bold); color: var(--dns-action); background: transparent; text-decoration: none; min-block-size: var(--dns-target-min); display: inline-flex; align-items: center; } .dns-index__phone:hover { color: var(--dns-action-hover); background: var(--dns-surface-sunken); } .dns-index__phone:focus-visible { color: var(--dns-action-hover); background: var(--dns-surface-sunken); } /* Only an administrator ever sees this, and only when a menu is missing. */ .dns-index__notice { flex: 1 1 100%; font-family: var(--dns-font-display); font-size: var(--dns-text-sm); color: var(--dns-leaf); background: var(--dns-action); padding: var(--dns-s2) var(--dns-s3); margin-block: 0; } /* --- the colophon. The note at the end of a printed book. ----------------- */ .dns-colophon { background: var(--dns-plum-deep); color: var(--dns-text-invert); padding-block: var(--dns-s10); } .dns-colophon__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dns-s8); } @media (min-width: 760px) { .dns-colophon__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Region defaults for the colophon, at zero specificity, so a component dropped in here cannot be repainted by them. This is the rule that a footer default broke on site 1: `.site-footer .widget a:hover` at (0,3,1) beat `.pn-foot__contact a:hover` at (0,2,1) and put brass text on a brass button. */ :where(.dns-colophon) a { color: var(--dns-text-invert); background: transparent; } :where(.dns-colophon) a:hover { color: var(--dns-tint-lt); background: transparent; } :where(.dns-colophon) p { color: var(--dns-text-invert-muted); } .dns-colophon .dns-index__name { color: var(--dns-text-invert); } .dns-colophon .dns-index__tab { background: var(--dns-tint-lt); } .dns-colophon .dns-index__strapline { color: var(--dns-text-invert-muted); } .dns-colophon__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dns-s2); } .dns-colophon__list li { margin-block-end: 0; } .dns-colophon__link { display: inline-flex; align-items: center; min-block-size: 32px; font-family: var(--dns-font-display); font-size: var(--dns-text-md); color: var(--dns-text-invert); background: transparent; text-decoration: none; border-block-end: 1px solid transparent; transition: color var(--dns-transition), border-color var(--dns-transition); } .dns-colophon__link:hover { color: var(--dns-tint-lt); background: transparent; border-block-end-color: var(--dns-tint-lt); } .dns-colophon__link:focus-visible { color: var(--dns-tint-lt); background: transparent; border-block-end-color: var(--dns-tint-lt); outline-color: var(--dns-leaf); } .dns-colophon__contact { display: grid; gap: var(--dns-s2); align-content: start; } .dns-colophon__address { font-style: normal; color: var(--dns-text-invert-muted); } .dns-colophon__capacity { font-size: var(--dns-text-sm); } .dns-colophon__legal { grid-column: 1 / -1; border-block-start: 1px solid var(--dns-tint-lt); padding-block-start: var(--dns-s5); } .dns-colophon__note, .dns-colophon__reviewed { font-family: var(--dns-font-display); font-size: var(--dns-text-sm); color: var(--dns-text-invert-muted); margin-block: 0; } /* ============================================================================= CORE AND PARENT THEME BLOCK CONTAINER RESET GeneratePress puts `padding: 40px` and `max-width: 1200px` on every .wp-block-group__inner-container. Measured inside a card: .dns-leaf 293px, my padding-inline 28/28 .wp-block-group__inner-container padding-inline 40/40 .dns-leaf__body 235px .wp-block-group__inner-container padding-inline 40/40 p 155px So a paragraph had 155px of measure inside a 293px card. That is a hard line break, and it was also silently doubling the page gutter everywhere else, because .dns-wrap sets its own padding and then inherited another 40 on top. Our components own their own padding and their own measure. The inner container is a structural artefact of core/group and must contribute nothing. Scoped to .dns-theme so it cannot reach anything else. ========================================================================== */ .dns-theme .wp-block-group__inner-container { padding: 0; margin-inline: 0; max-inline-size: none; } /* ============================================================================= CORE BUTTON BLOCK DEFAULT, NEUTRALISED No page this build script generates emits a raw core/button block today, so this has never painted on a live page. It is a live seam, not a live bug: WordPress core ships two separate stylesheets that both target these exact classes on every classic-theme install, regardless of whether any content uses them yet, and GeneratePress adds a third of its own: classic-theme-styles-inline-css .wp-block-button__link{color:#fff; background-color:#32373c} (0,1,0) global-styles-inline-css :where(.wp-element-button, .wp-block-button__link){...} (0,0,0) generate-style-inline-css a.wp-block-button__link :not(.has-background){ background-color:#55555e} (0,2,1) The GeneratePress one is not dormant like the other two: it is GP's own Customizer button colour, generated into every page's regardless of theme, and it is what a first version of this guard actually lost to. Measured live: a rule written as .dns-theme .wp-block-button__link, at (0,2,0), rendered rgb(85, 85, 94), GP's grey, not this site's teal -- two classes loses to GP's one element + one class + one :not(), because :not()'s argument counts toward specificity and pushes GP to (0,2,1). Source order was never the deciding factor here; (0,2,0) is arithmetically lower than (0,2,1) no matter which stylesheet loads last. Doubling the scope class is the same trick already used for the [hidden][hidden] guard: .dns-theme.dns-theme is (0,2,0) worth of scope before the button class is even added, landing the full selector at (0,3,0) or (0,4,0) with a state, which beats every rule above outright. Not !important: that would only win until the next thing that also needs to beat GeneratePress's button colour, and this scales instead. Matched here to .dns-btn--solid.dns-btn exactly, so a stray button block looks native rather than like an unstyled default. ========================================================================== */ .dns-theme.dns-theme .wp-block-button__link, .dns-theme.dns-theme .wp-element-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--dns-s2); min-block-size: var(--dns-target-min); padding: var(--dns-s3) var(--dns-s5); border: var(--dns-border-width) solid var(--dns-action); border-radius: var(--dns-radius); background: var(--dns-action); color: var(--dns-surface); font-family: var(--dns-font-text); font-size: var(--dns-text-base); font-weight: var(--dns-weight-bold); line-height: 1.2; text-decoration: none; } .dns-theme.dns-theme .wp-block-button__link:hover, .dns-theme.dns-theme .wp-block-button__link:focus-visible, .dns-theme.dns-theme .wp-element-button:hover, .dns-theme.dns-theme .wp-element-button:focus-visible { background: var(--dns-action-hover); border-color: var(--dns-action-hover); color: var(--dns-surface); } .dns-theme.dns-theme .wp-block-button__link:focus-visible, .dns-theme.dns-theme .wp-element-button:focus-visible { outline: var(--dns-focus-width) solid var(--dns-focus); outline-offset: var(--dns-focus-offset); } /* ============================================================================= CORE BLOCK STRUCTURE core/group does NOT render its children as direct descendants. It wraps them in a .wp-block-group__inner-container div. Every layout section in this theme is emitted as a core group by the markdown builder, so every grid here would otherwise have exactly one grid item, that wrapper, instead of its real children. Measured symptom before this rule, at a 375px viewport: the document scrolled to 429px while no single element was wider than the viewport. .dns-leafgrid was 198px wide with grid-template-columns computed to a single 348px track, because the track sized itself to the widest leaf inside the wrapper. display: contents removes the wrapper from the box tree so the real children become the grid items. It is safe here because the wrapper is presentational and carries no semantics, no background and no border. ========================================================================== */ .dns-leafgrid > .wp-block-group__inner-container, .dns-gutter > .wp-block-group__inner-container, .dns-parallel > .wp-block-group__inner-container, .dns-openqa > .wp-block-group__inner-container, .dns-roll > .wp-block-group__inner-container, .dns-roll__row > .wp-block-group__inner-container, .dns-docket > .wp-block-group__inner-container, .dns-docket__row > .wp-block-group__inner-container, .dns-leaf > .wp-block-group__inner-container, .dns-index__inner > .wp-block-group__inner-container, .dns-colophon__inner > .wp-block-group__inner-container { display: contents; } /* ============================================================================= GENERATEPRESS CONTAINER RESET The only place in this stylesheet that names parent theme markup, and it is scoped to .dns-fullbleed, a body class this theme adds on pages, so it can never reach anything else. Measured before this reset: .inside-article carried 40px padding on a white ground and the content column was constrained, so .dns-folio and .dns-endpaper rendered as boxes inside a white card instead of as bands across the page. These are resets, not restyles. Each one removes a background or a box, and by the convention that whatever removes a background owns every colour that depended on it, none of them leaves a colour undeclared: the sections underneath all paint their own ground and their own text colour. ========================================================================== */ /* div.site.grid-container is the real 1200px cap. Everything below it reported max-width none and inherited the width, which is why resetting only the inner elements changed nothing. Found by walking the ancestor chain and measuring each one, not by reading the parent stylesheet. */ .dns-fullbleed .site, .dns-fullbleed .site-content, .dns-fullbleed .content-area, .dns-fullbleed .site-main { margin: 0; padding: 0; max-inline-size: none; inline-size: 100%; background: transparent; } .dns-fullbleed .inside-article { padding: 0; background: transparent; border: 0; box-shadow: none; } .dns-fullbleed .entry-content { margin-block-start: 0; } /* The entry content is a plain flow container here. Each section paints its own ground and sets its own inline padding through .dns-wrap, so nothing between the body and the section needs a width. */ .dns-fullbleed .entry-content > * { margin-block: 0; } /* GeneratePress adds its own top margin to the first heading in a container. Ours are inside sections that already carry block padding. */ .dns-fullbleed .entry-content > :first-child { margin-block-start: 0; } /* ============================================================================= LAYER 4 Band scoped overrides Specificity is (0,2,0) against a component's (0,1,0), so they win on the cascade without an !important and without moving the argument up a level. The old rules here stepped muted text up to ink, because the previous palette measured meta on band at 4.38:1. The current tokens measure text-muted on surface-sunken at 5.95:1, so text no longer needs a step. What a band does change is the chips: a sunken chip on a sunken band is invisible, so the two that sit directly on the band take the page surface. Chips inside a white card (roll, parallel) keep their sunken ground. ========================================================================== */ .dns-band :where(.dns-gutter__ref) > :where(.wp-block-group__inner-container) > p:first-child { background: var(--dns-surface); color: var(--dns-text-muted); } .dns-band :where(.dns-gutter__ref) > :where(.wp-block-group__inner-container) > p + p { background: var(--dns-surface); color: var(--dns-action); border-color: var(--dns-tint-lt); } /* A leaf marked unavailable on a band would be ground on band, which is nearly invisible. It takes the band's own value with a stronger border instead. */ .dns-band .dns-leaf--off.dns-leaf { background: var(--dns-surface-sunken); color: var(--dns-text); border-color: var(--dns-border-strong); } .dns-band .dns-leaf--off.dns-leaf:hover, .dns-band .dns-leaf--off.dns-leaf:focus-within { background: var(--dns-surface-sunken); color: var(--dns-text); border-color: var(--dns-border-strong); } .dns-band .dns-leaf--off.dns-leaf .dns-leaf__title, .dns-band .dns-leaf--off.dns-leaf .dns-leaf__price, .dns-band .dns-leaf--off.dns-leaf .dns-leaf__body, .dns-band .dns-leaf--off.dns-leaf .dns-leaf__meta { color: var(--dns-text); } /* ============================================================================= THE [hidden] GUARD `[hidden] { display: none }` in Layer 1 is (0,1,0), so ANY component that sets its own display outranks it and stays visible when the script hides it. Enumerating a companion per component works and is immediately out of date the next time somebody adds one. Repeating the attribute selector is legal CSS and doubles the specificity to (0,2,0). Placed last in the file it beats every single class component outright and wins the tie against a two class one. One rule, no !important, and it cannot be outgrown. Measured cause: on the live page the submit button carried hidden="" and computed display: flex, so Send this instruction sat beside Back and Continue. The same symptom is recorded from site 1. ========================================================================== */ [hidden][hidden] { display: none; } /* ============================================================================= Motion Colour transitions, a 2px lift on a hovered card, an arrow that nudges and a plus that turns. All of it goes away when the reader asks: the durations collapse and the transforms are removed, so nothing moves at all. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms; animation-duration: 0.01ms; animation-iteration-count: 1; scroll-behavior: auto; } .dns-leaf:hover, .dns-leaf:focus-within { transform: none; } .dns-leaf__cta:hover .dns-leaf__ctaicon::after, .dns-leaf__cta:focus-visible .dns-leaf__ctaicon::after { transform: none; } }