@media(prefers-color-scheme: dark) { :root { --surface: #333; --surface-2: #444; --border: #555; --text: #f5f5f5; --text-secondary: #ccc; } } /* Game of Life Extension CSS */ .hero-content p { margin-bottom: var(--sp-8); color: white !important; } /* Features Section */ .features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-6); margin: var(--sp-12) 0; } .feature-card { background: var(--surface); border-radius: var(--border-radius); padding: var(--sp-6); box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--border); height: 100%; display: flex; flex-direction: column; } .feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .feature-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--primary); border-radius: 12px; margin-bottom: var(--sp-4); transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .feature-card:hover .feature-icon { transform: scale(1.1); } .feature-title { font-size: 1.5rem; font-weight: 600; margin-bottom: var(--sp-3); color: var(--text); } .feature-description { color: var(--text-secondary); flex: 1; } /* Game Demo */ .game-of-life-demo { width: 100%; display: flex; justify-content: center; margin: var(--sp-12) 0; } .game-container { background: var(--surface); border-radius: var(--border-radius); padding: var(--sp-6); box-shadow: var(--shadow-lg); width: 400px; text-align: center; } .game-board { display: grid; margin: 0 auto; background: #FFFFFF; border: 2px solid #555555; width: fit-content; overflow: hidden; } .cell { width: 15px; height: 15px; border: 1px solid #ddd; cursor: pointer; transition: background-color 0.3s ease; } .cell.alive { background-color: #80e5ff; } .cell.young { background-color: #33b5e5; } .cell.old { background-color: #0099cc; } .cell.veteran { background-color: #0077b3; } .control-button { background: var(--primary); color: white; border: none; padding: var(--sp-2) var(--sp-4); border-radius: var(--border-radius); cursor: pointer; font-size: 0.9rem; transition: all 0.3s ease; } .control-button:hover { background: var(--primary-dark); transform: translateY(-2px); } .theme-selector { margin-top: var(--sp-4); display: flex; justify-content: center; align-items: center; gap: var(--sp-2); } .theme-selector select { padding: var(--sp-1) var(--sp-2); border-radius: var(--border-radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); } /* Screenshots Section */ .screenshots-container { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-6); margin: var(--sp-12) 0; } .screenshot { flex: 1; min-width: 300px; max-width: 400px; box-shadow: var(--shadow); border-radius: var(--border-radius); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--border); } .screenshot:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .screenshot img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; } .screenshot:hover img { transform: scale(1.02); } /* Call to Action Section */ .cta { background: linear-gradient(var(--gradient-direction), var(--primary), var(--secondary)); border-radius: var(--border-radius-lg); text-align: center; color: white; margin-top: var(--sp-16); position: relative; overflow: hidden; } .cta-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 20%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 20%); z-index: 1; } .cta-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; } .cta-title { /* font-size: 2.5rem; */ font-weight: 700; margin-bottom: var(--sp-4); line-height: 1.2; } .cta-text { /* font-size: 1.25rem; */ margin-bottom: var(--sp-8); opacity: 0.9; } .cta-button { background: white; color: var(--primary); padding: 1rem 2.5rem; border-radius: var(--border-radius); font-weight: 600; /* font-size: 1.125rem; */ transition: all 0.3s ease; display: inline-block; } .cta-button:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); color: var(--primary-dark); } /* Responsive adjustments */ @media (max-width: 768px) { .game-container { width: 100%; max-width: 400px; padding: var(--sp-4); } .controls { gap: var(--sp-1); } .control-button { padding: var(--sp-1) var(--sp-2); font-size: 0.8rem; } .cta-title { font-size: 2rem; } } @media (max-width: 480px) { .game-board { transform: scale(0.8); transform-origin: center top; } } /* Game of Life Hero Section CSS */ .game-life-hero { position: relative; padding: calc(var(--sp-16)) 0 var(--sp-24); overflow: hidden; background: linear-gradient(135deg, rgba(25, 25, 50, 0.9), rgba(40, 40, 80, 0.9)); min-height: 80vh; display: flex; align-items: center; color: white; } /* Background elements */ .hero-bg-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; opacity: 0.5; } .floating-element { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(0, 170, 255, 0.5) 0%, rgba(0, 100, 200, 0) 70%); filter: blur(40px); opacity: 0.4; animation: float 15s infinite ease-in-out; } @keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.05); } } /* Hero Content */ .hero-container { position: relative; z-index: 2; margin: 0 auto !important; } .hero-content { display: flex; align-items: center; gap: var(--sp-16); flex-wrap: wrap; } .hero-text { flex: 1; min-width: 300px; } .hero-badge { display: inline-block; background: rgba(255, 255, 255, 0.2); padding: var(--sp-2) var(--sp-4); border-radius: var(--border-radius); font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--sp-4); } .hero-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; margin-bottom: var(--sp-4); background: linear-gradient(to right, #ffffff, #88ccff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; } [dir="rtl"] .hero-title { background: linear-gradient(to left, #ffffff, #88ccff); -webkit-background-clip: text; background-clip: text; } .hero-subtitle { font-size: clamp(1.25rem, 2.5vw, 1.5rem); margin-bottom: var(--sp-6); font-weight: 500; color: rgba(255, 255, 255, 0.9); } .hero-description { font-size: 1.1rem; margin-bottom: var(--sp-8); line-height: 1.6; color: rgba(255, 255, 255, 0.8); max-width: 600px; } .hero-buttons { display: flex; gap: var(--sp-4); margin-top: var(--sp-8); } [dir="rtl"] .hero-buttons { flex-direction: row-reverse; } .hero-button { padding: var(--sp-3) var(--sp-6); border-radius: var(--border-radius); font-weight: 600; font-size: 1rem; transition: all 0.3s ease; text-decoration: none; } .primary-button { background: white; color: #002057; } .primary-button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .secondary-button { background: rgba(255, 255, 255, 0.15); color: white; backdrop-filter: blur(5px); } .secondary-button:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-3px); } /* Game board in hero */ .hero-game-container { flex: 1; min-width: 300px; display: flex; flex-direction: column; align-items: center; background: rgba(0, 0, 0, 0.4); padding: var(--sp-6); border-radius: var(--border-radius); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.1); } .hero-board { border: 2px solid rgba(255, 255, 255, 0.2) !important; margin-bottom: var(--sp-4); } .hero-controls { margin-top: var(--sp-4); } .hero-controls .control-button { /* background: rgba(255, 255, 255, 0.15); */ color: white; border: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; } .hero-controls .control-button:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } main { margin: 0 auto; margin-top: var(--sp-6); background: var(--surface); } /* Responsive adjustments */ @media (max-width: 992px) { .hero-content { flex-direction: column; text-align: center; } [dir="rtl"] .hero-content { flex-direction: column; } .hero-description { margin-left: auto; margin-right: auto; } .hero-buttons { justify-content: center; } [dir="rtl"] .hero-buttons { flex-direction: row; } .hero-game-container { margin-top: var(--sp-8); } } @media (max-width: 768px) { .game-life-hero { padding-top: calc(var(--header-height) + var(--sp-8)); min-height: auto; padding-bottom: var(--sp-16); } } @media (max-width: 480px) { .hero-buttons { flex-direction: column; width: 100%; } [dir="rtl"] .hero-buttons { flex-direction: column; } .hero-button { width: 100%; text-align: center; } .hero-board { transform: scale(0.8); transform-origin: center top; } } main h2 { font-size: 2rem; font-weight: 700; margin-bottom: var(--sp-8); } main h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: var(--sp-6); } main ol { padding-left: 1.5em; margin-block-end: 1em; } [dir="rtl"] main ol { padding-left: 0; padding-right: 1.5em; } main p { font-size: 1.1rem; line-height: 1.6; margin-bottom: var(--sp-4); } main ul { padding-left: 1.5em; margin-block-end: 1em; } [dir="rtl"] main ul { padding-left: 0; padding-right: 1.5em; }