diff --git a/outreach/game.properties b/outreach/game.properties index 3e65681..3121e6d 100644 --- a/outreach/game.properties +++ b/outreach/game.properties @@ -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 : [username] +# Explicit client command property +game.client.command = java -jar casono.jar client : [username] +# Server command example +game.server.command = java -jar casono.jar server 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 diff --git a/outreach/gameplay.mp4 b/outreach/gameplay.mp4 new file mode 100644 index 0000000..8e2b5a3 Binary files /dev/null and b/outreach/gameplay.mp4 differ diff --git a/outreach/images/background.png b/outreach/images/background.png new file mode 100644 index 0000000..d576ea4 Binary files /dev/null and b/outreach/images/background.png differ diff --git a/outreach/images/logo.png b/outreach/images/logo.png new file mode 100644 index 0000000..e906bd4 Binary files /dev/null and b/outreach/images/logo.png differ diff --git a/outreach/images/logoinverted.png b/outreach/images/logoinverted.png new file mode 100644 index 0000000..73053b6 Binary files /dev/null and b/outreach/images/logoinverted.png differ diff --git a/outreach/images/table_preview.png b/outreach/images/table_preview.png new file mode 100644 index 0000000..12cf255 Binary files /dev/null and b/outreach/images/table_preview.png differ diff --git a/outreach/images/table_preview.svg b/outreach/images/table_preview.svg new file mode 100644 index 0000000..996b697 --- /dev/null +++ b/outreach/images/table_preview.svg @@ -0,0 +1,7 @@ + + + + + Casono Table Preview + + \ No newline at end of file diff --git a/outreach/images/team/jona.svg b/outreach/images/team/jona.svg new file mode 100644 index 0000000..0d8d5b8 --- /dev/null +++ b/outreach/images/team/jona.svg @@ -0,0 +1,5 @@ + + + + Jona + diff --git a/outreach/images/team/julian.svg b/outreach/images/team/julian.svg new file mode 100644 index 0000000..67cde01 --- /dev/null +++ b/outreach/images/team/julian.svg @@ -0,0 +1,5 @@ + + + + Julian + diff --git a/outreach/images/team/lars.svg b/outreach/images/team/lars.svg new file mode 100644 index 0000000..f15015d --- /dev/null +++ b/outreach/images/team/lars.svg @@ -0,0 +1,5 @@ + + + + Lars + diff --git a/outreach/images/team/matthis.svg b/outreach/images/team/matthis.svg new file mode 100644 index 0000000..7acb9c4 --- /dev/null +++ b/outreach/images/team/matthis.svg @@ -0,0 +1,5 @@ + + + + Matthis + diff --git a/outreach/index.html b/outreach/index.html index 76e9e65..e60b661 100644 --- a/outreach/index.html +++ b/outreach/index.html @@ -1,53 +1,322 @@ - - - -Example Game + + + + + + + Casono + + + + + + + + - -
Programmierprojekt - Computerspiele
+
+ +
-

Example Game

-Hier könnt ihr einen Satz über euer Spiel sagen. +
+
+
+

Casono

+

Erlebe den + Nervenkitzel von Texas Hold'em + Poker

+

Casono ist + ein stilvolles Texas Hold'em + Poker-Erlebnis mit spannenden Matches und eleganter Optik.

+ Mehr erfahren +
+
+
- -
- -
-
-

Trailer

- -
-
+
+

Über Casono

+

Casono kombiniert echtes Casino-Feeling mit + leicht zugänglichem + Gameplay. Spiele online gegen Freunde.

+ +
- +
+

Key Features

+
+
+

Sitzungen & Matchmaking

+

Realistisches Poker-Erlebnis mit spannenden Matches.

+
-

Entwickler:

-
    -
  • Edgar Codd
    • -
  • Lynn Conway
    • -
  • Ada Lovelace
    • -
  • Alan Turing
    • -
+
+

Stilvolle UI

+

Intuitive Benutzeroberfläche für ein immersives Erlebnis. +

+
+
+

Einfache Installation

+

Download, entpacken, starten, fertig!

+
+
+
- +
+

Der Tisch

+

Spielen und chatten in einer gemeinsamen + eleganten Ansicht.

+
+ Casino Tisch Vorschau +
+
-

Steuerung:

-Pfeiltasten: bewegen
-Leertaste: springen
-I: Inventar
-Esc: Spiel beenden
-P: Spiel pausieren +
+

Trailer & Gameplay

+

Erhalte einen schnellen Eindruck vom Stil + und vom Spielablauf. +

+
+
+

Trailer

+ +
+
+

Gameplay

+ +
+
+
- +
+

Download & Ressourcen

+
+ Download Game + (ZIP) +
-

Inventar:

-Eisblock: Gegner können sich nicht mehr bewegen
-Schwarzes Loch: Steuerung der Gegner wird invertiert +
+
+ +# Requires Java 25 -
- +# 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. + +
+ + + +
+

Das Team

+
+ + Lars Winzer +

Lars Winzer

+

Server architecture & Server side networking

+ + + Jona Walpert +

Jona Walpert

+

UI & UX Design

+ + + Matthis Ginkel +

Matthis Ginkel

+

Client side development

+ + + Julian Kropff +

Julian Kropff

+

UI & UX Design, Game Engine

+ +
+
+ + + Projekt-Repo + +
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/outreach/main.css b/outreach/main.css deleted file mode 100644 index b86eff1..0000000 --- a/outreach/main.css +++ /dev/null @@ -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; -} diff --git a/outreach/screenshot.png b/outreach/screenshot.png deleted file mode 100644 index fc60247..0000000 Binary files a/outreach/screenshot.png and /dev/null differ diff --git a/outreach/style.css b/outreach/style.css new file mode 100644 index 0000000..4e30c29 --- /dev/null +++ b/outreach/style.css @@ -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); +} \ No newline at end of file diff --git a/outreach/video.mp4 b/outreach/video.mp4 deleted file mode 100644 index 80274a1..0000000 Binary files a/outreach/video.mp4 and /dev/null differ