body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #2c3e50;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
box-shadow: 0 0 30px rgba(0,0,0,0.1);
}
.header {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 40px 30px;
text-align: center;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: url('data:image/svg+xml,
');
opacity: 0.1;
}
.header h1 {
font-size: 3em;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
position: relative;
z-index: 1;
}
.header .subtitle {
font-size: 1.3em;
opacity: 0.9;
position: relative;
z-index: 1;
}
.author {
background: #34495e;
color: white;
padding: 20px;
text-align: center;
font-size: 1.2em;
}
.warning-box {
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
color: white;
padding: 30px;
margin: 0;
border-left: 10px solid #c0392b;
position: relative;
}
.warning-box::before {
content: '⚠️';
position: absolute;
top: 15px;
right: 20px;
font-size: 2em;
}
.section {
padding: 40px 30px;
border-bottom: 3px solid #ecf0f1;
}
.section:nth-child(even) {
background: #f8f9fa;
}
.section h2 {
color: #2c3e50;
font-size: 2.2em;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 3px solid #3498db;
position: relative;
}
.section h3 {
color: #34495e;
font-size: 1.5em;
margin: 25px 0 15px 0;
padding: 15px 20px;
background: linear-gradient(135deg, #74b9ff, #0984e3);
color: white;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(116, 185, 255, 0.3);
}
.intro-box {
background: linear-gradient(135deg, #a29bfe, #6c5ce7);
color: white;
padding: 30px;
border-radius: 15px;
margin: 20px 0;
box-shadow: 0 8px 25px rgba(108, 92, 231, 0.3);
}
.discovery-box {
background: linear-gradient(135deg, #fd79a8, #e84393);
color: white;
padding: 25px;
border-radius: 10px;
margin: 20px 0;
box-shadow: 0 6px 20px rgba(232, 67, 147, 0.3);
}
.circuit-box {
background: white;
border: 3px solid #00b894;
border-radius: 15px;
padding: 25px;
margin: 20px 0;
box-shadow: 0 5px 20px rgba(0, 184, 148, 0.2);
position: relative;
}
.circuit-box::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: linear-gradient(45deg, #00b894, #00cec9, #74b9ff, #a29bfe);
border-radius: 15px;
z-index: -1;
}
.frequency-level {
background: linear-gradient(135deg, #fdcb6e, #e17055);
color: white;
padding: 20px;
margin: 15px 0;
border-radius: 10px;
border-left: 8px solid #d63031;
box-shadow: 0 4px 15px rgba(253, 203, 110, 0.4);
}
.frequency-level h4 {
font-size: 1.3em;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.code-box {
background: linear-gradient(135deg, #2d3436, #636e72);
color: white;
padding: 25px;
border-radius: 10px;
margin: 15px 0;
border-left: 6px solid #00b894;
font-family: 'Courier New', monospace;
font-size: 1.1em;
box-shadow: 0 6px 20px rgba(45, 52, 54, 0.3);
}
.test-box {
background: linear-gradient(135deg, #74b9ff, #0984e3);
color: white;
padding: 30px;
border-radius: 15px;
margin: 25px 0;
box-shadow: 0 8px 25px rgba(116, 185, 255, 0.4);
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 15px;
margin: 20px 0;
}
.checkbox-item {
display: flex;
align-items: center;
padding: 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.checkbox-item:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateX(5px);
}
.checkbox-item input[type="checkbox"] {
margin-right: 15px;
transform: scale(1.5);
}
.result-box {
background: linear-gradient(135deg, #00b894, #00cec9);
color: white;
padding: 25px;
border-radius: 10px;
margin: 20px 0;
text-align: center;
font-size: 1.2em;
box-shadow: 0 6px 20px rgba(0, 184, 148, 0.3);
}
.technique-box {
background: white;
border: 2px solid #74b9ff;
border-radius: 15px;
padding: 25px;
margin: 20px 0;
box-shadow: 0 5px 20px rgba(116, 185, 255, 0.2);
}
.steps-list {
counter-reset: step-counter;
}
.steps-list li {
counter-increment: step-counter;
padding: 15px;
margin: 10px 0;
background: linear-gradient(135deg, #74b9ff, #0984e3);
color: white;
border-radius: 8px;
position: relative;
padding-left: 60px;
box-shadow: 0 3px 10px rgba(116, 185, 255, 0.3);
}
.steps-list li::before {
content: counter(step-counter);
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
background: white;
color: #0984e3;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2em;
}
.decree-box {
background: linear-gradient(135deg, #2d3436, #636e72);
color: white;
padding: 30px;
border-radius: 15px;
margin: 25px 0;
border: 3px solid #fdcb6e;
box-shadow: 0 8px 25px rgba(253, 203, 110, 0.4);
text-align: center;
font-style: italic;
font-size: 1.1em;
line-height: 1.8;
}
.day-plan {
background: white;
border: 3px solid #00b894;
border-radius: 15px;
padding: 25px;
margin: 20px 0;
box-shadow: 0 5px 20px rgba(0, 184, 148, 0.2);
}
.day-plan h4 {
background: linear-gradient(135deg, #00b894, #00cec9);
color: white;
padding: 15px;
margin: -25px -25px 20px -25px;
border-radius: 12px 12px 0 0;
font-size: 1.3em;
}
.task-list {
list-style: none;
padding: 0;
}
.task-list li {
padding: 10px 0;
border-bottom: 1px solid #ecf0f1;
display: flex;
align-items: center;
}
.task-list li input[type="checkbox"] {
margin-right: 15px;
transform: scale(1.3);
}
.input-field {
width: 100%;
padding: 15px;
border: 2px solid #74b9ff;
border-radius: 8px;
font-size: 1.1em;
margin: 10px 0;
background: #f8f9fa;
}
.progress-tracker {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
margin: 20px 0;
}
.progress-day {
background: linear-gradient(135deg, #ddd, #bbb);
color: #666;
padding: 15px 10px;
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
}
.progress-day.completed {
background: linear-gradient(135deg, #00b894, #00cec9);
color: white;
}
.progress-day:hover {
transform: scale(1.05);
}
.signals-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.signal-category {
background: white;
border: 2px solid #74b9ff;
border-radius: 15px;
padding: 20px;
box-shadow: 0 5px 20px rgba(116, 185, 255, 0.2);
}
.signal-category h4 {
background: linear-gradient(135deg, #74b9ff, #0984e3);
color: white;
padding: 10px 15px;
margin: -20px -20px 20px -20px;
border-radius: 13px 13px 0 0;
}
.highlight {
background: linear-gradient(135deg, #fdcb6e, #e17055);
color: white;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
box-shadow: 0 4px 15px rgba(253, 203, 110, 0.4);
}
.score-calculator {
background: linear-gradient(135deg, #a29bfe, #6c5ce7);
color: white;
padding: 25px;
border-radius: 15px;
margin: 20px 0;
text-align: center;
}
.score-result {
font-size: 2em;
font-weight: bold;
margin: 20px 0;
padding: 15px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
.interactive-element {
cursor: pointer;
transition: all 0.3s ease;
}
.interactive-element:hover {
transform: scale(1.02);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.emoji {
font-size: 1.5em;
margin-right: 10px;
}
@media (max-width: 768px) {
.container {
margin: 0;
box-shadow: none;
}
.header h1 {
font-size: 2em;
}
.section {
padding: 30px 20px;
}
.progress-tracker {
grid-template-columns: repeat(3, 1fr);
}
}