Atakan Doğan Özban
6bf2bffc55
Store badges in Postgres, expose public/admin APIs, render an infinite footer slider, and ship /admin for paste-embed CRUD.
320 lines
6.2 KiB
CSS
320 lines
6.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
@apply bg-surface-dark text-gray-100 antialiased;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.input-field {
|
|
@apply w-full rounded border border-gray-600 bg-surface-light px-3 py-2 text-sm text-white placeholder-gray-500 focus:border-accent focus:outline-none;
|
|
}
|
|
|
|
.mockup-upload-box {
|
|
animation: mockup-border-pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
.mockup-upload-box-image {
|
|
animation: mockup-border-pulse 3s ease-in-out infinite,
|
|
mockup-float 4s ease-in-out infinite;
|
|
}
|
|
|
|
.mockup-upload-box-audio {
|
|
animation: mockup-border-pulse 3s ease-in-out infinite 0.5s,
|
|
mockup-float 4s ease-in-out infinite 0.5s;
|
|
}
|
|
|
|
.mockup-icon-image {
|
|
animation: mockup-icon-glow 3s ease-in-out infinite;
|
|
}
|
|
|
|
.mockup-icon-audio {
|
|
animation: mockup-icon-glow 3s ease-in-out infinite 0.5s;
|
|
}
|
|
|
|
.mockup-progress-shimmer {
|
|
animation: mockup-shimmer 2s ease-in-out infinite;
|
|
}
|
|
|
|
.mockup-dot-1 {
|
|
animation: processing-dot 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
.mockup-dot-2 {
|
|
animation: processing-dot 1.4s ease-in-out infinite 0.2s;
|
|
}
|
|
|
|
.mockup-dot-3 {
|
|
animation: processing-dot 1.4s ease-in-out infinite 0.4s;
|
|
}
|
|
|
|
.benefits-flow-line {
|
|
animation: benefits-flow-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.benefits-process-icon {
|
|
animation: benefits-process-pulse 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
.benefits-flow-path {
|
|
stroke-dasharray: 6 8;
|
|
animation: benefits-flow-dash 2s linear infinite;
|
|
}
|
|
|
|
.mobile-sidebar-panel-open {
|
|
animation: mobile-sidebar-open 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
|
}
|
|
|
|
.mobile-sidebar-panel-close {
|
|
animation: mobile-sidebar-close 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
|
|
}
|
|
|
|
.mobile-sidebar-close-btn-open {
|
|
animation: mobile-sidebar-close-btn-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
|
}
|
|
|
|
.mobile-sidebar-close-btn-close {
|
|
animation: mobile-sidebar-close-btn-out 0.2s ease-in forwards;
|
|
}
|
|
|
|
.mobile-sidebar-link {
|
|
@apply relative block overflow-hidden rounded-lg px-4 py-3 text-base font-medium text-gray-300 transition-all duration-300 ease-out;
|
|
}
|
|
|
|
.mobile-sidebar-link::before {
|
|
content: "";
|
|
@apply absolute bottom-2 left-0 top-2 w-1 origin-left scale-y-0 rounded-r bg-accent transition-transform duration-300 ease-out;
|
|
}
|
|
|
|
.mobile-sidebar-link:hover {
|
|
@apply translate-x-1 bg-surface-light text-white shadow-[inset_0_0_0_1px_rgba(74,158,255,0.12)];
|
|
}
|
|
|
|
.mobile-sidebar-link:hover::before {
|
|
@apply scale-y-100;
|
|
}
|
|
|
|
.mobile-sidebar-link-active {
|
|
@apply bg-surface-light text-white shadow-[inset_0_0_0_1px_rgba(74,158,255,0.2)];
|
|
}
|
|
|
|
.mobile-sidebar-link-active::before {
|
|
@apply scale-y-100;
|
|
}
|
|
|
|
.mobile-sidebar-link-danger:hover {
|
|
@apply bg-red-500/10 text-red-300 shadow-[inset_0_0_0_1px_rgba(239,68,68,0.2)];
|
|
}
|
|
|
|
.mobile-sidebar-link-danger:hover::before {
|
|
@apply bg-red-400;
|
|
}
|
|
|
|
.badge-marquee {
|
|
@apply relative w-full overflow-hidden;
|
|
mask-image: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
black 8%,
|
|
black 92%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.badge-marquee-track {
|
|
@apply flex w-max items-center gap-10;
|
|
animation: badge-marquee-scroll var(--badge-marquee-duration, 28s) linear infinite;
|
|
}
|
|
|
|
.badge-marquee:hover .badge-marquee-track {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.badge-marquee-track {
|
|
animation: none;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.badge-marquee-item[aria-hidden="true"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.badge-marquee-item {
|
|
@apply flex shrink-0 items-center justify-center;
|
|
}
|
|
|
|
.badge-marquee-slot {
|
|
@apply flex h-14 max-h-14 items-center justify-center;
|
|
}
|
|
|
|
.badge-marquee-slot a,
|
|
.badge-marquee-link {
|
|
@apply m-0 inline-flex items-center p-0 leading-none no-underline;
|
|
}
|
|
|
|
.badge-marquee-slot img,
|
|
.badge-marquee-slot iframe,
|
|
.badge-marquee-slot svg,
|
|
.badge-marquee-slot object {
|
|
display: block !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
border: 0 !important;
|
|
max-height: 3.5rem !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
max-width: min(280px, 70vw) !important;
|
|
object-fit: contain;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
@keyframes mockup-float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-3px);
|
|
}
|
|
}
|
|
|
|
@keyframes mockup-border-pulse {
|
|
0%,
|
|
100% {
|
|
border-color: rgb(75 85 99 / 0.5);
|
|
box-shadow: 0 0 0 0 rgb(255 255 255 / 0);
|
|
}
|
|
50% {
|
|
border-color: rgb(156 163 175 / 0.7);
|
|
box-shadow: 0 0 12px 0 rgb(255 255 255 / 0.04);
|
|
}
|
|
}
|
|
|
|
@keyframes mockup-icon-glow {
|
|
0%,
|
|
100% {
|
|
opacity: 0.5;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.85;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
@keyframes mockup-shimmer {
|
|
0% {
|
|
left: -30%;
|
|
opacity: 0;
|
|
}
|
|
30% {
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes processing-dot {
|
|
0%,
|
|
20% {
|
|
opacity: 0;
|
|
}
|
|
40%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes benefits-flow-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.4;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes benefits-process-pulse {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 28px rgba(239, 68, 68, 0.4);
|
|
}
|
|
}
|
|
|
|
@keyframes benefits-flow-dash {
|
|
to {
|
|
stroke-dashoffset: -28;
|
|
}
|
|
}
|
|
|
|
@keyframes mobile-sidebar-open {
|
|
from {
|
|
opacity: 0.85;
|
|
transform: translateX(100%) scale(0.96);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes mobile-sidebar-close {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateX(0) scale(1);
|
|
}
|
|
to {
|
|
opacity: 0.85;
|
|
transform: translateX(100%) scale(0.96);
|
|
}
|
|
}
|
|
|
|
@keyframes mobile-sidebar-close-btn-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.6) rotate(-90deg);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes mobile-sidebar-close-btn-out {
|
|
from {
|
|
opacity: 1;
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: scale(0.6) rotate(90deg);
|
|
}
|
|
}
|
|
|
|
@keyframes badge-marquee-scroll {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|