/* ═══════════════════════════════════════════════════════════════ ARANTES TECNOLOGIA — components.css Unificação de: star-border.css + glass-surface.css + pixel-card.css ═══════════════════════════════════════════════════════════════ */ /* ── STAR BORDER ─────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════ STAR BORDER — Vanilla CSS Port Original: @react-bits/StarBorder ───────────────────────────────────────────────────────────── Usage: Label ═══════════════════════════════════════════════════════════════ */ /* ── CSS Custom Properties ── */ .star-border { --sb-color: #7B2FFF; /* star/glow color */ --sb-speed: 6s; /* animation speed */ --sb-thickness: 1px; /* border thickness */ --sb-radius: var(--radius-pill, 50px); --sb-bg: #000; --sb-border: #222; } /* ── Colour Presets ── */ .star-border--purple { --sb-color: #7B2FFF; } .star-border--pink { --sb-color: #E040FB; } .star-border--cyan { --sb-color: #00D4FF; } .star-border--magenta { --sb-color: magenta; } .star-border--white { --sb-color: #ffffff; } /* Semantic Presets */ .star-border--primary { --sb-color: var(--purple-main); } .star-border--secondary { --sb-color: var(--btn-gray); } .star-border--success { --sb-color: var(--success); } .star-border--danger { --sb-color: var(--danger); } .star-border--warning { --sb-color: var(--warning); } .star-border--info { --sb-color: var(--info); } /* ── Container ── */ .star-border { display: inline-block; position: relative; border-radius: var(--sb-radius); overflow: hidden; padding: var(--sb-thickness) 0; background: transparent; border: none; text-decoration: none; cursor: pointer; } /* ── Animated gradient strips ── */ .star-border::before, .star-border::after { content: ''; position: absolute; width: 300%; height: 50%; border-radius: 50%; opacity: 0.7; pointer-events: none; background: radial-gradient(circle, var(--sb-color), transparent 10%); } /* Bottom strip */ .star-border::before { bottom: -12px; right: -250%; animation: sb-bottom var(--sb-speed) linear infinite alternate; z-index: 0; } /* Top strip */ .star-border::after { top: -12px; left: -250%; animation: sb-top var(--sb-speed) linear infinite alternate; z-index: 0; } /* ── Inner content wrapper ── */ .star-border__inner { position: relative; border: 1px solid var(--sb-border); background: var(--sb-bg); color: #fff; font-family: var(--font-display, 'Manrope', sans-serif); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; text-align: center; padding: 14px 32px; border-radius: var(--sb-radius); z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.3s ease, border-color 0.3s ease; white-space: nowrap; width: 100%; } /* ── Colour accent on inner border ── */ .star-border--pink .star-border__inner { border-color: rgba(224, 64, 251, 0.4); } .star-border--cyan .star-border__inner { border-color: rgba(0, 212, 255, 0.4); } .star-border--white .star-border__inner { border-color: rgba(255, 255, 255, 0.35); } .star-border--primary .star-border__inner { border-color: rgba(123, 47, 255, 0.4); } .star-border--secondary .star-border__inner { border-color: rgba(107, 114, 128, 0.4); } .star-border--success .star-border__inner { border-color: rgba(16, 185, 129, 0.4); } .star-border--danger .star-border__inner { border-color: rgba(239, 68, 68, 0.4); } .star-border--warning .star-border__inner { border-color: rgba(245, 158, 11, 0.4); } .star-border--info .star-border__inner { border-color: rgba(14, 165, 233, 0.4); } /* ── Hover state ── */ .star-border:hover .star-border__inner { background: rgba(123, 47, 255, 0.10); border-color: rgba(123, 47, 255, 0.45); } .star-border--pink:hover .star-border__inner { border-color: rgba(224, 64, 251, 0.7); background: rgba(224,64,251,0.08); } .star-border--cyan:hover .star-border__inner { border-color: rgba(0, 212, 255, 0.7); background: rgba(0,212,255,0.08); } .star-border--white:hover .star-border__inner { border-color: rgba(255, 255, 255, 0.6); } .star-border--primary:hover .star-border__inner { border-color: rgba(123, 47, 255, 0.7); background: rgba(123, 47, 255, 0.08); } .star-border--secondary:hover .star-border__inner { border-color: rgba(107, 114, 128, 0.7); background: rgba(107, 114, 128, 0.08); } .star-border--success:hover .star-border__inner { border-color: rgba(16, 185, 129, 0.7); background: rgba(16, 185, 129, 0.08); } .star-border--danger:hover .star-border__inner { border-color: rgba(239, 68, 68, 0.7); background: rgba(239, 68, 68, 0.08); } .star-border--warning:hover .star-border__inner { border-color: rgba(245, 158, 11, 0.7); background: rgba(245, 158, 11, 0.08); } .star-border--info:hover .star-border__inner { border-color: rgba(14, 165, 233, 0.7); background: rgba(14, 165, 233, 0.08); } .star-border:hover::before, .star-border:hover::after { opacity: 1; } /* ── Keyframes ── */ @keyframes sb-bottom { 0% { transform: translate(0%, 0%); opacity: 1; } 100% { transform: translate(-100%, 0%); opacity: 0; } } @keyframes sb-top { 0% { transform: translate(0%, 0%); opacity: 1; } 100% { transform: translate(100%, 0%); opacity: 0; } } /* ── GLASS SURFACE ───────────────────────────── */ /* ═══════════════════════════════════════════════════════════════ GLASS SURFACE — Vanilla CSS Port Original: @react-bits/GlassSurface ───────────────────────────────────────────────────────────── Usage (works in Chrome/Edge with SVG backdrop-filter):
Content
For use as a button: Click me Width / height are set with CSS vars or inline styles: style="--gs-w:300px; --gs-h:80px; --gs-radius:20px" ═══════════════════════════════════════════════════════════════ */ /* ── Custom Properties ── */ .glass-surface { --gs-w: auto; --gs-h: auto; --gs-radius: 20px; --gs-frost: 0; /* backgroundOpacity */ --gs-sat: 1; /* saturation */ --gs-blur: 11; /* blur (px) */ --gs-filter-id: url(#gs-filter-global); } /* ── Base Structure ── */ .glass-surface { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--gs-w); height: var(--gs-h); border-radius: var(--gs-radius); overflow: hidden; transition: opacity 0.26s ease-out; /* Fallback background (always visible) */ background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(12px) saturate(1.8) brightness(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2), 0 2px 16px 0 rgba(31, 38, 135, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 0 rgba(255, 255, 255, 0.1); text-decoration: none; cursor: pointer; } /* ── Content wrapper ── */ .glass-surface__content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 14px 32px; border-radius: inherit; width: 100%; height: 100%; font-family: var(--font-display, 'Manrope', sans-serif); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #ffffff; text-align: center; white-space: nowrap; gap: 8px; transition: color var(--ease-normal, 0.3s ease); } /* ── SVG filter element (hidden) ── */ .glass-surface__filter { width: 100%; height: 100%; pointer-events: none; position: absolute; inset: 0; opacity: 0; z-index: -1; overflow: visible; } /* ── SVG-powered version (Chrome/Edge only) ── */ @supports (backdrop-filter: url(#test)) { .glass-surface { background: light-dark( hsl(0 0% 100% / var(--gs-frost, 0)), hsl(0 0% 0% / var(--gs-frost, 0)) ); backdrop-filter: var(--gs-filter-id) saturate(var(--gs-sat, 1)); box-shadow: 0 0 2px 1px light-dark( color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%) ) inset, 0 0 10px 4px light-dark( color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%) ) inset, 0px 4px 16px rgba(17, 17, 26, 0.05), 0px 8px 24px rgba(17, 17, 26, 0.05), 0px 16px 56px rgba(17, 17, 26, 0.05), 0px 4px 16px rgba(17, 17, 26, 0.05) inset, 0px 8px 24px rgba(17, 17, 26, 0.05) inset, 0px 16px 56px rgba(17, 17, 26, 0.05) inset; } } /* ── Focus ── */ .glass-surface:focus-visible { outline: 2px solid #7B2FFF; outline-offset: 2px; } /* ── Hover ── */ .glass-surface:hover { border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 12px 40px var(--gs-glow-1, rgba(123, 47, 255, 0.25)), 0 2px 16px var(--gs-glow-2, rgba(0, 212, 255, 0.1)), inset 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15); transform: translateY(-1px); transition: all 0.3s ease; } /* ── Dark mode fallback ── */ @media (prefers-color-scheme: dark) { .glass-surface { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 0 rgba(255, 255, 255, 0.07); } } /* ── No backdrop-filter support ── */ @supports not (backdrop-filter: blur(10px)) { .glass-surface { background: rgba(255, 255, 255, 0.32); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 0 rgba(255, 255, 255, 0.3); } .glass-surface::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.12); border-radius: inherit; z-index: -1; } } /* ───────────────────────────────── SIZE PRESETS (optional helpers) ───────────────────────────────── */ .gs-btn { --gs-w: auto; --gs-h: auto; --gs-radius: 50px; } .gs-card { --gs-radius: var(--radius-lg, 24px); --gs-frost: 0.08; /* Slightly more opaque for cards */ padding: 0; display: flex !important; width: 100%; } .gs-tag { --gs-radius: 50px; --gs-frost: 0.08; cursor: default; } .gs-tag:hover { transform: none !important; } .gs-tag:hover .glass-surface__content { color: #ffffff !important; } .gs-tag .glass-surface__content { padding: 8px 18px; font-size: 0.7rem; letter-spacing: 0.1em; } .gs-sm { padding: 10px 24px; } .gs-lg { padding: 18px 44px; font-size: 0.9rem; } /* ───────────────────────────────── COLOUR TINT OVERLAYS & GLOWS ───────────────────────────────── */ .gs-purple .glass-surface__content { text-shadow: 0 0 12px rgba(123,47,255,0.6); } .gs-cyan .glass-surface__content { text-shadow: 0 0 12px rgba(0,212,255,0.6); } .gs-pink .glass-surface__content { text-shadow: 0 0 12px rgba(224,64,251,0.6); } /* Semantic Variants */ .gs-primary { --gs-glow-1: rgba(123, 47, 255, 0.3); --gs-glow-2: rgba(224, 64, 251, 0.15); } .gs-primary .glass-surface__content { text-shadow: 0 0 12px rgba(123,47,255,0.6); } .gs-tag.gs-primary::before { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(123, 47, 255, 0.15); } .gs-tag.gs-primary { --gs-glow-1: rgba(123, 47, 255, 0.3); --gs-glow-2: rgba(224, 64, 251, 0.1); } .gs-primary:hover .glass-surface__content { color: var(--purple-light, #9B59B6); } .gs-secondary { --gs-glow-1: rgba(255, 255, 255, 0.15); --gs-glow-2: rgba(107, 114, 128, 0.1); } .gs-secondary .glass-surface__content { text-shadow: 0 0 12px rgba(255,255,255,0.2); } .gs-tag.gs-secondary::before { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(255, 255, 255, 0.08); } .gs-tag.gs-secondary { --gs-glow-1: rgba(255, 255, 255, 0.15); --gs-glow-2: rgba(107, 114, 128, 0.05); } .gs-secondary:hover .glass-surface__content { color: #f3f4f6; } .gs-success { --gs-glow-1: rgba(16, 185, 129, 0.3); --gs-glow-2: rgba(16, 185, 129, 0.15); } .gs-success .glass-surface__content { text-shadow: 0 0 12px rgba(16,185,129,0.6); } .gs-tag.gs-success::before { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(16, 185, 129, 0.15); } .gs-tag.gs-success { --gs-glow-1: rgba(16, 185, 129, 0.3); --gs-glow-2: rgba(16, 185, 129, 0.1); } .gs-success:hover .glass-surface__content { color: var(--success, #10B981); } .gs-danger { --gs-glow-1: rgba(239, 68, 68, 0.3); --gs-glow-2: rgba(239, 68, 68, 0.15); } .gs-danger .glass-surface__content { text-shadow: 0 0 12px rgba(239,68,68,0.6); } .gs-tag.gs-danger::before { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(239, 68, 68, 0.15); } .gs-tag.gs-danger { --gs-glow-1: rgba(239, 68, 68, 0.3); --gs-glow-2: rgba(239, 68, 68, 0.1); } .gs-danger:hover .glass-surface__content { color: var(--danger, #EF4444); } .gs-warning { --gs-glow-1: rgba(245, 158, 11, 0.3); --gs-glow-2: rgba(245, 158, 11, 0.15); } .gs-warning .glass-surface__content { text-shadow: 0 0 12px rgba(245,158,11,0.6); } .gs-tag.gs-warning::before { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(245, 158, 11, 0.15); } .gs-tag.gs-warning { --gs-glow-1: rgba(245, 158, 11, 0.3); --gs-glow-2: rgba(245, 158, 11, 0.1); } .gs-warning:hover .glass-surface__content { color: var(--warning, #F59E0B); } .gs-info { --gs-glow-1: rgba(14, 165, 233, 0.3); --gs-glow-2: rgba(14, 165, 233, 0.15); } .gs-info .glass-surface__content { text-shadow: 0 0 12px rgba(14,165,233,0.6); } .gs-tag.gs-info::before { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(14, 165, 233, 0.15); } .gs-tag.gs-info { --gs-glow-1: rgba(14, 165, 233, 0.3); --gs-glow-2: rgba(14, 165, 233, 0.1); } .gs-info:hover .glass-surface__content { color: var(--info, #0EA5E9); } /* ───────────────────────────────── GLOBAL SVG FILTER (injected once by glass-surface.js) ───────────────────────────────── */ #gs-filter-container { position: absolute; width: 0; height: 0; pointer-events: none; overflow: hidden; } /* ── PIXEL CARD ──────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════ PIXEL CARD — Vanilla CSS Port Original: @react-bits/PixelCard ───────────────────────────────────────────────────────────── Usage:
Your content
═══════════════════════════════════════════════════════════════ */ .pixel-card { position: relative; overflow: hidden; display: grid; place-items: center; border: 1px solid #27272a; border-radius: 25px; isolation: isolate; transition: border-color 200ms cubic-bezier(0.5, 1, 0.89, 1); user-select: none; cursor: pointer; } .pixel-card::before { content: ''; position: absolute; inset: 0; margin: auto; aspect-ratio: 1; background: radial-gradient(circle, #09090b, transparent 85%); opacity: 0; transition: opacity 800ms cubic-bezier(0.5, 1, 0.89, 1); pointer-events: none; z-index: 1; } .pixel-card:hover::before, .pixel-card:focus-within::before { opacity: 1; } /* Variants — border glow on hover */ .pixel-card--default:hover { border-color: #cbd5e1; box-shadow: 0 0 20px rgba(203,213,225,0.15); } .pixel-card--blue:hover { border-color: #0ea5e9; box-shadow: 0 0 20px rgba(14,165,233,0.2); } .pixel-card--yellow:hover { border-color: #eab308; box-shadow: 0 0 20px rgba(234,179,8,0.2); } .pixel-card--pink:hover { border-color: #e11d48; box-shadow: 0 0 20px rgba(225,29,72,0.3); } /* Purple variant (project brand) */ .pixel-card--purple:hover { border-color: var(--purple-main, #7B2FFF); box-shadow: 0 0 20px rgba(123,47,255,0.3); } /* Cyan variant */ .pixel-card--cyan:hover { border-color: var(--cyan, #00D4FF); box-shadow: 0 0 20px rgba(0,212,255,0.25); } /* Semantic Variants */ .pixel-card--primary:hover { border-color: var(--purple-main); box-shadow: 0 0 20px rgba(123,47,255,0.3); } .pixel-card--secondary:hover { border-color: var(--btn-gray, #6b7280); box-shadow: 0 0 20px rgba(107,114,128,0.15); } .pixel-card--success:hover { border-color: var(--success, #10b981); box-shadow: 0 0 20px rgba(16,185,129,0.25); } .pixel-card--danger:hover { border-color: var(--danger, #ef4444); box-shadow: 0 0 20px rgba(239,68,68,0.25); } .pixel-card--warning:hover { border-color: var(--warning, #f59e0b); box-shadow: 0 0 20px rgba(245,158,11,0.25); } .pixel-card--info:hover { border-color: var(--info, #0ea5e9); box-shadow: 0 0 20px rgba(14,165,233,0.25); } /* Text Hover for Dark Variants */ .pixel-card span { transition: color 0.3s ease; } .pixel-card--primary:hover span { color: var(--purple-light, #9B59B6); } .pixel-card--secondary:hover span { color: #f3f4f6; } .pixel-card--success:hover span { color: var(--success, #10b981); } .pixel-card--danger:hover span { color: var(--danger, #ef4444); } .pixel-card--warning:hover span { color: var(--warning, #f59e0b); } .pixel-card--info:hover span { color: var(--info, #0ea5e9); } .pixel-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; pointer-events: none; z-index: 0; } /* Preset Sizes */ .pixel-card--sm { width: 200px; height: 250px; } .pixel-card--md { width: 300px; height: 375px; } .pixel-card--lg { width: 400px; height: 500px; } /* Full width (gallery use) */ .pixel-card--full { width: 100%; height: auto; min-height: 300px; aspect-ratio: unset; } /* ── PIXEL BUTTON VARIANT ── */ .pixel-btn { width: auto; height: 48px; padding: 0 28px; border-radius: 50px; /* Estilo pílula para botões */ font-family: var(--font-display); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); box-sizing: border-box; } /* White Variant (Premium Clean) */ .pixel-card--white, .pixel-btn--white, .pixel-btn--white-primary, .pixel-btn--white-secondary, .pixel-btn--white-success, .pixel-btn--white-danger, .pixel-btn--white-warning, .pixel-btn--white-info { background: #ffffff !important; border-color: #e2e8f0; color: #05051A !important; } .pixel-card--white::before, .pixel-btn--white::before, .pixel-btn--white-primary::before, .pixel-btn--white-secondary::before, .pixel-btn--white-success::before, .pixel-btn--white-danger::before, .pixel-btn--white-warning::before, .pixel-btn--white-info::before { /* Glow sutil em tons de roxo para o fundo branco */ background: radial-gradient(circle, rgba(123, 47, 255, 0.08), transparent 80%); } .pixel-card--white:hover, .pixel-btn--white:hover { border-color: var(--purple-main, #7B2FFF); box-shadow: 0 12px 25px rgba(123, 47, 255, 0.12); } .pixel-card--white .pixel-canvas, .pixel-btn--white .pixel-canvas, .pixel-btn--white-primary .pixel-canvas, .pixel-btn--white-secondary .pixel-canvas, .pixel-btn--white-success .pixel-canvas, .pixel-btn--white-danger .pixel-canvas, .pixel-btn--white-warning .pixel-canvas, .pixel-btn--white-info .pixel-canvas { /* Pixels com transparência sutil para não ofuscar o texto */ opacity: 0.85; } /* Garante que o texto esteja sempre acima do canvas de pixels */ .pixel-btn span, .pixel-card span { position: relative; z-index: 2; } /* Specific Hover Effects for White Semantic Variants */ .pixel-btn--white-primary:hover { border-color: var(--purple-main); box-shadow: 0 12px 25px rgba(123, 47, 255, 0.15); color: var(--purple-main) !important; } .pixel-btn--white-secondary:hover { border-color: var(--btn-gray, #6b7280); box-shadow: 0 12px 25px rgba(107, 114, 128, 0.15); color: var(--btn-gray, #6b7280) !important; } .pixel-btn--white-success:hover { border-color: var(--success, #10b981); box-shadow: 0 12px 25px rgba(16, 185, 129, 0.15); color: var(--success, #10b981) !important; } .pixel-btn--white-danger:hover { border-color: var(--danger, #ef4444); box-shadow: 0 12px 25px rgba(239, 68, 68, 0.15); color: var(--danger, #ef4444) !important; } .pixel-btn--white-warning:hover { border-color: var(--warning, #f59e0b); box-shadow: 0 12px 25px rgba(245, 158, 11, 0.15); color: #d97706 !important; } .pixel-btn--white-info:hover { border-color: var(--info, #0ea5e9); box-shadow: 0 12px 25px rgba(14, 165, 233, 0.15); color: var(--info, #0ea5e9) !important; } /* In case text is nested in span for white variant, we handle color there */ .pixel-btn--white span, .pixel-btn--white-primary span, .pixel-btn--white-secondary span, .pixel-btn--white-success span, .pixel-btn--white-danger span, .pixel-btn--white-warning span, .pixel-btn--white-info span { transition: color 0.3s ease; } /* Inherit the !important parents for span and add white glow */ .pixel-btn--white-primary:hover span { color: var(--purple-main); text-shadow: 0 0 20px #ffffff, 0 0 15px #ffffff, 0 0 8px #ffffff, 0 0 4px #ffffff; } .pixel-btn--white-secondary:hover span { color: var(--btn-gray, #6b7280); text-shadow: 0 0 20px #ffffff, 0 0 15px #ffffff, 0 0 8px #ffffff, 0 0 4px #ffffff; } .pixel-btn--white-success:hover span { color: var(--success, #10b981); text-shadow: 0 0 20px #ffffff, 0 0 15px #ffffff, 0 0 8px #ffffff, 0 0 4px #ffffff; } .pixel-btn--white-danger:hover span { color: var(--danger, #ef4444); text-shadow: 0 0 20px #ffffff, 0 0 15px #ffffff, 0 0 8px #ffffff, 0 0 4px #ffffff; } .pixel-btn--white-warning:hover span { color: #d97706; text-shadow: 0 0 20px #ffffff, 0 0 15px #ffffff, 0 0 8px #ffffff, 0 0 4px #ffffff; } .pixel-btn--white-info:hover span { color: var(--info, #0ea5e9); text-shadow: 0 0 20px #ffffff, 0 0 15px #ffffff, 0 0 8px #ffffff, 0 0 4px #ffffff; }