/**
* lightswind-effects.css — Talk Arabic v0.8.1
*
* Pure-CSS adaptation of Lightswind-style effects
* (https://lightswind.com / codewithMUHILAN/Lightswind-UI-Library).
* The upstream library is React + Framer Motion + GSAP and CANNOT be
* installed on this static site. This file re-implements the underlying
* CSS techniques only — no third-party deps, no canvas, no frameworks.
* Companion: js/lightswind-effects.js (3D tilt + magnetic + particles).
*
* Every effect uses compositor-only properties (transform/opacity/filter)
* and is gated on prefers-reduced-motion.
*
* v0.8.1 changes vs v0.8.0:
* - Aurora text effect REMOVED (user rejected).
* - Hero-blobs replaced with full aurora background (violet+burgundy+
* deep navy+dark teal — NO pink/amber per user feedback).
* - Card spotlight (hover-only) REMOVED, replaced with 3D tilt.
* - Card border beam now ALWAYS-ON (was hover-only).
* - Magnetic CTAs: tuned subtler (strength 0.28, radius 110).
* - Added: beam-grid bg, marquee, counter-glow, shimmer, particles.
*
* Brand palette referenced:
* --ta-violet #669BBC
* --color-primary #520120 burgundy
* --ta-ink #0c1320 deep ink
* --ta-ink-2 #14213d deep navy
* #1f4a5c dark teal accent (defined locally)
*/
/* =============================================================================
1. HERO AURORA BACKGROUND (replaces the v0.8.0 .hero-blobs)
-----------------------------------------------------------------------------
Four drifting blurred discs of brand color, blended into an aurora.
Palette is intentionally restricted to COOL DARK tones — violet, deep
burgundy, navy, teal. No pinks, no ambers, no warm orange.
============================================================================= */
.hero { position: relative; overflow: hidden; }
.hero-aurora {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.hero-aurora span {
position: absolute;
display: block;
border-radius: 50%;
filter: blur(95px);
mix-blend-mode: screen;
will-change: transform;
}
/* Disc 1: violet, top-left */
.hero-aurora span:nth-child(1) {
width: 520px; height: 520px;
top: -140px; left: -100px;
background: radial-gradient(circle, rgba(102, 155, 188, 0.85) 0%, rgba(102, 155, 188, 0) 70%);
opacity: 0.7;
animation: ta-aurora-1 22s ease-in-out infinite alternate;
}
/* Disc 2: deep burgundy, bottom-right */
.hero-aurora span:nth-child(2) {
width: 580px; height: 580px;
bottom: -180px; right: -140px;
background: radial-gradient(circle, rgba(82, 1, 32, 0.85) 0%, rgba(82, 1, 32, 0) 72%);
opacity: 0.65;
animation: ta-aurora-2 28s ease-in-out infinite alternate;
}
/* Disc 3: dark teal, mid-left */
.hero-aurora span:nth-child(3) {
width: 440px; height: 440px;
top: 35%; left: 25%;
background: radial-gradient(circle, rgba(31, 74, 92, 0.85) 0%, rgba(31, 74, 92, 0) 70%);
opacity: 0.55;
animation: ta-aurora-3 26s ease-in-out infinite alternate;
}
/* Disc 4: deep navy, top-right */
.hero-aurora span:nth-child(4) {
width: 480px; height: 480px;
top: -50px; right: 15%;
background: radial-gradient(circle, rgba(20, 33, 61, 0.95) 0%, rgba(20, 33, 61, 0) 70%);
opacity: 0.6;
animation: ta-aurora-4 30s ease-in-out infinite alternate;
}
@keyframes ta-aurora-1 { to { transform: translate3d(140px, 120px, 0) scale(1.18); } }
@keyframes ta-aurora-2 { to { transform: translate3d(-160px, -110px, 0) scale(1.15); } }
@keyframes ta-aurora-3 { to { transform: translate3d(80px, -130px, 0) scale(0.86); } }
@keyframes ta-aurora-4 { to { transform: translate3d(-120px, 150px, 0) scale(1.22); } }
/* Light theme: dial down opacities (cream hero background) */
html:not([data-theme="dark"]) .hero-aurora span {
opacity: 0.22;
mix-blend-mode: multiply;
}
html:not([data-theme="dark"]) .hero-aurora span:nth-child(2),
html:not([data-theme="dark"]) .hero-aurora span:nth-child(4) {
opacity: 0.18;
}
/* Mobile budget: blobs but lower count, lighter blur */
@media (max-width: 720px) {
.hero-aurora span { filter: blur(70px); }
.hero-aurora span:nth-child(3),
.hero-aurora span:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero-aurora span { animation: none !important; }
}
/* ─── Auto-injected aurora hosts (inner-page heroes / page-headers).
The aurora layer is z-index:0 absolute; lift the host's real content
above it so text stays readable. JS adds .ta-aurora-host.
IMPORTANT: the homepage `.hero` is EXCLUDED — it already has a
carefully-layered structure (hero-bg z0, hero-media z0, hero-content
z2). Forcing all its children to z-index:1 flattened that and broke
the photo/content composition (the dark-box bug). Only the simple
static-content banners (.page-header / .dialect-hero) need the lift. ─── */
.page-header.ta-aurora-host > *:not(.hero-aurora):not(.ta-particles-layer),
.dialect-hero.ta-aurora-host > *:not(.hero-aurora):not(.ta-particles-layer) {
position: relative;
z-index: 1;
}
/* .page-header is ALWAYS dark teal (even in light theme), so force the
aurora discs to screen-blend there regardless of site theme + give them
a touch more presence behind the white heading text. */
.page-header.ta-aurora-host .hero-aurora span,
.dialect-hero.ta-aurora-host .hero-aurora span {
mix-blend-mode: screen !important;
opacity: 0.42 !important;
}
/* =============================================================================
2. BEAM GRID BACKGROUND
-----------------------------------------------------------------------------
Fine grid lines with horizontal light beams traveling across. Apply by
wrapping a section in …
, or by adding
`data-beam-grid` to a section.
============================================================================= */
.beam-grid-band,
[data-beam-grid] {
position: relative;
overflow: hidden;
isolation: isolate;
}
.beam-grid-band::before,
[data-beam-grid]::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(102, 155, 188, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(102, 155, 188, 0.08) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
}
.beam-grid-band > .container,
.beam-grid-band > .container-fluid,
[data-beam-grid] > .container { position: relative; z-index: 2; }
.beam-grid-beams {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.beam-grid-beams span {
position: absolute;
height: 1px;
background: linear-gradient(90deg, transparent, var(--ta-violet, #669BBC), #FDF0D5, transparent);
box-shadow: 0 0 12px var(--ta-violet, #669BBC);
animation: ta-beam-travel 5.4s linear infinite;
}
.beam-grid-beams span:nth-child(1) { top: 22%; width: 260px; animation-delay: 0s; animation-duration: 5.6s; }
.beam-grid-beams span:nth-child(2) { top: 58%; width: 300px; animation-delay: 1.8s; animation-duration: 6.8s; }
.beam-grid-beams span:nth-child(3) { top: 42%; width: 220px; animation-delay: 3.4s; animation-duration: 7.2s; }
@keyframes ta-beam-travel {
from { left: -340px; opacity: 0; }
12% { opacity: 1; }
88% { opacity: 1; }
to { left: calc(100% + 340px); opacity: 0; }
}
/* Light theme tweak */
html:not([data-theme="dark"]) .beam-grid-band::before,
html:not([data-theme="dark"]) [data-beam-grid]::before {
background-image:
linear-gradient(rgba(82, 1, 32, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(82, 1, 32, 0.06) 1px, transparent 1px);
}
@media (prefers-reduced-motion: reduce) {
.beam-grid-beams span { animation: none !important; opacity: 0; }
}
/* =============================================================================
3. PROGRAMME CARDS — ALWAYS-ON BORDER BEAM
-----------------------------------------------------------------------------
Conic-gradient beam continuously rotates around the card border. v0.8.0
used opacity:0 idle / 0.85 hover, but per user this made cards read flat
most of the time. Now beams are visible 24/7 at opacity 0.7 (idle) and
ramp to 1.0 + faster spin on hover.
============================================================================= */
.programme-card {
position: relative;
isolation: isolate;
/* Soft constant glow halo so cards feel "alive" even before the beam
becomes prominent. The beam itself rotates inside this halo. */
box-shadow:
0 12px 32px rgba(82, 1, 32, 0.08),
0 0 0 1px rgba(102, 155, 188, 0.18);
transition: box-shadow 320ms ease, transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.programme-card:hover {
box-shadow:
0 24px 56px rgba(82, 1, 32, 0.18),
0 0 0 1px rgba(102, 155, 188, 0.45),
0 0 28px rgba(102, 155, 188, 0.22);
}
.programme-card::before {
content: "";
position: absolute;
inset: -2px; /* was -1px — beam extends 2px past edge */
z-index: 0;
padding: 1.5px; /* thinner — reads as a fine sweeping line (Faruk) */
border-radius: inherit;
/* Tight bright comet (~28% of the circle) so the rotation is obvious —
a broad lit arc reads as static; a concentrated glint clearly orbits. */
background: conic-gradient(
from var(--beam-angle, 0deg),
transparent 0%,
transparent 64%,
rgba(102, 155, 188, 0.55) 76%, /* blue ramp-in */
rgba(139, 181, 210, 1) 85%, /* bright light-blue core */
rgba(20, 33, 61, 0.9) 94%, /* navy/ink trail */
transparent 100%
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.92; /* was 0.7 — idle is now clearly visible */
pointer-events: none;
animation: ta-beam-rotate 6s linear infinite; /* was 8s — faster */
transition: opacity 320ms ease;
filter: drop-shadow(0 0 6px rgba(102, 155, 188, 0.5)); /* soft halo */
}
/* LIGHT THEME — beam colors that read against cream cards.
The dark-theme beam uses white as its peak which DISAPPEARS on cream.
In light mode use burgundy + violet + deep navy + dark teal (all darks). */
html:not([data-theme="dark"]) .programme-card::before {
background: conic-gradient(
from var(--beam-angle, 0deg),
transparent 0%,
transparent 64%,
rgba(20, 33, 61, 0.95) 76%, /* navy ramp-in (dark on cream) */
rgba(102, 155, 188, 1) 85%, /* blue/violet core */
rgba(12, 19, 32, 0.9) 94%, /* deep ink trail */
transparent 100%
);
filter: drop-shadow(0 0 8px rgba(20, 33, 61, 0.3));
}
/* Stagger so neighboring cards don't sweep in unison */
.programme-card:nth-child(2)::before { animation-delay: -1.2s; }
.programme-card:nth-child(3)::before { animation-delay: -2.4s; }
.programme-card:nth-child(4)::before { animation-delay: -3.6s; }
.programme-card:nth-child(5)::before { animation-delay: -4.8s; }
@property --beam-angle {
syntax: "";
inherits: false;
initial-value: 0deg;
}
@keyframes ta-beam-rotate {
from { --beam-angle: 0deg; }
to { --beam-angle: 360deg; }
}
.programme-card:hover::before,
.programme-card:focus-within::before {
opacity: 1;
animation-duration: 3.2s; /* was 4s — even faster on hover */
}
/* Fallback for browsers without @property support (older Firefox)
— beam is static but still visible thanks to high idle opacity */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
.programme-card::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.programme-card::before {
animation: none !important;
opacity: 0.65;
}
}
/* ─── UNIVERSAL CARD BEAM — extends the rotating border beam to every other
interactive card type site-wide. Uses inset:0 (NOT -2px like the
programme-card) so the beam stays INSIDE the card edge — safe even
when the card has overflow:hidden (course-card, teacher-card do).
None of these card types have a conflicting ::before (audited). ─── */
:where(.course-card, .teacher-card, .blog-card,
.value-card, .diff-card, .level-test-card) {
position: relative;
isolation: isolate;
}
:where(.course-card, .teacher-card, .blog-card,
.value-card, .diff-card, .level-test-card)::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
padding: 1.5px;
border-radius: inherit;
background: conic-gradient(
from var(--beam-angle, 0deg),
transparent 0%,
transparent 64%,
rgba(102, 155, 188, 0.55) 76%,
rgba(139, 181, 210, 1) 85%,
rgba(20, 33, 61, 0.9) 94%,
transparent 100%
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.85;
pointer-events: none;
animation: ta-beam-rotate 6s linear infinite;
transition: opacity 320ms ease;
}
/* Light theme: swap white peak (invisible on cream) for deep navy */
html:not([data-theme="dark"]) :where(.course-card, .teacher-card,
.blog-card, .value-card, .diff-card, .level-test-card)::before {
background: conic-gradient(
from var(--beam-angle, 0deg),
transparent 0%,
transparent 64%,
rgba(20, 33, 61, 0.95) 76%,
rgba(102, 155, 188, 1) 85%,
rgba(12, 19, 32, 0.9) 94%,
transparent 100%
);
}
/* Card body content must sit above the z-index:0 beam. Cards already have
their own background, so push the content layer up. Most card content is
in child elements; bump them above the beam pseudo. */
:where(.course-card, .teacher-card, .blog-card,
.value-card, .diff-card, .level-test-card) > * {
position: relative;
z-index: 1;
}
:where(.course-card, .teacher-card, .blog-card,
.value-card, .diff-card, .level-test-card):hover::before,
:where(.course-card, .teacher-card, .blog-card,
.value-card, .diff-card, .level-test-card):focus-within::before {
opacity: 1;
animation-duration: 3.6s;
}
:where(.course-card, .teacher-card, .blog-card,
.value-card, .diff-card, .level-test-card):nth-child(2)::before { animation-delay: -1.4s; }
:where(.course-card, .teacher-card, .blog-card,
.value-card, .diff-card, .level-test-card):nth-child(3)::before { animation-delay: -2.8s; }
:where(.course-card, .teacher-card, .blog-card,
.value-card, .diff-card, .level-test-card):nth-child(4)::before { animation-delay: -4.2s; }
@media (prefers-reduced-motion: reduce) {
:where(.course-card, .teacher-card, .blog-card,
.value-card, .diff-card, .level-test-card)::before {
animation: none !important;
opacity: 0.6;
}
}
/* =============================================================================
4. 3D CARD TILT (cards, on hover)
-----------------------------------------------------------------------------
JS sets --rx (rotation X), --ry (rotation Y), --mx/--my (mouse coords)
on each [data-tilt] element. CSS consumes them.
============================================================================= */
[data-tilt] {
transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transform-style: preserve-3d;
transition: transform 240ms cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 240ms ease;
will-change: transform;
}
[data-tilt]:hover {
box-shadow: 0 24px 60px rgba(7, 7, 12, 0.36), 0 0 0 1px rgba(102, 155, 188, 0.28);
}
/* ─── HIGH-SPECIFICITY OVERRIDES so the 3D tilt wins over the legacy
.programme-card:hover { transform: translateY(-4px) } in style.css
line 4706, and the .promise-card:hover { transform: translateY(-2px) }
at style.css line 1553. The legacy lifts are now composed INTO the
tilt transform so we get both rotation AND lift simultaneously. ─── */
.programme-card[data-tilt],
.promise-card[data-tilt] {
transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(0);
}
.programme-card[data-tilt]:hover,
.programme-card[data-tilt]:focus-visible {
transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) !important;
}
.promise-card[data-tilt]:hover,
.promise-card[data-tilt]:focus-visible {
transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) !important;
}
/* ─── UNIVERSAL tilt hover override for the auto-tagged card types.
Each of these card classes has its own legacy `:hover{transform}`
lift in style.css that would otherwise clobber the tilt. `:where()`
keeps specificity at (0,2,0) and `!important` makes the tilt win.
The small translateY preserves the "lift on hover" feel. ─── */
:where(.course-card, .teacher-card, .blog-card,
.value-card, .diff-card, .level-test-card)[data-tilt]:hover,
:where(.course-card, .teacher-card, .blog-card,
.value-card, .diff-card, .level-test-card)[data-tilt]:focus-visible {
transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px) !important;
}
/* Optional glare overlay — opt in via data-tilt-glare on a child or
data-tilt-glare on the element itself. If absent, no glare renders. */
[data-tilt][data-tilt-glare]::after {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
background: radial-gradient(
circle at var(--mx, 50%) var(--my, 50%),
rgba(253, 240, 213, 0.16),
transparent 50%
);
opacity: 0;
pointer-events: none;
transition: opacity 240ms ease;
}
[data-tilt][data-tilt-glare]:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
[data-tilt] { transform: none !important; transition: none !important; }
}
/* Disable tilt on touch — pointermove on touchscreens is jittery */
@media (hover: none) {
[data-tilt] { transform: none !important; }
}
/* =============================================================================
5. MAGNETIC CTAs (subtler than v0.8.0 — strength 0.28, radius 110)
-----------------------------------------------------------------------------
JS reads pointer distance and writes --mag-x / --mag-y. CSS consumes.
Strength tuned per user: less movement, more subtle than the preview's
strength 0.55 — but more present than v0.8.0's barely-visible drift.
Pair with shadow lift on hover.
============================================================================= */
[data-magnetic] {
position: relative;
--mag-x: 0px;
--mag-y: 0px;
transform: translate3d(var(--mag-x), var(--mag-y), 0);
transition: transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1),
box-shadow 320ms ease;
will-change: transform;
}
[data-magnetic]:hover {
box-shadow: 0 10px 26px rgba(82, 1, 32, 0.18),
0 0 0 1px rgba(102, 155, 188, 0.18);
}
[data-magnetic]:active {
transition-duration: 80ms;
}
@media (prefers-reduced-motion: reduce) {
[data-magnetic] {
transform: none !important;
transition: none !important;
}
}
@media (hover: none) {
[data-magnetic] { transform: none !important; }
}
/* =============================================================================
5b. BUTTON EFFECT — CONIC-SPIN BORDER (preview #3a)
-----------------------------------------------------------------------------
Opt-in via [data-btn-conic]. The button gets a continuously-rotating
gradient border. Sits OUTSIDE the button via inset:-2px so the inner
surface stays clean and clickable. Uses @property --btn-conic-angle.
============================================================================= */
[data-btn-conic] {
position: relative;
isolation: isolate;
z-index: 0;
}
[data-btn-conic]::before {
content: "";
position: absolute;
inset: -1.5px; /* thinner border (was -2px) — less "hot" */
z-index: -1;
border-radius: inherit;
/* Blue + ink orbiting comet — NO pink/burgundy/cream (Faruk). */
background: conic-gradient(
from var(--btn-conic-angle, 0deg),
transparent 0%,
transparent 58%,
rgba(102, 155, 188, 0.55) 72%, /* blue ramp-in */
rgba(139, 181, 210, 1) 83%, /* bright light-blue core */
rgba(20, 33, 61, 0.85) 92%, /* navy/ink trail */
transparent 100%
);
animation: ta-btn-conic-spin 4s linear infinite;
filter: drop-shadow(0 0 4px rgba(102, 155, 188, 0.3)); /* subtler glow */
}
[data-btn-conic]::after {
content: "";
position: absolute;
inset: 1.5px;
z-index: -1;
border-radius: inherit;
background: inherit;
}
@property --btn-conic-angle {
syntax: "";
inherits: false;
initial-value: 0deg;
}
@keyframes ta-btn-conic-spin { to { --btn-conic-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
[data-btn-conic]::before { animation: none !important; }
}
/* =============================================================================
5c. BUTTON EFFECT — NEON GLOW PULSE (preview #3b)
-----------------------------------------------------------------------------
Opt-in via [data-btn-glow]. Always-on halo that breathes. Pairs well
with [data-magnetic] on primary CTAs — magnetic adds drift, glow adds
ambient presence.
============================================================================= */
[data-btn-glow] {
position: relative;
box-shadow:
0 0 24px rgba(102, 155, 188, 0.42),
0 0 48px rgba(82, 1, 32, 0.22),
0 4px 14px rgba(7, 7, 12, 0.18);
animation: ta-btn-glow-pulse 2.4s ease-in-out infinite alternate;
}
@keyframes ta-btn-glow-pulse {
from {
box-shadow:
0 0 24px rgba(102, 155, 188, 0.42),
0 0 48px rgba(82, 1, 32, 0.22),
0 4px 14px rgba(7, 7, 12, 0.18);
}
to {
box-shadow:
0 0 48px rgba(102, 155, 188, 0.85),
0 0 96px rgba(82, 1, 32, 0.5),
0 6px 22px rgba(7, 7, 12, 0.28);
}
}
/* Light theme: lighter halo so we don't blow out cream backgrounds */
html:not([data-theme="dark"]) [data-btn-glow] {
box-shadow:
0 0 18px rgba(102, 155, 188, 0.3),
0 0 36px rgba(82, 1, 32, 0.15),
0 4px 14px rgba(28, 28, 46, 0.1);
animation: ta-btn-glow-pulse-light 2.4s ease-in-out infinite alternate;
}
@keyframes ta-btn-glow-pulse-light {
from { box-shadow: 0 0 18px rgba(102, 155, 188, 0.3), 0 0 36px rgba(82, 1, 32, 0.15), 0 4px 14px rgba(28, 28, 46, 0.1); }
to { box-shadow: 0 0 36px rgba(102, 155, 188, 0.55), 0 0 72px rgba(82, 1, 32, 0.32), 0 6px 22px rgba(28, 28, 46, 0.16); }
}
@media (prefers-reduced-motion: reduce) {
[data-btn-glow] { animation: none !important; }
}
/* =============================================================================
5d. BUTTON EFFECT — SHINE SWEEP (preview #3d)
-----------------------------------------------------------------------------
Opt-in via [data-btn-shine]. A light band sweeps across the button on
hover. Composable with everything else — it's just a ::before overlay.
============================================================================= */
[data-btn-shine] {
position: relative;
isolation: isolate;
overflow: hidden;
}
[data-btn-shine]::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(
110deg,
transparent 30%,
rgba(253, 240, 213, 0.55) 50%,
transparent 70%
);
transform: translateX(-110%);
transition: transform 750ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-btn-shine]:hover::before,
[data-btn-shine]:focus-visible::before {
transform: translateX(110%);
}
/* Light theme: slightly darker shine band so it reads on cream */
html:not([data-theme="dark"]) [data-btn-shine]::before {
background: linear-gradient(
110deg,
transparent 30%,
rgba(255, 255, 255, 0.85) 50%,
transparent 70%
);
}
@media (prefers-reduced-motion: reduce) {
[data-btn-shine]::before { display: none; }
}
/* =============================================================================
6. MARQUEE STRIP
-----------------------------------------------------------------------------
Endlessly scrolling row. Markup: . Each item is
a … with optional .ta-marquee-pin
leading element.
============================================================================= */
/* Band wrapper for the dialects marquee strip */
.dialects-marquee-band {
background: var(--ta-ink, #0c1320);
border-block: 1px solid rgba(102, 155, 188, 0.18);
padding: 8px 0;
}
html:not([data-theme="dark"]) .dialects-marquee-band {
background: #1a1d2c;
border-block: 1px solid rgba(82, 1, 32, 0.18);
}
.ta-marquee {
display: flex;
overflow: hidden;
padding: 22px 0;
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ta-marquee-track {
display: flex;
gap: 56px;
flex-shrink: 0;
white-space: nowrap;
animation: ta-marquee-scroll 28s linear infinite;
}
.ta-marquee-item {
font-family: 'Lora', Georgia, serif;
font-size: clamp(1.05rem, 2vw, 1.4rem);
color: rgba(253, 240, 213, 0.78);
letter-spacing: 0.01em;
display: inline-flex;
align-items: center;
}
html:not([data-theme="dark"]) .ta-marquee-item {
color: rgba(28, 28, 46, 0.72);
}
/* In the dialects band, the background stays dark even in light mode,
so force cream text regardless of theme */
.dialects-marquee-band .ta-marquee-item,
html:not([data-theme="dark"]) .dialects-marquee-band .ta-marquee-item {
color: rgba(253, 240, 213, 0.85);
}
.ta-marquee-pin {
color: var(--ta-violet, #669BBC);
margin-right: 12px;
font-size: 0.7em;
}
@keyframes ta-marquee-scroll { to { transform: translateX(-50%); } }
/* Pause on hover, gentle */
.ta-marquee:hover .ta-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.ta-marquee-track { animation: none !important; }
}
/* =============================================================================
7. NEON COUNTER GLOW
-----------------------------------------------------------------------------
Numerical values inside .hero-stat-value (or any element with
[data-counter-glow]) get a gradient text fill + pulsing drop-shadow.
Slow 2.6s cycle — alive, not seizure.
============================================================================= */
.hero-stat-value,
[data-counter-glow] {
background: linear-gradient(180deg, #FDF0D5 0%, var(--ta-violet, #669BBC) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
filter: drop-shadow(0 0 14px rgba(102, 155, 188, 0.4));
animation: ta-counter-pulse 2.8s ease-in-out infinite;
}
/* Light theme: use burgundy → violet so the gradient reads on cream */
html:not([data-theme="dark"]) .hero-stat-value,
html:not([data-theme="dark"]) [data-counter-glow] {
background: linear-gradient(180deg, var(--ta-violet, #669BBC) 0%, var(--color-primary, #520120) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 10px rgba(102, 155, 188, 0.25));
}
@keyframes ta-counter-pulse {
0%, 100% { filter: drop-shadow(0 0 12px rgba(102, 155, 188, 0.32)); }
50% { filter: drop-shadow(0 0 32px rgba(102, 155, 188, 0.78)); }
}
/* Pricing numbers — GLOW ONLY (no gradient text fill). Prices must stay
crystal-clear for conversion, so we keep their solid color and add just
the pulsing violet drop-shadow. Applies site-wide to .price-big. */
.price-big {
animation: ta-counter-pulse 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.hero-stat-value,
.price-big,
[data-counter-glow] { animation: none !important; }
}
/* =============================================================================
8. PARTICLES — ambient floating dust
-----------------------------------------------------------------------------
JS injects ~20 .ta-particle spans into a [data-particles] host.
============================================================================= */
[data-particles] {
position: relative;
overflow: hidden;
}
.ta-particles-layer {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* In the homepage hero the layers are: photo (z0) -> translucent dark
overlay .hero-bg (z1) -> content (z2). Lift the bubble layer to z2 so
the bubbles float ABOVE the photo + overlay but BEHIND the text
(content paints after the layer at the same z-index, so text stays on
top + readable). */
.hero .ta-particles-layer { z-index: 2; }
/* Small subtle cream dots (the "before" look Faruk liked) — NOT the big
translucent bubbles. JS randomises per-dot size (3-6px).
`backwards` fill-mode is critical: during each dot's animation-delay it
shows the 0% keyframe (translateY(100vh) opacity 0 = off-screen below)
instead of its static top:0 position — which was making them pile up
"stuck at the top" on initial load. */
.ta-particle {
position: absolute;
width: 4px; height: 4px;
border-radius: 50%;
background: #FDF0D5;
box-shadow: 0 0 8px #FDF0D5, 0 0 16px rgba(102, 155, 188, 0.5);
opacity: 0.5;
animation: ta-particle-float 18s linear infinite backwards;
}
@keyframes ta-particle-float {
0% { transform: translate3d(0, 100vh, 0); opacity: 0; }
8% { opacity: 0.85; }
92% { opacity: 0.85; }
100% { transform: translate3d(40px, -10vh, 0); opacity: 0; }
}
@media (max-width: 720px) {
.ta-particle:nth-child(odd) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.ta-particle { animation: none !important; opacity: 0; }
}
/* =============================================================================
9. SHIMMER TEXT WAVE
-----------------------------------------------------------------------------
A single highlight band sweeps across the text. Subtler than the
rejected aurora-text. Apply via [data-shimmer]. Default cream base
with a violet glint passing through.
============================================================================= */
[data-shimmer] {
background: linear-gradient(110deg,
#FDF0D5 30%,
var(--ta-violet, #669BBC) 50%,
#FDF0D5 70%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
animation: ta-shimmer-wave 4.4s linear infinite;
}
/* Light theme: burgundy base with cream glint */
html:not([data-theme="dark"]) [data-shimmer] {
background: linear-gradient(110deg,
var(--color-primary, #520120) 30%,
var(--ta-violet, #669BBC) 50%,
var(--color-primary, #520120) 70%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes ta-shimmer-wave {
to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
[data-shimmer] {
animation: none !important;
background-position: 0 0;
}
}
/* =============================================================================
10. SCROLL-REVEAL (unchanged from v0.8.0 — quiet enhancement)
============================================================================= */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity 720ms cubic-bezier(0.2, 0.9, 0.2, 1),
transform 720ms cubic-bezier(0.2, 0.9, 0.2, 1);
will-change: opacity, transform;
}
[data-reveal].is-revealed {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1 !important; transform: none !important; }
}
/* =============================================================================
END lightswind-effects.css
============================================================================= */