/* ===== CSS VARIABLES FOR THEMES ===== */
:root {
/* Default Ocean Theme Variables */
--primary-color: #70e1f5;
--secondary-color: #4a9fe6;
--accent-color: #ff9a76;
--text-primary: #ffffff;
--text-secondary: #a5deff;
--text-accent: #ff9a76;
--bg-gradient: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
--card-bg: rgba(32, 2, 88, 0.753);
--card-hover-bg: rgba(255, 255, 255, 0.08);
--border-color: rgba(255, 255, 255, 0.1);
--shadow-color: rgba(112, 225, 245, 0.3);
--success-color: #4CAF50;
--warning-color: #FF9800;
--danger-color: #FF5722;
--info-color: #2196F3;
/* Hero Section Specific */
--hero-bg: linear-gradient(135deg,
rgba(15, 32, 39, 0.9),
rgba(32, 58, 67, 0.9),
rgba(44, 83, 100, 0.9));
--hero-bubble-gradient: radial-gradient(circle at 30% 30%, #70e1f5, #4a9fe6);
--hero-ripple-color: rgba(112, 225, 245, 0.3);
/* Stats Specific */
--progress-gradient: linear-gradient(90deg, #70e1f5, #4a9fe6);
--heart-color: #ff6b6b;
/* Button Colors */
--btn-start: linear-gradient(45deg, #4CAF50, #8BC34A);
--btn-pause: linear-gradient(45deg, #FF9800, #FF5722);
--btn-reset: linear-gradient(45deg, #2196F3, #03A9F4);
--btn-install: linear-gradient(45deg, #4CAF50, #8BC34A);
/* Pattern Colors */
--pattern-inhale: linear-gradient(to top, #70e1f5, #4a9fe6);
--pattern-exhale: linear-gradient(to top, #4a9fe6, #2a5f9e);
--pattern-hold: linear-gradient(to top, #FF9800, #FF5722);
/* Theme Preview Colors */
--theme-ocean: linear-gradient(45deg, #70e1f5, #4a9fe6);
--theme-forest: linear-gradient(45deg, #7bed9f, #2ed573);
--theme-sunset: linear-gradient(45deg, #FF9966, #FF5E62);
--theme-space: linear-gradient(45deg, #9d4edd, #560bad);
--theme-lavender: linear-gradient(45deg, #E2B0FF, #9F44D3);
/* AI Theme Enhancements */
--ai-bg-pattern: url('data:image/svg+xml,');
}
/* ===== BASE BODY STYLES ===== */
body {
margin: 0;
padding: 0;
min-height: 100vh;
background: var(--bg-gradient);
color: var(--text-primary);
font-family: 'Poppins', sans-serif;
position: relative;
overflow-x: hidden;
}
/* AI Circuit Pattern Background */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--ai-bg-pattern);
background-size: 100px 100px;
opacity: 0.3;
z-index: -1;
animation: circuitMove 20s linear infinite;
}
@keyframes circuitMove {
0% { background-position: 0 0; }
100% { background-position: 100px 100px; }
}
/* ===== INSTALL BUTTON - FLOATING BOTTOM RIGHT ===== */
.install-btn {
position: fixed;
bottom: 30px;
right: 30px;
background: var(--btn-install);
border: none;
border-radius: 50px;
color: var(--text-primary);
padding: 16px 28px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 1px rgba(255, 255, 255, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
backdrop-filter: blur(10px);
animation: installBtnFloat 3s ease-in-out infinite;
transform-origin: center;
}
@keyframes installBtnFloat {
0%, 100% {
transform: translateY(0) rotate(0deg);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
50% {
transform: translateY(-5px) rotate(1deg);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
}
.install-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.2),
inset 0 1px 2px rgba(255, 255, 255, 0.3);
}
.install-btn:active {
transform: translateY(-1px) scale(0.98);
transition: transform 0.1s ease;
}
.install-btn i {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.install-btn:hover i {
transform: rotate(360deg);
}
/* ===== THEME CLASSES ===== */
body.theme-ocean {
--primary-color: #70e1f5;
--secondary-color: #4a9fe6;
--accent-color: #ff9a76;
--text-primary: #ffffff;
--text-secondary: #a5deff;
--bg-gradient: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
--hero-bg: linear-gradient(135deg,
rgba(15, 32, 39, 0.9),
rgba(32, 58, 67, 0.9),
rgba(44, 83, 100, 0.9));
--hero-bubble-gradient: radial-gradient(circle at 30% 30%, #70e1f5, #4a9fe6);
--progress-gradient: linear-gradient(90deg, #70e1f5, #4a9fe6);
--heart-color: #ff6b6b;
--ai-bg-pattern: url('data:image/svg+xml,');
}
body.theme-forest {
--primary-color: #7bed9f;
--secondary-color: #2ed573;
--accent-color: #FF9F1C;
--text-primary: #ffffff;
--text-secondary: #c8f7d5;
--bg-gradient: linear-gradient(135deg, #1a2f1a, #2d5a2d, #1e3c1e);
--hero-bg: linear-gradient(135deg,
rgba(26, 47, 26, 0.9),
rgba(45, 90, 45, 0.9),
rgba(30, 60, 30, 0.9));
--hero-bubble-gradient: radial-gradient(circle at 30% 30%, #7bed9f, #2ed573);
--progress-gradient: linear-gradient(90deg, #7bed9f, #2ed573);
--heart-color: #ff6b6b;
--btn-start: linear-gradient(45deg, #2ed573, #7bed9f);
--btn-reset: linear-gradient(45deg, #7bed9f, #2ed573);
--ai-bg-pattern: url('data:image/svg+xml,');
}
body.theme-sunset {
--primary-color: #FF9966;
--secondary-color: #FF5E62;
--accent-color: #FFD166;
--text-primary: #ffffff;
--text-secondary: #ffe0cc;
--bg-gradient: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
--hero-bg: linear-gradient(135deg,
rgba(15, 12, 41, 0.9),
rgba(48, 43, 99, 0.9),
rgba(36, 36, 62, 0.9));
--hero-bubble-gradient: radial-gradient(circle at 30% 30%, #FF9966, #FF5E62);
--progress-gradient: linear-gradient(90deg, #FF9966, #FF5E62);
--heart-color: #FFD166;
--btn-start: linear-gradient(45deg, #FF5E62, #FF9966);
--btn-reset: linear-gradient(45deg, #FF9966, #FF5E62);
--ai-bg-pattern: url('data:image/svg+xml,');
}
body.theme-space {
--primary-color: #9d4edd;
--secondary-color: #560bad;
--accent-color: #ff6d00;
--text-primary: #ffffff;
--text-secondary: #e2b0ff;
--bg-gradient: linear-gradient(135deg, #000428, #004e92, #000428);
--hero-bg: linear-gradient(135deg,
rgba(0, 4, 40, 0.9),
rgba(0, 78, 146, 0.9),
rgba(0, 4, 40, 0.9));
--hero-bubble-gradient: radial-gradient(circle at 30% 30%, #9d4edd, #560bad);
--progress-gradient: linear-gradient(90deg, #9d4edd, #560bad);
--heart-color: #ff6d00;
--btn-start: linear-gradient(45deg, #560bad, #9d4edd);
--btn-reset: linear-gradient(45deg, #9d4edd, #560bad);
--ai-bg-pattern: url('data:image/svg+xml,');
}
body.theme-lavender {
--primary-color: #E2B0FF;
--secondary-color: #9F44D3;
--accent-color: #5CE1E6;
--text-primary: #ffffff;
--text-secondary: #f0d6ff;
--bg-gradient: linear-gradient(135deg, #2c003e, #5a3a7a, #2c003e);
--hero-bg: linear-gradient(135deg,
rgba(44, 0, 62, 0.9),
rgba(90, 58, 122, 0.9),
rgba(44, 0, 62, 0.9));
--hero-bubble-gradient: radial-gradient(circle at 30% 30%, #E2B0FF, #9F44D3);
--progress-gradient: linear-gradient(90deg, #E2B0FF, #9F44D3);
--heart-color: #5CE1E6;
--btn-start: linear-gradient(45deg, #9F44D3, #E2B0FF);
--btn-reset: linear-gradient(45deg, #E2B0FF, #9F44D3);
--ai-bg-pattern: url('data:image/svg+xml,');
}
/* ===== MAIN CONTAINER ===== */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
position: relative;
z-index: 1;
}
/* ===== HERO SECTION (USING VARIABLES) ===== */
.hero-section {
background: var(--hero-bg);
border-radius: 30px;
padding: 40px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
backdrop-filter: blur(10px);
animation: slideInUp 0.8s ease-out;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: stars 20s linear infinite;
pointer-events: none;
}
@keyframes stars {
from { transform: translateY(0); }
to { transform: translateY(100px); }
}
.hero-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 40px;
margin-bottom: 40px;
}
.hero-title {
flex: 1;
min-width: 300px;
}
.logo {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 15px;
}
.logo i {
font-size: 3.5em;
color: var(--primary-color);
animation: float 6s ease-in-out infinite;
filter: drop-shadow(0 0 10px currentColor);
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
}
.logo h1 {
font-size: 3em;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
font-weight: 700;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.tagline {
font-size: 1.3em;
color: var(--text-secondary);
opacity: 0.9;
font-weight: 300;
margin-left: 80px;
animation: fadeIn 1s ease-out 0.5s both;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 0.9; }
}
/* ===== REAL-TIME STATS (USING VARIABLES) ===== */
.real-time-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
flex: 2;
min-width: 300px;
}
.stat-card-large {
background: var(--card-bg);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 25px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
animation: fadeInUp 0.6s ease-out;
}
.stat-card-large:nth-child(1) { animation-delay: 0.2s; }
.stat-card-large:nth-child(2) { animation-delay: 0.4s; }
.stat-card-large:nth-child(3) { animation-delay: 0.6s; }
.stat-card-large:nth-child(4) { animation-delay: 0.8s; }
.stat-card-large:hover {
transform: translateY(-5px);
background: var(--card-hover-bg);
border-color: var(--primary-color);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.stat-icon-large {
font-size: 2.5em;
color: var(--primary-color);
margin-bottom: 15px;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(112, 225, 245, 0.1);
border-radius: 15px;
animation: iconPulse 2s infinite;
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.stat-content-large {
flex: 1;
}
.stat-label-large {
display: block;
font-size: 0.9em;
color: var(--text-secondary);
margin-bottom: 8px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.stat-value-large {
font-size: 2.5em;
font-weight: 700;
color: var(--text-primary);
display: block;
margin-bottom: 15px;
animation: countUp 1s ease-out;
}
@keyframes countUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.stat-value-large small {
font-size: 0.5em;
color: var(--text-secondary);
font-weight: 400;
}
/* Progress Bars */
.stat-progress, .calm-meter {
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
margin-top: 10px;
position: relative;
}
.progress-bar, .calm-fill {
height: 100%;
background: var(--progress-gradient);
border-radius: 3px;
width: 0%;
transition: width 0.5s ease;
position: relative;
overflow: hidden;
}
.progress-bar::after, .calm-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Breath Dots */
.breath-indicator {
display: flex;
gap: 5px;
margin-top: 10px;
}
.breath-dots {
display: flex;
gap: 4px;
}
.breath-dots::before {
content: '';
color: var(--primary-color);
font-size: 1.5em;
letter-spacing: 4px;
animation: breathDots 2s infinite;
text-shadow: 0 0 10px currentColor;
}
@keyframes breathDots {
0%, 100% {
opacity: 0.3;
letter-spacing: 4px;
}
50% {
opacity: 1;
letter-spacing: 6px;
}
}
/* Heart Animation */
.heart-animation {
margin-top: 10px;
}
.heart-animation i {
color: var(--heart-color);
font-size: 1.5em;
animation: heartbeat 1.5s infinite;
filter: drop-shadow(0 0 5px currentColor);
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
/* ===== HERO BUBBLE (USING VARIABLES) ===== */
.hero-bubble-container {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
animation: bubbleContainerFloat 4s ease-in-out infinite;
}
@keyframes bubbleContainerFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Updated Hero Bubble with new wave animations */
.hero-bubble {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: var(--hero-bubble-gradient);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 2;
animation:
bubbleContainerFloat 4s ease-in-out infinite,
rotateBubble 40s linear infinite;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
inset 0 -15px 30px rgba(255, 255, 255, 0.3),
0 0 60px var(--shadow-color),
0 0 120px rgba(74, 159, 230, 0.3);
}
/* Breathing states */
.hero-bubble.breathing-in {
animation:
waveIn 4s ease-in-out forwards,
bubbleContainerFloat 4s ease-in-out infinite,
rotateBubble 40s linear infinite;
}
.hero-bubble.breathing-out {
animation:
waveOut 4s ease-in-out forwards,
bubbleContainerFloat 4s ease-in-out infinite,
rotateBubble 40s linear infinite;
}
.hero-bubble.breathing-hold {
animation:
waveHold 2s ease-in-out infinite,
bubbleContainerFloat 4s ease-in-out infinite,
rotateBubble 40s linear infinite;
}
@keyframes rotateBubble {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.hero-bubble .bubble-text {
text-align: center;
color: var(--text-primary);
animation: textGlow 2s infinite alternate;
}
@keyframes textGlow {
from { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
to { text-shadow: 0 0 20px rgba(73, 72, 10, 0.8); }
}
/* Updated breathing text animation */
#heroInstruction {
display: block;
font-size: 1.5em;
margin-bottom: 15px;
color: var(--text-primary);
font-weight: 600;
animation: breatheTextColor 8s infinite;
}
@keyframes breatheTextColor {
0%, 30% {
content: "Breathe In";
color:var(--primary-color);
text-shadow: 0 0 15px rgba(2, 34, 2, 0.945);
transform: translateY(0);
}
31%, 89% {
content: "Hold";
color: var(--primary-color);
text-shadow: 0 0 15px rgba(61, 57, 18, 0.966);
transform: translateY(-3px);
}
90%, 100% {
content: "Breathe Out";
color:var(--primary-color);
text-shadow: 0 0 15px rgb(0, 0, 0);
transform: translateY(0);
}
}
/* New Timer Pulse Animation */
.hero-timer {
font-size: 4em;
color: var(--text-primary);
font-weight: 700;
margin-bottom: 15px;
animation: timerWavePulse 2s infinite;
}
@keyframes timerWavePulse {
0%, 100% {
transform: scale(1) translateY(0);
text-shadow:
0 0 10px rgba(255, 255, 255, 0.5),
0 0 20px rgba(112, 225, 245, 0.3);
}
25% {
transform: scale(1.05) translateY(-2px);
text-shadow:
0 0 15px rgba(255, 255, 255, 0.6),
0 0 25px rgba(112, 225, 245, 0.4);
}
50% {
transform: scale(1.1) translateY(-5px);
text-shadow:
0 0 20px rgba(255, 255, 255, 0.7),
0 0 30px rgba(112, 225, 245, 0.5);
}
75% {
transform: scale(1.05) translateY(-2px);
text-shadow:
0 0 15px rgba(255, 255, 255, 0.6),
0 0 25px rgba(112, 225, 245, 0.4);
}
}
.breath-phase {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 10px;
}
/* Updated phase dot animations */
.phase-dot {
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transition: all 0.5s ease;
position: relative;
overflow: hidden;
}
.phase-dot.active {
background: var(--text-primary);
transform: scale(1.5);
box-shadow:
0 0 10px var(--text-primary),
0 0 20px rgba(255, 255, 255, 0.3);
animation: dotWave 1s infinite;
}
@keyframes dotWave {
0%, 100% {
transform: scale(1.5);
box-shadow:
0 0 10px var(--text-primary),
0 0 20px rgba(255, 255, 255, 0.3);
}
50% {
transform: scale(1.8);
box-shadow:
0 0 15px var(--text-primary),
0 0 30px rgba(255, 255, 255, 0.5);
}
}
/* New wave effect inside active dots */
.phase-dot.active::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
animation: dotWaveInside 2s infinite linear;
}
@keyframes dotWaveInside {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hero-ripple {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px solid var(--hero-ripple-color);
animation: heroRipple 4s infinite linear;
z-index: 1;
}
#heroRipple2 {
animation-delay: 2s;
border-color: rgba(255, 154, 118, 0.3);
}
@keyframes heroRipple {
0% {
width: 200px;
height: 200px;
opacity: 1;
}
100% {
width: 400px;
height: 400px;
opacity: 0;
}
}
/* Additional wave effect for the bubble on hover */
.hero-bubble:hover {
animation-play-state: paused;
}
.hero-bubble:hover::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 30%,
transparent 70%);
border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
animation: hoverWave 3s infinite linear;
z-index: -1;
}
@keyframes hoverWave {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Add subtle background wave pattern */
.hero-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(112, 225, 245, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(74, 159, 230, 0.05) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(255, 154, 118, 0.03) 0%, transparent 50%);
z-index: -1;
animation: backgroundWaves 20s ease-in-out infinite alternate;
}
@keyframes backgroundWaves {
0% {
transform: scale(1) rotate(0deg);
opacity: 0.5;
}
50% {
transform: scale(1.1) rotate(180deg);
opacity: 0.7;
}
100% {
transform: scale(1) rotate(360deg);
opacity: 0.5;
}
}
/* ===== QUICK ACTIONS (USING VARIABLES) ===== */
.quick-actions {
display: flex;
justify-content: center;
gap: 20px;
margin: 40px 0;
flex-wrap: wrap;
animation: slideInUp 0.8s ease-out 0.8s both;
}
.action-btn {
padding: 18px 35px;
font-size: 1.1em;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
min-width: 180px;
justify-content: center;
min-height: 60px;
touch-action: manipulation;
position: relative;
overflow: hidden;
}
.action-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent);
transition: left 0.5s ease;
}
.action-btn:hover::before {
left: 100%;
}
.start-action {
background: var(--btn-start);
color: var(--text-primary);
animation: startBtnPulse 2s infinite;
}
@keyframes startBtnPulse {
0%, 100% { box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3); }
50% { box-shadow: 0 5px 25px rgba(76, 175, 80, 0.5); }
}
.pause-action {
background: var(--btn-pause);
color: var(--text-primary);
}
.reset-action {
background: var(--btn-reset);
color: var(--text-primary);
}
.action-btn:hover:not(:disabled) {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.action-btn:active:not(:disabled) {
transform: translateY(-2px) scale(1.02);
transition: transform 0.1s ease;
}
.action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
animation: none !important;
}
.action-btn i {
font-size: 1.2em;
transition: transform 0.3s ease;
}
.action-btn:hover i:not(:disabled) {
transform: scale(1.2);
}
/* ===== BREATHING PATTERNS (USING VARIABLES) ===== */
.patterns-section {
background: var(--card-bg);
border-radius: 25px;
padding: 30px;
margin: 30px 0;
animation: slideInUp 0.8s ease-out 1s both;
}
.patterns-section h3 {
color: var(--primary-color);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 15px;
font-size: 1.5em;
}
.patterns-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
.pattern-card {
background: var(--card-bg);
border-radius: 20px;
padding: 25px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
animation: cardAppear 0.6s ease-out;
}
.pattern-card:nth-child(1) { animation-delay: 1.2s; }
.pattern-card:nth-child(2) { animation-delay: 1.4s; }
.pattern-card:nth-child(3) { animation-delay: 1.6s; }
@keyframes cardAppear {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.pattern-card:hover {
transform: translateY(-5px) scale(1.02);
background: var(--card-hover-bg);
border-color: var(--primary-color);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.pattern-card.active {
border-color: var(--primary-color);
background: rgba(112, 225, 245, 0.1);
animation: activeCardPulse 2s infinite;
}
@keyframes activeCardPulse {
0%, 100% { border-color: var(--primary-color); }
50% { border-color: var(--accent-color); }
}
.pattern-visual {
display: flex;
align-items: flex-end;
height: 60px;
gap: 5px;
margin-bottom: 20px;
animation: patternBars 4s infinite alternate;
}
@keyframes patternBars {
0% { transform: translateY(0); }
100% { transform: translateY(-5px); }
}
.pattern-bar {
flex: 1;
background: var(--primary-color);
border-radius: 3px;
transition: all 0.5s ease;
}
/* Updated pattern animations with wave effect */
.pattern-bar.inhale {
height: 100%;
background: var(--pattern-inhale);
animation: patternWaveIn 4s infinite;
border-radius: 4px 4px 0 0;
}
.pattern-bar.exhale {
height: 80%;
background: var(--pattern-exhale);
animation: patternWaveOut 4s infinite 2s;
border-radius: 4px 4px 0 0;
}
.pattern-bar.hold {
height: 60%;
background: var(--pattern-hold);
animation: patternWaveHold 4s infinite 1s;
border-radius: 4px 4px 0 0;
}
.pattern-info h4 {
color: var(--text-primary);
margin-bottom: 8px;
font-size: 1.3em;
}
.pattern-info p {
color: var(--text-secondary);
margin-bottom: 15px;
font-size: 0.9em;
}
.pattern-tags {
display: flex;
gap: 8px;
}
.tag {
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8em;
font-weight: 500;
animation: tagFloat 3s infinite ease-in-out;
}
@keyframes tagFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.tag.beginner {
background: rgba(76, 175, 80, 0.2);
color: #8BC34A;
animation-delay: 0.1s;
}
.tag.focus {
background: rgba(33, 150, 243, 0.2);
color: #03A9F4;
animation-delay: 0.2s;
}
.tag.sleep {
background: rgba(156, 39, 176, 0.2);
color: #9C27B0;
animation-delay: 0.3s;
}
.tag.calm {
background: rgba(255, 152, 0, 0.2);
color: #FF9800;
animation-delay: 0.4s;
}
.tag.balance {
background: rgba(0, 150, 136, 0.2);
color: #009688;
animation-delay: 0.5s;
}
.tag.energy {
background: rgba(255, 193, 7, 0.2);
color: #FFC107;
animation-delay: 0.6s;
}
/* ===== THEME SELECTOR (USING VARIABLES) ===== */
.theme-section {
background: var(--card-bg);
border-radius: 25px;
padding: 30px;
margin: 30px 0;
animation: slideInUp 0.8s ease-out 1.2s both;
}
.theme-section h3 {
color: var(--primary-color);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 15px;
font-size: 1.5em;
}
.theme-selector {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.theme-btn {
background: var(--card-bg);
border: 2px solid transparent;
border-radius: 15px;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
min-width: 120px;
animation: themeBtnAppear 0.6s ease-out;
}
.theme-btn:nth-child(1) { animation-delay: 1.4s; }
.theme-btn:nth-child(2) { animation-delay: 1.5s; }
.theme-btn:nth-child(3) { animation-delay: 1.6s; }
.theme-btn:nth-child(4) { animation-delay: 1.7s; }
.theme-btn:nth-child(5) { animation-delay: 1.8s; }
@keyframes themeBtnAppear {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.theme-btn:hover {
transform: translateY(-5px) scale(1.05);
background: var(--card-hover-bg);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.theme-btn.active {
border-color: var(--primary-color);
background: rgba(112, 225, 245, 0.1);
animation: themeBtnActive 2s infinite alternate;
}
@keyframes themeBtnActive {
from { transform: translateY(-5px) scale(1.05); }
to { transform: translateY(-8px) scale(1.08); }
}
.theme-preview {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
color: var(--text-primary);
transition: all 0.3s ease;
animation: previewRotate 10s linear infinite;
}
@keyframes previewRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.theme-btn:hover .theme-preview {
animation: previewRotate 5s linear infinite;
}
.theme-preview.ocean {
background: var(--theme-ocean);
}
.theme-preview.forest {
background: var(--theme-forest);
}
.theme-preview.sunset {
background: var(--theme-sunset);
}
.theme-preview.space {
background: var(--theme-space);
}
.theme-preview.lavender {
background: var(--theme-lavender);
}
.theme-btn span {
color: var(--text-primary);
font-weight: 500;
}
/* ===== STATISTICS DASHBOARD (USING VARIABLES) ===== */
.statistics-dashboard {
background: var(--card-bg);
border-radius: 25px;
padding: 30px;
margin: 30px 0;
animation: slideInUp 0.8s ease-out 1.4s both;
}
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
flex-wrap: wrap;
gap: 20px;
}
.dashboard-header h3 {
color: var(--primary-color);
font-size: 1.5em;
display: flex;
align-items: center;
gap: 15px;
margin: 0;
}
.dashboard-controls {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.control-btn {
padding: 12px 24px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: 25px;
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9em;
font-weight: 500;
transition: all 0.3s ease;
min-height: 44px;
min-width: 120px;
justify-content: center;
touch-action: manipulation;
position: relative;
overflow: hidden;
}
.control-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent);
transition: left 0.5s ease;
}
.control-btn:hover::before {
left: 100%;
}
.control-btn:hover {
background: var(--card-hover-bg);
transform: translateY(-2px);
border-color: var(--primary-color);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.control-btn:active {
transform: translateY(0);
}
.control-btn.danger {
background: rgba(255, 87, 34, 0.2);
border-color: rgba(255, 87, 34, 0.3);
}
.control-btn.danger:hover {
background: rgba(255, 87, 34, 0.3);
border-color: #FF5722;
}
/* ===== STATS SUMMARY CARDS ===== */
.stats-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.summary-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 25px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
animation: summaryCardAppear 0.6s ease-out;
}
.summary-card:nth-child(1) { animation-delay: 1.6s; }
.summary-card:nth-child(2) { animation-delay: 1.7s; }
.summary-card:nth-child(3) { animation-delay: 1.8s; }
.summary-card:nth-child(4) { animation-delay: 1.9s; }
@keyframes summaryCardAppear {
from {
opacity: 0;
transform: translateY(20px) rotateX(90deg);
}
to {
opacity: 1;
transform: translateY(0) rotateX(0);
}
}
.summary-card:hover {
transform: translateY(-5px);
background: var(--card-hover-bg);
border-color: var(--primary-color);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.summary-icon {
width: 60px;
height: 60px;
background: rgba(112, 225, 245, 0.1);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: var(--primary-color);
font-size: 1.8em;
animation: iconFloat 3s infinite ease-in-out;
}
@keyframes iconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.summary-content {
flex: 1;
}
.summary-value {
display: block;
font-size: 2.2em;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 5px;
animation: countUp 1s ease-out;
}
.summary-label {
display: block;
font-size: 0.9em;
color: var(--text-secondary);
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.summary-trend {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.8em;
color: var(--text-secondary);
}
.trend-up {
color: #4CAF50;
animation: trendBounce 1s infinite;
}
@keyframes trendBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
.streak-fire {
color: #FF5722;
animation: fireFlicker 0.5s infinite alternate;
}
@keyframes fireFlicker {
from { transform: scale(1); }
to { transform: scale(1.2); }
}
/* ===== FOOTER ===== */
.footer {
background: linear-gradient(180deg,
transparent 0%,
rgba(0, 0, 0, 0.2) 100%);
border-top: 1px solid var(--border-color);
padding: 30px 0;
margin-top: 40px;
text-align: center;
animation: slideInUp 0.8s ease-out 1.6s both;
}
.footer-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.footer p {
color: var(--text-secondary);
margin-bottom: 20px;
font-size: 0.9em;
}
.footer-links {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.footer-links a {
color: var(--text-secondary);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
font-size: 0.9em;
}
.footer-links a:hover {
color: var(--primary-color);
transform: translateY(-2px);
}
.footer-links a i {
font-size: 1em;
}
/* ===== RESPONSIVE DESIGN FOR ALL DEVICES ===== */
/* Large Desktop (1920px and up) */
@media (min-width: 1920px) {
.container {
max-width: 1600px;
}
.hero-bubble-container {
width: 400px;
height: 400px;
}
.hero-bubble {
width: 250px;
height: 250px;
}
.hero-timer {
font-size: 5em;
}
.real-time-stats {
grid-template-columns: repeat(4, 1fr);
}
.install-btn {
bottom: 40px;
right: 40px;
padding: 20px 35px;
font-size: 1.1rem;
}
.action-btn {
min-width: 200px;
padding: 20px 40px;
font-size: 1.2em;
}
}
/* Desktop (1200px - 1919px) */
@media (max-width: 1919px) and (min-width: 1200px) {
.hero-bubble-container {
width: 350px;
height: 350px;
}
.hero-bubble {
width: 220px;
height: 220px;
}
}
/* Laptop (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
.hero-content {
flex-direction: column;
text-align: center;
}
.tagline {
margin-left: 0;
text-align: center;
}
.real-time-stats {
width: 100%;
grid-template-columns: repeat(2, 1fr);
}
}
/* Tablet Landscape (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
.hero-section {
padding: 30px;
}
.logo h1 {
font-size: 2.5em;
}
.hero-bubble-container {
width: 280px;
height: 280px;
}
.hero-bubble {
width: 180px;
height: 180px;
}
.hero-timer {
font-size: 3.5em;
}
.real-time-stats {
grid-template-columns: repeat(2, 1fr);
}
.stat-card-large {
padding: 20px;
}
.stat-value-large {
font-size: 2em;
}
.quick-actions {
flex-wrap: wrap;
}
.action-btn {
min-width: 160px;
padding: 16px 30px;
}
.install-btn {
padding: 14px 24px;
font-size: 0.95rem;
}
}
/* Tablet Portrait (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
.hero-section {
padding: 25px;
border-radius: 25px;
}
.logo {
flex-direction: column;
gap: 15px;
text-align: center;
}
.logo h1 {
font-size: 2.2em;
}
.tagline {
font-size: 1.1em;
margin-left: 0;
text-align: center;
}
.hero-bubble-container {
width: 250px;
height: 250px;
}
.hero-bubble {
width: 160px;
height: 160px;
}
.hero-timer {
font-size: 3em;
}
.real-time-stats {
grid-template-columns: 1fr;
}
.quick-actions {
flex-direction: column;
align-items: center;
}
.action-btn {
width: 100%;
max-width: 300px;
min-width: auto;
}
.patterns-grid {
grid-template-columns: 1fr;
}
.theme-selector {
gap: 15px;
}
.theme-btn {
min-width: 100px;
padding: 15px;
}
.install-btn {
bottom: 25px;
right: 25px;
padding: 12px 20px;
}
.install-btn span {
display: inline;
}
}
/* Mobile Large (425px - 575px) */
@media (max-width: 575px) and (min-width: 425px) {
.hero-section {
padding: 20px;
border-radius: 20px;
margin-bottom: 20px;
}
.logo h1 {
font-size: 1.8em;
}
.tagline {
font-size: 1em;
}
.hero-bubble-container {
width: 220px;
height: 220px;
}
.hero-bubble {
width: 140px;
height: 140px;
}
#heroInstruction {
font-size: 1.2em;
}
.hero-timer {
font-size: 2.5em;
}
.stat-card-large {
padding: 18px;
}
.stat-value-large {
font-size: 1.8em;
}
.action-btn {
padding: 15px 25px;
font-size: 1em;
min-width: 140px;
}
.theme-btn {
min-width: 85px;
padding: 12px;
}
.theme-preview {
width: 60px;
height: 60px;
font-size: 1.5em;
}
.install-btn {
bottom: 20px;
right: 20px;
padding: 10px 16px;
font-size: 0.9rem;
}
.install-btn span {
display: none;
}
.install-btn i {
margin: 0;
font-size: 1.2rem;
}
}
/* Mobile Medium (375px - 424px) */
@media (max-width: 424px) and (min-width: 375px) {
.hero-section {
padding: 18px;
}
.logo h1 {
font-size: 1.6em;
}
.tagline {
font-size: 0.9em;
}
.hero-bubble-container {
width: 200px;
height: 200px;
}
.hero-bubble {
width: 130px;
height: 130px;
}
.hero-timer {
font-size: 2.2em;
}
.stat-icon-large {
font-size: 2em;
width: 50px;
height: 50px;
}
.stat-value-large {
font-size: 1.6em;
}
.theme-selector {
justify-content: space-around;
}
.theme-btn {
min-width: 70px;
padding: 10px;
}
.theme-preview {
width: 50px;
height: 50px;
font-size: 1.2em;
}
.install-btn {
width: 50px;
height: 50px;
border-radius: 50%;
justify-content: center;
padding: 0;
}
.action-btn {
padding: 14px 20px;
font-size: 0.95em;
min-width: 120px;
gap: 10px;
}
.dashboard-controls {
flex-direction: column;
width: 100%;
}
.control-btn {
width: 100%;
}
}
/* Mobile Small (320px - 374px) - Smallest Devices */
@media (max-width: 374px) {
.hero-section {
padding: 15px;
border-radius: 18px;
}
.logo {
gap: 10px;
}
.logo i {
font-size: 2.5em;
}
.logo h1 {
font-size: 1.4em;
}
.tagline {
font-size: 0.85em;
margin-left: 0;
}
.hero-bubble-container {
width: 180px;
height: 180px;
}
.hero-bubble {
width: 120px;
height: 120px;
}
#heroInstruction {
font-size: 1em;
margin-bottom: 10px;
}
.hero-timer {
font-size: 2em;
margin-bottom: 10px;
}
.stat-card-large {
padding: 15px;
}
.stat-icon-large {
font-size: 1.8em;
width: 45px;
height: 45px;
margin-bottom: 10px;
}
.stat-value-large {
font-size: 1.4em;
margin-bottom: 10px;
}
.action-btn {
padding: 12px 20px;
font-size: 0.9em;
min-width: 120px;
gap: 8px;
}
.theme-btn {
min-width: 60px;
padding: 8px;
font-size: 0.8em;
}
.theme-preview {
width: 45px;
height: 45px;
font-size: 1em;
}
.install-btn {
bottom: 15px;
right: 15px;
width: 45px;
height: 45px;
}
.footer-links {
flex-direction: column;
gap: 15px;
}
}
/* Landscape Orientation for Mobile */
@media (max-height: 600px) and (orientation: landscape) {
.hero-section {
padding: 20px;
}
.hero-content {
margin-bottom: 20px;
}
.hero-bubble-container {
width: 180px;
height: 180px;
margin: 0;
}
.hero-bubble {
width: 120px;
height: 120px;
}
.real-time-stats {
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.stat-card-large {
padding: 15px;
}
.stat-value-large {
font-size: 1.8em;
}
.quick-actions {
margin: 20px 0;
gap: 15px;
flex-direction: row;
}
.action-btn {
padding: 12px 20px;
min-width: 140px;
flex: 1;
}
.install-btn {
bottom: 20px;
right: 20px;
}
}
/* High Pixel Density Screens (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.hero-section::before {
background: url('data:image/svg+xml,');
background-size: 100px 100px;
}
.hero-bubble {
box-shadow:
inset 0 -15px 30px rgba(255, 255, 255, 0.3),
0 0 120px var(--shadow-color),
0 0 240px rgba(74, 159, 230, 0.3);
}
body::before {
background-size: 50px 50px;
}
}
/* Print Styles */
@media print {
.hero-section {
background: white !important;
color: black !important;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
.logo h1 {
-webkit-text-fill-color: black !important;
background: none !important;
}
.hero-bubble {
background: #f0f0f0 !important;
box-shadow: none !important;
border: 2px solid #ccc !important;
}
.action-btn, .install-btn {
background: #f0f0f0 !important;
color: black !important;
border: 1px solid #ccc !important;
box-shadow: none !important;
}
.install-btn {
display: none !important;
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
.logo i,
.hero-bubble,
.hero-ripple,
.breath-dots::before,
.heart-animation i,
.phase-dot,
.stat-card-large,
.action-btn,
.theme-btn,
.control-btn,
.summary-card,
.pattern-card,
.tag,
.summary-icon,
.install-btn,
.hero-section::before,
body::before,
.pattern-visual,
.theme-preview,
.progress-bar::after,
.calm-fill::after {
animation: none !important;
transition: none !important;
}
.install-btn {
animation: none !important;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
:root {
--card-bg: rgba(0, 0, 0, 0.3);
--card-hover-bg: rgba(0, 0, 0, 0.4);
}
.install-btn {
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
:root {
--text-primary: #000000;
--text-secondary: #333333;
--border-color: #000000;
}
.hero-section {
border: 2px solid var(--primary-color);
}
.stat-card-large {
border: 2px solid var(--primary-color);
}
.action-btn, .install-btn {
border: 2px solid #000000;
}
}
/* Touch Device Optimization */
@media (hover: none) and (pointer: coarse) {
.stat-card-large:hover,
.action-btn:hover:not(:disabled),
.theme-btn:hover,
.control-btn:hover,
.pattern-card:hover,
.summary-card:hover {
transform: none;
}
.action-btn:active:not(:disabled),
.theme-btn:active,
.control-btn:active,
.pattern-card:active,
.summary-card:active {
transform: scale(0.98);
opacity: 0.9;
}
.install-btn:active {
transform: scale(0.95);
}
/* Increase touch target sizes */
.phase-dot {
width: 12px;
height: 12px;
}
.action-btn {
min-height: 55px;
}
.control-btn {
min-height: 48px;
}
.theme-btn {
min-width: 100px;
min-height: 120px;
}
/* Remove hover effects */
.action-btn::before,
.control-btn::before {
display: none;
}
}
/* Safe Area Insets for Notched Phones */
@supports (padding: max(0px)) {
.hero-section {
padding-left: max(40px, env(safe-area-inset-left));
padding-right: max(40px, env(safe-area-inset-right));
padding-top: max(40px, env(safe-area-inset-top));
padding-bottom: max(40px, env(safe-area-inset-bottom));
}
.container {
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
}
.install-btn {
bottom: max(30px, env(safe-area-inset-bottom));
right: max(30px, env(safe-area-inset-right));
}
}
/* Dynamic Font Scaling */
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
@media (max-width: 480px) {
html {
font-size: 12px;
}
}
/* Loading Animation */
@keyframes loadingPulse {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}
.loading {
animation: loadingPulse 1.5s infinite;
}
/* Gradient Background Animation */
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero-section {
background-size: 200% 200%;
animation: gradientShift 15s ease infinite;
}
/* ===== BOTTOM SECTION BACKGROUND COLOR ===== */
.footer {
background: linear-gradient(180deg,
rgba(15, 32, 39, 0.8) 0%,
rgba(32, 58, 67, 0.9) 50%,
rgba(44, 83, 100, 1) 100%);
}
/* Theme-specific bottom colors */
body.theme-forest .footer {
background: linear-gradient(180deg,
rgba(26, 47, 26, 0.8) 0%,
rgba(45, 90, 45, 0.9) 50%,
rgba(30, 60, 30, 1) 100%);
}
body.theme-sunset .footer {
background: linear-gradient(180deg,
rgba(15, 12, 41, 0.8) 0%,
rgba(48, 43, 99, 0.9) 50%,
rgba(36, 36, 62, 1) 100%);
}
body.theme-space .footer {
background: linear-gradient(180deg,
rgba(0, 4, 40, 0.8) 0%,
rgba(0, 78, 146, 0.9) 50%,
rgba(0, 4, 40, 1) 100%);
}
body.theme-lavender .footer {
background: linear-gradient(180deg,
rgba(44, 0, 62, 0.8) 0%,
rgba(90, 58, 122, 0.9) 50%,
rgba(44, 0, 62, 1) 100%);
}
/* ===== SOUND SECTION (MISSING STYLES) ===== */
.sound-section {
background: var(--card-bg);
border-radius: 25px;
padding: 30px;
margin: 30px 0;
animation: slideInUp 0.8s ease-out 1.1s both;
}
.sound-section h3 {
color: var(--primary-color);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 15px;
font-size: 1.5em;
}
.sound-controls {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 25px;
margin-bottom: 25px;
border: 1px solid var(--border-color);
}
.volume-control {
margin-bottom: 25px;
}
.volume-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 15px;
}
.volume-header i {
color: var(--primary-color);
font-size: 1.2em;
}
.volume-header span {
flex: 1;
color: var(--text-primary);
font-weight: 500;
}
.volume-presets {
display: flex;
gap: 10px;
}
.volume-preset-btn {
padding: 8px 16px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: 20px;
color: var(--text-secondary);
cursor: pointer;
font-size: 0.9em;
transition: all 0.3s ease;
}
.volume-preset-btn:hover {
background: var(--card-hover-bg);
border-color: var(--primary-color);
}
.volume-preset-btn.active {
background: rgba(112, 225, 245, 0.2);
border-color: var(--primary-color);
color: var(--primary-color);
}
.volume-slider-container {
position: relative;
}
.volume-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
outline: none;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: var(--primary-color);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.volume-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: var(--primary-color);
border-radius: 50%;
cursor: pointer;
border: none;
}
.volume-labels {
display: flex;
justify-content: space-between;
margin-top: 8px;
color: var(--text-secondary);
font-size: 0.8em;
}
.sound-toggle {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.toggle-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid var(--border-color);
}
.toggle-item span {
color: var(--text-primary);
font-size: 0.95em;
}
/* Toggle Switch */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.2);
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--primary-color);
}
input:checked + .slider:before {
transform: translateX(26px);
}
/* Music Selection */
.music-selection {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 25px;
margin-bottom: 25px;
border: 1px solid var(--border-color);
}
.music-selection h4 {
color: var(--text-primary);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 1.2em;
}
.music-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
}
.music-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
border-radius: 15px;
padding: 20px;
cursor: pointer;
text-align: center;
transition: all 0.3s ease;
}
.music-card:hover {
transform: translateY(-5px);
background: var(--card-hover-bg);
border-color: var(--primary-color);
}
.music-card.active {
background: rgba(112, 225, 245, 0.1);
border-color: var(--primary-color);
}
.music-icon {
width: 50px;
height: 50px;
background: rgba(112, 225, 245, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-size: 1.5em;
color: var(--primary-color);
}
.music-card span {
display: block;
color: var(--text-primary);
font-size: 0.9em;
margin-bottom: 10px;
}
.music-tags {
display: flex;
justify-content: center;
gap: 5px;
}
.music-tag {
padding: 3px 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
font-size: 0.7em;
color: var(--text-secondary);
}
.music-tag.calm {
background: rgba(255, 152, 0, 0.2);
color: #FF9800;
}
.music-tag.nature {
background: rgba(46, 213, 115, 0.2);
color: #2ed573;
}
.music-tag.relaxing {
background: rgba(156, 39, 176, 0.2);
color: #9C27B0;
}
.music-tag.focus {
background: rgba(33, 150, 243, 0.2);
color: #2196F3;
}
.music-tag.meditation {
background: rgba(0, 150, 136, 0.2);
color: #009688;
}
.music-tag.quiet {
background: rgba(158, 158, 158, 0.2);
color: #9E9E9E;
}
/* Sound Effects */
.sound-effects {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 25px;
border: 1px solid var(--border-color);
}
.sound-effects h4 {
color: var(--text-primary);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 1.2em;
}
.effects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.effect-item {
background: rgba(255, 255, 255, 0.03);
border-radius: 15px;
padding: 20px;
}
.effect-item span {
display: block;
color: var(--text-primary);
margin-bottom: 15px;
font-size: 0.95em;
}
.effect-options {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.effect-option {
flex: 1;
min-width: 80px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.effect-option:hover {
background: var(--card-hover-bg);
border-color: var(--primary-color);
}
.effect-option.active {
background: rgba(112, 225, 245, 0.2);
border-color: var(--primary-color);
}
.effect-option i {
color: var(--primary-color);
font-size: 1.2em;
}
.effect-option span {
color: var(--text-secondary);
font-size: 0.85em;
margin: 0;
}
/* ===== NEW WAVE ANIMATIONS ===== */
/* New Wave In Animation (Inhale) */
@keyframes waveIn {
0% {
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
transform: translate(-50%, -50%) scale(0.8);
box-shadow:
inset 0 -10px 30px rgba(255, 255, 255, 0.2),
0 0 50px var(--shadow-color),
0 0 100px rgba(74, 159, 230, 0.2);
}
25% {
border-radius: 45% 55% 55% 45% / 55% 45% 55% 45%;
transform: translate(-50%, -50%) scale(0.85);
}
50% {
border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
transform: translate(-50%, -50%) scale(0.9);
box-shadow:
inset 0 -15px 40px rgba(255, 255, 255, 0.3),
0 0 60px var(--shadow-color),
0 0 120px rgba(74, 159, 230, 0.3);
}
75% {
border-radius: 35% 65% 65% 35% / 65% 35% 65% 35%;
transform: translate(-50%, -50%) scale(0.95);
}
100% {
border-radius: 30% 70% 70% 30% / 70% 30% 70% 30%;
transform: translate(-50%, -50%) scale(1);
box-shadow:
inset 0 -20px 50px rgba(255, 255, 255, 0.4),
0 0 70px var(--shadow-color),
0 0 140px rgba(74, 159, 230, 0.4);
}
}
/* New Wave Out Animation (Exhale) */
@keyframes waveOut {
0% {
border-radius: 30% 70% 70% 30% / 70% 30% 70% 30%;
transform: translate(-50%, -50%) scale(1);
box-shadow:
inset 0 -20px 50px rgba(255, 255, 255, 0.4),
0 0 70px var(--shadow-color),
0 0 140px rgba(74, 159, 230, 0.4);
}
25% {
border-radius: 35% 65% 65% 35% / 65% 35% 65% 35%;
transform: translate(-50%, -50%) scale(0.95);
}
50% {
border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
transform: translate(-50%, -50%) scale(0.9);
box-shadow:
inset 0 -15px 40px rgba(255, 255, 255, 0.3),
0 0 60px var(--shadow-color),
0 0 120px rgba(74, 159, 230, 0.3);
}
75% {
border-radius: 45% 55% 55% 45% / 55% 45% 55% 45%;
transform: translate(-50%, -50%) scale(0.85);
}
100% {
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
transform: translate(-50%, -50%) scale(0.8);
box-shadow:
inset 0 -10px 30px rgba(255, 255, 255, 0.2),
0 0 50px var(--shadow-color),
0 0 100px rgba(74, 159, 230, 0.2);
}
}
/* Hold Animation (Pause between breaths) */
@keyframes waveHold {
0%, 100% {
border-radius: 30% 70% 70% 30% / 70% 30% 70% 30%;
transform: translate(-50%, -50%) scale(1);
}
50% {
border-radius: 32% 68% 68% 32% / 68% 32% 68% 32%;
transform: translate(-50%, -50%) scale(1.02);
}
}
/* New Ripple Wave Animations */
@keyframes rippleWaveIn {
0% {
width: 200px;
height: 200px;
border-radius: 30% 70% 70% 30% / 70% 30% 70% 30%;
opacity: 0;
transform: translate(-50%, -50%) scale(0.8);
border-width: 1px;
}
50% {
opacity: 0.5;
border-width: 2px;
}
100% {
width: 400px;
height: 400px;
border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
opacity: 0;
transform: translate(-50%, -50%) scale(1);
border-width: 1px;
}
}
@keyframes rippleWaveOut {
0% {
width: 200px;
height: 200px;
border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
opacity: 0;
transform: translate(-50%, -50%) scale(1);
border-width: 1px;
}
50% {
opacity: 0.5;
border-width: 2px;
}
100% {
width: 350px;
height: 350px;
border-radius: 45% 55% 55% 45% / 55% 45% 55% 45%;
opacity: 0;
transform: translate(-50%, -50%) scale(0.9);
border-width: 1px;
}
}
.hero-ripple.wave-in {
animation: rippleWaveIn 4s ease-out infinite;
border-color: rgba(112, 225, 245, 0.4);
border-style: solid;
}
.hero-ripple.wave-out {
animation: rippleWaveOut 4s ease-out infinite 2s;
border-color: rgba(255, 154, 118, 0.4);
border-style: dashed;
}
/* Updated pattern wave animations */
@keyframes patternWaveIn {
0%, 100% {
height: 100%;
border-radius: 4px 4px 0 0;
}
50% {
height: 120%;
border-radius: 6px 6px 0 0;
transform: translateY(-5px);
}
}
@keyframes patternWaveOut {
0%, 100% {
height: 80%;
border-radius: 4px 4px 0 0;
}
50% {
height: 60%;
border-radius: 6px 6px 0 0;
transform: translateY(5px);
}
}
@keyframes patternWaveHold {
0%, 100% {
height: 60%;
transform: translateY(0);
}
50% {
height: 70%;
transform: translateY(-2px);
}
}
/* Theme-specific wave colors */
body.theme-forest .hero-bubble.breathing-in {
animation:
waveIn 4s ease-in-out forwards,
bubbleContainerFloat 4s ease-in-out infinite,
rotateBubble 40s linear infinite;
}
body.theme-forest .hero-ripple.wave-in {
border-color: rgba(123, 237, 159, 0.4);
}
body.theme-sunset .hero-ripple.wave-in {
border-color: rgba(255, 153, 102, 0.4);
}
body.theme-space .hero-ripple.wave-in {
border-color: rgba(157, 78, 221, 0.4);
}
body.theme-lavender .hero-ripple.wave-in {
border-color: rgba(226, 176, 255, 0.4);
}
/* Responsive adjustments for wave animations */
@media (max-width: 767px) {
.hero-bubble {
width: 160px;
height: 160px;
}
@keyframes waveIn {
0% {
transform: translate(-50%, -50%) scale(0.8);
}
100% {
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes waveOut {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(0.8);
}
}
.hero-ripple {
width: 160px;
height: 160px;
}
@keyframes rippleWaveIn {
0% {
width: 160px;
height: 160px;
}
100% {
width: 320px;
height: 320px;
}
}
@keyframes rippleWaveOut {
0% {
width: 160px;
height: 160px;
}
100% {
width: 280px;
height: 280px;
}
}
}
/* Add these missing chart and statistics styles */
.chart-container {
background: var(--card-bg);
border-radius: 25px;
padding: 30px;
margin: 30px 0;
animation: slideInUp 0.8s ease-out 1.5s both;
backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
}
.chart-container h3 {
color: var(--primary-color);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 15px;
font-size: 1.5em;
}
.chart-wrapper {
position: relative;
height: 300px;
width: 100%;
margin: 0 auto;
}
.patterns-usage-section {
background: var(--card-bg);
border-radius: 25px;
padding: 30px;
margin: 30px 0;
animation: slideInUp 0.8s ease-out 1.6s both;
backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
}
.patterns-usage-section h3 {
color: var(--primary-color);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 15px;
font-size: 1.5em;
}
.patterns-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.pattern-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.pattern-item:hover {
background: var(--card-hover-bg);
border-color: var(--primary-color);
transform: translateX(5px);
}
.pattern-name {
color: var(--text-primary);
font-weight: 500;
}
.pattern-count {
color: var(--text-secondary);
font-size: 0.9em;
background: rgba(112, 225, 245, 0.1);
padding: 4px 12px;
border-radius: 20px;
}
.achievements-section {
background: var(--card-bg);
border-radius: 25px;
padding: 30px;
margin: 30px 0;
animation: slideInUp 0.8s ease-out 1.7s both;
backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
}
.achievements-section h3 {
color: var(--primary-color);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 15px;
font-size: 1.5em;
}
.badges-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
}
.badge-item {
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.badge-item.locked {
opacity: 0.6;
filter: grayscale(0.5);
}
.badge-item:hover {
transform: translateY(-5px);
background: var(--card-hover-bg);
}
.badge-icon {
width: 60px;
height: 60px;
background: rgba(112, 225, 245, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-size: 1.8em;
color: var(--primary-color);
}
.badge-icon.locked {
background: rgba(158, 158, 158, 0.1);
color: var(--text-secondary);
}
.badge-name {
display: block;
color: var(--text-primary);
font-weight: 500;
margin-bottom: 5px;
font-size: 0.9em;
}
.badge-progress {
display: block;
color: var(--text-secondary);
font-size: 0.8em;
}
.session-history-section {
background: var(--card-bg);
border-radius: 25px;
padding: 30px;
margin: 30px 0;
animation: slideInUp 0.8s ease-out 1.8s both;
backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
}
.history-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
flex-wrap: wrap;
gap: 20px;
}
.history-header h3 {
color: var(--primary-color);
font-size: 1.5em;
display: flex;
align-items: center;
gap: 15px;
margin: 0;
}
.history-filter {
padding: 10px 20px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: 25px;
color: var(--text-primary);
font-family: 'Poppins', sans-serif;
font-size: 0.9em;
cursor: pointer;
outline: none;
transition: all 0.3s ease;
}
.history-filter:hover {
background: var(--card-hover-bg);
border-color: var(--primary-color);
}
.history-table-container {
overflow-x: auto;
border-radius: 15px;
border: 1px solid var(--border-color);
}
.history-table {
width: 100%;
border-collapse: collapse;
min-width: 800px;
}
.history-table thead {
background: rgba(255, 255, 255, 0.05);
}
.history-table th {
padding: 15px;
text-align: left;
color: var(--text-primary);
font-weight: 600;
border-bottom: 1px solid var(--border-color);
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 1px;
}
.history-table td {
padding: 15px;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-color);
font-size: 0.9em;
}
.history-table tbody tr {
transition: all 0.3s ease;
}
.history-table tbody tr:hover {
background: var(--card-hover-bg);
}
.history-table tbody tr:last-child td {
border-bottom: none;
}
.session-actions {
display: flex;
gap: 10px;
}
.action-icon {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.3s ease;
}
.action-icon:hover {
background: var(--primary-color);
color: var(--text-primary);
transform: scale(1.1);
}
.storage-info-section {
background: var(--card-bg);
border-radius: 25px;
padding: 30px;
margin: 30px 0;
animation: slideInUp 0.8s ease-out 1.9s both;
backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
}
.storage-info-section h3 {
color: var(--primary-color);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 15px;
font-size: 1.5em;
}
.storage-meter {
height: 10px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
overflow: hidden;
margin-bottom: 15px;
position: relative;
}
.storage-fill {
height: 100%;
background: var(--progress-gradient);
border-radius: 5px;
width: 0%;
transition: width 0.5s ease;
position: relative;
overflow: hidden;
}
.storage-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent);
animation: shimmer 2s infinite;
}
.storage-details {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text-secondary);
font-size: 0.9em;
}
.storage-details span:first-child {
color: var(--text-primary);
font-weight: 600;
}
/* ===== COUNTDOWN ANIMATION ===== */
.countdown-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--hero-bg);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
border-radius: 30px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.countdown-overlay.active {
opacity: 1;
visibility: visible;
}
.countdown-container {
text-align: center;
animation: countdownAppear 0.5s ease;
}
@keyframes countdownAppear {
from {
opacity: 0;
transform: scale(0.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
.countdown-circle {
width: 150px;
height: 150px;
border-radius: 50%;
background: var(--hero-bubble-gradient);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
animation: countdownPulse 1s infinite;
box-shadow:
inset 0 -10px 30px rgba(255, 255, 255, 0.3),
0 0 60px var(--shadow-color);
}
@keyframes countdownPulse {
0%, 100% {
transform: scale(1);
box-shadow:
inset 0 -10px 30px rgba(255, 255, 255, 0.3),
0 0 60px var(--shadow-color);
}
50% {
transform: scale(1.1);
box-shadow:
inset 0 -15px 40px rgba(255, 255, 255, 0.4),
0 0 80px var(--shadow-color);
}
}
.countdown-number {
font-size: 4.5em;
font-weight: 700;
color: var(--text-primary);
animation: countdownNumber 1s ease-out;
}
@keyframes countdownNumber {
0% {
opacity: 0;
transform: scale(0.5) rotate(-180deg);
}
50% {
opacity: 1;
transform: scale(1.2) rotate(0deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
.countdown-text {
font-size: 1.5em;
color: var(--text-primary);
font-weight: 500;
animation: textGlow 2s infinite alternate;
}
/* ===== COMBINED STATS CARD ===== */
.combined-stats-card {
background: var(--card-bg);
backdrop-filter: blur(10px);
border-radius: 25px;
padding: 30px;
border: 1px solid var(--border-color);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
animation: slideInRight 0.8s ease-out 0.4s both;
min-width: 400px;
flex: 1;
max-width: 600px;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Control Buttons Row */
.control-buttons-row {
display: flex;
gap: 15px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.control-buttons-row .control-btn {
flex: 1;
min-width: 100px;
min-height: 50px;
border-radius: 15px;
font-size: 1em;
font-weight: 600;
padding: 12px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
}
.control-buttons-row .control-btn i {
font-size: 1.3em;
}
.control-buttons-row .control-btn span {
font-size: 0.9em;
}
.control-buttons-row .start-action {
background: var(--btn-start);
color: var(--text-primary);
}
.control-buttons-row .pause-action {
background: var(--btn-pause);
color: var(--text-primary);
}
.control-buttons-row .reset-action {
background: var(--btn-reset);
color: var(--text-primary);
}
.control-buttons-row .control-btn:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.control-buttons-row .control-btn:active:not(:disabled) {
transform: translateY(-1px);
}
.control-buttons-row .control-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.stat-item {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 20px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 15px;
}
.stat-item:hover {
transform: translateY(-3px);
background: var(--card-hover-bg);
border-color: var(--primary-color);
}
.stat-icon {
width: 50px;
height: 50px;
background: rgba(112, 225, 245, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-size: 1.5em;
flex-shrink: 0;
}
.stat-content {
flex: 1;
min-width: 0;
}
.stat-label {
display: block;
font-size: 0.8em;
color: var(--text-secondary);
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-value {
display: block;
font-size: 1.8em;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
/* Responsive adjustments for combined card */
@media (max-width: 1199px) {
.hero-content {
flex-direction: column;
text-align: center;
}
.combined-stats-card {
max-width: 100%;
min-width: 0;
margin-top: 30px;
}
}
@media (max-width: 767px) {
.stats-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.control-buttons-row {
flex-direction: column;
}
.control-buttons-row .control-btn {
min-width: 0;
width: 100%;
}
.combined-stats-card {
padding: 20px;
}
.stat-item {
padding: 15px;
}
.stat-value {
font-size: 1.5em;
}
}
@media (max-width: 480px) {
.countdown-circle {
width: 120px;
height: 120px;
}
.countdown-number {
font-size: 3.5em;
}
.countdown-text {
font-size: 1.2em;
}
.stat-icon {
width: 40px;
height: 40px;
font-size: 1.2em;
}
.stat-value {
font-size: 1.3em;
}
}
/* ===== MOBILE LAYOUT FIXES FOR HERO SECTION ===== */
/* Ensure proper stacking on all devices */
.hero-content {
display: flex;
flex-direction: column;
gap: 30px;
width: 100%;
}
/* On mobile, ensure countdown/bubble is at top */
.hero-bubble-container {
order: 1;
width: 100%;
height: 250px;
margin: 0 auto 20px;
}
/* Quick actions (start/pause/reset buttons) below bubble */
.quick-actions {
order: 2;
display: flex;
justify-content: center;
gap: 15px;
margin: 20px 0;
width: 100%;
flex-wrap: nowrap;
}
/* Real-time stats below buttons */
.real-time-stats {
order: 3;
width: 100%;
margin-top: 20px;
}
/* Combined stats card adjustments */
.combined-stats-card {
order: 4;
width: 100%;
margin-top: 20px;
min-width: 0;
}
/* Control buttons row - stack vertically on mobile */
.control-buttons-row {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin-bottom: 20px;
}
.control-buttons-row .control-btn {
width: 100%;
padding: 16px;
min-height: 55px;
}
/* Action buttons - make them accessible on mobile */
.action-btn {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
user-select: none;
min-height: 55px;
padding: 16px 20px;
}
/* ===== SPECIFIC BREAKPOINT FIXES ===== */
/* Tablet Portrait (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
.hero-content {
flex-direction: column;
align-items: center;
}
.hero-bubble-container {
order: 1;
margin-bottom: 30px;
}
.quick-actions {
order: 2;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 20px 0;
}
.action-btn {
min-width: 160px;
flex: 1;
max-width: 200px;
}
.real-time-stats {
order: 3;
grid-template-columns: repeat(2, 1fr);
margin-top: 30px;
}
.combined-stats-card {
order: 4;
margin-top: 30px;
}
}
/* Mobile Large (425px - 575px) */
@media (max-width: 575px) and (min-width: 425px) {
.hero-content {
flex-direction: column;
}
.hero-bubble-container {
order: 1;
width: 220px;
height: 220px;
margin-bottom: 25px;
}
.quick-actions {
order: 2;
flex-direction: column;
align-items: center;
margin: 20px 0;
}
.action-btn {
width: 100%;
max-width: 300px;
min-width: auto;
margin-bottom: 10px;
}
.real-time-stats {
order: 3;
grid-template-columns: 1fr;
margin-top: 25px;
gap: 15px;
}
.combined-stats-card {
order: 4;
margin-top: 25px;
padding: 20px;
}
.control-buttons-row {
flex-direction: column;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 15px;
}
}
/* Mobile Medium (375px - 424px) */
@media (max-width: 424px) and (min-width: 375px) {
.hero-bubble-container {
width: 200px;
height: 200px;
margin-bottom: 20px;
}
.quick-actions {
flex-direction: column;
width: 100%;
}
.action-btn {
width: 100%;
max-width: 100%;
justify-content: center;
}
.real-time-stats {
grid-template-columns: 1fr;
gap: 12px;
}
.combined-stats-card {
padding: 18px;
}
.stat-item {
padding: 15px;
}
.stat-value {
font-size: 1.6em;
}
}
/* Mobile Small (320px - 374px) */
@media (max-width: 374px) {
.hero-bubble-container {
width: 180px;
height: 180px;
margin-bottom: 15px;
}
.hero-bubble {
width: 120px;
height: 120px;
}
#heroInstruction {
font-size: 1em;
}
.hero-timer {
font-size: 2em;
}
.quick-actions {
flex-direction: column;
gap: 10px;
}
.action-btn {
width: 100%;
padding: 14px;
font-size: 0.95em;
min-height: 50px;
}
.real-time-stats {
grid-template-columns: 1fr;
gap: 10px;
}
.stat-card-large {
padding: 15px;
}
.stat-value-large {
font-size: 1.4em;
}
.combined-stats-card {
padding: 15px;
}
.stat-value {
font-size: 1.4em;
}
}
/* Landscape Orientation for Mobile */
@media (max-height: 600px) and (orientation: landscape) {
.hero-content {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.hero-bubble-container {
order: 1;
width: 180px;
height: 180px;
flex-shrink: 0;
}
.quick-actions {
order: 2;
flex-direction: row;
flex-wrap: wrap;
width: calc(100% - 200px);
margin: 0 0 0 20px;
}
.action-btn {
min-width: 140px;
padding: 12px 15px;
flex: 1;
}
.real-time-stats {
order: 3;
grid-template-columns: repeat(4, 1fr);
width: 100%;
margin-top: 20px;
}
.combined-stats-card {
order: 4;
width: 100%;
margin-top: 20px;
}
}
/* Touch Device Optimization */
@media (hover: none) and (pointer: coarse) {
/* Increase touch targets for mobile */
.action-btn {
min-height: 55px;
padding: 16px 24px;
}
.control-buttons-row .control-btn {
min-height: 60px;
padding: 18px;
}
.phase-dot {
width: 14px;
height: 14px;
}
.hero-bubble {
cursor: default;
}
/* Remove hover effects on touch devices */
.action-btn:hover:not(:disabled),
.control-buttons-row .control-btn:hover:not(:disabled),
.stat-item:hover {
transform: none;
}
/* Add active states for touch feedback */
.action-btn:active:not(:disabled),
.control-buttons-row .control-btn:active:not(:disabled) {
transform: scale(0.98);
opacity: 0.9;
}
}
/* Safe Area Insets for Notched Phones */
@supports (padding: max(0px)) {
.quick-actions {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
.action-btn {
margin-left: max(0px, env(safe-area-inset-left, 5px));
margin-right: max(0px, env(safe-area-inset-right, 5px));
}
}
/* High Contrast Mode for Accessibility */
@media (prefers-contrast: high) {
.action-btn,
.control-buttons-row .control-btn {
border: 2px solid #000;
}
.hero-bubble {
border: 2px solid var(--primary-color);
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
.hero-bubble,
.countdown-circle,
.action-btn,
.control-buttons-row .control-btn {
animation: none !important;
transition: none !important;
}
.hero-bubble {
animation: none;
}
.countdown-number {
animation: none;
}
}
/* ===== SIMPLIFIED MINIMAL STATS SECTION ===== */
/* Remove card styles from stats section */
.real-time-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
width: 100%;
margin: 15px 0;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
animation: fadeIn 0.8s ease-out;
}
/* Remove card background and borders */
.stat-card-large {
background: transparent;
backdrop-filter: none;
border: none;
border-radius: 0;
padding: 15px;
transition: all 0.3s ease;
position: relative;
overflow: visible;
text-align: center;
box-shadow: none;
}
.stat-card-large:hover {
transform: none;
background: transparent;
border: none;
box-shadow: none;
}
/* Remove icon container background */
.stat-icon-large {
font-size: 2em;
color: var(--primary-color);
margin-bottom: 10px;
width: auto;
height: auto;
background: transparent;
border-radius: 0;
animation: iconPulse 2s infinite;
display: block;
margin: 0 auto 10px;
}
/* Update text styles */
.stat-label-large {
display: block;
font-size: 0.8em;
color: var(--text-secondary);
margin-bottom: 5px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.8;
}
.stat-value-large {
font-size: 2em;
font-weight: 600;
color: var(--text-primary);
display: block;
margin-bottom: 8px;
animation: countUp 1s ease-out;
line-height: 1.2;
}
.stat-value-large small {
font-size: 0.5em;
color: var(--text-secondary);
font-weight: 400;
margin-left: 2px;
}
/* Progress bars - make them more subtle */
.stat-progress, .calm-meter {
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
margin-top: 8px;
position: relative;
max-width: 150px;
margin-left: auto;
margin-right: auto;
}
.progress-bar, .calm-fill {
height: 100%;
background: var(--progress-gradient);
border-radius: 2px;
width: 0%;
transition: width 0.5s ease;
}
/* Remove shimmer effect */
.progress-bar::after, .calm-fill::after {
display: none;
}
/* Breathing indicator - simplified */
.breath-indicator {
display: flex;
justify-content: center;
gap: 3px;
margin-top: 8px;
}
.breath-dots {
color: var(--primary-color);
font-size: 1.2em;
animation: breathDots 4s infinite;
}
@keyframes breathDots {
0%, 100% {
opacity: 0.3;
letter-spacing: 2px;
}
50% {
opacity: 1;
letter-spacing: 4px;
}
}
/* Heart animation - simplified */
.heart-animation {
margin-top: 8px;
}
.heart-animation i {
color: var(--heart-color);
font-size: 1.2em;
animation: heartbeat 1.5s infinite;
}
/* ===== COMBINED STATS - SIMPLIFIED ===== */
.combined-stats-card {
background: transparent;
backdrop-filter: none;
border: none;
border-radius: 0;
padding: 20px 0;
box-shadow: none;
animation: slideInRight 0.8s ease-out 0.4s both;
width: 100%;
}
/* Stats grid - simplified */
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.stat-item {
background: transparent;
border: none;
border-radius: 0;
padding: 15px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 12px;
text-align: left;
position: relative;
}
.stat-item:hover {
transform: none;
background: transparent;
border: none;
}
.stat-icon {
width: 40px;
height: 40px;
background: transparent;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-size: 1.3em;
flex-shrink: 0;
}
.stat-content {
flex: 1;
min-width: 0;
}
.stat-label {
display: block;
font-size: 0.75em;
color: var(--text-secondary);
margin-bottom: 3px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.8;
}
.stat-value {
display: block;
font-size: 1.5em;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 5px;
}
/* Add subtle divider lines between stats */
.stat-item::after {
content: '';
position: absolute;
bottom: 0;
left: 15px;
right: 15px;
height: 1px;
background: rgba(255, 255, 255, 0.05);
}
/* Last item in grid shouldn't have divider */
.stat-item:nth-child(odd):last-child::after,
.stat-item:nth-child(even):last-child::after {
display: none;
}
/* ===== RESPONSIVE ADJUSTMENTS FOR SIMPLIFIED STATS ===== */
/* Tablet (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
.real-time-stats {
grid-template-columns: repeat(2, 2fr);
gap: 20px;
}
.stat-card-large {
padding: 20px;
}
.stat-value-large {
font-size: 2.2em;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile Large (425px - 767px) */
@media (max-width: 767px) and (min-width: 425px) {
.real-time-stats {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.stat-card-large {
padding: 15px;
}
.stat-icon-large {
font-size: 1.8em;
margin-bottom: 8px;
}
.stat-value-large {
font-size: 1.8em;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.stat-item {
padding: 12px;
}
.stat-value {
font-size: 1.4em;
}
}
/* Mobile Small (320px - 424px) */
@media (max-width: 424px) {
.real-time-stats {
grid-template-columns: 1fr;
gap: 12px;
}
.stat-card-large {
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
}
.stat-icon-large {
font-size: 1.6em;
margin-bottom: 6px;
}
.stat-value-large {
font-size: 1.6em;
margin-bottom: 6px;
}
.stat-label-large {
font-size: 0.75em;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.stat-item {
padding: 12px;
text-align: center;
flex-direction: column;
gap: 8px;
}
.stat-icon {
margin-bottom: 5px;
}
.stat-value {
font-size: 1.3em;
}
/* Center progress bars on mobile */
.stat-progress, .calm-meter {
margin: 8px auto 0;
}
}
/* Landscape Orientation */
@media (max-height: 600px) and (orientation: landscape) {
.real-time-stats {
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.stat-card-large {
padding: 10px;
}
.stat-value-large {
font-size: 1.6em;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}
/* Dark Mode Enhancement */
@media (prefers-color-scheme: dark) {
.stat-item::after {
background: rgba(255, 255, 255, 0.03);
}
.stat-progress, .calm-meter {
background: rgba(255, 255, 255, 0.05);
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.stat-label-large,
.stat-label {
color: #000;
font-weight: 600;
}
.stat-value-large,
.stat-value {
color: #000;
}
.stat-icon-large,
.stat-icon {
color: #000;
}
.stat-item::after {
background: #000;
height: 2px;
}
.stat-progress, .calm-meter {
background: #000;
border: 1px solid #000;
}
.progress-bar, .calm-fill {
background: #000;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.stat-icon-large,
.heart-animation i,
.breath-dots {
animation: none;
}
.stat-value-large,
.stat-value {
animation: none;
}
}
/* ===== HERO SECTION - NO AUTO SCROLL FIX ===== */
/* Base Reset to Prevent Scroll */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: relative;
-webkit-overflow-scrolling: touch;
}
body {
min-height: 100vh;
background: var(--bg-gradient);
position: relative;
}
/* Main Container - No Scroll */
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
position: relative;
height: auto;
}
/* Hero Section - Fixed Height */
.hero-section {
background: var(--hero-bg);
border-radius: 18px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
border: 1px solid var(--border-color);
width: 100%;
max-width: 100%;
overflow: visible;
position: relative;
height: auto;
min-height: auto;
}
/* Hero Content - No Overflow */
.hero-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 20px;
overflow: visible;
position: relative;
height: auto;
}
/* Title Section */
.hero-title {
width: 100%;
text-align: center;
padding: 0 5px;
margin-bottom: 15px;
}
.logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-bottom: 12px;
width: 100%;
}
.logo i {
font-size: 1.8em;
color: var(--primary-color);
}
.logo h1 {
font-size: 1.6em;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
font-weight: 700;
line-height: 1.3;
}
.tagline {
font-size: 0.95em;
color: var(--text-secondary);
opacity: 0.9;
font-weight: 300;
text-align: center;
line-height: 1.4;
margin-top: 8px;
padding: 0 10px;
}
/* Breathing Bubble */
.hero-bubble-container {
width: 180px;
height: 180px;
margin: 15px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero-bubble {
width: 140px;
height: 140px;
background: var(--hero-bubble-gradient);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow:
inset 0 -6px 12px rgba(255, 255, 255, 0.2),
0 0 25px var(--shadow-color);
}
.hero-bubble .bubble-text {
text-align: center;
color: var(--text-primary);
}
#heroInstruction {
display: block;
font-size: 1em;
margin-bottom: 8px;
color: var(--text-primary);
font-weight: 600;
}
.hero-timer {
font-size: 2em;
color: var(--text-primary);
font-weight: 700;
margin-bottom: 8px;
}
.breath-phase {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 10px;
}
.phase-dot {
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
.phase-dot.active {
background: var(--text-primary);
transform: scale(1.3);
}
/* Real-time Stats - Compact */
.real-time-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
width: 100%;
margin: 15px 0;
}
.stat-card-large {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 15px 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
height: 130px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.stat-icon-large {
font-size: 1.4em;
color: var(--primary-color);
margin-bottom: 8px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.stat-label-large {
display: block;
font-size: 0.7em;
color: var(--text-secondary);
margin-bottom: 4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.stat-value-large {
font-size: 1.3em;
font-weight: 700;
color: var(--text-primary);
display: block;
margin-bottom: 8px;
}
/* Progress Bars */
.stat-progress, .calm-meter {
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
margin-top: 8px;
}
.progress-bar, .calm-fill {
height: 100%;
background: var(--progress-gradient);
border-radius: 2px;
width: 0%;
}
/* Quick Actions */
.quick-actions {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin: 15px 0 5px 0;
}
.action-btn {
padding: 14px 16px;
font-size: 0.95em;
border: none;
border-radius: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 600;
height: 50px;
width: 100%;
}
.start-action {
background: var(--btn-start);
color: var(--text-primary);
}
.pause-action {
background: var(--btn-pause);
color: var(--text-primary);
}
.reset-action {
background: var(--btn-reset);
color: var(--text-primary);
}
/* ===== RESPONSIVE BREAKPOINTS ===== */
/* Very Small Phones (below 360px) - NO SCROLL */
@media (max-width: 360px) {
html, body {
height: auto;
overflow-y: auto;
}
.container {
padding: 10px;
min-height: auto;
}
.hero-section {
padding: 15px;
margin-bottom: 15px;
height: auto;
min-height: auto;
}
.hero-content {
gap: 15px;
}
.logo h1 {
font-size: 1.4em;
}
.tagline {
font-size: 0.85em;
padding: 0 8px;
}
.hero-bubble-container {
width: 150px;
height: 150px;
margin: 10px auto;
}
.hero-bubble {
width: 120px;
height: 120px;
}
#heroInstruction {
font-size: 0.9em;
}
.hero-timer {
font-size: 1.8em;
}
.real-time-stats {
grid-template-columns: 1fr;
gap: 10px;
}
.stat-card-large {
height: 120px;
padding: 12px 10px;
}
.stat-value-large {
font-size: 1.2em;
}
.quick-actions {
gap: 8px;
}
.action-btn {
height: 45px;
padding: 12px 14px;
}
}
/* Small Phones (361px - 375px) */
@media (min-width: 361px) and (max-width: 375px) {
.hero-section {
padding: 18px;
}
.logo h1 {
font-size: 1.5em;
}
.hero-bubble-container {
width: 160px;
height: 160px;
}
.hero-bubble {
width: 130px;
height: 130px;
}
}
/* Medium Phones (376px - 414px) */
@media (min-width: 376px) and (max-width: 414px) {
.hero-section {
padding: 20px;
}
.logo h1 {
font-size: 1.6em;
}
.hero-bubble-container {
width: 170px;
height: 170px;
}
.hero-bubble {
width: 140px;
height: 140px;
}
}
/* Fix for iPhone Safari Scroll */
@supports (-webkit-touch-callout: none) {
html, body {
height: -webkit-fill-available;
}
.container {
min-height: -webkit-fill-available;
}
}
/* Prevent Pull-to-Refresh on Mobile */
body {
overscroll-behavior-y: contain;
}
/* Fix for Android Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
body {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
}
/* Tablet (768px and up) */
@media (min-width: 768px) {
.container {
padding: 20px;
}
.hero-section {
padding: 30px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.logo h1 {
font-size: 2em;
}
.tagline {
font-size: 1.1em;
}
.hero-bubble-container {
width: 220px;
height: 220px;
}
.hero-bubble {
width: 180px;
height: 180px;
}
.real-time-stats {
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.stat-card-large {
height: 140px;
padding: 18px 15px;
}
.quick-actions {
flex-direction: row;
gap: 15px;
}
.action-btn {
width: auto;
flex: 1;
min-width: 140px;
}
}
/* Laptop (1024px and up) */
@media (min-width: 1024px) {
.hero-section {
padding: 35px;
max-width: 900px;
}
.logo h1 {
font-size: 2.2em;
}
.hero-bubble-container {
width: 240px;
height: 240px;
}
.hero-bubble {
width: 200px;
height: 200px;
}
.real-time-stats {
gap: 20px;
max-width: 800px;
margin: 20px auto;
}
.quick-actions {
max-width: 700px;
margin: 20px auto;
}
}
/* EMERGENCY FIX - Add this if still scrolling */
.fix-scroll {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden !important;
height: 100vh !important;
}