and
| inside a dk container were invisible to it. This section is exactly
that: the card paragraphs were 13px and the "You'll also need" list 12px
mono, both in --fg3 — real instructions rendered as fine print.
═══════════════════════════════════════════════════════════════════════ */
.dk-learn-card p {
font-size: 15px;
line-height: 1.75;
color: var(--fg2);
}
.dk-learn-card .dk-also-list li,
.dk-also-list li {
font-size: 14.5px;
line-height: 1.6;
color: var(--fg2);
padding: 9px 0;
}
.dk-learn-card__label { font-size: 12.5px; }
.dk-learn-card { padding: 22px; }
.dk-kit-lede { font-size: 16px; line-height: 1.8; }
@media (max-width: 640px) {
.dk-learn-card p { font-size: 15.5px; }
.dk-also-list li { font-size: 15px; }
.dk-kit-lede { font-size: 16.5px; }
}
/* The rest of the unclassed prose, found by scanning / / carrying
real sentences rather than by class name. FAQ answers were 11px and the
Titan disclaimer 10px — the two places on the site where the text most
needs reading. */
.dk-faq-answer p,
.dk-faq-answer li { font-size: 14.5px; line-height: 1.75; color: var(--fg2); }
.dk-wire-notes p { font-size: 14px; line-height: 1.7; color: var(--fg2); }
.dk-compare td { font-size: 14px; line-height: 1.55; }
.dk-titan-cap__desc p { font-size: 14px; line-height: 1.65; }
.dk-titan-card__fine p,
.dk-titan-card__fine { font-size: 13px; line-height: 1.6; }
.dk-hint p { font-size: 14px; line-height: 1.6; }
@media (max-width: 640px) {
.dk-faq-answer p, .dk-faq-answer li { font-size: 15px; }
.dk-wire-notes p, .dk-compare td, .dk-titan-cap__desc p, .dk-hint p { font-size: 14.5px; }
}
/* Final sweep. Scanning by ELEMENT rather than class — every , ,
and holding a real sentence — turned up these last few sitting
under the 14px floor behind higher-specificity rules. Doubled selectors
so they land. Genuine chrome (the kit pill, footer status line, stock
meter count, pin-map title) is deliberately left at 12.5. */
.dk-price-meta.dk-price-meta,
.dk-price-meta.dk-price-meta span { font-size: 14px; }
.dk-base__proj-adds.dk-base__proj-adds { font-size: 14px; line-height: 1.6; }
.dk-extra.dk-extra { font-size: 14px; }
.dk-build-step__text.dk-build-step__text { font-size: 14px; line-height: 1.65; }
.dk-hint.dk-hint,
.dk-hint.dk-hint p { font-size: 14px; line-height: 1.6; }
.dk-titan-cap__desc.dk-titan-cap__desc,
.dk-titan-cap__desc.dk-titan-cap__desc p { font-size: 14px; line-height: 1.65; }
.dk-step__d.dk-step__d { font-size: 14px; line-height: 1.65; }
.dk-breadcrumb__inner.dk-breadcrumb__inner,
.dk-breadcrumb__inner.dk-breadcrumb__inner span,
.dk-breadcrumb__inner.dk-breadcrumb__inner a { font-size: 13px; }
.dk-footer__legal.dk-footer__legal,
.dk-footer__legal.dk-footer__legal span,
.dk-footer__legal.dk-footer__legal a { font-size: 13px; }
@media (max-width: 640px) {
.dk-price-meta.dk-price-meta,
.dk-price-meta.dk-price-meta span,
.dk-build-step__text.dk-build-step__text,
.dk-hint.dk-hint,
.dk-hint.dk-hint p,
.dk-step__d.dk-step__d { font-size: 14.5px; }
}
/* Two more carrying real sentences rather than labels. */
.dk-entry-card__sub.dk-entry-card__sub { font-size: 14px; line-height: 1.5; }
.dk-titan-card__bubble.dk-titan-card__bubble { font-size: 14px; line-height: 1.6; }
/* ═══════════════════════════════════════════════════════════════════════
FULL-SITE FLOOR — final pass
Swept all 21 /dk routes, measuring each element's OWN text nodes (so a
container is not credited with its children's type). 36 classes were
still under 14px. Everything below carries a sentence, a name or a value
and goes to 14px; what is left small after this is only uppercase mono
micro-labels and numeric pips, listed at the end of this file's history.
Includes the b1-* board-page classes, which no earlier pass touched —
the component descriptions on /dk/base1 and /dk/solder-school were
13.33px.
═══════════════════════════════════════════════════════════════════════ */
.dk-auth-benefit__text.dk-auth-benefit__text,
.dk-auth-help.dk-auth-help,
.dk-auth-help.dk-auth-help p,
.dk-auth-guest.dk-auth-guest,
.dk-auth-fine.dk-auth-fine,
.dk-ck-browse.dk-ck-browse,
.dk-ck-summary__ask.dk-ck-summary__ask,
.dk-titan-quick__label.dk-titan-quick__label,
.dk-hero-titan__line.dk-hero-titan__line,
.dk-offer__no.dk-offer__no,
.dk-parts-empty.dk-parts-empty,
.dk-parts-empty.dk-parts-empty .mono,
.dk-pinmap__foot.dk-pinmap__foot,
.dk-part-chip.dk-part-chip,
.dk-base__blk.dk-base__blk,
.dk-pg-all.dk-pg-all,
.dk-titan-card__fine.dk-titan-card__fine,
.dk-titan-card__fine.dk-titan-card__fine p,
.dk-kit-card__img.dk-kit-card__img,
.dk-label.dk-label,
.dk-auth-more.dk-auth-more > summary {
font-size: 14px;
line-height: 1.6;
}
/* Board pages: part names and the "why it is here" note beside each marker
are the whole point of those pages and were the smallest text on them. */
.b1 .b1-part__name,
.b1-part__name.b1-part__name { font-size: 14.5px; line-height: 1.45; }
.b1 .b1-part__why,
.b1-part__why.b1-part__why { font-size: 14px; line-height: 1.6; }
/* Code listings keep monospace convention but stop being fine print. */
.dk-code-pre.dk-code-pre,
.dk-code-pre.dk-code-pre code { font-size: 13.5px; line-height: 1.65; }
@media (max-width: 640px) {
.dk-auth-benefit__text.dk-auth-benefit__text,
.dk-auth-help.dk-auth-help,
.dk-auth-help.dk-auth-help p,
.dk-hero-titan__line.dk-hero-titan__line,
.dk-pinmap__foot.dk-pinmap__foot,
.b1-part__why.b1-part__why { font-size: 14.5px; }
.b1-part__name.b1-part__name { font-size: 15px; }
}
/* Last six. These read as labels by their class names but each holds a
sentence or a value — "28 parts packed in this kit", "Per project:
30–60 minutes" — so by the site rule they are data, not chrome. */
.dk-stock-meter__count.dk-stock-meter__count,
.dk-pinmap__title.dk-pinmap__title,
.dk-kit-pill.dk-kit-pill,
.dk-stat__label.dk-stat__label,
.dk-team-card__role.dk-team-card__role,
.dk-ck-summary__note.dk-ck-summary__note,
.dk-footer__status.dk-footer__status { font-size: 14px; line-height: 1.5; }
/* ═══════════════════════════════════════════════════════════════════════
DESCRIPTIONS — one size, and a bigger one
Two different rich-text wrappers were in use at two different sizes:
.dk-rich (product description) at 17px and .dk-prose (kit description)
at 14.5px, so the same kind of text read smaller on a kit page than on
a product page for no reason. Both are 17.5px now, with the headings,
list items and tables inside them scaled to match — those were 12–13px,
which made a subheading smaller than the paragraph under it.
═══════════════════════════════════════════════════════════════════════ */
.dk-rich,
.dk-rich p,
.dk-prose,
.dk-prose p {
font-size: 17.5px;
line-height: 1.85;
color: var(--fg2);
}
.dk-product-desc { font-size: 17.5px; line-height: 1.8; }
.dk-rich li,
.dk-prose li {
font-size: 17.5px;
line-height: 1.75;
margin-bottom: 10px;
}
/* A subheading has to outrank the paragraph it introduces. */
.dk-rich h2, .dk-rich h3, .dk-rich h4,
.dk-prose h2, .dk-prose h3, .dk-prose h4 {
font-size: 14px;
letter-spacing: .09em;
margin: 30px 0 12px;
}
.dk-rich h2, .dk-prose h2 { font-size: 15px; }
.dk-rich table, .dk-prose table { font-size: 15px; }
.dk-rich th, .dk-rich td,
.dk-prose th, .dk-prose td { padding: 10px 12px; font-size: 15px; }
/* The measure grows with the type so lines do not run long. */
.dk-rich { max-width: 74ch; }
@media (max-width: 640px) {
.dk-rich, .dk-rich p, .dk-prose, .dk-prose p,
.dk-rich li, .dk-prose li,
.dk-product-desc { font-size: 17px; }
.dk-rich table, .dk-prose table,
.dk-rich th, .dk-rich td,
.dk-prose th, .dk-prose td { font-size: 14.5px; }
}
/* The description's own section headings were 1rem (16px) while the body
under them is now 17.5px — a heading smaller than its paragraph, which
reads as a mistake. Sized to lead the text they introduce. */
.dk-pdp-sec__h {
font-size: 20px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 12px;
}
.dk-pdp-sec { margin-bottom: 30px; }
@media (max-width: 640px) {
.dk-pdp-sec__h { font-size: 18.5px; }
}
/* ═══════════════════════════════════════════════════════════════════════
WISHLIST HEARTS
The backend existed; nothing called it. These are the two buttons that
now do — the one beside Add to cart, and one per product card.
═══════════════════════════════════════════════════════════════════════ */
.dk-wish-btn {
cursor: pointer;
transition: color .18s, border-color .18s, background .18s;
}
.dk-wish-btn.is-on {
color: #e5484d;
border-color: color-mix(in srgb, #e5484d 55%, transparent);
background: color-mix(in srgb, #e5484d 9%, transparent);
}
.dk-wish-btn.is-on svg { fill: currentColor; }
.dk-wish-btn:not(.is-on):hover { color: #e5484d; }
/* Card heart: sits over the image, weight enough to read on a photo. */
.dk-card-wish {
position: absolute;
top: 8px; right: 8px;
z-index: 3;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
background: color-mix(in srgb, var(--bg2) 88%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--fg3);
cursor: pointer;
padding: 0;
opacity: 0;
transform: scale(.9);
transition: opacity .18s, transform .18s, color .18s, border-color .18s;
}
/* Revealed on hover with a mouse; always visible on touch, where there is
no hover to reveal it with. */
.dk-product-card:hover .dk-card-wish,
.dk-card-wish:focus-visible,
.dk-card-wish.is-on { opacity: 1; transform: none; }
@media (hover: none) and (pointer: coarse) {
.dk-card-wish { opacity: 1; transform: none; width: 36px; height: 36px; }
}
.dk-card-wish:hover { color: #e5484d; border-color: color-mix(in srgb, #e5484d 50%, transparent); }
.dk-card-wish.is-on { color: #e5484d; border-color: color-mix(in srgb, #e5484d 55%, transparent); }
.dk-card-wish.is-on svg { fill: currentColor; }
/* The card image box has to establish the positioning context for it. */
.dk-product-card__img { position: relative; }
/* Feedback line. The save is instant; this says where it went. */
.dk-wish-toast {
position: fixed;
left: 50%; bottom: 24px;
transform: translateX(-50%) translateY(12px);
z-index: 1300;
display: flex; align-items: center; gap: 12px;
max-width: min(460px, calc(100vw - 32px));
padding: 13px 18px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
font-size: 14px;
color: var(--fg);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
}
.dk-wish-toast.is-on { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.dk-wish-toast a { color: var(--primary); font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
.dk-wish-toast, .dk-card-wish { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
MISSING-IMAGE PLACEHOLDER
Two cases, one look. dk_placeholder_img() covers a row with no image
path; img-fallback.js covers the commoner case — a path stored in the
database whose file is not on disk, which the browser otherwise renders
as its broken-image icon (7 of 61 images on the shop grid).
═══════════════════════════════════════════════════════════════════════ */
img.dk-img-standin,
img[data-dk-placeholder] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Slightly recessive: it is a stand-in, not the product. */
opacity: .92;
}
/* Where the box is a contain-fit frame (product gallery, featured block) the
tile should fill rather than letterbox. */
.dk-gallery__main img[data-dk-placeholder],
.dk-gallery__main img.dk-img-standin,
.dk-featured-kit__img img[data-dk-placeholder],
.dk-featured-kit__img img.dk-img-standin { object-fit: cover; }
/* The old text box, kept for any spot still using it. */
.dk-noimg {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--fg3);
background: var(--bg3, var(--bg2));
}
/* ── Featured block, trimmed ──────────────────────────────────────────────
"// Pick of the week / Featured" was eating most of a laptop screen: 72px
of section padding at each end, a 300px minimum on the image and 36px of
body padding around one product. Everything below is a size — no colour,
no layout, no type-scale change beyond the product name — so the block
still reads as part of the same homepage, it just takes less room.
The section heading keeps its size deliberately: shrinking it here would
make this one section's title smaller than every other section's.
This sheet loads after diykit.css, so these win without !important. */
.dk-featured { padding: 44px 0; }
/* align-items:start in the base sheet let the image cell size itself from the
photo's natural aspect ratio: measured 817px tall in a 545px column, against
a 248px text block. THAT was the section's height, not the padding. stretch
ties the image to the text block instead, so the row is as tall as its
content and no taller, with min-height as the floor. */
.dk-featured-kit { gap: 32px; margin-top: 18px; align-items: stretch; }
/* stretch alone was not enough: the ![]() is in flow, so its natural aspect
still set the row height (817px from a 545px-wide column) and the text block
just stretched to match. Taking the image out of flow leaves the cell with
no intrinsic height, so the row is sized by the text and the min-height
floor, and the photo crops to whatever that comes to. */
.dk-featured-kit__img { position: relative; overflow: hidden; min-height: 240px; height: 100%; }
.dk-featured-kit__img > img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
}
.dk-featured-kit__body { padding: 24px 24px 24px 0; }
.dk-featured-kit__name { font-size: 18px; }
.dk-featured-kit__desc { font-size: 14px; line-height: 1.65; margin-top: 8px; }
.dk-featured-kit__foot { margin-top: 14px; }
/* Below 1025px the base sheet stacks the grid and pads the body all round;
keep that behaviour, just less of it. Guarded to the same breakpoint the
base sheet uses so the stack itself is untouched. */
@media (max-width: 1024px) {
.dk-featured { padding: 32px 0; }
.dk-featured-kit__img { min-height: 180px; }
.dk-featured-kit__body { padding: 20px; }
}
/* ── About: the two-column mission block ─────────────────────────────────
This was an inline style on the div — display:grid, 1fr 1fr, gap 64px, no
breakpoint. `1fr` is minmax(auto, 1fr), so the tracks could never shrink
below the copy's min-content: measured 454px of content inside a 374px
viewport at a 390px device width, i.e. 80px of horizontal scroll on every
phone. minmax(0, 1fr) removes the floor, and the stack below removes the
two-column layout entirely where there is no room for it. */
.dk-about-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 64px;
align-items: start;
}
@media (max-width: 900px) {
.dk-about-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.dk-about-plate { height: 200px; }
}
/* ── Rich product copy ────────────────────────────────────────────────────
dk_html() used to delete images, figures, blockquotes and links before they
ever reached the page, so none of them had styles. It no longer does —
measured across the 249 stored descriptions, that was 31 figures, 23 block
quotes, 8 images and a link being thrown away. Everything below is the
styling those elements now need.
No base font-size or line-height here on purpose: the reading size for
.dk-rich is set earlier in this file and was tuned deliberately. This block
only adds elements that had no rules at all. */
/* Images and figures. Stored width/height attributes are kept for aspect
ratio, but must never win over the column: height:auto stops a declared
height from squashing a scaled-down image. */
.dk-rich img {
display: block;
max-width: 100%;
height: auto;
margin: 20px 0;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg2);
}
.dk-rich figure { margin: 24px 0; }
.dk-rich figure img { margin: 0; }
.dk-rich figcaption {
margin-top: 10px;
font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: 14px;
line-height: 1.6;
color: var(--fg3);
}
/* Links inside copy have to be obviously clickable without shouting. */
.dk-rich a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
overflow-wrap: anywhere; /* a bare URL must not widen the column */
}
.dk-rich a:hover { text-decoration-thickness: 2px; }
/* A pulled-out line: rule in the accent colour, no quotation marks, because
these are supplier notes rather than testimonials. */
.dk-rich blockquote {
margin: 20px 0;
padding: 4px 0 4px 18px;
border-left: 3px solid var(--primary);
color: var(--fg);
}
.dk-rich blockquote > *:first-child { margin-top: 0; }
.dk-rich blockquote > *:last-child { margin-bottom: 0; }
/* Part numbers, pin names, register values. */
.dk-rich code, .dk-rich kbd {
font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: .92em;
background: var(--bg3);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 6px;
color: var(--fg);
}
.dk-rich pre {
margin: 18px 0;
padding: 16px 18px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow-x: auto;
font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: 14.5px;
line-height: 1.7;
}
.dk-rich pre code { background: none; border: 0; padding: 0; font-size: inherit; }
/* Definition lists — what a spec sheet pasted from a supplier often becomes. */
.dk-rich dl { margin: 0 0 16px; }
.dk-rich dt { color: var(--fg); font-weight: 600; margin-top: 12px; }
.dk-rich dd { margin: 4px 0 0; padding-left: 16px; border-left: 1px solid var(--border); }
/* A wide pin table must scroll inside its own box, never widen the page.
overflow-x on the table itself, since the stored markup has no wrapper to
hang it on and adding one would mean rewriting the author's HTML. */
.dk-rich table { display: block; overflow-x: auto; max-width: 100%; }
.dk-rich caption {
caption-side: top;
text-align: left;
padding-bottom: 8px;
color: var(--fg3);
font-size: 14px;
}
.dk-rich sup, .dk-rich sub { font-size: .72em; line-height: 0; }
.dk-rich small { font-size: .88em; color: var(--fg3); }
.dk-rich mark { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--fg); padding: 0 3px; }
.dk-rich abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.dk-rich em, .dk-rich i { color: var(--fg2); }
/* An author's text-align:center on a paragraph should not centre a whole
pasted block that happens to contain a table. */
.dk-rich table[style*="text-align"] { text-align: left; }
@media (max-width: 640px) {
.dk-rich img, .dk-rich figure { margin: 16px 0; }
.dk-rich pre { padding: 12px 14px; font-size: 14px; }
}
/* ── Logo ─────────────────────────────────────────────────────────────────
Only the ".ae" came off. It read as a web address rather than part of the
name, and the printed lockup (assets/branding/diykit-logo.png) carries no
domain either — so the screen now matches the print.
The .tld rule stays as a belt-and-braces: if any template still emits a
, it will not print. Removing the markup is the fix;
this is the safety net. */
.dk-logo__text .tld { display: none !important; }
/* Set as two words, "DIY KIT", the way the printed lockup sets it. The
non-breaking space in the markup keeps them on one line; this just gives
the pair a little air at the larger header size. */
.dk-logo__text { letter-spacing: .01em; }
.dk-logo { transition: opacity .15s ease; }
.dk-logo:hover { opacity: .88; }
.dk-footer .dk-logo { display: inline-flex; }
/* ── Policies page ────────────────────────────────────────────────────────
A legal page is read in two ways: scanned for one clause, or read straight
through. The contents strip serves the first, the panelled sections the
second. Both reuse .dk-panel and .dk-rich, so the type, list markers and
spacing are the same ones the product descriptions use — a policy page that
invents its own typography is how a site starts to feel assembled rather
than designed. */
.dk-pol-head {
display: flex; flex-wrap: wrap; gap: 24px;
align-items: flex-start; justify-content: space-between;
}
.dk-pol-lede {
color: var(--fg2); font-size: 15.5px; line-height: 1.75;
margin-top: 10px; max-width: 68ch;
}
.dk-pol-updated {
font-size: 13.5px; line-height: 1.6; color: var(--fg3);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 10px 14px; white-space: nowrap;
}
.dk-pol-updated strong { color: var(--fg); font-weight: 600; }
.dk-pol-wrap { padding-bottom: 64px; }
/* Sticky so the clause you are reading never costs you a scroll back up to
find the next one. Falls back to a normal block where sticky is unsupported. */
.dk-pol-toc {
position: sticky; top: 0; z-index: 5;
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
padding: 14px 0 16px; margin-bottom: 8px;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.dk-pol-toc__label {
font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
color: var(--fg3); margin-right: 4px;
}
.dk-pol-toc a {
font-size: 14px; text-decoration: none;
color: var(--fg2); border: 1px solid var(--border);
border-radius: 999px; padding: 6px 13px;
transition: border-color .15s ease, color .15s ease;
}
.dk-pol-toc a:hover { color: var(--primary); border-color: var(--primary); }
.dk-pol-sec { margin-top: 22px; }
/* scroll-margin, not padding: the sticky strip would otherwise sit on top of
the heading you just jumped to. */
.dk-pol-sec { scroll-margin-top: 76px; }
.dk-pol-sec .dk-panel__body { padding: 22px 24px; }
.dk-pol-sec .dk-rich > ul:last-child,
.dk-pol-sec .dk-rich > p:last-child { margin-bottom: 0; }
.dk-pol-note { color: var(--fg3); font-size: 14px; }
@media (max-width: 640px) {
.dk-pol-updated { white-space: normal; }
.dk-pol-toc { position: static; }
.dk-pol-sec .dk-panel__body { padding: 18px 16px; }
}
/* ── BOARD SHOWCASE: PHOTO STRIP ────────────────────────────────────────
The homepage section showed one image per board while three sat unused in
Boards Studio, and Solder School showed none at all — it has onboard
blocks, so it drew the block diagram instead, which cannot light up
because that board has no builds. Photo now wins whenever the diagram
would be inert, and this is the strip that turns the board over. */
.dk-base__thumbs {
display: flex;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
.dk-base__thumb {
width: 62px;
height: 62px;
padding: 0;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg2, #fff);
cursor: pointer;
overflow: hidden;
flex: 0 0 auto;
opacity: .6;
transition: opacity .15s, border-color .15s, transform .15s;
}
.dk-base__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dk-base__thumb:hover { opacity: 1; transform: translateY(-1px); }
/* The selected shot is the one on the plate — it must not look clickable-
pending, or people click it expecting a change and get nothing. */
.dk-base__thumb.is-on {
opacity: 1;
border-color: var(--accent, #16a34a);
box-shadow: 0 0 0 1px var(--accent, #16a34a) inset;
cursor: default;
}
.dk-base__thumb:focus-visible {
outline: 2px solid var(--accent, #16a34a);
outline-offset: 2px;
}
@media (max-width: 640px) {
.dk-base__thumb { width: 52px; height: 52px; }
}
/* ── BOARD SHOWCASE: FACTS ROW ──────────────────────────────────────────
The counts used to be inert text. They are links now, so they need to
look clickable — the arrow alone is not enough of a signal when the tile
beside it is a plain chip that does nothing. */
.dk-bs__fact--go {
text-decoration: none;
transition: border-color .15s, background .15s, transform .15s;
}
.dk-bs__fact--go:hover {
border-color: var(--accent, #16a34a);
transform: translateY(-1px);
}
/* "Read the board" is the primary route; the counted tiles are shortcuts
into one part of it. Tinting it keeps that order readable at a glance. */
.dk-bs__fact--read {
background: var(--accent-soft, #ecfdf3);
border-color: var(--accent, #16a34a);
font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════════════
NAV SEARCH
─────────────────────────────────────────────────────────────────────
Prefixed .dk-navsearch, NOT .dk-search: .dk-search is already taken by
the hero search box in diykit.css (display:flex, max-width:540px). The
first version of this used it and inherited that 540px cap, so the
panel opened as a narrow box in the top-left corner instead of
spanning the bar — and it leaked its own border-top and padding back
onto the hero box. Keep the prefix.
Why a drop-down panel and not an always-visible input: the navbar is
already at capacity at 1024px (logo + 6 links + 6 actions). An inline
field would have forced the links into the hamburger on laptops. The
button costs 36px, and the panel gets the full container width when
it opens — a longer field than an inline one could ever have been.
All colours are theme tokens, so this follows the light/dark toggle
without a second rule set. The old theme's search hardcoded #0b1220
and would have been unreadable in dark mode here.
═══════════════════════════════════════════════════════════════════ */
.dk-navsearch[hidden] { display: none !important; }
.dk-navsearch {
border-top: 1px solid var(--border);
background: var(--bg);
padding: 12px 0;
animation: dkSearchIn .18s ease;
}
@keyframes dkSearchIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.dk-navsearch { animation: none; }
}
.dk-navsearch__form {
position: relative;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg2, var(--bg));
padding: 0 8px 0 12px;
transition: border-color .2s, box-shadow .2s;
}
.dk-navsearch__form:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.dk-navsearch__icon { color: var(--fg3); flex-shrink: 0; }
.dk-navsearch input[type="search"] {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--fg);
/* 16px on mobile stops iOS Safari zooming the page on focus. */
font-size: 15px;
padding: 12px 0;
font-family: inherit;
}
.dk-navsearch input[type="search"]::placeholder { color: var(--fg3); }
/* Chrome draws its own grey X that collides with our close button. */
.dk-navsearch input[type="search"]::-webkit-search-cancel-button { display: none; }
.dk-navsearch__go {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
padding: 9px 16px;
border: 0;
border-radius: var(--radius);
background: var(--primary);
color: var(--primary-fg);
cursor: pointer;
flex-shrink: 0;
}
.dk-navsearch__go:hover { filter: brightness(1.08); }
.dk-navsearch__close {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border: 0; background: transparent; color: var(--fg3);
cursor: pointer; border-radius: var(--radius); flex-shrink: 0;
}
.dk-navsearch__close:hover { color: var(--fg); background: var(--border); }
/* ── Suggestions ─────────────────────────────────────────────────── */
.dk-navsearch__drop[hidden] { display: none !important; }
.dk-navsearch__drop {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
z-index: 240; /* above the page, below the mobile drawer */
max-height: min(70vh, 520px);
overflow-y: auto;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 18px 40px rgba(0,0,0,.16);
padding: 6px;
}
.dk-sd__label {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--fg3);
padding: 10px 10px 6px;
}
.dk-sd__row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius);
text-decoration: none;
color: var(--fg);
}
.dk-sd__row:hover,
.dk-sd__row.is-active {
background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.dk-sd__thumb {
width: 40px; height: 40px;
flex-shrink: 0;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg2, var(--bg));
object-fit: contain;
padding: 2px;
}
.dk-sd__body { flex: 1; min-width: 0; }
.dk-sd__name {
font-size: 13px;
line-height: 1.35;
/* Two lines then ellipsis: part names here run long ("Li-Po 3.7V
602040 500mAh with protection"), and one line cut most of them. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dk-sd__meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--fg3);
margin-top: 2px;
}
.dk-sd__price {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 700;
color: var(--fg);
flex-shrink: 0;
white-space: nowrap;
}
.dk-sd__pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 8px; }
.dk-sd__pill {
font-size: 11px;
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--fg2);
text-decoration: none;
}
.dk-sd__pill:hover { border-color: var(--primary); color: var(--primary); }
.dk-sd__all {
display: block;
text-align: center;
padding: 11px;
margin-top: 4px;
border-top: 1px solid var(--border);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--primary);
text-decoration: none;
}
.dk-sd__all:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.dk-sd__state { padding: 22px 14px; text-align: center; color: var(--fg3); font-size: 13px; }
.dk-sd__state strong { display: block; color: var(--fg); margin-bottom: 4px; font-size: 14px; }
.dk-sd__cta {
display: inline-block;
margin-top: 10px;
padding: 8px 16px;
border-radius: var(--radius);
background: var(--primary);
color: var(--primary-fg);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
text-decoration: none;
}
.dk-sd__row mark {
background: color-mix(in srgb, var(--primary) 22%, transparent);
color: inherit;
padding: 0 1px;
border-radius: 2px;
}
/* ── Mobile drawer form ───────────────────────────────────────────── */
.dk-mobile-search {
display: flex;
gap: 6px;
padding: 10px 0 14px;
border-bottom: 1px solid var(--border);
margin-bottom: 6px;
}
.dk-mobile-search input {
flex: 1;
min-width: 0;
font-size: 16px; /* no iOS zoom-on-focus */
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg);
color: var(--fg);
font-family: inherit;
}
.dk-mobile-search button {
width: 42px;
border: 0;
border-radius: var(--radius);
background: var(--primary);
color: var(--primary-fg);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
/* The panel's own Search/close buttons are wasted width on a phone —
the on-screen keyboard's Go key already submits. */
@media (max-width: 640px) {
.dk-navsearch__go { display: none; }
.dk-sd__thumb { width: 34px; height: 34px; }
}
/* ═══════════════════════════════════════════════════════════════════════
TRUST BADGES (dk/partials/_trust_badges.php)
─────────────────────────────────────────────────────────────────────
One strip, three placements: under the buy controls on a product page,
under Checkout in the cart, and beside Place order at checkout.
Prefixed .dk-trustbar, NOT .dk-trust: .dk-trust is already the homepage
trust-cards builder block (blocks/trust.php) and reusing it would
restyle that block from here. That exact collision cost an hour on the
nav search — .dk-search was taken by the hero box.
Card marks are drawn in CSS rather than loaded as image files: no extra
requests, no logo assets to keep in sync, and they follow the theme.
═══════════════════════════════════════════════════════════════════ */
.dk-trustbar {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 14px;
padding: 13px 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg2, var(--bg));
}
.dk-trustbar__item {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 12.5px;
line-height: 1.45;
color: var(--fg);
}
.dk-trustbar__ico {
flex-shrink: 0;
margin-top: 2px;
color: var(--primary);
}
.dk-trustbar__item strong { display: block; font-weight: 600; }
.dk-trustbar__sub {
display: block;
color: var(--fg3);
font-size: 11.5px;
margin-top: 1px;
}
.dk-trustbar__marks {
display: flex;
align-items: center;
gap: 6px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.dk-mark {
display: inline-flex;
align-items: center;
height: 21px;
padding: 0 7px;
border-radius: 4px;
border: 1px solid var(--border);
background: #fff; /* card marks are brand-fixed, not themed */
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 800;
letter-spacing: .03em;
line-height: 1;
}
.dk-mark--visa { color: #1a1f71; font-style: italic; letter-spacing: .06em; }
.dk-mark--stripe { color: #fff; background: #635bff; border-color: #635bff; text-transform: lowercase; }
/* Mastercard: two interlocking discs, the mark as it is actually drawn. */
.dk-mark--mc { padding: 0 6px; gap: 0; }
.dk-mark--mc i { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }
.dk-mark--mc i:first-child { background: #eb001b; }
.dk-mark--mc i:last-child { background: #f79e1b; margin-left: -5px; opacity: .9; }
/* In the cart and checkout the strip sits inside the narrow summary rail,
so it stays one column. On a product page there is width to spare on
desktop — two columns keeps it from pushing the tabs down the page. */
@media (min-width: 900px) {
.dk-trustbar--product {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
}
.dk-trustbar--product .dk-trustbar__marks {
grid-column: 1 / -1;
}
}
/* ═══════════════════════════════════════════════════════════════════════
PACK SELECTOR (product page)
─────────────────────────────────────────────────────────────────────
Turns the existing quantity bands into something a shopper can see and
press. Prefixed .dk-packs — .dk-bulk is the panel further down the page
and .dk-btn is the global button; neither is touched from here.
═══════════════════════════════════════════════════════════════════ */
.dk-packs { margin-top: 14px; }
.dk-packs__label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--fg3);
margin-bottom: 7px;
}
.dk-packs__row {
display: grid;
/* Auto-fit rather than a fixed count: a product may offer two bands or
five, and both should fill the row without a media query per case. */
grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
gap: 8px;
}
.dk-packs__btn {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 8px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg2, var(--bg));
color: var(--fg);
cursor: pointer;
text-align: left;
transition: border-color .18s, background .18s, transform .18s;
}
.dk-packs__btn:hover { border-color: var(--primary); transform: translateY(-1px); }
.dk-packs__btn.is-on {
border-color: var(--primary);
background: color-mix(in srgb, var(--primary) 9%, transparent);
box-shadow: inset 0 0 0 1px var(--primary);
}
.dk-packs__n {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.dk-packs__tot {
font-family: 'JetBrains Mono', monospace;
font-size: 15px;
font-weight: 700;
}
.dk-packs__ea { font-size: 11px; color: var(--fg3); line-height: 1.4; }
/* The per-piece price, sized up on 2026-09-10. It is the figure that decides
whether a pack looks worth taking, and at 11px it read as small print next
to the pack total. Deliberately still below .dk-packs__tot so the total
stays the headline of the button. */
.dk-packs__each {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 700;
color: var(--fg2);
}
.dk-packs__btn.is-on .dk-packs__each { color: var(--fg); }
.dk-packs__btn.is-on .dk-packs__ea { color: var(--fg2); }
/* ═══════════════════════════════════════════════════════════════════════
PACK TEASER ON THE PRICE LINE (product page)
─────────────────────────────────────────────────────────────────────
The headline price of a small part is dominated by fixed per-order cost
(handling, packing, card fee, small-item surcharge), so a 2 AED component
lists near 13 AED and reads as a rip-off. This line puts the per-piece
pack price in the same eyeful as the headline, and links down to the
chooser. Prefixed .dk-price-pack: .dk-packs is the chooser itself and
.dk-price-meta is the VAT / shipping strip, neither is touched here.
═══════════════════════════════════════════════════════════════════ */
.dk-price-pack {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
padding: 5px 10px;
border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent);
border-radius: var(--radius);
background: color-mix(in srgb, var(--primary) 7%, transparent);
color: var(--fg2);
font-size: 13px;
line-height: 1.3;
text-decoration: none;
transition: border-color .18s, background .18s;
}
.dk-price-pack:hover {
border-style: solid;
border-color: var(--primary);
background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.dk-price-pack b {
font-family: 'JetBrains Mono', monospace;
color: var(--fg);
}
.dk-price-pack__save {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
padding: 2px 6px;
border-radius: 999px;
background: var(--primary);
/* Fixed dark ink rather than var(--bg): --bg flips with the theme, and on
the light theme white-on-primary was unreadable. */
color: #061014;
}
| | |