/* ============================================================
STC VISUAL KIT — STATIC (HTML pages)
Pairs with Google Stitch + Spline. Brand: red #DC3232, ink #0A0A0A.
Drop into :
============================================================ */
:root {
--rust: #DC3232;
--rust-bright: #FF3D3D;
--rust-deep: #B82828;
--ink: #0A0A0A;
--ink-deep: #000000;
--paper: #F3EEE4;
--fog: #8A94A2;
--fog-light: #AAB4C2;
--line: rgba(243,238,228,0.07);
--line-bright: rgba(243,238,228,0.14);
--glow: rgba(220,50,50,0.18);
--glow-strong: rgba(220,50,50,0.45);
--card-bg: rgba(255,255,255,0.025);
--card-border: rgba(243,238,228,0.08);
--card-border-hot: rgba(220,50,50,0.35);
}
/* ============== ANIMATED GRID ============== */
.stc-grid {
position: absolute; inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(243,238,228,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(243,238,228,0.06) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 80%);
z-index: 0;
}
.stc-grid--bottom {
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 100%, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 100%, #000 30%, transparent 80%);
}
/* ============== BEAM BACKGROUND ============== */
.stc-beams { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.stc-beam {
position: absolute; top: 0; width: 1px; height: 55%;
background: linear-gradient(180deg, transparent, var(--rust), transparent);
filter: blur(0.5px) drop-shadow(0 0 6px var(--rust));
opacity: 0.6;
animation: stc-beam-fall var(--d, 8s) linear var(--t, 0s) infinite;
}
.stc-beam:nth-child(1) { left: 8%; --d: 7s; --t: 0s; }
.stc-beam:nth-child(2) { left: 23%; --d: 9s; --t: 1.4s; }
.stc-beam:nth-child(3) { left: 41%; --d: 6s; --t: 3.1s; }
.stc-beam:nth-child(4) { left: 58%; --d: 8.5s;--t: 0.8s; }
.stc-beam:nth-child(5) { left: 74%; --d: 7.3s;--t: 4.2s; }
.stc-beam:nth-child(6) { left: 89%; --d: 8.8s;--t: 2.5s; }
@keyframes stc-beam-fall {
0% { transform: translateY(-120%); opacity: 0; }
25% { opacity: 0.9; }
100% { transform: translateY(180%); opacity: 0; }
}
/* ============== GRADIENT ORBS ============== */
.stc-orb {
position: absolute;
width: 520px; height: 520px; border-radius: 50%;
background: radial-gradient(circle, var(--rust) 0%, transparent 65%);
filter: blur(120px);
opacity: 0.32;
pointer-events: none;
animation: stc-orb-drift 18s ease-in-out infinite;
z-index: 0;
}
.stc-orb--tl { top: -10%; left: -5%; }
.stc-orb--br { bottom: -15%; right: -10%; width: 420px; height: 420px; opacity: 0.22; animation-delay: -6s; }
.stc-orb--center { top: 30%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 700px; opacity: 0.18; }
@keyframes stc-orb-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -30px) scale(1.05); }
66% { transform: translate(-25px, 40px) scale(0.95); }
}
/* ============== MAGIC HEADLINE ============== */
.stc-magic-headline {
background: linear-gradient(110deg, var(--paper) 0%, var(--rust) 50%, var(--paper) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: stc-headline-shift 7s ease-in-out infinite;
}
@keyframes stc-headline-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ============== SHIMMER BUTTON ============== */
.stc-shimmer {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 28px; border-radius: 999px;
font-family: "Bebas Neue", sans-serif;
letter-spacing: 0.08em; font-size: 0.95rem; text-transform: uppercase;
background: var(--rust); color: var(--ink); border: none;
box-shadow: 0 8px 32px rgba(220,50,50,0.35);
cursor: pointer; overflow: hidden;
transition: transform 150ms ease, box-shadow 200ms ease;
text-decoration: none;
}
.stc-shimmer:hover { transform: translateY(-1px); box-shadow: 0 12px 40px rgba(220,50,50,0.45); }
.stc-shimmer::before {
content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 40%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
animation: stc-shimmer-sweep 2.4s ease-in-out infinite;
pointer-events: none;
}
@keyframes stc-shimmer-sweep {
0% { transform: translateX(-150%) skewX(-20deg); }
100% { transform: translateX(250%) skewX(-20deg); }
}
.stc-shimmer--ghost {
background: transparent; color: var(--paper);
border: 1px solid rgba(243,238,228,0.2); box-shadow: none;
}
.stc-shimmer--ghost::before { display: none; }
.stc-shimmer--ghost:hover { border-color: var(--rust); box-shadow: 0 0 24px rgba(220,50,50,0.25); }
/* ============== GLOW CARD ============== */
.stc-glow-card {
position: relative;
border-radius: 18px;
background: var(--card-bg);
border: 1px solid var(--card-border);
overflow: hidden;
transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.stc-glow-card:hover {
transform: translateY(-2px);
border-color: var(--card-border-hot);
box-shadow: 0 20px 60px -20px rgba(220,50,50,0.35);
}
.stc-glow-card::before {
content: "";
position: absolute; left: var(--mx, -200px); top: var(--my, -200px);
width: 400px; height: 400px;
background: radial-gradient(circle, var(--glow-strong), transparent 60%);
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease;
}
.stc-glow-card:hover::before { opacity: 0.5; }
/* ============== MARQUEE ============== */
.stc-marquee { overflow: hidden; position: relative; width: 100%; }
.stc-marquee-track {
display: inline-flex; gap: 48px;
animation: stc-marquee 40s linear infinite;
will-change: transform;
}
.stc-marquee:hover .stc-marquee-track { animation-play-state: paused; }
@keyframes stc-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ============== SCROLL REVEAL ============== */
[data-reveal] {
opacity: 0;
transform: translateY(30px);
transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: transform, opacity;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
/* ============== SPARKLES (canvas) ============== */
.stc-sparkles { position: absolute; inset: 0; pointer-events: none; }
/* ============== SPLINE WRAPPER ============== */
.stc-spline {
position: relative; width: 100%; overflow: hidden;
}
.stc-spline iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion: reduce) {
.stc-beam, .stc-orb, .stc-magic-headline, .stc-shimmer::before, .stc-marquee-track {
animation: none !important;
}
[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ============== UTILITY ============== */
.stc-stack { position: relative; }
.stc-noise {
position: absolute; inset: 0; pointer-events: none; opacity: 0.04;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}