/*! * dijihost.css — Phase 4 visual overhaul layer. Child theme dijitul-2025. * * Adds only the Phase 4 components. Nothing here restates or fights the CSS * already in Global Styles (.backdrop-blur, .nav-bar*, .rank-math-list, * .news-card, Gravity Forms, #main-menu-overlay). The one deliberate touch on * existing CSS is lifting the floating .nav-bar pill clear of the sticky * action bar — see §4. No !important is used anywhere in this file. * * NAMING: BEM under a dh- namespace — .dh-block__element--modifier — applied * through the Gutenberg "Additional CSS class(es)" field. Components never set * outer margin; page rhythm comes from .dh-section. * * CLASS CONTRACT — the markup must use exactly these: * * Primitives * .dh-card / .dh-card--tint 25px radius, soft border, natural shadow; * white, or the accent-5 off-white ground * .dh-num / .dh-num--sm display numeral (Manrope 800) / smaller * .dh-eyebrow small uppercase grey label * .dh-vh visually hidden, kept in the a11y tree * * 1 Trust strip * .dh-trust the band * .dh-trust__list grid of proof points — wraps, never scrolls sideways * .dh-trust__item one proof point * .dh-trust__icon icon wrapper (outermost/icon-block, svg or emoji) * .dh-trust__text the label * * 2 Price cards * .dh-prices grid wrapper (1 col mobile, 3 cols >=782px) * .dh-price a card — flex column, inherits the .dh-card look * .dh-price--anchor the anchor card: red 2px border * .dh-price__flag red badge, white text (anchor card only) * .dh-price__title card heading * .dh-price__amount the big numeral, e.g. "£1" * .dh-price__unit small unit beneath it, e.g. "a day + VAT" * .dh-price__secondary second figure line, e.g. "£30 a month + VAT" * .dh-price__list inclusion list (also add is-style-checkmark-list) * .dh-price__note small grey footnote * .dh-price__cta button wrapper, pinned to the bottom of the card; * only the anchor card keeps a filled button, the * other two are auto-downgraded to outline * * 3 Comparison table * .dh-compare wrapper — becomes the card frame at >=782px * .dh-compare__table the * .dh-compare__caption optional
* .dh-compare__cell--minus / --plus optional cell emphasis * td[data-label="…"] REQUIRED on every
: supplies the column name * once the table reflows to cards under 782px. * A11y: in thead, per row. The mobile * reflow changes the display type, so the markup MUST also carry explicit * roles: table / rowgroup / row / columnheader / rowheader / cell. * * 4 Sticky mobile action bar * .dh-actionbar fixed bottom bar, shown only under 782px * .dh-actionbar__btn an action; --call = primary red, --quote = outline * .dh-actionbar__icon decorative leading icon * body.dh-has-actionbar REQUIRED on on any page with the bar: adds * page bottom padding and lifts the .nav-bar pill * .dh-actionbar-pad on a trailing form/section so its submit clears the bar * * 5 Section rhythm * .dh-section vertical rhythm; --tint = accent-5, --tight = less padding * .dh-rhythm on a parent: auto-tints every even child .dh-section * * 6 Reviews * .dh-reviews card wrapper for the Google reviews embed * .dh-reviews__head rating summary row * .dh-reviews__score the "5.0" numeral * .dh-reviews__stars decorative stars — mark aria-hidden="true" * .dh-reviews__meta "from 35+ Google reviews" * .dh-reviews__embed wraps the [google-reviews] core/shortcode block * * CONTRAST: #e7362e on white is ~3.9:1, so red is used only for borders, icons * and button fills, plus large bold text (>=18px, where 3:1 applies) — never * for small body copy. Body text is contrast #111 (~18:1) or accent-4 #686868 * (~5.6:1 on white, ~5.3:1 on accent-5); both clear 4.5:1. */ /* Tokens */ :root { /* One radius scale only — matches the existing card look. */ --dh-radius: 25px; /* Buttons keep the site's existing 7px button radius (core/button token). */ --dh-radius-btn: 7px; --dh-actionbar-h: 64px; --dh-border: 1px solid var(--wp--preset--color--accent-6); --dh-shadow: var(--wp--preset--shadow--natural, 6px 6px 9px rgba(0, 0, 0, .2)); --dh-ink: var(--wp--preset--color--contrast, #111111); --dh-muted: var(--wp--preset--color--accent-4, #686868); --dh-red: var(--wp--preset--color--custom-rd, #e7362e); --dh-tint: var(--wp--preset--color--accent-5, #FBFAF3); --dh-paper: var(--wp--preset--color--base, #ffffff); } /* Shared primitives */ .dh-card, .dh-price, .dh-reviews { background-color: var(--dh-paper); border: var(--dh-border); border-radius: var(--dh-radius); box-shadow: var(--dh-shadow); padding: var(--wp--preset--spacing--50, 40px); box-sizing: border-box; min-width: 0; } .dh-card--tint { background-color: var(--dh-tint); } .dh-num, .dh-price__amount, .dh-reviews__score { font-family: var(--wp--preset--font-family--manrope, Manrope, sans-serif); font-weight: 800; font-size: clamp(3.25rem, 13vw, 4.75rem); line-height: .92; letter-spacing: -.03em; color: var(--dh-ink); display: block; margin: 0; overflow-wrap: normal; } .dh-num--sm, .dh-reviews__score { font-size: clamp(2.25rem, 8vw, 3rem); } /* Shared small-label treatment: eyebrows, price units, table headings and the data-label the comparison table shows once it stacks. */ .dh-eyebrow, .dh-price__unit, .dh-compare thead th, .dh-compare td::before { font-size: var(--wp--preset--font-size--small, .875rem); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--dh-muted); margin: 0; } .dh-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* 1. Trust strip Icons sit in tinted square tiles ABOVE their label at every width — the tile gives each proof point a consistent visual anchor and stops the row reading as a list of stray glyphs. No top/bottom rules: the strip is separated by whitespace instead, so it sits quietly under the hero. */ .dh-trust { padding-block: var(--wp--preset--spacing--40, 30px); /* deliberately no border-block — see note above */ } .dh-trust__list { display: grid; /* min(7.5rem, 100%) keeps two columns at 375px and lets all five sit in one row from ~800px up. Never scrolls sideways. */ grid-template-columns: repeat(auto-fit, minmax(min(7.5rem, 100%), 1fr)); gap: var(--wp--preset--spacing--40, 30px) var(--wp--preset--spacing--20, 10px); margin: 0; padding: 0; list-style: none; align-items: start; } .dh-trust__item { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; text-align: center; overflow-wrap: anywhere; } /* The tile. Square, tinted, red glyph — same radius family as the cards but scaled down so it reads as a tile rather than a card. outermost/icon-block renders
around its SVG, so the inline width has to be overridden (the only !important in this file) or every icon renders at 20px and sits off-centre in the tile. */ .dh-trust__icon { display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem; flex: none; border-radius: 16px; background: var(--wp--preset--color--accent-5, #FBFAF3); border: var(--dh-border); color: var(--dh-red); line-height: 1; font-size: 1.75rem; } /* Neutralise the plugin's wrapper so the SVG itself is the centred child. */ .dh-trust__icon .wp-block-outermost-icon-block, .dh-trust__icon .icon-container { display: grid !important; place-items: center; inline-size: 100% !important; block-size: 100%; margin: 0 !important; padding: 0; line-height: 0; } .dh-trust__icon svg, .dh-trust__icon img { display: block; width: 2.125rem; height: 2.125rem; fill: currentColor; } .dh-actionbar__icon svg { display: block; width: 1.25rem; height: 1.25rem; fill: currentColor; } .dh-trust__text { margin: 0; font-size: var(--wp--preset--font-size--small, .875rem); font-weight: 600; line-height: 1.35; color: var(--dh-ink); text-wrap: balance; max-inline-size: 14ch; } @media (min-width: 960px) { .dh-trust__icon { inline-size: 5.25rem; block-size: 5.25rem; font-size: 2rem; } .dh-trust__icon svg, .dh-trust__icon img { width: 2.5rem; height: 2.5rem; } .dh-trust__text { text-wrap: pretty; max-inline-size: 16ch; } } /* 2. Price cards */ .dh-prices { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40, 30px); align-items: stretch; } @media (min-width: 782px) { .dh-prices { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dh-price { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30, 20px); position: relative; height: 100%; /* 2px on every card so the anchor's red border adds no layout shift. */ border-width: 2px; transition: transform .25s ease, box-shadow .25s ease; } /* Neutralise the constrained-layout auto margins Gutenberg puts on inner blocks, which would otherwise centre them instead of filling the card. */ .dh-price > * { width: 100%; margin-inline: 0; margin-block: 0; } .dh-price:hover { transform: translateY(-3px); } .dh-price--anchor { border-color: var(--dh-red); } .dh-price__flag { display: inline-block; align-self: flex-start; width: auto; background-color: var(--dh-red); color: var(--dh-paper); font-size: var(--wp--preset--font-size--small, .875rem); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1; padding: 8px 14px; border-radius: var(--dh-radius-btn); margin: 0; } .dh-price__title { font-size: var(--wp--preset--font-size--large, 1.375rem); line-height: 1.2; margin: 0; color: var(--dh-ink); } .dh-price__unit { display: block; margin: 6px 0 0; } .dh-price__secondary { margin: 0; font-size: var(--wp--preset--font-size--medium, 1rem); font-weight: 600; color: var(--dh-ink); } .dh-price__list { margin: 0; padding-inline-start: 1.15em; line-height: 1.45; } .dh-price__list li + li { margin-top: 10px; } .dh-price__note { margin: 0; font-size: var(--wp--preset--font-size--small, .875rem); color: var(--dh-muted); } .dh-price__cta { margin-top: auto; padding-top: var(--wp--preset--spacing--20, 10px); } .dh-price__cta .wp-block-button, .dh-price__cta .wp-block-button__link { width: 100%; } /* One primary action per screenful: only the anchor card keeps the red fill, the other two drop to an outline. Ink rather than red text, because red on white is 3.9:1 and these labels are not large text. */ .dh-price:not(.dh-price--anchor) .dh-price__cta .wp-block-button__link { background-color: transparent; color: var(--dh-ink); border: 2px solid var(--dh-ink); } /* 3. Comparison table Mobile first: every row becomes a card and the column name comes from td[data-label]. Because the display type changes, the markup carries ARIA roles so the real table semantics survive. */ .dh-compare__table { width: 100%; border-collapse: collapse; margin: 0; color: var(--dh-ink); } .dh-compare__caption { caption-side: top; text-align: left; font-size: var(--wp--preset--font-size--small, .875rem); color: var(--dh-muted); padding-bottom: var(--wp--preset--spacing--20, 10px); } .dh-compare table, .dh-compare thead, .dh-compare tbody, .dh-compare tr, .dh-compare th, .dh-compare td { display: block; text-align: left; } .dh-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .dh-compare tbody tr { background-color: var(--dh-paper); border: var(--dh-border); border-radius: var(--dh-radius); box-shadow: var(--dh-shadow); padding: var(--wp--preset--spacing--40, 30px); margin-bottom: var(--wp--preset--spacing--30, 20px); } .dh-compare tbody th[scope="row"] { font-size: var(--wp--preset--font-size--large, 1.375rem); line-height: 1.2; padding: 0 0 14px; border-bottom: var(--dh-border); margin-bottom: 14px; } .dh-compare td { padding: 0; line-height: 1.45; } .dh-compare td + td { margin-top: 16px; } .dh-compare td::before { content: attr(data-label); display: block; margin-bottom: 4px; } .dh-compare__cell--minus { color: var(--dh-muted); } .dh-compare__cell--plus { font-weight: 600; } @media (min-width: 782px) { .dh-compare { background-color: var(--dh-paper); border: var(--dh-border); border-radius: var(--dh-radius); box-shadow: var(--dh-shadow); padding: var(--wp--preset--spacing--50, 40px); overflow-x: auto; } .dh-compare table { display: table; } .dh-compare thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip-path: none; } .dh-compare tbody { display: table-row-group; } .dh-compare tr { display: table-row; } .dh-compare th, .dh-compare td { display: table-cell; vertical-align: top; padding: 18px 20px 18px 0; border-bottom: var(--dh-border); margin: 0; } /* The managed-hosting column is the one we are pointing at. */ .dh-compare thead th:last-child { color: var(--dh-red); } .dh-compare tbody tr { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; } .dh-compare tbody th[scope="row"] { font-size: var(--wp--preset--font-size--medium, 1rem); width: 30%; } .dh-compare tbody tr:last-child th, .dh-compare tbody tr:last-child td { border-bottom: 0; } .dh-compare td::before { content: none; } } /* 4. Sticky mobile action bar */ .dh-actionbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; /* under .nav-bar (50) and #main-menu-overlay (9999) */ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; background-color: var(--dh-paper); border-top: var(--dh-border); /* No shadow token exists for an upward-cast shadow, so this is hardcoded. */ box-shadow: 0 -2px 12px rgba(17, 17, 17, .10); padding: 8px 12px; padding-bottom: max(8px, env(safe-area-inset-bottom)); box-sizing: border-box; } .dh-actionbar__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 12px; border-radius: var(--dh-radius-btn); font-family: var(--wp--preset--font-family--ibm-plex-sans, "IBM Plex Sans", sans-serif); font-size: 1.0625rem; font-weight: 700; line-height: 1.1; text-align: center; text-decoration: none; box-sizing: border-box; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .dh-actionbar__btn--call { background-color: var(--dh-red); color: var(--dh-paper); border: 2px solid var(--dh-red); } .dh-actionbar__btn--quote { background-color: transparent; color: var(--dh-ink); border: 2px solid var(--dh-ink); } .dh-actionbar__btn--quote:hover { background-color: var(--dh-ink); color: var(--dh-paper); } .dh-actionbar__btn:focus-visible { outline: 3px solid var(--dh-ink); outline-offset: 3px; } .dh-actionbar__icon { line-height: 1; flex: none; } /* Keep the bar off the page's last element, and off Gravity Forms' submit. */ body.dh-has-actionbar { padding-bottom: calc(var(--dh-actionbar-h) + env(safe-area-inset-bottom)); } body.dh-has-actionbar .dh-actionbar-pad, body.dh-has-actionbar .dh-actionbar-pad .gform_footer { padding-bottom: var(--wp--preset--spacing--40, 30px); } /* The existing floating .nav-bar pill sits at bottom:20px; lift it clear of the action bar. Scoped with :not(.nav-bar--open) so the open state is untouched. */ body.dh-has-actionbar .nav-bar:not(.nav-bar--open) { bottom: calc(var(--dh-actionbar-h) + 16px + env(safe-area-inset-bottom)); } @media (min-width: 782px) { .dh-actionbar { display: none; } body.dh-has-actionbar { padding-bottom: 0; } body.dh-has-actionbar .dh-actionbar-pad, body.dh-has-actionbar .dh-actionbar-pad .gform_footer { padding-bottom: 0; } body.dh-has-actionbar .nav-bar:not(.nav-bar--open) { bottom: 20px; } } /* 5. Section rhythm */ .dh-section { padding-block: var(--wp--preset--spacing--60, 50px); } .dh-section--tight { padding-block: var(--wp--preset--spacing--40, 30px); } .dh-section--tint { background-color: var(--dh-tint); } /* Opt-in alternation: tints every second direct-child section. */ .dh-rhythm > .dh-section:nth-child(even) { background-color: var(--dh-tint); } @media (min-width: 782px) { .dh-section { padding-block: var(--wp--preset--spacing--70, 60px); } } /* 6. Reviews */ .dh-reviews { overflow: hidden; } .dh-reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--wp--preset--spacing--30, 20px); margin-bottom: var(--wp--preset--spacing--30, 20px); padding-bottom: var(--wp--preset--spacing--30, 20px); border-bottom: var(--dh-border); } .dh-reviews__stars { color: var(--dh-red); font-size: 1.25rem; letter-spacing: .1em; line-height: 1; } .dh-reviews__meta { margin: 0; font-size: var(--wp--preset--font-size--small, .875rem); font-weight: 600; color: var(--dh-muted); } /* Make the third-party embed inherit the site's look and never overflow. */ .dh-reviews__embed, .dh-reviews__embed * { font-family: inherit; max-width: 100%; box-sizing: border-box; } .dh-reviews__embed img { height: auto; } .dh-reviews__embed a:focus-visible { outline: 2px solid var(--dh-red); outline-offset: 2px; } /* Reduced-motion guard */ @media (prefers-reduced-motion: reduce) { .dh-price, .dh-actionbar__btn, .dh-reviews__embed * { transition-duration: .001ms; animation-duration: .001ms; animation-iteration-count: 1; } .dh-price:hover { transform: none; } }