basisvr.github.io/styles.css at main · BasisVR/basisvr.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/* =========================
   Text Selection Highlight
   ========================= */
::selection {
    background: rgba(239, 18, 55, 0.25); /* brand red at 25% */
}

::-moz-selection {
    background: rgba(239, 18, 55, 0.25);
}

/* =========================
   Animated Gradient
   - Apply .animated-gradient to hero sections, cards, etc.
   - The element must be positioned (Tailwind `fixed` / `relative`).
   - The gradient lives on an oversized ::before that only animates
     `transform`, so the compositor drives it with no per-frame repaint.
     Animating `background-position` instead repaints the whole layer
     every frame and dirties the backdrop of every `backdrop-blur` above it.
   ========================= */
@keyframes gradient-shift {
    0%,
    100% {
        transform: translate3d(-24%, -24%, 0);
    }

    50% {
        transform: translate3d(24%, 24%, 0);
    }
}

.animated-gradient {
    overflow: hidden;
}

.animated-gradient::before {
    content: "";
    position: absolute;
    inset: -50%; /* 2x the box, so a +/-24% drift never exposes an edge */
    background: linear-gradient( -45deg, #ef1237, /* brand red */
    #9333ea, /* purple */
    #3b82f6, /* blue */
    #f43f5e /* pink/red */
    );
    animation: gradient-shift 15s ease infinite;
}

.animated-gradient.motion-paused::before {
    animation-play-state: paused;
}

/* =========================
   Parallax Layers
   - Promotes the blurred blobs once at parse time, so their 64px blur is
     rasterized a single time and mouse parallax stays compositor-only.
   ========================= */
.parallax-will-change {
    will-change: transform;
}

/* =========================
   Backdrop Dither
   ========================= */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.01;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='d'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type='linear'%20slope='3'%20intercept='-1'/%3E%3CfeFuncG%20type='linear'%20slope='3'%20intercept='-1'/%3E%3CfeFuncB%20type='linear'%20slope='3'%20intercept='-1'/%3E%3CfeFuncA%20type='linear'%20slope='0'%20intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23d)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    background-repeat: repeat;
    will-change: transform; /* own layer: rasterize the noise tile once, then composite */
}

/* =========================
   Respect Reduced Motion
   ========================= */
@media (prefers-reduced-motion: reduce) {
    .animated-gradient::before {
        animation: none !important;
        transform: none; /* freeze at center */
    }
}