/* Base Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
line-height: 1.6;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* Hero Section */
.hero {
display: flex;
align-items: center;
min-height: 70vh;
padding: 2rem 0;
background: linear-gradient(135deg, #e50914 0%, #8b0000 100%);
color: white;
margin-bottom: 4rem;
}
.hero-content {
flex: 1;
max-width: 600px;
padding: 0 2rem;
}
.hero-title {
font-size: 3.5rem;
font-weight: bold;
margin-bottom: 1rem;
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.25rem;
margin-bottom: 2rem;
opacity: 0.9;
line-height: 1.6;
}
.hero-badges {
margin-bottom: 2rem;
}
.hero-badges img {
margin: 0 0.25rem;
height: 20px;
}
.hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.hero-demo {
flex: 1;
padding: 0 2rem;
text-align: center;
}
.browser-mockup {
background: #f1f1f1;
border-radius: 10px;
padding: 1rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.demo-image {
max-width: 100%;
border-radius: 5px;
}
/* Buttons */
.btn {
display: inline-block;
padding: 12px 24px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
border: none;
cursor: pointer;
}
.btn-primary {
background: #fff;
color: #e50914;
}
.btn-primary:hover {
background: #f1f1f1;
transform: translateY(-2px);
}
.btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-secondary:hover {
background: white;
color: #e50914;
}
.btn-large {
padding: 16px 32px;
font-size: 1.1rem;
font-weight: 700;
}
.btn-outline {
background: transparent;
color: #6c757d;
border: 2px solid #6c757d;
}
.btn-outline:hover {
background: #6c757d;
color: white;
}
/* Sections */
section {
padding: 4rem 0;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
color: #333;
}
.section-subtitle {
text-align: center;
font-size: 1.2rem;
color: #666;
margin-bottom: 3rem;
}
/* Features Grid */
.features {
background: #f8f9fa;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-align: center;
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.feature-card h3 {
margin-bottom: 1rem;
color: #333;
}
.feature-card ul {
text-align: left;
color: #666;
}
.feature-card code {
background: #f1f1f1;
padding: 2px 6px;
border-radius: 3px;
font-family: monospace;
}
/* Presets */
.presets-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.preset-card {
text-align: center;
}
.preset-preview {
height: 80px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
margin-bottom: 1rem;
position: relative;
overflow: hidden;
}
.preset-text {
font-weight: bold;
font-size: 1.1rem;
}
.horror { background: #1a0000; }
.horror .preset-text { color: #8B0000; text-shadow: 0 0 6px #FF0000; }
.comedy { background: #FF6347; }
.comedy .preset-text { color: #FFD700; text-shadow: 2px 2px 4px #000; }
.drama { background: #2F2F2F; }
.drama .preset-text { color: #F5F5DC; text-shadow: 1px 1px 2px #000; }
.action { background: #000; }
.action .preset-text { color: #00FFFF; text-shadow: 0 0 8px #FF0000; }
/* Installation */
.installation {
background: #f8f9fa;
}
.install-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.install-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-align: center;
position: relative;
}
.install-card.recommended {
border: 2px solid #e50914;
transform: scale(1.02);
}
.install-card.featured {
position: relative;
border: 2px solid #28a745;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}
.featured-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #28a745;
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.install-card.secondary {
background: #f8f9fa;
border: 1px solid #dee2e6;
}
.recommended-badge {
position: absolute;
top: -10px;
right: 20px;
background: #e50914;
color: white;
padding: 5px 15px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: bold;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #fff3cd;
color: #856404;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
margin: 1rem 0;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.status-dot.pending {
background: #ffc107;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.store-note {
font-size: 0.9rem;
color: #666;
margin: 1rem 0;
}
.store-description {
font-size: 1.1rem;
color: #28a745;
font-weight: 500;
margin-bottom: 1.5rem;
}
.store-features {
margin: 1.5rem 0;
}
.features-list {
list-style: none;
padding: 0;
}
.features-list li {
padding: 0.5rem 0;
color: #155724;
font-weight: 500;
}
.quick-note {
font-size: 0.8rem;
color: #666;
margin-top: 0.5rem;
}
.btn-disabled {
background: #ccc;
color: #666;
cursor: not-allowed;
opacity: 0.6;
}
.btn-disabled:hover {
background: #ccc;
transform: none;
}
.install-steps {
text-align: left;
margin: 1.5rem 0;
}
.install-steps li {
margin-bottom: 0.5rem;
color: #666;
}
/* Usage Steps */
.usage-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.step {
text-align: center;
}
.step-number {
width: 60px;
height: 60px;
background: #e50914;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
margin: 0 auto 1rem;
}
/* Use Cases */
.perfect-for {
background: #f8f9fa;
}
.use-cases {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.use-case {
text-align: center;
padding: 2rem;
}
.use-case-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
/* CTA */
.cta {
background: linear-gradient(135deg, #333 0%, #555 100%);
color: white;
text-align: center;
}
.cta h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.cta p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.cta-actions {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.dev-links {
margin: 1rem 0;
}
.dev-links .btn {
margin: 0.25rem;
}
.dev-note {
font-size: 0.9rem;
color: #6c757d;
margin-top: 1rem;
}
.installation-note {
margin-top: 1.5rem;
padding: 1rem;
background: rgba(40, 167, 69, 0.1);
border: 1px solid rgba(40, 167, 69, 0.3);
border-radius: 8px;
color: #155724;
text-align: center;
font-size: 0.95rem;
}
/* Responsive */
@media (max-width: 768px) {
.hero {
flex-direction: column;
text-align: center;
}
.hero-title {
font-size: 2.5rem;
}
.features-grid,
.presets-grid,
.install-options,
.usage-steps,
.use-cases {
grid-template-columns: 1fr;
}
.installation-note {
font-size: 0.9rem;
padding: 0.75rem;
}
.featured-badge {
font-size: 0.7rem;
padding: 0.4rem 0.8rem;
}
.btn-large {
padding: 14px 24px;
font-size: 1rem;
}
}