Merge pull request #2 from AeThex-LABS/claude/fix-sizing-issue-NkjKV
Claude/fix sizing issue nkj kv
This commit is contained in:
GitHub
commit
bdba83c2b1
6 changed files with 364 additions and 39 deletions
81
README.md
81
README.md
|
|
@ -1,46 +1,59 @@
|
|||
# Astro Starter Kit: Basics
|
||||
# AeThex
|
||||
|
||||
Infrastructure for the Metaverse.
|
||||
|
||||
## About
|
||||
|
||||
AeThex provides foundational infrastructure for building immersive digital experiences. The platform is organized into three divisions:
|
||||
|
||||
- **Foundation** - Open-source tools and community governance
|
||||
- **Corporation** - Commercial products and enterprise services
|
||||
- **Labs** - Research & development for experimental technologies
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- [Astro](https://astro.build) - Static site generator
|
||||
- CSS with custom properties and animations
|
||||
- Responsive design with mobile-first breakpoints
|
||||
|
||||
## Project Structure
|
||||
|
||||
```sh
|
||||
npm create astro@latest -- --template basics
|
||||
```
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```text
|
||||
/
|
||||
├── public/
|
||||
│ └── favicon.svg
|
||||
├── src
|
||||
│ ├── assets
|
||||
│ │ └── astro.svg
|
||||
│ ├── components
|
||||
│ │ └── Welcome.astro
|
||||
│ ├── layouts
|
||||
│ │ └── Layout.astro
|
||||
│ └── pages
|
||||
│ └── index.astro
|
||||
│ └── global.css # Global styles
|
||||
├── src/
|
||||
│ ├── components/ # Reusable UI components
|
||||
│ ├── layouts/
|
||||
│ │ └── MainLayout.astro
|
||||
│ └── pages/
|
||||
│ ├── index.astro # Homepage
|
||||
│ ├── foundation.astro
|
||||
│ ├── corporation.astro
|
||||
│ ├── labs.astro
|
||||
│ ├── products.astro
|
||||
│ ├── community.astro
|
||||
│ ├── docs.astro
|
||||
│ └── about.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
|
||||
## Development
|
||||
|
||||
## 🧞 Commands
|
||||
```sh
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
# Start dev server
|
||||
npm run dev
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
# Build for production
|
||||
npm run build
|
||||
|
||||
## 👀 Want to learn more?
|
||||
# Preview production build
|
||||
npm run preview
|
||||
```
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
## License
|
||||
|
||||
© 2026 AeThex
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
<div class="footer-logo">AETHEX</div>
|
||||
<p class="footer-tagline">Infrastructure for the Metaverse</p>
|
||||
<div class="footer-links">
|
||||
<a href="#" class="footer-link">Foundation</a>
|
||||
<a href="#" class="footer-link">Corporation</a>
|
||||
<a href="#" class="footer-link">Labs</a>
|
||||
<a href="#" class="footer-link">Documentation</a>
|
||||
<a href="#" class="footer-link">Community</a>
|
||||
<a href="/foundation" class="footer-link">Foundation</a>
|
||||
<a href="/corporation" class="footer-link">Corporation</a>
|
||||
<a href="/labs" class="footer-link">Labs</a>
|
||||
<a href="/docs" class="footer-link">Documentation</a>
|
||||
<a href="/community" class="footer-link">Community</a>
|
||||
</div>
|
||||
<p class="copyright">© 2026 AeThex • Building Digital Reality</p>
|
||||
</div>
|
||||
|
|
|
|||
78
src/pages/about.astro
Normal file
78
src/pages/about.astro
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
// About Page
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout>
|
||||
<nav class="container">
|
||||
<div class="logo">AETHEX</div>
|
||||
<div class="nav-links">
|
||||
<a href="/foundation" class="nav-link">Foundation</a>
|
||||
<a href="/corporation" class="nav-link">Corporation</a>
|
||||
<a href="/labs" class="nav-link">Labs</a>
|
||||
<a href="/products" class="nav-link">Products</a>
|
||||
<a href="/community" class="nav-link">Community</a>
|
||||
<a href="/docs" class="nav-link">Docs</a>
|
||||
<a href="/about" class="nav-link">About</a>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="page about">
|
||||
<section class="hero-banner">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-content">
|
||||
<h1 class="page-title animated">
|
||||
<span class="fade-in">About AeThex</span>
|
||||
</h1>
|
||||
<p class="page-desc fade-in-delay">Building Infrastructure for the Metaverse</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="glass-card">
|
||||
<section class="fade-in-section">
|
||||
<h2>Our Mission</h2>
|
||||
<p>AeThex is dedicated to creating the foundational infrastructure that powers the next generation of immersive digital experiences.</p>
|
||||
<ul>
|
||||
<li>Open-source Foundation</li>
|
||||
<li>Enterprise Solutions</li>
|
||||
<li>Research & Innovation</li>
|
||||
<li>Developer Community</li>
|
||||
<li>Global Infrastructure</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<footer class="page-footer">
|
||||
<span>© AeThex 2026</span>
|
||||
<a href="/">Home</a>
|
||||
<a href="/community">Community</a>
|
||||
</footer>
|
||||
<style>
|
||||
.fade-in-section { opacity: 0; transform: translateY(32px); animation: fadeInSection 1.2s 0.5s cubic-bezier(.77,0,.175,1) forwards; }
|
||||
@keyframes fadeInSection { to { opacity: 1; transform: none; } }
|
||||
.page.about { background: linear-gradient(120deg, #0a0a0a 55%, #ff3366 80%, #ff6699 100%); min-height: 100vh; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
|
||||
.nav-link { color: #fff; margin: 0 12px; text-decoration: none; font-weight: 600; transition: color 0.2s, text-shadow 0.2s; }
|
||||
.nav-link:hover { color: #ff6699; text-shadow: 0 0 8px #ff6699; }
|
||||
.hero-banner { position: relative; height: 340px; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
|
||||
.hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 60% 40%, #ff3366 0%, #0a0a0a 80%); opacity: 0.7; z-index: 1; }
|
||||
.hero-content { position: relative; z-index: 2; text-align: center; }
|
||||
.page-title { font-size: 3em; font-weight: 900; margin-bottom: 12px; letter-spacing: 2px; color: #fff; }
|
||||
.page-title.animated .fade-in { animation: fadeInDown 1s cubic-bezier(.77,0,.175,1) both; display: inline-block; }
|
||||
.page-desc.fade-in-delay { animation: fadeInUp 1.2s cubic-bezier(.77,0,.175,1) both; display: block; }
|
||||
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.page-desc { font-size: 1.2em; margin-bottom: 24px; color: #fff; }
|
||||
.glass-card { background: rgba(255,255,255,0.10); border-radius: 28px; box-shadow: 0 4px 32px #ff336680; backdrop-filter: blur(16px); margin: 40px auto; max-width: 650px; padding: 40px 36px; color: #fff; border: 2px solid #ff3366; }
|
||||
ul { color: #fff; margin-top: 24px; padding-left: 24px; }
|
||||
ul li { margin-bottom: 14px; transition: color 0.2s, transform 0.2s; cursor: pointer; font-size: 1.08em; }
|
||||
ul li:hover { color: #ff6699; transform: scale(1.05); }
|
||||
.page-footer { text-align: center; margin-top: 48px; color: #fff; font-size: 1em; opacity: 0.7; }
|
||||
.page-footer a { color: #ff6699; margin-left: 16px; text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-banner { height: auto; min-height: 280px; padding: 40px 20px; }
|
||||
.page-title { font-size: 2em; }
|
||||
.page-desc { font-size: 1em; }
|
||||
.glass-card { margin: 24px 16px; padding: 28px 20px; }
|
||||
ul li { font-size: 1em; }
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
</MainLayout>
|
||||
78
src/pages/community.astro
Normal file
78
src/pages/community.astro
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
// Community Page
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout>
|
||||
<nav class="container">
|
||||
<div class="logo">AETHEX</div>
|
||||
<div class="nav-links">
|
||||
<a href="/foundation" class="nav-link">Foundation</a>
|
||||
<a href="/corporation" class="nav-link">Corporation</a>
|
||||
<a href="/labs" class="nav-link">Labs</a>
|
||||
<a href="/products" class="nav-link">Products</a>
|
||||
<a href="/community" class="nav-link">Community</a>
|
||||
<a href="/docs" class="nav-link">Docs</a>
|
||||
<a href="/about" class="nav-link">About</a>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="page community">
|
||||
<section class="hero-banner">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-content">
|
||||
<h1 class="page-title animated">
|
||||
<span class="fade-in">Community</span>
|
||||
</h1>
|
||||
<p class="page-desc fade-in-delay">Join the AeThex Developer Community</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="glass-card">
|
||||
<section class="fade-in-section">
|
||||
<h2>Get Involved</h2>
|
||||
<p>Connect with developers, creators, and enthusiasts building the future of the metaverse.</p>
|
||||
<ul>
|
||||
<li>Discord Server</li>
|
||||
<li>Developer Forums</li>
|
||||
<li>GitHub Discussions</li>
|
||||
<li>Monthly Meetups</li>
|
||||
<li>Contributor Program</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<footer class="page-footer">
|
||||
<span>© AeThex 2026</span>
|
||||
<a href="/">Home</a>
|
||||
<a href="/about">About</a>
|
||||
</footer>
|
||||
<style>
|
||||
.fade-in-section { opacity: 0; transform: translateY(32px); animation: fadeInSection 1.2s 0.5s cubic-bezier(.77,0,.175,1) forwards; }
|
||||
@keyframes fadeInSection { to { opacity: 1; transform: none; } }
|
||||
.page.community { background: linear-gradient(120deg, #0a0a0a 55%, #00cc99 80%, #00ff99 100%); min-height: 100vh; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
|
||||
.nav-link { color: #fff; margin: 0 12px; text-decoration: none; font-weight: 600; transition: color 0.2s, text-shadow 0.2s; }
|
||||
.nav-link:hover { color: #00ff99; text-shadow: 0 0 8px #00ff99; }
|
||||
.hero-banner { position: relative; height: 340px; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
|
||||
.hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 60% 40%, #00cc99 0%, #0a0a0a 80%); opacity: 0.7; z-index: 1; }
|
||||
.hero-content { position: relative; z-index: 2; text-align: center; }
|
||||
.page-title { font-size: 3em; font-weight: 900; margin-bottom: 12px; letter-spacing: 2px; color: #fff; }
|
||||
.page-title.animated .fade-in { animation: fadeInDown 1s cubic-bezier(.77,0,.175,1) both; display: inline-block; }
|
||||
.page-desc.fade-in-delay { animation: fadeInUp 1.2s cubic-bezier(.77,0,.175,1) both; display: block; }
|
||||
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.page-desc { font-size: 1.2em; margin-bottom: 24px; color: #fff; }
|
||||
.glass-card { background: rgba(255,255,255,0.10); border-radius: 28px; box-shadow: 0 4px 32px #00cc9980; backdrop-filter: blur(16px); margin: 40px auto; max-width: 650px; padding: 40px 36px; color: #fff; border: 2px solid #00cc99; }
|
||||
ul { color: #fff; margin-top: 24px; padding-left: 24px; }
|
||||
ul li { margin-bottom: 14px; transition: color 0.2s, transform 0.2s; cursor: pointer; font-size: 1.08em; }
|
||||
ul li:hover { color: #00ff99; transform: scale(1.05); }
|
||||
.page-footer { text-align: center; margin-top: 48px; color: #fff; font-size: 1em; opacity: 0.7; }
|
||||
.page-footer a { color: #00ff99; margin-left: 16px; text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-banner { height: auto; min-height: 280px; padding: 40px 20px; }
|
||||
.page-title { font-size: 2em; }
|
||||
.page-desc { font-size: 1em; }
|
||||
.glass-card { margin: 24px 16px; padding: 28px 20px; }
|
||||
ul li { font-size: 1em; }
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
</MainLayout>
|
||||
78
src/pages/docs.astro
Normal file
78
src/pages/docs.astro
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
// Documentation Page
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout>
|
||||
<nav class="container">
|
||||
<div class="logo">AETHEX</div>
|
||||
<div class="nav-links">
|
||||
<a href="/foundation" class="nav-link">Foundation</a>
|
||||
<a href="/corporation" class="nav-link">Corporation</a>
|
||||
<a href="/labs" class="nav-link">Labs</a>
|
||||
<a href="/products" class="nav-link">Products</a>
|
||||
<a href="/community" class="nav-link">Community</a>
|
||||
<a href="/docs" class="nav-link">Docs</a>
|
||||
<a href="/about" class="nav-link">About</a>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="page docs">
|
||||
<section class="hero-banner">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-content">
|
||||
<h1 class="page-title animated">
|
||||
<span class="fade-in">Documentation</span>
|
||||
</h1>
|
||||
<p class="page-desc fade-in-delay">Guides, APIs & Technical References</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="glass-card">
|
||||
<section class="fade-in-section">
|
||||
<h2>Developer Resources</h2>
|
||||
<p>Everything you need to build with AeThex infrastructure.</p>
|
||||
<ul>
|
||||
<li>Getting Started Guide</li>
|
||||
<li>API Reference</li>
|
||||
<li>SDK Documentation</li>
|
||||
<li>Tutorials & Examples</li>
|
||||
<li>Best Practices</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<footer class="page-footer">
|
||||
<span>© AeThex 2026</span>
|
||||
<a href="/">Home</a>
|
||||
<a href="/about">About</a>
|
||||
</footer>
|
||||
<style>
|
||||
.fade-in-section { opacity: 0; transform: translateY(32px); animation: fadeInSection 1.2s 0.5s cubic-bezier(.77,0,.175,1) forwards; }
|
||||
@keyframes fadeInSection { to { opacity: 1; transform: none; } }
|
||||
.page.docs { background: linear-gradient(120deg, #0a0a0a 55%, #3399ff 80%, #66ccff 100%); min-height: 100vh; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
|
||||
.nav-link { color: #fff; margin: 0 12px; text-decoration: none; font-weight: 600; transition: color 0.2s, text-shadow 0.2s; }
|
||||
.nav-link:hover { color: #66ccff; text-shadow: 0 0 8px #66ccff; }
|
||||
.hero-banner { position: relative; height: 340px; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
|
||||
.hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 60% 40%, #3399ff 0%, #0a0a0a 80%); opacity: 0.7; z-index: 1; }
|
||||
.hero-content { position: relative; z-index: 2; text-align: center; }
|
||||
.page-title { font-size: 3em; font-weight: 900; margin-bottom: 12px; letter-spacing: 2px; color: #fff; }
|
||||
.page-title.animated .fade-in { animation: fadeInDown 1s cubic-bezier(.77,0,.175,1) both; display: inline-block; }
|
||||
.page-desc.fade-in-delay { animation: fadeInUp 1.2s cubic-bezier(.77,0,.175,1) both; display: block; }
|
||||
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.page-desc { font-size: 1.2em; margin-bottom: 24px; color: #fff; }
|
||||
.glass-card { background: rgba(255,255,255,0.10); border-radius: 28px; box-shadow: 0 4px 32px #3399ff80; backdrop-filter: blur(16px); margin: 40px auto; max-width: 650px; padding: 40px 36px; color: #fff; border: 2px solid #3399ff; }
|
||||
ul { color: #fff; margin-top: 24px; padding-left: 24px; }
|
||||
ul li { margin-bottom: 14px; transition: color 0.2s, transform 0.2s; cursor: pointer; font-size: 1.08em; }
|
||||
ul li:hover { color: #66ccff; transform: scale(1.05); }
|
||||
.page-footer { text-align: center; margin-top: 48px; color: #fff; font-size: 1em; opacity: 0.7; }
|
||||
.page-footer a { color: #66ccff; margin-left: 16px; text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-banner { height: auto; min-height: 280px; padding: 40px 20px; }
|
||||
.page-title { font-size: 2em; }
|
||||
.page-desc { font-size: 1em; }
|
||||
.glass-card { margin: 24px 16px; padding: 28px 20px; }
|
||||
ul li { font-size: 1em; }
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
</MainLayout>
|
||||
78
src/pages/products.astro
Normal file
78
src/pages/products.astro
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
// Products Page
|
||||
import MainLayout from '../layouts/MainLayout.astro';
|
||||
---
|
||||
|
||||
<MainLayout>
|
||||
<nav class="container">
|
||||
<div class="logo">AETHEX</div>
|
||||
<div class="nav-links">
|
||||
<a href="/foundation" class="nav-link">Foundation</a>
|
||||
<a href="/corporation" class="nav-link">Corporation</a>
|
||||
<a href="/labs" class="nav-link">Labs</a>
|
||||
<a href="/products" class="nav-link">Products</a>
|
||||
<a href="/community" class="nav-link">Community</a>
|
||||
<a href="/docs" class="nav-link">Docs</a>
|
||||
<a href="/about" class="nav-link">About</a>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="page products">
|
||||
<section class="hero-banner">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-content">
|
||||
<h1 class="page-title animated">
|
||||
<span class="fade-in">Products</span>
|
||||
</h1>
|
||||
<p class="page-desc fade-in-delay">Tools & Services for Metaverse Development</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="glass-card">
|
||||
<section class="fade-in-section">
|
||||
<h2>Our Products</h2>
|
||||
<p>Enterprise-grade tools and services built for metaverse creators and developers.</p>
|
||||
<ul>
|
||||
<li>AeThex Studio IDE</li>
|
||||
<li>Nexus Engine</li>
|
||||
<li>Asset Marketplace</li>
|
||||
<li>Cloud Infrastructure</li>
|
||||
<li>Analytics Dashboard</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<footer class="page-footer">
|
||||
<span>© AeThex 2026</span>
|
||||
<a href="/">Home</a>
|
||||
<a href="/about">About</a>
|
||||
</footer>
|
||||
<style>
|
||||
.fade-in-section { opacity: 0; transform: translateY(32px); animation: fadeInSection 1.2s 0.5s cubic-bezier(.77,0,.175,1) forwards; }
|
||||
@keyframes fadeInSection { to { opacity: 1; transform: none; } }
|
||||
.page.products { background: linear-gradient(120deg, #0a0a0a 55%, #6633ff 80%, #9966ff 100%); min-height: 100vh; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
|
||||
.nav-link { color: #fff; margin: 0 12px; text-decoration: none; font-weight: 600; transition: color 0.2s, text-shadow 0.2s; }
|
||||
.nav-link:hover { color: #9966ff; text-shadow: 0 0 8px #9966ff; }
|
||||
.hero-banner { position: relative; height: 340px; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
|
||||
.hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 60% 40%, #6633ff 0%, #0a0a0a 80%); opacity: 0.7; z-index: 1; }
|
||||
.hero-content { position: relative; z-index: 2; text-align: center; }
|
||||
.page-title { font-size: 3em; font-weight: 900; margin-bottom: 12px; letter-spacing: 2px; color: #fff; }
|
||||
.page-title.animated .fade-in { animation: fadeInDown 1s cubic-bezier(.77,0,.175,1) both; display: inline-block; }
|
||||
.page-desc.fade-in-delay { animation: fadeInUp 1.2s cubic-bezier(.77,0,.175,1) both; display: block; }
|
||||
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.page-desc { font-size: 1.2em; margin-bottom: 24px; color: #fff; }
|
||||
.glass-card { background: rgba(255,255,255,0.10); border-radius: 28px; box-shadow: 0 4px 32px #6633ff80; backdrop-filter: blur(16px); margin: 40px auto; max-width: 650px; padding: 40px 36px; color: #fff; border: 2px solid #6633ff; }
|
||||
ul { color: #fff; margin-top: 24px; padding-left: 24px; }
|
||||
ul li { margin-bottom: 14px; transition: color 0.2s, transform 0.2s; cursor: pointer; font-size: 1.08em; }
|
||||
ul li:hover { color: #9966ff; transform: scale(1.05); }
|
||||
.page-footer { text-align: center; margin-top: 48px; color: #fff; font-size: 1em; opacity: 0.7; }
|
||||
.page-footer a { color: #9966ff; margin-left: 16px; text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-banner { height: auto; min-height: 280px; padding: 40px 20px; }
|
||||
.page-title { font-size: 2em; }
|
||||
.page-desc { font-size: 1em; }
|
||||
.glass-card { margin: 24px 16px; padding: 28px 20px; }
|
||||
ul li { font-size: 1em; }
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
</MainLayout>
|
||||
Loading…
Reference in a new issue