/*=========================================================
Simple250 V2
Production Stylesheet
Foundation
=========================================================*/
/* ---------- CSS Variables ---------- */
:root{
--primary:#4facfe;
--primary-dark:#667eea;
--accent:#764ba2;
--success:#10b981;
--warning:#f59e0b;
--danger:#ef4444;
--bg:#f3f5fa;
--surface:#ffffff;
--text:#1f2937;
--text-light:#6b7280;
--border:#e5e7eb;
--radius:14px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow:0 8px 24px rgba(0,0,0,.08);
--shadow-lg:0 20px 45px rgba(0,0,0,.15);
--transition:.25s ease;
--header-height:110px;
--sidebar-width:260px;
}
/* ---------- Reset ---------- */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:Arial,Helvetica,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
overflow-x:hidden;
}
/* ---------- Images ---------- */
img{
display:block;
max-width:100%;
height:auto;
}
/* ---------- Links ---------- */
a{
color:inherit;
text-decoration:none;
transition:var(--transition);
}
/* ---------- Lists ---------- */
ul{
list-style:none;
}
/* ---------- Inputs ---------- */
input,
textarea,
select,
button{
font:inherit;
}
button{
cursor:pointer;
}
/* ---------- Headings ---------- */
h1{
font-size:52px;
font-weight:700;
margin-bottom:12px;
}
h2{
font-size:38px;
font-weight:700;
margin-bottom:15px;
}
h3{
font-size:26px;
font-weight:700;
}
/* ---------- Paragraphs ---------- */
p{
color:var(--text-light);
margin-bottom:18px;
}
/* ---------- Layout ---------- */
.app{
min-height:100vh;
}
.main-layout{
display:flex;
min-height:calc(100vh - var(--header-height));
}
.content{
flex:1;
padding:45px;
}
/* ---------- Container ---------- */
.container{
width:100%;
max-width:1200px;
margin:auto;
}
/* ---------- Dashboard Wrapper ---------- */
.dashboard-wrapper{
width:100%;
max-width:1100px;
margin:auto;
}
/* ---------- Buttons ---------- */
.button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:13px 24px;
border:none;
border-radius:10px;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#fff;
font-weight:600;
transition:var(--transition);
}
.button:hover{
transform:translateY(-2px);
box-shadow:var(--shadow);
}
/* ---------- Cards ---------- */
.card{
background:var(--surface);
border-radius:var(--radius);
box-shadow:var(--shadow-sm);
padding:24px;
}
/* ---------- Utilities ---------- */
.text-center{
text-align:center;
}
.mt-20{
margin-top:20px;
}
.mt-30{
margin-top:30px;
}
.mt-40{
margin-top:40px;
}
.mb-20{
margin-bottom:20px;
}
.mb-30{
margin-bottom:30px;
}
.mb-40{
margin-bottom:40px;
}
/*=========================================================
PART 2
HEADER + SIDEBAR
=========================================================*/
/* ==========================
HEADER
========================== */
.header{
position:relative;
height:110px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 35px;
overflow:hidden;
background:linear-gradient(135deg,#4f8fe8,#6c5ce7);
box-shadow:0 8px 30px rgba(0,0,0,.12);
}
.header::before{
content:"";
position:absolute;
width:220px;
height:220px;
border-radius:50%;
background:rgba(255,255,255,.08);
left:-70px;
top:-120px;
}
.header::after{
content:"";
position:absolute;
width:180px;
height:180px;
border-radius:50%;
background:rgba(255,255,255,.05);
right:-40px;
top:-80px;
}
.header-brand{
display:flex;
align-items:center;
gap:18px;
position:relative;
z-index:5;
}
.brand-icon{
width:56px;
height:56px;
border-radius:14px;
background:rgba(255,255,255,.15);
display:flex;
align-items:center;
justify-content:center;
backdrop-filter:blur(12px);
}
.brand-icon img{
width:40px;
height:40px;
object-fit:contain;
}
.header-title{
color:white;
font-size:30px;
font-weight:700;
}
.header-user{
display:flex;
align-items:center;
gap:18px;
color:white;
position:relative;
z-index:5;
}
.avatar{
width:48px;
height:48px;
border-radius:50%;
background:rgba(255,255,255,.18);
border:2px solid rgba(255,255,255,.25);
display:flex;
justify-content:center;
align-items:center;
font-weight:bold;
font-size:18px;
}
/* Decorative floating circles */
.header-shapes{
position:absolute;
inset:0;
pointer-events:none;
}
.shape{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,.08);
}
.shape-1{
width:160px;
height:160px;
left:120px;
top:-90px;
}
.shape-2{
width:60px;
height:60px;
left:420px;
top:28px;
}
.shape-3{
width:90px;
height:90px;
right:260px;
top:-35px;
}
.shape-4{
width:45px;
height:45px;
right:180px;
bottom:16px;
}
.shape-5{
width:130px;
height:130px;
right:-40px;
top:-70px;
}
/* ==========================
MOBILE NAVIGATION CONTROLS
========================== */
.hamburger{
display:none;
position:relative;
z-index:1305;
width:46px;
height:46px;
margin-left:12px;
padding:0;
border:1px solid rgba(255,255,255,.26);
border-radius:12px;
background:rgba(255,255,255,.14);
color:#fff;
font-size:27px;
line-height:1;
align-items:center;
justify-content:center;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:var(--transition);
}
.hamburger:hover{
background:rgba(255,255,255,.22);
}
.hamburger:focus-visible{
outline:3px solid rgba(255,255,255,.55);
outline-offset:2px;
}
.mobile-menu-overlay{
display:none;
}
body.mobile-menu-open{
overflow:hidden;
}
/* ==========================
SIDEBAR
========================== */
.sidebar{
width:260px;
background:white;
border-right:1px solid #e8ebf1;
display:flex;
flex-direction:column;
}
.nav-menu{
list-style:none;
padding:20px 0;
}
.nav-item{
margin-bottom:6px;
}
.nav-link{
display:flex;
align-items:center;
gap:16px;
padding:16px 28px;
color:#495566;
font-size:16px;
font-weight:500;
transition:.25s;
}
.nav-link:hover{
background:#eef4ff;
color:#4f8fe8;
}
.nav-link.active{
background:#eaf2ff;
border-left:4px solid #4f8fe8;
color:#4f8fe8;
font-weight:700;
}
.nav-icon{
width:26px;
text-align:center;
font-size:18px;
flex-shrink:0;
}
.menu-divider{
height:1px;
margin:20px 25px;
background:#eceff5;
}
.logout{
margin-top:auto;
}
/* ==========================
CONTENT AREA
========================== */
.content{
flex:1;
background:#f5f7fb;
padding:50px;
}
/*=========================================================
PART 3
DASHBOARD
=========================================================*/
/* ==========================
DASHBOARD WRAPPER
========================== */
.dashboard-wrapper{
max-width:1150px;
margin:0 auto;
}
.dashboard-wrapper h1{
font-size:48px;
font-weight:700;
color:#273142;
margin-bottom:10px;
}
.subtitle{
font-size:20px;
color:#6b7280;
margin-bottom:35px;
}
/* ==========================
VIDEO SECTION
========================== */
.video-section{
text-align:center;
background:#ffffff;
border-radius:18px;
padding:40px;
margin-bottom:40px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.video-section h2{
font-size:36px;
color:#4f8fe8;
margin-bottom:10px;
}
.video-subtitle{
font-size:20px;
margin-bottom:25px;
color:#555;
}
.video-container{
display:flex;
justify-content:center;
}
.video-container iframe{
width:800px;
max-width:100%;
aspect-ratio:16/9;
border:none;
border-radius:18px;
box-shadow:0 15px 35px rgba(0,0,0,.20);
}
.video-note{
margin-top:20px;
font-size:17px;
color:#777;
}
/* ==========================
AFFILIATE BANNER
========================== */
.affiliate-banner{
background:linear-gradient(135deg,#2b78e4,#6b5bdb);
color:white;
border-radius:16px;
padding:25px 30px;
display:flex;
align-items:center;
gap:20px;
margin-bottom:45px;
box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.affiliate-banner strong{
font-size:20px;
white-space:nowrap;
}
.affiliate-input{
flex:1;
border:none;
background:rgba(255,255,255,.15);
color:white;
padding:14px 18px;
border-radius:8px;
font-size:16px;
}
.affiliate-input::selection{
background:white;
color:#333;
}
.copy-button{
border:none;
background:white;
color:#2b78e4;
padding:14px 24px;
border-radius:8px;
font-weight:700;
transition:.25s;
}
.copy-button:hover{
transform:translateY(-2px);
}
/* ==========================
DASHBOARD CARDS
========================== */
.dashboard-panels{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}
.dashboard-card{
background:white;
border-radius:18px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.card-header{
color:white;
padding:18px 24px;
font-size:22px;
font-weight:700;
}
.dashboard-card.red .card-header{
background:#e53935;
}
.dashboard-card.blue .card-header{
background:#2b78e4;
}
.dashboard-card.purple .card-header{
background:#7b4fe8;
}
.card-body{
padding:28px;
min-height:260px;
}
.card-body p{
line-height:1.7;
color:#666;
}
/* ==========================
COUNTDOWN
========================== */
.countdown-box{
margin:25px 0;
padding:18px;
background:#fff8d8;
border:2px solid #ffd55a;
border-radius:10px;
text-align:center;
font-size:30px;
font-weight:700;
color:#d48806;
}
/* ==========================
PAYMENT
========================== */
.payment-icons{
text-align:center;
margin:30px 0;
font-size:26px;
font-weight:bold;
color:#2b78e4;
}
/* ==========================
REMEMBER CARD
========================== */
blockquote{
font-size:24px;
line-height:1.7;
color:#555;
font-style:italic;
text-align:center;
margin-top:20px;
}
/* ==========================
RESPONSIVE
========================== */
@media(max-width:1100px){
.dashboard-panels{
grid-template-columns:1fr;
}
.affiliate-banner{
flex-direction:column;
align-items:stretch;
}
}
@media(max-width:768px){
.dashboard-wrapper{
padding:0;
}
.video-section{
padding:25px;
}
.video-section h2{
font-size:28px;
}
}
/*=========================================================
PART 4
FORMS • TABLES • FOOTER • UTILITIES • RESPONSIVE
=========================================================*/
/* ==========================
FORMS
========================== */
.form-group{
margin-bottom:24px;
}
label{
display:block;
margin-bottom:8px;
font-weight:600;
color:#374151;
}
input,
select,
textarea{
width:100%;
padding:14px 16px;
border:1px solid #d7dde8;
border-radius:10px;
background:#fff;
transition:.25s;
}
input:focus,
select:focus,
textarea:focus{
outline:none;
border-color:#4f8fe8;
box-shadow:0 0 0 3px rgba(79,143,232,.18);
}
/* ==========================
TABLES
========================== */
table{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 6px 20px rgba(0,0,0,.06);
}
thead{
background:#4f8fe8;
color:white;
}
th{
padding:16px;
text-align:left;
}
td{
padding:16px;
border-bottom:1px solid #edf1f7;
}
tbody tr:hover{
background:#f8fbff;
}
/* ==========================
ALERTS
========================== */
.alert{
padding:18px 22px;
border-radius:12px;
margin-bottom:20px;
font-weight:600;
}
.alert-success{
background:#e9fff2;
color:#0f8b4c;
}
.alert-warning{
background:#fff8dd;
color:#b77900;
}
.alert-danger{
background:#ffecec;
color:#d22b2b;
}
/* ==========================
EMAIL STUDIO
========================== */
.email-layout{
display:grid;
grid-template-columns:320px 1fr;
gap:30px;
}
.email-sidebar{
background:white;
border-radius:16px;
padding:25px;
box-shadow:0 8px 25px rgba(0,0,0,.06);
}
.email-editor{
background:white;
border-radius:16px;
padding:30px;
box-shadow:0 8px 25px rgba(0,0,0,.06);
}
/* ==========================
EMAIL STUDIO CARDS
========================== */
.studio-card{
display:block;
background:#fff;
border:1px solid #e8ebf1;
border-radius:16px;
padding:24px 28px;
margin-bottom:24px;
transition:all .25s ease;
box-shadow:0 6px 20px rgba(0,0,0,.05);
}
.studio-card:hover{
transform:translateY(-2px);
box-shadow:0 12px 30px rgba(0,0,0,.10);
border-color:#4f8fe8;
}
.studio-card h3{
margin:0 0 10px;
color:#273142;
font-size:28px;
}
.studio-card p{
margin:0;
color:#6b7280;
font-size:17px;
line-height:1.6;
}
.studio-card .status{
display:inline-block;
margin-top:18px;
padding:6px 14px;
border-radius:999px;
font-size:14px;
font-weight:700;
background:#eef4ff;
color:#4f8fe8;
}
.studio-card.connected .status{
background:#e9fff2;
color:#10b981;
}
.studio-card.disabled{
opacity:.55;
pointer-events:none;
}
/*=========================================================
EMAIL STUDIO POLISH
Desktop sizing, card proportions and tighter tables
=========================================================*/
/*
Keep Email Studio work areas intentionally narrower on large screens.
This creates a more polished app/card feel and leaves breathing room
instead of stretching simple forms and tables across the full page.
*/
.content > h1,
.content > .subtitle,
.content > hr,
.content > .studio-card,
.content > .email-editor,
.content > .contact-lists-section,
.content > .view-contacts-section {
width:100%;
max-width:1080px;
margin-left:0;
margin-right:auto;
}
.content > hr {
border:0;
border-top:1px solid #d9dee8;
}
/* Email Studio home cards */
.content > .studio-card {
max-width:980px;
}
.content > .studio-card h3 {
font-size:26px;
}
.content > .studio-card p {
max-width:680px;
}
/* Forms / Create Broadcast / Import Contacts */
.content > .email-editor {
max-width:980px;
padding:28px;
height:auto !important;
min-height:0 !important;
overflow:visible !important;
}
.content > .email-editor form {
display:block;
height:auto;
min-height:0;
overflow:visible;
}
.content > .email-editor input,
.content > .email-editor select,
.content > .email-editor textarea {
max-width:100%;
}
/* Keep form action buttons visible below the final field. */
.content > .email-editor .button,
.content > .email-editor button.button {
display:inline-flex !important;
align-items:center;
justify-content:center;
visibility:visible !important;
opacity:1 !important;
position:relative;
margin-top:18px;
}
/* Imported contact list manager */
.content .contact-lists-section {
max-width:1020px;
}
.content .contact-list-table {
width:100%;
}
.content .contact-list-header,
.content .contact-list-row {
grid-template-columns:
minmax(260px, 1fr)
100px
140px
175px;
gap:16px;
padding:16px 20px;
}
/* Contact viewer */
.content .view-contacts-section {
max-width:1040px;
}
.content .contacts-table {
width:100%;
}
.content .contacts-header,
.content .contact-row {
grid-template-columns:
130px
150px
360px
105px
165px;
gap:14px;
padding:15px 18px;
}
.content .contact-email {
max-width:360px;
}
/*
Keep action controls visually attached to the row data rather than
floating against the far edge of a wide monitor.
*/
.content .list-actions,
.content .contact-actions {
justify-content:flex-start;
}
/* Slightly quieter card treatment */
.content > .email-editor,
.content .contact-list-table,
.content .contacts-table,
.content > .studio-card {
box-shadow:0 6px 18px rgba(31,41,55,.055);
border:1px solid #e8ebf1;
}
/* Comfortable desktop behavior */
@media(min-width:1200px){
.content{
padding-left:48px;
padding-right:48px;
}
}
/* Medium screens */
@media(max-width:1150px){
.content > h1,
.content > .subtitle,
.content > hr,
.content > .studio-card,
.content > .email-editor,
.content > .contact-lists-section,
.content > .view-contacts-section{
max-width:100%;
}
.content .contacts-header,
.content .contact-row{
grid-template-columns:
120px
135px
minmax(240px,1fr)
100px
155px;
}
.content .contact-email{
max-width:none;
}
}
/* Mobile keeps the existing stacked layout */
@media(max-width:900px){
.content .contact-list-header,
.content .contacts-header{
display:none;
}
.content .contact-list-row,
.content .contact-row{
grid-template-columns:1fr;
gap:10px;
}
.content .list-actions,
.content .contact-actions{
margin-top:5px;
}
}
/* ==========================
CONTACT MANAGER
========================== */
.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:25px;
}
.contact-card{
background:white;
border-radius:16px;
padding:24px;
box-shadow:0 8px 25px rgba(0,0,0,.06);
}
/* ==========================
BILLING
========================== */
.billing-card{
background:white;
border-radius:16px;
padding:30px;
box-shadow:0 8px 25px rgba(0,0,0,.06);
}
/* ==========================
FOOTER
========================== */
.footer{
background:white;
border-top:1px solid #e8ebf1;
padding:24px;
text-align:center;
color:#6b7280;
font-size:14px;
}
/* ==========================
UTILITIES
========================== */
.text-left{
text-align:left;
}
.text-center{
text-align:center;
}
.text-right{
text-align:right;
}
.w-100{
width:100%;
}
.d-flex{
display:flex;
}
.justify-between{
justify-content:space-between;
}
.align-center{
align-items:center;
}
.rounded{
border-radius:16px;
}
.shadow{
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.mt-10{
margin-top:10px;
}
.mt-20{
margin-top:20px;
}
.mt-30{
margin-top:30px;
}
.mt-40{
margin-top:40px;
}
.mb-10{
margin-bottom:10px;
}
.mb-20{
margin-bottom:20px;
}
.mb-30{
margin-bottom:30px;
}
.mb-40{
margin-bottom:40px;
}
/* ==========================
MOBILE
========================== */
@media(max-width:992px){
.email-layout{
grid-template-columns:1fr;
}
}
/*
|--------------------------------------------------------------------------
| MOBILE APP NAVIGATION
|--------------------------------------------------------------------------
| Desktop keeps the left sidebar.
| On mobile the sidebar becomes an off-canvas menu opened by the hamburger.
*/
@media(max-width:768px){
:root{
--header-height:78px;
}
body{
overflow-x:hidden;
}
.header{
position:sticky;
top:0;
z-index:1200;
height:78px;
padding:0 16px;
overflow:visible;
}
.header-brand{
gap:12px;
min-width:0;
}
.brand-icon{
width:44px;
height:44px;
border-radius:12px;
flex:0 0 auto;
}
.brand-icon img{
width:32px;
height:32px;
}
.header-title{
font-size:21px;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.header-user{
margin-left:auto;
gap:10px;
}
.avatar{
width:40px;
height:40px;
font-size:15px;
flex:0 0 auto;
}
.hamburger{
display:inline-flex;
flex:0 0 auto;
}
.main-layout{
display:block;
min-height:calc(100vh - 78px);
}
.sidebar{
position:fixed;
top:78px;
right:0;
bottom:0;
left:auto;
z-index:1150;
width:min(84vw,320px);
height:calc(100dvh - 78px);
background:#fff;
border-right:none;
border-bottom:none;
border-left:1px solid #e8ebf1;
box-shadow:-18px 0 40px rgba(31,41,55,.18);
overflow-y:auto;
overscroll-behavior:contain;
transform:translateX(105%);
visibility:hidden;
transition:
transform .26s ease,
visibility .26s ease;
}
.sidebar.open{
transform:translateX(0);
visibility:visible;
}
.nav-menu{
padding:18px 0 28px;
}
.nav-item{
margin-bottom:3px;
}
.nav-link{
padding:15px 22px;
font-size:16px;
}
.nav-link.active{
border-left:4px solid #4f8fe8;
}
.mobile-menu-overlay{
display:block;
position:fixed;
top:78px;
right:0;
bottom:0;
left:0;
z-index:1100;
background:rgba(17,24,39,.42);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
opacity .24s ease,
visibility .24s ease;
}
.mobile-menu-overlay.open{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.content{
width:100%;
min-width:0;
padding:24px 18px 38px;
}
.dashboard-wrapper{
width:100%;
max-width:none;
padding:0;
}
.dashboard-wrapper h1,
h1{
font-size:34px;
line-height:1.15;
}
h2{
font-size:27px;
line-height:1.2;
}
.subtitle{
font-size:17px;
margin-bottom:24px;
}
.video-section{
padding:22px 16px;
border-radius:14px;
}
.video-section h2{
font-size:27px;
}
.affiliate-banner{
padding:20px;
}
.content > h1,
.content > .subtitle,
.content > hr,
.content > .studio-card,
.content > .email-editor,
.content > .contact-lists-section,
.content > .view-contacts-section{
max-width:100%;
}
.studio-card,
.email-editor{
border-radius:14px;
}
.content > .email-editor{
padding:20px 16px;
}
.content .contact-list-header,
.content .contacts-header{
display:none;
}
.content .contact-list-row,
.content .contact-row{
grid-template-columns:1fr;
gap:10px;
}
.content .list-actions,
.content .contact-actions{
margin-top:5px;
}
}
@media(max-width:576px){
.header{
padding:0 12px;
}
.header-title{
font-size:19px;
}
.brand-icon{
width:40px;
height:40px;
}
.avatar{
width:38px;
height:38px;
}
.hamburger{
width:42px;
height:42px;
margin-left:6px;
font-size:25px;
}
.content{
padding:20px 14px 34px;
}
.dashboard-wrapper h1,
h1{
font-size:31px;
}
.studio-card{
padding:16px 18px;
margin-bottom:8px;
border-radius:14px;
}
.studio-card h3{
font-size:22px;
line-height:1.2;
margin-bottom:6px;
}
.studio-card p{
font-size:15px;
line-height:1.45;
margin-bottom:0;
}
/* Give Email Studio heading breathing room below header */
.content > h1{
margin-top:14px;
margin-bottom:4px;
}
/* Tighten subtitle underneath Email Studio */
.content > h1 + p{
margin-bottom:10px;
}
/* Tighten dividers between Email Studio cards */
.content > hr{
margin:8px 0;
}
/* Remove the extra vertical space created by
*/
.content > hr + br{
display:none;
}
}/* -----------------------------------------------------
EMAIL STUDIO SUB NAVIGATION
----------------------------------------------------- */
.email-studio-nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 24px 0;
}
.email-studio-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 16px;
border: 1px solid #d8dee9;
border-radius: 999px;
background: #ffffff;
color: #344054;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.email-studio-pill:hover {
background: #f5f8ff;
border-color: #9bbcf5;
}
.email-studio-pill.active {
background: #4f86ed;
border-color: #4f86ed;
color: #ffffff;
}
/* -----------------------------------------------------
MOBILE EMAIL STUDIO NAVIGATION
----------------------------------------------------- */
@media (max-width: 650px) {
.email-studio-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 20px;
}
.email-studio-pill {
width: 100%;
box-sizing: border-box;
padding: 9px 8px;
font-size: 13px;
text-align: center;
}
}