Add: Prototype outreach website with placeholders
Initial version of the outreach landing page. Includes placeholder and stock images and placeholder developer names for team section.
This commit is contained in:
Jona Walpert
@@ -1,8 +1,12 @@
|
||||
game.name = Example Game
|
||||
game.command = java -jar exampleGame.jar
|
||||
game.name = Casono
|
||||
# Default client command (example)
|
||||
game.command = java -jar casono.jar client <serverip>:<serverport> [username]
|
||||
# Explicit client command property
|
||||
game.client.command = java -jar casono.jar client <serverip>:<serverport> [username]
|
||||
# Server command example
|
||||
game.server.command = java -jar casono.jar server <listenport>
|
||||
game.description.file = index.html
|
||||
game.screenshot.file = example.png
|
||||
game.server.command = java -jar exampleGame.jar
|
||||
game.screenshot.file = screenshot.png
|
||||
game.use = true
|
||||
game.year = 2020
|
||||
game.developers = Tom Cat, Jerry Mouse, William Hanna, Joseph Barbera
|
||||
game.year = 2026
|
||||
game.developers = Lars Winzer, Jona Walpert, Matthis Müller, Julian Gerber
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 713 KiB |
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450">
|
||||
<rect width="800" height="450" rx="20" fill="#07101a" />
|
||||
<ellipse cx="400" cy="240" rx="300" ry="120" fill="#0b5a2b" />
|
||||
<g fill="#d4b26a" font-family="Cinzel, serif" font-size="32" text-anchor="middle">
|
||||
<text x="400" y="60">Casono Table Preview</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 363 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
|
||||
<rect width="240" height="240" rx="20" fill="#141212" />
|
||||
<circle cx="120" cy="84" r="44" fill="#ffffff" />
|
||||
<text x="120" y="150" font-family="Lato, sans-serif" font-size="18" fill="#fff" text-anchor="middle">Jona</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 321 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
|
||||
<rect width="240" height="240" rx="20" fill="#141212" />
|
||||
<circle cx="120" cy="84" r="44" fill="#ffffff" />
|
||||
<text x="120" y="150" font-family="Lato, sans-serif" font-size="18" fill="#fff" text-anchor="middle">Julian</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 323 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
|
||||
<rect width="240" height="240" rx="20" fill="#141212" />
|
||||
<circle cx="120" cy="84" r="44" fill="#ffffff" />
|
||||
<text x="120" y="150" font-family="Lato, sans-serif" font-size="18" fill="#fff" text-anchor="middle">Lars</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 321 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
|
||||
<rect width="240" height="240" rx="20" fill="#141212" />
|
||||
<circle cx="120" cy="84" r="44" fill="#ffffff" />
|
||||
<text x="120" y="150" font-family="Lato, sans-serif" font-size="18" fill="#fff" text-anchor="middle">Matthis</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 324 B |
+180
-42
@@ -1,53 +1,191 @@
|
||||
<html>
|
||||
<!-- Dies ist ein html Kommentar -->
|
||||
<!-- Ändert in diesem File sämtliche Platzhalter, wie z.B. den Spielnamen in der nächsten Linie -->
|
||||
<head><title>Example Game</title><link rel="stylesheet" href="main.css"></head>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Casono — Texas Hold'em Poker</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" type="image/png" href="images/logo.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Lato:wght@300;400;700&display=swap"
|
||||
rel="stylesheet">
|
||||
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Header nicht verändern -->
|
||||
<header class="site-header"><div class="wrapper"><a class="site-title" href="/cs108/">Programmierprojekt - Computerspiele</a></div></header><div class="page-content"><div class="wrapper"><div class="home">
|
||||
<header class="sticky-nav">
|
||||
<nav>
|
||||
<div class="logo" data-aos="fade-down"><img src="images/logo.png" alt="Casono" class="site-logo"></div>
|
||||
<ul id="nav-links" data-aos="fade-down" data-aos-delay="100">
|
||||
<li><a href="#hero">Home</a></li>
|
||||
<li><a href="#about">Über</a></li>
|
||||
<li><a href="#features">Features</a></li>
|
||||
<li><a href="#world">Tisch</a></li>
|
||||
<li><a href="#resources">Download</a></li>
|
||||
<li><a href="#team">Team</a></li>
|
||||
</ul>
|
||||
<button class="burger-menu" id="burger-menu" aria-label="Toggle navigation menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<h1>Example Game</h1>
|
||||
Hier könnt ihr einen Satz über euer Spiel sagen.
|
||||
<main>
|
||||
<section id="hero" class="hero-section">
|
||||
<div class="hero-content">
|
||||
<h1 data-aos="zoom-in">Casono</h1>
|
||||
<p class="tagline" data-aos="fade-up" data-aos-delay="300">Erlebe den Nervenkitzel von Texas Hold'em
|
||||
Poker</p>
|
||||
<p class="description" data-aos="fade-up" data-aos-delay="500">Casono ist ein stilvolles Texas Hold'em
|
||||
Poker-Erlebnis mit spannenden Matches und eleganter Optik.</p>
|
||||
<a href="#features" class="cta-button" data-aos="zoom-in-up" data-aos-delay="700">Mehr erfahren</a>
|
||||
</div>
|
||||
<div class="hero-overlay"></div>
|
||||
</section>
|
||||
|
||||
<!-- Dieser Block ist dafür verantwortlich, den Trailer / das Gameplay Video und euren Screenshot einzubauen. Verändert ihn nicht, sondern überschreibt einfach die Dateien -->
|
||||
<br>
|
||||
<img width="250" src="screenshot.png">
|
||||
<br>
|
||||
<br>
|
||||
<h2>Trailer</h2>
|
||||
<video controls width="250">
|
||||
<source src="video.mp4"
|
||||
type="video/mp4">
|
||||
Sorry, your browser doesn't support embedded videos.
|
||||
</video>
|
||||
<br>
|
||||
<br>
|
||||
<section id="about" class="content-section">
|
||||
<h2 data-aos="fade-up">Über Casono</h2>
|
||||
<p data-aos="fade-up" data-aos-delay="100">Casono kombiniert echtes Casino-Feeling mit leicht zugänglichem
|
||||
Gameplay. Spiele online gegen Freunde.</p>
|
||||
<div class="about-video-container" data-aos="zoom-in" data-aos-delay="200">
|
||||
<video class="about-video" controls playsinline preload="metadata" loading="lazy">
|
||||
<source src="video.mp4" type="video/mp4">
|
||||
Ihr Browser unterstützt das Video-Tag nicht.
|
||||
</video>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Entwickler anpassen -->
|
||||
<section id="features" class="features-section">
|
||||
<h2 data-aos="fade-up">Key Features</h2>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card" data-accent="1" data-aos="fade-up" data-aos-delay="100">
|
||||
<h3>Sitzungen & Matchmaking</h3>
|
||||
<p>Realistisches Poker-Erlebnis mit spannenden Matches.</p>
|
||||
</div>
|
||||
|
||||
<h3>Entwickler:</h3>
|
||||
<ul>
|
||||
<li> Edgar Codd </li>
|
||||
<li> Lynn Conway </li>
|
||||
<li> Ada Lovelace </li>
|
||||
<li> Alan Turing </li>
|
||||
</ul>
|
||||
<div class="feature-card" data-accent="2" data-aos="fade-up" data-aos-delay="300">
|
||||
<h3>Stilvolles UI</h3>
|
||||
<p>Elegante udn intuitive Benutzeroberfläche für ein immersives Erlebnis.</p>
|
||||
</div>
|
||||
<div class="feature-card" data-accent="3" data-aos="fade-up" data-aos-delay="400">
|
||||
<h3>Einfache Installation</h3>
|
||||
<p>Download, entpacken, starten, fertig!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Nachfolgend sollt ihr die Tasten angeben, welche man braucht um euer Spiel zu Spielen. Um weitere Tasten hinzuzufügen könnt Ihr einfach eine Zeile kopieren und den Buchstaben oder das Wort zwischen <i>Beispiel:</i> ändern. -->
|
||||
<section id="world" class="content-section world-section">
|
||||
<h2 data-aos="fade-up">Der Tisch</h2>
|
||||
<p data-aos="fade-up" data-aos-delay="100"> Spielen udn chatten in einer gemeinsamen eleganten Ansicht.</p>
|
||||
<div class="world-map-container" data-aos="zoom-in" data-aos-delay="200">
|
||||
<img src="images/table_preview.png" alt="Table Preview" class="world-map-image" loading="lazy">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2>Steuerung:</h2>
|
||||
<i>Pfeiltasten:</i> bewegen<br/>
|
||||
<i>Leertaste:</i> springen<br/>
|
||||
<i>I:</i> Inventar<br/>
|
||||
<i>Esc:</i> Spiel beenden<br/>
|
||||
<i>P:</i> Spiel pausieren
|
||||
<section id="resources" class="resources-section">
|
||||
<h2 data-aos="zoom-in-up">Download & Ressourcen</h2>
|
||||
<div class="download-section" data-aos="zoom-in-up" data-aos-delay="100">
|
||||
<a href="downloads/casono-latest.zip" class="download-button" download="casono-latest.zip">Download Game
|
||||
(ZIP)</a>
|
||||
</div>
|
||||
|
||||
<!-- Falls ihr noch zusätzliche Informationen wie Items oder andere Erklärungen angeben wollt, könnt Ihr das wie nachfolgend machen. -->
|
||||
<div class="run-instructions" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="code-window" role="region" aria-label="Run instructions">
|
||||
<code>
|
||||
# Requires Java 25
|
||||
|
||||
<h2>Inventar:</h2>
|
||||
<i>Eisblock:</i> Gegner können sich nicht mehr bewegen<br/>
|
||||
<i>Schwarzes Loch:</i> Steuerung der Gegner wird invertiert
|
||||
# Start the Server:
|
||||
java -jar casono.jar server <listenport>
|
||||
|
||||
</div></div></div></div></body>
|
||||
</html>
|
||||
# Start the Client:
|
||||
java -jar casono.jar client <serverip>:<serverport> [username]
|
||||
|
||||
# Replace <listenport>, <serverip>, <serverport> and [username] with your values.
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="team" class="team-section">
|
||||
<h2 data-aos="fade-up">Das Team</h2>
|
||||
<div class="team-grid">
|
||||
<div class="team-member" data-aos="fade-up" data-aos-delay="100">
|
||||
<img src="images/team/lars.svg" alt="Lars Winzer" class="team-photo" loading="lazy">
|
||||
<h3>Lars Winzer</h3>
|
||||
<p>Server architecture & Server side networking</p>
|
||||
</div>
|
||||
<div class="team-member" data-aos="fade-up" data-aos-delay="200">
|
||||
<img src="images/team/jona.svg" alt="Jona Walpert" class="team-photo" loading="lazy">
|
||||
<h3>Jona Walpert</h3>
|
||||
<p>UI & UX Design</p>
|
||||
</div>
|
||||
<div class="team-member" data-aos="fade-up" data-aos-delay="300">
|
||||
<img src="images/team/matthis.svg" alt="Matthis Müller" class="team-photo" loading="lazy">
|
||||
<h3>Matthis Müller</h3>
|
||||
<p>Client side development</p>
|
||||
</div>
|
||||
<div class="team-member" data-aos="fade-up" data-aos-delay="400">
|
||||
<img src="images/team/julian.svg" alt="Julian Gerber" class="team-photo" loading="lazy">
|
||||
<h3>Julian Gerber</h3>
|
||||
<p>UI & UX Design, Game Engine</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="github-link" data-aos="fade-up" data-aos-delay="500">
|
||||
<a href="https://git.scicore.unibas.ch/cs108-fs26/Gruppe-13">
|
||||
<i class="fa-brands fa-github github-icon"></i>
|
||||
Projekt-Repo
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>2026 Casono — Gruppe 13</p>
|
||||
</footer>
|
||||
|
||||
<div id="trailer-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-button" id="close-trailer-modal">×</span>
|
||||
<video id="trailer-video" width="100%" controls autoplay muted loop playsinline>
|
||||
<source src="video.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-button" id="close-demo-modal">×</span>
|
||||
<video id="demo-video" width="100%" controls autoplay muted loop playsinline>
|
||||
<source src="video.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||
<script>
|
||||
AOS.init({ duration: 800, once: true });
|
||||
|
||||
document.getElementById('burger-menu')?.addEventListener('click', function () {
|
||||
const nav = document.querySelector('nav ul');
|
||||
nav.classList.toggle('nav-active');
|
||||
this.classList.toggle('active');
|
||||
});
|
||||
|
||||
// modal open/close handlers
|
||||
document.getElementById('close-trailer-modal')?.addEventListener('click', () => {
|
||||
document.getElementById('trailer-modal').classList.remove('show');
|
||||
});
|
||||
document.getElementById('close-demo-modal')?.addEventListener('click', () => {
|
||||
document.getElementById('demo-modal').classList.remove('show');
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,667 +0,0 @@
|
||||
/**
|
||||
* Reset some basic elements
|
||||
*/
|
||||
body, h1, h2, h3, h4, h5, h6,
|
||||
p, blockquote, pre, hr,
|
||||
dl, dd, ol, ul, figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Basic styling
|
||||
*/
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
font-weight: 300;
|
||||
color: #111;
|
||||
background-color: #fdfdfd;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set `margin-bottom` to maintain vertical rhythm
|
||||
*/
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
p, blockquote, pre,
|
||||
ul, ol, dl, figure,
|
||||
.highlight {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Images
|
||||
*/
|
||||
img {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/**
|
||||
* Figures
|
||||
*/
|
||||
figure > img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Lists
|
||||
*/
|
||||
ul, ol {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
li > ul,
|
||||
li > ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Headings
|
||||
*/
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
a {
|
||||
color: #2a7ae2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #1756a9;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #111;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Blockquotes
|
||||
*/
|
||||
blockquote {
|
||||
color: #828282;
|
||||
border-left: 4px solid #e8e8e8;
|
||||
padding-left: 15px;
|
||||
font-size: 18px;
|
||||
letter-spacing: -1px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Code formatting
|
||||
*/
|
||||
pre,
|
||||
code {
|
||||
font-size: 15px;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 3px;
|
||||
background-color: #eef;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 8px 12px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
border: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrapper
|
||||
*/
|
||||
.wrapper {
|
||||
max-width: -webkit-calc(800px - (30px * 2));
|
||||
max-width: calc(800px - (30px * 2));
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.wrapper {
|
||||
max-width: -webkit-calc(800px - (30px));
|
||||
max-width: calc(800px - (30px));
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clearfix
|
||||
*/
|
||||
.wrapper:after, .footer-col-wrapper:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/**
|
||||
* Icons
|
||||
*/
|
||||
.icon > svg {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon > svg path {
|
||||
fill: #828282;
|
||||
}
|
||||
|
||||
/**
|
||||
* Site header
|
||||
*/
|
||||
.site-header {
|
||||
border-top: 5px solid #424242;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
min-height: 56px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-size: 26px;
|
||||
line-height: 56px;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.site-title, .site-title:visited {
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
float: right;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
.site-nav .menu-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-nav .page-link {
|
||||
color: #111;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.site-nav .page-link:not(:first-child) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.site-nav {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 30px;
|
||||
background-color: #fdfdfd;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.site-nav .menu-icon {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 36px;
|
||||
height: 26px;
|
||||
line-height: 0;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-nav .menu-icon > svg {
|
||||
width: 18px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.site-nav .menu-icon > svg path {
|
||||
fill: #424242;
|
||||
}
|
||||
|
||||
.site-nav .trigger {
|
||||
clear: both;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-nav:hover .trigger {
|
||||
display: block;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.site-nav .page-link {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Site footer
|
||||
*/
|
||||
.site-footer {
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.footer-heading {
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.contact-list,
|
||||
.social-media-list {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.footer-col-wrapper {
|
||||
font-size: 15px;
|
||||
color: #828282;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
.footer-col {
|
||||
float: left;
|
||||
margin-bottom: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.footer-col-1 {
|
||||
width: -webkit-calc(35% - (30px / 2));
|
||||
width: calc(35% - (30px / 2));
|
||||
}
|
||||
|
||||
.footer-col-2 {
|
||||
width: -webkit-calc(20% - (30px / 2));
|
||||
width: calc(20% - (30px / 2));
|
||||
}
|
||||
|
||||
.footer-col-3 {
|
||||
width: -webkit-calc(45% - (30px / 2));
|
||||
width: calc(45% - (30px / 2));
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.footer-col-1,
|
||||
.footer-col-2 {
|
||||
width: -webkit-calc(50% - (30px / 2));
|
||||
width: calc(50% - (30px / 2));
|
||||
}
|
||||
|
||||
.footer-col-3 {
|
||||
width: -webkit-calc(100% - (30px / 2));
|
||||
width: calc(100% - (30px / 2));
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.footer-col {
|
||||
float: none;
|
||||
width: -webkit-calc(100% - (30px / 2));
|
||||
width: calc(100% - (30px / 2));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Page content
|
||||
*/
|
||||
.page-content {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
margin-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.post-list > li {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 14px;
|
||||
color: #828282;
|
||||
}
|
||||
|
||||
.post-link {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Posts
|
||||
*/
|
||||
.post-header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 42px;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.post-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.post-content h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.post-content h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-content h3 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.post-content h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-content h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.post-content h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Syntax highlighting styles
|
||||
*/
|
||||
.highlight {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.highlight .c {
|
||||
color: #998;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .err {
|
||||
color: #a61717;
|
||||
background-color: #e3d2d2;
|
||||
}
|
||||
|
||||
.highlight .k {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .o {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .cm {
|
||||
color: #998;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .cp {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .c1 {
|
||||
color: #998;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .cs {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .gd {
|
||||
color: #000;
|
||||
background-color: #fdd;
|
||||
}
|
||||
|
||||
.highlight .gd .x {
|
||||
color: #000;
|
||||
background-color: #faa;
|
||||
}
|
||||
|
||||
.highlight .ge {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .gr {
|
||||
color: #a00;
|
||||
}
|
||||
|
||||
.highlight .gh {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.highlight .gi {
|
||||
color: #000;
|
||||
background-color: #dfd;
|
||||
}
|
||||
|
||||
.highlight .gi .x {
|
||||
color: #000;
|
||||
background-color: #afa;
|
||||
}
|
||||
|
||||
.highlight .go {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.highlight .gp {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.highlight .gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .gu {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.highlight .gt {
|
||||
color: #a00;
|
||||
}
|
||||
|
||||
.highlight .kc {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .kd {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .kp {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .kr {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .kt {
|
||||
color: #458;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .m {
|
||||
color: #099;
|
||||
}
|
||||
|
||||
.highlight .s {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.highlight .na {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.highlight .nb {
|
||||
color: #0086B3;
|
||||
}
|
||||
|
||||
.highlight .nc {
|
||||
color: #458;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .no {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.highlight .ni {
|
||||
color: #800080;
|
||||
}
|
||||
|
||||
.highlight .ne {
|
||||
color: #900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .nf {
|
||||
color: #900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .nn {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.highlight .nt {
|
||||
color: #000080;
|
||||
}
|
||||
|
||||
.highlight .nv {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.highlight .ow {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .w {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.highlight .mf {
|
||||
color: #099;
|
||||
}
|
||||
|
||||
.highlight .mh {
|
||||
color: #099;
|
||||
}
|
||||
|
||||
.highlight .mi {
|
||||
color: #099;
|
||||
}
|
||||
|
||||
.highlight .mo {
|
||||
color: #099;
|
||||
}
|
||||
|
||||
.highlight .sb {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.highlight .sc {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.highlight .sd {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.highlight .s2 {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.highlight .se {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.highlight .sh {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.highlight .si {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.highlight .sx {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.highlight .sr {
|
||||
color: #009926;
|
||||
}
|
||||
|
||||
.highlight .s1 {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.highlight .ss {
|
||||
color: #990073;
|
||||
}
|
||||
|
||||
.highlight .bp {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.highlight .vc {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.highlight .vg {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.highlight .vi {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.highlight .il {
|
||||
color: #099;
|
||||
}
|
||||
@@ -0,0 +1,652 @@
|
||||
/* Basic Reset */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--background-color: #f6efe4;
|
||||
/* page background */
|
||||
--card-bg-color: #f6efe4;
|
||||
--nav-bg-color: rgba(69, 2, 6, 0.96);
|
||||
--primary-color: #0b0b0b;
|
||||
/* main text on light background */
|
||||
--secondary-color: #6b6b6b;
|
||||
--accent-color: #a88130;
|
||||
/* accent */
|
||||
--button-color: #a40404;
|
||||
/* primary buttons */
|
||||
--button-hover: #fbf0df;
|
||||
--section-team-bg: #a40404;
|
||||
/* meet the team background */
|
||||
--team-button-bg: #fbf0df;
|
||||
/* team buttons start */
|
||||
--team-button-hover: #450206;
|
||||
/* team button hover */
|
||||
--header-bg: #450206;
|
||||
/* header background */
|
||||
--hero-overlay-color: rgba(0, 0, 0, 0.12);
|
||||
--font-title: 'Cinzel', serif;
|
||||
--font-body: 'Lato', sans-serif;
|
||||
--section-padding: 5rem 5%;
|
||||
--card-padding: 1.6rem;
|
||||
--grid-gap: 1.6rem;
|
||||
--transition: 0.28s cubic-bezier(.2, .9, .2, 1);
|
||||
--shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
--shadow-medium: 0 6px 14px rgba(0, 0, 0, 0.08);
|
||||
--shadow-heavy: 0 12px 28px rgba(0, 0, 0, 0.12);
|
||||
--border-radius: 12px;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background-color: var(--background-color);
|
||||
color: var(--primary-color);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--font-title);
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.sticky-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: var(--header-bg);
|
||||
z-index: 1000;
|
||||
box-shadow: var(--shadow-medium);
|
||||
padding: 14px 0;
|
||||
/* taller header */
|
||||
transition: background-color var(--transition);
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: var(--font-title);
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: var(--accent-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 48px;
|
||||
margin-right: 48px;
|
||||
/* push logo further left and add space to the nav links */
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
max-height: 56px;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
/* push links to the right */
|
||||
margin-right: 56px;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
margin-left: 1.2rem;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
font-weight: bold;
|
||||
padding: 0.5rem 0;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
nav ul li a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
background-color: var(--accent-color);
|
||||
transition: width var(--transition);
|
||||
}
|
||||
|
||||
nav ul li a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Header text color to contrast against dark header */
|
||||
.logo {
|
||||
color: var(--team-button-bg);
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
color: var(--team-button-bg);
|
||||
}
|
||||
|
||||
/* Burger Menu Button (Hidden on Desktop) */
|
||||
.burger-menu {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
z-index: 1100;
|
||||
}
|
||||
|
||||
.burger-menu span {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background-color: var(--primary-color);
|
||||
margin: 5px 0;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: white;
|
||||
background-image: url('images/background.png');
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
padding: var(--section-padding);
|
||||
}
|
||||
|
||||
/* Hero CTA styled like team buttons per request */
|
||||
.hero-section .cta-button {
|
||||
background-color: var(--team-button-bg);
|
||||
color: var(--section-team-bg);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.hero-section .cta-button:hover {
|
||||
background-color: var(--team-button-hover);
|
||||
color: var(--team-button-bg);
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: var(--hero-overlay-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.hero-content .tagline {
|
||||
font-size: 1.4rem;
|
||||
color: #f6efe4;
|
||||
margin-bottom: 1.5rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hero-content .description {
|
||||
font-size: 1.1rem;
|
||||
color: #f6efe4;
|
||||
margin: 0 auto 2.5rem;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.cta-button,
|
||||
.download-button {
|
||||
display: inline-block;
|
||||
background-color: var(--button-color);
|
||||
color: var(--button-hover);
|
||||
padding: 0.9rem 2.2rem;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
transition: all var(--transition);
|
||||
box-shadow: var(--shadow-medium);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cta-button:hover,
|
||||
.download-button:hover {
|
||||
background-color: var(--button-hover);
|
||||
color: var(--button-color);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.download-button {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* General Content Sections */
|
||||
.content-section,
|
||||
.features-section,
|
||||
.resources-section,
|
||||
.team-section {
|
||||
padding: var(--section-padding);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Keep inner grids/content centered with a max width */
|
||||
.features-grid,
|
||||
.team-grid {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Center content and grid items site-wide */
|
||||
.content-section,
|
||||
.features-section,
|
||||
.resources-section,
|
||||
.team-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.features-grid,
|
||||
.team-grid {
|
||||
justify-items: center;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.team-grid {
|
||||
justify-content: center;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
/* Center nav links */
|
||||
.sticky-nav nav {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin-left: 0;
|
||||
gap: 3.2rem;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Make videos keep a sensible aspect ratio so they don't look flat */
|
||||
video,
|
||||
.modal-content video {
|
||||
aspect-ratio: 16/9;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
/* Story Section */
|
||||
.content-section p {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 1.1rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Decorative Divider */
|
||||
.features-section::before,
|
||||
.world-section::before,
|
||||
.resources-section::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 2px;
|
||||
background: linear-gradient(to right, transparent, var(--secondary-color), transparent);
|
||||
margin: 1rem auto;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Tighten spacing between world image and download */
|
||||
.world-section {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.resources-section {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features-section {
|
||||
background-color: var(--card-bg-color);
|
||||
}
|
||||
|
||||
.features-grid,
|
||||
.team-grid {
|
||||
display: grid;
|
||||
gap: var(--grid-gap);
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
.team-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
margin-top: 2.5rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.feature-card,
|
||||
.team-member {
|
||||
background-color: var(--background-color);
|
||||
padding: var(--card-padding);
|
||||
border-radius: var(--border-radius);
|
||||
text-align: center;
|
||||
border: 1px solid var(--secondary-color);
|
||||
transition: transform var(--transition), box-shadow var(--transition);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px) scale(1.02);
|
||||
box-shadow: var(--shadow-heavy);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
border-top: 4px solid transparent;
|
||||
}
|
||||
|
||||
.feature-card[data-accent="1"] {
|
||||
border-top-color: var(--accent-red);
|
||||
}
|
||||
|
||||
.feature-card[data-accent="2"] {
|
||||
border-top-color: var(--accent-green);
|
||||
}
|
||||
|
||||
.feature-card[data-accent="3"] {
|
||||
border-top-color: var(--accent-navy);
|
||||
}
|
||||
|
||||
.feature-card[data-accent="4"] {
|
||||
border-top-color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.team-member {
|
||||
background-color: #0f0e11;
|
||||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||||
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
border-color 0.25s;
|
||||
box-shadow: var(--shadow-light), 0 2px 8px 0 rgba(0, 0, 0, 0.18);
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.team-member:hover {
|
||||
transform: translateY(-10px) scale(1.04);
|
||||
box-shadow: 0 0 36px 8px rgba(11, 61, 145, 0.12), 0 6px 22px 0 rgba(0, 0, 0, 0.36);
|
||||
border-color: rgba(11, 61, 145, 0.18);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.feature-card .icon {
|
||||
width: 100px;
|
||||
margin-bottom: 1.5rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.feature-card h3,
|
||||
.team-member h3 {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 0.95rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.team-photo {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-bottom: 1.2rem;
|
||||
border: 2px solid rgba(255, 255, 255, 0.04);
|
||||
background: #141114;
|
||||
/* darker neutral placeholder (less white) */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Resources Section */
|
||||
.resources-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Team section uses the red background per request */
|
||||
.team-section {
|
||||
background-color: var(--section-team-bg);
|
||||
color: var(--team-button-bg);
|
||||
padding: var(--section-padding) 0;
|
||||
/* full-bleed background, inner padding on grid */
|
||||
}
|
||||
|
||||
.team-grid {
|
||||
padding: 0 5%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.team-section .cta-button,
|
||||
.team-section .download-button {
|
||||
background-color: var(--team-button-bg);
|
||||
color: var(--section-team-bg);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.team-section .cta-button:hover,
|
||||
.team-section .download-button:hover {
|
||||
background-color: var(--team-button-hover);
|
||||
color: var(--team-button-bg);
|
||||
}
|
||||
|
||||
/* Ensure AOS animations have a starting point */
|
||||
[data-aos] {
|
||||
opacity: 0;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
/* Ensure global CTA/Download buttons use the user-requested button color (unless overridden in team-section) */
|
||||
.cta-button {
|
||||
background-color: var(--button-color);
|
||||
color: var(--button-hover);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background-color: var(--button-hover);
|
||||
color: var(--button-color);
|
||||
}
|
||||
|
||||
.download-button {
|
||||
background-color: var(--button-color);
|
||||
color: var(--button-hover);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.download-button:hover {
|
||||
background-color: var(--button-hover);
|
||||
color: var(--button-color);
|
||||
}
|
||||
|
||||
/* World/table preview sizing + padding so it never touches edges */
|
||||
.world-map-container {
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.world-map-image {
|
||||
max-width: 100%;
|
||||
width: calc(100% - 32px);
|
||||
height: auto;
|
||||
padding: 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Modal and video: ensure padding and responsive scaling without distortion */
|
||||
.modal {
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: min(1000px, calc(100% - 48px));
|
||||
max-width: 100%;
|
||||
padding: 20px;
|
||||
background: var(--card-bg-color);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.modal-content video,
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: calc(100vh - 160px);
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Remove global side padding so sections can be full-bleed; keep inner content padded via grids */
|
||||
main,
|
||||
body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* Run instructions code window */
|
||||
.run-instructions {
|
||||
max-width: 900px;
|
||||
margin: 2rem auto 0;
|
||||
/* space above code window (gap from download button) */
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.run-instructions .code-window {
|
||||
background: #0b1220;
|
||||
color: #e6eef8;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 30px rgba(2, 6, 23, 0.45);
|
||||
overflow: auto;
|
||||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.run-instructions .code-window::before {
|
||||
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: -12px;
|
||||
background: var(--header-bg);
|
||||
color: var(--team-button-bg);
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.run-instructions .code-window code {
|
||||
display: block;
|
||||
white-space: pre;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.run-instructions .note {
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
Reference in New Issue
Block a user