Playful Color - Free HTML/CSS UI Kit
Bright, cheerful Web3 and premium SaaS designs featuring chunky bubble outlines, sunny gradient tones, and delightful rounded shapes.
Download Full Kit (.zip)
Complete kit with all components & styles
Just need one component?
Download base.css and add the following line to your HTML:
<link rel="stylesheet" href="base.css">
Then grab a component below and add it to your HTML.
Color Palette
Coral Pink
#FF5A5F
Lemon Yellow
#FCD34D
Mint Green
#2DD4BF
Deep Charcoal
#1F2937
Warm Paper
#FCFAF2
Typography
Hero Sections
Cheerful Centered Hero
HTML
<div class="pl-hero-centered pl-surface">
<div class="pl-hero-badge">
<span>⚡ Version 2.0 is Live!</span>
</div>
<h1 class="pl-hero-title">Create Beautiful <span class="pl-highlight bg-yellow">Bubble</span> Spatial Interfaces!</h1>
<p class="pl-hero-subtitle">Design highly premium, fluid, and playful web applications without losing pixel perfection.</p>
<div class="pl-hero-buttons">
<button class="pl-btn pl-btn-primary">Start Designing</button>
<button class="pl-btn pl-btn-outline">Watch Demo</button>
</div>
<div class="pl-hero-features">
<div class="pl-feat-item">
<span class="pl-feat-emoji">🍭</span>
<span>Candy Themes</span>
</div>
<div class="pl-feat-item">
<span class="pl-feat-emoji">🎈</span>
<span>Fluid Spring</span>
</div>
<div class="pl-feat-item">
<span class="pl-feat-emoji">🥑</span>
<span>Clean Code</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Cheerful Centered Hero */
/* NOTE: This component requires base.css to be included in your page. */
.pl-hero-centered {
max-width: 900px;
margin: 2rem auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
padding: 5rem 3.5rem !important;
}
.pl-hero-badge {
display: inline-block;
background-color: var(--pl-accent);
border: 2px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
padding: 0.4rem 1rem;
font-family: var(--pl-font-heading);
font-size: 0.9rem;
font-weight: 800;
color: var(--pl-text);
box-shadow: var(--pl-shadow-sm);
transform: rotate(-1.5deg);
margin-bottom: 2rem;
transition: var(--pl-transition);
}
.pl-hero-centered:hover .pl-hero-badge {
transform: rotate(1deg) scale(1.05);
}
.pl-hero-title {
font-size: 3.25rem;
max-width: 800px;
margin-bottom: 1.5rem;
line-height: 1.15;
}
.pl-highlight {
display: inline-block;
padding: 0 0.5rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
transform: rotate(-2deg);
box-shadow: 2px 3px 0px var(--pl-border);
}
.pl-hero-subtitle {
font-size: 1.15rem;
max-width: 600px;
color: var(--pl-text-muted);
margin-bottom: 2.5rem;
line-height: 1.7;
}
.pl-hero-buttons {
display: flex;
gap: 1.25rem;
justify-content: center;
margin-bottom: 3.5rem;
flex-wrap: wrap;
}
.pl-hero-features {
display: flex;
gap: 2.5rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.pl-feat-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--pl-text);
}
.pl-feat-emoji {
font-size: 1.35rem;
transition: var(--pl-transition);
}
.pl-feat-item:hover .pl-feat-emoji {
transform: translateY(-4px) scale(1.2);
}
@media (max-width: 768px) {
.pl-hero-centered {
padding: 4rem 2rem !important;
}
.pl-hero-title {
font-size: 2.5rem;
}
.pl-hero-subtitle {
font-size: 1.05rem;
}
.pl-hero-features {
gap: 1.5rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Comfortaa:wght@400;500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--pl-bg: #FCFAF2; /* Friendly warm cream */
--pl-bg-muted: #F5F2E9; /* Warm shadow cream */
--pl-surface: #FFFFFF;
--pl-primary: #FF5A5F; /* Bubblegum Coral Pink */
--pl-secondary: #FCD34D; /* Sunshine Yellow */
--pl-accent: #2DD4BF; /* Vibrant Teal Mint */
--pl-success: #10B981; /* Fresh Lime Green */
--pl-warning: #F59E0B; /* Orange Peel */
--pl-info: #3B82F6; /* Playful Sky Blue */
--pl-text: #1F2937; /* Deep Slate Charcoal */
--pl-text-muted: #4B5563; /* Friendly Slate */
--pl-text-light: #9CA3AF;
--pl-border: #1F2937;
--pl-border-width: 3px;
--pl-radius: 20px;
--pl-radius-lg: 28px;
--pl-radius-sm: 12px;
--pl-radius-circle: 50%;
--pl-font-heading: 'Lexend', sans-serif;
--pl-font-body: 'Comfortaa', cursive;
--pl-transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* Snappy modern spring */
--pl-shadow: 0px 8px 0px #1F2937;
--pl-shadow-lg: 0px 14px 0px #1F2937;
--pl-shadow-sm: 0px 4px 0px #1F2937;
--pl-shadow-press: 0px 2px 0px #1F2937;
}
body {
margin: 0;
font-family: var(--pl-font-body);
color: var(--pl-text);
background-color: var(--pl-bg);
-webkit-font-smoothing: antialiased;
}
/* Friendly Bubble Containers */
.pl-surface {
background-color: var(--pl-surface);
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius);
padding: 2.5rem;
box-shadow: var(--pl-shadow);
transition: var(--pl-transition);
}
/* Global Logo */
.pl-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--pl-font-heading);
font-size: 1.35rem;
font-weight: 800;
color: var(--pl-text);
transition: var(--pl-transition);
}
.pl-logo:hover {
transform: scale(1.05) rotate(-2deg);
}
.pl-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--pl-radius-sm);
background-color: var(--pl-primary);
border: var(--pl-border-width) solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--pl-font-heading);
font-size: 1.3rem;
font-weight: 800;
color: #FFFFFF;
box-shadow: var(--pl-shadow-sm);
transform: rotate(5deg);
}
/* Bubble Buttons */
.pl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.85rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
gap: 0.5rem;
position: relative;
user-select: none;
}
.pl-btn:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow);
}
.pl-btn:active {
transform: translateY(2px);
box-shadow: var(--pl-shadow-press);
}
.pl-btn-primary {
background-color: var(--pl-primary);
color: #FFFFFF;
}
.pl-btn-primary:hover {
background-color: #ff3e43;
}
.pl-btn-secondary {
background-color: var(--pl-secondary);
color: var(--pl-text);
}
.pl-btn-secondary:hover {
background-color: #fbd01e;
}
.pl-btn-accent {
background-color: var(--pl-accent);
color: var(--pl-text);
}
.pl-btn-accent:hover {
background-color: #1abc9c;
}
.pl-btn-outline {
background-color: var(--pl-surface);
color: var(--pl-text);
}
.pl-btn-outline:hover {
background-color: var(--pl-bg-muted);
}
.pl-btn-ghost {
background-color: transparent;
color: var(--pl-text);
border-color: transparent;
box-shadow: none;
}
.pl-btn-ghost:hover {
background-color: var(--pl-bg-muted);
border-color: var(--pl-border);
box-shadow: var(--pl-shadow-sm);
}
.pl-btn-circle {
width: 46px;
height: 46px;
padding: 0;
border-radius: var(--pl-radius-circle) !important;
}
.pl-btn-block {
width: 100%;
}
/* Form Fields */
.pl-input {
width: 100%;
padding: 0.95rem 1.35rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
font-family: var(--pl-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--pl-text);
background-color: var(--pl-surface);
outline: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
}
.pl-input::placeholder {
color: var(--pl-text-light);
}
.pl-input:focus {
background-color: var(--pl-bg-muted);
box-shadow: var(--pl-shadow);
transform: translateY(-2px);
}
.pl-label {
display: block;
margin-bottom: 0.6rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--pl-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pl-font-heading);
font-weight: 800;
margin: 0;
color: var(--pl-text);
line-height: 1.15;
}
p {
font-family: var(--pl-font-body);
font-weight: 500;
line-height: 1.6;
margin: 0;
color: var(--pl-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-pink { color: var(--pl-primary) !important; }
.text-yellow { color: var(--pl-secondary) !important; }
.text-teal { color: var(--pl-accent) !important; }
.text-muted { color: var(--pl-text-muted) !important; }
.bg-paper { background-color: var(--pl-bg) !important; }
.bg-cream { background-color: var(--pl-bg-muted) !important; }
.bg-pink { background-color: var(--pl-primary) !important; }
.bg-yellow { background-color: var(--pl-secondary) !important; }
.bg-teal { background-color: var(--pl-accent) !important; }
.bg-green { background-color: var(--pl-success) !important; }
/* --- COMPONENT STYLES --- */
.pl-hero-centered {
max-width: 900px;
margin: 2rem auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
padding: 5rem 3.5rem !important;
}
.pl-hero-badge {
display: inline-block;
background-color: var(--pl-accent);
border: 2px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
padding: 0.4rem 1rem;
font-family: var(--pl-font-heading);
font-size: 0.9rem;
font-weight: 800;
color: var(--pl-text);
box-shadow: var(--pl-shadow-sm);
transform: rotate(-1.5deg);
margin-bottom: 2rem;
transition: var(--pl-transition);
}
.pl-hero-centered:hover .pl-hero-badge {
transform: rotate(1deg) scale(1.05);
}
.pl-hero-title {
font-size: 3.25rem;
max-width: 800px;
margin-bottom: 1.5rem;
line-height: 1.15;
}
.pl-highlight {
display: inline-block;
padding: 0 0.5rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
transform: rotate(-2deg);
box-shadow: 2px 3px 0px var(--pl-border);
}
.pl-hero-subtitle {
font-size: 1.15rem;
max-width: 600px;
color: var(--pl-text-muted);
margin-bottom: 2.5rem;
line-height: 1.7;
}
.pl-hero-buttons {
display: flex;
gap: 1.25rem;
justify-content: center;
margin-bottom: 3.5rem;
flex-wrap: wrap;
}
.pl-hero-features {
display: flex;
gap: 2.5rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.pl-feat-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--pl-text);
}
.pl-feat-emoji {
font-size: 1.35rem;
transition: var(--pl-transition);
}
.pl-feat-item:hover .pl-feat-emoji {
transform: translateY(-4px) scale(1.2);
}
@media (max-width: 768px) {
.pl-hero-centered {
padding: 4rem 2rem !important;
}
.pl-hero-title {
font-size: 2.5rem;
}
.pl-hero-subtitle {
font-size: 1.05rem;
}
.pl-hero-features {
gap: 1.5rem;
}
}
Playful Split Hero
HTML
<div class="pl-hero-split">
<div class="pl-split-content pl-surface">
<div class="pl-split-badge bg-teal">
<span>✨ Creative Workspace</span>
</div>
<h1 class="pl-split-title">Inject Bright <span class="pl-highlight bg-pink text-white">Vibe</span> to Your SaaS</h1>
<p class="pl-split-desc">Launch premium layouts, beautiful outlines, and cheerful animations using our modern design system.</p>
<form class="pl-split-waitlist" onsubmit="return false;">
<input type="email" class="pl-input" placeholder="Enter your email address" required>
<button type="submit" class="pl-btn pl-btn-primary">Join Waitlist</button>
</form>
<div class="pl-split-stats">
<div class="pl-split-stat">
<span class="pl-stat-num text-pink">12K+</span>
<span class="pl-stat-lbl">Active Artists</span>
</div>
<div class="pl-split-stat">
<span class="pl-stat-num text-teal">99.9%</span>
<span class="pl-stat-lbl">Fidelity Score</span>
</div>
</div>
</div>
<div class="pl-split-visual">
<!-- Back Card (Large preview template) -->
<div class="pl-visual-card pl-surface bg-paper">
<div class="pl-card-header">
<div class="pl-card-dots">
<span class="pl-dot bg-pink"></span>
<span class="pl-dot bg-yellow"></span>
<span class="pl-dot bg-teal"></span>
</div>
<div class="pl-card-title">canvas_draft.sketch</div>
</div>
<div class="pl-card-body">
<div class="pl-skeleton-grid">
<div class="pl-skel-line" style="width: 70%; height: 16px;"></div>
<div class="pl-skel-line" style="width: 90%; height: 12px;"></div>
<div class="pl-skel-line" style="width: 50%; height: 12px;"></div>
</div>
<div class="pl-skel-circle">🍭</div>
</div>
</div>
<!-- Front Overlay Card (Staggered coordination) -->
<div class="pl-visual-overlay pl-surface">
<div class="pl-profile-card">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&h=100&q=80" alt="Sarah Jenkins" class="pl-profile-avatar">
<div class="pl-profile-info">
<span class="pl-profile-name">Sarah Jenkins</span>
<span class="pl-profile-role">Lead Curator</span>
</div>
</div>
<div class="pl-overlay-badge bg-yellow">⭐ Pro Designer</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Playful Split Hero */
/* NOTE: This component requires base.css to be included in your page. */
.pl-hero-split {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 3.5rem;
max-width: 1100px;
margin: 2rem auto;
align-items: center;
}
.pl-split-content {
display: flex;
flex-direction: column;
padding: 4rem 3rem !important;
}
.pl-split-badge {
align-self: flex-start;
border: 2px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
padding: 0.35rem 0.85rem;
font-family: var(--pl-font-heading);
font-size: 0.85rem;
font-weight: 800;
color: var(--pl-text);
box-shadow: var(--pl-shadow-sm);
transform: rotate(-1.5deg);
margin-bottom: 2rem;
}
.pl-split-title {
font-size: 2.75rem;
margin-bottom: 1.25rem;
line-height: 1.2;
}
.pl-split-desc {
font-size: 1.05rem;
color: var(--pl-text-muted);
margin-bottom: 2.25rem;
line-height: 1.6;
}
.pl-split-waitlist {
display: flex;
gap: 0.75rem;
margin-bottom: 2.5rem;
}
.pl-split-waitlist .pl-input {
flex: 1;
}
.pl-split-stats {
display: flex;
gap: 3rem;
border-top: var(--pl-border-width) dashed var(--pl-border);
padding-top: 1.75rem;
}
.pl-split-stat {
display: flex;
flex-direction: column;
}
.pl-stat-num {
font-family: var(--pl-font-heading);
font-size: 1.85rem;
font-weight: 800;
line-height: 1;
margin-bottom: 0.25rem;
}
.pl-stat-lbl {
font-size: 0.85rem;
font-weight: 700;
color: var(--pl-text-muted);
}
/* Right Side Visual Container */
.pl-split-visual {
position: relative;
width: 100%;
height: 440px;
display: flex;
align-items: center;
justify-content: center;
}
.pl-visual-card {
width: 340px;
height: 280px;
display: flex;
flex-direction: column;
padding: 0 !important;
position: absolute;
top: 2rem;
left: 1.5rem;
z-index: 2;
transform: rotate(-2.5deg);
}
.pl-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: var(--pl-border-width) solid var(--pl-border);
}
.pl-card-dots {
display: flex;
gap: 0.5rem;
}
.pl-dot {
width: 12px;
height: 12px;
border-radius: var(--pl-radius-circle);
border: 2px solid var(--pl-border);
}
.pl-card-title {
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.85rem;
color: var(--pl-text-muted);
}
.pl-card-body {
padding: 1.75rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pl-skeleton-grid {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.pl-skel-line {
background-color: var(--pl-bg-muted);
border-radius: var(--pl-radius-sm);
}
.pl-skel-circle {
align-self: flex-end;
width: 44px;
height: 44px;
border-radius: var(--pl-radius-sm);
background-color: var(--pl-secondary);
border: 2px solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: var(--pl-shadow-sm);
}
/* Front Staggered Overlay Card */
.pl-visual-overlay {
width: 210px;
padding: 1.25rem !important;
position: absolute;
top: 16.5rem;
right: 0.5rem;
z-index: 3;
transform: rotate(2.5deg);
}
.pl-visual-overlay:hover {
transform: rotate(0.5deg) translate(-2px, -2px);
box-shadow: 0px 12px 0px var(--pl-border);
}
.pl-profile-card {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.pl-profile-avatar {
width: 42px;
height: 42px;
border-radius: var(--pl-radius-sm);
border: 2px solid var(--pl-border);
flex-shrink: 0;
}
.pl-overlay-badge {
display: inline-block;
border: 2px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
padding: 0.25rem 0.5rem;
font-family: var(--pl-font-heading);
font-size: 0.75rem;
font-weight: 800;
color: var(--pl-text);
box-shadow: 2px 2px 0px var(--pl-border);
}
@media (max-width: 991px) {
.pl-hero-split {
grid-template-columns: 1fr;
gap: 3rem;
}
.pl-split-visual {
height: 380px;
}
.pl-visual-card {
left: 50%;
transform: translateX(-60%) rotate(-2.5deg);
}
.pl-visual-overlay {
right: 50%;
transform: translateX(65%) rotate(2.5deg);
}
}
@media (max-width: 480px) {
.pl-split-content {
padding: 3rem 1.5rem !important;
}
.pl-split-title {
font-size: 2.25rem;
}
.pl-split-waitlist {
flex-direction: column;
}
.pl-split-stats {
gap: 1.5rem;
}
.pl-split-visual {
display: none;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Comfortaa:wght@400;500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--pl-bg: #FCFAF2; /* Friendly warm cream */
--pl-bg-muted: #F5F2E9; /* Warm shadow cream */
--pl-surface: #FFFFFF;
--pl-primary: #FF5A5F; /* Bubblegum Coral Pink */
--pl-secondary: #FCD34D; /* Sunshine Yellow */
--pl-accent: #2DD4BF; /* Vibrant Teal Mint */
--pl-success: #10B981; /* Fresh Lime Green */
--pl-warning: #F59E0B; /* Orange Peel */
--pl-info: #3B82F6; /* Playful Sky Blue */
--pl-text: #1F2937; /* Deep Slate Charcoal */
--pl-text-muted: #4B5563; /* Friendly Slate */
--pl-text-light: #9CA3AF;
--pl-border: #1F2937;
--pl-border-width: 3px;
--pl-radius: 20px;
--pl-radius-lg: 28px;
--pl-radius-sm: 12px;
--pl-radius-circle: 50%;
--pl-font-heading: 'Lexend', sans-serif;
--pl-font-body: 'Comfortaa', cursive;
--pl-transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* Snappy modern spring */
--pl-shadow: 0px 8px 0px #1F2937;
--pl-shadow-lg: 0px 14px 0px #1F2937;
--pl-shadow-sm: 0px 4px 0px #1F2937;
--pl-shadow-press: 0px 2px 0px #1F2937;
}
body {
margin: 0;
font-family: var(--pl-font-body);
color: var(--pl-text);
background-color: var(--pl-bg);
-webkit-font-smoothing: antialiased;
}
/* Friendly Bubble Containers */
.pl-surface {
background-color: var(--pl-surface);
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius);
padding: 2.5rem;
box-shadow: var(--pl-shadow);
transition: var(--pl-transition);
}
/* Global Logo */
.pl-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--pl-font-heading);
font-size: 1.35rem;
font-weight: 800;
color: var(--pl-text);
transition: var(--pl-transition);
}
.pl-logo:hover {
transform: scale(1.05) rotate(-2deg);
}
.pl-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--pl-radius-sm);
background-color: var(--pl-primary);
border: var(--pl-border-width) solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--pl-font-heading);
font-size: 1.3rem;
font-weight: 800;
color: #FFFFFF;
box-shadow: var(--pl-shadow-sm);
transform: rotate(5deg);
}
/* Bubble Buttons */
.pl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.85rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
gap: 0.5rem;
position: relative;
user-select: none;
}
.pl-btn:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow);
}
.pl-btn:active {
transform: translateY(2px);
box-shadow: var(--pl-shadow-press);
}
.pl-btn-primary {
background-color: var(--pl-primary);
color: #FFFFFF;
}
.pl-btn-primary:hover {
background-color: #ff3e43;
}
.pl-btn-secondary {
background-color: var(--pl-secondary);
color: var(--pl-text);
}
.pl-btn-secondary:hover {
background-color: #fbd01e;
}
.pl-btn-accent {
background-color: var(--pl-accent);
color: var(--pl-text);
}
.pl-btn-accent:hover {
background-color: #1abc9c;
}
.pl-btn-outline {
background-color: var(--pl-surface);
color: var(--pl-text);
}
.pl-btn-outline:hover {
background-color: var(--pl-bg-muted);
}
.pl-btn-ghost {
background-color: transparent;
color: var(--pl-text);
border-color: transparent;
box-shadow: none;
}
.pl-btn-ghost:hover {
background-color: var(--pl-bg-muted);
border-color: var(--pl-border);
box-shadow: var(--pl-shadow-sm);
}
.pl-btn-circle {
width: 46px;
height: 46px;
padding: 0;
border-radius: var(--pl-radius-circle) !important;
}
.pl-btn-block {
width: 100%;
}
/* Form Fields */
.pl-input {
width: 100%;
padding: 0.95rem 1.35rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
font-family: var(--pl-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--pl-text);
background-color: var(--pl-surface);
outline: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
}
.pl-input::placeholder {
color: var(--pl-text-light);
}
.pl-input:focus {
background-color: var(--pl-bg-muted);
box-shadow: var(--pl-shadow);
transform: translateY(-2px);
}
.pl-label {
display: block;
margin-bottom: 0.6rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--pl-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pl-font-heading);
font-weight: 800;
margin: 0;
color: var(--pl-text);
line-height: 1.15;
}
p {
font-family: var(--pl-font-body);
font-weight: 500;
line-height: 1.6;
margin: 0;
color: var(--pl-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-pink { color: var(--pl-primary) !important; }
.text-yellow { color: var(--pl-secondary) !important; }
.text-teal { color: var(--pl-accent) !important; }
.text-muted { color: var(--pl-text-muted) !important; }
.bg-paper { background-color: var(--pl-bg) !important; }
.bg-cream { background-color: var(--pl-bg-muted) !important; }
.bg-pink { background-color: var(--pl-primary) !important; }
.bg-yellow { background-color: var(--pl-secondary) !important; }
.bg-teal { background-color: var(--pl-accent) !important; }
.bg-green { background-color: var(--pl-success) !important; }
/* --- COMPONENT STYLES --- */
.pl-hero-split {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 3.5rem;
max-width: 1100px;
margin: 2rem auto;
align-items: center;
}
.pl-split-content {
display: flex;
flex-direction: column;
padding: 4rem 3rem !important;
}
.pl-split-badge {
align-self: flex-start;
border: 2px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
padding: 0.35rem 0.85rem;
font-family: var(--pl-font-heading);
font-size: 0.85rem;
font-weight: 800;
color: var(--pl-text);
box-shadow: var(--pl-shadow-sm);
transform: rotate(-1.5deg);
margin-bottom: 2rem;
}
.pl-split-title {
font-size: 2.75rem;
margin-bottom: 1.25rem;
line-height: 1.2;
}
.pl-split-desc {
font-size: 1.05rem;
color: var(--pl-text-muted);
margin-bottom: 2.25rem;
line-height: 1.6;
}
.pl-split-waitlist {
display: flex;
gap: 0.75rem;
margin-bottom: 2.5rem;
}
.pl-split-waitlist .pl-input {
flex: 1;
}
.pl-split-stats {
display: flex;
gap: 3rem;
border-top: var(--pl-border-width) dashed var(--pl-border);
padding-top: 1.75rem;
}
.pl-split-stat {
display: flex;
flex-direction: column;
}
.pl-stat-num {
font-family: var(--pl-font-heading);
font-size: 1.85rem;
font-weight: 800;
line-height: 1;
margin-bottom: 0.25rem;
}
.pl-stat-lbl {
font-size: 0.85rem;
font-weight: 700;
color: var(--pl-text-muted);
}
/* Right Side Visual Container */
.pl-split-visual {
position: relative;
width: 100%;
height: 440px;
display: flex;
align-items: center;
justify-content: center;
}
.pl-visual-card {
width: 340px;
height: 280px;
display: flex;
flex-direction: column;
padding: 0 !important;
position: absolute;
top: 2rem;
left: 1.5rem;
z-index: 2;
transform: rotate(-2.5deg);
}
.pl-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: var(--pl-border-width) solid var(--pl-border);
}
.pl-card-dots {
display: flex;
gap: 0.5rem;
}
.pl-dot {
width: 12px;
height: 12px;
border-radius: var(--pl-radius-circle);
border: 2px solid var(--pl-border);
}
.pl-card-title {
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.85rem;
color: var(--pl-text-muted);
}
.pl-card-body {
padding: 1.75rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pl-skeleton-grid {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.pl-skel-line {
background-color: var(--pl-bg-muted);
border-radius: var(--pl-radius-sm);
}
.pl-skel-circle {
align-self: flex-end;
width: 44px;
height: 44px;
border-radius: var(--pl-radius-sm);
background-color: var(--pl-secondary);
border: 2px solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: var(--pl-shadow-sm);
}
/* Front Staggered Overlay Card */
.pl-visual-overlay {
width: 210px;
padding: 1.25rem !important;
position: absolute;
top: 16.5rem;
right: 0.5rem;
z-index: 3;
transform: rotate(2.5deg);
}
.pl-visual-overlay:hover {
transform: rotate(0.5deg) translate(-2px, -2px);
box-shadow: 0px 12px 0px var(--pl-border);
}
.pl-profile-card {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.pl-profile-avatar {
width: 42px;
height: 42px;
border-radius: var(--pl-radius-sm);
border: 2px solid var(--pl-border);
flex-shrink: 0;
}
.pl-overlay-badge {
display: inline-block;
border: 2px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
padding: 0.25rem 0.5rem;
font-family: var(--pl-font-heading);
font-size: 0.75rem;
font-weight: 800;
color: var(--pl-text);
box-shadow: 2px 2px 0px var(--pl-border);
}
@media (max-width: 991px) {
.pl-hero-split {
grid-template-columns: 1fr;
gap: 3rem;
}
.pl-split-visual {
height: 380px;
}
.pl-visual-card {
left: 50%;
transform: translateX(-60%) rotate(-2.5deg);
}
.pl-visual-overlay {
right: 50%;
transform: translateX(65%) rotate(2.5deg);
}
}
@media (max-width: 480px) {
.pl-split-content {
padding: 3rem 1.5rem !important;
}
.pl-split-title {
font-size: 2.25rem;
}
.pl-split-waitlist {
flex-direction: column;
}
.pl-split-stats {
gap: 1.5rem;
}
.pl-split-visual {
display: none;
}
}
Forms
Bubble Login Card
HTML
<div class="pl-login-card pl-surface">
<div class="pl-login-header">
<h2>Welcome Back!</h2>
<p>Let's log into your bubbly workspace.</p>
</div>
<form class="pl-login-form" onsubmit="return false;">
<div class="pl-form-group">
<label class="pl-label" for="login-email">Email Address</label>
<input type="email" id="login-email" class="pl-input" placeholder="[email protected]" required>
</div>
<div class="pl-form-group">
<label class="pl-label" for="login-password">Password</label>
<input type="password" id="login-password" class="pl-input" placeholder="••••••••" required>
</div>
<div class="pl-form-options">
<label class="pl-checkbox-container">
<input type="checkbox" checked>
<span class="pl-checkmark"></span>
<span class="pl-checkbox-label">Keep me active</span>
</label>
<a href="#" class="pl-forgot-link">Lost key?</a>
</div>
<button type="submit" class="pl-btn pl-btn-primary pl-btn-block">Unlock Dashboard!</button>
</form>
<div class="pl-login-divider">
<span>or bubble in with</span>
</div>
<div class="pl-social-login">
<button class="pl-btn pl-btn-circle pl-btn-outline" aria-label="Google">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M12.24 10.285V13.4h6.887C18.2 15.614 15.645 18 12.24 18c-3.86 0-7-3.14-7-7s3.14-7 7-7c1.7 0 3.3.6 4.6 1.8l2.4-2.4C17.3 1.7 14.9 1 12.24 1c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.8 0 9.8-4.1 9.8-10 0-.6 0-1.1-.1-1.7H12.24z"/></svg>
</button>
<button class="pl-btn pl-btn-circle pl-btn-outline" aria-label="GitHub">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</button>
</div>
</div>
CSS (Component Only)
/* Component: Bubble Login Card */
/* NOTE: This component requires base.css to be included in your page. */
.pl-login-card {
max-width: 440px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.pl-login-card:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow-lg);
}
.pl-login-header {
text-align: center;
margin-bottom: 2.5rem;
}
.pl-login-header h2 {
font-size: 2.25rem;
margin-bottom: 0.65rem;
}
.pl-login-header p {
font-size: 1rem;
color: var(--pl-text-muted);
font-weight: 600;
}
.pl-login-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pl-form-group {
display: flex;
flex-direction: column;
}
.pl-form-options {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
/* Custom Bubbly Checkbox */
.pl-checkbox-container {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
user-select: none;
gap: 0.6rem;
font-weight: 700;
color: var(--pl-text);
}
.pl-checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.pl-checkmark {
width: 22px;
height: 22px;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: 6px;
display: inline-block;
position: relative;
transition: var(--pl-transition);
background-color: var(--pl-surface);
box-shadow: 2px 2px 0px var(--pl-border);
}
.pl-checkbox-container:hover input ~ .pl-checkmark {
transform: scale(1.08) translateY(-1px);
box-shadow: 3px 3px 0px var(--pl-border);
}
.pl-checkbox-container input:checked ~ .pl-checkmark {
background-color: var(--pl-accent);
}
.pl-checkmark:after {
content: "";
position: absolute;
display: none;
left: 5px;
top: 1px;
width: 6px;
height: 11px;
border: solid var(--pl-text);
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.pl-checkbox-container input:checked ~ .pl-checkmark:after {
display: block;
}
.pl-forgot-link {
color: var(--pl-primary);
text-decoration: none;
font-weight: 700;
transition: var(--pl-transition);
}
.pl-forgot-link:hover {
color: #ff3e43;
transform: translateY(-2px);
}
/* Divider */
.pl-login-divider {
text-align: center;
margin: 2rem 0;
position: relative;
}
.pl-login-divider:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: var(--pl-border-width);
border-top: var(--pl-border-width) dashed var(--pl-border);
z-index: 1;
}
.pl-login-divider span {
background-color: var(--pl-surface);
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
padding: 0.25rem 0.85rem;
font-size: 0.85rem;
font-weight: 800;
color: var(--pl-text);
position: relative;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: var(--pl-shadow-sm);
display: inline-block;
transform: rotate(-1.5deg);
}
/* Socials */
.pl-social-login {
display: flex;
justify-content: center;
gap: 1rem;
}
.pl-social-login .pl-btn-circle svg {
display: block;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Comfortaa:wght@400;500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--pl-bg: #FCFAF2; /* Friendly warm cream */
--pl-bg-muted: #F5F2E9; /* Warm shadow cream */
--pl-surface: #FFFFFF;
--pl-primary: #FF5A5F; /* Bubblegum Coral Pink */
--pl-secondary: #FCD34D; /* Sunshine Yellow */
--pl-accent: #2DD4BF; /* Vibrant Teal Mint */
--pl-success: #10B981; /* Fresh Lime Green */
--pl-warning: #F59E0B; /* Orange Peel */
--pl-info: #3B82F6; /* Playful Sky Blue */
--pl-text: #1F2937; /* Deep Slate Charcoal */
--pl-text-muted: #4B5563; /* Friendly Slate */
--pl-text-light: #9CA3AF;
--pl-border: #1F2937;
--pl-border-width: 3px;
--pl-radius: 20px;
--pl-radius-lg: 28px;
--pl-radius-sm: 12px;
--pl-radius-circle: 50%;
--pl-font-heading: 'Lexend', sans-serif;
--pl-font-body: 'Comfortaa', cursive;
--pl-transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* Snappy modern spring */
--pl-shadow: 0px 8px 0px #1F2937;
--pl-shadow-lg: 0px 14px 0px #1F2937;
--pl-shadow-sm: 0px 4px 0px #1F2937;
--pl-shadow-press: 0px 2px 0px #1F2937;
}
body {
margin: 0;
font-family: var(--pl-font-body);
color: var(--pl-text);
background-color: var(--pl-bg);
-webkit-font-smoothing: antialiased;
}
/* Friendly Bubble Containers */
.pl-surface {
background-color: var(--pl-surface);
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius);
padding: 2.5rem;
box-shadow: var(--pl-shadow);
transition: var(--pl-transition);
}
/* Global Logo */
.pl-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--pl-font-heading);
font-size: 1.35rem;
font-weight: 800;
color: var(--pl-text);
transition: var(--pl-transition);
}
.pl-logo:hover {
transform: scale(1.05) rotate(-2deg);
}
.pl-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--pl-radius-sm);
background-color: var(--pl-primary);
border: var(--pl-border-width) solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--pl-font-heading);
font-size: 1.3rem;
font-weight: 800;
color: #FFFFFF;
box-shadow: var(--pl-shadow-sm);
transform: rotate(5deg);
}
/* Bubble Buttons */
.pl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.85rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
gap: 0.5rem;
position: relative;
user-select: none;
}
.pl-btn:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow);
}
.pl-btn:active {
transform: translateY(2px);
box-shadow: var(--pl-shadow-press);
}
.pl-btn-primary {
background-color: var(--pl-primary);
color: #FFFFFF;
}
.pl-btn-primary:hover {
background-color: #ff3e43;
}
.pl-btn-secondary {
background-color: var(--pl-secondary);
color: var(--pl-text);
}
.pl-btn-secondary:hover {
background-color: #fbd01e;
}
.pl-btn-accent {
background-color: var(--pl-accent);
color: var(--pl-text);
}
.pl-btn-accent:hover {
background-color: #1abc9c;
}
.pl-btn-outline {
background-color: var(--pl-surface);
color: var(--pl-text);
}
.pl-btn-outline:hover {
background-color: var(--pl-bg-muted);
}
.pl-btn-ghost {
background-color: transparent;
color: var(--pl-text);
border-color: transparent;
box-shadow: none;
}
.pl-btn-ghost:hover {
background-color: var(--pl-bg-muted);
border-color: var(--pl-border);
box-shadow: var(--pl-shadow-sm);
}
.pl-btn-circle {
width: 46px;
height: 46px;
padding: 0;
border-radius: var(--pl-radius-circle) !important;
}
.pl-btn-block {
width: 100%;
}
/* Form Fields */
.pl-input {
width: 100%;
padding: 0.95rem 1.35rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
font-family: var(--pl-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--pl-text);
background-color: var(--pl-surface);
outline: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
}
.pl-input::placeholder {
color: var(--pl-text-light);
}
.pl-input:focus {
background-color: var(--pl-bg-muted);
box-shadow: var(--pl-shadow);
transform: translateY(-2px);
}
.pl-label {
display: block;
margin-bottom: 0.6rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--pl-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pl-font-heading);
font-weight: 800;
margin: 0;
color: var(--pl-text);
line-height: 1.15;
}
p {
font-family: var(--pl-font-body);
font-weight: 500;
line-height: 1.6;
margin: 0;
color: var(--pl-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-pink { color: var(--pl-primary) !important; }
.text-yellow { color: var(--pl-secondary) !important; }
.text-teal { color: var(--pl-accent) !important; }
.text-muted { color: var(--pl-text-muted) !important; }
.bg-paper { background-color: var(--pl-bg) !important; }
.bg-cream { background-color: var(--pl-bg-muted) !important; }
.bg-pink { background-color: var(--pl-primary) !important; }
.bg-yellow { background-color: var(--pl-secondary) !important; }
.bg-teal { background-color: var(--pl-accent) !important; }
.bg-green { background-color: var(--pl-success) !important; }
/* --- COMPONENT STYLES --- */
.pl-login-card {
max-width: 440px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.pl-login-card:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow-lg);
}
.pl-login-header {
text-align: center;
margin-bottom: 2.5rem;
}
.pl-login-header h2 {
font-size: 2.25rem;
margin-bottom: 0.65rem;
}
.pl-login-header p {
font-size: 1rem;
color: var(--pl-text-muted);
font-weight: 600;
}
.pl-login-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pl-form-group {
display: flex;
flex-direction: column;
}
.pl-form-options {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
/* Custom Bubbly Checkbox */
.pl-checkbox-container {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
user-select: none;
gap: 0.6rem;
font-weight: 700;
color: var(--pl-text);
}
.pl-checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.pl-checkmark {
width: 22px;
height: 22px;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: 6px;
display: inline-block;
position: relative;
transition: var(--pl-transition);
background-color: var(--pl-surface);
box-shadow: 2px 2px 0px var(--pl-border);
}
.pl-checkbox-container:hover input ~ .pl-checkmark {
transform: scale(1.08) translateY(-1px);
box-shadow: 3px 3px 0px var(--pl-border);
}
.pl-checkbox-container input:checked ~ .pl-checkmark {
background-color: var(--pl-accent);
}
.pl-checkmark:after {
content: "";
position: absolute;
display: none;
left: 5px;
top: 1px;
width: 6px;
height: 11px;
border: solid var(--pl-text);
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.pl-checkbox-container input:checked ~ .pl-checkmark:after {
display: block;
}
.pl-forgot-link {
color: var(--pl-primary);
text-decoration: none;
font-weight: 700;
transition: var(--pl-transition);
}
.pl-forgot-link:hover {
color: #ff3e43;
transform: translateY(-2px);
}
/* Divider */
.pl-login-divider {
text-align: center;
margin: 2rem 0;
position: relative;
}
.pl-login-divider:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: var(--pl-border-width);
border-top: var(--pl-border-width) dashed var(--pl-border);
z-index: 1;
}
.pl-login-divider span {
background-color: var(--pl-surface);
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
padding: 0.25rem 0.85rem;
font-size: 0.85rem;
font-weight: 800;
color: var(--pl-text);
position: relative;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: var(--pl-shadow-sm);
display: inline-block;
transform: rotate(-1.5deg);
}
/* Socials */
.pl-social-login {
display: flex;
justify-content: center;
gap: 1rem;
}
.pl-social-login .pl-btn-circle svg {
display: block;
}
Playful Profile Settings
HTML
<div class="pl-settings-card pl-surface">
<div class="pl-settings-header">
<h3>Studio Settings</h3>
<p class="pl-settings-subtitle">Manage public information, layout assets, and bubble configs.</p>
</div>
<form class="pl-settings-form" onsubmit="return false;">
<div class="pl-form-row">
<div class="pl-form-group">
<label class="pl-label" for="settings-first">First Name</label>
<input type="text" id="settings-first" class="pl-input" value="Sarah">
</div>
<div class="pl-form-group">
<label class="pl-label" for="settings-last">Last Name</label>
<input type="text" id="settings-last" class="pl-input" value="Jenkins">
</div>
</div>
<div class="pl-form-group">
<label class="pl-label" for="settings-email">Email Address</label>
<input type="email" id="settings-email" class="pl-input" value="[email protected]">
</div>
<div class="pl-form-group">
<label class="pl-label" for="settings-bio">Creator Bio</label>
<textarea id="settings-bio" class="pl-input pl-textarea" rows="4">Curator of high-performance spatial engines and dynamic network nodes. Designed using Lexend and Comfortaa.</textarea>
</div>
<hr class="pl-divider-line">
<div class="pl-toggle-group">
<div class="pl-toggle-text">
<h4>Dynamic Coral Highlights</h4>
<p>Inject rich solid sketchy pink and yellow fills into active tags.</p>
</div>
<label class="pl-toggle">
<input type="checkbox" checked>
<span class="pl-slider"></span>
</label>
</div>
<div class="pl-settings-actions">
<button type="button" class="pl-btn pl-btn-outline">Reset Changes</button>
<button type="submit" class="pl-btn pl-btn-primary">Save Settings</button>
</div>
</form>
</div>
CSS (Component Only)
/* Component: Playful Profile Settings */
/* NOTE: This component requires base.css to be included in your page. */
.pl-settings-card {
max-width: 600px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.pl-settings-card:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow-lg);
}
.pl-settings-header {
margin-bottom: 2.5rem;
}
.pl-settings-header h3 {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.pl-settings-subtitle {
font-size: 1.02rem;
color: var(--pl-text-muted);
font-weight: 600;
}
.pl-settings-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pl-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.pl-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
.pl-divider-line {
border: 0;
height: var(--pl-border-width);
background-color: transparent;
border-top: var(--pl-border-width) dashed var(--pl-border);
margin: 0.75rem 0;
}
/* Custom Bouncy Toggle Switch */
.pl-toggle-group {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.pl-toggle-text h4 {
font-family: var(--pl-font-heading);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.pl-toggle-text p {
font-size: 0.92rem;
color: var(--pl-text-muted);
font-weight: 600;
}
.pl-toggle {
position: relative;
display: inline-block;
width: 58px;
height: 32px;
flex-shrink: 0;
}
.pl-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.pl-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--pl-surface);
border: var(--pl-border-width) solid var(--pl-border);
border-radius: 34px;
transition: var(--pl-transition);
box-shadow: var(--pl-shadow-sm);
}
.pl-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: var(--pl-border);
border-radius: 50%;
transition: var(--pl-transition);
}
.pl-toggle input:checked + .pl-slider {
background-color: var(--pl-success);
}
.pl-toggle input:checked + .pl-slider:before {
background-color: var(--pl-surface);
transform: translateX(26px);
border: 2px solid var(--pl-border);
}
.pl-settings-actions {
display: flex;
justify-content: flex-end;
gap: 1.5rem;
margin-top: 1rem;
}
@media (max-width: 600px) {
.pl-form-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.pl-settings-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.pl-settings-actions .pl-btn {
width: 100%;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Comfortaa:wght@400;500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--pl-bg: #FCFAF2; /* Friendly warm cream */
--pl-bg-muted: #F5F2E9; /* Warm shadow cream */
--pl-surface: #FFFFFF;
--pl-primary: #FF5A5F; /* Bubblegum Coral Pink */
--pl-secondary: #FCD34D; /* Sunshine Yellow */
--pl-accent: #2DD4BF; /* Vibrant Teal Mint */
--pl-success: #10B981; /* Fresh Lime Green */
--pl-warning: #F59E0B; /* Orange Peel */
--pl-info: #3B82F6; /* Playful Sky Blue */
--pl-text: #1F2937; /* Deep Slate Charcoal */
--pl-text-muted: #4B5563; /* Friendly Slate */
--pl-text-light: #9CA3AF;
--pl-border: #1F2937;
--pl-border-width: 3px;
--pl-radius: 20px;
--pl-radius-lg: 28px;
--pl-radius-sm: 12px;
--pl-radius-circle: 50%;
--pl-font-heading: 'Lexend', sans-serif;
--pl-font-body: 'Comfortaa', cursive;
--pl-transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* Snappy modern spring */
--pl-shadow: 0px 8px 0px #1F2937;
--pl-shadow-lg: 0px 14px 0px #1F2937;
--pl-shadow-sm: 0px 4px 0px #1F2937;
--pl-shadow-press: 0px 2px 0px #1F2937;
}
body {
margin: 0;
font-family: var(--pl-font-body);
color: var(--pl-text);
background-color: var(--pl-bg);
-webkit-font-smoothing: antialiased;
}
/* Friendly Bubble Containers */
.pl-surface {
background-color: var(--pl-surface);
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius);
padding: 2.5rem;
box-shadow: var(--pl-shadow);
transition: var(--pl-transition);
}
/* Global Logo */
.pl-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--pl-font-heading);
font-size: 1.35rem;
font-weight: 800;
color: var(--pl-text);
transition: var(--pl-transition);
}
.pl-logo:hover {
transform: scale(1.05) rotate(-2deg);
}
.pl-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--pl-radius-sm);
background-color: var(--pl-primary);
border: var(--pl-border-width) solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--pl-font-heading);
font-size: 1.3rem;
font-weight: 800;
color: #FFFFFF;
box-shadow: var(--pl-shadow-sm);
transform: rotate(5deg);
}
/* Bubble Buttons */
.pl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.85rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
gap: 0.5rem;
position: relative;
user-select: none;
}
.pl-btn:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow);
}
.pl-btn:active {
transform: translateY(2px);
box-shadow: var(--pl-shadow-press);
}
.pl-btn-primary {
background-color: var(--pl-primary);
color: #FFFFFF;
}
.pl-btn-primary:hover {
background-color: #ff3e43;
}
.pl-btn-secondary {
background-color: var(--pl-secondary);
color: var(--pl-text);
}
.pl-btn-secondary:hover {
background-color: #fbd01e;
}
.pl-btn-accent {
background-color: var(--pl-accent);
color: var(--pl-text);
}
.pl-btn-accent:hover {
background-color: #1abc9c;
}
.pl-btn-outline {
background-color: var(--pl-surface);
color: var(--pl-text);
}
.pl-btn-outline:hover {
background-color: var(--pl-bg-muted);
}
.pl-btn-ghost {
background-color: transparent;
color: var(--pl-text);
border-color: transparent;
box-shadow: none;
}
.pl-btn-ghost:hover {
background-color: var(--pl-bg-muted);
border-color: var(--pl-border);
box-shadow: var(--pl-shadow-sm);
}
.pl-btn-circle {
width: 46px;
height: 46px;
padding: 0;
border-radius: var(--pl-radius-circle) !important;
}
.pl-btn-block {
width: 100%;
}
/* Form Fields */
.pl-input {
width: 100%;
padding: 0.95rem 1.35rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
font-family: var(--pl-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--pl-text);
background-color: var(--pl-surface);
outline: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
}
.pl-input::placeholder {
color: var(--pl-text-light);
}
.pl-input:focus {
background-color: var(--pl-bg-muted);
box-shadow: var(--pl-shadow);
transform: translateY(-2px);
}
.pl-label {
display: block;
margin-bottom: 0.6rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--pl-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pl-font-heading);
font-weight: 800;
margin: 0;
color: var(--pl-text);
line-height: 1.15;
}
p {
font-family: var(--pl-font-body);
font-weight: 500;
line-height: 1.6;
margin: 0;
color: var(--pl-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-pink { color: var(--pl-primary) !important; }
.text-yellow { color: var(--pl-secondary) !important; }
.text-teal { color: var(--pl-accent) !important; }
.text-muted { color: var(--pl-text-muted) !important; }
.bg-paper { background-color: var(--pl-bg) !important; }
.bg-cream { background-color: var(--pl-bg-muted) !important; }
.bg-pink { background-color: var(--pl-primary) !important; }
.bg-yellow { background-color: var(--pl-secondary) !important; }
.bg-teal { background-color: var(--pl-accent) !important; }
.bg-green { background-color: var(--pl-success) !important; }
/* --- COMPONENT STYLES --- */
.pl-settings-card {
max-width: 600px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.pl-settings-card:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow-lg);
}
.pl-settings-header {
margin-bottom: 2.5rem;
}
.pl-settings-header h3 {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.pl-settings-subtitle {
font-size: 1.02rem;
color: var(--pl-text-muted);
font-weight: 600;
}
.pl-settings-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pl-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.pl-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
.pl-divider-line {
border: 0;
height: var(--pl-border-width);
background-color: transparent;
border-top: var(--pl-border-width) dashed var(--pl-border);
margin: 0.75rem 0;
}
/* Custom Bouncy Toggle Switch */
.pl-toggle-group {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.pl-toggle-text h4 {
font-family: var(--pl-font-heading);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.pl-toggle-text p {
font-size: 0.92rem;
color: var(--pl-text-muted);
font-weight: 600;
}
.pl-toggle {
position: relative;
display: inline-block;
width: 58px;
height: 32px;
flex-shrink: 0;
}
.pl-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.pl-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--pl-surface);
border: var(--pl-border-width) solid var(--pl-border);
border-radius: 34px;
transition: var(--pl-transition);
box-shadow: var(--pl-shadow-sm);
}
.pl-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: var(--pl-border);
border-radius: 50%;
transition: var(--pl-transition);
}
.pl-toggle input:checked + .pl-slider {
background-color: var(--pl-success);
}
.pl-toggle input:checked + .pl-slider:before {
background-color: var(--pl-surface);
transform: translateX(26px);
border: 2px solid var(--pl-border);
}
.pl-settings-actions {
display: flex;
justify-content: flex-end;
gap: 1.5rem;
margin-top: 1rem;
}
@media (max-width: 600px) {
.pl-form-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.pl-settings-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.pl-settings-actions .pl-btn {
width: 100%;
}
}
Cards
Cheerful Stats Metrics
HTML
<div class="pl-stats-grid">
<div class="pl-stat-card pl-surface" style="background-color: #ffeef0;">
<div class="pl-stat-header">
<span class="pl-stat-title text-pink">Active Users</span>
<div class="pl-stat-icon text-pink">
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</div>
</div>
<div class="pl-stat-value">8,420</div>
<div class="pl-stat-footer">
<span class="pl-trend-indicator text-pink">⭐ 14% up this week</span>
</div>
</div>
<div class="pl-stat-card pl-surface" style="background-color: #fffbeb;">
<div class="pl-stat-header">
<span class="pl-stat-title" style="color: #b7791f;">Asset Value</span>
<div class="pl-stat-icon" style="color: #b7791f;">
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
</div>
</div>
<div class="pl-stat-value" style="color: #b7791f;">$48.2K</div>
<div class="pl-stat-footer">
<span class="pl-trend-indicator" style="color: #b7791f;">⚡ Curated velocity</span>
</div>
</div>
<div class="pl-stat-card pl-surface" style="background-color: #e6fffa;">
<div class="pl-stat-header">
<span class="pl-stat-title text-teal">API Fidelity</span>
<div class="pl-stat-icon text-teal">
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
</div>
</div>
<div class="pl-stat-value text-teal">99.98%</div>
<div class="pl-stat-footer">
<span class="pl-trend-indicator text-teal">🍭 Bouncy uptime</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Cheerful Stats Metrics */
/* NOTE: This component requires base.css to be included in your page. */
.pl-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.pl-stat-card {
display: flex;
flex-direction: column;
padding: 2.25rem !important;
}
.pl-stat-card:hover {
transform: translateY(-6px);
box-shadow: var(--pl-shadow-lg);
}
.pl-stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.pl-stat-title {
font-family: var(--pl-font-heading);
font-weight: 800;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pl-stat-icon {
display: flex;
align-items: center;
justify-content: center;
}
.pl-stat-value {
font-family: var(--pl-font-heading);
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 1rem;
line-height: 1;
}
.pl-stat-footer {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Comfortaa:wght@400;500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--pl-bg: #FCFAF2; /* Friendly warm cream */
--pl-bg-muted: #F5F2E9; /* Warm shadow cream */
--pl-surface: #FFFFFF;
--pl-primary: #FF5A5F; /* Bubblegum Coral Pink */
--pl-secondary: #FCD34D; /* Sunshine Yellow */
--pl-accent: #2DD4BF; /* Vibrant Teal Mint */
--pl-success: #10B981; /* Fresh Lime Green */
--pl-warning: #F59E0B; /* Orange Peel */
--pl-info: #3B82F6; /* Playful Sky Blue */
--pl-text: #1F2937; /* Deep Slate Charcoal */
--pl-text-muted: #4B5563; /* Friendly Slate */
--pl-text-light: #9CA3AF;
--pl-border: #1F2937;
--pl-border-width: 3px;
--pl-radius: 20px;
--pl-radius-lg: 28px;
--pl-radius-sm: 12px;
--pl-radius-circle: 50%;
--pl-font-heading: 'Lexend', sans-serif;
--pl-font-body: 'Comfortaa', cursive;
--pl-transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* Snappy modern spring */
--pl-shadow: 0px 8px 0px #1F2937;
--pl-shadow-lg: 0px 14px 0px #1F2937;
--pl-shadow-sm: 0px 4px 0px #1F2937;
--pl-shadow-press: 0px 2px 0px #1F2937;
}
body {
margin: 0;
font-family: var(--pl-font-body);
color: var(--pl-text);
background-color: var(--pl-bg);
-webkit-font-smoothing: antialiased;
}
/* Friendly Bubble Containers */
.pl-surface {
background-color: var(--pl-surface);
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius);
padding: 2.5rem;
box-shadow: var(--pl-shadow);
transition: var(--pl-transition);
}
/* Global Logo */
.pl-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--pl-font-heading);
font-size: 1.35rem;
font-weight: 800;
color: var(--pl-text);
transition: var(--pl-transition);
}
.pl-logo:hover {
transform: scale(1.05) rotate(-2deg);
}
.pl-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--pl-radius-sm);
background-color: var(--pl-primary);
border: var(--pl-border-width) solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--pl-font-heading);
font-size: 1.3rem;
font-weight: 800;
color: #FFFFFF;
box-shadow: var(--pl-shadow-sm);
transform: rotate(5deg);
}
/* Bubble Buttons */
.pl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.85rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
gap: 0.5rem;
position: relative;
user-select: none;
}
.pl-btn:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow);
}
.pl-btn:active {
transform: translateY(2px);
box-shadow: var(--pl-shadow-press);
}
.pl-btn-primary {
background-color: var(--pl-primary);
color: #FFFFFF;
}
.pl-btn-primary:hover {
background-color: #ff3e43;
}
.pl-btn-secondary {
background-color: var(--pl-secondary);
color: var(--pl-text);
}
.pl-btn-secondary:hover {
background-color: #fbd01e;
}
.pl-btn-accent {
background-color: var(--pl-accent);
color: var(--pl-text);
}
.pl-btn-accent:hover {
background-color: #1abc9c;
}
.pl-btn-outline {
background-color: var(--pl-surface);
color: var(--pl-text);
}
.pl-btn-outline:hover {
background-color: var(--pl-bg-muted);
}
.pl-btn-ghost {
background-color: transparent;
color: var(--pl-text);
border-color: transparent;
box-shadow: none;
}
.pl-btn-ghost:hover {
background-color: var(--pl-bg-muted);
border-color: var(--pl-border);
box-shadow: var(--pl-shadow-sm);
}
.pl-btn-circle {
width: 46px;
height: 46px;
padding: 0;
border-radius: var(--pl-radius-circle) !important;
}
.pl-btn-block {
width: 100%;
}
/* Form Fields */
.pl-input {
width: 100%;
padding: 0.95rem 1.35rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
font-family: var(--pl-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--pl-text);
background-color: var(--pl-surface);
outline: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
}
.pl-input::placeholder {
color: var(--pl-text-light);
}
.pl-input:focus {
background-color: var(--pl-bg-muted);
box-shadow: var(--pl-shadow);
transform: translateY(-2px);
}
.pl-label {
display: block;
margin-bottom: 0.6rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--pl-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pl-font-heading);
font-weight: 800;
margin: 0;
color: var(--pl-text);
line-height: 1.15;
}
p {
font-family: var(--pl-font-body);
font-weight: 500;
line-height: 1.6;
margin: 0;
color: var(--pl-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-pink { color: var(--pl-primary) !important; }
.text-yellow { color: var(--pl-secondary) !important; }
.text-teal { color: var(--pl-accent) !important; }
.text-muted { color: var(--pl-text-muted) !important; }
.bg-paper { background-color: var(--pl-bg) !important; }
.bg-cream { background-color: var(--pl-bg-muted) !important; }
.bg-pink { background-color: var(--pl-primary) !important; }
.bg-yellow { background-color: var(--pl-secondary) !important; }
.bg-teal { background-color: var(--pl-accent) !important; }
.bg-green { background-color: var(--pl-success) !important; }
/* --- COMPONENT STYLES --- */
.pl-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.pl-stat-card {
display: flex;
flex-direction: column;
padding: 2.25rem !important;
}
.pl-stat-card:hover {
transform: translateY(-6px);
box-shadow: var(--pl-shadow-lg);
}
.pl-stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.pl-stat-title {
font-family: var(--pl-font-heading);
font-weight: 800;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pl-stat-icon {
display: flex;
align-items: center;
justify-content: center;
}
.pl-stat-value {
font-family: var(--pl-font-heading);
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 1rem;
line-height: 1;
}
.pl-stat-footer {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
}
Bubble Subscription Pricing
HTML
<div class="pl-pricing-card pl-surface">
<div class="pl-pricing-header">
<h3 class="pl-pricing-title">Studio Pro</h3>
<p class="pl-pricing-desc">Hyper-performance bubbly spatial features designed for professional creators.</p>
<div class="pl-pricing-price">
<span class="pl-currency">$</span>
<span class="pl-amount text-pink">39</span>
<span class="pl-period">/mo</span>
</div>
</div>
<div class="pl-pricing-features">
<ul>
<li>
<div class="pl-bullet bg-teal">✓</div>
Unlimited Creator Canvases
</li>
<li>
<div class="pl-bullet bg-teal">✓</div>
Full Bubble Vector Layouts
</li>
<li>
<div class="pl-bullet bg-teal">✓</div>
15 Collaborative Subspaces
</li>
<li class="pl-feature-disabled">
<div class="pl-bullet" style="background-color: var(--pl-text-light); border-color: var(--pl-border);">✕</div>
Personal Blueprint Director
</li>
</ul>
</div>
<div class="pl-pricing-footer">
<button class="pl-btn pl-btn-primary pl-btn-block">Start Free Trial!</button>
</div>
</div>
CSS (Component Only)
/* Component: Bubble Subscription Pricing */
/* NOTE: This component requires base.css to be included in your page. */
.pl-pricing-card {
max-width: 380px;
margin: 2rem auto;
padding: 3.5rem 2.5rem 2.5rem;
position: relative;
}
.pl-pricing-card:hover {
transform: translateY(-6px);
box-shadow: var(--pl-shadow-lg);
}
.pl-pricing-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: var(--pl-border-width) dashed var(--pl-border);
}
.pl-pricing-title {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.pl-pricing-desc {
font-size: 0.95rem;
color: var(--pl-text-muted);
margin-bottom: 2rem;
line-height: 1.6;
font-weight: 600;
}
.pl-pricing-price {
display: flex;
align-items: flex-end;
justify-content: center;
color: var(--pl-text);
}
.pl-currency {
font-family: var(--pl-font-heading);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.4rem;
margin-right: 0.2rem;
color: var(--pl-primary);
}
.pl-amount {
font-family: var(--pl-font-heading);
font-size: 3.75rem;
font-weight: 800;
line-height: 1;
}
.pl-period {
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--pl-text-muted);
margin-bottom: 0.4rem;
margin-left: 0.2rem;
}
.pl-pricing-features ul {
list-style: none;
padding: 0;
margin: 0 0 2.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.pl-pricing-features li {
display: flex;
align-items: center;
gap: 0.85rem;
font-size: 1.05rem;
color: var(--pl-text);
font-weight: 700;
}
.pl-bullet {
width: 22px;
height: 22px;
border-radius: var(--pl-radius-circle);
border: var(--pl-border-width) solid var(--pl-border);
flex-shrink: 0;
box-shadow: 2px 2px 0px var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 900;
color: var(--pl-text);
}
.pl-feature-disabled {
color: var(--pl-text-light) !important;
text-decoration: line-through;
opacity: 0.6;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Comfortaa:wght@400;500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--pl-bg: #FCFAF2; /* Friendly warm cream */
--pl-bg-muted: #F5F2E9; /* Warm shadow cream */
--pl-surface: #FFFFFF;
--pl-primary: #FF5A5F; /* Bubblegum Coral Pink */
--pl-secondary: #FCD34D; /* Sunshine Yellow */
--pl-accent: #2DD4BF; /* Vibrant Teal Mint */
--pl-success: #10B981; /* Fresh Lime Green */
--pl-warning: #F59E0B; /* Orange Peel */
--pl-info: #3B82F6; /* Playful Sky Blue */
--pl-text: #1F2937; /* Deep Slate Charcoal */
--pl-text-muted: #4B5563; /* Friendly Slate */
--pl-text-light: #9CA3AF;
--pl-border: #1F2937;
--pl-border-width: 3px;
--pl-radius: 20px;
--pl-radius-lg: 28px;
--pl-radius-sm: 12px;
--pl-radius-circle: 50%;
--pl-font-heading: 'Lexend', sans-serif;
--pl-font-body: 'Comfortaa', cursive;
--pl-transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* Snappy modern spring */
--pl-shadow: 0px 8px 0px #1F2937;
--pl-shadow-lg: 0px 14px 0px #1F2937;
--pl-shadow-sm: 0px 4px 0px #1F2937;
--pl-shadow-press: 0px 2px 0px #1F2937;
}
body {
margin: 0;
font-family: var(--pl-font-body);
color: var(--pl-text);
background-color: var(--pl-bg);
-webkit-font-smoothing: antialiased;
}
/* Friendly Bubble Containers */
.pl-surface {
background-color: var(--pl-surface);
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius);
padding: 2.5rem;
box-shadow: var(--pl-shadow);
transition: var(--pl-transition);
}
/* Global Logo */
.pl-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--pl-font-heading);
font-size: 1.35rem;
font-weight: 800;
color: var(--pl-text);
transition: var(--pl-transition);
}
.pl-logo:hover {
transform: scale(1.05) rotate(-2deg);
}
.pl-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--pl-radius-sm);
background-color: var(--pl-primary);
border: var(--pl-border-width) solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--pl-font-heading);
font-size: 1.3rem;
font-weight: 800;
color: #FFFFFF;
box-shadow: var(--pl-shadow-sm);
transform: rotate(5deg);
}
/* Bubble Buttons */
.pl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.85rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
gap: 0.5rem;
position: relative;
user-select: none;
}
.pl-btn:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow);
}
.pl-btn:active {
transform: translateY(2px);
box-shadow: var(--pl-shadow-press);
}
.pl-btn-primary {
background-color: var(--pl-primary);
color: #FFFFFF;
}
.pl-btn-primary:hover {
background-color: #ff3e43;
}
.pl-btn-secondary {
background-color: var(--pl-secondary);
color: var(--pl-text);
}
.pl-btn-secondary:hover {
background-color: #fbd01e;
}
.pl-btn-accent {
background-color: var(--pl-accent);
color: var(--pl-text);
}
.pl-btn-accent:hover {
background-color: #1abc9c;
}
.pl-btn-outline {
background-color: var(--pl-surface);
color: var(--pl-text);
}
.pl-btn-outline:hover {
background-color: var(--pl-bg-muted);
}
.pl-btn-ghost {
background-color: transparent;
color: var(--pl-text);
border-color: transparent;
box-shadow: none;
}
.pl-btn-ghost:hover {
background-color: var(--pl-bg-muted);
border-color: var(--pl-border);
box-shadow: var(--pl-shadow-sm);
}
.pl-btn-circle {
width: 46px;
height: 46px;
padding: 0;
border-radius: var(--pl-radius-circle) !important;
}
.pl-btn-block {
width: 100%;
}
/* Form Fields */
.pl-input {
width: 100%;
padding: 0.95rem 1.35rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
font-family: var(--pl-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--pl-text);
background-color: var(--pl-surface);
outline: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
}
.pl-input::placeholder {
color: var(--pl-text-light);
}
.pl-input:focus {
background-color: var(--pl-bg-muted);
box-shadow: var(--pl-shadow);
transform: translateY(-2px);
}
.pl-label {
display: block;
margin-bottom: 0.6rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--pl-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pl-font-heading);
font-weight: 800;
margin: 0;
color: var(--pl-text);
line-height: 1.15;
}
p {
font-family: var(--pl-font-body);
font-weight: 500;
line-height: 1.6;
margin: 0;
color: var(--pl-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-pink { color: var(--pl-primary) !important; }
.text-yellow { color: var(--pl-secondary) !important; }
.text-teal { color: var(--pl-accent) !important; }
.text-muted { color: var(--pl-text-muted) !important; }
.bg-paper { background-color: var(--pl-bg) !important; }
.bg-cream { background-color: var(--pl-bg-muted) !important; }
.bg-pink { background-color: var(--pl-primary) !important; }
.bg-yellow { background-color: var(--pl-secondary) !important; }
.bg-teal { background-color: var(--pl-accent) !important; }
.bg-green { background-color: var(--pl-success) !important; }
/* --- COMPONENT STYLES --- */
.pl-pricing-card {
max-width: 380px;
margin: 2rem auto;
padding: 3.5rem 2.5rem 2.5rem;
position: relative;
}
.pl-pricing-card:hover {
transform: translateY(-6px);
box-shadow: var(--pl-shadow-lg);
}
.pl-pricing-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: var(--pl-border-width) dashed var(--pl-border);
}
.pl-pricing-title {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.pl-pricing-desc {
font-size: 0.95rem;
color: var(--pl-text-muted);
margin-bottom: 2rem;
line-height: 1.6;
font-weight: 600;
}
.pl-pricing-price {
display: flex;
align-items: flex-end;
justify-content: center;
color: var(--pl-text);
}
.pl-currency {
font-family: var(--pl-font-heading);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.4rem;
margin-right: 0.2rem;
color: var(--pl-primary);
}
.pl-amount {
font-family: var(--pl-font-heading);
font-size: 3.75rem;
font-weight: 800;
line-height: 1;
}
.pl-period {
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--pl-text-muted);
margin-bottom: 0.4rem;
margin-left: 0.2rem;
}
.pl-pricing-features ul {
list-style: none;
padding: 0;
margin: 0 0 2.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.pl-pricing-features li {
display: flex;
align-items: center;
gap: 0.85rem;
font-size: 1.05rem;
color: var(--pl-text);
font-weight: 700;
}
.pl-bullet {
width: 22px;
height: 22px;
border-radius: var(--pl-radius-circle);
border: var(--pl-border-width) solid var(--pl-border);
flex-shrink: 0;
box-shadow: 2px 2px 0px var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 900;
color: var(--pl-text);
}
.pl-feature-disabled {
color: var(--pl-text-light) !important;
text-decoration: line-through;
opacity: 0.6;
}
Tables
Playful Ledger Table
HTML
<div class="pl-table-container pl-surface">
<div class="pl-table-header">
<h3>Studio Ledger</h3>
<p>Real-time updates of designed asset layers and waitlist points.</p>
</div>
<div class="pl-table-responsive">
<table class="pl-bubble-table">
<thead>
<tr>
<th>Layer Name</th>
<th>Lead Creator</th>
<th>Waitlist Points</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-pink">~ / spline-matrix</td>
<td>Sarah J.</td>
<td>9,420 pts</td>
<td><span class="pl-pill bg-green text-white">Active</span></td>
</tr>
<tr>
<td class="text-pink">~ / raster-brush</td>
<td>Alex M.</td>
<td>8,110 pts</td>
<td><span class="pl-pill bg-yellow">Building</span></td>
</tr>
<tr>
<td class="text-pink">~ / bezier-curves</td>
<td>Sarah J.</td>
<td>14,280 pts</td>
<td><span class="pl-pill bg-green text-white">Active</span></td>
</tr>
<tr>
<td class="text-pink">~ / physics-crayons</td>
<td>Dave K.</td>
<td>--</td>
<td><span class="pl-pill bg-pink text-white">Paused</span></td>
</tr>
</tbody>
</table>
</div>
</div>
CSS (Component Only)
/* Component: Playful Ledger Table */
/* NOTE: This component requires base.css to be included in your page. */
.pl-table-container {
max-width: 800px;
margin: 2rem auto;
padding: 2.5rem !important;
}
.pl-table-container:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow-lg);
}
.pl-table-header {
margin-bottom: 2rem;
}
.pl-table-header h3 {
font-size: 1.65rem;
margin-bottom: 0.5rem;
}
.pl-table-header p {
font-size: 0.95rem;
color: var(--pl-text-muted);
font-weight: 600;
}
.pl-table-responsive {
width: 100%;
overflow-x: auto;
border-radius: var(--pl-radius-sm);
border: var(--pl-border-width) solid var(--pl-border);
box-shadow: var(--pl-shadow-sm);
}
.pl-bubble-table {
width: 100%;
border-collapse: collapse;
background-color: var(--pl-surface);
text-align: left;
}
.pl-bubble-table th {
background-color: var(--pl-bg-muted);
font-family: var(--pl-font-heading);
font-weight: 800;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--pl-text);
padding: 1.1rem 1.5rem;
border-bottom: var(--pl-border-width) solid var(--pl-border);
}
.pl-bubble-table td {
padding: 1.25rem 1.5rem;
font-weight: 700;
font-size: 0.95rem;
color: var(--pl-text);
border-bottom: var(--pl-border-width) solid var(--pl-bg-muted);
transition: var(--pl-transition);
}
.pl-bubble-table tr:last-child td {
border-bottom: none;
}
.pl-bubble-table tbody tr:hover td {
background-color: #fbf9f0;
}
.pl-pill {
display: inline-block;
border: 2px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
padding: 0.25rem 0.75rem;
font-family: var(--pl-font-heading);
font-size: 0.75rem;
font-weight: 800;
box-shadow: 2px 2px 0px var(--pl-border);
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Comfortaa:wght@400;500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--pl-bg: #FCFAF2; /* Friendly warm cream */
--pl-bg-muted: #F5F2E9; /* Warm shadow cream */
--pl-surface: #FFFFFF;
--pl-primary: #FF5A5F; /* Bubblegum Coral Pink */
--pl-secondary: #FCD34D; /* Sunshine Yellow */
--pl-accent: #2DD4BF; /* Vibrant Teal Mint */
--pl-success: #10B981; /* Fresh Lime Green */
--pl-warning: #F59E0B; /* Orange Peel */
--pl-info: #3B82F6; /* Playful Sky Blue */
--pl-text: #1F2937; /* Deep Slate Charcoal */
--pl-text-muted: #4B5563; /* Friendly Slate */
--pl-text-light: #9CA3AF;
--pl-border: #1F2937;
--pl-border-width: 3px;
--pl-radius: 20px;
--pl-radius-lg: 28px;
--pl-radius-sm: 12px;
--pl-radius-circle: 50%;
--pl-font-heading: 'Lexend', sans-serif;
--pl-font-body: 'Comfortaa', cursive;
--pl-transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* Snappy modern spring */
--pl-shadow: 0px 8px 0px #1F2937;
--pl-shadow-lg: 0px 14px 0px #1F2937;
--pl-shadow-sm: 0px 4px 0px #1F2937;
--pl-shadow-press: 0px 2px 0px #1F2937;
}
body {
margin: 0;
font-family: var(--pl-font-body);
color: var(--pl-text);
background-color: var(--pl-bg);
-webkit-font-smoothing: antialiased;
}
/* Friendly Bubble Containers */
.pl-surface {
background-color: var(--pl-surface);
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius);
padding: 2.5rem;
box-shadow: var(--pl-shadow);
transition: var(--pl-transition);
}
/* Global Logo */
.pl-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--pl-font-heading);
font-size: 1.35rem;
font-weight: 800;
color: var(--pl-text);
transition: var(--pl-transition);
}
.pl-logo:hover {
transform: scale(1.05) rotate(-2deg);
}
.pl-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--pl-radius-sm);
background-color: var(--pl-primary);
border: var(--pl-border-width) solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--pl-font-heading);
font-size: 1.3rem;
font-weight: 800;
color: #FFFFFF;
box-shadow: var(--pl-shadow-sm);
transform: rotate(5deg);
}
/* Bubble Buttons */
.pl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.85rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
gap: 0.5rem;
position: relative;
user-select: none;
}
.pl-btn:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow);
}
.pl-btn:active {
transform: translateY(2px);
box-shadow: var(--pl-shadow-press);
}
.pl-btn-primary {
background-color: var(--pl-primary);
color: #FFFFFF;
}
.pl-btn-primary:hover {
background-color: #ff3e43;
}
.pl-btn-secondary {
background-color: var(--pl-secondary);
color: var(--pl-text);
}
.pl-btn-secondary:hover {
background-color: #fbd01e;
}
.pl-btn-accent {
background-color: var(--pl-accent);
color: var(--pl-text);
}
.pl-btn-accent:hover {
background-color: #1abc9c;
}
.pl-btn-outline {
background-color: var(--pl-surface);
color: var(--pl-text);
}
.pl-btn-outline:hover {
background-color: var(--pl-bg-muted);
}
.pl-btn-ghost {
background-color: transparent;
color: var(--pl-text);
border-color: transparent;
box-shadow: none;
}
.pl-btn-ghost:hover {
background-color: var(--pl-bg-muted);
border-color: var(--pl-border);
box-shadow: var(--pl-shadow-sm);
}
.pl-btn-circle {
width: 46px;
height: 46px;
padding: 0;
border-radius: var(--pl-radius-circle) !important;
}
.pl-btn-block {
width: 100%;
}
/* Form Fields */
.pl-input {
width: 100%;
padding: 0.95rem 1.35rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
font-family: var(--pl-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--pl-text);
background-color: var(--pl-surface);
outline: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
}
.pl-input::placeholder {
color: var(--pl-text-light);
}
.pl-input:focus {
background-color: var(--pl-bg-muted);
box-shadow: var(--pl-shadow);
transform: translateY(-2px);
}
.pl-label {
display: block;
margin-bottom: 0.6rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--pl-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pl-font-heading);
font-weight: 800;
margin: 0;
color: var(--pl-text);
line-height: 1.15;
}
p {
font-family: var(--pl-font-body);
font-weight: 500;
line-height: 1.6;
margin: 0;
color: var(--pl-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-pink { color: var(--pl-primary) !important; }
.text-yellow { color: var(--pl-secondary) !important; }
.text-teal { color: var(--pl-accent) !important; }
.text-muted { color: var(--pl-text-muted) !important; }
.bg-paper { background-color: var(--pl-bg) !important; }
.bg-cream { background-color: var(--pl-bg-muted) !important; }
.bg-pink { background-color: var(--pl-primary) !important; }
.bg-yellow { background-color: var(--pl-secondary) !important; }
.bg-teal { background-color: var(--pl-accent) !important; }
.bg-green { background-color: var(--pl-success) !important; }
/* --- COMPONENT STYLES --- */
.pl-table-container {
max-width: 800px;
margin: 2rem auto;
padding: 2.5rem !important;
}
.pl-table-container:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow-lg);
}
.pl-table-header {
margin-bottom: 2rem;
}
.pl-table-header h3 {
font-size: 1.65rem;
margin-bottom: 0.5rem;
}
.pl-table-header p {
font-size: 0.95rem;
color: var(--pl-text-muted);
font-weight: 600;
}
.pl-table-responsive {
width: 100%;
overflow-x: auto;
border-radius: var(--pl-radius-sm);
border: var(--pl-border-width) solid var(--pl-border);
box-shadow: var(--pl-shadow-sm);
}
.pl-bubble-table {
width: 100%;
border-collapse: collapse;
background-color: var(--pl-surface);
text-align: left;
}
.pl-bubble-table th {
background-color: var(--pl-bg-muted);
font-family: var(--pl-font-heading);
font-weight: 800;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--pl-text);
padding: 1.1rem 1.5rem;
border-bottom: var(--pl-border-width) solid var(--pl-border);
}
.pl-bubble-table td {
padding: 1.25rem 1.5rem;
font-weight: 700;
font-size: 0.95rem;
color: var(--pl-text);
border-bottom: var(--pl-border-width) solid var(--pl-bg-muted);
transition: var(--pl-transition);
}
.pl-bubble-table tr:last-child td {
border-bottom: none;
}
.pl-bubble-table tbody tr:hover td {
background-color: #fbf9f0;
}
.pl-pill {
display: inline-block;
border: 2px solid var(--pl-border);
border-radius: var(--pl-radius-sm);
padding: 0.25rem 0.75rem;
font-family: var(--pl-font-heading);
font-size: 0.75rem;
font-weight: 800;
box-shadow: 2px 2px 0px var(--pl-border);
}
Lists
Cheerful Activity Stream
HTML
<div class="pl-list-container pl-surface">
<div class="pl-list-header">
<h3>Activity Stream</h3>
<p>Real-time collaboration across designed workspaces.</p>
</div>
<div class="pl-list-items">
<!-- Item 1 -->
<div class="pl-list-item">
<div class="pl-item-avatar bg-pink">🎨</div>
<div class="pl-item-content">
<div class="pl-item-meta">
<span class="pl-item-author">Sarah Jenkins</span>
<span class="pl-item-time">4m ago</span>
</div>
<p class="pl-item-text">Pushed 3 new high-fidelity vectors to <span class="pl-item-tag bg-pink text-white">#spline-matrix</span>.</p>
</div>
</div>
<!-- Item 2 -->
<div class="pl-list-item">
<div class="pl-item-avatar bg-yellow">⚡</div>
<div class="pl-item-content">
<div class="pl-item-meta">
<span class="pl-item-author">Alex Rivera</span>
<span class="pl-item-time">1h ago</span>
</div>
<p class="pl-item-text">Regenerated the global asset compression zip for <span class="pl-item-tag bg-yellow">#raster-brush</span>.</p>
</div>
</div>
<!-- Item 3 -->
<div class="pl-list-item">
<div class="pl-item-avatar bg-teal">🍭</div>
<div class="pl-item-content">
<div class="pl-item-meta">
<span class="pl-item-author">Dave Miller</span>
<span class="pl-item-time">5h ago</span>
</div>
<p class="pl-item-text">Unlocked waitlist access code and unlocked the <span class="pl-item-tag bg-teal">#creative-workspace</span>.</p>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Cheerful Activity Stream */
/* NOTE: This component requires base.css to be included in your page. */
.pl-list-container {
max-width: 550px;
margin: 2rem auto;
padding: 2.5rem !important;
}
.pl-list-container:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow-lg);
}
.pl-list-header {
margin-bottom: 2.25rem;
}
.pl-list-header h3 {
font-size: 1.65rem;
margin-bottom: 0.5rem;
}
.pl-list-header p {
font-size: 0.95rem;
color: var(--pl-text-muted);
font-weight: 600;
}
.pl-list-items {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.pl-list-item {
display: flex;
gap: 1rem;
align-items: flex-start;
padding-bottom: 1.25rem;
border-bottom: var(--pl-border-width) dashed var(--pl-border);
transition: var(--pl-transition);
}
.pl-list-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.pl-list-item:hover {
transform: translateX(4px);
}
.pl-item-avatar {
width: 44px;
height: 44px;
border-radius: var(--pl-radius-sm);
border: var(--pl-border-width) solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
box-shadow: var(--pl-shadow-sm);
flex-shrink: 0;
}
.pl-list-item:hover .pl-item-avatar {
transform: scale(1.1) rotate(-8deg);
}
.pl-item-content {
flex: 1;
}
.pl-item-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.35rem;
}
.pl-item-author {
font-family: var(--pl-font-heading);
font-size: 0.95rem;
font-weight: 800;
color: var(--pl-text);
}
.pl-item-time {
font-size: 0.8rem;
font-weight: 600;
color: var(--pl-text-light);
}
.pl-item-text {
font-size: 0.92rem;
line-height: 1.5;
color: var(--pl-text-muted);
font-weight: 600;
}
.pl-item-tag {
display: inline-block;
border: 2px solid var(--pl-border);
border-radius: 6px;
padding: 0.1rem 0.4rem;
font-family: var(--pl-font-heading);
font-size: 0.8rem;
font-weight: 800;
box-shadow: 2px 2px 0px var(--pl-border);
margin-left: 0.1rem;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Comfortaa:wght@400;500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--pl-bg: #FCFAF2; /* Friendly warm cream */
--pl-bg-muted: #F5F2E9; /* Warm shadow cream */
--pl-surface: #FFFFFF;
--pl-primary: #FF5A5F; /* Bubblegum Coral Pink */
--pl-secondary: #FCD34D; /* Sunshine Yellow */
--pl-accent: #2DD4BF; /* Vibrant Teal Mint */
--pl-success: #10B981; /* Fresh Lime Green */
--pl-warning: #F59E0B; /* Orange Peel */
--pl-info: #3B82F6; /* Playful Sky Blue */
--pl-text: #1F2937; /* Deep Slate Charcoal */
--pl-text-muted: #4B5563; /* Friendly Slate */
--pl-text-light: #9CA3AF;
--pl-border: #1F2937;
--pl-border-width: 3px;
--pl-radius: 20px;
--pl-radius-lg: 28px;
--pl-radius-sm: 12px;
--pl-radius-circle: 50%;
--pl-font-heading: 'Lexend', sans-serif;
--pl-font-body: 'Comfortaa', cursive;
--pl-transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* Snappy modern spring */
--pl-shadow: 0px 8px 0px #1F2937;
--pl-shadow-lg: 0px 14px 0px #1F2937;
--pl-shadow-sm: 0px 4px 0px #1F2937;
--pl-shadow-press: 0px 2px 0px #1F2937;
}
body {
margin: 0;
font-family: var(--pl-font-body);
color: var(--pl-text);
background-color: var(--pl-bg);
-webkit-font-smoothing: antialiased;
}
/* Friendly Bubble Containers */
.pl-surface {
background-color: var(--pl-surface);
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius);
padding: 2.5rem;
box-shadow: var(--pl-shadow);
transition: var(--pl-transition);
}
/* Global Logo */
.pl-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--pl-font-heading);
font-size: 1.35rem;
font-weight: 800;
color: var(--pl-text);
transition: var(--pl-transition);
}
.pl-logo:hover {
transform: scale(1.05) rotate(-2deg);
}
.pl-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--pl-radius-sm);
background-color: var(--pl-primary);
border: var(--pl-border-width) solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--pl-font-heading);
font-size: 1.3rem;
font-weight: 800;
color: #FFFFFF;
box-shadow: var(--pl-shadow-sm);
transform: rotate(5deg);
}
/* Bubble Buttons */
.pl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.85rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
gap: 0.5rem;
position: relative;
user-select: none;
}
.pl-btn:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow);
}
.pl-btn:active {
transform: translateY(2px);
box-shadow: var(--pl-shadow-press);
}
.pl-btn-primary {
background-color: var(--pl-primary);
color: #FFFFFF;
}
.pl-btn-primary:hover {
background-color: #ff3e43;
}
.pl-btn-secondary {
background-color: var(--pl-secondary);
color: var(--pl-text);
}
.pl-btn-secondary:hover {
background-color: #fbd01e;
}
.pl-btn-accent {
background-color: var(--pl-accent);
color: var(--pl-text);
}
.pl-btn-accent:hover {
background-color: #1abc9c;
}
.pl-btn-outline {
background-color: var(--pl-surface);
color: var(--pl-text);
}
.pl-btn-outline:hover {
background-color: var(--pl-bg-muted);
}
.pl-btn-ghost {
background-color: transparent;
color: var(--pl-text);
border-color: transparent;
box-shadow: none;
}
.pl-btn-ghost:hover {
background-color: var(--pl-bg-muted);
border-color: var(--pl-border);
box-shadow: var(--pl-shadow-sm);
}
.pl-btn-circle {
width: 46px;
height: 46px;
padding: 0;
border-radius: var(--pl-radius-circle) !important;
}
.pl-btn-block {
width: 100%;
}
/* Form Fields */
.pl-input {
width: 100%;
padding: 0.95rem 1.35rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
font-family: var(--pl-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--pl-text);
background-color: var(--pl-surface);
outline: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
}
.pl-input::placeholder {
color: var(--pl-text-light);
}
.pl-input:focus {
background-color: var(--pl-bg-muted);
box-shadow: var(--pl-shadow);
transform: translateY(-2px);
}
.pl-label {
display: block;
margin-bottom: 0.6rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--pl-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pl-font-heading);
font-weight: 800;
margin: 0;
color: var(--pl-text);
line-height: 1.15;
}
p {
font-family: var(--pl-font-body);
font-weight: 500;
line-height: 1.6;
margin: 0;
color: var(--pl-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-pink { color: var(--pl-primary) !important; }
.text-yellow { color: var(--pl-secondary) !important; }
.text-teal { color: var(--pl-accent) !important; }
.text-muted { color: var(--pl-text-muted) !important; }
.bg-paper { background-color: var(--pl-bg) !important; }
.bg-cream { background-color: var(--pl-bg-muted) !important; }
.bg-pink { background-color: var(--pl-primary) !important; }
.bg-yellow { background-color: var(--pl-secondary) !important; }
.bg-teal { background-color: var(--pl-accent) !important; }
.bg-green { background-color: var(--pl-success) !important; }
/* --- COMPONENT STYLES --- */
.pl-list-container {
max-width: 550px;
margin: 2rem auto;
padding: 2.5rem !important;
}
.pl-list-container:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow-lg);
}
.pl-list-header {
margin-bottom: 2.25rem;
}
.pl-list-header h3 {
font-size: 1.65rem;
margin-bottom: 0.5rem;
}
.pl-list-header p {
font-size: 0.95rem;
color: var(--pl-text-muted);
font-weight: 600;
}
.pl-list-items {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.pl-list-item {
display: flex;
gap: 1rem;
align-items: flex-start;
padding-bottom: 1.25rem;
border-bottom: var(--pl-border-width) dashed var(--pl-border);
transition: var(--pl-transition);
}
.pl-list-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.pl-list-item:hover {
transform: translateX(4px);
}
.pl-item-avatar {
width: 44px;
height: 44px;
border-radius: var(--pl-radius-sm);
border: var(--pl-border-width) solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
box-shadow: var(--pl-shadow-sm);
flex-shrink: 0;
}
.pl-list-item:hover .pl-item-avatar {
transform: scale(1.1) rotate(-8deg);
}
.pl-item-content {
flex: 1;
}
.pl-item-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.35rem;
}
.pl-item-author {
font-family: var(--pl-font-heading);
font-size: 0.95rem;
font-weight: 800;
color: var(--pl-text);
}
.pl-item-time {
font-size: 0.8rem;
font-weight: 600;
color: var(--pl-text-light);
}
.pl-item-text {
font-size: 0.92rem;
line-height: 1.5;
color: var(--pl-text-muted);
font-weight: 600;
}
.pl-item-tag {
display: inline-block;
border: 2px solid var(--pl-border);
border-radius: 6px;
padding: 0.1rem 0.4rem;
font-family: var(--pl-font-heading);
font-size: 0.8rem;
font-weight: 800;
box-shadow: 2px 2px 0px var(--pl-border);
margin-left: 0.1rem;
}
Modals
Playful Confirm Modal
HTML
<div class="pl-modal-backdrop">
<div class="pl-modal-card pl-surface">
<div class="pl-modal-icon bg-yellow">⚠️</div>
<div class="pl-modal-body">
<h3>Discard Draft?</h3>
<p>You have unsaved bubbly vectors in your workspace. Bouncing now will permanently erase all changes.</p>
</div>
<div class="pl-modal-actions">
<button class="pl-btn pl-btn-outline">No, Keep Editing</button>
<button class="pl-btn pl-btn-primary">Yes, Discard Vibe</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Playful Confirm Modal */
/* NOTE: This component requires base.css to be included in your page. */
.pl-modal-backdrop {
background-color: rgba(31, 41, 55, 0.4);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-radius: var(--pl-radius);
max-width: 580px;
margin: 2rem auto;
}
.pl-modal-card {
background-color: var(--pl-surface);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 3.5rem 3rem !important;
max-width: 480px;
}
.pl-modal-card:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow-lg);
}
.pl-modal-icon {
width: 62px;
height: 62px;
border-radius: var(--pl-radius-sm);
border: var(--pl-border-width) solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.25rem;
margin-bottom: 2rem;
box-shadow: var(--pl-shadow-sm);
transform: rotate(-3deg);
transition: var(--pl-transition);
}
.pl-modal-card:hover .pl-modal-icon {
transform: rotate(6deg) scale(1.1);
}
.pl-modal-body h3 {
font-size: 2rem;
margin-bottom: 0.75rem;
}
.pl-modal-body p {
font-size: 1rem;
color: var(--pl-text-muted);
margin-bottom: 2.5rem;
line-height: 1.6;
font-weight: 600;
}
.pl-modal-actions {
display: flex;
gap: 1.25rem;
justify-content: center;
width: 100%;
}
@media (max-width: 480px) {
.pl-modal-card {
padding: 2.5rem 1.5rem !important;
}
.pl-modal-actions {
flex-direction: column;
align-items: stretch;
}
.pl-modal-actions .pl-btn {
width: 100%;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Comfortaa:wght@400;500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--pl-bg: #FCFAF2; /* Friendly warm cream */
--pl-bg-muted: #F5F2E9; /* Warm shadow cream */
--pl-surface: #FFFFFF;
--pl-primary: #FF5A5F; /* Bubblegum Coral Pink */
--pl-secondary: #FCD34D; /* Sunshine Yellow */
--pl-accent: #2DD4BF; /* Vibrant Teal Mint */
--pl-success: #10B981; /* Fresh Lime Green */
--pl-warning: #F59E0B; /* Orange Peel */
--pl-info: #3B82F6; /* Playful Sky Blue */
--pl-text: #1F2937; /* Deep Slate Charcoal */
--pl-text-muted: #4B5563; /* Friendly Slate */
--pl-text-light: #9CA3AF;
--pl-border: #1F2937;
--pl-border-width: 3px;
--pl-radius: 20px;
--pl-radius-lg: 28px;
--pl-radius-sm: 12px;
--pl-radius-circle: 50%;
--pl-font-heading: 'Lexend', sans-serif;
--pl-font-body: 'Comfortaa', cursive;
--pl-transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* Snappy modern spring */
--pl-shadow: 0px 8px 0px #1F2937;
--pl-shadow-lg: 0px 14px 0px #1F2937;
--pl-shadow-sm: 0px 4px 0px #1F2937;
--pl-shadow-press: 0px 2px 0px #1F2937;
}
body {
margin: 0;
font-family: var(--pl-font-body);
color: var(--pl-text);
background-color: var(--pl-bg);
-webkit-font-smoothing: antialiased;
}
/* Friendly Bubble Containers */
.pl-surface {
background-color: var(--pl-surface);
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius);
padding: 2.5rem;
box-shadow: var(--pl-shadow);
transition: var(--pl-transition);
}
/* Global Logo */
.pl-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--pl-font-heading);
font-size: 1.35rem;
font-weight: 800;
color: var(--pl-text);
transition: var(--pl-transition);
}
.pl-logo:hover {
transform: scale(1.05) rotate(-2deg);
}
.pl-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--pl-radius-sm);
background-color: var(--pl-primary);
border: var(--pl-border-width) solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--pl-font-heading);
font-size: 1.3rem;
font-weight: 800;
color: #FFFFFF;
box-shadow: var(--pl-shadow-sm);
transform: rotate(5deg);
}
/* Bubble Buttons */
.pl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.85rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
gap: 0.5rem;
position: relative;
user-select: none;
}
.pl-btn:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow);
}
.pl-btn:active {
transform: translateY(2px);
box-shadow: var(--pl-shadow-press);
}
.pl-btn-primary {
background-color: var(--pl-primary);
color: #FFFFFF;
}
.pl-btn-primary:hover {
background-color: #ff3e43;
}
.pl-btn-secondary {
background-color: var(--pl-secondary);
color: var(--pl-text);
}
.pl-btn-secondary:hover {
background-color: #fbd01e;
}
.pl-btn-accent {
background-color: var(--pl-accent);
color: var(--pl-text);
}
.pl-btn-accent:hover {
background-color: #1abc9c;
}
.pl-btn-outline {
background-color: var(--pl-surface);
color: var(--pl-text);
}
.pl-btn-outline:hover {
background-color: var(--pl-bg-muted);
}
.pl-btn-ghost {
background-color: transparent;
color: var(--pl-text);
border-color: transparent;
box-shadow: none;
}
.pl-btn-ghost:hover {
background-color: var(--pl-bg-muted);
border-color: var(--pl-border);
box-shadow: var(--pl-shadow-sm);
}
.pl-btn-circle {
width: 46px;
height: 46px;
padding: 0;
border-radius: var(--pl-radius-circle) !important;
}
.pl-btn-block {
width: 100%;
}
/* Form Fields */
.pl-input {
width: 100%;
padding: 0.95rem 1.35rem;
border: var(--pl-border-width) solid var(--pl-border);
border-radius: var(--pl-radius-sm);
font-family: var(--pl-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--pl-text);
background-color: var(--pl-surface);
outline: none;
box-shadow: var(--pl-shadow-sm);
transition: var(--pl-transition);
}
.pl-input::placeholder {
color: var(--pl-text-light);
}
.pl-input:focus {
background-color: var(--pl-bg-muted);
box-shadow: var(--pl-shadow);
transform: translateY(-2px);
}
.pl-label {
display: block;
margin-bottom: 0.6rem;
font-family: var(--pl-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--pl-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pl-font-heading);
font-weight: 800;
margin: 0;
color: var(--pl-text);
line-height: 1.15;
}
p {
font-family: var(--pl-font-body);
font-weight: 500;
line-height: 1.6;
margin: 0;
color: var(--pl-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-pink { color: var(--pl-primary) !important; }
.text-yellow { color: var(--pl-secondary) !important; }
.text-teal { color: var(--pl-accent) !important; }
.text-muted { color: var(--pl-text-muted) !important; }
.bg-paper { background-color: var(--pl-bg) !important; }
.bg-cream { background-color: var(--pl-bg-muted) !important; }
.bg-pink { background-color: var(--pl-primary) !important; }
.bg-yellow { background-color: var(--pl-secondary) !important; }
.bg-teal { background-color: var(--pl-accent) !important; }
.bg-green { background-color: var(--pl-success) !important; }
/* --- COMPONENT STYLES --- */
.pl-modal-backdrop {
background-color: rgba(31, 41, 55, 0.4);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-radius: var(--pl-radius);
max-width: 580px;
margin: 2rem auto;
}
.pl-modal-card {
background-color: var(--pl-surface);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 3.5rem 3rem !important;
max-width: 480px;
}
.pl-modal-card:hover {
transform: translateY(-4px);
box-shadow: var(--pl-shadow-lg);
}
.pl-modal-icon {
width: 62px;
height: 62px;
border-radius: var(--pl-radius-sm);
border: var(--pl-border-width) solid var(--pl-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.25rem;
margin-bottom: 2rem;
box-shadow: var(--pl-shadow-sm);
transform: rotate(-3deg);
transition: var(--pl-transition);
}
.pl-modal-card:hover .pl-modal-icon {
transform: rotate(6deg) scale(1.1);
}
.pl-modal-body h3 {
font-size: 2rem;
margin-bottom: 0.75rem;
}
.pl-modal-body p {
font-size: 1rem;
color: var(--pl-text-muted);
margin-bottom: 2.5rem;
line-height: 1.6;
font-weight: 600;
}
.pl-modal-actions {
display: flex;
gap: 1.25rem;
justify-content: center;
width: 100%;
}
@media (max-width: 480px) {
.pl-modal-card {
padding: 2.5rem 1.5rem !important;
}
.pl-modal-actions {
flex-direction: column;
align-items: stretch;
}
.pl-modal-actions .pl-btn {
width: 100%;
}
}