box from the layout tree entirely,
* so the s were 2.85:1. */
.ed-prose table { width: 100%; margin: var(--space-15) 0; border-collapse: collapse; }
.ed-prose th,
.ed-prose td {
padding: 0.625rem 0.75rem 0.625rem 0;
border-bottom: 1px solid var(--border-subtle);
text-align: left;
vertical-align: top;
color: var(--text-body-color);
line-height: 1.5;
}
.ed-prose th { font-family: var(--secondary-font); font-weight: 700; color: var(--black-color); }
/* HOMEPAGE + SHARED COMPONENTS — COLOUR ONLY, NO LAYOUT.
The brief says do not touch the homepage, and this does not: there is no
size, weight, spacing or position change below, only a text colour that
was failing AA. Three components, all measured on / at 1280 and 375:
.slide-description .description.gray p 3.05:1 -> 6.86:1
.slide-action-title 3.05:1 -> 6.86:1
The big italic scrolling-text (.text-style-8.gray-75, 35px/200) is LARGE
text, so its threshold is 3:1 — it measures 2.21:1 and still fails, but it
is a decorative marquee of technology names that is also duplicated as
real navigation elsewhere. Raising it would visibly change the homepage's
signature effect, so it is left alone and FLAGGED rather than silently
restyled or silently ignored.
NOTE ON SPECIFICITY: dynamic-slider.min.css declares
`.dynamic-slider .slide-action-title { color: var(--gray-color) }` at
0,2,0. A bare `.slide-action-title` (0,1,0) loses to it — verified by the
fix not landing on the first attempt. The selectors below match the
vendor's own specificity deliberately. */
.dynamic-slider .slide-description .description.gray p,
.dynamic-slider .slide-description .description.gray,
.dynamic-slider .slide-action-title {
color: var(--text-body-color);
}
/*------------------------------------------------------------------------------
1. BANDS — the vertical rhythm and the colour blocking.
Section spacing tiers are 8px multiples throughout: 96 / 64 / 56 / 40 / 24.
------------------------------------------------------------------------------*/
.ed-band {
position: relative;
padding-top: 3.5rem; /* 56px */
padding-bottom: 3.5rem;
}
@media (min-width: 992px) {
.ed-band {
padding-top: var(--space-6); /* 96px */
padding-bottom: var(--space-6);
}
}
.ed-band--tight { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.ed-band--neutral { background-color: var(--surface-neutral); }
.ed-band--primary { background-color: var(--surface-primary); }
.ed-band--secondary { background-color: var(--surface-secondary); }
.ed-band--ink { background-color: var(--surface-ink); color: #fff; }
/* A hairline that reads as a deliberate keyline rather than a Bootstrap of Font Awesome check icons in 16px grey, dumped after the
whole article. The bullets are the most scannable content on the page and
they were the least visible thing on it.
The check icon is kept (it is the only icon data that exists) but is drawn
as a token-coloured SVG-free glyph chip rather than inline text, so the card
has a fixed visual anchor at a consistent size.
------------------------------------------------------------------------------*/
.ed-points {
display: grid;
gap: var(--space-1);
grid-template-columns: 1fr;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 640px) { .ed-points { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ed-points { grid-template-columns: repeat(3, 1fr); gap: var(--space-15); } }
.ed-point {
display: flex;
gap: var(--space-1);
align-items: flex-start;
padding: var(--space-15);
background-color: #fff;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg, 12px);
/* The left edge is the only colour on the card, so the grid reads as a set
without six competing filled blocks. */
border-left: 3px solid var(--secondary-color);
box-shadow: 0 1px 2px rgba(26, 26, 32, 0.04);
/* transform/opacity only — never width/height (ui-ux-pro-max §7). */
transition: transform var(--duration-fast) ease-out,
box-shadow var(--duration-fast) ease-out;
}
.ed-point:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-small);
}
.ed-point__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background-color: var(--surface-secondary);
color: var(--secondary-deep); /* 6.77:1 on the green tint */
font-size: 0.875rem;
}
.ed-point__text {
margin: 0;
font-size: 1rem; /* never below 16px — iOS auto-zooms smaller body text */
line-height: 1.55;
color: var(--black-color);
}
/* Mobile density. At 375px the eleven point cards on /service/seo/ measured
1,381px stacked one-up. Trimming the chrome (not the type — body stays at
16px) brings that down without making the cards feel cramped. */
@media (max-width: 639px) {
.ed-point { padding: var(--space-1); gap: 0.75rem; }
.ed-point__icon { width: 28px; height: 28px; font-size: 0.8125rem; }
}
/* The bullet group's own heading + its closing line. */
.ed-points-group + .ed-points-group { margin-top: var(--space-4); }
.ed-points-group__head { margin-bottom: var(--space-2); }
.ed-points-group__cta {
margin: var(--space-2) 0 0;
font-family: var(--secondary-font);
font-size: 1.0625rem;
font-weight: 700;
color: var(--primary-deep);
}
/*------------------------------------------------------------------------------
4. PROCESS STEPS — service_steps, which the old template rendered NOWHERE.
Three rows of real copy per page were sitting unused in content_json. A
numbered process is the classic no-photography agency module: the numeral is
the graphic.
------------------------------------------------------------------------------*/
.ed-steps {
display: grid;
gap: var(--space-2);
grid-template-columns: 1fr;
/* MEASURED BUG, not a preference: without this the shorter step was
vertically centred in its grid row (step 02 sat 8px below 01 and 03 at
1280px, so the numerals and titles did not line up across the three
columns). `start` top-aligns them. */
align-items: start;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) { .ed-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } }
.ed-step { position: relative; padding-top: var(--space-2); }
/* The connecting rule between steps. Decorative, so it is hidden from AT and
dropped entirely on mobile where the steps stack. */
.ed-step::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background-color: var(--border-subtle);
}
.ed-step:first-child::before { background-color: var(--secondary-color); }
.ed-step__num {
display: block;
margin-bottom: var(--space-05);
font-family: var(--secondary-font);
font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
/* Outlined numeral: the theme's own .text-outline idiom, reused so the
module looks native to the brand rather than bolted on. Falls back to a
solid tinted numeral where -webkit-text-stroke is unsupported. */
color: var(--surface-primary);
-webkit-text-stroke: 2px var(--primary-deep);
}
/* Browsers without -webkit-text-stroke (it is unprefixed nowhere) would render
the numeral in the near-white fill and it would vanish. Paint it solid there. */
@supports not (-webkit-text-stroke: 2px black) {
.ed-step__num { color: var(--primary-deep); }
}
.ed-step__title {
margin: 0 0 var(--space-05);
font-family: var(--secondary-font);
font-size: 1.1875rem;
font-weight: 700;
line-height: 1.3;
color: var(--black-color);
}
.ed-step__body { margin: 0; color: var(--text-body-color); line-height: 1.6; }
/*------------------------------------------------------------------------------
5. FAQ ACCORDION — native /.
Was: Bootstrap collapse with `.show` + aria-expanded="true" on every row, so
all six answers were open and the "accordion" was just more wall. Native
is keyboard-operable and screen-reader-announced with zero JS,
which also means zero new console-error surface.
Touch target: the row is min-height 56px (ui-ux-pro-max §2 needs
>=44px).
------------------------------------------------------------------------------*/
.ed-faq { border-top: 1px solid var(--border-subtle); }
.ed-faq__item { border-bottom: 1px solid var(--border-subtle); }
.ed-faq__q {
display: flex;
gap: var(--space-1);
align-items: center;
justify-content: space-between;
min-height: 56px;
padding: var(--space-15) 0;
cursor: pointer;
list-style: none;
font-family: var(--secondary-font);
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.4;
color: var(--black-color);
transition: color var(--duration-fast) ease-out;
}
.ed-faq__q::-webkit-details-marker { display: none; }
.ed-faq__q:hover { color: var(--primary-deep); }
.ed-faq__q:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* The +/- indicator. Built from two bars so it can rotate on open without
animating layout, and it is not conveying anything by colour alone — the
open/closed state is also exposed natively by . */
.ed-faq__sign {
position: relative;
flex: 0 0 auto;
width: 24px;
height: 24px;
}
.ed-faq__sign::before,
.ed-faq__sign::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
background-color: var(--primary-deep);
transform: translate(-50%, -50%);
transition: transform var(--duration-fast) ease-out, opacity var(--duration-fast) ease-out;
}
.ed-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.ed-faq__item[open] .ed-faq__sign::after {
transform: translate(-50%, -50%) rotate(0deg);
opacity: 0;
}
.ed-faq__a {
padding: 0 0 var(--space-15);
max-width: 68ch;
color: var(--text-body-color);
line-height: 1.65;
}
.ed-faq__item[open] .ed-faq__a { animation: ed-reveal var(--duration-base) ease-out; }
@keyframes ed-reveal {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/*------------------------------------------------------------------------------
6. PRIMARY CTA (ui-ux-pro-max §4 `primary-action`: ONE per screen)
The old page had no button at all — the two conversion points were inline
body links in the same colour as the surrounding prose. Every page now ends
on one ink band with exactly one filled button. Secondary routes (phone,
email) sit under it as plainly subordinate text links.
------------------------------------------------------------------------------*/
.ed-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
min-height: 52px; /* >= 44px touch target */
padding: 0.875rem 2rem;
border: 2px solid transparent;
border-radius: var(--radius-full);
font-family: var(--secondary-font);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.01em;
text-align: center;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
transition: transform var(--duration-fast) ease-out,
background-color var(--duration-fast) ease-out,
color var(--duration-fast) ease-out;
}
/* Filled green + INK label. NOT white-on-green: that pair is 2.39:1 and is the
single most tempting mistake in this palette. Ink on #60b988 is 7.25:1. */
.ed-btn--primary {
background-color: var(--secondary-color);
color: var(--black-color);
}
.ed-btn--primary:hover,
.ed-btn--primary:focus-visible {
background-color: #7ac79c;
color: var(--black-color);
transform: translateY(-2px);
}
.ed-btn--ghost {
border-color: currentColor;
background-color: transparent;
color: var(--black-color);
}
.ed-band--ink .ed-btn--ghost { color: #fff; }
.ed-btn--ghost:hover { transform: translateY(-2px); }
.ed-btn:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
.ed-cta__links {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
align-items: center;
margin-top: var(--space-2);
}
.ed-cta__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 44px;
color: rgba(255, 255, 255, 0.85); /* 12.5:1 on ink */
text-decoration: underline;
text-underline-offset: 4px;
}
.ed-cta__link:hover { color: var(--secondary-color); }
/*------------------------------------------------------------------------------
7. PROOF — portfolio slice + client logos.
The only genuinely photographic assets this site owns (91 portfolio
thumbnails, 6 client logos). Everything here is lazy-loaded; the strip sits
well below the fold on every page that uses it.
------------------------------------------------------------------------------*/
.ed-proof {
display: grid;
gap: var(--space-1);
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .ed-proof { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .ed-proof { grid-template-columns: repeat(6, 1fr); } }
/* object-fit is `contain`, NOT `cover`, and this is not a style preference.
The 91 "portfolio thumbnails" are brand LOGOS, not photographs — verified by
eye at 1280px: with `cover` the strip rendered "HEAL(TH)", "Ang(el)" and
"(Exp)ert" with their wordmarks sliced off at the frame edge. Cropping a
client's logo is worse than showing it small. `contain` on a white card with
padding is the treatment a logo asset actually wants. */
.ed-proof__item {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: var(--space-1);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background-color: #fff;
aspect-ratio: 1 / 1; /* reserves space — CLS (ui-ux-pro-max §3) */
transition: border-color var(--duration-fast) ease-out,
box-shadow var(--duration-fast) ease-out;
}
.ed-proof__item:hover {
border-color: var(--secondary-color);
box-shadow: var(--shadow-small);
}
.ed-proof__item img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
transition: transform var(--duration-slow) ease-out;
}
.ed-proof__item:hover img { transform: scale(1.04); }
.ed-proof__more { margin: var(--space-2) 0 0; }
/* The 3-shot first_gallery that only /service/branding/ has. Sits inline in
the article, 3-up, and simply never renders on the other seven pages. */
.ed-proof--gallery {
margin: var(--space-3) 0;
grid-template-columns: repeat(3, 1fr);
}
.ed-proof--gallery .ed-proof__item {
aspect-ratio: 3 / 2;
cursor: default;
padding: 0;
}
/* These three ARE photographs, unlike the logo thumbnails above, so they take
`cover`. With the inherited `contain` they rendered 161x107 inside a 217px
card, floating in white margins. Verified by eye on /service/branding/.
SEPARATE ISSUE, FLAGGED NOT FIXED: the three images are generic stock
photos of people in a cafe, not examples of Digi Kydo branding work. That
is a content decision for the owner, not a CSS one. */
.ed-proof--gallery .ed-proof__item img {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
}
.ed-logos__title {
margin: var(--space-3) 0 var(--space-1);
font-family: var(--secondary-font);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--black-color);
}
.ed-logos {
display: grid;
gap: var(--space-1);
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
@media (min-width: 768px) { .ed-logos { grid-template-columns: repeat(6, 1fr); } }
.ed-logos__item {
display: flex;
align-items: center;
justify-content: center;
min-height: 64px;
padding: var(--space-1);
}
.ed-logos__item img {
max-width: 100%;
max-height: 48px;
width: auto;
height: auto;
object-fit: contain;
}
/*------------------------------------------------------------------------------
8. SIDE RAIL — the "at a glance" / related-services rail.
Replaces the old right column, which held a "Tag cloud" heading and ~200px
of chips against ~6,000px of article, leaving a third of the page empty on
desktop.
------------------------------------------------------------------------------*/
.ed-split {
display: grid;
gap: var(--space-3);
grid-template-columns: 1fr;
}
@media (min-width: 992px) {
.ed-split { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-5); }
}
/* No rail: centres the 72ch column instead of leaving it hard left with ~400px
of dead space down the right of the article (observed at 1280px before this
rule existed).
NO CALLER AS OF 2026-08-05. /our-services/ was the one page using it — the
note here used to say a rail "would just repeat" its card grid, which was
true of the links but not of their usefulness: that article is 5,307px tall
at 1273px and the cards leave the viewport after the first screen, so it now
takes `rail => 'services'` like /about/ and the industry hubs. The rule is
kept, not deleted: it is the one-line way back if that call is reversed, and
any future body-only page wants it. */
.ed-split--single { grid-template-columns: minmax(0, 1fr); }
.ed-split--single > .ed-measure { margin-inline: auto; }
.ed-rail { position: sticky; top: var(--space-2); align-self: start; }
@media (max-width: 991px) { .ed-rail { position: static; } }
/* Rail first on small screens. Opt-in, and currently only the industry hub /
spoke template asks for it — the service and blog pages keep the rail after
the article, which is right for them because their rails repeat links that
already appear high up the page.
Measured on /industries/healthcare-marketing-kolkata/ at 375px before this
rule: the rail's four spoke links began at y=7468px, and the earliest
in-prose link to any spoke was y=6400px — 7.1 screens of scrolling before a
hub offered any route to the pages it exists to introduce. On desktop the
rail is sticky and sits beside the article from the first screen, so this
only ever applied below 992px.
`order` on a grid item, so nothing about the desktop two-column geometry or
the DOM order (article before aside, which is the correct reading order for
assistive tech on desktop) changes. */
@media (max-width: 991px) {
.ed-split--rail-first > .ed-rail { order: -1; }
}
/* Rail on desktop only. The opposite opt-in to --rail-first, and currently only
/our-services/ asks for it.
Below 992px the rail is static and lands at the very bottom of the article.
Measured on /our-services/ at 375px: that put an 8-link "Our services" card
at y=12,530 of a 13,110px page — after five screens of prose, immediately
above a CTA band and a footer whose "Our Services" tag cloud already carries
the same eight links as 44px targets. 580px of duplicate navigation, at the
one width where vertical space is scarcest.
On desktop the rail is sticky and useful from the first screen, which is the
entire reason it was added, so it stays there.
display:none rather than visibility or a wrapper: the links are duplicated in
the footer at every breakpoint, so nothing becomes unreachable and no
assistive-tech user loses a route. */
@media (max-width: 991px) {
.ed-split--rail-desktop > .ed-rail { display: none; }
}
.ed-rail__card {
padding: var(--space-2);
background-color: var(--surface-neutral);
border-radius: var(--radius-lg, 12px);
border: 1px solid var(--border-subtle);
}
.ed-rail__title {
margin: 0 0 var(--space-1);
font-family: var(--secondary-font);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--black-color);
}
.ed-rail__list { margin: 0; padding: 0; list-style: none; }
.ed-rail__list li { border-top: 1px solid var(--border-subtle); }
.ed-rail__list li:first-child { border-top: 0; }
.ed-rail__list a {
display: flex;
align-items: center;
min-height: 44px; /* touch target */
padding: var(--space-05) 0;
color: var(--text-body-color);
text-decoration: none;
transition: color var(--duration-fast) ease-out;
}
.ed-rail__list a:hover { color: var(--primary-deep); text-decoration: underline; }
/*------------------------------------------------------------------------------
9. INTRO MEDIA — used only where a real image exists (2 of 8 service pages).
The layout must not collapse when it is absent, so the image lives in an
optional grid cell, not in a background or a fixed-height hero.
------------------------------------------------------------------------------*/
.ed-intro { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 992px) {
.ed-intro--with-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
}
.ed-intro__media { margin: 0; }
.ed-intro__media img,
.ed-intro__media picture {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-lg, 12px);
}
.ed-intro__media img { aspect-ratio: 4 / 3; object-fit: cover; }
/*------------------------------------------------------------------------------
10. REDUCED MOTION. overrides.css §5 already zeroes durations globally; this
adds the two animations introduced in this file.
------------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
.ed-point,
.ed-btn,
.ed-proof__item img,
.ed-faq__sign::before,
.ed-faq__sign::after {
transition: none !important;
}
.ed-point:hover,
.ed-btn:hover,
.ed-proof__item:hover img { transform: none !important; }
.ed-faq__item[open] .ed-faq__a { animation: none !important; }
}
/*------------------------------------------------------------------------------
11. FIXED ENQUIRY RAIL (owner request, 2026-07-29)
Two always-visible actions — Call and Email — on every public page. Markup in
resources/views/partials/enquiry-rail.blade.php; values come from Settings.
MOTION IS TRANSFORM-ONLY (ui-ux-pro-max §7). The collapsed/expanded states are
one translateX on the rail, not an animated width or max-width, so expanding
costs no layout. The label column is a fixed 8.5rem so both actions travel the
same distance and the two icons stay vertically aligned mid-animation.
COLOUR, measured (see tokens.css):
Call : ink text on --secondary-color #f95e1a 5.48:1 AA
Email : white text on --surface-ink #1a1a20 17.32:1 AAA
Email hover/focus becomes the orange fill with ink text, i.e. it converges
on the Call treatment rather than inventing a third state colour.
Exactly one of the two is a filled brand action (Call), so the pair still
reads as one primary + one subordinate (ui-ux-pro-max §4).
STACKING: z-index 12. Above page content and above .side-widget (11), and
deliberately BELOW .menu-grid (60), .menu-toggle (70) and the Bootstrap modal
(1055) — so it can never cover the hamburger, the open off-canvas menu, or a
dialog.
------------------------------------------------------------------------------*/
.eq-rail {
--eq-label-w: 8.5rem;
--eq-size: 56px;
position: fixed;
z-index: 12;
top: 50%;
right: 0;
display: flex;
flex-direction: column;
gap: 2px;
/* Parked so only the --eq-size icon block is on screen. */
transform: translate3d(var(--eq-label-w), -50%, 0);
transition: transform var(--duration-base) var(--ease-emphasis);
}
.eq-rail:hover,
.eq-rail:focus-within {
transform: translate3d(0, -50%, 0);
}
.eq-rail__item {
display: flex;
align-items: center;
gap: 0.75rem;
width: calc(var(--eq-size) + var(--eq-label-w));
min-height: var(--eq-size);
padding-right: 1rem;
background-color: var(--surface-ink);
color: #fff; /* 17.32:1 on ink */
text-decoration: none;
touch-action: manipulation;
transition: background-color var(--duration-fast) ease-out,
color var(--duration-fast) ease-out;
}
.eq-rail__item:first-child { border-top-left-radius: var(--radius-md); }
.eq-rail__item:last-child { border-bottom-left-radius: var(--radius-md); }
/* The one filled brand action. INK on orange, never white on orange — white on
#f95e1a is 3.16:1 and is the tempting mistake in this palette. */
.eq-rail__item--primary {
background-color: var(--secondary-color);
color: var(--black-color); /* 5.48:1 */
}
.eq-rail__item:hover,
.eq-rail__item:focus-visible {
background-color: var(--secondary-color);
color: var(--black-color);
}
.eq-rail__item:focus-visible {
outline: 3px solid var(--primary-color);
outline-offset: -3px; /* inset: the rail is flush to the viewport edge */
}
.eq-rail__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--eq-size);
height: var(--eq-size); /* 56x56 touch target on its own */
}
.eq-rail__icon svg { display: block; }
.eq-rail__label {
flex: 0 0 auto;
font-family: var(--secondary-font);
font-size: 0.9375rem; /* 15px */
font-weight: 700;
letter-spacing: 0.01em;
white-space: nowrap;
}
/* BELOW 1280px THE RAIL BECOMES A BOTTOM BAR. THIS BREAKPOINT IS MEASURED,
NOT GUESSED, AND MY FIRST ATTEMPT AT IT WAS WRONG.
I first set it at 768px. Then I swept every page at 768 / 992 / 1024 /
1152 / 1280, scrolling through each one and testing the rail's 56px
collapsed strip against PAINTED TEXT RUNS (Range.getClientRects, not
element boxes — a box reaches the column edge even when its glyphs do
not) and against every interactive control. Results:
768px overlapped body copy, portfolio thumbnails, .full-link cards
AND a form
, because a body
padding would show as a gap under the ink footer. */
@media (max-width: 1279.98px) {
.eq-rail {
top: auto;
bottom: 0;
left: 0;
right: 0;
flex-direction: row;
gap: 0;
transform: none;
padding-bottom: env(safe-area-inset-bottom, 0px);
background-color: var(--surface-ink);
box-shadow: 0 -2px 12px rgba(26, 26, 32, 0.25);
}
.eq-rail:hover,
.eq-rail:focus-within { transform: none; }
.eq-rail__item {
flex: 1 1 50%;
width: auto;
min-height: 56px;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 0 !important;
}
.eq-rail__icon { width: 24px; height: 24px; }
.eq-rail__icon svg { width: 20px; height: 20px; }
.eq-rail__label { font-size: 1rem; }
/* CLEAR THE BAR — and this is the SECOND attempt, the first was wrong.
I first put the clearance on `.shock-footer .bottom-bar`. Measured at
375 and 414 on /blog/: the copyright line was still covered by 35px,
because .bottom-bar centres its content, so a 72px padding-bottom only
moves the text up ~36px. Putting the padding on .shock-footer instead
adds the space BELOW the bottom bar, and because the footer is ink and
the enquiry bar is ink, the join is seamless. Re-measured: clear at
375 / 414 / 768 / 1024 / 1152 on /blog/, /contact/ and /. */
.shock-footer {
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
/* And lift the back-to-top widget off it so neither covers the other. */
.side-widget.to-right {
height: calc(100% - 56px - env(safe-area-inset-bottom, 0px));
}
}
@media (prefers-reduced-motion: reduce) {
.eq-rail,
.eq-rail__item { transition: none !important; }
}
/*------------------------------------------------------------------------------
12. THE ORANGE REBRAND — the handful of places that needed more than a token
swap, because a value that was legible against green is not against orange.
------------------------------------------------------------------------------*/
/* The filled button's hover. Was a lighter green; now a lighter orange, which
also RAISES the ink contrast (5.48 -> 6.35) rather than lowering it. */
.ed-btn--primary {
background-color: var(--secondary-color);
color: var(--black-color); /* 5.48:1 */
}
.ed-btn--primary:hover,
.ed-btn--primary:focus-visible {
background-color: var(--secondary-hover-color); /* 6.35:1 with ink */
color: var(--black-color);
}
/* Orange text on a light surface uses the DEEPEST variant, not --secondary-deep.
On the orange tint --secondary-deep is 4.83:1 — a pass, but close enough to
the 4.5 line that any future tint tweak would break it. Deepest is 6.42:1. */
.ed-eyebrow--secondary { color: var(--secondary-deepest); }
.ed-point__icon { color: var(--secondary-deepest); } /* 6.42:1 on the tint */
/* THE BADGE. Pre-existing AA failure, surfaced by the audit and fixed here.
Three states, all measured:
resting outline badge #8f93a5 on #fff 3.05:1 FAIL -> #565a69, 6.86
.active (accent fill) #fff on #60b988 2.39:1 FAIL -> ink, 5.48
:hover (accent fill) #fff on #f95e1a 3.16:1 FAIL -> ink, 5.48
I CAUSED AND CAUGHT A REGRESSION HERE. My first pass repointed
`.badge .badge-text.gray` to body colour without excluding the FILLED
states, which put #565a69 on the orange fill at 2.17:1 — worse than the
white it replaced. Measured on /portfolio/a-to-z/ and //, where the
active chip is `.badge.outline.active`, not `.badge.secondary`. Hence the
explicit .active / :hover selectors below and the :not() on the grey rule.
Do not simplify this back into one selector. */
.badge.secondary .badge-text,
.badge.accent .badge-text,
.badge.active .badge-text,
.badge:hover .badge-text,
.link:hover .badge .badge-text {
color: var(--black-color) !important;
}
.tag-cloud .badge:not(.active):not(:hover) .badge-text.gray,
.badge:not(.active):not(:hover) .badge-text.gray {
color: var(--text-body-color);
}
/* ...except inside the ink footer, where the grey IS the accessible choice
(#8f93a5 on #1a1a20 is 5.62:1 and #565a69 would be 2.53:1). */
.shock-footer .badge:not(.active):not(:hover) .badge-text.gray { color: var(--gray-color); }
/*------------------------------------------------------------------------------
13. THE REMAINING PAGES (2026-07-29 — /contact/, /gallery/, /blog/, posts,
/portfolio/ detail, taxonomy archives, 404).
Same system as §1-9. Nothing below introduces a new colour, a new type step
or a new spacing value — it composes the tokens already locked in tokens.css.
------------------------------------------------------------------------------*/
/* The article