/** * Orion Global Trade — front end. * * ============================================================================= * FROZEN SELECTORS — the plugin's inquiry.js binds to these by name. * Restyle them freely; NEVER rename them. Breaking one means the modal silently * stops opening, with no console error. * * #ogt-inquiry-modal #ogt-inquiry-form #ogt-newsletter-form * .ogt-modal__panel .ogt-form__status .ogt-form__submit * .ogt-newsletter__status .has-error * [data-ogt-open-inquiry] [data-ogt-close-inquiry] * body.ogt-modal-open .is-open * .ogt-hp — honeypot. Must stay visually hidden but NOT display:none: * some bots treat display:none as a tell, and screen readers skip it. * ============================================================================= * * There are no brand colours, font names or sizes in this file. They arrive as * custom properties from inc/tokens.php (settings-derived) and tokens.css * (static). If you are about to type a hex value here, add a setting instead. * The only literals are neutral scaffolding and WhatsApp's brand green, which * WhatsApp fixes, not us. * * Layer order is declared once, below. Note the UNLAYERED TAIL at the very * bottom: unlayered CSS always beats layered CSS regardless of source order, and * WordPress core block styles are unlayered. Block-editor overrides must live * there or core silently outranks every component here. * * Naming: * .ogt-block__element--modifier structure (CSS owns this) * .is-* / .has-* state (JS → CSS channel) * [data-ogt-*] behaviour (JS owns this; CSS never styles it) * .ogt-u-* utility */ @layer reset, base, layout, components, utilities; /* ============================================================================ RESET ========================================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The whole rem scale — spacing included — hangs off this. */ font-size: var(--ogt-base); scroll-padding-top: calc(var(--ogt-header-h) + 1rem); } /* * The single most valuable accessibility block in the file. It neutralises * every transition and animation defined below, so no component needs to * think about reduced motion individually. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--ogt-ground); color: var(--ogt-text); font-family: var(--ogt-font-body); font-size: var(--ogt-fs-base); line-height: var(--ogt-lh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* * clip, NOT hidden. `overflow-x: hidden` forces overflow-y to compute * to auto, which makes a scroll container — but the page * actually scrolls on , so body's scrollHeight equals its * clientHeight and it never moves. Every `position: sticky` * descendant then resolves against that frozen scrollport and can * never activate. Measured: the article sidebar, and the asides on * the contact, product and service templates, all sat still. * * `clip` blocks the same horizontal overflow without establishing a * scroll container, so sticky resolves against and works. * Unsupported in Safari < 16, where the declaration is simply dropped * — no horizontal guard, which the layout audit says nothing needs. */ overflow-x: clip; } img, svg, video, iframe { max-width: 100%; height: auto; display: block; } /*
is normalised in the unlayered tail — see the note there. It cannot be done from inside a layer. */ button, input, select, textarea { font: inherit; color: inherit; } } /* ============================================================================ BASE — element defaults ========================================================================== */ @layer base { h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--ogt-font-head); font-weight: var(--ogt-head-weight); letter-spacing: var(--ogt-head-track); line-height: var(--ogt-lh-tight); color: var(--ogt-ink); text-wrap: balance; } h1 { font-size: var(--ogt-fs-h1); } h2 { font-size: var(--ogt-fs-h2); } h3 { font-size: var(--ogt-fs-h3); } h4 { font-size: var(--ogt-fs-h4); } p { margin: 0; } a { color: var(--ogt-primary); text-underline-offset: 0.18em; } a:hover { color: var(--ogt-primary-hover); } /* Visible, generous, and never removed. */ :focus-visible { outline: 2px solid var(--ogt-primary); outline-offset: 3px; border-radius: var(--ogt-radius-sm); } ::selection { background: rgb(var(--ogt-primary-rgb) / 15%); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ogt-skip { position: absolute; left: -9999px; top: 0; z-index: var(--ogt-z-skip); padding: 0.75rem 1.25rem; background: var(--ogt-primary); color: var(--ogt-on-primary); border-radius: 0 0 var(--ogt-radius-sm) 0; text-decoration: none; font-weight: 600; } .ogt-skip:focus { left: 0; top: 0; color: var(--ogt-on-primary); } /* Icons inherit colour and take their stroke from the token. */ .ogt-icon { stroke-width: var(--ogt-icon-stroke); flex: 0 0 auto; } } /* ============================================================================ LAYOUT ========================================================================== */ @layer layout { .ogt-wrap { width: min(100% - (var(--ogt-gutter) * 2), var(--ogt-container)); margin-inline: auto; } .ogt-wrap--wide { max-width: var(--ogt-container-wide); } .ogt-wrap--narrow { max-width: 820px; } .ogt-section { padding-block: var(--ogt-section-y); } .ogt-section--sm { padding-block: var(--ogt-section-y-sm); } .ogt-section--flush-top { padding-block-start: 0; } .ogt-section--flush-bottom { padding-block-end: 0; } /* Alternating grounds. --dark re-themes its descendants via the card chassis. */ .ogt-section--muted { background: var(--ogt-muted); } .ogt-section--surface { background: var(--ogt-surface); } .ogt-section--dark { background: var(--ogt-deep); color: var(--ogt-on-dark-muted); } /* The --dark text overrides are NOT here. They set the same properties as rules in the components layer, and layer order beats specificity, so a layout-layer override loses no matter how specific it is. They live at the end of the components layer instead — search "dark-ground text". */ /* * Generic gradient surface. Currently unused — the hero, CTA and newsletter * each carry their own version — but kept as the shared definition, and kept * on the SAME vivid ramp as those three so a future section that reaches for * it does not reintroduce the near-black gradient the others were moved off. */ .ogt-section--gradient { position: relative; background: radial-gradient(65% 85% at 88% 88%, rgb(var(--ogt-accent-rgb) / 30%) 0%, transparent 62%), radial-gradient(60% 80% at 8% 4%, rgb(255 255 255 / 12%) 0%, transparent 58%), linear-gradient(125deg, var(--ogt-primary-hover) 0%, var(--ogt-primary) 45%, var(--ogt-secondary) 100%); color: var(--ogt-on-dark-muted); isolation: isolate; } /* * Prose — long-form editor content. * * 68ch is the readable measure, but a 68ch column pinned to the left of a * 1280px container leaves ~600px of dead space beside it, which is what the * About page looked like. Centre it by default; the split layouts below opt * out, because there the column sits beside something. */ .ogt-prose { max-width: 68ch; margin-inline: auto; display: flex; flex-direction: column; gap: var(--ogt-para-space); } /* Inside a split or a card, prose is one column of two — do not centre it. The product page's main column is the same situation: centring pushed its copy 63px right of the page h1 it sits under, so nothing lined up. */ .ogt-u-split .ogt-prose, .ogt-card .ogt-prose, .ogt-product__main .ogt-prose { margin-inline: 0; max-width: none; } /* * When prose IS the page container — page.php and page-about.php put both * .ogt-wrap and .ogt-prose on one element — fill the container like the * homepage instead of collapsing to a 68ch strip with dead side margins * (the "not the same container as homepage" complaint). The container width * comes back; only the text RUNS keep a readable measure (left-anchored), so * grids, columns, wide blocks and the product shortcode span full width. * * Scoped to .ogt-wrap.ogt-prose so a standalone reading column (single.php's * blog prose, nested inside .ogt-wrap--narrow) still gets its 68ch measure. */ .ogt-wrap.ogt-prose { max-width: none; } .ogt-wrap.ogt-prose > :not(.alignwide):not(.alignfull):not(.wp-block-columns):not(.ogt-prose__bleed):not([class*="ogt-u-grid"]) { max-width: 72ch; } /* Explicit full-container breakout for shortcode/grid output inside prose. */ .ogt-prose__bleed { max-width: none; width: 100%; } .ogt-prose > h2 { margin-block-start: 1.5em; } .ogt-prose > h3 { margin-block-start: 1em; } .ogt-prose > :first-child { margin-block-start: 0; } .ogt-prose ul, .ogt-prose ol { margin: 0; padding-inline-start: 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; } .ogt-prose img { border-radius: var(--ogt-radius-img); } } /* ============================================================================ UTILITIES ========================================================================== */ @layer utilities { /* * One auto-fit grid replaces the five bespoke grid classes the old CSS had * (cards-grid, offer-grid, quotes, certgrid, statband__grid). */ .ogt-u-grid { display: grid; gap: var(--ogt-gap); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr)); } .ogt-u-grid--min-200 { --min: 200px; } .ogt-u-grid--min-240 { --min: 240px; } .ogt-u-grid--min-280 { --min: 280px; } .ogt-u-grid--min-320 { --min: 320px; } /* * A fixed three-up, for content where the column count is a design decision * rather than whatever happens to fit. * * auto-fit is right when the item count varies and you just want a tidy * wrap. It is wrong for a set of six: at a 1200px container minmax(240px) * resolves to four columns, so six items land as 4 + 2 — a full row and a * stranded pair. Three gives 3 + 3. * * minmax(0, 1fr) rather than 1fr: a grid track's default minimum is * auto, so one long unbreakable word (a botanical name, an HS code) can push * a column wider than its share and make the row unequal. */ .ogt-u-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1000px) { .ogt-u-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ogt-u-grid--3 { grid-template-columns: minmax(0, 1fr); } } /* * auto-fill keeps the empty tracks that auto-fit collapses, so a grid with a * single item leaves it at column width instead of stretching it across the * whole row. Used by search/blog results, where a 1-result page otherwise * rendered one enormous full-width card. */ .ogt-u-grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 260px), 100%), 1fr)); justify-content: start; } /* * Equal card height in a row. * * .ogt-u-grid relies on the default align-items:stretch, so a card that is a * direct grid child already fills its row. But where a card is wrapped (the * product archive wraps each in a data-ogt-reveal div for the stagger), the * WRAPPER stretches and the card inside sits at content height. Make the * wrapper a flex column and let the card fill it, so tiles line up whether or * not they are wrapped. */ /* * :not(.ogt-card) is essential. This rule exists for a plain WRAPPER div that * holds a card — but some templates put data-ogt-reveal on the card itself * (the certification list does). Without the guard this forced those cards to * flex-direction:column and stretched their children, which silently turned * the row-layout cert card into a centred stack with an orphaned tick. */ .ogt-u-grid > [data-ogt-reveal]:not(.ogt-card), .ogt-u-cols-2 > [data-ogt-reveal]:not(.ogt-card), .ogt-u-cols-3 > [data-ogt-reveal]:not(.ogt-card), .ogt-u-cols-4 > [data-ogt-reveal]:not(.ogt-card) { display: flex; flex-direction: column; } .ogt-u-grid > [data-ogt-reveal]:not(.ogt-card) > *, .ogt-u-cols-2 > [data-ogt-reveal]:not(.ogt-card) > *, .ogt-u-cols-3 > [data-ogt-reveal]:not(.ogt-card) > *, .ogt-u-cols-4 > [data-ogt-reveal]:not(.ogt-card) > * { flex: 1 1 auto; } .ogt-u-grid > .ogt-card, .ogt-u-cols-2 > .ogt-card, .ogt-u-cols-3 > .ogt-card, .ogt-u-cols-4 > .ogt-card, .ogt-u-grid > [data-ogt-reveal] > .ogt-card, .ogt-u-cols-2 > [data-ogt-reveal] > .ogt-card, .ogt-u-cols-3 > [data-ogt-reveal] > .ogt-card, .ogt-u-cols-4 > [data-ogt-reveal] > .ogt-card { height: 100%; } /* Fixed column counts, collapsing on small screens. */ .ogt-u-cols-2, .ogt-u-cols-3, .ogt-u-cols-4 { display: grid; gap: var(--ogt-gap); } .ogt-u-cols-2 { grid-template-columns: repeat(2, 1fr); } .ogt-u-cols-3 { grid-template-columns: repeat(3, 1fr); } .ogt-u-cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .ogt-u-cols-3, .ogt-u-cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .ogt-u-cols-2, .ogt-u-cols-3, .ogt-u-cols-4 { grid-template-columns: 1fr; } } /* Split layouts — the alternating image/text rhythm. */ .ogt-u-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, var(--ogt-gap-lg)); align-items: center; } .ogt-u-split--wide-left { grid-template-columns: 1.15fr 0.85fr; } .ogt-u-split--wide-right { grid-template-columns: 0.85fr 1.15fr; } @media (max-width: 900px) { .ogt-u-split, .ogt-u-split--wide-left, .ogt-u-split--wide-right { grid-template-columns: 1fr; } } /* Reverse visual order without touching DOM order (keeps reading order sane). */ @media (min-width: 901px) { .ogt-u-split--reverse > :first-child { order: 2; } } .ogt-u-stack { display: flex; flex-direction: column; gap: var(--ogt-gap); align-items: flex-start; } .ogt-u-stack--sm { gap: var(--ogt-gap-sm); } .ogt-u-stack--center { align-items: center; text-align: center; } .ogt-u-row { display: flex; flex-wrap: wrap; gap: var(--ogt-gap-sm); align-items: center; } /* Anything wide must scroll inside itself, never the page. */ .ogt-u-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* * The utilities below exist because the same eight declarations were being * repeated as inline style="" attributes across 22 call sites. Inline styles * cannot be kept consistent, cannot be overridden by a modifier, and cannot * be audited — which is exactly how the spacing drifted apart. */ /* Strip list chrome. A