/** * Oyolloo Elements — base layer. * * Loaded by every widget (declared as the `oe-base` dependency), so it holds * only what is genuinely shared: the Elementor conflict guard, the typography * presets lifted from Figma, layout primitives and the animation presets. * * Design tokens are NOT defined here. They are printed inline in by * Assets\Manager::print_token_vars() so they resolve before first paint. This * file only consumes them via var(--oe-*). * * Deliberately unlayered: CSS @layer would make these rules lose to Elementor's * unlayered output, which is the opposite of what the guard below needs. * * @package Oyolloo\Elements * @since 1.0.0 */ /* ========================================================================== 1. Elementor conflict guard Elementor's kit writes global typography and colour onto broad selectors, and its widget wrapper adds spacing we never want inside a designed section. Everything here is scoped to `.oe-widget` so other widgets on the page keep Elementor's defaults untouched. ========================================================================== */ /* Elementor spaces sibling widgets by 20px. Our sections own their rhythm. */ .elementor-widget:has(> .elementor-widget-container > .oe-widget), .elementor-widget:has(> .oe-widget) { margin-block-end: 0; } /* Elementor's container adds padding + a max-width that fights full-bleed sections. Our widgets are designed to span the viewport and handle their own gutters through .oe-container. */ .e-con > .elementor-widget > .elementor-widget-container > .oe-widget, .e-con > .elementor-widget > .oe-widget { width: 100%; } /* Re-establish a predictable inherited context at every widget root, so a theme or kit font-size cannot leak into the type scale below. Both the body-class gate and the element list are wrapped in :where(), so the whole guard scores exactly one class. That is enough to outrank bare theme element selectors (h2 {...}) while still tying with component rules such as .oe-btn or .oe-site-footer__col-title — and ties go to the component, since every component stylesheet loads after this one. */ .oe-widget { box-sizing: border-box; color: var(--oe-color-ink); font-family: var(--oe-font-body); font-size: var(--oe-body-size); font-weight: var(--oe-body-weight); line-height: var(--oe-body-leading); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .oe-widget *, .oe-widget *::before, .oe-widget *::after { box-sizing: inherit; } /* Elementor Kit sets heading typography globally. Inside our widgets the type scale is the authority, so neutralise the inherited values and let the .oe-h* presets in section 2 assign them. Gated on the body class so the site owner can switch it off from the settings screen. */ :where(.oe-reset-elementor) .oe-widget :where(h1, h2, h3, h4, h5, h6) { margin: 0; color: inherit; font-family: var(--oe-font-title); font-weight: var(--oe-h2-weight); line-height: var(--oe-h2-leading); } :where(.oe-reset-elementor) .oe-widget :where(p, ul, ol, figure, blockquote) { margin: 0; } :where(.oe-reset-elementor) .oe-widget :where(ul, ol) { padding: 0; list-style: none; } .oe-widget :where(img, svg, video) { display: block; max-width: 100%; height: auto; } .oe-widget :where(a) { text-decoration: none; } /* Neutralise theme link colours only for plain content links. Anything carrying a class is a component (.oe-btn, .oe-site-footer__link, ...) and owns its own colour, so it must never be caught by a blanket `color: inherit` — that is what previously rendered .oe-btn--dark as black text on a black fill. */ .oe-widget :where(a:not([class])) { color: inherit; } .oe-widget :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* One transition for every button we ship, so a colour change is never a jump. Eight of them — the cart and mini-cart checkout buttons, Back, both quantity steppers, the zoom close and both express rows — had no transition at all and snapped between colours. A widget that wants different timing still declares its own; those rules are also (0,1,0) and load after this sheet. */ .oe-widget :where(button, [type="button"], [type="submit"]) { transition: background-color 200ms var(--oe-ease, ease), color 200ms var(--oe-ease, ease), border-color 200ms var(--oe-ease, ease), box-shadow 200ms var(--oe-ease, ease); } /* * The theme's reset paints every button with a pink fill on hover and focus at * (0,2,0), which outranks the :where() rule above and would repaint thirteen * controls across this plugin. Two real classes tie that specificity, and this * sheet loads after the theme's, so the tie falls our way. Widget rules like * `.oe-btn:hover` are also (0,2,0) and load later still, so a deliberate hover * colour keeps working. * * The restored value is --oe-btn-surface, not a flat `transparent`, and that * distinction is the whole bug behind "the button goes white after you click * it". A clicked button keeps :focus, and almost no component declared a :focus * background — so this rule was stripping the fill off every coloured CTA the * moment it was pressed. It only looked fine where an Elementor colour control * happened to write `.elementor-element-x .oe-…` at (0,2,0) and mask it, which * is why it came and went between pages. * * So every button with a resting fill now declares that fill twice: once as * `background-color`, once as `--oe-btn-surface`. A button with no fill of its * own falls back to `transparent` and behaves exactly as before. * * `--oe-btn-fg` is the same bargain for the text. This used to say a flat * `color: inherit`, which is only right for a button that takes its colour from * its parent — and the rule outranks a component's own `color`, so any button * that sets one had its label swapped for the surrounding text colour the * moment it was hovered. On the builder's Save & Next that is white-on-black * turning into black-on-black: the button looked like it was answering the * pointer while disabled, when it was really losing its own foreground. */ .oe-reset-elementor .oe-widget :where(button, [type="button"], [type="submit"]):where(:hover, :focus) { color: var(--oe-btn-fg, inherit); background-color: var(--oe-btn-surface, transparent); } /* * A disabled button must not answer the pointer. `pointer-events: none` would * do it in one line but takes `cursor` with it, and the builder's Save & Next * relies on `not-allowed` to explain why it is refusing. So the hover state is * cancelled instead, at (0,3,0): the two classes plus the attribute outrank a * component's own `.oe-thing:hover` at (0,2,0), while a rule that already * guards itself — `.oe-pb__submit:not([disabled]):hover` — never applies here * in the first place. */ .oe-widget :where(button, [type="button"], [type="submit"]):where([disabled], [aria-disabled="true"]) { cursor: not-allowed; } .oe-reset-elementor .oe-widget :where(button, [type="button"], [type="submit"])[disabled]:hover, .oe-reset-elementor .oe-widget :where(button, [type="button"], [type="submit"])[aria-disabled="true"]:hover { background-color: var(--oe-btn-surface, transparent); color: var(--oe-btn-fg, inherit); box-shadow: none; transform: none; } /* ========================================================================== 2. Typography presets One class per Figma text style. Widgets reference these instead of redeclaring font-size/weight, so a change in the Figma type scale is a one-line change in Tokens.php. ========================================================================== */ .oe-h1, .oe-h2, .oe-h3, .oe-h4, .oe-h5, .oe-h6 { font-family: var(--oe-font-title); text-wrap: balance; } .oe-h1 { font-size: var(--oe-h1-size); font-weight: var(--oe-h1-weight); line-height: var(--oe-h1-leading); letter-spacing: var(--oe-h1-tracking); } .oe-h2 { font-size: var(--oe-h2-size); font-weight: var(--oe-h2-weight); line-height: var(--oe-h2-leading); letter-spacing: var(--oe-h2-tracking); } .oe-h3 { font-size: var(--oe-h3-size); font-weight: var(--oe-h3-weight); line-height: var(--oe-h3-leading); } .oe-h4 { font-size: var(--oe-h4-size); font-weight: var(--oe-h4-weight); line-height: var(--oe-h4-leading); } .oe-h5 { font-size: var(--oe-h5-size); font-weight: var(--oe-h5-weight); line-height: var(--oe-h5-leading); } .oe-h6 { font-size: var(--oe-h6-size); font-weight: var(--oe-h6-weight); line-height: var(--oe-h6-leading); } .oe-body { font-size: var(--oe-body-size); line-height: var(--oe-body-leading); } .oe-body-lg { font-size: var(--oe-body-lg-size); line-height: var(--oe-body-lg-leading); } .oe-body-sm { font-size: var(--oe-body-sm-size); line-height: var(--oe-body-sm-leading); } .oe-caption { font-size: var(--oe-caption-size); font-weight: var(--oe-caption-weight); line-height: var(--oe-caption-leading); } /* The small all-caps eyebrow above most section headings. */ .oe-label { font-family: var(--oe-font-title); font-size: var(--oe-label-size); font-weight: var(--oe-label-weight); line-height: var(--oe-label-leading); letter-spacing: 0.08em; text-transform: uppercase; } .oe-muted { color: var(--oe-color-neutral-500); } .oe-accent { color: var(--oe-color-brand); } /* Clamp a paragraph to N lines — used by the card decks. */ .oe-clamp-2, .oe-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .oe-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; } .oe-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; } /* ========================================================================== 3. Layout primitives The Figma desktop frame is 1920 wide with a 1640 content column. The column is pinned at 1670 (1640 + 2 x 15) rather than computed from the gutter: tie the two together and every window narrower than 1920 hands the design back two gutters' worth of column, which is the shape breaking on resize. The gutter stays a variable because it is still the padding, and widgets tighten it at their own breakpoints (see topbar below 392). ========================================================================== */ .oe-container { --oe-gutter-inline: 15px; width: 100%; max-width: 1670px; margin-inline: auto; padding-inline: var(--oe-gutter-inline); } /* 1200 of column inside the same 15px padding. */ .oe-container--narrow { max-width: 1230px; } /* Vertical rhythm. Sections declare their own top/bottom so a widget dropped into an Elementor container never depends on the container's padding. */ .oe-section { --oe-section-y: var(--oe-space-6xl); position: relative; /* Two sections in the design run their surface straight up into the block above with no padding at the top, so each edge is separately overridable while --oe-section-y stays the single knob Elementor writes to. */ padding-block: var(--oe-section-y-start, var(--oe-section-y)) var(--oe-section-y-end, var(--oe-section-y)); } .oe-section--tight { --oe-section-y: var(--oe-space-4xl); } .oe-section--flush { --oe-section-y: 0px; } /* Surface variants, matching the alternating light/dark bands in the design. */ .oe-section--light { background-color: var(--oe-color-surface); color: var(--oe-color-ink); } .oe-section--alt { background-color: var(--oe-color-surface-alt); color: var(--oe-color-ink); } .oe-section--dark { background-color: var(--oe-color-surface-ink); color: var(--oe-color-white); } .oe-section--dark .oe-muted { color: var(--oe-color-neutral-300); } /* Simple auto-fit grid used by the card decks. Widgets set --oe-cols. */ .oe-grid { display: grid; grid-template-columns: repeat(var(--oe-cols, 3), minmax(0, 1fr)); gap: var(--oe-gap, var(--oe-space-md)); } .oe-stack { display: flex; flex-direction: column; gap: var(--oe-gap, var(--oe-space-md)); } .oe-row { display: flex; align-items: center; gap: var(--oe-gap, var(--oe-space-md)); } .oe-row--wrap { flex-wrap: wrap; } /* ========================================================================== 4. Responsive scale Breakpoints mirror Elementor's own defaults so the editor's device preview and the stylesheet never disagree about where a layout changes. ========================================================================== */ /* The container's gutter is deliberately flat at 15px across every width: the per-breakpoint values below were commented out before this rule was pinned, and reviving them now would only narrow the column again. Widgets that need a different inset still set --oe-gutter-inline on their own container (see topbar below 392). */ /* * The heading ladder that used to live here — .oe-h1 through .oe-h5 restated * at 1440, 1024 and 767 — is gone. Tokens::FLUID now prints --oe-h*-size as a * clamp() through the same two anchors those steps were drawn between, so the * type is its own size at every width instead of holding still and then * jumping. Restating a font-size here would beat the clamp and undo that, so * nothing in this section touches type any more. * * --oe-section-y went the same way: --oe-space-6xl is fluid and floors at 60, * which is exactly what the old 767 step handed it, so the ladder had nothing * left to add. Widgets that reassign --oe-section-y on their own breakpoints * still work — 3xl is deliberately still a flat 60 for them to land on. * * What stays below is layout, not size: the grids that change column count. */ @media (max-width: 1024px) { /* .oe-container { --oe-gutter-inline: 40px; } */ .oe-grid { grid-template-columns: repeat(var(--oe-cols-tablet, 2), minmax(0, 1fr)); } } @media (max-width: 767px) { /* .oe-container { --oe-gutter-inline: 24px; } */ .oe-grid { grid-template-columns: repeat(var(--oe-cols-mobile, 1), minmax(0, 1fr)); } } /* ========================================================================== 5. Animation presets Reveal-on-scroll is driven by js/core/core.js, which toggles `is-revealed` through a single shared IntersectionObserver rather than one per element. The transition is defined here so no widget re-invents it, and every preset collapses to a no-op under prefers-reduced-motion. ========================================================================== */ .oe-widget { --oe-ease: cubic-bezier(0.22, 1, 0.36, 1); --oe-duration: 600ms; } /* Gated on .oe-js: without JavaScript nothing is ever hidden. */ .oe-js [data-oe-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity var(--oe-duration) var(--oe-ease), transform var(--oe-duration) var(--oe-ease); will-change: opacity, transform; } /* A sideways start is only safe while the container has padding to spend on it. Past that the element hangs over the viewport edge and the page keeps a horizontal scrollbar until the reveal fires - which, below the fold, may be never. Clamping to the gutter keeps the motion at every width. */ .oe-js [data-oe-reveal="left"] { transform: translate3d(calc(-1 * min(32px, var(--oe-gutter-inline, 32px))), 0, 0); } .oe-js [data-oe-reveal="right"] { transform: translate3d(min(32px, var(--oe-gutter-inline, 32px)), 0, 0); } .oe-js [data-oe-reveal="zoom"] { transform: scale3d(0.94, 0.94, 1); } .oe-js [data-oe-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; } /* In a single column a sideways start reads as drift rather than entrance, so mobile rises instead. The clamp above already keeps it inside the viewport; this one is a matter of how the motion reads. */ @media (max-width: 767px) { .oe-js [data-oe-reveal="left"], .oe-js [data-oe-reveal="right"] { transform: translate3d(0, 24px, 0); } } /* Stagger children by index — the index is set as --oe-i by core.js. */ .oe-js [data-oe-reveal-stagger] > * { transition-delay: calc(var(--oe-i, 0) * 80ms); } @media (prefers-reduced-motion: reduce) { .oe-widget *, .oe-widget *::before, .oe-widget *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .oe-js [data-oe-reveal] { opacity: 1; transform: none; } } /* ========================================================================== 6. Utilities ========================================================================== */ .oe-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Keyboard focus ring, consistent across every interactive element we ship. */ .oe-widget :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--oe-color-brand); outline-offset: 2px; border-radius: var(--oe-radius-xs); } .oe-hide-desktop { display: none; } @media (max-width: 1024px) { .oe-hide-tablet { display: none !important; } } @media (max-width: 767px) { .oe-hide-mobile { display: none !important; } .oe-hide-desktop { display: revert; } } .oe-retail-shop__copy .oe-caption{ font-weight: 600 !important; }