/*! * RAW & Cubana — main stylesheet * Design language: "Humidor Noir" — espresso black, walnut, gold hairlines, * engraved capitals, drifting smoke. Built with logical properties so the * same file serves LTR and RTL. */ /* ========================================================================== 1. Tokens (defaults — the Theme Control Center overrides these inline) ========================================================================== */ :root { --rc-c-primary: #cda862; --rc-c-primary-ink: #120c07; --rc-c-secondary: #b8743d; --rc-c-accent: #b8161f; --rc-c-bg: #0b0908; --rc-c-surface: #15110d; --rc-c-surface-2: #1e1812; --rc-c-heading: #f6eedf; --rc-c-text: #ddd3c2; --rc-c-muted: #aa9c88; --rc-c-border: #2f271f; --rc-c-success: #6aa97a; --rc-c-warning: #dca444; --rc-c-error: #e0645a; --rc-glow: #b8743d; --rc-glow-strength: .35; --rc-grad-a: #1a130e; --rc-grad-b: #0b0908; --rc-focus: #f0c979; --rc-f-display: "Cormorant Garamond", Georgia, Amiri, serif; --rc-f-label: Manrope, system-ui, "IBM Plex Sans Arabic", sans-serif; --rc-f-body: Manrope, system-ui, "IBM Plex Sans Arabic", sans-serif; --rc-heading-wt: 500; --rc-fs-base: 16px; --rc-lh: 1.7; --rc-h1-max: 76px; --rc-h1-min: 40px; --rc-h2-max: 54px; --rc-h2-min: 32px; --rc-h3: 28px; --rc-heading-lh: 1.06; --rc-fs-label: 12.5px; --rc-label-track: .14em; --rc-fs-price: 20px; --rc-fs-btn: 14px; --rc-btn-track: .06em; --rc-btn-h: 52px; --rc-logo-h: 76px; --rc-logo-h-sticky: 54px; --rc-logo-h-mobile: 52px; --rc-logo-h-footer: 120px; --rc-logo-pad: 0px; --rc-header-h: 104px; --rc-footer-pad: 88px; --rc-img-ratio: 1/1; --rc-img-fit: cover; --rc-cols-d: 4; --rc-cols-t: 3; --rc-cols-m: 2; --rc-radius: 6px; /* Component tokens inherit from roles unless set in the Control Center. */ --rc-header-bg: color-mix(in srgb, var(--rc-c-bg) 92%, transparent); --rc-header-text: var(--rc-c-heading); --rc-nav-hover: var(--rc-c-primary); --rc-submenu-bg: var(--rc-c-surface); --rc-mobile-bg: var(--rc-c-bg); --rc-footer-bg: #0a0806; --rc-footer-text: var(--rc-c-muted); --rc-footer-link: var(--rc-c-text); --rc-btn-bg: var(--rc-c-primary); --rc-btn-grad: linear-gradient(180deg, color-mix(in srgb, var(--rc-btn-bg) 82%, #fff) 0%, var(--rc-btn-bg) 55%, color-mix(in srgb, var(--rc-btn-bg) 86%, #000) 100%); --rc-btn-text: var(--rc-c-primary-ink); --rc-btn-hover-bg: color-mix(in srgb, var(--rc-c-primary) 78%, #fff); --rc-card-bg: var(--rc-c-surface); --rc-field-bg: color-mix(in srgb, var(--rc-c-surface) 70%, #000); --rc-field-border: var(--rc-c-border); --rc-price: var(--rc-c-primary); --rc-badge-sale: var(--rc-c-accent); --rc-badge-new: var(--rc-c-primary); --rc-badge-featured: var(--rc-c-secondary); --rc-in-stock: var(--rc-c-success); --rc-out-stock: var(--rc-c-error); --rc-checkout-panel: var(--rc-c-surface); --rc-ann-bg: #090706; --rc-ann-text: var(--rc-c-heading); --rc-ann-link: var(--rc-c-primary); /* Derived */ --rc-gold-line: color-mix(in srgb, var(--rc-c-primary) 55%, transparent); --rc-gold-soft: color-mix(in srgb, var(--rc-c-primary) 18%, transparent); --rc-container: 1320px; --rc-gutter: clamp(16px, 4vw, 40px); --rc-section: clamp(64px, 9vw, 136px); --rc-ease: cubic-bezier(.22, .61, .36, 1); --rc-ease-out: cubic-bezier(.16, 1, .3, 1); --rc-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 18px 36px -24px rgba(0, 0, 0, .7); --rc-shadow-gold: 0 18px 44px -18px color-mix(in srgb, var(--rc-c-primary) 55%, transparent); --rc-reveal-y: 28px; --rc-reveal-dur: .9s; --rc-header-current: var(--rc-header-h); } .rc-anim--subtle { --rc-reveal-y: 12px; --rc-reveal-dur: .6s; } .rc-anim--expressive { --rc-reveal-y: 48px; --rc-reveal-dur: 1.2s; } /* ========================================================================== 2. Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--rc-header-current) + 16px); } body { margin: 0; background: var(--rc-c-bg); color: var(--rc-c-text); font-family: var(--rc-f-body); font-size: var(--rc-fs-base); line-height: var(--rc-lh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } body.rc-lock { overflow: hidden; } img, svg, video { max-width: 100%; height: auto; } img { display: block; } svg.rc-icon { display: inline-block; flex: none; vertical-align: middle; } a { color: var(--rc-c-primary); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .25s var(--rc-ease); } a:hover { color: var(--rc-c-heading); } ::selection { background: var(--rc-c-primary); color: var(--rc-c-primary-ink); } :focus-visible { outline: 2px solid var(--rc-focus); outline-offset: 3px; border-radius: 2px; } hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rc-gold-line), transparent); margin: 3rem 0; } h1, h2, h3, h4, h5, h6, .rc-h { font-family: var(--rc-f-display); font-weight: var(--rc-heading-wt); color: var(--rc-c-heading); line-height: var(--rc-heading-lh); letter-spacing: -.01em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(var(--rc-h1-min), 2.2rem + 3.6vw, var(--rc-h1-max)); } h2 { font-size: clamp(var(--rc-h2-min), 1.6rem + 2.4vw, var(--rc-h2-max)); } h3 { font-size: var(--rc-h3); } h4 { font-size: calc(var(--rc-h3) * .8); } p { margin: 0 0 1.1em; } em, i { font-style: italic; } .rc-lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--rc-c-text); max-width: 62ch; } .rc-italic, .rc-serif-italic { font-family: var(--rc-f-display); font-style: italic; } /* Arabic: engraved Latin capitals and tracking break Arabic joining. */ :lang(ar), [dir="rtl"] { --rc-label-track: 0em; } :lang(ar) h1, :lang(ar) h2, :lang(ar) h3, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.35; } [dir="rtl"] body { line-height: 1.85; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .rc-skip-link { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 1000; padding: 12px 20px; background: var(--rc-c-primary); color: var(--rc-c-primary-ink); font-weight: 700; border-radius: var(--rc-radius); transition: top .2s; } .rc-skip-link:focus { top: 16px; } .rc-flip { transform: scaleX(-1); } [dir="rtl"] .rc-icon--arrow, [dir="rtl"] .rc-checkout-back .rc-icon { transform: scaleX(-1); } [dir="rtl"] .rc-flip { transform: none; } /* Film grain on dark surfaces (tiny inline SVG, no request) */ .rc-grain::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================================== 3. Layout ========================================================================== */ .rc-container { width: 100%; max-width: calc(var(--rc-container) + var(--rc-gutter) * 2); margin-inline: auto; padding-inline: var(--rc-gutter); } .rc-main { display: block; min-height: 40vh; } .rc-main:focus { outline: none; } .rc-main.rc-container { padding-block: clamp(40px, 6vw, 88px); } .rc-section { padding-block: var(--rc-section); position: relative; } .rc-section-title { text-align: center; } .rc-prose-wrap { max-width: calc(820px + var(--rc-gutter) * 2); } /* ========================================================================== 4. Buttons & forms ========================================================================== */ .rc-btn.rc-btn, .button, button.button, a.button, input.button, .wp-element-button, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { --_bg: var(--rc-btn-grad); --_fg: var(--rc-btn-text); --_bd: color-mix(in srgb, var(--rc-btn-bg) 70%, #000); --_sh: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .4); display: inline-flex; align-items: center; justify-content: center; gap: .65em; min-height: var(--rc-btn-h); padding: 0 var(--_px, 28px); background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd); border-radius: var(--rc-radius); font-family: var(--rc-f-body); font-size: var(--_fs, var(--rc-fs-btn)); font-weight: 700; font-style: normal; letter-spacing: var(--rc-btn-track); text-transform: uppercase; line-height: 1.1; white-space: nowrap; text-decoration: none; text-shadow: none; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; box-shadow: var(--_sh); transition: background .35s var(--rc-ease), color .3s var(--rc-ease), border-color .3s var(--rc-ease), transform .35s var(--rc-ease-out), box-shadow .35s var(--rc-ease); -webkit-font-smoothing: antialiased; } .rc-btn .rc-icon, .button .rc-icon { transition: transform .4s var(--rc-ease-out); } .rc-btn::before, .woocommerce a.button::before, .woocommerce button.button::before, .wp-element-button::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .38) 48%, transparent 70%); transform: translateX(-130%); transition: transform .9s var(--rc-ease-out); } /* Hover & focus re-declare the painted properties so global button styles (e.g. Elementor Site Settings → Buttons → Hover) cannot repaint them. */ .rc-btn.rc-btn:hover, .rc-btn.rc-btn:focus-visible, .button:hover, .wp-element-button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { --_bg: var(--rc-btn-hover-bg); --_sh: inset 0 1px 0 rgba(255, 255, 255, .3), var(--rc-shadow-gold); background: var(--_bg); color: var(--_fg); border-color: var(--_bd); box-shadow: var(--_sh); transform: translateY(-1px); } .rc-btn.rc-btn:focus:not(:focus-visible) { background: var(--_bg); color: var(--_fg); border-color: var(--_bd); } .rc-btn:hover .rc-icon--arrow { transform: translateX(3px); } [dir="rtl"] .rc-btn:hover .rc-icon--arrow { transform: scaleX(-1) translateX(3px); } .rc-btn:hover::before, .woocommerce a.button:hover::before, .woocommerce button.button:hover::before { transform: translateX(130%); } .rc-btn.rc-btn:active { transform: translateY(0); } .rc-btn.rc-btn--ghost { --_bg: rgba(255, 255, 255, .04); --_fg: var(--rc-c-heading); --_bd: color-mix(in srgb, var(--rc-c-heading) 42%, transparent); --_sh: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .rc-btn.rc-btn--ghost:hover, .rc-btn.rc-btn--ghost:focus-visible { --_bg: var(--rc-c-heading); --_fg: var(--rc-c-primary-ink); --_bd: var(--rc-c-heading); --_sh: 0 16px 40px -18px rgba(0, 0, 0, .9); background: var(--_bg); color: var(--_fg); border-color: var(--_bd); box-shadow: var(--_sh); } .rc-btn.rc-btn--ghost:focus:not(:focus-visible) { background: var(--_bg); color: var(--_fg); } .rc-btn.rc-btn--sm { --rc-btn-h: 42px; --_px: 18px; --_fs: calc(var(--rc-fs-btn) - 1px); } .rc-btn.rc-btn--icon { --_px: 0px; width: var(--rc-btn-h); } .rc-btn[disabled], .button:disabled, .button.disabled, .woocommerce button.button:disabled[disabled] { opacity: .45; cursor: not-allowed; transform: none; } .button.loading, .rc-btn.is-loading { pointer-events: none; opacity: .75; } .button.loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: rc-spin .7s linear infinite; } @keyframes rc-spin { to { transform: rotate(360deg); } } .rc-icon-btn { display: inline-grid; place-items: center; position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; text-decoration: none; transition: background-color .25s, color .25s; } .rc-icon-btn:hover { background: var(--rc-gold-soft); color: var(--rc-c-primary); } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="date"], select, textarea, .woocommerce form .form-row .input-text, .woocommerce form .form-row select, .select2-container .select2-selection { width: 100%; min-height: 50px; padding: 12px 16px; background: var(--rc-field-bg); color: var(--rc-c-heading); border: 1px solid var(--rc-field-border); border-radius: var(--rc-radius); font: inherit; font-size: max(16px, 1rem); line-height: 1.4; transition: border-color .25s, box-shadow .25s; } textarea { min-height: 140px; resize: vertical; } select { appearance: none; padding-inline-end: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a35b' stroke-width='1.5'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: right 14px center; } [dir="rtl"] select { background-position: left 14px center; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rc-c-primary); box-shadow: 0 0 0 3px var(--rc-gold-soft); } input::placeholder, textarea::placeholder { color: var(--rc-c-muted); opacity: .8; } input[type="checkbox"], input[type="radio"] { accent-color: var(--rc-c-primary); width: 18px; height: 18px; } label { color: var(--rc-c-heading); font-size: .92rem; } fieldset { border: 1px solid var(--rc-c-border); border-radius: var(--rc-radius); padding: 1.25rem; } .rc-searchform { display: flex; gap: 8px; max-width: 560px; } .rc-searchform input { flex: 1; } /* ========================================================================== 5. Ornaments & labels ========================================================================== */ .rc-kicker { display: inline-flex; align-items: center; gap: .9em; font-family: var(--rc-f-label); font-size: var(--rc-fs-label); font-weight: 700; letter-spacing: var(--rc-label-track); text-transform: uppercase; color: var(--rc-c-primary); margin: 0 0 1.2em; } .rc-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; flex: none; } .rc-kicker--plain::before { display: none; } .rc-kicker--center::after, .rcc-head--center > .rc-kicker::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; flex: none; } .rc-ornament { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--rc-c-primary); font-size: 11px; letter-spacing: .5em; margin-bottom: 1.5rem; } .rc-ornament i { display: block; width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--rc-c-primary)); } .rc-ornament i:last-child { transform: scaleX(-1); } .rc-gold-text { background: linear-gradient(100deg, #8e6a2e 0%, #e9cf8f 28%, #c9a35b 50%, #f6e2ae 70%, #9c7433 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ========================================================================== 6. Announcement bar ========================================================================== */ .rc-announcement { background: var(--rc-ann-bg); color: var(--rc-ann-text); border-bottom: 1px solid color-mix(in srgb, var(--rc-c-primary) 25%, transparent); position: relative; z-index: 60; } .rc-announcement__inner { display: flex; align-items: center; justify-content: center; min-height: 40px; gap: 12px; position: relative; } .rc-announcement p { margin: 0; padding-block: 9px; font-family: var(--rc-f-label); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-align: center; display: flex; align-items: center; gap: 1.2em; justify-content: center; min-width: 0; max-width: calc(100% - 48px); } .rc-announcement p > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--rc-ann-text) 82%, transparent); } .rc-announcement p > a { flex: none; } .rc-announcement.is-ticker p > span { text-overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .rc-ticker { display: inline-flex; gap: 3em; animation: rc-ticker 22s linear infinite; } .rc-ticker > span { flex: none; } @keyframes rc-ticker { to { transform: translateX(calc(-50% - 1.5em)); } } [dir="rtl"] .rc-ticker { animation-name: rc-ticker-rtl; } @keyframes rc-ticker-rtl { to { transform: translateX(calc(50% + 1.5em)); } } .rc-motion-paused .rc-ticker { animation-play-state: paused; } .rc-announcement a { color: var(--rc-c-primary); text-decoration: none; display: inline-flex; gap: .4em; align-items: center; } .rc-announcement__close { position: absolute; inset-inline-end: var(--rc-gutter); background: none; border: 0; color: inherit; cursor: pointer; padding: 8px; opacity: .7; min-width: 32px; min-height: 32px; } .rc-announcement__close:hover { opacity: 1; } .rc-announcement.is-dismissed { display: none; } /* ========================================================================== 7. Header ========================================================================== */ .rc-header { position: relative; z-index: 50; color: var(--rc-header-text); background: var(--rc-header-bg); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); transition: background-color .4s var(--rc-ease), box-shadow .4s var(--rc-ease), transform .4s var(--rc-ease); } .rc-header-rule .rc-header::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rc-gold-line) 20%, var(--rc-gold-line) 80%, transparent); } .rc-sticky-header .rc-header { position: sticky; top: 0; } .admin-bar.rc-sticky-header .rc-header { top: 32px; } @media (max-width: 782px) { .admin-bar.rc-sticky-header .rc-header { top: 0; } } .rc-header__inner { display: grid; align-items: center; gap: 16px; grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav actions"; min-height: var(--rc-header-h); transition: min-height .4s var(--rc-ease); } .rc-header__menu-btn { grid-area: menu; display: none; } .rc-logo { grid-area: logo; line-height: 0; } .rc-nav { grid-area: nav; justify-self: center; } .rc-header__actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 2px; } .rc-header--centered .rc-header__inner { grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav logo actions"; } .rc-header--centered .rc-nav { justify-self: start; } .rc-header--stacked .rc-header__inner { grid-template-columns: 1fr auto 1fr; grid-template-areas: ". logo actions" "nav nav nav"; row-gap: 0; padding-top: 12px; } .rc-logo__link { display: inline-block; padding: var(--rc-logo-pad); border-radius: 50%; } .rc-logo .rc-logo__img, .rc-footer .rc-logo__img { height: var(--rc-logo-h); width: auto; transition: height .4s var(--rc-ease), filter .4s; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55)); } .rc-logo__img--transparent, .rc-logo__img--sticky, .rc-logo__img--mobile { display: none; } /* Scrolled state */ .rc-header.is-stuck { background: color-mix(in srgb, var(--rc-c-bg) 94%, transparent); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9); } .rc-header.is-stuck .rc-header__inner { min-height: calc(var(--rc-header-h) * .72); } .rc-header.is-stuck .rc-logo .rc-logo__img { height: var(--rc-logo-h-sticky); } .rc-header.is-stuck:has(.rc-logo__img--sticky) .rc-logo__img--default { display: none; } .rc-header.is-stuck .rc-logo__img--sticky { display: block; } /* Transparent header over the homepage hero */ .rc-transparent-header .rc-header:not(.is-stuck) { background: linear-gradient(180deg, rgba(8, 6, 5, .75), rgba(8, 6, 5, 0)); -webkit-backdrop-filter: none; backdrop-filter: none; } .rc-transparent-header .rc-header:not(.is-stuck)::after { opacity: 0; } .rc-transparent-header .rc-header:not(.is-stuck):has(.rc-logo__img--transparent) .rc-logo__img--default { display: none; } .rc-transparent-header .rc-header:not(.is-stuck) .rc-logo__img--transparent { display: block; } .rc-transparent-header.rc-sticky-header .rc-header { position: fixed; inset-inline: 0; top: 0; } .rc-transparent-header.admin-bar.rc-sticky-header .rc-header { top: 32px; } .rc-transparent-header:not(.rc-sticky-header) .rc-header { position: absolute; inset-inline: 0; } .rc-transparent-header .rc-announcement:not(.is-dismissed) + .rc-header:not(.is-stuck) { top: auto; } .rc-transparent-header.admin-bar .rc-header.is-stuck { top: 32px; } /* Navigation */ .rc-nav__list, .rc-nav__list ul { list-style: none; margin: 0; padding: 0; } .rc-nav__list { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 28px); } .rc-nav__list > li { position: relative; display: flex; align-items: center; } .rc-nav__list a { display: inline-block; padding: 12px 2px; color: var(--rc-header-text); text-decoration: none; font-family: var(--rc-f-label); font-size: var(--rc-fs-label); font-weight: 500; letter-spacing: var(--rc-label-track); text-transform: uppercase; white-space: nowrap; position: relative; } .rc-nav__list > li > a::after { content: ""; position: absolute; inset-inline: 0; bottom: 6px; height: 1px; background: var(--rc-nav-hover); transform: scaleX(0); transform-origin: center; transition: transform .45s var(--rc-ease-out); } .rc-nav__list > li:hover > a, .rc-nav__list > li:focus-within > a, .rc-nav__list .current-menu-item > a, .rc-nav__list .current-menu-ancestor > a { color: var(--rc-nav-hover); } .rc-nav__list > li:hover > a::after, .rc-nav__list > .current-menu-item > a::after, .rc-nav__list > .current-menu-ancestor > a::after { transform: scaleX(1); } .rc-subtoggle { background: none; border: 0; color: inherit; padding: 6px; margin-inline-start: -2px; cursor: pointer; display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; } .rc-subtoggle[aria-expanded="true"] .rc-icon { transform: rotate(180deg); } .rc-nav__list .sub-menu { position: absolute; top: 100%; inset-inline-start: -20px; min-width: 240px; padding: 14px 0; background: var(--rc-submenu-bg); border: 1px solid var(--rc-c-border); border-top: 1px solid var(--rc-c-primary); box-shadow: var(--rc-shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s var(--rc-ease), transform .3s var(--rc-ease), visibility .3s; z-index: 5; } .rc-nav__list li:hover > .sub-menu, .rc-nav__list li:focus-within > .sub-menu, .rc-nav__list li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; } .rc-nav__list .sub-menu a { display: block; padding: 9px 24px; letter-spacing: .1em; } .rc-nav__list .sub-menu a:hover { color: var(--rc-nav-hover); background: var(--rc-gold-soft); } .rc-nav__list .sub-menu .sub-menu { top: -15px; inset-inline-start: 100%; } .rc-header__cart { position: relative; } .rc-cart-count { position: absolute; top: 4px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rc-c-primary); color: var(--rc-c-primary-ink); font: 700 10px/18px var(--rc-f-body); text-align: center; transition: transform .35s var(--rc-ease-out); } .rc-cart-count.is-empty { transform: scale(0); } .rc-cart-count.is-bump { animation: rc-bump .6s var(--rc-ease-out); } @keyframes rc-bump { 30% { transform: scale(1.45); } } .rc-header__cta { margin-inline-end: 8px; } /* Checkout header */ .rc-header--checkout .rc-header__inner { grid-template-columns: 1fr auto 1fr; grid-template-areas: "back logo label"; min-height: 88px; } .rc-checkout-back { grid-area: back; display: inline-flex; gap: 8px; align-items: center; color: var(--rc-c-text); text-decoration: none; font-size: .9rem; } .rc-checkout-back .rc-icon { transform: scaleX(-1); } .rc-checkout-label { grid-area: label; justify-self: end; margin: 0; display: inline-flex; gap: 8px; align-items: center; font-family: var(--rc-f-label); font-size: var(--rc-fs-label); letter-spacing: var(--rc-label-track); text-transform: uppercase; color: var(--rc-c-primary); } .rc-header--checkout .rc-logo .rc-logo__img { height: 60px; } /* ========================================================================== 8. Drawers, search, backdrop ========================================================================== */ .rc-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(5, 4, 3, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s var(--rc-ease); } .rc-backdrop.is-visible { opacity: 1; } .rc-drawer { position: fixed; top: 0; bottom: 0; z-index: 100; width: min(440px, 92vw); display: flex; flex-direction: column; background: var(--rc-mobile-bg); border-inline-end: 1px solid var(--rc-c-border); box-shadow: var(--rc-shadow); transition: transform .5s var(--rc-ease-out), visibility .5s; visibility: hidden; } .rc-drawer[hidden] { display: flex; } .rc-drawer--start { inset-inline-start: 0; transform: translateX(-102%); } .rc-drawer--end { inset-inline-end: 0; transform: translateX(102%); border-inline-end: 0; border-inline-start: 1px solid var(--rc-c-border); } [dir="rtl"] .rc-drawer--start { transform: translateX(102%); } [dir="rtl"] .rc-drawer--end { transform: translateX(-102%); } .rc-drawer.is-open { transform: none; visibility: visible; } .rc-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--rc-c-border); } .rc-drawer__title { margin: 0; font-family: var(--rc-f-label); font-size: 14px; letter-spacing: var(--rc-label-track); text-transform: uppercase; color: var(--rc-c-heading); } .rc-drawer__body { flex: 1; overflow-y: auto; padding: 20px; overscroll-behavior: contain; } .rc-drawer .rc-mobile-menu__logo { height: 56px; width: auto; } .rc-mobile-menu--fullscreen .rc-mobile-menu { width: 100vw; } .rc-mobile-menu__list, .rc-mobile-menu__list ul, .rc-mobile-menu__utility { list-style: none; margin: 0; padding: 0; } .rc-mobile-menu__list > li { border-bottom: 1px solid var(--rc-c-border); } .rc-mobile-menu__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .rc-mobile-menu__list a { flex: 1; display: block; padding: 16px 0; color: var(--rc-c-heading); text-decoration: none; font-family: var(--rc-f-display); font-size: 1.6rem; line-height: 1.1; } .rc-mobile-menu__list .current-menu-item > a { color: var(--rc-c-primary); } .rc-mobile-menu__list .sub-menu { flex-basis: 100%; display: none; padding: 0 0 12px 12px; } .rc-mobile-menu__list .is-open > .sub-menu { display: block; } .rc-mobile-menu__list .sub-menu a { font-family: var(--rc-f-body); font-size: 1rem; padding: 10px 0; color: var(--rc-c-text); } .rc-mobile-menu__list .rc-subtoggle { width: 44px; height: 44px; } .rc-mobile-menu__utility { margin: 24px 0; display: grid; gap: 4px; } .rc-mobile-menu__utility a { display: flex; gap: 12px; align-items: center; padding: 10px 0; color: var(--rc-c-text); text-decoration: none; } .rc-mobile-menu__social { margin-top: 20px; } .rc-search { position: fixed; inset: 0 0 auto; z-index: 100; padding-block: clamp(40px, 8vw, 96px); background: linear-gradient(180deg, var(--rc-c-bg), color-mix(in srgb, var(--rc-c-bg) 96%, transparent)); border-bottom: 1px solid var(--rc-gold-line); box-shadow: var(--rc-shadow); transform: translateY(-104%); transition: transform .5s var(--rc-ease-out), visibility .5s; visibility: hidden; } .rc-search[hidden] { display: block; } .rc-search.is-open { transform: none; visibility: visible; } .rc-search__inner { position: relative; } .rc-search__label { display: block; font-family: var(--rc-f-display); font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); margin-bottom: 18px; } .rc-search__row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--rc-c-primary); padding-bottom: 12px; color: var(--rc-c-primary); } .rc-search__row input { border: 0; background: transparent; font-size: clamp(1.1rem, 1rem + 1vw, 1.6rem); padding-inline: 0; box-shadow: none; } .rc-search__row input:focus { box-shadow: none; } .rc-search__close { position: absolute; top: -12px; inset-inline-end: var(--rc-gutter); } /* ========================================================================== 9. Page hero & smoke ========================================================================== */ .rc-page-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(56px, 8vw, 120px) clamp(40px, 6vw, 88px); background: radial-gradient(ellipse 60% 80% at 80% 0%, color-mix(in srgb, var(--rc-glow) calc(var(--rc-glow-strength) * 100%), transparent), transparent 70%), linear-gradient(180deg, var(--rc-grad-a), var(--rc-grad-b)); border-bottom: 1px solid var(--rc-c-border); } .rc-transparent-header .rc-page-hero { padding-top: calc(var(--rc-header-h) + 72px); } .rc-page-hero__media { position: absolute; inset: 0; z-index: -2; } .rc-page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(.9); } .rc-page-hero.has-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--rc-c-bg) 15%, color-mix(in srgb, var(--rc-c-bg) 55%, transparent) 60%, color-mix(in srgb, var(--rc-c-bg) 80%, transparent)); } [dir="rtl"] .rc-page-hero.has-image::before { transform: scaleX(-1); } .rc-page-hero__title { max-width: 18ch; margin-bottom: .3em; } .rc-page-hero__text { max-width: 62ch; color: var(--rc-c-text); font-size: 1.05rem; } .rc-page-hero__text p:last-child { margin: 0; } .rc-page-hero--compact { padding-block: 40px 32px; } .rc-page-hero--compact .rc-page-hero__title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); } .rc-page-hero--compact .rc-smoke { display: none; } .rc-breadcrumbs { margin-bottom: 20px; font-size: .82rem; color: var(--rc-c-muted); } .rc-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px 0; list-style: none; margin: 0; padding: 0; } .rc-breadcrumbs li + li::before { content: "/"; margin-inline: 10px; opacity: .5; } .rc-breadcrumbs a { color: var(--rc-c-muted); text-decoration: none; } .rc-breadcrumbs a:hover { color: var(--rc-c-primary); } .rc-smoke { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; opacity: 0; transition: opacity 1.6s var(--rc-ease); } .rc-js .rc-smoke { opacity: 1; } .rc-page-hero .rc-smoke { mix-blend-mode: screen; } /* Word-by-word heading reveal */ .rc-split .rc-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; } .rc-split .rc-w > span { display: inline-block; } .rc-js .rc-split .rc-w > span { transform: translateY(108%); transition: transform 1.1s var(--rc-ease-out); transition-delay: calc(var(--i, 0) * 55ms + var(--rc-delay, 0s)); } .rc-js .rc-split.is-revealed .rc-w > span { transform: none; } .rc-split[data-rc-reveal] { opacity: 1 !important; transform: none !important; } .rc-split em { background: none; -webkit-text-fill-color: currentColor; } .rc-split em .rc-w > span { font-style: italic; color: var(--rc-c-primary); background: linear-gradient(100deg, #b08a45, #efd7a0 40%, #cda862 60%, #f3dfab 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-inline-end: .04em; } /* Image wipe reveal */ .rc-js [data-rc-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0 round var(--rc-radius)); transition: clip-path 1.4s var(--rc-ease-out); transition-delay: var(--rc-delay, 0s); } .rc-js [data-rc-reveal="wipe"] img { transform: scale(1.14); transition: transform 1.8s var(--rc-ease-out); transition-delay: var(--rc-delay, 0s); } .rc-js [data-rc-reveal="wipe"].is-revealed { clip-path: inset(0 0 0 0 round var(--rc-radius)); } .rc-js [data-rc-reveal="wipe"].is-revealed img { transform: none; } .rc-motion-paused .rcc-marquee__track, .rc-motion-paused .rc-kenburns { animation-play-state: paused !important; } /* ========================================================================== 10. Product cards (global: homepage rails, shop, related) ========================================================================== */ .woocommerce ul.products, ul.products, .rc-products { display: grid !important; gap: clamp(14px, 2vw, 28px); grid-template-columns: repeat(var(--rc-cols-m), minmax(0, 1fr)); list-style: none; margin: 0 0 40px; padding: 0; } @media (min-width: 768px) { .woocommerce ul.products, ul.products, .rc-products { grid-template-columns: repeat(var(--rc-cols-t), minmax(0, 1fr)); } } @media (min-width: 1100px) { .woocommerce ul.products, ul.products, .rc-products { grid-template-columns: repeat(var(--rc-cols-d), minmax(0, 1fr)); } } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; } .woocommerce ul.products li.product, ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; padding: 0; } .rc-card { position: relative; display: flex; flex-direction: column; background: transparent; } .rc-card__media { position: relative; aspect-ratio: var(--rc-img-ratio); overflow: hidden; border-radius: var(--rc-radius); background: radial-gradient(circle at 50% 35%, var(--rc-c-surface-2), var(--rc-c-surface) 70%); } .rc-card__image-link { display: block; width: 100%; height: 100%; } .rc-card__img { width: 100%; height: 100% !important; object-fit: var(--rc-img-fit); transition: transform 1.2s var(--rc-ease-out), opacity .6s var(--rc-ease); margin: 0 !important; } .rc-card__img--alt { position: absolute; inset: 0; opacity: 0; } .rc-hover--swap .rc-card:hover .rc-card__img--alt { opacity: 1; } .rc-hover--zoom .rc-card:hover .rc-card__img, .rc-hover--swap .rc-card:not(:has(.rc-card__img--alt)):hover .rc-card__img { transform: scale(1.06); } .rc-card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); } .rc-cards--framed .rc-card__media::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc-c-primary) 22%, transparent); transition: box-shadow .5s; } .rc-cards--framed .rc-card:hover .rc-card__media::after { box-shadow: inset 0 0 0 1px var(--rc-gold-line), inset 0 -80px 60px -40px rgba(0, 0, 0, .5); } .rc-cards--elevated .rc-card { background: var(--rc-card-bg); border-radius: var(--rc-radius); padding: 10px; border: 1px solid var(--rc-c-border); transition: transform .5s var(--rc-ease-out), box-shadow .5s; } .rc-cards--elevated .rc-card:hover { transform: translateY(-4px); box-shadow: var(--rc-shadow); } .rc-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 2px 0; flex: 1; } .rc-cards--elevated .rc-card__body { padding: 14px 6px 6px; } .rc-card__cat { margin: 0; font-family: var(--rc-f-label); font-size: 10.5px; letter-spacing: var(--rc-label-track); text-transform: uppercase; color: var(--rc-c-muted); } .rc-card__title, .woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 0; padding: 0 !important; font-family: var(--rc-f-display) !important; font-size: clamp(1.15rem, 1rem + .4vw, 1.45rem) !important; font-weight: var(--rc-heading-wt); line-height: 1.2; } .rc-card__title a { color: var(--rc-c-heading); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--rc-ease-out), color .3s; } [dir="rtl"] .rc-card__title a { background-position: 100% 100%; } .rc-card__title a:hover { color: var(--rc-c-primary); background-size: 100% 1px; } .rc-card__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */ .rc-card .price, .woocommerce ul.products li.product .price { color: var(--rc-price) !important; font-family: var(--rc-f-display); font-size: var(--rc-fs-price) !important; font-weight: 600; margin: 2px 0 0 !important; display: flex; gap: .5em; align-items: baseline; flex-wrap: wrap; } .price del { color: var(--rc-c-muted); opacity: .8; font-size: .8em; font-weight: 400; } .price ins { text-decoration: none; background: none; } .woocommerce ul.products li.product .star-rating { margin: 2px 0; font-size: .75em; } .rc-card .button, .rc-card .added_to_cart { position: relative; z-index: 2; margin-top: auto !important; } .woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button { display: inline-flex; align-items: center; justify-content: center; line-height: 1.1; text-align: center; } .rc-atc--bar .rc-card .button { width: 100%; margin-top: 14px !important; --rc-btn-h: 46px; padding-inline: 14px; font-size: 12.5px; --_bg: rgba(255, 255, 255, .04); --_fg: var(--rc-c-heading); --_bd: color-mix(in srgb, var(--rc-c-heading) 30%, transparent); box-shadow: none; } .rc-atc--bar .rc-card .button:hover { --_bg: var(--rc-btn-grad); --_fg: var(--rc-c-primary-ink); --_bd: var(--rc-c-primary); color: var(--rc-c-primary-ink); } .rc-atc--icon .rc-card .button { position: absolute; top: 12px; inset-inline-end: 12px; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; margin: 0 !important; opacity: 0; transform: translateY(-6px); } .rc-atc--icon .rc-card:hover .button, .rc-atc--icon .rc-card .button:focus-visible { opacity: 1; transform: none; } @media (hover: none) { .rc-atc--icon .rc-card .button { opacity: 1; transform: none; } } .rc-card .added_to_cart { display: inline-block; margin-top: 8px; font-size: .85rem; } .rc-badges { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; pointer-events: none; } .rc-badge { padding: 5px 10px; border-radius: 2px; font-family: var(--rc-f-label); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1; background: var(--rc-c-surface); color: var(--rc-c-heading); border: 1px solid var(--rc-c-border); } .rc-badge--sale { background: var(--rc-badge-sale); border-color: var(--rc-badge-sale); color: #fff; } .rc-badge--new { background: var(--rc-badge-new); border-color: var(--rc-badge-new); color: var(--rc-c-primary-ink); } .rc-badge--featured { background: var(--rc-badge-featured); border-color: var(--rc-badge-featured); color: #fff; } .rc-badge--soldout { background: rgba(10, 8, 6, .8); color: var(--rc-c-muted); } .woocommerce span.onsale { display: none; } .star-rating { color: var(--rc-c-primary); } /* Mini cart (drawer, present on all pages) */ .rc-cart-drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; } .rc-cart-drawer .woocommerce-mini-cart-item { position: relative; display: grid !important; grid-template-columns: 76px 1fr; column-gap: 14px; padding: 14px 0 14px !important; border-bottom: 1px solid var(--rc-c-border); } .rc-cart-drawer .woocommerce-mini-cart-item img { grid-row: span 2; width: 76px !important; height: 76px; object-fit: cover; border-radius: var(--rc-radius); margin: 0 !important; float: none !important; } .rc-cart-drawer .woocommerce-mini-cart-item > a:not(.remove) { color: var(--rc-c-heading); text-decoration: none; font-family: var(--rc-f-display); font-size: 1.15rem; line-height: 1.2; display: contents; } .rc-cart-drawer .woocommerce-mini-cart-item .quantity { color: var(--rc-c-muted); font-size: .9rem; grid-column: 2; } .rc-cart-drawer .woocommerce-mini-cart-item .remove { position: absolute; top: 12px; inset-inline-end: 0; color: var(--rc-c-muted) !important; text-decoration: none; font-size: 20px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; z-index: 2; } .rc-cart-drawer .woocommerce-mini-cart-item .remove:hover { background: var(--rc-c-error); color: #fff !important; } .rc-cart-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 18px 0; margin: 0; font-size: 1.05rem; color: var(--rc-c-heading); } .rc-cart-drawer .woocommerce-mini-cart__total .amount { color: var(--rc-price); font-family: var(--rc-f-display); font-size: 1.4rem; } .rc-cart-drawer .woocommerce-mini-cart__buttons { display: grid; gap: 10px; margin: 0; } .rc-cart-drawer .woocommerce-mini-cart__buttons .button { width: 100%; margin: 0 !important; } .rc-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) { --_bg: transparent; --_fg: var(--rc-c-heading); border-color: var(--rc-gold-line); } .rc-cart-drawer .woocommerce-mini-cart__empty-message { text-align: center; padding: 48px 0; color: var(--rc-c-muted); font-family: var(--rc-f-display); font-size: 1.4rem; } /* ========================================================================== 11. Pills, post cards, prose, pagination, comments ========================================================================== */ .rc-pills ul { display: flex; gap: 10px; list-style: none; margin: 0 0 28px; padding: 0 0 4px; overflow-x: auto; scrollbar-width: none; } .rc-pills ul::-webkit-scrollbar { display: none; } .rc-pills a { display: inline-block; white-space: nowrap; padding: 10px 20px; border: 1px solid var(--rc-c-border); border-radius: 999px; color: var(--rc-c-text); text-decoration: none; font-family: var(--rc-f-label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: all .3s; } .rc-pills a:hover { border-color: var(--rc-c-primary); color: var(--rc-c-primary); } .rc-pills a[aria-current] { background: var(--rc-c-primary); border-color: var(--rc-c-primary); color: var(--rc-c-primary-ink); } .rc-post-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .rc-post-card { position: relative; } .rc-post-card__media { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--rc-radius); background: var(--rc-c-surface); } .rc-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--rc-ease-out); } .rc-post-card:hover .rc-post-card__media img { transform: scale(1.05); } .rc-post-card__ph { display: grid; place-items: center; height: 100%; color: var(--rc-c-primary); opacity: .5; } .rc-post-card__body { padding-top: 18px; } .rc-post-card__body .rc-kicker { margin-bottom: .6em; } .rc-post-card__title { font-size: 1.6rem; } .rc-post-card__title a { color: var(--rc-c-heading); text-decoration: none; } .rc-post-card__title a::after { content: ""; position: absolute; inset: 0; } .rc-prose { font-size: 1.05rem; } .rc-prose > * + * { margin-top: 1.2em; } .rc-prose h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); margin-top: 2em; } .rc-prose h3 { margin-top: 1.6em; } .rc-prose ul, .rc-prose ol { padding-inline-start: 1.3em; } .rc-prose li::marker { color: var(--rc-c-primary); } .rc-prose blockquote { margin: 2em 0; padding: 0 0 0 1.5em; border-inline-start: 2px solid var(--rc-c-primary); font-family: var(--rc-f-display); font-size: 1.6rem; font-style: italic; color: var(--rc-c-heading); } .rc-prose table { width: 100%; border-collapse: collapse; } .rc-prose th, .rc-prose td { padding: 12px; border-bottom: 1px solid var(--rc-c-border); text-align: start; } .rc-prose img { border-radius: var(--rc-radius); } .pagination, .woocommerce nav.woocommerce-pagination { margin-top: 48px; } .nav-links, .woocommerce nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; border: 0 !important; } .woocommerce nav.woocommerce-pagination ul li { border: 0 !important; } .page-numbers { display: inline-grid !important; place-items: center; min-width: 46px; height: 46px; padding: 0 10px !important; border: 1px solid var(--rc-c-border) !important; border-radius: 50%; color: var(--rc-c-text) !important; background: transparent !important; text-decoration: none; font-weight: 600; } .page-numbers.current, .page-numbers:hover { border-color: var(--rc-c-primary) !important; color: var(--rc-c-primary) !important; } .page-numbers.current { background: var(--rc-c-primary) !important; color: var(--rc-c-primary-ink) !important; } .post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; } .post-navigation a { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--rc-c-border); border-radius: var(--rc-radius); text-decoration: none; color: var(--rc-c-heading); font-family: var(--rc-f-display); font-size: 1.3rem; } .post-navigation .nav-next { text-align: end; } .rc-comments { margin-top: 64px; } .rc-comments__list { list-style: none; padding: 0; } .rc-comments .comment-body { padding: 20px 0; border-bottom: 1px solid var(--rc-c-border); } /* Empty states */ .rc-empty { text-align: center; padding: clamp(48px, 8vw, 96px) 20px; max-width: 640px; margin-inline: auto; } .rc-empty h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); } .rc-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; } .rc-empty .rc-searchform { margin: 24px auto 0; } /* 404 */ .rc-404 { position: relative; overflow: hidden; isolation: isolate; min-height: 72vh; display: grid; align-items: center; text-align: center; background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--rc-glow) 30%, transparent), transparent 60%); } .rc-404__inner { padding-block: 96px; display: flex; flex-direction: column; align-items: center; } .rc-404__code { font-family: var(--rc-f-display); font-size: clamp(7rem, 4rem + 16vw, 16rem); line-height: .8; margin: 0 0 .1em; background: linear-gradient(180deg, var(--rc-c-primary), transparent 95%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .55; } .rc-404__title { max-width: 16ch; } .rc-404__search { width: min(560px, 100%); margin: 16px 0 24px; } .rc-404__search .rc-searchform { margin: 0 auto; } .rc-404__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* Basic homepage fallback */ .rc-basic-hero { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-block: calc(var(--rc-header-h) + 80px) 120px; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--rc-glow) 35%, transparent), transparent 65%); } .rc-basic-hero__inner { display: flex; flex-direction: column; align-items: center; } .rc-basic-hero .rc-basic-hero__logo { height: 200px; width: auto; margin-bottom: 24px; } /* ========================================================================== 12. Footer ========================================================================== */ .rc-footer { position: relative; overflow: hidden; isolation: isolate; background: var(--rc-footer-bg); color: var(--rc-footer-text); padding-top: var(--rc-footer-pad); border-top: 1px solid var(--rc-c-border); font-size: .95rem; } .rc-footer__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 55% 45% at 50% 0%, color-mix(in srgb, var(--rc-glow) 20%, transparent), transparent 70%); } .rc-footer__newsletter { display: grid; gap: 24px; align-items: center; grid-template-columns: 1fr; padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid var(--rc-c-border); } @media (min-width: 900px) { .rc-footer__newsletter { grid-template-columns: 1fr 1fr; } } .rc-footer__nl-title { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); margin: 0 0 .2em; } .rc-footer__grid { display: grid; gap: 40px 24px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .rc-footer__brand { grid-column: 1 / -1; display: grid; gap: 20px; justify-items: start; } @media (min-width: 1000px) { .rc-footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); } .rc-footer__brand { grid-column: auto; } } .rc-footer .rc-footer__logo .rc-logo__img { height: var(--rc-logo-h-footer); } .rc-footer__about { max-width: 38ch; margin: 0; } .rc-footer__title { font-family: var(--rc-f-label); font-size: var(--rc-fs-label); font-weight: 600; letter-spacing: var(--rc-label-track); text-transform: uppercase; color: var(--rc-c-primary); margin: 0 0 18px; } .rc-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .rc-footer__menu a, .rc-contact a { color: var(--rc-footer-link); text-decoration: none; transition: color .25s, padding .3s var(--rc-ease-out); } .rc-footer__menu a:hover { color: var(--rc-c-primary); padding-inline-start: 6px; } .rc-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .rc-contact li { display: flex; gap: 10px; align-items: flex-start; } .rc-contact .rc-icon { color: var(--rc-c-primary); margin-top: 3px; } .rc-social { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .rc-social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--rc-c-border); border-radius: 50%; color: var(--rc-c-heading); transition: all .3s var(--rc-ease); } .rc-social a:hover { border-color: var(--rc-c-primary); color: var(--rc-c-primary-ink); background: var(--rc-c-primary); transform: translateY(-2px); } .rc-footer__warning { margin: 56px 0 0; padding: 16px 20px; border: 1px solid var(--rc-c-border); border-inline-start: 2px solid var(--rc-c-primary); border-radius: var(--rc-radius); font-size: .85rem; color: var(--rc-c-text); background: rgba(255, 255, 255, .015); } .rc-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding-block: 24px 32px; border-top: 1px solid var(--rc-c-border); font-size: .82rem; } .rc-footer__copy { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; } .rc-payments { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .rc-payments li { padding: 4px 10px; border: 1px solid var(--rc-c-border); border-radius: 4px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--rc-c-text); } /* ========================================================================== 13. Floating elements ========================================================================== */ .rc-wa-float { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 70; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #1f8f4e; color: #fff; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .8); transition: transform .3s var(--rc-ease-out); } .rc-wa-float:hover { color: #fff; transform: scale(1.08); } .rc-to-top { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 70; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rc-gold-line); background: color-mix(in srgb, var(--rc-c-bg) 85%, transparent); color: var(--rc-c-primary); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s var(--rc-ease-out); } .rc-to-top[hidden] { display: grid; } .rc-to-top.is-visible { opacity: 1; transform: none; } .rc-to-top:not(.is-visible) { pointer-events: none; } .rc-consent { position: fixed; z-index: 95; bottom: 16px; inset-inline: 16px; max-width: 620px; margin-inline: auto; padding: 20px 22px; background: var(--rc-c-surface); border: 1px solid var(--rc-gold-line); border-radius: calc(var(--rc-radius) + 4px); box-shadow: var(--rc-shadow); display: grid; gap: 14px; font-size: .92rem; } .rc-consent[hidden] { display: none; } .rc-consent p { margin: 0; } .rc-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } /* Accordion (details/summary) */ .rc-accordion details { border-bottom: 1px solid var(--rc-c-border); } .rc-accordion summary { display: flex; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none; color: var(--rc-c-heading); font-weight: 600; } .rc-accordion summary::-webkit-details-marker { display: none; } .rc-accordion summary .rc-icon:first-child { color: var(--rc-c-primary); } .rc-accordion summary span { flex: 1; } .rc-accordion__icon { transition: transform .35s var(--rc-ease-out); } .rc-accordion details[open] .rc-accordion__icon { transform: rotate(45deg); } .rc-accordion details > div { padding: 0 0 16px; color: var(--rc-c-text); } /* Visibility helpers */ @media (max-width: 767px) { .rc-vis--desktop { display: none !important; } } @media (min-width: 768px) { .rc-vis--mobile { display: none !important; } } /* ========================================================================== 14. Motion: reveal on scroll (progressive: content is visible without JS) ========================================================================== */ .rc-js [data-rc-reveal] { opacity: 0; transform: translateY(var(--rc-reveal-y)); transition: opacity var(--rc-reveal-dur) var(--rc-ease-out), transform var(--rc-reveal-dur) var(--rc-ease-out); transition-delay: var(--rc-delay, 0s); } .rc-js [data-rc-reveal].is-revealed { opacity: 1; transform: none; } .rc-anim--off [data-rc-reveal], .elementor-editor-active [data-rc-reveal], .elementor-editor-preview [data-rc-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } .elementor-editor-active .rc-split .rc-w > span, .elementor-editor-active [data-rc-reveal] img { transform: none !important; } /* Elementor re-renders widgets after load; never hide them while editing. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .rc-js [data-rc-reveal] { opacity: 1; transform: none; clip-path: none !important; } .rc-js .rc-split .rc-w > span, .rc-js [data-rc-reveal] img { transform: none !important; } .rc-smoke { display: block; } } /* ========================================================================== 15. Responsive header ========================================================================== */ @media (max-width: 1099px) { .rc-header__inner, .rc-header--centered .rc-header__inner, .rc-header--stacked .rc-header__inner { grid-template-columns: 1fr auto 1fr; grid-template-areas: "menu logo actions"; min-height: 76px; padding-top: 0; } .rc-nav { display: none; } .rc-header__menu-btn { display: inline-grid; justify-self: start; margin-inline-start: -10px; } .rc-logo .rc-logo__img { height: var(--rc-logo-h-mobile); } .rc-header:has(.rc-logo__img--mobile) .rc-logo__img--default, .rc-header:has(.rc-logo__img--mobile) .rc-logo__img--transparent, .rc-header:has(.rc-logo__img--mobile) .rc-logo__img--sticky { display: none !important; } .rc-logo__img--mobile { display: block; } .rc-header.is-stuck .rc-header__inner { min-height: 64px; } .rc-header.is-stuck .rc-logo .rc-logo__img { height: calc(var(--rc-logo-h-mobile) * .85); } .rc-header__actions { margin-inline-end: -10px; } .rc-header__account { display: none; } .rc-transparent-header .rc-page-hero { padding-top: calc(76px + 48px); } } @media (max-width: 480px) { .rc-header--checkout .rc-checkout-back span, .rc-checkout-label span { display: none; } .rc-wa-float { width: 52px; height: 52px; bottom: 16px; inset-inline-end: 16px; } .rc-to-top { bottom: 16px; inset-inline-start: 16px; } } /* ========================================================================== 16. Guard: theme controls stay independent of global button & link styles Elementor → Site Settings → Buttons / Typography style every