/* Royall production chrome — brand bar, footer, FAB rail, notification popup, brand mark. Scoped under body[data-theme="redesign"] so it doesn't fight existing per-portal styles during phased rollout. Phase 0 of the redesign migration. Pages opt in by setting the data-theme attribute (server-side, behind a feature flag). Import in together with /static/royall-tokens.css. Source of truth: backend/creator/redesign/_nav.css (deck chrome styles). Deck-only sidebar (.mockup-nav, .mockup-nav-*) is NOT ported here — it's mockup-only chrome that doesn't ship to prod. */ /* ── Brand bar (top, fixed) ──────────────────────────────────── */ body[data-theme="redesign"] .brand-bar { position: fixed; top: 0; left: 0; right: 0; /* iOS safe-area top (2026-05-25 PWA Phase 1E). With viewport-fit=cover the bar extends UNDER the dynamic island / notch on iPhone 14+. Without compensating padding, the centered brand wordmark sits BEHIND the island. We grow the bar's height by the safe-area inset and push content down by the same amount — the backdrop-blur header keeps bleeding edge-to-edge for visual continuity, but the logo now centers in the visible area below the notch. env() returns 0 on non-iOS so desktop layout is unchanged. */ height: calc(96px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); z-index: 90; display: flex; align-items: center; justify-content: center; pointer-events: none; background: linear-gradient(180deg, rgba(18, 18, 38, 0.55) 0%, rgba(18, 18, 38, 0.32) 55%, rgba(18, 18, 38, 0) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); } /* ── Brand mark (debossed white wordmark inside .brand-bar) ────── */ body[data-theme="redesign"] .brand-mark { display: inline-flex; align-items: center; color: #fff; text-decoration: none; pointer-events: auto; transition: opacity 0.2s; line-height: 0; } body[data-theme="redesign"] .brand-mark:hover { opacity: 1; } body[data-theme="redesign"] .brand-mark-logo { height: 48px; width: auto; display: block; opacity: 0.34; } /* ── Brand footer (bottom of document) ────────────────────────── */ body[data-theme="redesign"] { position: relative; } body[data-theme="redesign"] .brand-foot { position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 18px 24px 22px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243, 238, 248, 0.45); } /* Footer-space reservation (2026-05-29). royall-chrome.js adds `.has-brand-foot` to whenever it injects the absolute `.brand-foot`. Because the foot is position:absolute, nothing in normal flow reserves room for it — and a page shell's bottom MARGIN collapses through the body — so on a tall page the foot overlapped the last content card (seen on the signed-in /extension-pair). Body padding-bottom does NOT collapse, so it reserves a real gap, and only on pages that actually inject the foot. ~80px clears the ~54px foot; env() adds the iOS home-indicator inset (0 on desktop). */ body[data-theme="redesign"].has-brand-foot { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } body[data-theme="redesign"] .brand-foot a { color: inherit; text-decoration: none; transition: color 0.15s; } body[data-theme="redesign"] .brand-foot a:hover { color: rgba(243, 238, 248, 0.85); } body[data-theme="redesign"] .brand-foot-sep { opacity: 0.4; margin: 0 10px; } /* ── Vault FAB rail (right side, fixed, on vault pages) ──────── */ body[data-theme="redesign"] .vault-fab-rail { position: fixed; right: 32px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 50; } body[data-theme="redesign"] .vault-fab-rail .action { width: 48px; height: 48px; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(243,238,248, 0.85); transition: all 0.15s; text-decoration: none; } body[data-theme="redesign"] .vault-fab-rail .action:hover { background: rgba(255,180,180,0.18); border-color: rgba(255,180,180,0.36); color: #fff; transform: scale(1.05); } body[data-theme="redesign"] .vault-fab-rail .action.primary { background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); color: #3d1d1d; border-color: transparent; box-shadow: 0 8px 24px -8px rgba(255,180,180,0.5); } body[data-theme="redesign"] .vault-fab-rail .action svg { width: 18px; height: 18px; } /* Phase R7.3 — Radar FAB "ready to submit" state. `.is-ready` is set by royall-chrome.js::highlightRadarFabIfReady() when the creator has at least one tier-reached asset that hasn't been submitted for Radar review yet. Two visual cues: 1. The icon glows continuously with a rose halo + breathing scale. Stronger than the hover state — visible from the opposite side of the page. 2. A "Ready to submit for Radar" pill floats to the LEFT of the icon with a chevron pointing at it. Slides in from the right, pulses with the icon, hides on hover so the click target isn't visually crowded. Hover hides the hint label (so the user can read the icon's own tooltip if they really want), and clicking navigates them to /creator/likeness/radar.html where Phase R7.2's spotlight kicks in. */ body[data-theme="redesign"] .vault-fab-rail .action.is-ready { background: linear-gradient(135deg, rgba(255,180,180,0.32) 0%, rgba(180,120,120,0.32) 100%); border-color: rgba(255,180,180,0.6); color: #ffd0d0; box-shadow: 0 8px 24px -6px rgba(255,180,180,0.6), 0 0 0 0 rgba(255,180,180,0.65); animation: fab-radar-pulse 2.4s ease-in-out infinite; } @keyframes fab-radar-pulse { 0%, 100% { box-shadow: 0 8px 24px -6px rgba(255,180,180,0.6), 0 0 0 0 rgba(255,180,180,0.65); transform: scale(1); } 50% { box-shadow: 0 12px 32px -6px rgba(255,180,180,0.85), 0 0 0 12px rgba(255,180,180,0); transform: scale(1.06); } } body[data-theme="redesign"] .vault-fab-rail .action.is-ready:hover { /* Cancel the pulse on hover so the hover-bg + scale read clearly */ animation: none; transform: scale(1.08); } /* Floating hint label to the LEFT of the radar FAB. Wine card with rose border + small chevron pointing right at the icon. Animates in 200ms after the page loads (let the FAB itself paint first), then bobs gently to draw the eye without spinning. */ body[data-theme="redesign"] .vault-fab-rail .action .fab-hint { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 8px 14px; background: linear-gradient(135deg, rgba(61,29,29,0.95) 0%, rgba(40,20,30,0.95) 100%); border: 1px solid rgba(255,180,180,0.45); color: #ffd0d0; font-size: 12px; font-weight: 700; letter-spacing: -0.005em; border-radius: 10px; box-shadow: 0 16px 40px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,180,180,0.18); animation: fab-hint-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both, fab-hint-bob 2.4s ease-in-out 600ms infinite; pointer-events: none; z-index: 10; } body[data-theme="redesign"] .vault-fab-rail .action .fab-hint::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: rgba(255,180,180,0.45); } @keyframes fab-hint-in { from { opacity: 0; transform: translate(8px, -50%); } to { opacity: 1; transform: translate(0, -50%); } } @keyframes fab-hint-bob { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(-3px, -50%); } } /* Hide the hint while hovering the icon so the click target reads cleanly. Returns on mouse-out. */ body[data-theme="redesign"] .vault-fab-rail .action.is-ready:hover .fab-hint { opacity: 0; pointer-events: none; } /* Make sure the FAB's own positioning supports the absolute hint. */ body[data-theme="redesign"] .vault-fab-rail .action { position: relative; } @media (max-width: 760px) { /* On narrow screens the rail collapses anyway, but if it doesn't, drop the side hint into a tiny dot above the icon so it doesn't run off the viewport edge. */ body[data-theme="redesign"] .vault-fab-rail .action .fab-hint { display: none; } } /* ── Notification dot indicator on .action.has-dot ──────────── */ body[data-theme="redesign"] .action.has-dot { position: relative; } body[data-theme="redesign"] .action-dot { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); color: #3d1d1d; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em; box-shadow: 0 0 12px rgba(255,180,180,0.6); border: 2px solid rgba(30, 16, 16, 0.95); } /* ── Notification popup (anchored to .action.has-dot) ─────────── */ body[data-theme="redesign"] .notif-popup { position: absolute; top: -8px; right: calc(100% + 14px); width: 360px; background: rgba(30, 16, 16, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; box-shadow: 0 24px 64px -16px rgba(0,0,0,0.6); z-index: 100; opacity: 0; transform: translateX(8px); transition: opacity 0.18s, transform 0.18s; pointer-events: none; overflow: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; cursor: default; } body[data-theme="redesign"] .action.has-dot.is-open .notif-popup { opacity: 1; pointer-events: auto; transform: translateX(0); } body[data-theme="redesign"] .notif-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); } body[data-theme="redesign"] .notif-title-h { font-size: 13px; font-weight: 800; letter-spacing: -0.005em; color: #fff; } body[data-theme="redesign"] .notif-mark-all { font-size: 11px; font-weight: 700; color: rgba(243,238,248, 0.6); text-decoration: none; } body[data-theme="redesign"] .notif-mark-all:hover { color: #ffd0d0; } body[data-theme="redesign"] .notif-list { display: flex; flex-direction: column; max-height: 380px; overflow-y: auto; } body[data-theme="redesign"] .notif-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,0.04); text-decoration: none; cursor: pointer; transition: background 0.15s; position: relative; } body[data-theme="redesign"] .notif-item:first-child { border-top: none; } body[data-theme="redesign"] .notif-item:hover { background: rgba(255,255,255,0.03); } body[data-theme="redesign"] .notif-item.unread { background: rgba(255,180,180,0.04); } body[data-theme="redesign"] .notif-item.unread:hover { background: rgba(255,180,180,0.08); } body[data-theme="redesign"] .notif-item.unread::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); box-shadow: 0 0 6px rgba(255,180,180,0.6); } body[data-theme="redesign"] .notif-icon { width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,0.06); color: rgba(243,238,248, 0.85); display: flex; align-items: center; justify-content: center; flex: none; } body[data-theme="redesign"] .notif-icon.rose { background: rgba(255,180,180,0.16); color: #ffd0d0; } body[data-theme="redesign"] .notif-icon.good { background: rgba(120,220,180,0.16); color: #a8efce; } body[data-theme="redesign"] .notif-icon.warn { background: rgba(255,200,100,0.16); color: #ffd49e; } body[data-theme="redesign"] .notif-icon svg { width: 14px; height: 14px; stroke-width: 2.5; } body[data-theme="redesign"] .notif-meta { min-width: 0; } body[data-theme="redesign"] .notif-line { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.35; } body[data-theme="redesign"] .notif-sub { font-size: 11px; color: rgba(243,238,248, 0.55); margin-top: 2px; line-height: 1.4; } body[data-theme="redesign"] .notif-time { font-size: 10px; font-weight: 700; color: rgba(243,238,248, 0.45); letter-spacing: 0.04em; white-space: nowrap; align-self: flex-start; padding-top: 1px; } body[data-theme="redesign"] .notif-foot { display: block; padding: 12px 18px; text-align: center; font-size: 12px; font-weight: 800; color: #ffd0d0; text-decoration: none; border-top: 1px solid rgba(255,255,255,0.06); } body[data-theme="redesign"] .notif-foot:hover { color: #fff; background: rgba(255,180,180,0.05); } /* Suppress legacy inline footers on opt-in pages — global brand-foot replaces them */ body[data-theme="redesign"] .deck-footer, body[data-theme="redesign"] .auth-footer { display: none !important; } @media (max-width: 1180px) { body[data-theme="redesign"] .vault-fab-rail { display: none; } } /* ── Account popup (3-dots → email + Sign out) ───────────────── Same family as .notif-popup but narrower since it only has 2 rows. Anchored to the right of the .action.is-account button (which sits at the bottom of the FAB rail). Wired by royall-chrome.js — toggling .is-open on the parent .action reveals the popup. Positioned to OPEN UPWARD from the bottom of the rail since it lives at the bottom; bell popup opens at row-level. */ body[data-theme="redesign"] .account-popup { position: absolute; bottom: 0; right: calc(100% + 14px); width: 240px; background: rgba(30, 16, 16, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.6); z-index: 100; opacity: 0; transform: translateX(8px); transition: opacity 0.18s, transform 0.18s; pointer-events: none; overflow: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } body[data-theme="redesign"] .action.is-account.is-open .account-popup { opacity: 1; pointer-events: auto; transform: translateX(0); } body[data-theme="redesign"] .account-popup-email { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.005em; } body[data-theme="redesign"] .account-popup-email i { width: 18px; height: 18px; color: rgba(255, 180, 180, 0.75); flex: none; } body[data-theme="redesign"] .account-popup-email-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } body[data-theme="redesign"] .account-popup-action { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 13px; font-weight: 700; color: rgba(243, 238, 248, 0.85); text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s; } body[data-theme="redesign"] .account-popup-action:hover { background: rgba(255, 255, 255, 0.04); color: #fff; } body[data-theme="redesign"] .account-popup-action i { width: 16px; height: 16px; color: rgba(243, 238, 248, 0.6); } body[data-theme="redesign"] .account-popup-action:hover i { color: #ffd0d0; } /* ── Admin sidebar sign-out (no FAB on admin per user spec) ─── Injected by royall-chrome.js into the existing .sidebar-footer slot at the bottom of the admin sidebar. Single link, no popup, no email — minimal, matches "just add a logout somewhere". Mirrors the legacy admin nav-item visual pattern. */ body[data-theme="redesign"] .sidebar-signout { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 8px; border-radius: 10px; color: rgba(243, 238, 248, 0.7); text-decoration: none; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; } body[data-theme="redesign"] .sidebar-signout:hover { background: rgba(239, 68, 68, 0.08); color: #fca5a5; } body[data-theme="redesign"] .sidebar-signout i { width: 14px; height: 14px; } /* ───────────────────────────────────────────────────────────────────── Chat widget integration (Chrome rebuild Turn 6 follow-up, 2026-05-05) ───────────────────────────────────────────────────────────────────── The existing chat-widget.js (creator/js/chat-widget.js + company/js/chat-widget.js) auto-injects a floating bubble button (#rcw-btn) in the bottom-right corner. With the FAB rail also in the bottom-right, that's a double-bubble visual conflict. We hide the widget's own bubble button. The slide-out panel (#rcw-panel) stays — that's the actual chat UI. The FAB rail's chat icon (data-action="chat") triggers window._rcw.toggle() to open it. See royall-chrome.js loadChatWidget() + the chat delegation handler. */ body[data-theme="redesign"]:not(.support-chat-bubble) #rcw-btn { display: none !important; } /* Standalone pages with no FAB rail (e.g. the /beta/* onboarding wizard) opt into the widget's own bottom-right bubble via body.support-chat-bubble — there's no FAB chat icon there to replace it. See chrome.js loadStandaloneChat(). */ /* ───────────────────────────────────────────────────────────────────── PWA Phase 1F — install prompt banner + iOS instructional modal ───────────────────────────────────────────────────────────────────── Logic in royall-install-prompt.js. Banner slides in 30s after the page is visible, only when the browser can actually install (or the user is on iOS Safari and we can teach them the share flow). The banner lives at fixed bottom on mobile (centered, full-width minus padding) and bottom-right on desktop (max-width card). The iOS modal uses the same dim-and-card pattern as our existing modals so it visually belongs. ──────────────────────────────────────────────────────────────── */ /* ── Banner ──────────────────────────────────────────────────────── */ .royall-install-banner { position: fixed; left: 16px; right: 16px; /* Sit above the iOS home indicator (Phase 1E added body padding for that, but the banner is position:fixed so it doesn't inherit it). max() so desktop falls back to 16px. */ bottom: max(16px, env(safe-area-inset-bottom)); z-index: 200; /* above brand-bar (90), below modals (1000) */ display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(140deg, #1e1010 0%, #3d1d1d 100%); border: 1px solid rgba(255, 180, 180, 0.32); box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(255, 180, 180, 0.12); color: #f3eef8; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* Slide-in transform — applied via .is-in below. */ transform: translateY(calc(100% + 32px)); opacity: 0; transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 260ms ease; } .royall-install-banner.is-in { transform: translateY(0); opacity: 1; } .royall-install-banner.is-out { transform: translateY(calc(100% + 32px)); opacity: 0; } /* Desktop: anchor bottom-right with a max-width card. */ @media (min-width: 640px) { .royall-install-banner { left: auto; right: 24px; max-width: 380px; } } .royall-install-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255, 180, 180, 0.12); } .royall-install-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .royall-install-text { flex: 1; min-width: 0; } .royall-install-title { font-size: 14px; font-weight: 800; letter-spacing: -0.005em; color: #fff; margin: 0 0 2px; } .royall-install-body { font-size: 12px; font-weight: 500; line-height: 1.4; color: rgba(243, 238, 248, 0.7); } .royall-install-cta { flex: none; padding: 9px 14px; border-radius: 999px; background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); color: #3d1d1d; border: none; font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: -0.005em; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, box-shadow 0.18s ease; } .royall-install-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(255, 180, 180, 0.55); } .royall-install-cta:active { transform: translateY(0); } .royall-install-dismiss { flex: none; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(243, 238, 248, 0.7); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.15s, color 0.15s; } .royall-install-dismiss:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } /* Touch: grow to 44×44 (Apple HIG — matches Phase 1E modal-close rule). */ @media (hover: none) and (pointer: coarse) { .royall-install-dismiss { width: 44px; height: 44px; } } /* ── iOS instructional modal ─────────────────────────────────────── */ .royall-install-modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 6, 16, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); opacity: 0; transition: opacity 220ms ease; } .royall-install-modal-backdrop.is-in { opacity: 1; } .royall-install-modal-backdrop.is-out { opacity: 0; } @media (min-width: 640px) { .royall-install-modal-backdrop { align-items: center; } } .royall-install-modal { position: relative; width: 100%; max-width: 440px; padding: 28px 24px 24px; border-radius: 22px; background: linear-gradient(160deg, #2a1822 0%, #1c1019 100%); border: 1px solid rgba(255, 180, 180, 0.24); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); color: #f3eef8; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; transform: translateY(20px); transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1); } .royall-install-modal-backdrop.is-in .royall-install-modal { transform: translateY(0); } .royall-install-modal-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(243, 238, 248, 0.7); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .royall-install-modal-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } @media (hover: none) and (pointer: coarse) { .royall-install-modal-close { width: 44px; height: 44px; } } .royall-install-modal-title { margin: 0 0 8px; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: #fff; } .royall-install-modal-sub { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: rgba(243, 238, 248, 0.65); } .royall-install-modal-steps { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 14px; } .royall-install-modal-steps li { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 14px; background: rgba(255, 180, 180, 0.05); border: 1px solid rgba(255, 180, 180, 0.12); } .royall-install-modal-step-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); color: #3d1d1d; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; } .royall-install-modal-step-body { flex: 1; font-size: 14px; line-height: 1.5; color: rgba(243, 238, 248, 0.88); } .royall-install-modal-step-body strong { color: #fff; font-weight: 800; } /* Inline iOS share glyph — appears inside the prose so users can pattern-match the icon they're looking for in Safari's tab bar. iOS-blue is intentional; mirrors what the user sees. */ .royall-install-modal-glyph { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 2px; vertical-align: -10px; border-radius: 8px; background: rgba(10, 132, 255, 0.14); border: 1px solid rgba(10, 132, 255, 0.3); color: #0a84ff; } .royall-install-modal-ok { width: 100%; padding: 14px 20px; border-radius: 14px; background: linear-gradient(135deg, #ffb4b4 0%, #b47878 100%); color: #3d1d1d; border: none; font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: -0.005em; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, box-shadow 0.18s ease; } .royall-install-modal-ok:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(255, 180, 180, 0.55); } .royall-install-modal-ok:active { transform: translateY(0); }