color:inherit;
text-decoration:none;
}
#comicpanel-landing-page button{
font:inherit;
cursor:pointer;
}
#comicpanel-landing-page ul{
margin:0;
padding:0;
list-style:none;
}
#comicpanel-landing-page h1,
#comicpanel-landing-page h2,
#comicpanel-landing-page h3,
#comicpanel-landing-page h4,
#comicpanel-landing-page h5,
#comicpanel-landing-page h6,
#comicpanel-landing-page p{
margin:0;
}
/* ==========================================================
LAYOUT
========================================================== */
#comicpanel-landing-page .cp-section{
padding:var(--cp-space-xxl) 0;
position:relative;
}
#comicpanel-landing-page .cp-container{
width:min(1200px,92%);
margin:auto;
}
#comicpanel-landing-page .cp-grid{
display:grid;
gap:2rem;
}
#comicpanel-landing-page .cp-flex{
display:flex;
}
#comicpanel-landing-page .cp-hidden{
display:none !important;
}
/* ==========================================================
SECTION HEADERS
========================================================== */
#comicpanel-landing-page .cp-section-header{
text-align:center;
margin-bottom:4rem;
}
#comicpanel-landing-page .cp-eyebrow{
display:inline-flex;
padding:8px 18px;
border-radius:999px;
background:rgba(230,57,70,.08);
color:var(--cp-primary);
font-size:.8rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:1rem;
}
#comicpanel-landing-page .cp-section-title{
font-size:clamp(2rem,5vw,3.5rem);
font-weight:800;
line-height:1.1;
margin-bottom:1rem;
}
#comicpanel-landing-page .cp-section-description{
max-width:720px;
margin:auto;
color:var(--cp-text-light);
line-height:1.8;
}
/* ==========================================================
BUTTONS
========================================================== */
#comicpanel-landing-page .cp-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.6rem;
padding:15px 30px;
border:none;
border-radius:var(--cp-radius-pill);
font-weight:700;
transition:var(--cp-transition);
white-space:nowrap;
}
#comicpanel-landing-page .cp-btn:hover{
transform:translateY(-3px);
}
#comicpanel-landing-page .cp-btn-primary{
background:var(--cp-primary);
color:#fff;
}
#comicpanel-landing-page .cp-btn-primary:hover{
background:var(--cp-primary-dark);
box-shadow:var(--cp-shadow-md);
}
#comicpanel-landing-page .cp-btn-secondary{
background:var(--cp-secondary);
color:#fff;
}
#comicpanel-landing-page .cp-btn-outline{
background:transparent;
border:2px solid var(--cp-primary);
color:var(--cp-primary);
}
#comicpanel-landing-page .cp-btn-outline:hover{
background:var(--cp-primary);
color:#fff;
}
/* ==========================================================
UTILITY CLASSES
========================================================== */
#comicpanel-landing-page .cp-text-center{
text-align:center;
}
#comicpanel-landing-page .cp-text-left{
text-align:left;
}
#comicpanel-landing-page .cp-text-right{
text-align:right;
}
#comicpanel-landing-page .cp-mb-sm{
margin-bottom:1rem;
}
#comicpanel-landing-page .cp-mb-md{
margin-bottom:2rem;
}
#comicpanel-landing-page .cp-mb-lg{
margin-bottom:4rem;
}
#comicpanel-landing-page .cp-rounded{
border-radius:var(--cp-radius-lg);
}
#comicpanel-landing-page .cp-shadow{
box-shadow:var(--cp-shadow-md);
}
#comicpanel-landing-page .cp-card{
background:var(--cp-surface);
border-radius:var(--cp-radius-lg);
box-shadow:var(--cp-shadow-sm);
overflow:hidden;
transition:var(--cp-transition);
}
#comicpanel-landing-page .cp-card:hover{
transform:translateY(-6px);
box-shadow:var(--cp-shadow-md);
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width:1024px){
#comicpanel-landing-page{
--cp-space-xxl:5rem;
}
}
@media (max-width:768px){
#comicpanel-landing-page{
--cp-space-xl:3rem;
--cp-space-xxl:4rem;
}
#comicpanel-landing-page .cp-container{
width:min(94%,1200px);
}
#comicpanel-landing-page .cp-section-title{
font-size:2.2rem;
}
#comicpanel-landing-page .cp-btn{
width:100%;
}
}
@media (max-width:480px){
#comicpanel-landing-page .cp-section{
padding:3.5rem 0;
}
}
/* ==========================================================
PAGE 01
HERO SECTION
========================================================== */
#comicpanel-landing-page .cp-hero{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at top right,
rgba(58,134,255,.08),
transparent 35%),
radial-gradient(circle at bottom left,
rgba(230,57,70,.08),
transparent 35%),
var(--cp-bg);
}
/* ================================
GRID
================================ */
#comicpanel-landing-page .cp-hero-grid{
display:grid;
grid-template-columns:1fr 520px;
gap:80px;
align-items:center;
min-height:85vh;
}
/* ================================
CONTENT
================================ */
#comicpanel-landing-page .cp-hero-content{
position:relative;
z-index:2;
}
#comicpanel-landing-page .cp-hero-title{
font-size:clamp(3rem,6vw,5.3rem);
line-height:1;
font-weight:900;
margin:28px 0;
max-width:700px;
}
#comicpanel-landing-page .cp-hero-description{
font-size:1.15rem;
line-height:1.9;
color:var(--cp-text-light);
max-width:620px;
margin-bottom:40px;
}
/* ================================
BUTTONS
================================ */
#comicpanel-landing-page .cp-hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-bottom:55px;
}
/* ================================
STATS
================================ */
#comicpanel-landing-page .cp-hero-stats{
display:flex;
gap:50px;
flex-wrap:wrap;
}
#comicpanel-landing-page .cp-stat{
display:flex;
flex-direction:column;
}
#comicpanel-landing-page .cp-stat-number{
font-size:2rem;
font-weight:800;
color:var(--cp-primary);
margin-bottom:6px;
}
#comicpanel-landing-page .cp-stat-label{
color:var(--cp-text-light);
font-size:.95rem;
}
/* ================================
MEDIA
================================ */
#comicpanel-landing-page .cp-hero-media{
position:relative;
display:flex;
justify-content:center;
align-items:center;
min-height:720px;
}
/* Background Glow */
#comicpanel-landing-page .cp-hero-glow{
position:absolute;
width:520px;
height:520px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(230,57,70,.18),
transparent 70%);
filter:blur(10px);
animation:
cpPulse 6s ease-in-out infinite;
}
/* ================================
COMIC COVER
================================ */
#comicpanel-landing-page .cp-hero-cover{
position:relative;
width:100%;
max-width:420px;
border-radius:26px;
overflow:hidden;
box-shadow:
0 40px 80px rgba(0,0,0,.22);
transform:
rotate(-3deg);
transition:
var(--cp-transition);
z-index:2;
}
#comicpanel-landing-page .cp-hero-cover:hover{
transform:
rotate(0deg)
translateY(-10px)
scale(1.02);
}
#comicpanel-landing-page .cp-hero-cover img{
display:block;
width:100%;
aspect-ratio:2/3;
object-fit:cover;
}
/* ================================
FLOATING CARDS
================================ */
#comicpanel-landing-page .cp-floating-card{
position:absolute;
background:#fff;
padding:18px 22px;
border-radius:18px;
box-shadow:var(--cp-shadow-lg);
z-index:3;
min-width:220px;
transition:
var(--cp-transition);
}
#comicpanel-landing-page .cp-floating-card:hover{
transform:translateY(-6px);
}
#comicpanel-landing-page .cp-floating-title{
display:block;
font-size:.8rem;
color:var(--cp-primary);
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
margin-bottom:6px;
}
#comicpanel-landing-page .cp-floating-card strong{
font-size:1rem;
}
#comicpanel-landing-page .cp-floating-top{
top:80px;
left:-35px;
}
#comicpanel-landing-page .cp-floating-bottom{
bottom:90px;
right:-30px;
}
/* ================================
SCROLL INDICATOR
================================ */
#comicpanel-landing-page .cp-scroll-indicator{
position:absolute;
left:50%;
bottom:40px;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
color:var(--cp-text-light);
font-size:.9rem;
}
#comicpanel-landing-page .cp-scroll-arrow{
font-size:1.4rem;
animation:
cpBounce 2s infinite;
}
/* ==========================================================
PAGE 01
HERO SECTION
========================================================== */
#comicpanel-landing-page .cp-hero{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at top right,
rgba(58,134,255,.08),
transparent 35%),
radial-gradient(circle at bottom left,
rgba(230,57,70,.08),
transparent 35%),
var(--cp-bg);
}
/* ================================
GRID
================================ */
#comicpanel-landing-page .cp-hero-grid{
display:grid;
grid-template-columns:1fr 520px;
gap:80px;
align-items:center;
min-height:85vh;
}
/* ================================
CONTENT
================================ */
#comicpanel-landing-page .cp-hero-content{
position:relative;
z-index:2;
}
#comicpanel-landing-page .cp-hero-title{
font-size:clamp(3rem,6vw,5.3rem);
line-height:1;
font-weight:900;
margin:28px 0;
max-width:700px;
}
#comicpanel-landing-page .cp-hero-description{
font-size:1.15rem;
line-height:1.9;
color:var(--cp-text-light);
max-width:620px;
margin-bottom:40px;
}
/* ================================
BUTTONS
================================ */
#comicpanel-landing-page .cp-hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-bottom:55px;
}
/* ================================
STATS
================================ */
#comicpanel-landing-page .cp-hero-stats{
display:flex;
gap:50px;
flex-wrap:wrap;
}
#comicpanel-landing-page .cp-stat{
display:flex;
flex-direction:column;
}
#comicpanel-landing-page .cp-stat-number{
font-size:2rem;
font-weight:800;
color:var(--cp-primary);
margin-bottom:6px;
}
#comicpanel-landing-page .cp-stat-label{
color:var(--cp-text-light);
font-size:.95rem;
}
/* ================================
MEDIA
================================ */
#comicpanel-landing-page .cp-hero-media{
position:relative;
display:flex;
justify-content:center;
align-items:center;
min-height:720px;
}
/* Background Glow */
#comicpanel-landing-page .cp-hero-glow{
position:absolute;
width:520px;
height:520px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(230,57,70,.18),
transparent 70%);
filter:blur(10px);
animation:
cpPulse 6s ease-in-out infinite;
}
/* ================================
COMIC COVER
================================ */
#comicpanel-landing-page .cp-hero-cover{
position:relative;
width:100%;
max-width:420px;
border-radius:26px;
overflow:hidden;
box-shadow:
0 40px 80px rgba(0,0,0,.22);
transform:
rotate(-3deg);
transition:
var(--cp-transition);
z-index:2;
}
#comicpanel-landing-page .cp-hero-cover:hover{
transform:
rotate(0deg)
translateY(-10px)
scale(1.02);
}
#comicpanel-landing-page .cp-hero-cover img{
display:block;
width:100%;
aspect-ratio:2/3;
object-fit:cover;
}
/* ================================
FLOATING CARDS
================================ */
#comicpanel-landing-page .cp-floating-card{
position:absolute;
background:#fff;
padding:18px 22px;
border-radius:18px;
box-shadow:var(--cp-shadow-lg);
z-index:3;
min-width:220px;
transition:
var(--cp-transition);
}
#comicpanel-landing-page .cp-floating-card:hover{
transform:translateY(-6px);
}
#comicpanel-landing-page .cp-floating-title{
display:block;
font-size:.8rem;
color:var(--cp-primary);
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
margin-bottom:6px;
}
#comicpanel-landing-page .cp-floating-card strong{
font-size:1rem;
}
#comicpanel-landing-page .cp-floating-top{
top:80px;
left:-35px;
}
#comicpanel-landing-page .cp-floating-bottom{
bottom:90px;
right:-30px;
}
/* ================================
SCROLL INDICATOR
================================ */
#comicpanel-landing-page .cp-scroll-indicator{
position:absolute;
left:50%;
bottom:40px;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
color:var(--cp-text-light);
font-size:.9rem;
}
#comicpanel-landing-page .cp-scroll-arrow{
font-size:1.4rem;
animation:
cpBounce 2s infinite;
}
Scroll
↓
ISSUE #001 • START READING TODAY
Discover Amazing Comics, Manga & Graphic Stories.
ComicPanel World is home to original comics, exciting adventures, unforgettable characters, and passionate creators. Start reading instantly and discover your next favorite series.
200+
Comics
50+
Creators
Weekly
Updates
🔥 Trending
Nightshift Ferrymen
⭐ Editor's Pick
Updated Weekly