Cartoon Style - Free HTML/CSS UI Kit
Playful, energetic, bubbly components featuring thick black outlines, solid paper offset shadows, and vibrant bubbly palettes.
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
Bubbly Yellow
#FFDE4D
Playful Blue
#38BDF8
Coral Pink
#FF6B8B
Slime Green
#4ADE80
Paper White
#FFFDF9
Typography
Hero Sections
Bubbly Centered Hero
HTML
<section class="ct-hero-centered">
<div class="ct-hero-badge">
<span class="ct-badge-dot bg-green"></span>
Wow! Playful Engine v1.0 is Live!
</div>
<h1 class="ct-hero-title">
The Future is <span class="ct-highlight bg-pink text-white">Super Fun!</span><br>
Curated in Bubbles.
</h1>
<p class="ct-hero-subtitle">Deploy high-energy bubbly grids, hyper-interactive cartoon cards, and gorgeous bold-outlined layouts in just seconds!</p>
<div class="ct-hero-actions">
<a href="#" class="ct-btn ct-btn-primary">Get Started!</a>
<a href="#" class="ct-btn ct-btn-outline">Explore Codex</a>
</div>
<div class="ct-hero-canvas ct-surface">
<div class="ct-canvas-header">
<div class="ct-dots">
<span class="ct-dot bg-pink"></span>
<span class="ct-dot bg-yellow"></span>
<span class="ct-dot bg-green"></span>
</div>
<div class="ct-canvas-title">cartoon-shell-core --active</div>
</div>
<div class="ct-canvas-grid">
<div class="ct-canvas-left">
<div class="ct-metric-indicator">
<svg viewBox="0 0 24 24" width="36" height="36" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon><polyline points="12 22 12 12 22 6"></polyline><polyline points="12 12 2 6"></polyline></svg>
<div class="ct-metric-text">
<h3>948.4 GB/s</h3>
<p>Spatial Bandwidth</p>
</div>
</div>
</div>
<div class="ct-canvas-right">
<div class="ct-code-line"><span class="c-pink">const</span> node = <span class="c-blue">new</span> <span class="c-yellow">AtelierNode</span>();</div>
<div class="ct-code-line"><span class="c-pink">await</span> node.<span class="c-blue">initialize</span>({ bounce: <span class="c-green">true</span> });</div>
<div class="ct-code-line">console.<span class="c-blue">log</span>(<span class="c-pink">"Cluster ready!"</span>);</div>
</div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Bubbly Centered Hero */
/* NOTE: This component requires base.css to be included in your page. */
.ct-hero-centered {
max-width: 1000px;
margin: 4rem auto;
padding: 0 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* Pulsing Badge */
.ct-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.5rem 1.25rem;
background-color: var(--ct-bg-muted);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-full);
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.85rem;
color: var(--ct-text);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 2rem;
box-shadow: var(--ct-shadow-sm);
}
.ct-badge-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--ct-border);
animation: ct-bounce 1s infinite alternate;
}
@keyframes ct-bounce {
0% { transform: translateY(0); }
100% { transform: translateY(-4px); }
}
.ct-hero-title {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 2rem;
max-width: 850px;
}
.ct-highlight {
padding: 0.2rem 1rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
display: inline-block;
transform: rotate(-2deg);
box-shadow: var(--ct-shadow-sm);
}
.ct-hero-subtitle {
font-size: 1.2rem;
max-width: 650px;
margin-bottom: 3rem;
line-height: 1.7;
font-weight: 600;
}
.ct-hero-actions {
display: flex;
gap: 1.5rem;
margin-bottom: 5rem;
}
/* Playful Canvas */
.ct-hero-canvas {
width: 100%;
padding: 0 !important;
overflow: hidden;
background-color: var(--ct-surface) !important;
border: var(--ct-border-width) solid var(--ct-border) !important;
box-shadow: var(--ct-shadow-lg) !important;
}
.ct-hero-canvas:hover {
transform: translate(-2px, -2px);
box-shadow: 12px 12px 0px #000000 !important;
}
.ct-canvas-header {
padding: 1rem 1.5rem;
border-bottom: var(--ct-border-width) solid var(--ct-border);
display: flex;
align-items: center;
position: relative;
background-color: var(--ct-bg-muted);
}
.ct-dots {
display: flex;
gap: 0.5rem;
}
.ct-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--ct-border);
}
.ct-canvas-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: var(--ct-font-heading);
font-size: 0.85rem;
font-weight: 700;
color: var(--ct-text);
}
.ct-canvas-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 2rem;
padding: 2.5rem;
text-align: left;
}
.ct-canvas-left {
display: flex;
align-items: center;
}
.ct-metric-indicator {
display: flex;
align-items: center;
gap: 1.5rem;
background-color: var(--ct-bg-muted);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius);
padding: 1.5rem 2rem;
width: 100%;
box-shadow: var(--ct-shadow-sm);
}
.ct-metric-text h3 {
font-size: 1.75rem;
color: var(--ct-text);
margin-bottom: 0.25rem;
}
.ct-metric-text p {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ct-canvas-right {
display: flex;
flex-direction: column;
justify-content: center;
font-family: monospace;
font-size: 0.9rem;
font-weight: 700;
gap: 0.75rem;
background-color: var(--ct-bg-muted);
border: var(--ct-border-width) solid var(--ct-border);
padding: 2rem;
border-radius: var(--ct-radius-sm);
box-shadow: var(--ct-shadow-sm);
}
.c-pink { color: var(--ct-accent); }
.c-blue { color: var(--ct-secondary); }
.c-yellow { color: #d4a706; }
.c-green { color: var(--ct-success); }
@media (max-width: 768px) {
.ct-hero-title { font-size: 2.75rem; }
.ct-hero-actions { flex-direction: column; width: 100%; gap: 1rem; }
.ct-hero-actions .ct-btn { width: 100%; }
.ct-canvas-grid { grid-template-columns: 1fr; 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=Fredoka:wght@300;400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--ct-bg: #FFFDF9; /* Warm paper white */
--ct-bg-muted: #FFF8E7; /* Soft bubbly cream */
--ct-surface: #FFFFFF;
--ct-primary: #FFDE4D; /* Bubbly Yellow */
--ct-secondary: #38BDF8; /* Playful Blue */
--ct-accent: #FF6B8B; /* Coral Pink */
--ct-success: #4ADE80; /* Slime Green */
--ct-text: #000000;
--ct-text-muted: #4A4A4A;
--ct-text-light: #7A7A7A;
--ct-border: #000000;
--ct-border-width: 3px;
--ct-radius: 18px;
--ct-radius-lg: 26px;
--ct-radius-sm: 10px;
--ct-radius-full: 9999px;
--ct-font-heading: 'Fredoka', sans-serif;
--ct-font-body: 'Quicksand', sans-serif;
--ct-transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Snappy bouncy spring */
--ct-shadow: 4px 4px 0px #000000;
--ct-shadow-lg: 8px 8px 0px #000000;
--ct-shadow-sm: 2px 2px 0px #000000;
--ct-shadow-press: 1px 1px 0px #000000;
}
body {
margin: 0;
font-family: var(--ct-font-body);
color: var(--ct-text);
background-color: var(--ct-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.ct-surface {
background-color: var(--ct-surface);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius);
padding: 2.5rem;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
}
/* Global Logo */
.ct-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--ct-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--ct-text);
transition: var(--ct-transition);
}
.ct-logo:hover {
transform: rotate(-2deg) scale(1.05);
}
.ct-logo-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--ct-primary);
border: var(--ct-border-width) solid var(--ct-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ct-font-heading);
font-size: 1.2rem;
font-weight: 700;
box-shadow: var(--ct-shadow-sm);
}
/* Global Buttons */
.ct-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
gap: 0.5rem;
}
.ct-btn:active {
transform: translate(3px, 3px);
box-shadow: var(--ct-shadow-press);
}
.ct-btn-primary {
background-color: var(--ct-primary);
color: var(--ct-text);
}
.ct-btn-primary:hover {
background-color: #f7ce1b;
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-outline {
background-color: var(--ct-surface);
color: var(--ct-text);
}
.ct-btn-outline:hover {
background-color: var(--ct-bg-muted);
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-ghost {
background-color: transparent;
color: var(--ct-text);
border-color: transparent;
box-shadow: none;
}
.ct-btn-ghost:hover {
background-color: var(--ct-bg-muted);
border-color: var(--ct-border);
box-shadow: var(--ct-shadow-sm);
}
.ct-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50% !important;
}
.ct-btn-block {
width: 100%;
}
/* Form Fields */
.ct-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
font-family: var(--ct-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--ct-text);
background-color: var(--ct-surface);
outline: none;
box-shadow: var(--ct-shadow-sm);
transition: var(--ct-transition);
}
.ct-input::placeholder {
color: var(--ct-text-light);
}
.ct-input:focus {
background-color: var(--ct-bg-muted);
box-shadow: var(--ct-shadow);
}
.ct-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
color: var(--ct-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ct-font-heading);
font-weight: 700;
margin: 0;
color: var(--ct-text);
line-height: 1.2;
}
p {
font-family: var(--ct-font-body);
font-weight: 600;
line-height: 1.6;
margin: 0;
color: var(--ct-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-yellow { color: var(--ct-primary) !important; }
.text-blue { color: var(--ct-secondary) !important; }
.text-pink { color: var(--ct-accent) !important; }
.text-muted { color: var(--ct-text-muted) !important; }
.bg-paper { background-color: var(--ct-bg) !important; }
.bg-cream { background-color: var(--ct-bg-muted) !important; }
.bg-blue { background-color: var(--ct-secondary) !important; }
.bg-pink { background-color: var(--ct-accent) !important; }
.bg-green { background-color: var(--ct-success) !important; }
/* --- COMPONENT STYLES --- */
.ct-hero-centered {
max-width: 1000px;
margin: 4rem auto;
padding: 0 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* Pulsing Badge */
.ct-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.5rem 1.25rem;
background-color: var(--ct-bg-muted);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-full);
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.85rem;
color: var(--ct-text);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 2rem;
box-shadow: var(--ct-shadow-sm);
}
.ct-badge-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--ct-border);
animation: ct-bounce 1s infinite alternate;
}
@keyframes ct-bounce {
0% { transform: translateY(0); }
100% { transform: translateY(-4px); }
}
.ct-hero-title {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 2rem;
max-width: 850px;
}
.ct-highlight {
padding: 0.2rem 1rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
display: inline-block;
transform: rotate(-2deg);
box-shadow: var(--ct-shadow-sm);
}
.ct-hero-subtitle {
font-size: 1.2rem;
max-width: 650px;
margin-bottom: 3rem;
line-height: 1.7;
font-weight: 600;
}
.ct-hero-actions {
display: flex;
gap: 1.5rem;
margin-bottom: 5rem;
}
/* Playful Canvas */
.ct-hero-canvas {
width: 100%;
padding: 0 !important;
overflow: hidden;
background-color: var(--ct-surface) !important;
border: var(--ct-border-width) solid var(--ct-border) !important;
box-shadow: var(--ct-shadow-lg) !important;
}
.ct-hero-canvas:hover {
transform: translate(-2px, -2px);
box-shadow: 12px 12px 0px #000000 !important;
}
.ct-canvas-header {
padding: 1rem 1.5rem;
border-bottom: var(--ct-border-width) solid var(--ct-border);
display: flex;
align-items: center;
position: relative;
background-color: var(--ct-bg-muted);
}
.ct-dots {
display: flex;
gap: 0.5rem;
}
.ct-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--ct-border);
}
.ct-canvas-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: var(--ct-font-heading);
font-size: 0.85rem;
font-weight: 700;
color: var(--ct-text);
}
.ct-canvas-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 2rem;
padding: 2.5rem;
text-align: left;
}
.ct-canvas-left {
display: flex;
align-items: center;
}
.ct-metric-indicator {
display: flex;
align-items: center;
gap: 1.5rem;
background-color: var(--ct-bg-muted);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius);
padding: 1.5rem 2rem;
width: 100%;
box-shadow: var(--ct-shadow-sm);
}
.ct-metric-text h3 {
font-size: 1.75rem;
color: var(--ct-text);
margin-bottom: 0.25rem;
}
.ct-metric-text p {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ct-canvas-right {
display: flex;
flex-direction: column;
justify-content: center;
font-family: monospace;
font-size: 0.9rem;
font-weight: 700;
gap: 0.75rem;
background-color: var(--ct-bg-muted);
border: var(--ct-border-width) solid var(--ct-border);
padding: 2rem;
border-radius: var(--ct-radius-sm);
box-shadow: var(--ct-shadow-sm);
}
.c-pink { color: var(--ct-accent); }
.c-blue { color: var(--ct-secondary); }
.c-yellow { color: #d4a706; }
.c-green { color: var(--ct-success); }
@media (max-width: 768px) {
.ct-hero-title { font-size: 2.75rem; }
.ct-hero-actions { flex-direction: column; width: 100%; gap: 1rem; }
.ct-hero-actions .ct-btn { width: 100%; }
.ct-canvas-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
Cartoon Split Hero
HTML
<section class="ct-hero-split">
<div class="ct-split-grid">
<div class="ct-split-content">
<h1 class="ct-split-title">Playful Data.<br><span class="ct-highlight bg-yellow">Frictionless Flow</span>.</h1>
<p class="ct-split-desc">A premium cartoon-style workspace designed to showcase hyper-interactive layouts, playful stats meters, and beautiful bold-outlined components.</p>
<div class="ct-split-actions">
<a href="#" class="ct-btn ct-btn-primary">Connect Node!</a>
<a href="#" class="ct-btn ct-btn-outline">Explore Codex</a>
</div>
</div>
<div class="ct-split-visual">
<div class="ct-visual-main bg-cream">
<div class="ct-visual-header">
<span class="ct-visual-title">Active Node</span>
<span class="ct-badge bg-blue text-white" style="border: 2px solid #000; font-size: 0.75rem; font-weight: 700;">Live Feed</span>
</div>
<div class="ct-visual-metric text-pink">94.8%</div>
<p class="ct-visual-desc">System stability index across active studio nodes.</p>
</div>
<div class="ct-visual-overlay bg-blue">
<div class="ct-profile-card">
<div class="ct-profile-avatar">
<img src="https://i.pravatar.cc/100?img=33" alt="Avatar">
</div>
<div class="ct-profile-info">
<h4 class="text-white">Alex Moreau</h4>
<p class="text-yellow">Node Director</p>
</div>
</div>
</div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Cartoon Split Hero */
/* NOTE: This component requires base.css to be included in your page. */
.ct-hero-split {
max-width: 1200px;
margin: 4rem auto;
padding: 0 2rem;
}
.ct-split-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 5rem;
align-items: center;
}
.ct-split-content {
text-align: left;
}
.ct-split-title {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 2rem;
}
.ct-split-desc {
font-size: 1.2rem;
color: var(--ct-text-muted);
margin-bottom: 3rem;
line-height: 1.7;
font-weight: 600;
}
.ct-split-actions {
display: flex;
gap: 1.5rem;
}
/* Staggered Cartoon Cards */
.ct-split-visual {
position: relative;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.ct-visual-main {
width: 310px;
padding: 1.75rem !important;
position: absolute;
top: 2rem;
left: 1.5rem;
z-index: 2;
transform: rotate(-3.5deg);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius);
box-shadow: var(--ct-shadow-lg);
transition: var(--ct-transition);
}
.ct-visual-main:hover {
transform: rotate(-1deg) translate(-2px, -2px);
box-shadow: 12px 12px 0px #000000;
}
.ct-visual-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.ct-visual-title {
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--ct-text);
}
.ct-badge {
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.75rem;
padding: 0.25rem 0.65rem;
border-radius: var(--ct-radius-full);
}
.ct-visual-metric {
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 3.5rem;
margin-bottom: 1rem;
line-height: 1;
}
.ct-visual-desc {
max-width: 58%;
font-size: 0.85rem;
line-height: 1.5;
font-weight: 600;
}
.ct-visual-overlay {
width: 210px;
padding: 1.25rem !important;
position: absolute;
top: 16.5rem;
right: 10.5rem;
z-index: 3;
transform: rotate(2deg);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
}
.ct-visual-overlay:hover {
transform: rotate(0deg) translate(-2px, -2px);
box-shadow: 6px 6px 0px #000000;
}
.ct-profile-card {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ct-profile-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--ct-border);
overflow: hidden;
flex-shrink: 0;
}
.ct-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ct-profile-info h4 {
font-family: var(--ct-font-heading);
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.15rem;
}
.ct-profile-info p {
font-size: 0.8rem;
font-weight: 600;
margin: 0;
}
@media (max-width: 900px) {
.ct-split-grid {
grid-template-columns: 1fr;
gap: 4rem;
text-align: center;
}
.ct-split-content {
display: flex;
flex-direction: column;
align-items: center;
}
.ct-split-actions {
justify-content: center;
}
.ct-split-visual {
max-width: 450px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.ct-split-title { font-size: 2.75rem; }
.ct-visual-main { width: 280px; left: 0; }
.ct-visual-overlay { width: 190px; right: 0; }
.ct-split-actions { flex-direction: column; width: 100%; gap: 1rem; }
.ct-split-actions .ct-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=Fredoka:wght@300;400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--ct-bg: #FFFDF9; /* Warm paper white */
--ct-bg-muted: #FFF8E7; /* Soft bubbly cream */
--ct-surface: #FFFFFF;
--ct-primary: #FFDE4D; /* Bubbly Yellow */
--ct-secondary: #38BDF8; /* Playful Blue */
--ct-accent: #FF6B8B; /* Coral Pink */
--ct-success: #4ADE80; /* Slime Green */
--ct-text: #000000;
--ct-text-muted: #4A4A4A;
--ct-text-light: #7A7A7A;
--ct-border: #000000;
--ct-border-width: 3px;
--ct-radius: 18px;
--ct-radius-lg: 26px;
--ct-radius-sm: 10px;
--ct-radius-full: 9999px;
--ct-font-heading: 'Fredoka', sans-serif;
--ct-font-body: 'Quicksand', sans-serif;
--ct-transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Snappy bouncy spring */
--ct-shadow: 4px 4px 0px #000000;
--ct-shadow-lg: 8px 8px 0px #000000;
--ct-shadow-sm: 2px 2px 0px #000000;
--ct-shadow-press: 1px 1px 0px #000000;
}
body {
margin: 0;
font-family: var(--ct-font-body);
color: var(--ct-text);
background-color: var(--ct-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.ct-surface {
background-color: var(--ct-surface);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius);
padding: 2.5rem;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
}
/* Global Logo */
.ct-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--ct-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--ct-text);
transition: var(--ct-transition);
}
.ct-logo:hover {
transform: rotate(-2deg) scale(1.05);
}
.ct-logo-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--ct-primary);
border: var(--ct-border-width) solid var(--ct-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ct-font-heading);
font-size: 1.2rem;
font-weight: 700;
box-shadow: var(--ct-shadow-sm);
}
/* Global Buttons */
.ct-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
gap: 0.5rem;
}
.ct-btn:active {
transform: translate(3px, 3px);
box-shadow: var(--ct-shadow-press);
}
.ct-btn-primary {
background-color: var(--ct-primary);
color: var(--ct-text);
}
.ct-btn-primary:hover {
background-color: #f7ce1b;
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-outline {
background-color: var(--ct-surface);
color: var(--ct-text);
}
.ct-btn-outline:hover {
background-color: var(--ct-bg-muted);
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-ghost {
background-color: transparent;
color: var(--ct-text);
border-color: transparent;
box-shadow: none;
}
.ct-btn-ghost:hover {
background-color: var(--ct-bg-muted);
border-color: var(--ct-border);
box-shadow: var(--ct-shadow-sm);
}
.ct-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50% !important;
}
.ct-btn-block {
width: 100%;
}
/* Form Fields */
.ct-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
font-family: var(--ct-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--ct-text);
background-color: var(--ct-surface);
outline: none;
box-shadow: var(--ct-shadow-sm);
transition: var(--ct-transition);
}
.ct-input::placeholder {
color: var(--ct-text-light);
}
.ct-input:focus {
background-color: var(--ct-bg-muted);
box-shadow: var(--ct-shadow);
}
.ct-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
color: var(--ct-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ct-font-heading);
font-weight: 700;
margin: 0;
color: var(--ct-text);
line-height: 1.2;
}
p {
font-family: var(--ct-font-body);
font-weight: 600;
line-height: 1.6;
margin: 0;
color: var(--ct-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-yellow { color: var(--ct-primary) !important; }
.text-blue { color: var(--ct-secondary) !important; }
.text-pink { color: var(--ct-accent) !important; }
.text-muted { color: var(--ct-text-muted) !important; }
.bg-paper { background-color: var(--ct-bg) !important; }
.bg-cream { background-color: var(--ct-bg-muted) !important; }
.bg-blue { background-color: var(--ct-secondary) !important; }
.bg-pink { background-color: var(--ct-accent) !important; }
.bg-green { background-color: var(--ct-success) !important; }
/* --- COMPONENT STYLES --- */
.ct-hero-split {
max-width: 1200px;
margin: 4rem auto;
padding: 0 2rem;
}
.ct-split-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 5rem;
align-items: center;
}
.ct-split-content {
text-align: left;
}
.ct-split-title {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 2rem;
}
.ct-split-desc {
font-size: 1.2rem;
color: var(--ct-text-muted);
margin-bottom: 3rem;
line-height: 1.7;
font-weight: 600;
}
.ct-split-actions {
display: flex;
gap: 1.5rem;
}
/* Staggered Cartoon Cards */
.ct-split-visual {
position: relative;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.ct-visual-main {
width: 310px;
padding: 1.75rem !important;
position: absolute;
top: 2rem;
left: 1.5rem;
z-index: 2;
transform: rotate(-3.5deg);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius);
box-shadow: var(--ct-shadow-lg);
transition: var(--ct-transition);
}
.ct-visual-main:hover {
transform: rotate(-1deg) translate(-2px, -2px);
box-shadow: 12px 12px 0px #000000;
}
.ct-visual-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.ct-visual-title {
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--ct-text);
}
.ct-badge {
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.75rem;
padding: 0.25rem 0.65rem;
border-radius: var(--ct-radius-full);
}
.ct-visual-metric {
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 3.5rem;
margin-bottom: 1rem;
line-height: 1;
}
.ct-visual-desc {
max-width: 58%;
font-size: 0.85rem;
line-height: 1.5;
font-weight: 600;
}
.ct-visual-overlay {
width: 210px;
padding: 1.25rem !important;
position: absolute;
top: 16.5rem;
right: 10.5rem;
z-index: 3;
transform: rotate(2deg);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
}
.ct-visual-overlay:hover {
transform: rotate(0deg) translate(-2px, -2px);
box-shadow: 6px 6px 0px #000000;
}
.ct-profile-card {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ct-profile-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--ct-border);
overflow: hidden;
flex-shrink: 0;
}
.ct-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ct-profile-info h4 {
font-family: var(--ct-font-heading);
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.15rem;
}
.ct-profile-info p {
font-size: 0.8rem;
font-weight: 600;
margin: 0;
}
@media (max-width: 900px) {
.ct-split-grid {
grid-template-columns: 1fr;
gap: 4rem;
text-align: center;
}
.ct-split-content {
display: flex;
flex-direction: column;
align-items: center;
}
.ct-split-actions {
justify-content: center;
}
.ct-split-visual {
max-width: 450px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.ct-split-title { font-size: 2.75rem; }
.ct-visual-main { width: 280px; left: 0; }
.ct-visual-overlay { width: 190px; right: 0; }
.ct-split-actions { flex-direction: column; width: 100%; gap: 1rem; }
.ct-split-actions .ct-btn { width: 100%; }
}
Forms
Playful Bubble Login
HTML
<div class="ct-login-card ct-surface">
<div class="ct-login-header">
<h2>Enter Atelier!</h2>
<p>Access your active bubbly creative workspace node.</p>
</div>
<form class="ct-login-form" onsubmit="return false;">
<div class="ct-form-group">
<label class="ct-label" for="login-email">Node Address</label>
<input type="email" id="login-email" class="ct-input" placeholder="[email protected]" required>
</div>
<div class="ct-form-group">
<label class="ct-label" for="login-password">Session Token</label>
<input type="password" id="login-password" class="ct-input" placeholder="••••••••" required>
</div>
<div class="ct-form-options">
<label class="ct-checkbox-container">
<input type="checkbox" checked>
<span class="ct-checkmark"></span>
<span class="ct-checkbox-label">Keep Node Active</span>
</label>
<a href="#" class="ct-forgot-link">Lost Token?</a>
</div>
<button type="submit" class="ct-btn ct-btn-primary ct-btn-block">Initialize Node!</button>
</form>
<div class="ct-login-divider">
<span>or sign in via key</span>
</div>
<div class="ct-social-login">
<button class="ct-btn ct-btn-circle ct-btn-outline" aria-label="Sign in with 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="ct-btn ct-btn-circle ct-btn-outline" aria-label="Sign in with 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: Playful Bubble Login */
/* NOTE: This component requires base.css to be included in your page. */
.ct-login-card {
max-width: 440px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.ct-login-header {
text-align: center;
margin-bottom: 2.5rem;
}
.ct-login-header h2 {
font-size: 2.25rem;
margin-bottom: 0.75rem;
}
.ct-login-header p {
font-size: 0.95rem;
color: var(--ct-text-muted);
font-weight: 600;
}
.ct-login-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.ct-form-group {
display: flex;
flex-direction: column;
}
.ct-form-options {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
margin-bottom: 0.5rem;
}
/* Custom Outlined Cartoon Checkbox */
.ct-checkbox-container {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
user-select: none;
gap: 0.6rem;
font-weight: 700;
color: var(--ct-text);
}
.ct-checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.ct-checkmark {
width: 20px;
height: 20px;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
display: inline-block;
position: relative;
transition: var(--ct-transition);
background-color: var(--ct-surface);
box-shadow: var(--ct-shadow-sm);
}
.ct-checkbox-container:hover input ~ .ct-checkmark {
transform: translate(-1px, -1px);
box-shadow: 4px 4px 0px #000000;
}
.ct-checkbox-container input:checked ~ .ct-checkmark {
background-color: var(--ct-primary);
}
.ct-checkmark:after {
content: "";
position: absolute;
display: none;
left: 5px;
top: 1px;
width: 4px;
height: 9px;
border: solid var(--ct-text);
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.ct-checkbox-container input:checked ~ .ct-checkmark:after {
display: block;
}
.ct-forgot-link {
color: var(--ct-accent);
text-decoration: none;
font-weight: 700;
transition: var(--ct-transition);
}
.ct-forgot-link:hover {
color: #ff335c;
transform: rotate(2deg) scale(1.05);
}
/* Divider */
.ct-login-divider {
text-align: center;
margin: 2rem 0;
position: relative;
}
.ct-login-divider:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: var(--ct-border-width);
background-color: var(--ct-border);
z-index: 1;
}
.ct-login-divider span {
background-color: var(--ct-surface);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
padding: 0.25rem 0.85rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--ct-text);
position: relative;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: var(--ct-shadow-sm);
}
/* Socials */
.ct-social-login {
display: flex;
justify-content: center;
gap: 1rem;
}
.ct-social-login .ct-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=Fredoka:wght@300;400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--ct-bg: #FFFDF9; /* Warm paper white */
--ct-bg-muted: #FFF8E7; /* Soft bubbly cream */
--ct-surface: #FFFFFF;
--ct-primary: #FFDE4D; /* Bubbly Yellow */
--ct-secondary: #38BDF8; /* Playful Blue */
--ct-accent: #FF6B8B; /* Coral Pink */
--ct-success: #4ADE80; /* Slime Green */
--ct-text: #000000;
--ct-text-muted: #4A4A4A;
--ct-text-light: #7A7A7A;
--ct-border: #000000;
--ct-border-width: 3px;
--ct-radius: 18px;
--ct-radius-lg: 26px;
--ct-radius-sm: 10px;
--ct-radius-full: 9999px;
--ct-font-heading: 'Fredoka', sans-serif;
--ct-font-body: 'Quicksand', sans-serif;
--ct-transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Snappy bouncy spring */
--ct-shadow: 4px 4px 0px #000000;
--ct-shadow-lg: 8px 8px 0px #000000;
--ct-shadow-sm: 2px 2px 0px #000000;
--ct-shadow-press: 1px 1px 0px #000000;
}
body {
margin: 0;
font-family: var(--ct-font-body);
color: var(--ct-text);
background-color: var(--ct-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.ct-surface {
background-color: var(--ct-surface);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius);
padding: 2.5rem;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
}
/* Global Logo */
.ct-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--ct-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--ct-text);
transition: var(--ct-transition);
}
.ct-logo:hover {
transform: rotate(-2deg) scale(1.05);
}
.ct-logo-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--ct-primary);
border: var(--ct-border-width) solid var(--ct-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ct-font-heading);
font-size: 1.2rem;
font-weight: 700;
box-shadow: var(--ct-shadow-sm);
}
/* Global Buttons */
.ct-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
gap: 0.5rem;
}
.ct-btn:active {
transform: translate(3px, 3px);
box-shadow: var(--ct-shadow-press);
}
.ct-btn-primary {
background-color: var(--ct-primary);
color: var(--ct-text);
}
.ct-btn-primary:hover {
background-color: #f7ce1b;
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-outline {
background-color: var(--ct-surface);
color: var(--ct-text);
}
.ct-btn-outline:hover {
background-color: var(--ct-bg-muted);
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-ghost {
background-color: transparent;
color: var(--ct-text);
border-color: transparent;
box-shadow: none;
}
.ct-btn-ghost:hover {
background-color: var(--ct-bg-muted);
border-color: var(--ct-border);
box-shadow: var(--ct-shadow-sm);
}
.ct-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50% !important;
}
.ct-btn-block {
width: 100%;
}
/* Form Fields */
.ct-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
font-family: var(--ct-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--ct-text);
background-color: var(--ct-surface);
outline: none;
box-shadow: var(--ct-shadow-sm);
transition: var(--ct-transition);
}
.ct-input::placeholder {
color: var(--ct-text-light);
}
.ct-input:focus {
background-color: var(--ct-bg-muted);
box-shadow: var(--ct-shadow);
}
.ct-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
color: var(--ct-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ct-font-heading);
font-weight: 700;
margin: 0;
color: var(--ct-text);
line-height: 1.2;
}
p {
font-family: var(--ct-font-body);
font-weight: 600;
line-height: 1.6;
margin: 0;
color: var(--ct-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-yellow { color: var(--ct-primary) !important; }
.text-blue { color: var(--ct-secondary) !important; }
.text-pink { color: var(--ct-accent) !important; }
.text-muted { color: var(--ct-text-muted) !important; }
.bg-paper { background-color: var(--ct-bg) !important; }
.bg-cream { background-color: var(--ct-bg-muted) !important; }
.bg-blue { background-color: var(--ct-secondary) !important; }
.bg-pink { background-color: var(--ct-accent) !important; }
.bg-green { background-color: var(--ct-success) !important; }
/* --- COMPONENT STYLES --- */
.ct-login-card {
max-width: 440px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.ct-login-header {
text-align: center;
margin-bottom: 2.5rem;
}
.ct-login-header h2 {
font-size: 2.25rem;
margin-bottom: 0.75rem;
}
.ct-login-header p {
font-size: 0.95rem;
color: var(--ct-text-muted);
font-weight: 600;
}
.ct-login-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.ct-form-group {
display: flex;
flex-direction: column;
}
.ct-form-options {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
margin-bottom: 0.5rem;
}
/* Custom Outlined Cartoon Checkbox */
.ct-checkbox-container {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
user-select: none;
gap: 0.6rem;
font-weight: 700;
color: var(--ct-text);
}
.ct-checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.ct-checkmark {
width: 20px;
height: 20px;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
display: inline-block;
position: relative;
transition: var(--ct-transition);
background-color: var(--ct-surface);
box-shadow: var(--ct-shadow-sm);
}
.ct-checkbox-container:hover input ~ .ct-checkmark {
transform: translate(-1px, -1px);
box-shadow: 4px 4px 0px #000000;
}
.ct-checkbox-container input:checked ~ .ct-checkmark {
background-color: var(--ct-primary);
}
.ct-checkmark:after {
content: "";
position: absolute;
display: none;
left: 5px;
top: 1px;
width: 4px;
height: 9px;
border: solid var(--ct-text);
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.ct-checkbox-container input:checked ~ .ct-checkmark:after {
display: block;
}
.ct-forgot-link {
color: var(--ct-accent);
text-decoration: none;
font-weight: 700;
transition: var(--ct-transition);
}
.ct-forgot-link:hover {
color: #ff335c;
transform: rotate(2deg) scale(1.05);
}
/* Divider */
.ct-login-divider {
text-align: center;
margin: 2rem 0;
position: relative;
}
.ct-login-divider:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: var(--ct-border-width);
background-color: var(--ct-border);
z-index: 1;
}
.ct-login-divider span {
background-color: var(--ct-surface);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
padding: 0.25rem 0.85rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--ct-text);
position: relative;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: var(--ct-shadow-sm);
}
/* Socials */
.ct-social-login {
display: flex;
justify-content: center;
gap: 1rem;
}
.ct-social-login .ct-btn-circle svg {
display: block;
}
Bubbly Settings Form
HTML
<div class="ct-settings-card ct-surface">
<div class="ct-settings-header">
<h3>Atelier Profile</h3>
<p class="ct-settings-subtitle">Manage public information and dynamic node preferences.</p>
</div>
<form class="ct-settings-form" onsubmit="return false;">
<div class="ct-form-row">
<div class="ct-form-group">
<label class="ct-label" for="settings-first">First Name</label>
<input type="text" id="settings-first" class="ct-input" value="Alex">
</div>
<div class="ct-form-group">
<label class="ct-label" for="settings-last">Last Name</label>
<input type="text" id="settings-last" class="ct-input" value="Moreau">
</div>
</div>
<div class="ct-form-group">
<label class="ct-label" for="settings-email">Node Address</label>
<input type="email" id="settings-email" class="ct-input" value="[email protected]">
</div>
<div class="ct-form-group">
<label class="ct-label" for="settings-bio">Biography</label>
<textarea id="settings-bio" class="ct-input ct-textarea" rows="4">Curator of high-performance spatial engines and dynamic network nodes. Designed using Fredoka and Quicksand.</textarea>
</div>
<hr class="ct-divider-line">
<div class="ct-toggle-group">
<div class="ct-toggle-text">
<h4>Dynamic Cartoon Highlights</h4>
<p>Inject rich solid cartoon yellow and pink offsets into background elements.</p>
</div>
<label class="ct-toggle">
<input type="checkbox" checked>
<span class="ct-slider"></span>
</label>
</div>
<div class="ct-settings-actions">
<button type="button" class="ct-btn ct-btn-outline">Reset Changes</button>
<button type="submit" class="ct-btn ct-btn-primary">Save Configurations!</button>
</div>
</form>
</div>
CSS (Component Only)
/* Component: Bubbly Settings Form */
/* NOTE: This component requires base.css to be included in your page. */
.ct-settings-card {
max-width: 600px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.ct-settings-header {
margin-bottom: 2.5rem;
}
.ct-settings-header h3 {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.ct-settings-subtitle {
font-size: 0.95rem;
color: var(--ct-text-muted);
font-weight: 600;
}
.ct-settings-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.ct-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.ct-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
.ct-divider-line {
border: 0;
height: var(--ct-border-width);
background-color: var(--ct-border);
margin: 0.75rem 0;
}
/* Custom Bouncy Toggle Switch */
.ct-toggle-group {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.ct-toggle-text h4 {
font-family: var(--ct-font-heading);
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.ct-toggle-text p {
font-size: 0.85rem;
color: var(--ct-text-muted);
font-weight: 600;
}
.ct-toggle {
position: relative;
display: inline-block;
width: 54px;
height: 30px;
flex-shrink: 0;
}
.ct-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.ct-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--ct-surface);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: 34px;
transition: var(--ct-transition);
box-shadow: var(--ct-shadow-sm);
}
.ct-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: var(--ct-border);
border-radius: 50%;
transition: var(--ct-transition);
}
.ct-toggle input:checked + .ct-slider {
background-color: var(--ct-success);
}
.ct-toggle input:checked + .ct-slider:before {
background-color: var(--ct-surface);
transform: translateX(22px);
border: 2px solid var(--ct-border);
}
.ct-settings-actions {
display: flex;
justify-content: flex-end;
gap: 1.5rem;
margin-top: 1rem;
}
@media (max-width: 600px) {
.ct-form-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ct-settings-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.ct-settings-actions .ct-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=Fredoka:wght@300;400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--ct-bg: #FFFDF9; /* Warm paper white */
--ct-bg-muted: #FFF8E7; /* Soft bubbly cream */
--ct-surface: #FFFFFF;
--ct-primary: #FFDE4D; /* Bubbly Yellow */
--ct-secondary: #38BDF8; /* Playful Blue */
--ct-accent: #FF6B8B; /* Coral Pink */
--ct-success: #4ADE80; /* Slime Green */
--ct-text: #000000;
--ct-text-muted: #4A4A4A;
--ct-text-light: #7A7A7A;
--ct-border: #000000;
--ct-border-width: 3px;
--ct-radius: 18px;
--ct-radius-lg: 26px;
--ct-radius-sm: 10px;
--ct-radius-full: 9999px;
--ct-font-heading: 'Fredoka', sans-serif;
--ct-font-body: 'Quicksand', sans-serif;
--ct-transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Snappy bouncy spring */
--ct-shadow: 4px 4px 0px #000000;
--ct-shadow-lg: 8px 8px 0px #000000;
--ct-shadow-sm: 2px 2px 0px #000000;
--ct-shadow-press: 1px 1px 0px #000000;
}
body {
margin: 0;
font-family: var(--ct-font-body);
color: var(--ct-text);
background-color: var(--ct-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.ct-surface {
background-color: var(--ct-surface);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius);
padding: 2.5rem;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
}
/* Global Logo */
.ct-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--ct-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--ct-text);
transition: var(--ct-transition);
}
.ct-logo:hover {
transform: rotate(-2deg) scale(1.05);
}
.ct-logo-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--ct-primary);
border: var(--ct-border-width) solid var(--ct-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ct-font-heading);
font-size: 1.2rem;
font-weight: 700;
box-shadow: var(--ct-shadow-sm);
}
/* Global Buttons */
.ct-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
gap: 0.5rem;
}
.ct-btn:active {
transform: translate(3px, 3px);
box-shadow: var(--ct-shadow-press);
}
.ct-btn-primary {
background-color: var(--ct-primary);
color: var(--ct-text);
}
.ct-btn-primary:hover {
background-color: #f7ce1b;
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-outline {
background-color: var(--ct-surface);
color: var(--ct-text);
}
.ct-btn-outline:hover {
background-color: var(--ct-bg-muted);
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-ghost {
background-color: transparent;
color: var(--ct-text);
border-color: transparent;
box-shadow: none;
}
.ct-btn-ghost:hover {
background-color: var(--ct-bg-muted);
border-color: var(--ct-border);
box-shadow: var(--ct-shadow-sm);
}
.ct-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50% !important;
}
.ct-btn-block {
width: 100%;
}
/* Form Fields */
.ct-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
font-family: var(--ct-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--ct-text);
background-color: var(--ct-surface);
outline: none;
box-shadow: var(--ct-shadow-sm);
transition: var(--ct-transition);
}
.ct-input::placeholder {
color: var(--ct-text-light);
}
.ct-input:focus {
background-color: var(--ct-bg-muted);
box-shadow: var(--ct-shadow);
}
.ct-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
color: var(--ct-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ct-font-heading);
font-weight: 700;
margin: 0;
color: var(--ct-text);
line-height: 1.2;
}
p {
font-family: var(--ct-font-body);
font-weight: 600;
line-height: 1.6;
margin: 0;
color: var(--ct-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-yellow { color: var(--ct-primary) !important; }
.text-blue { color: var(--ct-secondary) !important; }
.text-pink { color: var(--ct-accent) !important; }
.text-muted { color: var(--ct-text-muted) !important; }
.bg-paper { background-color: var(--ct-bg) !important; }
.bg-cream { background-color: var(--ct-bg-muted) !important; }
.bg-blue { background-color: var(--ct-secondary) !important; }
.bg-pink { background-color: var(--ct-accent) !important; }
.bg-green { background-color: var(--ct-success) !important; }
/* --- COMPONENT STYLES --- */
.ct-settings-card {
max-width: 600px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.ct-settings-header {
margin-bottom: 2.5rem;
}
.ct-settings-header h3 {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.ct-settings-subtitle {
font-size: 0.95rem;
color: var(--ct-text-muted);
font-weight: 600;
}
.ct-settings-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.ct-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.ct-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
.ct-divider-line {
border: 0;
height: var(--ct-border-width);
background-color: var(--ct-border);
margin: 0.75rem 0;
}
/* Custom Bouncy Toggle Switch */
.ct-toggle-group {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.ct-toggle-text h4 {
font-family: var(--ct-font-heading);
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.ct-toggle-text p {
font-size: 0.85rem;
color: var(--ct-text-muted);
font-weight: 600;
}
.ct-toggle {
position: relative;
display: inline-block;
width: 54px;
height: 30px;
flex-shrink: 0;
}
.ct-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.ct-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--ct-surface);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: 34px;
transition: var(--ct-transition);
box-shadow: var(--ct-shadow-sm);
}
.ct-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: var(--ct-border);
border-radius: 50%;
transition: var(--ct-transition);
}
.ct-toggle input:checked + .ct-slider {
background-color: var(--ct-success);
}
.ct-toggle input:checked + .ct-slider:before {
background-color: var(--ct-surface);
transform: translateX(22px);
border: 2px solid var(--ct-border);
}
.ct-settings-actions {
display: flex;
justify-content: flex-end;
gap: 1.5rem;
margin-top: 1rem;
}
@media (max-width: 600px) {
.ct-form-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ct-settings-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.ct-settings-actions .ct-btn {
width: 100%;
}
}
Cards
Bubbly Metrics Cards
HTML
<div class="ct-stats-grid">
<div class="ct-stat-card ct-surface bg-cream">
<div class="ct-stat-header">
<span class="ct-stat-title text-pink">Cluster Nodes</span>
<div class="ct-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"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
</div>
</div>
<div class="ct-stat-value text-blue">1,480</div>
<div class="ct-stat-footer">
<span class="ct-trend-indicator up text-green">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="3" fill="none"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
+12.4%
</span>
<span class="ct-trend-label">Active clusters</span>
</div>
</div>
<div class="ct-stat-card ct-surface" style="background-color: #FFF0F5;">
<div class="ct-stat-header">
<span class="ct-stat-title text-blue">Data Stream</span>
<div class="ct-stat-icon text-blue">
<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="ct-stat-value text-pink">94.8 GB/s</div>
<div class="ct-stat-footer">
<span class="ct-trend-indicator up text-green">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="3" fill="none"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
+8.2%
</span>
<span class="ct-trend-label">Stream velocity</span>
</div>
</div>
<div class="ct-stat-card ct-surface" style="background-color: #E0F2FE;">
<div class="ct-stat-header">
<span class="ct-stat-title text-pink">Network Health</span>
<div class="ct-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="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
</div>
</div>
<div class="ct-stat-value text-yellow" style="color: #c49902 !important;">99.98%</div>
<div class="ct-stat-footer">
<span class="ct-trend-indicator up text-blue">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="3" fill="none"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
Optimal
</span>
<span class="ct-trend-label">Node status uptime</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Bubbly Metrics Cards */
/* NOTE: This component requires base.css to be included in your page. */
.ct-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.ct-stat-card {
display: flex;
flex-direction: column;
padding: 2.25rem !important;
}
.ct-stat-card:hover {
transform: translate(-3px, -3px);
box-shadow: 8px 8px 0px #000000;
}
.ct-stat-card:active {
transform: translate(3px, 3px);
box-shadow: var(--ct-shadow-press);
}
.ct-stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.ct-stat-title {
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ct-stat-icon {
display: flex;
align-items: center;
justify-content: center;
}
.ct-stat-value {
font-family: var(--ct-font-heading);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1;
}
.ct-stat-footer {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.85rem;
font-weight: 600;
}
.ct-trend-indicator {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-weight: 700;
}
.ct-trend-label {
color: var(--ct-text-muted);
}
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=Fredoka:wght@300;400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--ct-bg: #FFFDF9; /* Warm paper white */
--ct-bg-muted: #FFF8E7; /* Soft bubbly cream */
--ct-surface: #FFFFFF;
--ct-primary: #FFDE4D; /* Bubbly Yellow */
--ct-secondary: #38BDF8; /* Playful Blue */
--ct-accent: #FF6B8B; /* Coral Pink */
--ct-success: #4ADE80; /* Slime Green */
--ct-text: #000000;
--ct-text-muted: #4A4A4A;
--ct-text-light: #7A7A7A;
--ct-border: #000000;
--ct-border-width: 3px;
--ct-radius: 18px;
--ct-radius-lg: 26px;
--ct-radius-sm: 10px;
--ct-radius-full: 9999px;
--ct-font-heading: 'Fredoka', sans-serif;
--ct-font-body: 'Quicksand', sans-serif;
--ct-transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Snappy bouncy spring */
--ct-shadow: 4px 4px 0px #000000;
--ct-shadow-lg: 8px 8px 0px #000000;
--ct-shadow-sm: 2px 2px 0px #000000;
--ct-shadow-press: 1px 1px 0px #000000;
}
body {
margin: 0;
font-family: var(--ct-font-body);
color: var(--ct-text);
background-color: var(--ct-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.ct-surface {
background-color: var(--ct-surface);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius);
padding: 2.5rem;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
}
/* Global Logo */
.ct-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--ct-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--ct-text);
transition: var(--ct-transition);
}
.ct-logo:hover {
transform: rotate(-2deg) scale(1.05);
}
.ct-logo-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--ct-primary);
border: var(--ct-border-width) solid var(--ct-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ct-font-heading);
font-size: 1.2rem;
font-weight: 700;
box-shadow: var(--ct-shadow-sm);
}
/* Global Buttons */
.ct-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
gap: 0.5rem;
}
.ct-btn:active {
transform: translate(3px, 3px);
box-shadow: var(--ct-shadow-press);
}
.ct-btn-primary {
background-color: var(--ct-primary);
color: var(--ct-text);
}
.ct-btn-primary:hover {
background-color: #f7ce1b;
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-outline {
background-color: var(--ct-surface);
color: var(--ct-text);
}
.ct-btn-outline:hover {
background-color: var(--ct-bg-muted);
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-ghost {
background-color: transparent;
color: var(--ct-text);
border-color: transparent;
box-shadow: none;
}
.ct-btn-ghost:hover {
background-color: var(--ct-bg-muted);
border-color: var(--ct-border);
box-shadow: var(--ct-shadow-sm);
}
.ct-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50% !important;
}
.ct-btn-block {
width: 100%;
}
/* Form Fields */
.ct-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
font-family: var(--ct-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--ct-text);
background-color: var(--ct-surface);
outline: none;
box-shadow: var(--ct-shadow-sm);
transition: var(--ct-transition);
}
.ct-input::placeholder {
color: var(--ct-text-light);
}
.ct-input:focus {
background-color: var(--ct-bg-muted);
box-shadow: var(--ct-shadow);
}
.ct-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
color: var(--ct-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ct-font-heading);
font-weight: 700;
margin: 0;
color: var(--ct-text);
line-height: 1.2;
}
p {
font-family: var(--ct-font-body);
font-weight: 600;
line-height: 1.6;
margin: 0;
color: var(--ct-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-yellow { color: var(--ct-primary) !important; }
.text-blue { color: var(--ct-secondary) !important; }
.text-pink { color: var(--ct-accent) !important; }
.text-muted { color: var(--ct-text-muted) !important; }
.bg-paper { background-color: var(--ct-bg) !important; }
.bg-cream { background-color: var(--ct-bg-muted) !important; }
.bg-blue { background-color: var(--ct-secondary) !important; }
.bg-pink { background-color: var(--ct-accent) !important; }
.bg-green { background-color: var(--ct-success) !important; }
/* --- COMPONENT STYLES --- */
.ct-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.ct-stat-card {
display: flex;
flex-direction: column;
padding: 2.25rem !important;
}
.ct-stat-card:hover {
transform: translate(-3px, -3px);
box-shadow: 8px 8px 0px #000000;
}
.ct-stat-card:active {
transform: translate(3px, 3px);
box-shadow: var(--ct-shadow-press);
}
.ct-stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.ct-stat-title {
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ct-stat-icon {
display: flex;
align-items: center;
justify-content: center;
}
.ct-stat-value {
font-family: var(--ct-font-heading);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1;
}
.ct-stat-footer {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.85rem;
font-weight: 600;
}
.ct-trend-indicator {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-weight: 700;
}
.ct-trend-label {
color: var(--ct-text-muted);
}
Cartoon Pricing Tier
HTML
<div class="ct-pricing-card ct-surface bg-cream">
<div class="ct-pricing-header">
<h3 class="ct-pricing-title">Atelier Resident!</h3>
<p class="ct-pricing-desc">Hyper-interactive spatial assets designed for active developers.</p>
<div class="ct-pricing-price">
<span class="ct-currency">$</span>
<span class="ct-amount text-pink">89</span>
<span class="ct-period">/mo</span>
</div>
</div>
<div class="ct-pricing-features">
<ul>
<li>
<div class="ct-bullet bg-blue"></div>
Infinite Curated Workspaces
</li>
<li>
<div class="ct-bullet bg-blue"></div>
Studio Spatial Subdomains
</li>
<li>
<div class="ct-bullet bg-blue"></div>
100% Volumetric Control
</li>
<li class="ct-feature-disabled">
<div class="ct-bullet" style="background-color: var(--ct-text-light);"></div>
Personal Curation Director
</li>
</ul>
</div>
<div class="ct-pricing-footer">
<button class="ct-btn ct-btn-primary ct-btn-block">Initialize Atelier!</button>
</div>
</div>
CSS (Component Only)
/* Component: Cartoon Pricing Tier */
/* NOTE: This component requires base.css to be included in your page. */
.ct-pricing-card {
max-width: 380px;
margin: 2rem auto;
padding: 3.5rem 2.5rem 2.5rem;
position: relative;
}
.ct-pricing-card:hover {
transform: translate(-3px, -3px);
box-shadow: var(--ct-shadow-lg);
}
.ct-pricing-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: var(--ct-border-width) solid var(--ct-border);
}
.ct-pricing-title {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.ct-pricing-desc {
font-size: 0.9rem;
color: var(--ct-text-muted);
margin-bottom: 2rem;
line-height: 1.6;
font-weight: 600;
}
.ct-pricing-price {
display: flex;
align-items: flex-end;
justify-content: center;
color: var(--ct-text);
}
.ct-currency {
font-family: var(--ct-font-heading);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.4rem;
margin-right: 0.2rem;
color: var(--ct-accent);
}
.ct-amount {
font-family: var(--ct-font-heading);
font-size: 3.75rem;
font-weight: 700;
line-height: 1;
}
.ct-period {
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ct-text-muted);
margin-bottom: 0.4rem;
margin-left: 0.2rem;
}
.ct-pricing-features ul {
list-style: none;
padding: 0;
margin: 0 0 2.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ct-pricing-features li {
display: flex;
align-items: center;
gap: 0.85rem;
font-size: 0.95rem;
color: var(--ct-text);
font-weight: 700;
}
.ct-bullet {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid var(--ct-border);
flex-shrink: 0;
box-shadow: var(--ct-shadow-sm);
}
.ct-feature-disabled {
color: var(--ct-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=Fredoka:wght@300;400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--ct-bg: #FFFDF9; /* Warm paper white */
--ct-bg-muted: #FFF8E7; /* Soft bubbly cream */
--ct-surface: #FFFFFF;
--ct-primary: #FFDE4D; /* Bubbly Yellow */
--ct-secondary: #38BDF8; /* Playful Blue */
--ct-accent: #FF6B8B; /* Coral Pink */
--ct-success: #4ADE80; /* Slime Green */
--ct-text: #000000;
--ct-text-muted: #4A4A4A;
--ct-text-light: #7A7A7A;
--ct-border: #000000;
--ct-border-width: 3px;
--ct-radius: 18px;
--ct-radius-lg: 26px;
--ct-radius-sm: 10px;
--ct-radius-full: 9999px;
--ct-font-heading: 'Fredoka', sans-serif;
--ct-font-body: 'Quicksand', sans-serif;
--ct-transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Snappy bouncy spring */
--ct-shadow: 4px 4px 0px #000000;
--ct-shadow-lg: 8px 8px 0px #000000;
--ct-shadow-sm: 2px 2px 0px #000000;
--ct-shadow-press: 1px 1px 0px #000000;
}
body {
margin: 0;
font-family: var(--ct-font-body);
color: var(--ct-text);
background-color: var(--ct-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.ct-surface {
background-color: var(--ct-surface);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius);
padding: 2.5rem;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
}
/* Global Logo */
.ct-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--ct-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--ct-text);
transition: var(--ct-transition);
}
.ct-logo:hover {
transform: rotate(-2deg) scale(1.05);
}
.ct-logo-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--ct-primary);
border: var(--ct-border-width) solid var(--ct-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ct-font-heading);
font-size: 1.2rem;
font-weight: 700;
box-shadow: var(--ct-shadow-sm);
}
/* Global Buttons */
.ct-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
gap: 0.5rem;
}
.ct-btn:active {
transform: translate(3px, 3px);
box-shadow: var(--ct-shadow-press);
}
.ct-btn-primary {
background-color: var(--ct-primary);
color: var(--ct-text);
}
.ct-btn-primary:hover {
background-color: #f7ce1b;
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-outline {
background-color: var(--ct-surface);
color: var(--ct-text);
}
.ct-btn-outline:hover {
background-color: var(--ct-bg-muted);
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-ghost {
background-color: transparent;
color: var(--ct-text);
border-color: transparent;
box-shadow: none;
}
.ct-btn-ghost:hover {
background-color: var(--ct-bg-muted);
border-color: var(--ct-border);
box-shadow: var(--ct-shadow-sm);
}
.ct-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50% !important;
}
.ct-btn-block {
width: 100%;
}
/* Form Fields */
.ct-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
font-family: var(--ct-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--ct-text);
background-color: var(--ct-surface);
outline: none;
box-shadow: var(--ct-shadow-sm);
transition: var(--ct-transition);
}
.ct-input::placeholder {
color: var(--ct-text-light);
}
.ct-input:focus {
background-color: var(--ct-bg-muted);
box-shadow: var(--ct-shadow);
}
.ct-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
color: var(--ct-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ct-font-heading);
font-weight: 700;
margin: 0;
color: var(--ct-text);
line-height: 1.2;
}
p {
font-family: var(--ct-font-body);
font-weight: 600;
line-height: 1.6;
margin: 0;
color: var(--ct-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-yellow { color: var(--ct-primary) !important; }
.text-blue { color: var(--ct-secondary) !important; }
.text-pink { color: var(--ct-accent) !important; }
.text-muted { color: var(--ct-text-muted) !important; }
.bg-paper { background-color: var(--ct-bg) !important; }
.bg-cream { background-color: var(--ct-bg-muted) !important; }
.bg-blue { background-color: var(--ct-secondary) !important; }
.bg-pink { background-color: var(--ct-accent) !important; }
.bg-green { background-color: var(--ct-success) !important; }
/* --- COMPONENT STYLES --- */
.ct-pricing-card {
max-width: 380px;
margin: 2rem auto;
padding: 3.5rem 2.5rem 2.5rem;
position: relative;
}
.ct-pricing-card:hover {
transform: translate(-3px, -3px);
box-shadow: var(--ct-shadow-lg);
}
.ct-pricing-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: var(--ct-border-width) solid var(--ct-border);
}
.ct-pricing-title {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.ct-pricing-desc {
font-size: 0.9rem;
color: var(--ct-text-muted);
margin-bottom: 2rem;
line-height: 1.6;
font-weight: 600;
}
.ct-pricing-price {
display: flex;
align-items: flex-end;
justify-content: center;
color: var(--ct-text);
}
.ct-currency {
font-family: var(--ct-font-heading);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.4rem;
margin-right: 0.2rem;
color: var(--ct-accent);
}
.ct-amount {
font-family: var(--ct-font-heading);
font-size: 3.75rem;
font-weight: 700;
line-height: 1;
}
.ct-period {
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ct-text-muted);
margin-bottom: 0.4rem;
margin-left: 0.2rem;
}
.ct-pricing-features ul {
list-style: none;
padding: 0;
margin: 0 0 2.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ct-pricing-features li {
display: flex;
align-items: center;
gap: 0.85rem;
font-size: 0.95rem;
color: var(--ct-text);
font-weight: 700;
}
.ct-bullet {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid var(--ct-border);
flex-shrink: 0;
box-shadow: var(--ct-shadow-sm);
}
.ct-feature-disabled {
color: var(--ct-text-light) !important;
text-decoration: line-through;
opacity: 0.6;
}
Tables
Bubbly Grid Data Table
HTML
<div class="ct-table-wrapper ct-surface bg-cream">
<div class="ct-table-header">
<h3>Atelier Cluster Catalog</h3>
<button class="ct-btn ct-btn-outline" style="padding: 0.5rem 1.5rem; font-size: 0.75rem; box-shadow: var(--ct-shadow-sm);">Export Sheet</button>
</div>
<div class="ct-table-container">
<table class="ct-table">
<thead>
<tr>
<th>Ledger ID</th>
<th>Artist / Curator</th>
<th>Date Curated</th>
<th>Focal Scale</th>
<th>Spatial Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>#AT-9021</td>
<td>
<div class="ct-table-user">
<div class="ct-table-avatar bg-pink">MC</div>
<span>Michael Chen</span>
</div>
</td>
<td>18 May 2026</td>
<td class="text-pink">12,500 PX</td>
<td><span class="ct-status status-active">ACTIVE</span></td>
</tr>
<tr>
<td>#AT-9022</td>
<td>
<div class="ct-table-user">
<div class="ct-table-avatar bg-blue">CD</div>
<span>Clara Dupont</span>
</div>
</td>
<td>18 May 2026</td>
<td class="text-pink">2,800 PX</td>
<td><span class="ct-status status-pending">PENDING</span></td>
</tr>
<tr>
<td>#AT-9023</td>
<td>
<div class="ct-table-user">
<div class="ct-table-avatar bg-yellow">DS</div>
<span>David Smith</span>
</div>
</td>
<td>17 May 2026</td>
<td class="text-pink">9,450 PX</td>
<td><span class="ct-status status-active">ACTIVE</span></td>
</tr>
<tr>
<td>#AT-9024</td>
<td>
<div class="ct-table-user">
<div class="ct-table-avatar bg-green">ED</div>
<span>Emily Davis</span>
</div>
</td>
<td>16 May 2026</td>
<td class="text-pink">1,200 PX</td>
<td><span class="ct-status status-inactive">ARCHIVED</span></td>
</tr>
</tbody>
</table>
</div>
<div class="ct-table-pagination">
<span class="text-muted" style="font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;">Showing 1 to 4 of 48 records</span>
<div class="ct-pagination-controls">
<button class="ct-btn ct-btn-ghost" disabled style="padding: 0.4rem 1rem; font-size: 0.75rem; box-shadow: none;">Prev</button>
<button class="ct-btn ct-btn-primary" style="padding: 0.4rem 1rem; font-size: 0.75rem; min-width: 32px; height: 32px; box-shadow: var(--ct-shadow-sm);">1</button>
<button class="ct-btn ct-btn-ghost" style="padding: 0.4rem 1rem; font-size: 0.75rem; min-width: 32px; height: 32px; box-shadow: none;">2</button>
<button class="ct-btn ct-btn-ghost" style="padding: 0.4rem 1rem; font-size: 0.75rem; min-width: 32px; height: 32px; box-shadow: none;">3</button>
<button class="ct-btn ct-btn-ghost" style="padding: 0.4rem 1rem; font-size: 0.75rem; box-shadow: none;">Next</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Bubbly Grid Data Table */
/* NOTE: This component requires base.css to be included in your page. */
.ct-table-wrapper {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.ct-table-header {
padding: 2rem 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--ct-border-width) solid var(--ct-border);
background-color: var(--ct-surface);
}
.ct-table-header h3 {
margin: 0;
font-size: 1.5rem;
}
.ct-table-container {
width: 100%;
overflow-x: auto;
}
.ct-table {
width: 100%;
border-collapse: collapse;
min-width: 700px;
}
.ct-table th {
text-align: left;
padding: 1.25rem 2.5rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.85rem;
color: var(--ct-text);
background-color: var(--ct-bg-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: var(--ct-border-width) solid var(--ct-border);
}
.ct-table td {
padding: 1.25rem 2.5rem;
font-size: 0.9rem;
border-bottom: var(--ct-border-width) solid var(--ct-border);
color: var(--ct-text);
vertical-align: middle;
background-color: var(--ct-surface);
font-weight: 700;
transition: var(--ct-transition);
}
.ct-table tbody tr:last-child td {
border-bottom: none;
}
.ct-table tbody tr:hover td {
background-color: var(--ct-bg-muted);
}
.ct-table-user {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ct-table-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--ct-border);
color: var(--ct-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ct-font-heading);
font-size: 0.75rem;
font-weight: 700;
box-shadow: var(--ct-shadow-sm);
flex-shrink: 0;
}
.ct-status {
padding: 0.35rem 0.85rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.05em;
border-radius: var(--ct-radius-full);
display: inline-block;
border: 2px solid var(--ct-border);
box-shadow: var(--ct-shadow-sm);
}
.status-active {
background-color: var(--ct-success);
color: var(--ct-text);
}
.status-pending {
background-color: var(--ct-primary);
color: var(--ct-text);
}
.status-inactive {
background-color: var(--ct-surface);
color: var(--ct-text-light);
}
.ct-table-pagination {
padding: 1.75rem 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-top: var(--ct-border-width) solid var(--ct-border);
background-color: var(--ct-surface);
}
.ct-pagination-controls {
display: flex;
gap: 0.5rem;
align-items: center;
}
@media (max-width: 768px) {
.ct-table-header { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.ct-table-pagination { flex-direction: column; gap: 1.25rem; text-align: center; }
}
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=Fredoka:wght@300;400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--ct-bg: #FFFDF9; /* Warm paper white */
--ct-bg-muted: #FFF8E7; /* Soft bubbly cream */
--ct-surface: #FFFFFF;
--ct-primary: #FFDE4D; /* Bubbly Yellow */
--ct-secondary: #38BDF8; /* Playful Blue */
--ct-accent: #FF6B8B; /* Coral Pink */
--ct-success: #4ADE80; /* Slime Green */
--ct-text: #000000;
--ct-text-muted: #4A4A4A;
--ct-text-light: #7A7A7A;
--ct-border: #000000;
--ct-border-width: 3px;
--ct-radius: 18px;
--ct-radius-lg: 26px;
--ct-radius-sm: 10px;
--ct-radius-full: 9999px;
--ct-font-heading: 'Fredoka', sans-serif;
--ct-font-body: 'Quicksand', sans-serif;
--ct-transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Snappy bouncy spring */
--ct-shadow: 4px 4px 0px #000000;
--ct-shadow-lg: 8px 8px 0px #000000;
--ct-shadow-sm: 2px 2px 0px #000000;
--ct-shadow-press: 1px 1px 0px #000000;
}
body {
margin: 0;
font-family: var(--ct-font-body);
color: var(--ct-text);
background-color: var(--ct-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.ct-surface {
background-color: var(--ct-surface);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius);
padding: 2.5rem;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
}
/* Global Logo */
.ct-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--ct-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--ct-text);
transition: var(--ct-transition);
}
.ct-logo:hover {
transform: rotate(-2deg) scale(1.05);
}
.ct-logo-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--ct-primary);
border: var(--ct-border-width) solid var(--ct-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ct-font-heading);
font-size: 1.2rem;
font-weight: 700;
box-shadow: var(--ct-shadow-sm);
}
/* Global Buttons */
.ct-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
gap: 0.5rem;
}
.ct-btn:active {
transform: translate(3px, 3px);
box-shadow: var(--ct-shadow-press);
}
.ct-btn-primary {
background-color: var(--ct-primary);
color: var(--ct-text);
}
.ct-btn-primary:hover {
background-color: #f7ce1b;
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-outline {
background-color: var(--ct-surface);
color: var(--ct-text);
}
.ct-btn-outline:hover {
background-color: var(--ct-bg-muted);
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-ghost {
background-color: transparent;
color: var(--ct-text);
border-color: transparent;
box-shadow: none;
}
.ct-btn-ghost:hover {
background-color: var(--ct-bg-muted);
border-color: var(--ct-border);
box-shadow: var(--ct-shadow-sm);
}
.ct-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50% !important;
}
.ct-btn-block {
width: 100%;
}
/* Form Fields */
.ct-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
font-family: var(--ct-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--ct-text);
background-color: var(--ct-surface);
outline: none;
box-shadow: var(--ct-shadow-sm);
transition: var(--ct-transition);
}
.ct-input::placeholder {
color: var(--ct-text-light);
}
.ct-input:focus {
background-color: var(--ct-bg-muted);
box-shadow: var(--ct-shadow);
}
.ct-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
color: var(--ct-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ct-font-heading);
font-weight: 700;
margin: 0;
color: var(--ct-text);
line-height: 1.2;
}
p {
font-family: var(--ct-font-body);
font-weight: 600;
line-height: 1.6;
margin: 0;
color: var(--ct-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-yellow { color: var(--ct-primary) !important; }
.text-blue { color: var(--ct-secondary) !important; }
.text-pink { color: var(--ct-accent) !important; }
.text-muted { color: var(--ct-text-muted) !important; }
.bg-paper { background-color: var(--ct-bg) !important; }
.bg-cream { background-color: var(--ct-bg-muted) !important; }
.bg-blue { background-color: var(--ct-secondary) !important; }
.bg-pink { background-color: var(--ct-accent) !important; }
.bg-green { background-color: var(--ct-success) !important; }
/* --- COMPONENT STYLES --- */
.ct-table-wrapper {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.ct-table-header {
padding: 2rem 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--ct-border-width) solid var(--ct-border);
background-color: var(--ct-surface);
}
.ct-table-header h3 {
margin: 0;
font-size: 1.5rem;
}
.ct-table-container {
width: 100%;
overflow-x: auto;
}
.ct-table {
width: 100%;
border-collapse: collapse;
min-width: 700px;
}
.ct-table th {
text-align: left;
padding: 1.25rem 2.5rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.85rem;
color: var(--ct-text);
background-color: var(--ct-bg-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: var(--ct-border-width) solid var(--ct-border);
}
.ct-table td {
padding: 1.25rem 2.5rem;
font-size: 0.9rem;
border-bottom: var(--ct-border-width) solid var(--ct-border);
color: var(--ct-text);
vertical-align: middle;
background-color: var(--ct-surface);
font-weight: 700;
transition: var(--ct-transition);
}
.ct-table tbody tr:last-child td {
border-bottom: none;
}
.ct-table tbody tr:hover td {
background-color: var(--ct-bg-muted);
}
.ct-table-user {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ct-table-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--ct-border);
color: var(--ct-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ct-font-heading);
font-size: 0.75rem;
font-weight: 700;
box-shadow: var(--ct-shadow-sm);
flex-shrink: 0;
}
.ct-status {
padding: 0.35rem 0.85rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.05em;
border-radius: var(--ct-radius-full);
display: inline-block;
border: 2px solid var(--ct-border);
box-shadow: var(--ct-shadow-sm);
}
.status-active {
background-color: var(--ct-success);
color: var(--ct-text);
}
.status-pending {
background-color: var(--ct-primary);
color: var(--ct-text);
}
.status-inactive {
background-color: var(--ct-surface);
color: var(--ct-text-light);
}
.ct-table-pagination {
padding: 1.75rem 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-top: var(--ct-border-width) solid var(--ct-border);
background-color: var(--ct-surface);
}
.ct-pagination-controls {
display: flex;
gap: 0.5rem;
align-items: center;
}
@media (max-width: 768px) {
.ct-table-header { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.ct-table-pagination { flex-direction: column; gap: 1.25rem; text-align: center; }
}
Lists
Playful Activity Ledger
HTML
<div class="ct-feed-card ct-surface">
<div class="ct-feed-header">
<h3>Atelier Cluster Feed</h3>
<span class="ct-badge bg-pink text-white" style="border: 2px solid #000; font-size: 0.75rem; font-weight: 700; box-shadow: var(--ct-shadow-sm);">4 Updates!</span>
</div>
<ul class="ct-feed-list">
<!-- Item 1: Unread -->
<li class="ct-feed-item ct-unread bg-cream">
<div class="ct-feed-avatar bg-pink">
<span>SJ</span>
</div>
<div class="ct-feed-content">
<p><strong>Sarah Jenkins</strong> pushed node updates to <span class="ct-feed-highlight">Negative Space / No. 04</span>.</p>
<span class="ct-feed-time">2 hours ago</span>
</div>
<div class="ct-unread-marker bg-pink"></div>
</li>
<!-- Item 2: Read -->
<li class="ct-feed-item">
<div class="ct-feed-avatar bg-blue">
<span>MC</span>
</div>
<div class="ct-feed-content">
<p><strong>Michael Chen</strong> completed cluster sequence <span class="ct-feed-highlight">Curation Codex N°12</span>.</p>
<span class="ct-feed-time">5 hours ago</span>
</div>
</li>
<!-- Item 3: Unread -->
<li class="ct-feed-item ct-unread bg-cream">
<div class="ct-feed-avatar bg-yellow">
<span>DM</span>
</div>
<div class="ct-feed-content">
<p><strong>David Moreau</strong> initialized a new gallery workspace <span class="ct-feed-highlight">Stark Architecture</span>.</p>
<span class="ct-feed-time">Yesterday</span>
</div>
<div class="ct-unread-marker bg-pink"></div>
</li>
</ul>
</div>
CSS (Component Only)
/* Component: Playful Activity Ledger */
/* NOTE: This component requires base.css to be included in your page. */
.ct-feed-card {
max-width: 500px;
margin: 2rem auto;
padding: 2.5rem 2.25rem !important;
}
.ct-feed-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.ct-feed-header h3 {
font-size: 1.5rem;
}
.ct-feed-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.ct-feed-item {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.15rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
transition: var(--ct-transition);
position: relative;
background-color: var(--ct-surface);
box-shadow: var(--ct-shadow-sm);
}
.ct-feed-item:hover {
transform: translate(-2px, -2px);
box-shadow: var(--ct-shadow);
}
.ct-feed-item:active {
transform: translate(2px, 2px);
box-shadow: var(--ct-shadow-press);
}
.ct-feed-avatar {
width: 36px;
height: 36px;
color: var(--ct-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ct-font-heading);
font-size: 0.85rem;
font-weight: 700;
border-radius: 50%;
border: 2px solid var(--ct-border);
flex-shrink: 0;
box-shadow: var(--ct-shadow-sm);
}
.ct-feed-content {
flex: 1;
}
.ct-feed-content p {
font-size: 0.9rem;
color: var(--ct-text-muted);
line-height: 1.6;
margin-bottom: 0.25rem;
font-weight: 600;
}
.ct-feed-content strong {
color: var(--ct-text);
}
.ct-feed-highlight {
font-weight: 700;
color: var(--ct-text);
background-color: var(--ct-primary);
border: 2px solid var(--ct-border);
padding: 0.15rem 0.4rem;
font-size: 0.8rem;
border-radius: 4px;
}
.ct-feed-time {
font-size: 0.75rem;
color: var(--ct-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
}
.ct-unread-marker {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--ct-border);
margin-left: 0.5rem;
flex-shrink: 0;
box-shadow: var(--ct-shadow-sm);
}
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=Fredoka:wght@300;400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--ct-bg: #FFFDF9; /* Warm paper white */
--ct-bg-muted: #FFF8E7; /* Soft bubbly cream */
--ct-surface: #FFFFFF;
--ct-primary: #FFDE4D; /* Bubbly Yellow */
--ct-secondary: #38BDF8; /* Playful Blue */
--ct-accent: #FF6B8B; /* Coral Pink */
--ct-success: #4ADE80; /* Slime Green */
--ct-text: #000000;
--ct-text-muted: #4A4A4A;
--ct-text-light: #7A7A7A;
--ct-border: #000000;
--ct-border-width: 3px;
--ct-radius: 18px;
--ct-radius-lg: 26px;
--ct-radius-sm: 10px;
--ct-radius-full: 9999px;
--ct-font-heading: 'Fredoka', sans-serif;
--ct-font-body: 'Quicksand', sans-serif;
--ct-transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Snappy bouncy spring */
--ct-shadow: 4px 4px 0px #000000;
--ct-shadow-lg: 8px 8px 0px #000000;
--ct-shadow-sm: 2px 2px 0px #000000;
--ct-shadow-press: 1px 1px 0px #000000;
}
body {
margin: 0;
font-family: var(--ct-font-body);
color: var(--ct-text);
background-color: var(--ct-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.ct-surface {
background-color: var(--ct-surface);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius);
padding: 2.5rem;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
}
/* Global Logo */
.ct-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--ct-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--ct-text);
transition: var(--ct-transition);
}
.ct-logo:hover {
transform: rotate(-2deg) scale(1.05);
}
.ct-logo-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--ct-primary);
border: var(--ct-border-width) solid var(--ct-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ct-font-heading);
font-size: 1.2rem;
font-weight: 700;
box-shadow: var(--ct-shadow-sm);
}
/* Global Buttons */
.ct-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
gap: 0.5rem;
}
.ct-btn:active {
transform: translate(3px, 3px);
box-shadow: var(--ct-shadow-press);
}
.ct-btn-primary {
background-color: var(--ct-primary);
color: var(--ct-text);
}
.ct-btn-primary:hover {
background-color: #f7ce1b;
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-outline {
background-color: var(--ct-surface);
color: var(--ct-text);
}
.ct-btn-outline:hover {
background-color: var(--ct-bg-muted);
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-ghost {
background-color: transparent;
color: var(--ct-text);
border-color: transparent;
box-shadow: none;
}
.ct-btn-ghost:hover {
background-color: var(--ct-bg-muted);
border-color: var(--ct-border);
box-shadow: var(--ct-shadow-sm);
}
.ct-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50% !important;
}
.ct-btn-block {
width: 100%;
}
/* Form Fields */
.ct-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
font-family: var(--ct-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--ct-text);
background-color: var(--ct-surface);
outline: none;
box-shadow: var(--ct-shadow-sm);
transition: var(--ct-transition);
}
.ct-input::placeholder {
color: var(--ct-text-light);
}
.ct-input:focus {
background-color: var(--ct-bg-muted);
box-shadow: var(--ct-shadow);
}
.ct-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
color: var(--ct-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ct-font-heading);
font-weight: 700;
margin: 0;
color: var(--ct-text);
line-height: 1.2;
}
p {
font-family: var(--ct-font-body);
font-weight: 600;
line-height: 1.6;
margin: 0;
color: var(--ct-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-yellow { color: var(--ct-primary) !important; }
.text-blue { color: var(--ct-secondary) !important; }
.text-pink { color: var(--ct-accent) !important; }
.text-muted { color: var(--ct-text-muted) !important; }
.bg-paper { background-color: var(--ct-bg) !important; }
.bg-cream { background-color: var(--ct-bg-muted) !important; }
.bg-blue { background-color: var(--ct-secondary) !important; }
.bg-pink { background-color: var(--ct-accent) !important; }
.bg-green { background-color: var(--ct-success) !important; }
/* --- COMPONENT STYLES --- */
.ct-feed-card {
max-width: 500px;
margin: 2rem auto;
padding: 2.5rem 2.25rem !important;
}
.ct-feed-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.ct-feed-header h3 {
font-size: 1.5rem;
}
.ct-feed-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.ct-feed-item {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.15rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
transition: var(--ct-transition);
position: relative;
background-color: var(--ct-surface);
box-shadow: var(--ct-shadow-sm);
}
.ct-feed-item:hover {
transform: translate(-2px, -2px);
box-shadow: var(--ct-shadow);
}
.ct-feed-item:active {
transform: translate(2px, 2px);
box-shadow: var(--ct-shadow-press);
}
.ct-feed-avatar {
width: 36px;
height: 36px;
color: var(--ct-text);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ct-font-heading);
font-size: 0.85rem;
font-weight: 700;
border-radius: 50%;
border: 2px solid var(--ct-border);
flex-shrink: 0;
box-shadow: var(--ct-shadow-sm);
}
.ct-feed-content {
flex: 1;
}
.ct-feed-content p {
font-size: 0.9rem;
color: var(--ct-text-muted);
line-height: 1.6;
margin-bottom: 0.25rem;
font-weight: 600;
}
.ct-feed-content strong {
color: var(--ct-text);
}
.ct-feed-highlight {
font-weight: 700;
color: var(--ct-text);
background-color: var(--ct-primary);
border: 2px solid var(--ct-border);
padding: 0.15rem 0.4rem;
font-size: 0.8rem;
border-radius: 4px;
}
.ct-feed-time {
font-size: 0.75rem;
color: var(--ct-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
}
.ct-unread-marker {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--ct-border);
margin-left: 0.5rem;
flex-shrink: 0;
box-shadow: var(--ct-shadow-sm);
}
Modals
Bubbly Confirmation Overlay
HTML
<div class="ct-modal-overlay">
<div class="ct-modal ct-surface">
<div class="ct-modal-icon bg-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="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
<div class="ct-modal-body">
<h3>Wipe Spatial Cache?</h3>
<p>This action will wipe the local spatial database for the 'Stark Editorial' atelier workspace. All local configurations and curation layers will be permanently lost.</p>
</div>
<div class="ct-modal-actions">
<button class="ct-btn ct-btn-outline">Cancel Action</button>
<button class="ct-btn ct-btn-primary ct-btn-pink">Wipe Cache!</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Bubbly Confirmation Overlay */
/* NOTE: This component requires base.css to be included in your page. */
.ct-modal-overlay {
width: 100%;
min-height: 400px;
background: rgba(255, 253, 249, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-radius: var(--ct-radius);
border: var(--ct-border-width) solid var(--ct-border);
}
.ct-modal {
max-width: 450px;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: var(--ct-shadow-lg) !important;
padding: 3rem !important;
}
.ct-modal:hover {
transform: translate(-3px, -3px);
box-shadow: 12px 12px 0px #000000 !important;
}
.ct-modal-icon {
width: 52px;
height: 52px;
border-radius: 50%;
border: var(--ct-border-width) solid var(--ct-border);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
box-shadow: var(--ct-shadow-sm);
}
.ct-modal-body {
margin-bottom: 2.5rem;
}
.ct-modal-body h3 {
font-size: 1.65rem;
margin-bottom: 0.75rem;
}
.ct-modal-body p {
font-size: 0.95rem;
color: var(--ct-text-muted);
line-height: 1.6;
font-weight: 600;
}
.ct-modal-actions {
display: flex;
gap: 1.25rem;
width: 100%;
justify-content: center;
}
.ct-modal-actions .ct-btn {
flex: 1;
white-space: nowrap;
}
@media (max-width: 480px) {
.ct-modal-actions {
flex-direction: column-reverse;
align-items: stretch;
}
}
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=Fredoka:wght@300;400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--ct-bg: #FFFDF9; /* Warm paper white */
--ct-bg-muted: #FFF8E7; /* Soft bubbly cream */
--ct-surface: #FFFFFF;
--ct-primary: #FFDE4D; /* Bubbly Yellow */
--ct-secondary: #38BDF8; /* Playful Blue */
--ct-accent: #FF6B8B; /* Coral Pink */
--ct-success: #4ADE80; /* Slime Green */
--ct-text: #000000;
--ct-text-muted: #4A4A4A;
--ct-text-light: #7A7A7A;
--ct-border: #000000;
--ct-border-width: 3px;
--ct-radius: 18px;
--ct-radius-lg: 26px;
--ct-radius-sm: 10px;
--ct-radius-full: 9999px;
--ct-font-heading: 'Fredoka', sans-serif;
--ct-font-body: 'Quicksand', sans-serif;
--ct-transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Snappy bouncy spring */
--ct-shadow: 4px 4px 0px #000000;
--ct-shadow-lg: 8px 8px 0px #000000;
--ct-shadow-sm: 2px 2px 0px #000000;
--ct-shadow-press: 1px 1px 0px #000000;
}
body {
margin: 0;
font-family: var(--ct-font-body);
color: var(--ct-text);
background-color: var(--ct-bg);
-webkit-font-smoothing: antialiased;
}
/* Surface containers */
.ct-surface {
background-color: var(--ct-surface);
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius);
padding: 2.5rem;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
}
/* Global Logo */
.ct-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--ct-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--ct-text);
transition: var(--ct-transition);
}
.ct-logo:hover {
transform: rotate(-2deg) scale(1.05);
}
.ct-logo-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--ct-primary);
border: var(--ct-border-width) solid var(--ct-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ct-font-heading);
font-size: 1.2rem;
font-weight: 700;
box-shadow: var(--ct-shadow-sm);
}
/* Global Buttons */
.ct-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
cursor: pointer;
text-decoration: none;
box-shadow: var(--ct-shadow);
transition: var(--ct-transition);
gap: 0.5rem;
}
.ct-btn:active {
transform: translate(3px, 3px);
box-shadow: var(--ct-shadow-press);
}
.ct-btn-primary {
background-color: var(--ct-primary);
color: var(--ct-text);
}
.ct-btn-primary:hover {
background-color: #f7ce1b;
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-outline {
background-color: var(--ct-surface);
color: var(--ct-text);
}
.ct-btn-outline:hover {
background-color: var(--ct-bg-muted);
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px #000000;
}
.ct-btn-ghost {
background-color: transparent;
color: var(--ct-text);
border-color: transparent;
box-shadow: none;
}
.ct-btn-ghost:hover {
background-color: var(--ct-bg-muted);
border-color: var(--ct-border);
box-shadow: var(--ct-shadow-sm);
}
.ct-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50% !important;
}
.ct-btn-block {
width: 100%;
}
/* Form Fields */
.ct-input {
width: 100%;
padding: 0.9rem 1.25rem;
border: var(--ct-border-width) solid var(--ct-border);
border-radius: var(--ct-radius-sm);
font-family: var(--ct-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--ct-text);
background-color: var(--ct-surface);
outline: none;
box-shadow: var(--ct-shadow-sm);
transition: var(--ct-transition);
}
.ct-input::placeholder {
color: var(--ct-text-light);
}
.ct-input:focus {
background-color: var(--ct-bg-muted);
box-shadow: var(--ct-shadow);
}
.ct-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--ct-font-heading);
font-weight: 700;
font-size: 0.9rem;
color: var(--ct-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ct-font-heading);
font-weight: 700;
margin: 0;
color: var(--ct-text);
line-height: 1.2;
}
p {
font-family: var(--ct-font-body);
font-weight: 600;
line-height: 1.6;
margin: 0;
color: var(--ct-text-muted);
}
/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-yellow { color: var(--ct-primary) !important; }
.text-blue { color: var(--ct-secondary) !important; }
.text-pink { color: var(--ct-accent) !important; }
.text-muted { color: var(--ct-text-muted) !important; }
.bg-paper { background-color: var(--ct-bg) !important; }
.bg-cream { background-color: var(--ct-bg-muted) !important; }
.bg-blue { background-color: var(--ct-secondary) !important; }
.bg-pink { background-color: var(--ct-accent) !important; }
.bg-green { background-color: var(--ct-success) !important; }
/* --- COMPONENT STYLES --- */
.ct-modal-overlay {
width: 100%;
min-height: 400px;
background: rgba(255, 253, 249, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-radius: var(--ct-radius);
border: var(--ct-border-width) solid var(--ct-border);
}
.ct-modal {
max-width: 450px;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: var(--ct-shadow-lg) !important;
padding: 3rem !important;
}
.ct-modal:hover {
transform: translate(-3px, -3px);
box-shadow: 12px 12px 0px #000000 !important;
}
.ct-modal-icon {
width: 52px;
height: 52px;
border-radius: 50%;
border: var(--ct-border-width) solid var(--ct-border);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
box-shadow: var(--ct-shadow-sm);
}
.ct-modal-body {
margin-bottom: 2.5rem;
}
.ct-modal-body h3 {
font-size: 1.65rem;
margin-bottom: 0.75rem;
}
.ct-modal-body p {
font-size: 0.95rem;
color: var(--ct-text-muted);
line-height: 1.6;
font-weight: 600;
}
.ct-modal-actions {
display: flex;
gap: 1.25rem;
width: 100%;
justify-content: center;
}
.ct-modal-actions .ct-btn {
flex: 1;
white-space: nowrap;
}
@media (max-width: 480px) {
.ct-modal-actions {
flex-direction: column-reverse;
align-items: stretch;
}
}