:root {
--clr-primary: #442B02;
--clr-primary-dark: #2C1D01;
--clr-bg: #f8f9fb;
--clr-card: #ffffff;
--clr-text: #202124;
--clr-muted: #5f6368;
--clr-border: #e8eaed;
--clr-accent-green: #0d9e6b;
--clr-accent-orange: #e8710a;
--clr-accent-purple: #7b1fa2;
--clr-accent-blue: #0277bd;
}
* { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: var(--clr-bg);
color: var(--clr-text);
line-height: 1.6;
}
/* ── Navbar ─────────────────────────── */
.navbar { background: #fff; border-bottom: 1px solid var(--clr-border); }
.navbar-brand { font-weight: 700; font-size: 1.6rem; color: var(--clr-primary-dark) !important; letter-spacing: -.3px; }
.navbar-brand span { color: var(--clr-text); }
/* ── Package Cards ─────────────────── */
.pkg-section { padding: 3.5rem 0; }
.pkg-card {
background: var(--clr-card);
border: 1px solid var(--clr-border);
border-radius: 12px;
overflow: hidden;
transition: box-shadow .2s, transform .2s;
height: 100%;
display: flex;
flex-direction: column;
}
.pkg-card:hover {
box-shadow: 0 8px 30px rgba(0,0,0,.08);
transform: translateY(-4px);
}
.pkg-header {
padding: 1.5rem 1.5rem 1rem;
color: #fff;
position: relative;
}
.pkg-header h3 { font-weight: 700; font-size: 1.25rem; margin-bottom: .35rem; }
.pkg-header p { font-size: .88rem; opacity: .9; margin: 0; }
.pkg-header.green { background: var(--clr-accent-green); }
.pkg-header.orange { background: var(--clr-accent-orange); }
.pkg-header.purple { background: var(--clr-accent-purple); }
.pkg-header.blue { background: var(--clr-accent-blue); }
.pkg-body {
padding: 1.25rem 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.pkg-desc {
font-size: .9rem;
color: var(--clr-muted);
margin-bottom: 1rem;
line-height: 1.55;
}
.feature-list { list-style: none;}
.feature-list li {
color: var(--clr-text);
display: flex;
align-items: flex-start;
gap: .45rem;
}
.feature-list li i { color: var(--clr-accent-green); margin-top: 2px; flex-shrink: 0; }
/* ── Pricing Table ─────────────────── */
.pricing-label { font-weight: 700; font-size: .9rem; margin-bottom: .5rem; color: var(--clr-text); }
.pricing-table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: .85rem; }
.pricing-table th {
text-align: left; padding: .4rem .5rem;
border-bottom: 2px solid var(--clr-border);
color: var(--clr-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .3px;
}
.pricing-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--clr-border); }
.pricing-table .discount { color: var(--clr-accent-green); font-weight: 600; font-size: .78rem; }
.pkg-footer { margin-top: auto; padding: 0 1.5rem 1.5rem; }
.btn-order {
width: 100%;
padding: .65rem;
font-weight: 600;
border-radius: 8px;
font-size: .95rem;
transition: background .15s;
}
.btn-order.green { background: var(--clr-accent-green); border-color: var(--clr-accent-green); color: #fff; }
.btn-order.green:hover { background: #0b8a5e; }
.btn-order.orange { background: var(--clr-accent-orange); border-color: var(--clr-accent-orange); color: #fff; }
.btn-order.orange:hover { background: #c96009; }
.btn-order.purple { background: var(--clr-accent-purple); border-color: var(--clr-accent-purple); color: #fff; }
.btn-order.purple:hover { background: #6a1b8e; }
.btn-order.blue { background: var(--clr-accent-blue); border-color: var(--clr-accent-blue); color: #fff; }
.btn-order.blue:hover { background: #01679b; }
/* ── Footer ─────────────────────────── */
footer {
background: #fff;
border-top: 1px solid var(--clr-border);
padding: 2rem 0;
text-align: center;
color: var(--clr-muted);
font-size: .85rem;
}
@media (max-width: 767.98px) {
.hero h1 { font-size: 1.9rem; }
.hero { padding: 3rem 0 2.5rem; }
}
/* Add this to your custom stylesheet */
.text-shadow-sm {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.text-shadow-md {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.text-shadow-lg {
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}
/* ===================================================================
CTA BUTTON STYLES
.kinetic-btn-primary — filled accent button
.kinetic-btn-ghost — outlined / ghost button
Both sit over the dark hero background.
=================================================================== */
.my-btn {
display: inline-flex;
align-items: center;
gap: 0.4em;
background: #170F00;
color: #fff;
border: none;
border-radius: 0.5rem;
padding: 0.75rem 2rem;
font-size: 1rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
text-decoration: none;
box-shadow: 0 4px 24px color-mix(in srgb, var(--kh-primary) 40%, transparent);
transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.my-btn:hover,
.my-btn:focus-visible {
background: #442B02;
box-shadow: 0 6px 32px color-mix(in srgb, #442B02 55%, transparent);
transform: translateY(-1px);
color: #fff;
}
/* =====================================================================
KINETIC HERO TEMPLATE
A reusable Bootstrap 5 hero/header component with animated
background textures, floating blobs, pill badge, shimmer text,
and dual CTA buttons.
HOW TO USE
----------
1. Copy a .kinetic-hero block (with its four inner children) into
your page.
2. Add one texture modifier class to the wrapper:
.kinetic-hero--grid (animated grid lines)
.kinetic-hero--dots (animated dot matrix)
.kinetic-hero--diagonal (animated diagonal stripes)
.kinetic-hero--crosshatch (animated crosshatch / diamond)
.kinetic-hero--none (plain gradient, no texture)
3. Override CSS custom properties on the wrapper element via a
style="" attribute (or a scoped CSS rule) to theme each instance.
4. Edit the pill label, headline spans, and CTA button text/href.
CSS CUSTOM PROPERTIES (all overridable per-instance)
-----------------------------------------------------
Background
--kh-bg-start Start colour of the gradient (#0a1738)
--kh-bg-mid Mid colour of the gradient (#0a1a3a)
--kh-bg-end End colour of the gradient (#050a1c)
Accent / Primary
--kh-primary Main accent colour (blobs, dots, shimmer, buttons) (#3b82f6)
--kh-primary-light Light accent for shimmer gradient end (#93c5fd)
Radial glow overlay
--kh-glow-color Centre colour of radial glow (rgba(59,130,246,0.18))
--kh-glow-opacity Opacity of the glow layer (0.6)
Texture
--kh-texture-color Line / dot colour for the texture (rgba(99,179,255,0.6))
--kh-texture-opacity Opacity of the whole texture layer (0.08)
--kh-texture-size Cell size (grid spacing / dot pitch) (40px)
--kh-texture-speed Animation cycle duration (18s)
Floating blobs
--kh-blob-a-color Colour of left/top blob (rgba(59,130,246,0.30))
--kh-blob-b-color Colour of right/bottom blob (rgba(59,130,246,0.20))
--kh-blob-a-speed Left blob float animation speed (9s)
--kh-blob-b-speed Right blob float animation speed (11s)
Text / Shimmer
--kh-text Default text colour (#ffffff)
--kh-text-muted Muted text colour (rgba(255,255,255,0.5))
--kh-shimmer-speed Shimmer animation cycle duration (3s)
Entrance animation
--kh-in-duration Duration of the kinetic-in effect (600ms)
===================================================================== */
/* -- Global base ----------------------------------------------------- */
body { font-family: 'Inter', sans-serif; }
/* -- Root defaults (used when a wrapper doesn't override) ------------ */
:root {
--kh-bg-start: #0a1738;
--kh-bg-mid: #0a1a3a;
--kh-bg-end: #050a1c;
--kh-primary: #3b82f6;
--kh-primary-light: #93c5fd;
--kh-glow-color: rgba(59,130,246,0.18);
--kh-glow-opacity: 0.6;
--kh-texture-color: rgba(99,179,255,0.6);
--kh-texture-opacity: 0.08;
--kh-texture-size: 40px;
--kh-texture-speed: 18s;
--kh-blob-a-color: rgba(59,130,246,0.30);
--kh-blob-b-color: rgba(59,130,246,0.20);
--kh-blob-a-speed: 9s;
--kh-blob-b-speed: 11s;
--kh-text: #ffffff;
--kh-text-muted: rgba(255,255,255,0.5);
--kh-shimmer-speed: 3s;
--kh-in-duration: 600ms;
}
/* -- Wrapper ---------------------------------------------------------- */
.kinetic-hero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(
135deg,
var(--kh-bg-start),
var(--kh-bg-mid),
var(--kh-bg-end)
);
color: var(--kh-text);
padding: 5rem 1.5rem;
width: 100%;
}
/* -- Radial glow ------------------------------------------------------ */
.kinetic-hero__glow {
pointer-events: none;
position: absolute;
inset: 0;
opacity: var(--kh-glow-opacity);
background: radial-gradient(ellipse at center, var(--kh-glow-color) 0%, transparent 60%);
}
/* -- Texture layer (shared) ------------------------------------------- */
.kinetic-hero__texture {
pointer-events: none;
position: absolute;
inset: 0;
opacity: var(--kh-texture-opacity);
}
/* -- Texture: GRID (animated moving lines) ---------------------------- */
.kinetic-hero--grid .kinetic-hero__texture {
background-image:
linear-gradient(var(--kh-texture-color) 1px, transparent 1px),
linear-gradient(90deg, var(--kh-texture-color) 1px, transparent 1px);
background-size: var(--kh-texture-size) var(--kh-texture-size);
animation: kh-grid var(--kh-texture-speed) linear infinite;
}
/* -- Texture: DOTS (animated dot matrix) ------------------------------ */
.kinetic-hero--dots .kinetic-hero__texture {
background-image: radial-gradient(
circle,
var(--kh-texture-color) 1.5px,
transparent 1.5px
);
background-size: var(--kh-texture-size) var(--kh-texture-size);
animation: kh-grid var(--kh-texture-speed) linear infinite;
}
/* -- Texture: DIAGONAL (animated diagonal stripes) -------------------- */
.kinetic-hero--diagonal .kinetic-hero__texture {
background-image: repeating-linear-gradient(
45deg,
var(--kh-texture-color) 0px,
var(--kh-texture-color) 1px,
transparent 1px,
transparent calc(var(--kh-texture-size) * 0.707)
);
animation: kh-diagonal var(--kh-texture-speed) linear infinite;
}
/* -- Texture: CROSSHATCH (animated diamond / crosshatch) -------------- */
.kinetic-hero--crosshatch .kinetic-hero__texture {
background-image:
repeating-linear-gradient(
45deg,
var(--kh-texture-color) 0px,
var(--kh-texture-color) 1px,
transparent 1px,
transparent calc(var(--kh-texture-size) * 0.707)
),
repeating-linear-gradient(
-45deg,
var(--kh-texture-color) 0px,
var(--kh-texture-color) 1px,
transparent 1px,
transparent calc(var(--kh-texture-size) * 0.707)
);
animation: kh-grid var(--kh-texture-speed) linear infinite;
}
/* -- Texture: NONE ---------------------------------------------------- */
.kinetic-hero--none .kinetic-hero__texture {
display: none;
}
/* -- Floating blobs --------------------------------------------------- */
.kinetic-hero__blob-a,
.kinetic-hero__blob-b {
pointer-events: none;
position: absolute;
border-radius: 50%;
filter: blur(64px);
}
.kinetic-hero__blob-a {
left: -5rem;
top: 33%;
width: 17rem;
height: 17rem;
background: var(--kh-blob-a-color);
animation: kh-float-a var(--kh-blob-a-speed) ease-in-out infinite;
}
.kinetic-hero__blob-b {
right: -4rem;
bottom: 0;
width: 20rem;
height: 20rem;
background: var(--kh-blob-b-color);
animation: kh-float-b var(--kh-blob-b-speed) ease-in-out infinite;
}
/* -- Content wrapper (sits above all layers) -------------------------- */
.kinetic-hero__content {
position: relative;
z-index: 10;
text-align: center;
}
/* ===================================================================
PILL / BADGE COMPONENT
Usage:
Your Label
=================================================================== */
.kinetic-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 9999px;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.05);
padding: 0.25rem 0.875rem;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
user-select: none;
}
/* Pulsing dot inside the pill */
.kinetic-pill__dot {
position: relative;
display: inline-flex;
width: 0.5rem;
height: 0.5rem;
flex-shrink: 0;
}
.kinetic-pill__dot-ping {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--kh-primary);
opacity: 0.75;
animation: kh-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.kinetic-pill__dot-core {
position: relative;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--kh-primary);
}
/* ===================================================================
TEXT EFFECT CLASSES
Apply to individual elements inside a headline.
.kinetic-in — entrance animation (fade + rise + unblur)
.kinetic-shimmer — animated gradient shimmer (primary ? light ? primary)
.kinetic-highlight — static gradient (no animation, lighter weight)
.kinetic-glow — text-shadow glow (works on plain text, not gradient)
=================================================================== */
/* Entrance — apply to the headline wrapper */
.kinetic-in {
animation: kh-in var(--kh-in-duration) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* Shimmer gradient text */
.kinetic-shimmer {
display: inline-block; /* needed for -webkit-background-clip on inline elements */
background: linear-gradient(
90deg,
var(--kh-primary),
var(--kh-primary-light),
var(--kh-primary)
);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: kh-shimmer var(--kh-shimmer-speed) ease-in-out infinite;
}
/* Static highlight — gradient without animation */
.kinetic-highlight {
display: inline-block;
background: linear-gradient(90deg, var(--kh-primary), var(--kh-primary-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Glow — plain white text with a coloured outer glow */
.kinetic-glow {
text-shadow:
0 0 18px var(--kh-primary),
0 0 40px color-mix(in srgb, var(--kh-primary-light) 60%, transparent);
}
/* ===================================================================
CTA BUTTON STYLES
.kinetic-btn-primary — filled accent button
.kinetic-btn-ghost — outlined / ghost button
Both sit over the dark hero background.
=================================================================== */
.kinetic-btn-primary {
display: inline-flex;
align-items: center;
gap: 0.4em;
background: var(--kh-primary);
color: #fff;
border: none;
border-radius: 0.5rem;
padding: 0.75rem 2rem;
font-size: 1rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
text-decoration: none;
box-shadow: 0 4px 24px color-mix(in srgb, var(--kh-primary) 40%, transparent);
transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.kinetic-btn-primary:hover,
.kinetic-btn-primary:focus-visible {
background: color-mix(in srgb, var(--kh-primary) 85%, white);
box-shadow: 0 6px 32px color-mix(in srgb, var(--kh-primary) 55%, transparent);
transform: translateY(-1px);
color: #fff;
}
.kinetic-btn-ghost {
display: inline-flex;
align-items: center;
gap: 0.4em;
background: transparent;
color: rgba(255,255,255,0.85);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 0.5rem;
padding: 0.75rem 2rem;
font-size: 1rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
text-decoration: none;
transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.kinetic-btn-ghost:hover,
.kinetic-btn-ghost:focus-visible {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.45);
color: #fff;
transform: translateY(-1px);
}
/* -- Keyframe library ------------------------------------------------- */
@keyframes kh-in {
0% { opacity: 0; transform: translateY(14px) scale(0.96); filter: blur(6px); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes kh-shimmer {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Grid / dots translate by exactly one cell so the pattern tiles seamlessly */
@keyframes kh-grid {
0% { transform: translate(0, 0); }
100% { transform: translate(var(--kh-texture-size), var(--kh-texture-size)); }
}
/* Diagonal moves along the stripe axis */
@keyframes kh-diagonal {
0% { background-position: 0 0; }
100% { background-position: var(--kh-texture-size) var(--kh-texture-size); }
}
@keyframes kh-float-a {
0%,100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(40px,-20px) scale(1.1); }
}
@keyframes kh-float-b {
0%,100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-30px,-25px) scale(1.08); }
}
@keyframes kh-ping {
75%,100% { transform: scale(2); opacity: 0; }
}
/* ===================================================================
TEXT ROTATOR COMPONENT
Cycles through a list of short headlines with a slide-up + blur
entrance and a slide-up + blur exit — matching the kinetic aesthetic.
USAGE — inline (rotates one highlighted word/phrase inside a headline)
-----------------------------------------------------------------------
Get
real visitors
free traffic
more leads
to your site
USAGE — block (the entire headline line rotates as a unit)
-----------------------------------------------------------
Reach
real people
Build
real momentum
DATA ATTRIBUTES (set on the .kinetic-rotator wrapper)
------------------------------------------------------
data-speed ms each item is held visible (default: 1400)
data-in-duration ms for the enter animation (default: 350)
data-out-duration ms for the exit animation (default: 280)
MODIFIER CLASSES
----------------
.kinetic-rotator--inline inline-block; JS sizes it to widest item
(no modifier) block; JS sizes height to tallest item
=================================================================== */
/* Container — JS sets position:relative, overflow:hidden, and dimensions */
.kinetic-rotator { display: block; }
.kinetic-rotator--inline { display: inline-block; vertical-align: baseline; }
/* Each item is absolutely positioned inside the container by JS */
.kinetic-rotator__item {
position: absolute;
left: 0; top: 0;
width: 100%;
text-align: inherit;
white-space: nowrap; /* prevents wrapping mid-animation for inline items */
line-height: 1.15; /* overrides inherited lh-1 — gives descenders room */
padding-bottom: 0.15em; /* extra insurance, scales with font size */
}
/* Animation classes toggled by JS */
.kh-rot-in {
animation: kh-rot-in var(--kh-rot-in-dur, 350ms)
cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.kh-rot-out {
animation: kh-rot-out var(--kh-rot-out-dur, 280ms)
cubic-bezier(0.4, 0, 0.6, 1) both;
}
@keyframes kh-rot-in {
from { opacity: 0; transform: translateY(18px) scale(0.96); filter: blur(5px); }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes kh-rot-out {
from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
to { opacity: 0; transform: translateY(-18px) scale(0.96); filter: blur(5px); }
}
.my-btn {
display: inline-flex;
align-items: center;
gap: 0.4em;
background: #170F00;
color: #fff;
border: none;
border-radius: 0.5rem;
padding: 0.5rem 2rem;
font-size: 1.3rem;
font-weight: 500;
line-height: 1;
cursor: pointer;
text-decoration: none;
box-shadow: 0 4px 24px color-mix(in srgb, var(--kh-bg-end) 40%, transparent);
transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.my-btn:hover,
.my-btn:focus-visible {
background: #442B02;
box-shadow: 0 6px 32px color-mix(in srgb, #442B02 55%, transparent);
transform: translateY(-1px);
color: #fff;
}
[id] { scroll-margin-top: 110px; }
.mytags a {color:#fff;text-decoration:none;}
.mytags a:hover {color:#ededed;text-decoration:underline;}