/* TransGear: light and dark, for the whole site. * * GENERATED by clients/transgear-shop/flow-home/build_flow_home.py. * * Loaded on EVERY page, after both the concept stylesheet and the site * stylesheet, so it can override either. Light is the authored design and stays * the default; dark is a real palette rather than an inversion, because * inverting a photograph of a bottle of oil makes it look like a negative. * * 🔴 EVERY VALUE BELOW WAS CHOSEN BY CALCULATION, NOT BY EYE. On the dark * ground #0B0F12: ink 16.91:1, dim 9.00:1, muted 6.43:1, blue 7.06:1. And the * button label INVERTS: white on the dark-mode blue measures 2.73:1 and fails, * while the near-black ink on it measures 7.06:1. */ :root{ color-scheme: light; } :root[data-theme="dark"]{ color-scheme: dark; } :root[data-theme="dark"]{ /* concept page tokens */ --bg:#0B0F12; --bg-lift:#131A20; --fluid:#3FA8CE; --fluid-2:#2E93B8; --ink:#3FA8CE; --text:#ECF1F4; --text-dim:#A7B3BC; --text-far:#8A97A1; --rule:#223039; /* site + shop tokens */ --tg-paper:#0B0F12; --tg-lift:#131A20; --tg-blue:#3FA8CE; --tg-blue-2:#2E93B8; --tg-text:#ECF1F4; --tg-dim:#A7B3BC; --tg-far:#8A97A1; --tg-rule:#223039; /* the fluid finder */ --tgf-ink:#ECF1F4; --tgf-blue:#3FA8CE; --tgf-line:rgba(236,241,244,.20); --tgf-panel:rgba(236,241,244,.05); } :root[data-theme="dark"] body{ background:#0B0F12; color:#ECF1F4; } /* The holding page a visitor without the preview link sees (17 Sep 2026). WooCommerce's own version was * the site title in text over "TransGear is coming soon", with links to LinkedIn, Instagram and Facebook * that nobody has set up. tools/coming-soon-template.html replaces it; this dresses it. It lives in theme.css, which loads everywhere: * the holding page is served AT THE FRONT PAGE, which is the concept template, so site.css and its colour * tokens are not enqueued there, hence the fallbacks. */ /* WordPress's constrained layout gives every child margin-inline:auto, and an auto margin beats * align-items:stretch in a flex column, so the mark and the phone number sat centred while the * paragraphs stayed left. The margins are cleared rather than the alignment re-stated. */ .tg-soon{display:flex;flex-direction:column;justify-content:center;align-items:stretch; padding-inline:clamp(1.25rem,5vw,2rem)!important} .tg-soon > *{margin-inline:0!important;max-width:34rem} .tg-soon__mark{margin:0 0 2.25rem} .tg-soon__mark img{width:clamp(150px,18vw,200px);height:auto;display:block;margin-inline:0} .tg-soon .tg-soon__title{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.4rem)!important;line-height:1.15; letter-spacing:-.022em;font-weight:700;margin:0 0 1.25rem;color:var(--tg-text,#14181B)} .tg-soon__line{font-size:1.05rem;line-height:1.6;color:var(--tg-dim,#55606A);margin:0 0 1.75rem} .tg-soon__contact{margin:0 0 2rem;line-height:1.9} .tg-soon__contact a{color:var(--tg-blue,#005B7C);text-decoration:none;font-weight:600} .tg-soon__by{font-size:.9rem;line-height:1.6;color:var(--tg-far,#68727B);margin:0} /* GENERATED: dark twins of every light background, by dark_mirror() in build_flow_home.py. */ :root[data-theme="dark"] .veil{ background:radial-gradient(145% 105% at 50% 50%, transparent 40%, rgba(11,15,18,0.72) 82%, rgba(11,15,18,0.92) 100%) } :root[data-theme="dark"] .top{ background:linear-gradient(180deg, rgba(11,15,18,0.94) 45%, rgba(11,15,18,0)) } :root[data-theme="dark"] .plate{ background:rgba(11,15,18,0.90) } :root[data-theme="dark"] .fam.is-on{ background:rgb(11,15,18) } :root[data-theme="dark"] .hero::before{ background:radial-gradient(58% 46% at 50% 46%, rgba(11,15,18,0.96) 0%, rgba(11,15,18,0.90) 45%, rgba(11,15,18,0.50) 72%, transparent 100%) } @media (max-width: 760px){ :root[data-theme="dark"] .hero::before{ background:radial-gradient(88% 46% at 50% 48%, rgba(11,15,18,0.96) 0%, rgba(11,15,18,0.92) 52%, rgba(11,15,18,0.56) 78%, transparent 100%) } } @media (max-width: 760px){ :root[data-theme="dark"] .plate{ background:rgba(11,15,18,0.90) } } @media (max-width: 760px){ :root[data-theme="dark"] .fam{ background:rgba(19,26,32,0.93) } } @media (max-width: 760px){ :root[data-theme="dark"] .fam-list{ background:rgba(34,48,57,0.9) } } @media (max-width: 639px){ :root[data-theme="dark"] .fam{ background:rgba(19,26,32,0.74) } } @media (max-width: 760px){ :root[data-theme="dark"] .plate, :root[data-theme="dark"] .entry--read .entry__body{ background:rgba(11,15,18,0.78) } } @media (max-width: 760px){ :root[data-theme="dark"] .fact, :root[data-theme="dark"] .scale > div, :root[data-theme="dark"] .readout div{ background:rgba(19,26,32,0.72) } } @media (min-width: 1040px){ :root[data-theme="dark"] .fam{ background:rgba(19,26,32,0.86) } } :root[data-theme="dark"] .woocommerce form .form-row input.input-text, :root[data-theme="dark"] .woocommerce form .form-row textarea, :root[data-theme="dark"] .woocommerce form .form-row select, :root[data-theme="dark"] .woocommerce .quantity input.qty, :root[data-theme="dark"] .wc-block-components-text-input input{ background:rgb(19,26,32) } :root[data-theme="dark"] .tg-cf input.wpcf7-form-control:not(.wpcf7-submit), :root[data-theme="dark"] .tg-cf textarea.wpcf7-form-control{ background:rgb(19,26,32) } :root[data-theme="dark"] .tg-cf select.wpcf7-form-control{ background:rgb(19,26,32) } :root[data-theme="dark"] .tgf__input{ background:rgb(11,15,18) } :root[data-theme="dark"] .tgf__pack{ background:rgb(11,15,18) } :root[data-theme="dark"] .tgf__suggest{ background:rgb(11,15,18) } /* 🔴 EVERY LIGHT SCRIM HAS TO INVERT, NOT JUST THE OBVIOUS ONES. * * This design protects its type from 65,000 bright particles with hardcoded * white scrims, and each one paints a white shape on a dark page. The headline * one is `.hero::before`, a radial at 96% white across the middle of the frame: * in dark mode it was a large white blob with near-white headline text sitting * on top of it, measured at rgb(244,245,245) in the centre against rgb(11,15,18) * in the corners. Found by sweeping the stylesheet for light backgrounds rather * than by fixing the one that was reported. */ :root[data-theme="dark"] .hero::before{ background:radial-gradient(58% 46% at 50% 46%, rgba(11,15,18,.96) 0%, rgba(11,15,18,.90) 45%, rgba(11,15,18,.50) 72%, transparent 100%)!important } @media (max-width:760px){ :root[data-theme="dark"] .hero::before{ background:radial-gradient(88% 46% at 50% 48%, rgba(11,15,18,.96) 0%, rgba(11,15,18,.92) 52%, rgba(11,15,18,.56) 78%, transparent 100%)!important } } :root[data-theme="dark"] .top{ background:linear-gradient(180deg, rgba(11,15,18,.94) 45%, rgba(11,15,18,0))!important } /* Selected range card: a step lighter than its neighbours with a blue wash, * the dark equivalent of the white card the light design uses. */ :root[data-theme="dark"] .fam.is-on{ background:#17212A!important } :root[data-theme="dark"] .fam.is-on > article{ background:rgba(63,168,206,.07) } /* The plates are white sheets in the light design; in the dark they are lifts. */ :root[data-theme="dark"] .plate, :root[data-theme="dark"] .entry__body.plate{ background:rgba(19,26,32,.92)!important; border-color:#223039!important } :root[data-theme="dark"] .veil{ background:radial-gradient(145% 105%, rgba(0,0,0,0) 40%, rgba(11,15,18,.72) 100%)!important } /* A white label on the lighter dark-mode blue measures 2.73:1, so it inverts. */ :root[data-theme="dark"] .tgf__go span{ color:#0B0F12 } :root[data-theme="dark"] .woocommerce a.button, :root[data-theme="dark"] .woocommerce button.button, :root[data-theme="dark"] .woocommerce input.button, :root[data-theme="dark"] .wp-element-button, :root[data-theme="dark"] .wc-block-components-button, :root[data-theme="dark"] .tg-cf .wpcf7-submit, :root[data-theme="dark"] a.cta, :root[data-theme="dark"] a.cta:hover, :root[data-theme="dark"] a.cta:focus-visible{ color:#0B0F12!important } /* Form error text: the light-mode red measures under 3:1 on the dark ground. */ :root[data-theme="dark"] .wpcf7-not-valid-tip, :root[data-theme="dark"] .required{ color:#FDA29B!important } /* The block checkout, in dark (17 Sep 2026). Its fields carry WooCommerce's own #2B2D2F text in a * rule more specific than ours, so typed text was dark on the dark fill (1.27:1), a field turned * WHITE once it had focus, the country box stayed white under a near-white label (1.14:1), and * the store notices kept their pale green and pink. None showed on the cart or until something * was typed, which is why tools/check_dark_surfaces.mjs now fills the cart and types. */ :root[data-theme="dark"] .wc-block-components-text-input input, :root[data-theme="dark"] .wc-block-components-text-input.is-active input, :root[data-theme="dark"] .wc-block-components-textarea, :root[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__container{ background:#131A20!important; color:#ECF1F4!important } :root[data-theme="dark"] .wc-block-components-text-input input, :root[data-theme="dark"] .wc-block-components-textarea, :root[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__select{ border-color:#3A4A55!important } :root[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__select{ color:#ECF1F4!important; background:transparent!important } :root[data-theme="dark"] .wc-block-components-text-input label, :root[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__label{ color:#A7B3BC!important } :root[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__expand{ fill:#ECF1F4!important } :root[data-theme="dark"] .wc-block-components-notice-banner{ color:#ECF1F4!important } :root[data-theme="dark"] .wc-block-components-notice-banner.is-success{ background:#13241A!important } :root[data-theme="dark"] .wc-block-components-notice-banner.is-error{ background:#2A1517!important } :root[data-theme="dark"] .wc-block-components-notice-banner.is-info{ background:#131A20!important } /* The order summary's quantity badge is filled with the text colour and prints its number in the * theme's white, so in dark it was a blank near-white disc (1.14:1). The number takes the dark ink. */ :root[data-theme="dark"] .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span{ color:#0B0F12!important } /* "View basket" is also an a.button, and the dark button ink rule above (0-4-1) beat a plain * notice-link selector, leaving it dark on the dark notice at 1.19:1. Hence the long selector. */ :root[data-theme="dark"] .wc-block-components-notice-banner a, :root[data-theme="dark"] .wc-block-components-notice-banner__content a.button.wc-forward{ color:#ECF1F4!important } /* 🔴 PRODUCT PHOTOGRAPHY KEEPS A LIGHT PLATE, ON PURPOSE. * * These are studio shots of a bottle on white, and the white is baked into * the pixels. Cutting it out was tried and rejected: the photographs carry a * soft white GLOW around the product, not just an anti-aliased edge, so any * flood-fill leaves a halo tracing the bottle on a dark page, which looks * worse than not cutting at all. The attempt is kept, with its finding, at * clients/transgear-shop/tools/cut_product_backgrounds.py. * * So the image sits on a deliberate light card instead: rounded, padded, the * photograph's own ground carried out to the edge of the plate. That reads as * product presentation rather than as a bug. * * ✅ 17 Sep 2026: Miguel cut the photographs out by hand in Canva. A proper * transparent cutout is filed as -cutout.webp, and the "-cutout" in the * filename is what takes the card away, so it holds in every size WordPress * generates and in the cart block, which renders its images from the Store API. * The padding stays, so a cutout and a carded photograph are the same size in * one grid. A photograph without a cutout keeps its card until it gets one. * ⚠️ The exclusion lives INSIDE the card selectors as :not(). A separate * img[src*="-cutout"] override was tried first and lost: both are !important, * so the more specific card selector won and nothing changed. */ :root[data-theme="dark"] li.wc-block-product img, :root[data-theme="dark"] .woocommerce div.product .woocommerce-product-gallery__image img, :root[data-theme="dark"] .wc-block-components-product-image img{ border-radius:10px;padding:10px} :root[data-theme="dark"] li.wc-block-product img:not([src*="-cutout"]):not([src*="woocommerce-placeholder"]), :root[data-theme="dark"] .woocommerce div.product .woocommerce-product-gallery__image img:not([src*="-cutout"]):not([src*="woocommerce-placeholder"]), :root[data-theme="dark"] .wc-block-components-product-image img:not([src*="-cutout"]):not([src*="woocommerce-placeholder"]){ background:#fff!important} /* WooCommerce's hover zoom paints its large image on white (core CSS), and it * must stay opaque or the photo underneath shows through it. On a cutout that * opaque ground is the page, not white. The selector is __image, not the whole * gallery, because the gallery also holds the magnifier, which WordPress turns * into an img.emoji that otherwise got a padded white card of its own. */ :root[data-theme="dark"] .woocommerce div.product .woocommerce-product-gallery__image img.zoomImg[src*="-cutout"]{ background:var(--tg-paper)!important} /* A product with no photograph yet shows WooCommerce's placeholder, a light grey * picture frame. On the white product card that made every photo-less part a bright * square on a dark page (17 Sep, 50 parts arrived without photos). Inverted, it is a * dark tile with light lines, and it keeps the card's size. */ :root[data-theme="dark"] img[src*="woocommerce-placeholder"]{ background:#F5F8F7!important; filter:invert(.9) hue-rotate(180deg) } :root[data-theme="dark"] .woocommerce-product-gallery__image--placeholder{ border-color:#223039!important } /* ⚠️ A filter inverts the element's padding and background too, so the padding gets the * placeholder's own ground (#F5F8F7, sampled) or it inverts into a light frame. At 90% the * tile lands at about #211F20, one step off the card, with its lines still visible. */ /* The white card rules above exclude the placeholder INSIDE their selectors: a separate * override loses to their higher specificity, as the cutout override did. */ /* WooCommerce's own stylesheets paint these white, so no sweep of OUR CSS can * see them. Found by tools/check_dark_surfaces.mjs, which looks at the page. */ :root[data-theme="dark"] .wc-block-components-drawer, :root[data-theme="dark"] .wc-block-mini-cart__drawer{ background:#0B0F12!important; color:#ECF1F4 } :root[data-theme="dark"] .woocommerce .quantity input.qty, :root[data-theme="dark"] .quantity input.qty{ background:#131A20!important; color:#ECF1F4!important } :root[data-theme="dark"] .woocommerce-product-gallery__trigger{ background:#131A20!important; box-shadow:0 0 0 1px #223039 } /* 🔴 The magnifier on that button is DRAWN IN CSS, not an image: ::before is the * lens (a black border) and ::after the handle (a black bar). Darkening the * button on 17 Sep hid both, measured at 1.20:1. They get the light ink. */ :root[data-theme="dark"] .woocommerce-product-gallery__trigger::before{ border-color:#ECF1F4!important } :root[data-theme="dark"] .woocommerce-product-gallery__trigger::after{ background:#ECF1F4!important } /* Native dropdowns (pack size, shop sorting). Chrome paints the OPEN list on white * unless each option has a background of its own, and the option text inherits the * light dark-mode ink, so every choice read white on white until hovered. */ :root[data-theme="dark"] select option, :root[data-theme="dark"] select optgroup{ background:#131A20; color:#ECF1F4 } :root[data-theme="dark"] .woocommerce div.product .woocommerce-product-gallery{ border-radius:14px;padding:12px} :root[data-theme="dark"] .woocommerce div.product .woocommerce-product-gallery:not(:has(img[src*="-cutout"], img[src*="woocommerce-placeholder"])){ background:#fff} :root[data-theme="dark"] .tgf__input, :root[data-theme="dark"] li.wc-block-product, :root[data-theme="dark"] .woocommerce form .form-row input.input-text{ background:#131A20!important; color:#ECF1F4!important } /* The finder's suggestion list (21 Sep 2026). dark_mirror() twins its background, never its ink, * so the text colours are set here explicitly. */ :root[data-theme="dark"] .tgf__suggest{ background:#131A20!important; color:#ECF1F4; border-color:rgba(236,241,244,.16); box-shadow:0 14px 34px rgba(0,0,0,.45) } :root[data-theme="dark"] .tgf__opt:hover, :root[data-theme="dark"] .tgf__opt.is-active{ background:rgba(88,184,222,.16)!important; color:#ECF1F4 } /* Footer marks: how you pay and who delivers. 🔴 CONCEPT ONLY (17 Sep 2026): the client has not * set up iDEAL or FedEx for this shop yet, and FedEx only allows its logo after registering at * brand.fedex.com and having the use approved. Shown on Miguel's instruction until then. */ .tg-marks{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem;margin:0 0 1.1rem} .tg-marks__label{font:600 .7rem/1 ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace; letter-spacing:.12em;text-transform:uppercase;color:var(--tg-far,var(--text-far,#68727B))} .tg-marks__label ~ .tg-marks__label{margin-left:.9rem} .tg-marks img.tg-mark{height:28px;width:auto;display:inline-block;margin:0} .tg-marks img.tg-mark--fedex{height:24px} .tg-marks img.tg-mark--dark{display:none} :root[data-theme="dark"] .tg-marks img.tg-mark--light{display:none} :root[data-theme="dark"] .tg-marks img.tg-mark--dark{display:inline-block} :root[data-theme="dark"] .tg-marks img.tg-mark--fedex{filter:brightness(0) invert(1)} /* Every footer row spans the whole footer. The Flow page footer is a `1fr auto` grid, and the * marks row pushed the legal line into the auto column, which then grew to the sentence's width * and squeezed the four footer columns into a strip on the left. */ .tgfoot .foot__in > .tgfoot__rule,.tgfoot .foot__in > .tg-marks,.tgfoot .foot__in > .tgfoot__legal{grid-column:1 / -1} /* On the shop pages the footer is a constrained group: its rows sat in the narrower content * width, centred, while the columns above use the wide width. Align them with the columns. */ footer.tgfoot-theme > .tg-marks,footer.tgfoot-theme > .tgfoot-theme__legal{ max-width:var(--wp--style--global--wide-size,1340px)!important;margin-left:auto!important;margin-right:auto!important} /* Two logos ship; the theme decides which is legible. */ /* 🔴 The .tg-brand img selectors are load-bearing. site.css sets `.tg-brand img{display:block}`, * which outranks a bare `.tg-logo--dark`, so in LIGHT mode the white logo was laid out too: * invisible on white, but doubling the link's height, so the visible logo sat high above the * menu (Miguel, 17 Sep 2026). Dark mode looked right because its rules carry :root[data-theme]. */ .tg-logo--dark,.tg-brand img.tg-logo--dark{ display:none } :root[data-theme="dark"] .tg-logo--light,:root[data-theme="dark"] .tg-brand img.tg-logo--light{ display:none } :root[data-theme="dark"] .tg-logo--dark,:root[data-theme="dark"] .tg-brand img.tg-logo--dark{ display:block } /* The footer logo (both footers), with the same pairing. */ .tg-foot-brand{display:inline-block;line-height:0} .tg-foot-brand img{width:152px;height:auto} .tg-foot-brand img.tg-logo--light{display:block} .tg-foot-brand img.tg-logo--dark{display:none} :root[data-theme="dark"] .tg-foot-brand img.tg-logo--light{display:none} :root[data-theme="dark"] .tg-foot-brand img.tg-logo--dark{display:block} /* The toggle itself. Fixed, out of the reading column, reachable everywhere. */ .tg-theme{position:fixed;right:18px;bottom:18px;z-index:120;display:inline-flex; align-items:center;gap:.5rem;padding:.6rem .9rem;border-radius:999px;cursor:pointer; font:600 12px/1 inherit;letter-spacing:.06em;text-transform:uppercase; background:var(--tg-paper,#fff);color:var(--tg-text,#14181B); border:1px solid var(--tg-rule,#E4E8EB);box-shadow:0 6px 22px rgba(0,0,0,.10)} .tg-theme:hover{border-color:var(--tg-blue,#005B7C)} .tg-theme:focus-visible{outline:2px solid var(--tg-blue,#005B7C);outline-offset:2px} .tg-theme svg{width:15px;height:15px;display:block} .tg-theme .tg-theme__moon{display:none} :root[data-theme="dark"] .tg-theme .tg-theme__moon{display:block} :root[data-theme="dark"] .tg-theme .tg-theme__sun{display:none} @media print{ .tg-theme{display:none} }