Merge branch 'feat/outreach-landing-page' into 'main'
Add: Casono Website See merge request cs108-fs26/Gruppe-13!182
This commit is contained in:
Julian Kropff
@@ -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.
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: 611 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 |
+311
-42
@@ -1,53 +1,322 @@
|
||||
<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</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" data-i18n="navHome">Home</a></li>
|
||||
<li><a href="#about" data-i18n="navAbout">Über</a></li>
|
||||
<li><a href="#features" data-i18n="navFeatures">Features</a></li>
|
||||
<li><a href="#table" data-i18n="navTable">Tisch</a></li>
|
||||
<li><a href="#media" data-i18n="navMedia">Trailer & Gameplay</a></li>
|
||||
<li><a href="#resources" data-i18n="navDownload">Download</a></li>
|
||||
<li><a href="#team" data-i18n="navTeam">Team</a></li>
|
||||
</ul>
|
||||
<button id="language-toggle" class="language-toggle" type="button" aria-label="Switch language">EN</button>
|
||||
<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-i18n="heroTagline" data-aos="fade-up" data-aos-delay="300">Erlebe den
|
||||
Nervenkitzel von Texas Hold'em
|
||||
Poker</p>
|
||||
<p class="description" data-i18n="heroDescription" 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-i18n="heroCta" 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-i18n="aboutTitle" data-aos="fade-up">Über Casono</h2>
|
||||
<p data-i18n="aboutText" 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">
|
||||
<span data-i18n="videoFallback">Ihr Browser unterstützt das Video-Tag nicht.</span>
|
||||
</video>
|
||||
</div> -->
|
||||
</section>
|
||||
|
||||
<!-- Entwickler anpassen -->
|
||||
<section id="features" class="features-section">
|
||||
<h2 data-i18n="featuresTitle" 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 data-i18n="feature1Title">Sitzungen & Matchmaking</h3>
|
||||
<p data-i18n="feature1Text">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 data-i18n="feature2Title">Stilvolle UI</h3>
|
||||
<p data-i18n="feature2Text">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 data-i18n="feature3Title">Einfache Installation</h3>
|
||||
<p data-i18n="feature3Text">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="table" class="content-section table-section">
|
||||
<h2 data-i18n="tableTitle" data-aos="fade-up">Der Tisch</h2>
|
||||
<p data-i18n="tableText" data-aos="fade-up" data-aos-delay="100"> Spielen und chatten in einer gemeinsamen
|
||||
eleganten Ansicht.</p>
|
||||
<div class="table-preview-container" data-aos="zoom-in" data-aos-delay="200">
|
||||
<img src="images/table_preview.png" alt="Casino Tisch Vorschau" class="table-preview-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="media" class="media-section">
|
||||
<h2 data-i18n="mediaTitle" data-aos="fade-up">Trailer & Gameplay</h2>
|
||||
<p data-i18n="mediaText" data-aos="fade-up" data-aos-delay="100">Erhalte einen schnellen Eindruck vom Stil
|
||||
und vom Spielablauf.
|
||||
</p>
|
||||
<div class="media-grid" data-aos="fade-up" data-aos-delay="200">
|
||||
<article class="media-card">
|
||||
<h3 data-i18n="mediaTrailer">Trailer</h3>
|
||||
<video controls playsinline preload="metadata" loading="lazy">
|
||||
<source src="Casono-Trailer.webm" type="video/webm">
|
||||
<span data-i18n="videoFallback">Ihr Browser unterstützt das Video-Tag nicht.</span>
|
||||
</video>
|
||||
</article>
|
||||
<article class="media-card">
|
||||
<h3 data-i18n="mediaGameplay">Gameplay</h3>
|
||||
<video controls playsinline preload="metadata" loading="lazy">
|
||||
<source src="gameplay.mp4" type="video/mp4">
|
||||
<span data-i18n="videoFallback">Ihr Browser unterstützt das Video-Tag nicht.</span>
|
||||
</video>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Falls ihr noch zusätzliche Informationen wie Items oder andere Erklärungen angeben wollt, könnt Ihr das wie nachfolgend machen. -->
|
||||
<section id="resources" class="resources-section">
|
||||
<h2 data-i18n="resourcesTitle" data-aos="zoom-in-up">Download & Ressourcen</h2>
|
||||
<div class="download-section" data-aos="zoom-in-up" data-aos-delay="100">
|
||||
<a href="https://git.scicore.unibas.ch/cs108-fs26/Gruppe-13/-/archive/main/Gruppe-13-main.zip"
|
||||
class="download-button" data-i18n="downloadButton" target="_blank"
|
||||
rel="noopener noreferrer">Download Game
|
||||
(ZIP)</a>
|
||||
</div>
|
||||
|
||||
<h2>Inventar:</h2>
|
||||
<i>Eisblock:</i> Gegner können sich nicht mehr bewegen<br/>
|
||||
<i>Schwarzes Loch:</i> Steuerung der Gegner wird invertiert
|
||||
<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
|
||||
|
||||
</div></div></div></div></body>
|
||||
</html>
|
||||
# Start the Server:
|
||||
java -jar casono.jar server <listenport>
|
||||
|
||||
# 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-i18n="teamTitle" data-aos="fade-up">Das Team</h2>
|
||||
<div class="team-grid">
|
||||
<a class="team-member team-member-link" href="https://github.com/official-Cromatin" target="_blank"
|
||||
rel="noopener noreferrer" data-aos="fade-up" data-aos-delay="100">
|
||||
<img src="https://avatars.githubusercontent.com/u/92319467?v=4" alt="Lars Winzer" class="team-photo"
|
||||
loading="lazy">
|
||||
<h3>Lars Winzer</h3>
|
||||
<p>Server architecture & Server side networking</p>
|
||||
</a>
|
||||
<a class="team-member team-member-link" href="https://jona.walpert.ch/" target="_blank"
|
||||
rel="noopener noreferrer" data-aos="fade-up" data-aos-delay="200">
|
||||
<img src="https://avatars.githubusercontent.com/u/98217482?v=4" alt="Jona Walpert"
|
||||
class="team-photo" loading="lazy">
|
||||
<h3>Jona Walpert</h3>
|
||||
<p>UI & UX Design</p>
|
||||
</a>
|
||||
<a class="team-member team-member-link" href="https://github.com/ginkelmath" target="_blank"
|
||||
rel="noopener noreferrer" data-aos="fade-up" data-aos-delay="300">
|
||||
<img src="https://avatars.githubusercontent.com/u/160567160?v=4" alt="Matthis Ginkel"
|
||||
class="team-photo" loading="lazy">
|
||||
<h3>Matthis Ginkel</h3>
|
||||
<p>Client side development</p>
|
||||
</a>
|
||||
<a class="team-member team-member-link" href="https://github.com/17jk789" target="_blank"
|
||||
rel="noopener noreferrer" data-aos="fade-up" data-aos-delay="400">
|
||||
<img src="https://avatars.githubusercontent.com/u/189449499?v=4" alt="Julian Kropff"
|
||||
class="team-photo" loading="lazy">
|
||||
<h3>Julian Kropff</h3>
|
||||
<p>UI & UX Design, Game Engine</p>
|
||||
</a>
|
||||
</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>
|
||||
<span data-i18n="repoLink">Projekt-Repo</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<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="Casono-Trailer.webm" type="video/webm">
|
||||
</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="gameplay.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 });
|
||||
|
||||
const translations = {
|
||||
de: {
|
||||
navHome: 'Home',
|
||||
navAbout: 'Über',
|
||||
navFeatures: 'Features',
|
||||
navTable: 'Tisch',
|
||||
navMedia: 'Trailer & Gameplay',
|
||||
navDownload: 'Download',
|
||||
navTeam: 'Team',
|
||||
heroTagline: "Erlebe den Nervenkitzel von Texas Hold'em Poker",
|
||||
heroDescription: "Casono ist ein stilvolles Texas Hold'em Poker-Erlebnis mit spannenden Matches und eleganter Optik.",
|
||||
heroCta: 'Mehr erfahren',
|
||||
aboutTitle: 'Über Casono',
|
||||
aboutText: 'Casono kombiniert echtes Casino-Feeling mit leicht zugänglichem Gameplay. Spiele online gegen deine Freunde.',
|
||||
featuresTitle: 'Key Features',
|
||||
feature1Title: 'Sitzungen & Matchmaking',
|
||||
feature1Text: 'Realistisches Poker-Erlebnis mit spannenden Matches.',
|
||||
feature2Title: 'Stilvolle UI',
|
||||
feature2Text: 'Intuitive Benutzeroberfläche für ein immersives Erlebnis.',
|
||||
feature3Title: 'Einfache Installation',
|
||||
feature3Text: 'Download, entpacken, starten, fertig!',
|
||||
tableTitle: 'Der Tisch',
|
||||
tableText: 'Spielen und chatten in einer gemeinsamen eleganten Ansicht.',
|
||||
mediaTitle: 'Trailer & Gameplay',
|
||||
mediaText: 'Erhalte einen Eindruck vom Stil und vom Spielablauf.',
|
||||
mediaTrailer: 'Trailer',
|
||||
mediaGameplay: 'Gameplay',
|
||||
resourcesTitle: 'Download & Ressourcen',
|
||||
downloadButton: 'Download Game (ZIP)',
|
||||
teamTitle: 'Das Team',
|
||||
repoLink: 'Projekt-Repo',
|
||||
videoFallback: 'Ihr Browser unterstützt das Video-Tag nicht.'
|
||||
},
|
||||
en: {
|
||||
navHome: 'Home',
|
||||
navAbout: 'About',
|
||||
navFeatures: 'Features',
|
||||
navTable: 'Table',
|
||||
navMedia: 'Trailer & Gameplay',
|
||||
navDownload: 'Download',
|
||||
navTeam: 'Team',
|
||||
heroTagline: "Feel the thrill of Texas Hold'em Poker",
|
||||
heroDescription: "Casono is a stylish Texas Hold'em poker experience with exciting matches and elegant visuals.",
|
||||
heroCta: 'Learn more',
|
||||
aboutTitle: 'About Casono',
|
||||
aboutText: 'Casono combines real casino flair with approachable gameplay. Play online with your friends.',
|
||||
featuresTitle: 'Key Features',
|
||||
feature1Title: 'Sessions & Matchmaking',
|
||||
feature1Text: 'Realistic poker experience with thrilling matches.',
|
||||
feature2Title: 'Stylish UI',
|
||||
feature2Text: 'Intuitive interface for an immersive experience.',
|
||||
feature3Title: 'Easy Setup',
|
||||
feature3Text: 'Download, unpack, launch, done!',
|
||||
tableTitle: 'The Table',
|
||||
tableText: 'Play and chat in one shared elegant view.',
|
||||
mediaTitle: 'Trailer & Gameplay',
|
||||
mediaText: 'Get a quick look at the style and core gameplay loop.',
|
||||
mediaTrailer: 'Trailer',
|
||||
mediaGameplay: 'Gameplay',
|
||||
resourcesTitle: 'Download & Resources',
|
||||
downloadButton: 'Download Game (ZIP)',
|
||||
teamTitle: 'The Team',
|
||||
repoLink: 'Project Repo',
|
||||
videoFallback: 'Your browser does not support the video tag.'
|
||||
}
|
||||
};
|
||||
|
||||
const languageToggle = document.getElementById('language-toggle');
|
||||
const i18nNodes = document.querySelectorAll('[data-i18n]');
|
||||
|
||||
function applyLanguage(language) {
|
||||
const dictionary = translations[language] ?? translations.de;
|
||||
i18nNodes.forEach((node) => {
|
||||
const key = node.getAttribute('data-i18n');
|
||||
if (!key || !dictionary[key]) {
|
||||
return;
|
||||
}
|
||||
node.textContent = dictionary[key];
|
||||
});
|
||||
|
||||
document.documentElement.lang = language;
|
||||
languageToggle.textContent = language === 'de' ? 'EN' : 'DE';
|
||||
localStorage.setItem('casono-language', language);
|
||||
}
|
||||
|
||||
const preferredLanguage = localStorage.getItem('casono-language') === 'en' ? 'en' : 'de';
|
||||
applyLanguage(preferredLanguage);
|
||||
|
||||
languageToggle?.addEventListener('click', () => {
|
||||
const nextLanguage = document.documentElement.lang === 'de' ? 'en' : 'de';
|
||||
applyLanguage(nextLanguage);
|
||||
});
|
||||
|
||||
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>
|
||||
</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;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
@@ -0,0 +1,728 @@
|
||||
/* 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%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.language-toggle {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--team-button-bg);
|
||||
color: var(--header-bg);
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.85rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.language-toggle:hover {
|
||||
background-color: var(--accent-color);
|
||||
color: #fff;
|
||||
transform: translateY(-50%) translateY(-1px);
|
||||
}
|
||||
|
||||
/* 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,
|
||||
.table-section::before,
|
||||
.resources-section::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 3px;
|
||||
background: linear-gradient(to right, transparent, var(--secondary-color), transparent);
|
||||
margin: 1rem auto;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
|
||||
.table-section {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.media-section {
|
||||
padding: var(--section-padding);
|
||||
background-color: var(--card-bg-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.media-grid {
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(280px, 1fr));
|
||||
gap: var(--grid-gap);
|
||||
}
|
||||
|
||||
.media-card {
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid var(--secondary-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--card-padding);
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.media-card h3 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.media-card video {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.team-member-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.team-member-link:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Table preview sizing + padding so it never touches edges */
|
||||
.table-preview-container {
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-preview-image {
|
||||
max-width: 100%;
|
||||
width: calc(100% - 32px);
|
||||
height: auto;
|
||||
padding: 8px;
|
||||
border-radius: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.media-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
Binary file not shown.
Reference in New Issue
Block a user