<!DOCTYPE html>
<html>
<head>
<style>
#header, footer{
display: none;
}
.content-wrapper{
padding:0!important;
}
body{
background-image: url("https://images.squarespace-cdn.com/content/64ecc5b816820b7f628810de/dd39ee33-e65e-4af8-a2a5-1ced050a5777/Site+Background.png?content-type=image%2Fpng");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
#page-content, body{
width:100%;
position: relative;
height: 98vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#menu-container {
width: 90vmin;
height: 90vmin;
max-width: 800px;
max-height: 800px;
position: relative;
opacity: 0;
animation-name: appearance;
animation-duration: 4s;
animation-delay: 14s;
animation-fill-mode: forwards;
}
@keyframes appearance {
0% {opacity:0;}
10% {opacity:100%;}
100% {opacity:100%;}
}
.menu-part {
text-decoration: none;
display: block;
z-index: 5;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: hsl(calc(var(--i) * 40), 60%, 40%);
clip-path: polygon(50% 50%, 100% 50%, 88.3% 82.15%);
transform-origin: 50% 50%;
transform: rotate(calc(var(--i) * 40deg));
transition: transform 0.1s ease;
cursor: pointer;
pointer-events: auto;
}
.menu-part:active {
transform:
rotate(calc(var(--i) * 40deg))
scale(0.95);
transform-origin: 50% 50%; /* Keep triangle tip at center */
filter: brightness(0.92);
}
.menu-label {
position: absolute;
top: 50%;
left: 50%;
transform-origin: center;
font-weight: bold;
font-size: 1.9vmin;
white-space: nowrap;
background-color: #565656;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: 1px -1px 0px rgba(255,255,255,0.2), -1px 1px 0px rgba(0,0,0,0.2);
color: #0d3888;
z-index: 10;
pointer-events: none;
text-align: center;
line-height: 1.2;
}
#corporate-logo{
position: absolute;
width: 100%;
animation-name: appearance-disappearance;
animation-duration: 4s;
animation-delay: 0;
}
#game-logo{
width: 100%;
animation-name: appearance-zoom;
animation-duration: 10s;
animation-delay: 4s;
}
@keyframes appearance-disappearance {
0% {opacity:0; bottom:-100%;}
10% {opacity:100%; bottom: 50%;}
90% {opacity:100%;}
100% {opacity:0; bottom: 50%;}
}
@keyframes appearance-zoom {
0% {opacity:0; bottom:-100%;}
10% {opacity:100%; bottom: 50%; transform: scale(1) translateY(50%); transform-origin: center bottom;}
90% {opacity:100%;}
100% {opacity:0; bottom: 50%; transform: scale(1.6) translateY(50%); transform-origin: center bottom;}
}
.menu-logos{
width: 90vmin;
max-width: 600px;
height: auto;
opacity: 0;
position: absolute;
transform: translateY(50%);
}
#menu-game-logo{
z-index: 20;
transform: translate(-50%) scale(0.25);
position: absolute;
left: 50%;
width: 90vmin;
height: 90vmin;
max-width: 800px;
max-height: 800px;
border-radius: 50%;
background-color: white;
background-image: url("https://images.squarespace-cdn.com/content/64ecc5b816820b7f628810de/0e9e7439-50e4-40cb-ab25-0ec3f1b152f7/OsaKami+Sein+-+Game+Logo.png?content-type=image%2Fpng");
background-size: contain;
}
</style>
</head>
<body>
<div id="page-content">
<img src="https://images.squarespace-cdn.com/content/64ecc5b816820b7f628810de/b24495ce-3b3f-4af0-bc39-4cd1f6288da7/Corporate_Logo.png?content-type=image%2Fpng" id="corporate-logo" class="menu-logos" />
<img src="https://images.squarespace-cdn.com/content/64ecc5b816820b7f628810de/0e9e7439-50e4-40cb-ab25-0ec3f1b152f7/OsaKami+Sein+-+Game+Logo.png?content-type=image%2Fpng" id="game-logo" class="menu-logos" />
<div id="menu-container">
<div id=menu-game-logo></div>
<!-- Menu Parts -->
<a class="menu-part" style="--i: 0" href="#kickstarter"></a>
<a class="menu-part" style="--i: 1" href="#stjorn-kartta"></a>
<a class="menu-part" style="--i: 2" href="#timeline"></a>
<a class="menu-part" style="--i: 3" href="#rules"></a>
<a class="menu-part" style="--i: 4" href="#units"></a>
<a class="menu-part" style="--i: 5" href="#factions"></a>
<a class="menu-part" style="--i: 6" href="#compendium"></a>
<a class="menu-part" style="--i: 7" href="#armaments"></a>
<a class="menu-part" style="--i: 8" href="#rhexii"></a>
<!-- Menu Labels -->
<span class="menu-label" style="--i: 0; transform: rotate(0deg) translateY(-31vmin) translateX(-9vmin) rotate(0deg);">Kickstarter<br />and shop</span>
<span class="menu-label" style="--i: 1; transform: rotate(40deg) translateY(-26.5vmin) translateX(-9vmin) rotate(-40deg);">Stjörn Kartta</span>
<span class="menu-label" style="--i: 2; transform: rotate(80deg) translateY(-22vmin) translateX(-6vmin) rotate(-80deg);">Nefastus Tabula</span>
<span class="menu-label" style="--i: 3; transform: rotate(120deg) translateY(-19.5vmin) translateX(-4vmin) rotate(-120deg);">Rules and System</span>
<span class="menu-label" style="--i: 4; transform: rotate(160deg) translateY(-26.5vmin) translateX(-1vmin) rotate(-160deg);">Modulus Fasti</span>
<span class="menu-label" style="--i: 5; transform: rotate(200deg) translateY(-29.5vmin) translateX(2.5vmin) rotate(-200deg);">Bonam Rationarii</span>
<span class="menu-label" style="--i: 6; transform: rotate(240deg) translateY(-34.5vmin) translateX(0vmin) rotate(-240deg);">Codex Perfectus</span>
<span class="menu-label" style="--i: 7; transform: rotate(280deg) translateY(-34vmin) translateX(-5vmin) rotate(-280deg);">Narratio Armis</span>
<span class="menu-label" style="--i: 8; transform: rotate(320deg) translateY(-33vmin) translateX(-9vmin) rotate(-320deg);">Anceps Ars</span>
</div>
</div>
</body>
</html>