/* ========================================================================== IBS Design System — carried across every route The tokens and rules here are the same world DESIGN.md specifies for the homepage. Nothing structural is changed: the theme's DOM, WooCommerce's markup and every form stay exactly as they are, so nothing that worked before stops working. Only tokens, type and surface colour move. Everything is scoped to html.ibs-ds, which is only present when a visitor has explicitly asked for the preview. ========================================================================== */ /* -------------------------------------------------------------------------- Tokens. Two palettes, one source. The --ds-* layer is what changes between light and dark; every component reads the unprefixed names, so no component rule has to know which mode it is in. Three states, per the usual contract: an explicit choice stamps data-theme on , and with nothing stamped the visitor's OS setting decides. Light is the default because the use scene is a lit office with a tender document open in the next tab — but a lab that runs its screens dark at 2am gets dark without asking. -------------------------------------------------------------------------- */ html.ibs-ds { --ds-ground: #f1f4f7; --ds-frame: #ffffff; --ds-hairline: #d5dce4; --ds-ink: #10192a; --ds-ink-2: #46536a; --ds-ink-3: #5c6980; /* 5.02:1 on ground, 5.54:1 on frame */ --ds-assay: #0b4fd1; /* 6.88:1 on frame */ --ds-assay-deep: #072f7d; --ds-assay-wash: #e4ecfb; --ds-on-deep: #ffffff; /* The footer is a deliberately dark object in BOTH modes — it is the base of the page, and in light mode it is what stops the ground running off the bottom of the screen. */ --ds-floor: #0a1020; --ds-floor-ink: #aeb9cc; --ds-floor-rule: rgba(255, 255, 255, 0.10); --ds-floor-key: #8ab0ff; /* accent family, not a second hue */ --ds-floor-label:#8494ad; /* 6.15:1 on the floor, measured */ } /* System preference, only when the visitor has not chosen for themselves. */ @media (prefers-color-scheme: dark) { html.ibs-ds:not([data-theme="light"]) { --ds-ground: #0d1420; --ds-frame: #141d2c; --ds-hairline: #26324a; --ds-ink: #eef2f8; --ds-ink-2: #b3bfd2; /* 8.9:1 on ground */ --ds-ink-3: #8695ae; /* 5.4:1 on ground */ --ds-assay: #6fa3ff; /* 7.1:1 on ground — the light-mode blue is only 2.6:1 here, so the accent lifts */ --ds-assay-deep: #0c1a3a; --ds-assay-wash: #172742; --ds-on-deep: #eef2f8; --ds-floor: #070c16; --ds-floor-rule: rgba(255, 255, 255, 0.08); } } /* An explicit choice wins in both directions. */ html.ibs-ds[data-theme="dark"] { --ds-ground: #0d1420; --ds-frame: #141d2c; --ds-hairline: #26324a; --ds-ink: #eef2f8; --ds-ink-2: #b3bfd2; --ds-ink-3: #8695ae; --ds-assay: #6fa3ff; --ds-assay-deep: #0c1a3a; --ds-assay-wash: #172742; --ds-on-deep: #eef2f8; --ds-floor: #070c16; --ds-floor-rule: rgba(255, 255, 255, 0.08); } html.ibs-ds { --ground: var(--ds-ground); --frame: var(--ds-frame); --hairline: var(--ds-hairline); --ink: var(--ds-ink); --ink-2: var(--ds-ink-2); --ink-3: var(--ds-ink-3); --assay: var(--ds-assay); --assay-deep: var(--ds-assay-deep); --assay-wash: var(--ds-assay-wash); --r: 2px; --rule: 1px solid var(--hairline); --ease: cubic-bezier(0.16, 1, 0.3, 1); --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace; color-scheme: light dark; } /* -------------------------------------------------------------------------- Type. The theme sets font-family directly on elements, and inheritance always loses to a matching element rule — so the elements have to be named. This was learned the hard way on the homepage, where the headings kept rendering in halyard-display while everything else had already changed. -------------------------------------------------------------------------- */ html.ibs-ds body, html.ibs-ds p, html.ibs-ds li, html.ibs-ds td, html.ibs-ds th, html.ibs-ds a, html.ibs-ds span, html.ibs-ds div, html.ibs-ds label, html.ibs-ds figcaption, html.ibs-ds blockquote, html.ibs-ds h1, html.ibs-ds h2, html.ibs-ds h3, html.ibs-ds h4, html.ibs-ds h5, html.ibs-ds h6, html.ibs-ds .sc_item_title, html.ibs-ds .sc_layouts_title_caption, html.ibs-ds input, html.ibs-ds select, html.ibs-ds textarea, html.ibs-ds button { font-family: var(--sans); } /* :where() carries ZERO specificity, and that is the entire point. These were written as html.ibs-ds h1 (0,1,1), which outranks any component class at (0,1,0) — so every element that needs its own colour lost to the page default. It painted the footer headings dark on a near-black floor, the close panel's headline dark on navy, and the footer's links accent-blue instead of white. Three separate "bugs", one cause. As a default it should lose to anything more deliberate. Now it does. */ :where(html.ibs-ds) :where(h1, h2, h3, h4, h5, h6, .sc_item_title, .sc_layouts_title_caption) { color: var(--ink); letter-spacing: -0.026em; font-weight: 600; text-wrap: balance; } /* The theme's display sizes were set for halyard-display and run large in Archivo. Pulled back to the homepage's scale so the two worlds match. */ html.ibs-ds h1, html.ibs-ds .sc_layouts_title_caption { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; } html.ibs-ds h2, html.ibs-ds .sc_item_title { font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.14; } html.ibs-ds h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.2; } html.ibs-ds h4 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.012em; } :where(html.ibs-ds) :where(body, p, li) { color: var(--ink-2); line-height: 1.62; } /* Figures are tabular wherever they carry meaning. */ html.ibs-ds .price, html.ibs-ds .woocommerce-Price-amount, html.ibs-ds time, html.ibs-ds .post_date, html.ibs-ds .sku { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Ground and surfaces -------------------------------------------------------------------------- */ /* Only the two wrappers that genuinely own the page ground. .content_wrap is just a measure container, and the theme reuses it INSIDE the single-post header that floats over the featured image — painting it opaque covered the photo and left the white headline on a light panel at 1.1:1. */ html.ibs-ds body, html.ibs-ds .page_content_wrap { background-color: var(--ground); } /* .post_item matches BOTH a listing card and the single-article wrapper. On a single post the theme lays its header over the featured image with white type, so painting that wrapper white put white text on a white panel and the headline vanished. Listing cards only. */ html.ibs-ds .post_item:not(.post_item_single):not(.post_item_featured), html.ibs-ds .sc_services_item, html.ibs-ds .sc_blogger_item, html.ibs-ds .products li.product, html.ibs-ds .woocommerce ul.products li.product, html.ibs-ds .widget, html.ibs-ds .sidebar .widget { background-color: var(--frame); border: var(--rule); border-radius: var(--r); box-shadow: none; } /* -------------------------------------------------------------------------- The page-title banner. The theme ships it as a navy gradient with a photographic overlay. In this world the header bar is flat assay-deep, and the banner is a continuation of that bar rather than a second, differently-shaded slab beneath it. -------------------------------------------------------------------------- */ /* The banner's colour lives on the Elementor top-section that wraps the title, not on .sc_layouts_title — that is a 1100x46 inner block, and painting it produced a bright blue rectangle floating inside the theme's darker band. Measured on /supports-infiniti/: section 1265x166 carries the gradient, .sc_layouts_title inside it carries nothing. */ html.ibs-ds .elementor-top-section:has(.sc_layouts_title), html.ibs-ds .elementor-top-section:has(.sc_layouts_title_caption) { background-image: none !important; background-color: var(--assay-deep) !important; } html.ibs-ds .sc_layouts_title, html.ibs-ds .top_panel_title { background-color: transparent !important; background-image: none !important; } html.ibs-ds .sc_layouts_title .sc_layouts_title_caption, html.ibs-ds .sc_layouts_title h1, html.ibs-ds .sc_layouts_title a, html.ibs-ds .sc_layouts_title .breadcrumbs, html.ibs-ds .sc_layouts_title .breadcrumbs * { color: #fff !important; } html.ibs-ds .sc_layouts_title .breadcrumbs, html.ibs-ds .sc_layouts_title .breadcrumbs * { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; opacity: 0.72; } /* -------------------------------------------------------------------------- Actions. One shape, one accent, everywhere: theme buttons, Elementor buttons, WooCommerce buttons and bare