| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| :root { |
| |
| --ha-primary: #03a9f4; |
| --ha-primary-dark: #0288d1; |
| --ha-secondary: #4db6ac; |
| --ha-accent: #ff9800; |
| --ha-background: #fafafa; |
| --ha-surface: #ffffff; |
| --ha-text-primary: #212121; |
| --ha-text-secondary: #757575; |
| --ha-divider: #e0e0e0; |
| } |
|
|
| body { |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
| line-height: 1.6; |
| color: var(--ha-text-primary); |
| background: linear-gradient(180deg, var(--ha-secondary) 0%, var(--ha-primary-dark) 50%, var(--ha-primary-dark) 100%); |
| min-height: 100vh; |
| } |
|
|
| .hero { |
| background: linear-gradient(180deg, var(--ha-primary-dark) 0%, var(--ha-primary) 60%, transparent 100%); |
| color: white; |
| padding: 4rem 2rem 2rem 2rem; |
| text-align: center; |
| position: relative; |
| margin-bottom: -4rem; |
| } |
|
|
| .hero-content { |
| max-width: 800px; |
| margin: 0 auto; |
| position: relative; |
| z-index: 2; |
| } |
|
|
| .app-icon { |
| font-size: 4rem; |
| margin-bottom: 1rem; |
| display: inline-block; |
| } |
|
|
| .hero h1 { |
| font-size: 3rem; |
| font-weight: 700; |
| margin-bottom: 1rem; |
| background: linear-gradient(45deg, #fff, #f0f9ff); |
| background-clip: text; |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
|
|
| .tagline { |
| font-size: 1.25rem; |
| opacity: 0.9; |
| max-width: 600px; |
| margin: 0 auto; |
| } |
|
|
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 2rem; |
| position: relative; |
| z-index: 2; |
| } |
|
|
| .main-card { |
| background: var(--ha-surface); |
| border-radius: 20px; |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); |
| overflow: hidden; |
| margin-bottom: 3rem; |
| } |
|
|
| .app-details { |
| padding: 3rem; |
| } |
|
|
| .app-details h2 { |
| font-size: 2rem; |
| color: var(--ha-primary-dark); |
| margin-bottom: 2rem; |
| text-align: center; |
| } |
|
|
| .template-info { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 2rem; |
| margin-bottom: 3rem; |
| } |
|
|
| .info-box { |
| background: var(--ha-background); |
| border: 2px solid var(--ha-divider); |
| border-radius: 12px; |
| padding: 2rem; |
| transition: all 0.3s ease; |
| } |
|
|
| .info-box:hover { |
| box-shadow: 0 4px 12px rgba(3, 169, 244, 0.15); |
| transform: translateY(-2px); |
| } |
|
|
| .info-box h3 { |
| color: var(--ha-primary-dark); |
| margin-bottom: 1rem; |
| font-size: 1.2rem; |
| } |
|
|
| .info-box p { |
| color: var(--ha-text-secondary); |
| line-height: 1.6; |
| } |
|
|
| .info-box a { |
| color: var(--ha-primary); |
| text-decoration: none; |
| font-weight: 600; |
| } |
|
|
| .info-box a:hover { |
| text-decoration: underline; |
| } |
|
|
| .how-to-use { |
| background: #e3f2fd; |
| border: 2px solid var(--ha-primary); |
| border-radius: 12px; |
| padding: 2rem; |
| margin-top: 3rem; |
| } |
|
|
| .how-to-use h3 { |
| color: var(--ha-primary-dark); |
| margin-bottom: 1.5rem; |
| font-size: 1.3rem; |
| text-align: center; |
| } |
|
|
| .steps { |
| display: flex; |
| flex-direction: column; |
| gap: 1.5rem; |
| } |
|
|
| .step { |
| display: flex; |
| align-items: flex-start; |
| gap: 1rem; |
| } |
|
|
| .step-number { |
| background: var(--ha-primary); |
| color: white; |
| width: 2rem; |
| height: 2rem; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| flex-shrink: 0; |
| } |
|
|
| .step h4 { |
| color: var(--ha-primary-dark); |
| margin-bottom: 0.5rem; |
| font-size: 1.1rem; |
| } |
|
|
| .step p { |
| color: var(--ha-text-secondary); |
| } |
|
|
| .footer { |
| text-align: center; |
| padding: 2rem; |
| color: white; |
| opacity: 0.8; |
| } |
|
|
| .footer a { |
| color: white; |
| text-decoration: none; |
| font-weight: 600; |
| } |
|
|
| .footer a:hover { |
| text-decoration: underline; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .hero { |
| padding: 2rem 1rem; |
| } |
|
|
| .hero h1 { |
| font-size: 2rem; |
| } |
|
|
| .container { |
| padding: 0 1rem; |
| } |
|
|
| .app-details { |
| padding: 2rem; |
| } |
|
|
| .template-info { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| |
| .changelog-container { |
| max-height: 400px; |
| overflow: hidden; |
| padding: 0; |
| } |
|
|
| .changelog-scroll { |
| max-height: 380px; |
| overflow-y: auto; |
| padding: 1.5rem; |
| } |
|
|
| .changelog-scroll::-webkit-scrollbar { |
| width: 8px; |
| } |
|
|
| .changelog-scroll::-webkit-scrollbar-track { |
| background: rgba(3, 169, 244, 0.1); |
| border-radius: 4px; |
| } |
|
|
| .changelog-scroll::-webkit-scrollbar-thumb { |
| background: var(--ha-primary); |
| border-radius: 4px; |
| } |
|
|
| .changelog-scroll::-webkit-scrollbar-thumb:hover { |
| background: var(--ha-primary-dark); |
| } |
|
|
| .changelog-entry { |
| border-bottom: 1px solid var(--ha-divider); |
| padding-bottom: 1rem; |
| margin-bottom: 1rem; |
| } |
|
|
| .changelog-entry:last-child { |
| border-bottom: none; |
| margin-bottom: 0; |
| padding-bottom: 0; |
| } |
|
|
| .changelog-entry .version { |
| display: inline-block; |
| background: var(--ha-primary); |
| color: white; |
| padding: 0.25rem 0.75rem; |
| border-radius: 20px; |
| font-weight: 600; |
| font-size: 0.9rem; |
| margin-right: 0.5rem; |
| } |
|
|
| .changelog-entry .date { |
| color: var(--ha-text-secondary); |
| font-size: 0.85rem; |
| } |
|
|
| .changelog-entry ul { |
| margin-top: 0.75rem; |
| margin-left: 1.5rem; |
| color: var(--ha-text-secondary); |
| } |
|
|
| .changelog-entry li { |
| margin-bottom: 0.25rem; |
| line-height: 1.5; |
| } |
|
|
