Just a showcase of everything I have so far.
– Rainbow Animaton for the header.
– Hover effects and more animation for the sections and the Header aswell
– (I still need to work on the other sections) But has loads of stuff.
ANDDDDD here’s the entire styles sheet! (Took me 1 week do get to this point)
/* =========================
Base
========================= */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--page-bg: #ffffff;
--panel-bg: #ffffff; /* fully opaque so ring never shows through */
--section-radius: 12px;
--ring-gap: 8px;
--ring-blur: 4px;
--ring-speed: 18s;
--ring-hover-speed: 10s;
--z-page-frame: 700;
--z-bg-layer: 800;
--z-sections: 1000;
--z-section-overlay: 1001;
--z-header: 1100;
}
html,body{height:100%; }
body {
margin: 0;
padding: 0;
background: var(--page-bg);
min-height: 100vh;
position: relative;
}
body {
background-attachment: fixed;
background-size: cover;
background-position: center;
}
/* =========================
Page SVG frame
========================= */
.page-frame {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: var(--z-page-frame);
}
.page-frame .frame-rect {
stroke-dasharray: 2000;
animation: svgStroke 18s linear infinite;
transform-origin: 50% 50%;
}
@keyframes svgStroke {
0% { stroke-dashoffset: 0; transform: rotate(0deg); }
50% { stroke-dashoffset: 1000; transform: rotate(180deg); }
100% { stroke-dashoffset: 2000; transform: rotate(360deg); }
}
/* =========================
Background mask layer
========================= */
.bg-layer {
position: fixed;
inset: 0;
background: var(--page-bg);
z-index: var(--z-bg-layer);
pointer-events: none;
}
/* =========================
Header
========================= */
header {
background:
linear-gradient(90deg, rgba(0,0,0,0.85), rgba(0,0,0,0.85)),
linear-gradient(90deg, #ff6ec7, #ffa95e, #fff56e, #8aff6e, #6efff5, #6e8aff, #c56eff);
background-blend-mode: overlay;
background-size: 400% 400%;
animation: prismShift 12s ease infinite;
color: white;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: var(--z-header);
width: 100%;
}
@keyframes prismShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
header h1 {
text-shadow:
0 0 4px rgba(255, 255, 255, 0.25),
0 0 8px rgba(38, 74, 219, 0.15);
}
header {
border-bottom: 3px solid;
border-image: linear-gradient(90deg,
#ff6ec7, #ffa95e, #fff56e, #6efff5, #6e8aff
) 1;
}
/* Desktop nav improvements */
.navbar ul {
display: flex;
gap: 2rem;
padding: 0;
margin: 0;
}
/* Base nav link styling */
.navbar a {
position: relative;
display: block;
padding: 0.5rem 0.25rem;
font-weight: 700;
letter-spacing: 0.5px;
color: #f0e6d2;
transition: color 0.25s ease, text-shadow 0.25s ease;
}
/* Chromatic glow on hover */
.navbar a:hover {
color: #ffffff;
text-shadow:
0 0 6px #ff6ec7,
0 0 10px #ffa95e,
0 0 14px #6efff5;
}
/* Animated chromatic underline */
.navbar a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0%;
height: 3px;
background: linear-gradient(
90deg,
#ff6ec7,
#ffa95e,
#fff56e,
#6efff5,
#6e8aff
);
border-radius: 2px;
transition: width 0.35s ease;
}
/* Hover underline expansion */
.navbar a:hover::after,
.navbar a.active::after {
width: 100%;
}
/* Slight glow behind the underline */
.navbar a:hover::after {
box-shadow:
0 0 6px #ff6ec7,
0 0 10px #ffa95e,
0 0 14px #6efff5;
}
/* Mobile-friendly nav layout */
@media (max-width: 600px) {
.navbar ul {
flex-direction: column;
gap: 1rem;
}
.navbar a {
font-size: 1.1rem;
padding: 0.75rem 0;
}
.navbar a::after {
bottom: -2px;
}
}
/* =========================
Sections with masked ring
========================= */
/* === Option 1: solid panel + safe glow === */
#hero,
.content-section {
position: relative;
z-index: 1000;
margin: 2rem auto;
padding: 2rem;
max-width: 900px;
border-radius: 12px;
background: #ffffff; /* fully opaque — prevents any bleed-through */
box-shadow:
0 6px 24px rgba(0,0,0,0.12),
0 0 18px rgba(255,110,199,0.06),
0 0 36px rgba(255,169,94,0.04);
overflow: visible;
}
/* remove or keep ring pseudo-element but ensure it cannot show through */
#hero::before,
.content-section::before {
content: "";
position: absolute;
inset: calc(var(--ring-gap) * -1);
border-radius: calc(12px + var(--ring-gap));
background: conic-gradient(
from 0deg,
#ff6ec7, #ffa95e, #fff56e, #8aff6e, #6efff5, #6e8aff, #c56eff, #ff6ec7
);
z-index: 998; /* below panel */
filter: blur(6px) saturate(1.05);
animation: spinRing var(--ring-speed) linear infinite;
pointer-events: none;
opacity: 0.9;
}
/* overlay covers the whole panel so ring never shows through */
#hero::after,
.content-section::after {
content: "";
position: absolute;
inset: 0; /* cover entire panel */
border-radius: 12px;
background: #ffffff; /* fully opaque */
z-index: 1001; /* above ring, below content */
pointer-events: none;
}
/* content above overlay */
#hero > *,
.content-section > * {
position: relative;
z-index: 1002;
}
/* hover pulse: subtly intensify the outer ring (still hidden under overlay) */
#hero:hover::before,
.content-section:hover::before {
animation-duration: 10s;
filter: blur(8px) saturate(1.2) brightness(1.08);
transform: scale(1.02);
}
/* reduced motion */
@media (prefers-reduced-motion: reduce), (max-width: 400px) {
#hero::before, .content-section::before { animation: none; filter: none; }
}
/* =========================
Footer
========================= */
/* put this near the top of your stylesheet after :root */
footer {
position: relative;
z-index: 1200;
background: #2c2a29;
color: #fff;
padding: 1rem 2rem;
}
/* =========================
Reduced motion
========================= */
@media (prefers-reduced-motion: reduce) {
#hero::before,
.content-section::before,
.page-frame .frame-rect,
header {
animation: none !important;
}
}
@media (max-width: 600px) {
.page-frame .frame-rect { animation: none !important; }
#hero::before, .content-section::before { animation: none !important; }
}
@media (max-width: 600px) {
#hero, .content-section {
padding: 1.25rem;
}
body {
font-size: 1rem; /* slightly larger text */
}
}
@media (max-width: 600px) {
header {
flex-direction: column;
text-align: center;
padding: 1rem;
}
.navbar ul {
flex-direction: column;
gap: 0.75rem;
}
}
@media (max-width: 600px) {
footer {
padding: 1.25rem;
font-size: 0.95rem;
}
}
@media (max-width: 600px) {
.page-frame {
opacity: 0.5; /* softer frame */
}
}
/* Futuristic base typography */
body {
font-family: 'Segoe UI', 'Roboto', sans-serif;
font-size: 17px;
line-height: 1.7;
letter-spacing: 0.3px;
font-weight: 400;
color: #1a1a1a;
}
/* Futuristic headings */
h1, h2, h3 {
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1.25;
color: #282c2c;
}
/* Glow accent for headings */
h1, h2 {
text-shadow:
0 0 4px rgba(255,110,199,0.25),
0 0 8px rgba(110,138,255,0.15);
}
/* Size hierarchy */
h1 { font-size: 2.2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
/* Section spacing */
#hero, .content-section {
padding: 3rem;
margin: 3.5rem auto;
}
/* Mobile adjustments */
@media (max-width: 600px) {
body {
font-size: 18px;
line-height: 1.75;
}
#hero, .content-section {
padding: 2rem;
margin: 2.5rem auto;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
}
a{
text-decoration: none;
}
/* Core Beliefs page layout */
.beliefs-page {
max-width: 800px;
margin: 0 auto;
}
/* Intro paragraph */
.belief-intro {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 2.5rem;
opacity: 0.9;
}
/* Individual belief blocks */
.belief {
padding: 1.5rem 0;
}
/* Chromatic divider between beliefs */
.belief + .belief {
border-top: 2px solid;
border-image: linear-gradient(90deg,
#ff6ec7, #ffa95e, #fff56e, #6efff5, #6e8aff
) 1;
}
/* Belief titles */
.belief h3 {
font-size: 1.4rem;
letter-spacing: 1px;
margin-bottom: 0.5rem;
text-shadow:
0 0 4px rgba(255,110,199,0.25),
0 0 8px rgba(110,138,255,0.15);
}
/* Summary line */
.belief .summary {
font-weight: 600;
opacity: 0.85;
margin-bottom: 0.5rem;
}
/* Hover glow for belief titles */
.belief h3:hover {
text-shadow:
0 0 6px #ff6ec7,
0 0 10px #6efff5;
transition: 0.25s ease;
}