diff --git a/css/style.css b/css/style.css index 5229342..72dfaef 100644 --- a/css/style.css +++ b/css/style.css @@ -211,8 +211,8 @@ body { } .btn-light:hover { - color: var(--bs-white); - background: var(--bs-primary); + color: var(--bs-primary); + background: var(--bs-white); } .btn-square { @@ -432,6 +432,76 @@ body { border-color: var(--bs-primary); } +/*** Stratum page ***/ +/* Grid layout for features and factions */ +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin: 0 auto; + max-width: 1200px; +} + +/* Card styles */ +.card { + border: none; + background: transparent; +} + +.card-body { + background: url('../img/papel_blanco.jpg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + filter: drop-shadow(0.1vw 0.1vw 0.1vw var(--bs-dark)); +} + +/* Feature and faction cards */ +.feature-card { + height: 100%; + display: flex; + flex-direction: column; +} + +.feature-card .card-body { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.faction-card { + transition: transform 0.3s ease; +} + +.faction-card:hover { + transform: translateY(-5px); +} + +/* Video container for rules section */ +.video-container { + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + max-width: 100%; + margin: 2rem auto; +} + +.video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +/* Game features section */ +.game-feature { + height: 100%; + margin-bottom: 2rem; +} + /*** Footer ***/ .footer { background-color: var(--bs-dark) !important; @@ -452,6 +522,145 @@ body { .ps-6 { padding-left: 4rem; } .pe-6 { padding-right: 4rem; } +/*** Spiny envelope! ***/ +.scene { + width: 300px; + height: 200px; + perspective: 1000px; + margin: 100px auto; +} + +.envelope { + width: 100%; + height: 100%; + position: relative; + transform: rotateY(0deg); + transform-style: preserve-3d; + animation: spin 6s infinite linear; + transition: transform 0.3 ease; +} + +.envelope:hover { + animation: grow 0.3s forwards; +} + +@keyframes spin { + from {transform: rotateY(0deg) scale(1);} + to {transform: rotateY(360deg) scale(1);} +} + +@keyframes grow { + to {transform: scale(1.15)} +} + +.envelope__face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + background-color: #f7f3eb; + border: 2px solid #333; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + /*fotito de textura*/ + background-image: url('../img/papel_blanco.jpg'); + background-size: cover; + background-repeat: no-repeat; +} + +.envelope__side { + position: absolute; + /*fotito de textura*/ + background-image: url('../img/papel_blanco.jpg'); + background-size: cover; + background-repeat: no-repeat; + border: 1px solid #333; + box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); +} + +.envelope__side--left { + width: 15px; + height: 100%; + left: -7.5px; + transform: rotateY(90deg); +} + +.envelope__side--right { + width: 15px; + height: 100%; + right: -7.5px; + transform: rotateY(90deg); +} + +.envelope__side--top { + width: 100%; + height: 15px; + top: -7.5px; + transform: rotateX(90deg); +} + +.envelope__side--bottom { + width: 100%; + height: 15px; + bottom: -7.5px; + transform: rotateX(-90deg); +} + +.envelope__front { + transform: translateZ(7.5px); +} + +.envelope__back { + transform: translateZ(-7.5px) rotateY(180deg); +} + +.flap { + position: absolute; + width: 0; + height: 0; + border-style: solid; + border-width: 100px 150px; + border-color: #f7f3eb transparent transparent transparent; + top: -1px; + left: -1px; + filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)); +} + +.flap::after { + content: ''; + position: absolute; + top: -98px; + left: -148px; + width: 296px; + height: 98px; + /*fotito de textura*/ + background-image: url('../img/papel_blanco.jpg'); + background-size: cover; + background-repeat: no-repeat; + clip-path: polygon(0 0, 50% 100%, 100% 0); +} + +.envelope__text { + font-family: "Special Elite", system-ui; + font-size: 200%; + color: var(--bs-dark); + text-align: center; + padding: 20px; + position: relative; + top: 90px; +} + +.envelope-link { + text-decoration: none; + display: block; /* Make the whole envelope clickable */ +} + +.envelope-container { + display: flex; + justify-content: center; + gap: 10rem; + flex-wrap: wrap; +} + /*** Media Queries ***/ @media (max-width: 991px) { .navbar-collapse { @@ -501,4 +710,16 @@ body { .pt-6, .pb-6, .ps-6, .pe-6 { padding: 2rem; } +} + +/* Responsive adjustments */ +@media (max-width: 767px) { + .feature-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .game-feature { + margin-bottom: 1rem; + } } \ No newline at end of file diff --git a/files/Stratum_EN.pdf b/files/Stratum_EN.pdf new file mode 100644 index 0000000..43c204a Binary files /dev/null and b/files/Stratum_EN.pdf differ diff --git a/files/Stratum_ES.pdf b/files/Stratum_ES.pdf new file mode 100644 index 0000000..dd7641b Binary files /dev/null and b/files/Stratum_ES.pdf differ diff --git a/index.html b/index.html index 2142b2e..33fd66f 100644 --- a/index.html +++ b/index.html @@ -810,7 +810,7 @@
Óscar Alarcón
Against Software, Todos los derechos reservados. + >, & Ezequiel García. Todos los derechos reservados. diff --git a/stratum.html b/stratum.html index 5f7ac63..4444d92 100644 --- a/stratum.html +++ b/stratum.html @@ -1,531 +1,441 @@ - - - + + + Stratum - Against Software - + - + - - - + + + - - + + - + - - - - - + -
-
- Stratum Logo + +
+ + + + -
-

Stratum

-

Un juego de cartas donde el equilibrio del ecosistema está en juego.

-

A card game where the balance of the ecosystem is at stake.

-
- GitHub - itch.io -
+
+
+ Stratum Logo +
+ +
+

Stratum

+

+ Un juego de cartas donde el equilibrio del ecosistema está en juego. +

+

+ A card game where the balance of the ecosystem is at stake. +

+
+ ¡Juega ahora! / Play now! +

+ Código fuente / Source code
+
-
-
-
-
-

En un rincón olvidado del mundo, oculto del alcance de la humanidad, yace el legendario bosque de Sylveria, donde tres facciones luchan por el control del ecosistema.

-

In a forgotten corner of the world, hidden from humanity's reach, lies the legendary forest of Sylveria, where three factions fight for control of the ecosystem.

-
-
+
+
+
+
+

+ En un rincón olvidado del mundo, oculto del alcance de la + humanidad, yace el legendario bosque de Sylveria, donde tres + facciones luchan por el control del ecosistema. +

+

+ In a forgotten corner of the world, hidden from humanity's + reach, lies the legendary forest of Sylveria, where three + factions fight for control of the ecosystem. +

-
+
+
+
+ +
+
+
+

+ Es tu turno / + It's your turn +

+
+
-
-
-
-

Facciones / Factions

+
+
+ +
+
+
+
+
Únete
+
+
+
+
+
+
-
- -
-
-
-
-
-

Naturaleza

-

Nature

-

Los guardianes ancestrales del bosque, protectores del equilibrio natural.

-

The ancient guardians of the forest, protectors of the natural balance.

-
-
-

Objetivo: Mantener el equilibrio del ecosistema.

-

Goal: Maintain the ecosystem's balance.

-
-
-
- -
-
-
-

Industria

-

Industry

-

La ambición humana personificada, buscando dominar la naturaleza.

-

Human ambition personified, seeking to dominate nature.

-
-
-

Objetivo: Construir en los cuatro territorios.

-

Goal: Build in all four territories.

-
-
-
- -
-
-
-

Fungi

-

Fungi

-

Una antigua entidad que busca corromper y asimilar todo a su paso.

-

An ancient entity seeking to corrupt and assimilate everything in its path.

-
-
-

Objetivo: Crear dos macrohongos en el tablero.

-

Goal: Create two macro-fungi on the board.

-
-
-
+
+ + +
+
+
+
+
Join now
+
+
+
+
+
+
-
-
+ + + + +
+ +
+
+
+

+ Facciones / + Factions +

+
+
-
-
-
-

Reglas / Rules

+
+
+
+
+
+

Naturaleza

+

Nature

+

+ Los guardianes ancestrales del bosque, protectores del + equilibrio natural. +

+

+ The ancient guardians of the forest, protectors of the + natural balance. +

+
+

+ Objetivo: Mantener el equilibrio del + ecosistema. +

+

+ Goal: Maintain the ecosystem's balance. +

+
+
-
-
-
-

Stratum es un juego de cartas para 4 jugadores donde cada uno representa una facción diferente, compitiendo por el control de un ecosistema vivo y cambiante.

-

Stratum is a 4-player card game where each player represents a different faction, competing for control of a living, changing ecosystem.

- -
- -
-
-

Conceptos básicos / Basic concepts

-
    -
  • Cada jugador tiene un territorio con 5 espacios -
    Each player has a territory with 5 spaces -
    • -
  • En tu turno, puedes jugar una carta de población y una de influencia -
    On your turn, you can play one population card and one influence card -
    • -
  • El ecosistema cambia al final de cada ronda -
    The ecosystem changes at the end of each round -
    • -
-
-
+
+
+
+

Industria

+

Industry

+

+ La ambición humana personificada, buscando dominar la + naturaleza. +

+

+ Human ambition personified, seeking to dominate nature. +

+
+

+ Objetivo: Construir en los cuatro + territorios. +

+

+ Goal: Build in all four territories. +

+
+
-
-
-
-

Características / Features

-
-
-
-

Ecosistema Dinámico

-

Dynamic Ecosystem

-

Un sistema vivo que responde a cada acción de los jugadores, creando situaciones únicas en cada partida.

-

A living system that responds to every player action, creating unique situations in each game.

-
-
-

Experiencia Inmersiva

-

Immersive Experience

-

Sin interfaces visibles que rompan la inmersión, todo integrado naturalmente en el entorno de juego.

-

No visible interfaces breaking immersion, everything naturally integrated into the game environment.

+
+
+
+

Fungi

+

Fungi

+

+ Una antigua entidad que busca corromper y asimilar todo a su + paso. +

+

+ An ancient entity seeking to corrupt and assimilate + everything in its path. +

-
-

Jugabilidad Estratégica

-

Strategic Gameplay

-

Cada decisión importa en la lucha por el control del ecosistema.

-

Every decision matters in the struggle for ecosystem control.

+
+

+ Objetivo: Crear dos macrohongos en el + tablero. +

+

+ Goal: Create two macro-fungi on the board. +

+
+
+
+
+
+ +
+
+
+

+ Reglas / + Rules +

+
+
+
+
+
+

+ Stratum es un juego de cartas para 4 jugadores donde cada uno + representa una facción diferente, compitiendo por el control de + un ecosistema vivo y cambiante. +

+

+ Stratum is a 4-player card game where each player represents a + different faction, competing for control of a living, changing + ecosystem. +

+ +
+ +
+ +
+

+ Conceptos básicos / + Basic concepts +

+
    +
  • + Cada jugador tiene un territorio con 5 espacios
    Each player has a territory with 5 spaces +
    • +
  • + En tu turno, puedes jugar una carta de población y una de + influencia
    On your turn, you can play one population card and one + influence card +
    • +
  • + El ecosistema cambia al final de cada ronda
    The ecosystem changes at the end of each round +
    • +
+
-
+ + +
+ +
+
+

+ Características / + Features +

+
+
+
+

Ecosistema Dinámico

+

Dynamic Ecosystem

+

+ Un sistema vivo que responde a cada acción de los jugadores, + creando situaciones únicas en cada partida. +

+

+ A living system that responds to every player action, creating + unique situations in each game. +

+
+
+

Experiencia Inmersiva

+

Immersive Experience

+

+ Sin interfaces visibles que rompan la inmersión, todo integrado + naturalmente en el entorno de juego. +

+

+ No visible interfaces breaking immersion, everything naturally + integrated into the game environment. +

+
+
+

Jugabilidad Estratégica

+

Strategic Gameplay

+

+ Cada decisión importa en la lucha por el control del ecosistema. +

+

+ Every decision matters in the struggle for ecosystem control. +

+
+
+
-
-
-
-
-
-
-
- - - - - - - - - -
-
- -
- - Against Software, Todos los derechos reservados. - -
-
+
+
+
+
+
+
+
+ + +
+
+
+ + Against Software, & Ezequiel García. Todos los derechos reservados. + +
+
+
-
+
- - \ No newline at end of file + +