/** * Ponte Flash Code → página /services (cards, abas, botões). * Usa --rhzb-primary* injetados pelo flash_head_code no . */ .sv-card { position: relative; border-radius: 1.125rem; border: 1px solid color-mix(in srgb, var(--rhzb-primary, #6366f1) 10%, transparent); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.99)); box-shadow: 0 8px 24px color-mix(in srgb, var(--rhzb-primary, #6366f1) 6%, transparent); transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease; overflow: hidden; } .sv-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, var(--rhzb-primary-2, #8b5cf6), var(--rhzb-primary, #6366f1), var(--rhzb-primary-3, #a78bfa) ); opacity: 0.95; z-index: 2; pointer-events: none; } .sv-card::after { content: ""; position: absolute; inset: -1px; background: radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--rhzb-primary-2, #8b5cf6) 14%, transparent), transparent 35%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--rhzb-primary, #6366f1) 12%, transparent), transparent 34%); opacity: 0; pointer-events: none; transition: opacity 0.26s ease; } .dark .sv-card { background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(7, 17, 31, 0.97)); border-color: color-mix(in srgb, var(--rhzb-primary-3, #a78bfa) 18%, transparent); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); } .sv-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--rhzb-primary-2, #8b5cf6) 55%, transparent); box-shadow: 0 20px 46px color-mix(in srgb, var(--rhzb-primary, #6366f1) 22%, transparent); } .sv-card:hover::after { opacity: 1; } .sv-card > * { position: relative; z-index: 1; } .sv-img-wrap { background: linear-gradient( 135deg, color-mix(in srgb, var(--rhzb-primary, #6366f1) 6%, transparent), color-mix(in srgb, var(--rhzb-primary-2, #8b5cf6) 6%, transparent) ); } .sv-provider-badge { color: var(--rhzb-primary, #6366f1); background: color-mix(in srgb, var(--rhzb-primary, #6366f1) 10%, transparent); } .dark .sv-provider-badge { color: var(--rhzb-primary-3, #a78bfa); background: color-mix(in srgb, var(--rhzb-primary-3, #a78bfa) 12%, transparent); } .sv-card:hover .sv-card-title { color: var(--rhzb-primary, #4f46e5); } .dark .sv-card:hover .sv-card-title { color: var(--rhzb-primary-3, #a5b4fc); } .sv-tab-active { background: linear-gradient(135deg, var(--rhzb-primary, #4f46e5), var(--rhzb-primary-2, #7c3aed)) !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--rhzb-primary, #4f46e5) 35%, transparent) !important; } .sv-tab-inactive:hover { border-color: color-mix(in srgb, var(--rhzb-primary, #6366f1) 25%, transparent); color: var(--rhzb-primary, #6366f1); background: color-mix(in srgb, var(--rhzb-primary, #6366f1) 8%, transparent); } .sv-order-btn, .sv-search-btn, .sv-guest-strip, .sv-hero { background: linear-gradient(135deg, var(--rhzb-primary, #4f46e5), var(--rhzb-primary-2, #7c3aed)) !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--rhzb-primary, #4f46e5) 30%, transparent) !important; } .sv-order-btn:hover, .sv-search-btn:hover { box-shadow: 0 6px 20px color-mix(in srgb, var(--rhzb-primary-2, #7c3aed) 45%, transparent) !important; } .sv-price { color: var(--rhzb-primary, #059669); } .dark .sv-price { color: color-mix(in srgb, var(--rhzb-primary-3, #34d399) 90%, white); } .sv-tabs-card { border-color: color-mix(in srgb, var(--rhzb-primary, #6366f1) 10%, transparent); } .sv-search-wrap:focus-within { border-color: color-mix(in srgb, var(--rhzb-primary, #6366f1) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rhzb-primary, #6366f1) 12%, transparent); }