/* ============================================================================ JAVAID — Site-wide dark skin · "Near-black + electric accent" ---------------------------------------------------------------------------- Carries the homepage language across the ENTIRE front end via body.theme-dark. Strategy: a semantic-token FLIP does most of the work — the base sheet (main.css) styles everything in terms of --canvas / --ink / --rule / --surface / --accent, so re-valuing those tokens on body.theme-dark converts the bulk of the site automatically. Everything below the token block is targeted coverage for the genuine light-mode assumptions (forms, image frames, elevated cards, carousels, modal, embeds, the audit tool, etc.). The base light sheet is left untouched so the block editor / wp-admin keep their light look. Homepage signature pieces (glow, Clash hero, stacking showcase, bento) live in home-dark.css, loaded after this on the front page. --accent is intentionally NOT hardcoded here so the live accent picker keeps working everywhere. ============================================================================ */ /* ── 1 · Token flip (neutral near-black, site-wide) ──────────────────────── */ body.theme-dark { --canvas: #08080A; --canvas-2: #0E0E12; --canvas-3: #15151B; --ink: #F7F7F9; --ink-2: #E7E7EC; --ink-mute: #C3C3CE; --mute: #8B8B97; --mute-2: #5E5E69; --rule: rgba(247, 247, 249, 0.13); --rule-soft: rgba(247, 247, 249, 0.06); --reverse: #08080A; --reverse-mute: rgba(8, 8, 10, 0.62); --accent-soft: rgba(107, 122, 58, 0.14); --surface: rgba(255, 255, 255, 0.026); --surface-2: rgba(255, 255, 255, 0.052); --surface-3: rgba(255, 255, 255, 0.075); --card-line: rgba(247, 247, 249, 0.10); --card-line-2: rgba(247, 247, 249, 0.16); --card-radius: 18px; --glow-1: var(--accent); --glow-2: rgba(107, 122, 58, 0.30); --glow-3: rgba(120, 110, 230, 0.12); /* Non-standard / legacy token aliases referenced by a few inline style blocks (proof.php, audit tool, inc/svgs.php placeholders) — define them so the hardcoded light fallbacks (#ddd, #fff, rgba(0,0,0,.12)) never win. */ --line: rgba(247, 247, 249, 0.13); --card: rgba(255, 255, 255, 0.026); --paper: #08080A; --paper-2: #0E0E12; --f-mono: var(--mono); background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; } /* Kill the light paper-grain overlay the base sheet paints on . */ body.theme-dark::before { display: none !important; } /* Ambient floor so the near-black is never flat (paint-only, no animation). */ body.theme-dark { background-image: radial-gradient(110% 60% at 50% -5%, rgba(226,122,69,0.05) 0%, transparent 55%); background-attachment: fixed; } /* ── 2 · Masthead (glassy dark) ──────────────────────────────────────────── */ .theme-dark .masthead { background: rgba(8, 8, 10, 0.55); -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px); border-bottom: 1px solid var(--rule-soft); } .theme-dark .nav-link { color: var(--mute); } .theme-dark .nav-link:hover, .theme-dark .nav-link.is-active { color: var(--ink); } .theme-dark .brand { color: var(--ink); } .theme-dark .brand small { color: var(--mute); } .theme-dark .mark { background: var(--accent); box-shadow: 0 0 14px 1px var(--glow-2); } .theme-dark .nav-cta { background: var(--accent); color: #1A0E07; border-radius: 999px; padding: 10px 18px; font-weight: 600; transition: transform .3s, box-shadow .3s, filter .3s; } .theme-dark .nav-cta:hover { filter: brightness(1.07); box-shadow: 0 8px 30px -8px var(--glow-1); } .theme-dark .menu-btn { border-color: var(--rule); color: var(--ink); } .theme-dark .menu-btn span, .theme-dark .menu-btn span::before, .theme-dark .menu-btn span::after { background: var(--ink); } .theme-dark .mob-menu { background: rgba(8,8,10,0.98); } .theme-dark .mob-menu a { color: var(--ink); } .theme-dark .arr { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); } .theme-dark a:hover > .arr, .theme-dark .link:hover .arr, .theme-dark .btn:hover .arr, .theme-dark .nav-cta:hover .arr { transform: translateX(4px); } /* ── 3 · Buttons ─────────────────────────────────────────────────────────── */ .theme-dark .btn { border-radius: 999px; font-weight: 600; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, filter .3s, background .3s, color .3s, border-color .3s; } .theme-dark .btn--primary, .theme-dark .btn--accent { background: var(--accent); color: #1A0E07; border-color: var(--accent); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 34px -16px var(--glow-1); } .theme-dark .btn--primary:hover, .theme-dark .btn--accent:hover { filter: brightness(1.07); box-shadow: 0 12px 44px -12px var(--glow-1); transform: translateY(-1px); } .theme-dark .btn--ghost, .theme-dark .btn--secondary { background: var(--surface); border: 1px solid var(--card-line-2); color: var(--ink); } .theme-dark .btn--ghost:hover, .theme-dark .btn--secondary:hover { background: var(--surface-2); border-color: var(--accent); color: var(--ink); } /* ── 4 · Eyebrow / number chips ──────────────────────────────────────────── */ .theme-dark .eyebrow, .theme-dark .dept__num { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-mute); background: var(--surface); border: 1px solid var(--card-line); border-radius: 999px; padding: 7px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .theme-dark .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 1px var(--glow-1); } /* The dot helper inside some eyebrows is redundant with ::before — hide it. */ .theme-dark .eyebrow .dot { display: none; } /* ── 5 · Text, links, rules ──────────────────────────────────────────────── */ .theme-dark .body, .theme-dark p { color: var(--ink-mute); } .theme-dark .deck, .theme-dark .note, .theme-dark .muted { color: var(--mute); } .theme-dark .link { color: var(--ink); } .theme-dark .link:hover { color: var(--accent); border-color: var(--accent); } .theme-dark hr, .theme-dark .rule { border-color: var(--rule); background: var(--rule); } .theme-dark ::selection { background: var(--accent); color: #1A0E07; } .theme-dark .cursor { mix-blend-mode: screen; } /* Headings keep their editorial Fraunces face; the token flip lights them up. Accent em flourishes stay in the live accent colour. */ .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6 { color: var(--ink); } .theme-dark .sec-head em, .theme-dark .folio__intro h2 em, .theme-dark .h-display em { color: var(--accent); } /* ── 6 · Prose (blog / case study / product long-form) ───────────────────── */ .theme-dark .prose { color: var(--ink-mute); } .theme-dark .prose h1, .theme-dark .prose h2, .theme-dark .prose h3, .theme-dark .prose h4, .theme-dark .prose strong, .theme-dark .prose b { color: var(--ink); } .theme-dark .prose a { color: var(--accent); } .theme-dark .prose a:hover { color: var(--accent); } .theme-dark .prose blockquote { border-left: 3px solid var(--accent); background: var(--surface); color: var(--ink-2); } .theme-dark .prose code, .theme-dark .prose kbd { background: var(--surface-2); border: 1px solid var(--card-line); color: var(--ink); border-radius: 6px; } .theme-dark .prose pre { background: var(--canvas-2); border: 1px solid var(--card-line); border-radius: 12px; color: var(--ink-2); } .theme-dark .prose pre code { background: none; border: 0; } .theme-dark .prose hr { border-color: var(--rule); } .theme-dark .prose img { border-radius: 12px; border: 1px solid var(--card-line); } .theme-dark .prose table th, .theme-dark .prose table td { border-color: var(--rule); } /* ── 7 · Forms & inputs ──────────────────────────────────────────────────── */ .theme-dark input[type="text"], .theme-dark input[type="email"], .theme-dark input[type="search"], .theme-dark input[type="url"], .theme-dark input[type="tel"], .theme-dark input[type="number"], .theme-dark input[type="password"], .theme-dark textarea, .theme-dark select { background: var(--surface); color: var(--ink); border: 1px solid var(--card-line-2); border-radius: 10px; -webkit-appearance: none; appearance: none; } .theme-dark textarea { border-radius: 14px; } .theme-dark input::placeholder, .theme-dark textarea::placeholder { color: var(--mute); opacity: 1; } .theme-dark input:focus, .theme-dark textarea:focus, .theme-dark select:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 1px; } .theme-dark .field label, .theme-dark label { color: var(--ink-mute); } .theme-dark .field .req { color: var(--accent); } .theme-dark .field.has-error input, .theme-dark .field.has-error textarea { border-color: #E5484D; } .theme-dark .field__err { color: #FF9A9D; } .theme-dark .form__msg.is-err { color: #FF9A9D; } .theme-dark .form__success h3 { color: var(--ink); } .theme-dark .form__success p { color: var(--ink-mute); } /* Editorial underline inputs (search.php / contact.php links) — keep them borderless but readable on dark. */ .theme-dark .search-form, .theme-dark form[role="search"] { border-color: var(--card-line); } .theme-dark .search-form input, .theme-dark form[role="search"] input { background: transparent; border: 0; color: var(--ink); border-radius: 0; } /* ── 8 · Elevated cards / surfaces ───────────────────────────────────────── */ .theme-dark .step, .theme-dark .sku, .theme-dark .proof-review, .theme-dark .pull, .theme-dark .audit-tool, .theme-dark .audit-breakdown__item, .theme-dark .javaid-faq__row { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--card-radius); } .theme-dark .step { padding: 28px; } .theme-dark a.step, .theme-dark .sku { transition: border-color .4s, background .4s, transform .4s, box-shadow .4s; } .theme-dark a.step:hover, .theme-dark .step:hover, .theme-dark .sku:hover { border-color: rgba(226,122,69,0.5); background: var(--surface-2); transform: translateY(-3px); box-shadow: 0 24px 60px -40px var(--glow-1); } .theme-dark .step__num, .theme-dark .sku__num, .theme-dark .dept__num strong { color: var(--accent); } .theme-dark .step__title, .theme-dark .sku__title { color: var(--ink); } .skus .sku { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 20px !important; flex-wrap: wrap; } .theme-dark .step__body, .theme-dark .sku__desc { color: var(--ink-mute); } .theme-dark .sku__price { color: var(--ink); } /* Recommended / accent-tinted tiers (inline background: var(--accent-soft)). */ .theme-dark .step[style*="accent-soft"], .theme-dark .sku[style*="accent-soft"] { background: linear-gradient(180deg, rgba(226,122,69,0.12), rgba(226,122,69,0.04)) !important; border-color: rgba(226,122,69,0.45) !important; } /* Inline "Most chosen" badges use color: var(--reverse) on accent — keep dark text on the bright accent chip (reverse is already dark in this theme). */ /* Generic elevated section backgrounds (inline background: var(--canvas-2)). */ .theme-dark [style*="--canvas-2"] { border-radius: 16px; } /* ── 9 · Image frames (light screenshots on dark) ────────────────────────── */ .theme-dark .shot, .theme-dark .cs-hero__media, .theme-dark .cs-gallery__item, .theme-dark .sku-media__item, .theme-dark .hover-thumb, .theme-dark .spread__media { border: 1px solid var(--card-line); border-radius: 14px; box-shadow: 0 30px 70px -50px rgba(0,0,0,0.9); overflow: hidden; } /* Featured / article images and figures. */ .theme-dark figure img, .theme-dark .article__figure, .theme-dark .entry img { border-radius: 12px; } /* ── 10 · Lists / index rows ─────────────────────────────────────────────── */ .theme-dark .list, .theme-dark .index { border-color: var(--rule); } .theme-dark .list__row, .theme-dark .index__row { border-color: var(--rule); } .theme-dark .list__row:hover, .theme-dark .index__row:hover { background: var(--surface); } .theme-dark .list__ttl, .theme-dark .index__row .ttl { color: var(--ink); } .theme-dark .index__row .ttl em { color: var(--accent); } .theme-dark .index__row:hover .ttl em { color: var(--ink); } .theme-dark .list__date, .theme-dark .index__row .yr, .theme-dark .index__row .sect, .theme-dark .index__row .role { color: var(--mute); } .theme-dark .index__row .arrow, .theme-dark .list__arrow { color: var(--ink); } .theme-dark .index__row:hover .arrow { color: var(--accent); } .theme-dark .index__row .num { color: var(--accent); } .theme-dark .hover-thumb { box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7); } /* Filter keys (work.php) */ .theme-dark .kbd { background: var(--surface); border: 1px solid var(--card-line); color: var(--ink-mute); } .theme-dark .kbd:hover { border-color: var(--accent); color: var(--ink); } .theme-dark .kbd.is-accent, .theme-dark .kbd[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #1A0E07; } /* ── 11 · Pull quotes ────────────────────────────────────────────────────── */ .theme-dark .pull { padding: clamp(28px, 4vw, 48px); } .theme-dark .pull__mark { color: var(--accent); opacity: 0.5; } .theme-dark .pull__body { color: var(--ink-2); } .theme-dark .pull__attr { color: var(--mute); } .theme-dark .pull__attr strong { color: var(--ink); } .theme-dark .pull__attr .dmd, .theme-dark .dmd { color: var(--accent); } /* ── 12 · Carousels ──────────────────────────────────────────────────────── */ .theme-dark .pull-carousel__slide, .theme-dark .pull-carousel__slide.pull { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--card-radius); } .theme-dark .pull-carousel__arrow { border: 1px solid var(--card-line); color: var(--ink); background: var(--surface); } .theme-dark .pull-carousel__arrow:hover { background: var(--accent); border-color: var(--accent); color: #1A0E07; } .theme-dark .pull-carousel__dots button { background: var(--rule); } .theme-dark .pull-carousel__dots button:hover, .theme-dark .pull-carousel__dots button.is-active { background: var(--accent); } .theme-dark .pull-carousel__counter { color: var(--mute); } .theme-dark .pull-carousel__counter [data-current] { color: var(--ink); } /* ── 13 · Metrics / results ──────────────────────────────────────────────── */ .theme-dark .metrics { border: 1px solid var(--card-line); border-radius: var(--card-radius); background: radial-gradient(120% 140% at 50% 0%, rgba(226,122,69,0.06), transparent 60%), var(--surface); overflow: hidden; } .theme-dark .metric { border-color: var(--rule-soft) !important; } .theme-dark .metric .num { color: var(--ink); } .theme-dark .metric .num em { color: var(--accent); } .theme-dark .metric .lbl { color: var(--mute); } .theme-dark .cs-result { border-top-color: var(--accent); } .theme-dark .cs-result .num { color: var(--ink); } .theme-dark .cs-result .lbl { color: var(--ink-mute); } /* ── 14 · Case study / product head ──────────────────────────────────────── */ .theme-dark .cs-head__title { color: var(--ink); } .theme-dark .cs-head__lede { color: var(--ink-mute); } .theme-dark .cs-head__meta dt { color: var(--mute); } .theme-dark .cs-head__meta dd { color: var(--ink); } .theme-dark .cs-stack, .theme-dark .cs-body { color: var(--ink-mute); } .theme-dark .cs-stack h4, .theme-dark .cs-body h2, .theme-dark .cs-body h3 { color: var(--ink); } .theme-dark .cs-tag, .theme-dark .tag { background: var(--surface); border: 1px solid var(--card-line); color: var(--ink-mute); } /* ── 15 · Accent panels / closing CTAs ───────────────────────────────────── */ .theme-dark .accent-panel, .theme-dark .ink-panel { background: radial-gradient(90% 130% at 50% 120%, var(--glow-2) 0%, transparent 58%), var(--canvas-2); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); position: relative; overflow: clip; } .theme-dark .accent-panel::before, .theme-dark .ink-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.4; } .theme-dark .accent-panel .display, .theme-dark .accent-panel .headline, .theme-dark .accent-panel .sec-head, .theme-dark .accent-panel .colophon__cta, .theme-dark .accent-panel h2, .theme-dark .ink-panel h2, .theme-dark .ink-panel .display, .theme-dark .cta-billboard__head { color: var(--ink); } .theme-dark .accent-panel .display em, .theme-dark .accent-panel .sec-head em, .theme-dark .accent-panel h2 em, .theme-dark .ink-panel h2 em, .theme-dark .cta-billboard__head em { color: var(--accent); } .theme-dark .accent-panel .eyebrow, .theme-dark .accent-panel .deck, .theme-dark .ink-panel .deck, .theme-dark .cta-billboard__deck { color: var(--ink-mute); } .theme-dark .accent-panel .btn { background: var(--surface); border-color: var(--card-line-2); color: var(--ink); } .theme-dark .accent-panel .btn--primary { background: var(--accent); border-color: var(--accent); color: #1A0E07; } .theme-dark .cta-billboard__alt { color: var(--ink); border-color: var(--card-line); } .theme-dark .cta-billboard__alt:hover { color: var(--accent); border-color: var(--accent); } .theme-dark .cta-billboard__diamond { color: var(--accent); } /* ── 16 · FAQ (details / summary) ────────────────────────────────────────── */ .theme-dark .javaid-faq__row { padding: 4px 22px; } .theme-dark .javaid-faq__row summary { color: var(--ink); } .theme-dark .javaid-faq__row summary::-webkit-details-marker { display: none; } .theme-dark .javaid-faq__row[open] { background: var(--surface-2); } .theme-dark .javaid-faq__row p { color: var(--ink-mute); } /* ── 17 · Audit tool (free Shopify spend tool) ───────────────────────────── */ .theme-dark .audit-tool { padding: clamp(20px, 3vw, 36px); } .theme-dark .audit-row { border-color: var(--rule); } .theme-dark .audit-row__app, .theme-dark .audit-row__cost { color: var(--ink); } .theme-dark .audit-row__prefix { color: var(--mute); } .theme-dark .audit-row input, .theme-dark .audit-form input { background: var(--surface); border: 1px solid var(--card-line-2); color: var(--ink); border-radius: 8px; } .theme-dark .audit-row__remove { color: var(--mute); } .theme-dark .audit-row__remove:hover { color: var(--accent); } .theme-dark .audit-summary { border-color: var(--card-line); } .theme-dark .audit-stat__num { color: var(--ink); } .theme-dark .audit-stat__lbl { color: var(--mute); } .theme-dark .audit-stat--accent { background: var(--accent); color: #1A0E07; border-radius: 12px; } .theme-dark .audit-stat--accent .audit-stat__num, .theme-dark .audit-stat--accent .audit-stat__lbl { color: #1A0E07; } .theme-dark .audit-breakdown__head, .theme-dark .audit-breakdown__num { color: var(--ink); } .theme-dark .audit-breakdown__note { color: var(--mute); } .theme-dark .audit-empty { color: var(--mute); } /* ── 18 · Proof reviews grid ─────────────────────────────────────────────── */ .theme-dark .proof-review { padding: 24px; } .theme-dark .proof-review__stars { color: var(--accent); } .theme-dark .proof-review__quote { color: var(--ink-2); } .theme-dark .proof-review__by, .theme-dark .proof-review__proj { color: var(--mute); } /* ── 19 · Article (single post) extras ───────────────────────────────────── */ .theme-dark .article__title { color: var(--ink); } .theme-dark .article__byline, .theme-dark .article__meta { color: var(--mute); } .theme-dark .article__tldr { background: linear-gradient(180deg, rgba(226,122,69,0.12), rgba(226,122,69,0.04)); border-left: 4px solid var(--accent); color: var(--ink-2); border-radius: 0 12px 12px 0; } .theme-dark .article__author { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--card-radius); } .theme-dark .article__author h4, .theme-dark .article__author strong { color: var(--ink); } .theme-dark .article__author p { color: var(--ink-mute); } /* ── 20 · Expertise matrix table ─────────────────────────────────────────── */ .theme-dark .matrix, .theme-dark .matrix th, .theme-dark .matrix td { border-color: var(--rule); color: var(--ink-mute); } .theme-dark .matrix th { color: var(--ink); } .theme-dark .matrix tr:hover td { background: var(--surface); } /* ── 21 · 404 ────────────────────────────────────────────────────────────── */ .theme-dark .notfound__num { color: var(--accent); } .theme-dark .notfound__msg { color: var(--ink-mute); } /* ── 22 · Footer colophon ────────────────────────────────────────────────── */ .theme-dark .colophon { background: var(--canvas); border-top: 1px solid var(--rule-soft); color: var(--ink); } .theme-dark .colophon__cta { color: var(--ink); } .theme-dark .colophon__cta em { color: var(--accent); } .theme-dark .colophon__email { color: var(--accent); } .theme-dark .colophon__mark { color: var(--ink); } .theme-dark .colophon__mark small, .theme-dark .colophon__links a, .theme-dark .colophon__elsewhere a, .theme-dark .colophon__index a, .theme-dark .colophon__bottom { color: var(--mute); } .theme-dark .colophon__links a:hover, .theme-dark .colophon__elsewhere a:hover, .theme-dark .colophon__index a:hover { color: var(--accent); } .theme-dark .colophon__sep { color: var(--rule); } /* ── 23 · Tweaks panel (accent picker) ───────────────────────────────────── */ .theme-dark .twk__panel, .theme-dark .twk { background: rgba(14, 14, 18, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--card-line); color: var(--ink); } .theme-dark .twk__btn { background: var(--surface); border: 1px solid var(--card-line); color: var(--ink); } .theme-dark .twk h4, .theme-dark .twk strong { color: var(--ink); } .theme-dark .twk small, .theme-dark .twk label { color: var(--mute); } .theme-dark .twk__sw { border: 1px solid var(--card-line); } .theme-dark .twk__sw.is-active { outline: 2px solid var(--ink); outline-offset: 2px; } /* ── 24 · Case-study modal ───────────────────────────────────────────────── */ .theme-dark .modal-bg, .theme-dark #modalBg { background: rgba(4, 4, 6, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .theme-dark .modal, .theme-dark #caseModal { background: var(--canvas-2); border: 1px solid var(--card-line); color: var(--ink); } .theme-dark .modal h2, .theme-dark .modal h4, .theme-dark .modal__result b { color: var(--ink); } .theme-dark .modal .lede, .theme-dark .modal p, .theme-dark .modal li { color: var(--ink-mute); } .theme-dark .modal__result { background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px; } .theme-dark .modal__close { color: var(--ink); border-color: var(--card-line); background: var(--surface); } .theme-dark .modal__close:hover { background: var(--accent); border-color: var(--accent); color: #1A0E07; } /* ── 25 · Mobile sticky CTA bar ──────────────────────────────────────────── */ .theme-dark .mcta { background: rgba(8,8,10,0.94); border-top: 1px solid var(--rule); } .theme-dark .mcta__btn--primary { background: var(--accent); color: #1A0E07; } /* ── 26 · Trust bar / inline accent pills ────────────────────────────────── */ .theme-dark .trust-bar { color: var(--mute); border-color: var(--rule-soft); } .theme-dark .trust-bar a { color: var(--ink-mute); } .theme-dark .trust-bar a:hover { color: var(--accent); } /* ── 27 · Essay (about page) ─────────────────────────────────────────────── */ .theme-dark .essay__body { color: var(--ink-mute); } .theme-dark .essay__body h2, .theme-dark .essay__body h3, .theme-dark .essay__body strong { color: var(--ink); } .theme-dark .essay__aside { color: var(--mute); border-color: var(--rule); } .theme-dark .essay__aside strong { color: var(--ink); } /* ── 28 · Pagination ─────────────────────────────────────────────────────── */ .theme-dark .pagination a, .theme-dark .pagination span { color: var(--ink-mute); border-color: var(--card-line); } .theme-dark .pagination a:hover, .theme-dark .pagination .current { background: var(--accent); border-color: var(--accent); color: #1A0E07; } /* ============================================================================ EDITORIAL ALIGNMENT (site-wide) · match the flat hero on every page ---------------------------------------------------------------------------- The hero + homepage were rebuilt as a flat editorial system — square corners, hairline rules, mono labels with a short accent tick, no hover-lift, no glow. This block carries that language across EVERY .theme-dark page so the inner pages (work, services, expertise, products, proof, about, contact, blog, case studies, 404 …) read as one restrained, high-end engineering monograph. Surface · shape · spacing only — no copy or markup changes. The homepage reinforces these via home-dark.css. ============================================================================ */ /* Square corners site-wide (matches the hero's hard edges). */ body.theme-dark { --card-radius: 0px; } /* Soften the ambient page glow to a whisper. */ body.theme-dark { background-image: radial-gradient(110% 55% at 50% -5%, rgba(226,122,69,0.035) 0%, transparent 55%); } /* Eyebrows / number labels → flat mono with a short accent tick (hero caption), replacing the glassy pill chip + glowing dot. */ .theme-dark .eyebrow, .theme-dark .dept__num { gap: 12px; background: none; border: 0; border-radius: 0; padding: 0; color: var(--mute); letter-spacing: 0.26em; } .theme-dark .eyebrow::before { width: 24px; height: 1px; border-radius: 0; background: var(--accent); box-shadow: none; } /* Elevated cards → flat: square, hairline, no glow / lift / heavy shadow. */ .theme-dark .step, .theme-dark .sku, .theme-dark .proof-review, .theme-dark .pull, .theme-dark .audit-tool, .theme-dark .audit-breakdown__item, .theme-dark .javaid-faq__row, .theme-dark .article__author, .theme-dark .pull-carousel__slide, .theme-dark .pull-carousel__slide.pull { border-radius: 0; box-shadow: none; } .theme-dark a.step:hover, .theme-dark .step:hover, .theme-dark .sku:hover { transform: none; box-shadow: none; background: var(--surface-2); border-color: rgba(107, 122, 58, 0.5); } /* Image frames → square, hairline, full colour, no drop shadow. */ .theme-dark .shot, .theme-dark .cs-hero__media, .theme-dark .cs-gallery__item, .theme-dark .sku-media__item, .theme-dark .hover-thumb, .theme-dark .spread__media, .theme-dark figure img, .theme-dark .prose img, .theme-dark .entry img { border-radius: 0; box-shadow: none; filter: none; } /* Metrics → flat hairline band with mono numerals (the hero index language). */ .theme-dark .metrics { border: 0; border-block: 1px solid var(--rule); border-radius: 0; background: none; } .theme-dark .metric .num, .theme-dark .cs-result .num, .theme-dark .cs-results__grid .num, .theme-dark .audit-stat__num, .theme-dark .audit-breakdown__num { font-family: var(--mono); font-weight: 300; font-variation-settings: normal; letter-spacing: -0.04em; } .theme-dark .metric .num em, .theme-dark .cs-result .num em { font-family: var(--mono); font-style: normal; font-weight: 300; } /* Pull quote → no card, quiet mark. */ .theme-dark .pull { background: none; border: 0; } .theme-dark .pull__mark { opacity: 0.32; } /* Carousel controls → square hairline. */ .theme-dark .pull-carousel__arrow { border-radius: 0; } /* Accent / ink / closing panels → drop the radial glow + gradient hairline. */ .theme-dark .accent-panel, .theme-dark .ink-panel { background: var(--canvas-2); } .theme-dark .accent-panel::before, .theme-dark .ink-panel::before { display: none; } /* Form fields → square editorial inputs. */ .theme-dark input[type="text"], .theme-dark input[type="email"], .theme-dark input[type="search"], .theme-dark input[type="url"], .theme-dark input[type="tel"], .theme-dark input[type="number"], .theme-dark input[type="password"], .theme-dark textarea, .theme-dark select { border-radius: 0; } /* Misc rounded helpers → square. */ .theme-dark [style*="--canvas-2"], .theme-dark .prose pre, .theme-dark .prose code, .theme-dark .prose kbd, .theme-dark .article__tldr, .theme-dark .modal, .theme-dark #caseModal, .theme-dark .modal__result, .theme-dark .cs-tag, .theme-dark .tag, .theme-dark .kbd { border-radius: 0; }