/* * RahkarTheme — product share modal + gallery action stack. * * Loaded on every product page (share is universal). Modal mirrors the * theme's desc/variation modal playbook: centered card on desktop, bottom * sheet on mobile (RHSheet). Tokens are redefined locally because RHSheet * relocates the dialog to , away from .rh-product where --rh-pd-* live. * * No global border-box in this theme → padded/sized boxes set it explicitly. */ /* ========================================================================= * Gallery action stack (▶ video + share), over the gallery viewport. * ========================================================================= * Desktop: vertical stack, top-right of the image (RTL: inline-start = right). * Mobile : horizontal, bottom-left (RTL: inline-end = left); share hidden, * so only the video ▶ shows there. */ .rh-gallery__actions { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 8px; inset-block-start: 12px; inset-inline-start: 12px; } .rh-gallery__action { box-sizing: border-box; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--wp--custom--radius--pill, 9999px); background: var(--wp--preset--color--base, #fff); color: var(--wp--preset--color--text, #1a1d23); box-shadow: var(--wp--preset--shadow--sm, 0 2px 6px rgba( 15, 17, 21, 0.16 )); cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; } .rh-gallery__action:hover { transform: scale( 1.06 ); background: var(--wp--preset--color--surface, #f7f7f8); } .rh-gallery__action svg { width: 20px; height: 20px; } /* Text label is mobile-only (the labelled video pill); desktop is icon-only. */ .rh-gallery__action-label { display: none; } /* Video ▶ is the prominent one: filled primary, white glyph. */ .rh-gallery__action--video { background: var(--wp--preset--color--primary, #0a66c2); color: var(--wp--preset--color--base, #fff); } .rh-gallery__action--video:hover { background: var(--wp--preset--color--primary-dark, #074a8d); } .rh-gallery__action--video svg { margin-inline-start: 2px; /* optical-centre the play triangle */ } @media ( max-width: 900px ) { .rh-gallery__actions { inset-block-start: auto; inset-inline-start: auto; inset-block-end: 12px; inset-inline-end: 12px; flex-direction: row; } .rh-gallery__action--share { display: none; } /* Video → a clean, compact labelled pill (not the bold blue circle): white pill, small dark text, primary ▶. */ .rh-gallery__action--video { width: auto; height: 30px; gap: 5px; padding: 0 11px 0 9px; border-radius: var(--wp--custom--radius--pill, 9999px); background: var(--wp--preset--color--base, #fff); color: var(--wp--preset--color--text, #1a1d23); box-shadow: var(--wp--preset--shadow--sm, 0 2px 6px rgba( 15, 17, 21, 0.16 )); } .rh-gallery__action--video:hover { background: var(--wp--preset--color--base, #fff); } .rh-gallery__action--video svg { width: 15px; height: 15px; margin-inline-start: 0; color: var(--wp--preset--color--primary, #0a66c2); } .rh-gallery__action--video .rh-gallery__action-label { display: inline; font-size: var(--wp--preset--font-size--xs, 0.75rem); font-weight: var(--wp--custom--fw--strong, 400); line-height: 1; } } /* ========================================================================= * Share modal * ========================================================================= */ .rh-share-modal { --rh-fg: var(--wp--preset--color--text, #1a1d23); --rh-muted: var(--wp--preset--color--text-muted, #5b6271); --rh-bg: var(--wp--preset--color--base, #fff); --rh-surface: var(--wp--preset--color--surface, #f7f7f8); --rh-border: var(--wp--preset--color--border, #e2e4e9); --rh-primary: var(--wp--preset--color--primary, #0a66c2); border: 0; padding: 0; border-radius: 14px; width: 92vw; max-width: 420px; box-shadow: 0 16px 40px rgba( 15, 17, 21, 0.18 ); color: var(--rh-fg); background: var(--rh-bg); inset: 0; margin: auto; opacity: 0; transform: translateY( 8px ); transition: opacity 180ms ease-out, transform 220ms cubic-bezier( 0.2, 0, 0, 1 ), overlay 220ms allow-discrete, display 220ms allow-discrete; } .rh-share-modal[open] { opacity: 1; transform: translateY( 0 ); } @starting-style { .rh-share-modal[open] { opacity: 0; transform: translateY( 8px ); } } .rh-share-modal::backdrop { background: rgba( 15, 17, 21, 0.45 ); } .rh-share-modal__handle { display: none; } .rh-share-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 18px 12px; border-bottom: 1px solid var(--rh-border); } .rh-share-modal__title { margin: 0; font-size: 16px; font-weight: var(--wp--custom--fw--strong, 400); } .rh-share-modal__close { box-sizing: border-box; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--wp--custom--radius--pill, 9999px); background: transparent; color: var(--rh-muted); cursor: pointer; } .rh-share-modal__close:hover { background: var(--rh-surface); } .rh-share-modal__body { padding: 18px; display: flex; flex-direction: column; gap: 12px; } .rh-share-modal__text { margin: 0; font-size: 14px; font-weight: var(--wp--custom--fw--base, 300); color: var(--rh-muted); } .rh-share-modal__btn { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border-radius: 10px; font-family: inherit; font-size: 0.9375rem; font-weight: var(--wp--custom--fw--strong, 400); cursor: pointer; text-decoration: none; } .rh-share-modal__btn svg { width: 18px; height: 18px; flex: 0 0 auto; } .rh-share-modal__copy { border: 1px solid var(--rh-primary); background: transparent; color: var(--rh-primary); } .rh-share-modal__copy.is-copied { border-color: var(--wp--preset--color--success, #198754); color: var(--wp--preset--color--success, #198754); } /* SMS share — mobile only (desktop has no native SMS). Brand blue, not red: per CLAUDE.md the accent red is never used for CTAs. */ .rh-share-modal__sms { display: none; border: 0; background: var(--rh-primary); color: var(--wp--preset--color--base, #fff); } .rh-share-modal__sms:hover { background: var(--wp--preset--color--primary-dark, #074a8d); } /* ---- Mobile: bottom sheet ---- */ @media ( max-width: 900px ) { .rh-share-modal { position: fixed !important; width: 100%; max-width: none; inset: auto 0 0 0; margin: 0; border-radius: 16px 16px 0 0; max-height: 88vh; overflow-y: auto; padding-bottom: env( safe-area-inset-bottom, 0px ); transform: translateY( 100% ); transition: transform 240ms cubic-bezier( 0.2, 0, 0, 1 ), opacity 200ms ease-out, overlay 240ms allow-discrete, display 240ms allow-discrete; } .rh-share-modal[open] { transform: translateY( 0 ); } @starting-style { .rh-share-modal[open] { transform: translateY( 100% ); } } .rh-share-modal__close { display: none; } .rh-share-modal__handle { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--rh-border); margin: 8px auto 0; flex: 0 0 auto; } .rh-share-modal__header { padding: 8px 18px 12px; } .rh-share-modal__sms { display: flex; } }