1417 lines
31 KiB
Stylus
1417 lines
31 KiB
Stylus
// this is an absolute mess i am so sorry
|
|
|
|
/// fonts
|
|
/* cantarell-regular - latin */
|
|
@font-face {
|
|
font-family: 'Cantarell';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local(''),
|
|
url('fonts/cantarell-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
|
url('fonts/cantarell-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
|
}
|
|
|
|
/* cantarell-700 - latin */
|
|
@font-face {
|
|
font-family: 'Cantarell';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: local(''),
|
|
url('fonts/cantarell-v17-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
|
url('fonts/cantarell-v17-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Cantarell-VF";
|
|
src: local(''),
|
|
url('fonts/Cantarell-VF.otf') format('opentype-variations');
|
|
}
|
|
|
|
|
|
|
|
/// Vars
|
|
reduced()
|
|
@media (prefers-reduced-motion)
|
|
{block}
|
|
motion()
|
|
@media (prefers-reduced-motion: no-preference)
|
|
{block}
|
|
|
|
accent = #ff7400
|
|
accent = #ff6b00
|
|
|
|
gradient-right = linear-gradient(
|
|
to right,
|
|
hsl(0, 0%, 0%) 0%,
|
|
hsla(0, 0%, 0%, 0.987) 8.1%,
|
|
hsla(0, 0%, 0%, 0.951) 15.5%,
|
|
hsla(0, 0%, 0%, 0.896) 22.5%,
|
|
hsla(0, 0%, 0%, 0.825) 29%,
|
|
hsla(0, 0%, 0%, 0.741) 35.3%,
|
|
hsla(0, 0%, 0%, 0.648) 41.2%,
|
|
hsla(0, 0%, 0%, 0.55) 47.1%,
|
|
hsla(0, 0%, 0%, 0.45) 52.9%,
|
|
hsla(0, 0%, 0%, 0.352) 58.8%,
|
|
hsla(0, 0%, 0%, 0.259) 64.7%,
|
|
hsla(0, 0%, 0%, 0.175) 71%,
|
|
hsla(0, 0%, 0%, 0.104) 77.5%,
|
|
hsla(0, 0%, 0%, 0.049) 84.5%,
|
|
hsla(0, 0%, 0%, 0.013) 91.9%,
|
|
hsla(0, 0%, 0%, 0) 100%
|
|
)
|
|
|
|
:root
|
|
--bg #080011
|
|
--fg white
|
|
--fg-invert white
|
|
--bg-invert var(--accent)
|
|
--accent accent
|
|
--accent-2 #ff964a
|
|
--border rgba(120,120,120, 0.3)
|
|
--elevated rgba(100,100,100,0.2)
|
|
|
|
--shadow-hover var(--accent)
|
|
|
|
--radius 12px
|
|
--radius-small 6px
|
|
|
|
|
|
--pg-width 90em
|
|
|
|
--padding 60px
|
|
@media (prefers-color-scheme: light)
|
|
--bg #f5e7e7
|
|
--fg #333
|
|
--bg-invert black
|
|
--fg-invert white
|
|
--shadow-hover black
|
|
|
|
h3
|
|
color var(--accent)
|
|
|
|
@media (max-width 600px)
|
|
--padding 30px !important
|
|
|
|
/// setup
|
|
::-webkit-scrollbar
|
|
background none
|
|
::-webkit-scrollbar-thumb
|
|
background-color var(--accent)
|
|
border-radius 100px
|
|
transition background-color .2s
|
|
:not(:hover):not(:focus-within)::-webkit-scrollbar-thumb
|
|
background-color transparent
|
|
html
|
|
scrollbar-color var(--accent) transparent
|
|
transition scrollbar-color .2s
|
|
background var(--bg)
|
|
accent-color var(--accent)
|
|
body
|
|
display flex
|
|
justify-content center
|
|
margin 0
|
|
font-family Cantarell, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
|
|
html, body
|
|
overflow hidden
|
|
overscroll-behavior contain
|
|
|
|
.scroller
|
|
perspective 10px // For Parallax
|
|
perspective-origin top
|
|
-webkit-perspective unset // webkit is broken for some odd reason i don't know.
|
|
-moz-perspective 10px
|
|
height 100vh
|
|
overflow hidden auto
|
|
// max-width var(--pg-width)
|
|
margin 0 auto
|
|
// background var(--bg)
|
|
color var(--fg)
|
|
line-height 1.5
|
|
display flex
|
|
flex-direction column
|
|
align-items center
|
|
width 100%
|
|
scroll-padding 60px
|
|
transition opacity .2s
|
|
> *
|
|
width var(--pg-width)
|
|
max-width 100%
|
|
> .spacer
|
|
display block
|
|
min-height 50vh
|
|
|
|
*
|
|
box-sizing border-box
|
|
transition opacity .4s
|
|
:not(:hover)
|
|
scrollbar-color transparent transparent
|
|
::selection
|
|
background var(--accent)
|
|
color white
|
|
hr.invis
|
|
width 100%
|
|
border 0
|
|
margin 0
|
|
/// Text
|
|
h2, h3, h4, h5, h6, p
|
|
margin-block .4em
|
|
h1, h2, h3, h4, h5, h6
|
|
letter-spacing -.05em
|
|
p
|
|
letter-spacing -.05em
|
|
.hide
|
|
color var(--accent)
|
|
font-size 0
|
|
opacity 0
|
|
transition font-size .2s .1s, opacity .2s
|
|
transition-timing-function cubic-bezier(.5,.5,0,1) !important
|
|
&:hover
|
|
.hide
|
|
font-size .7em
|
|
opacity 1
|
|
transition font-size (.4s + .5s) 1s, opacity .2s (.3s + 1.3s)
|
|
h1
|
|
display block !important
|
|
color var(--accent)
|
|
font-size 2em
|
|
line-height 1
|
|
margin-bottom 1.5em
|
|
h3
|
|
color var(--accent)
|
|
line-height 1.4
|
|
margin-bottom .2em
|
|
a
|
|
color var(--accent)
|
|
text-underline-offset .4em
|
|
ul
|
|
margin 0
|
|
|
|
/// COMPONENTS
|
|
#warning
|
|
position fixed
|
|
margin-inline 10px
|
|
max-width calc(100% - 30px)
|
|
bottom 60px
|
|
z-index 9999
|
|
width max-content
|
|
padding 1em 3em
|
|
padding-bottom 1.4em
|
|
padding-left 5em
|
|
background var(--bg)
|
|
// color var(--fg)
|
|
font-weight 700
|
|
border-radius 2.5em
|
|
display none
|
|
// display flex
|
|
align-items center
|
|
gap 0.4em 1.7em
|
|
// box-shadow 0 8px 48px rgba(0,0,0,0.2)
|
|
box-shadow 0 12px 48px -24px var(--accent),
|
|
0 40px 200px 100px var(--bg)
|
|
// border 1px solid var(--accent)
|
|
border-bottom 4px solid var(--accent)
|
|
color var(--accent)
|
|
color lighten(accent, 10)
|
|
flex-wrap wrap
|
|
font-size 20px
|
|
transform translateY(200px)
|
|
filter opacity(0)
|
|
animation transform 2s 1s forwards cubic-bezier(0,.9,0,1)
|
|
transition font-size, border-radius, padding, bottom
|
|
transition-duration 1s
|
|
transition-timing-function cubic-bezier(.5,0,0,1)
|
|
&, *
|
|
text-shadow 0 4px 8px rgba(0,0,0,.2) !important
|
|
&::after
|
|
content ""
|
|
position absolute
|
|
inset 0
|
|
background rgba(255,255,255,0.07)
|
|
z-index -1
|
|
border-radius inherit
|
|
// box-shadow inset 0 0 24px var(--accent)
|
|
// opacity .5
|
|
small
|
|
display block
|
|
text-align left
|
|
font-size .8em
|
|
|
|
> a
|
|
font-size .9em
|
|
.button
|
|
.tooltip
|
|
margin-top -6px
|
|
font-size .7em
|
|
.img-container
|
|
position absolute
|
|
left -.2em
|
|
bottom -.15em
|
|
width 4em
|
|
height @width
|
|
animation bounceSmall 4s infinite alternate cubic-bezier(0.5, 0, 0.5, 1)
|
|
img
|
|
width 100%
|
|
height 100%
|
|
transform scaleX(-1) rotate(10deg)
|
|
@media (max-width 1400px)
|
|
font-size 16px
|
|
@media (max-width 1100px)
|
|
bottom 0
|
|
max-width 100%
|
|
margin 0
|
|
border-radius 24px 24px 0 0
|
|
padding-right 1em
|
|
font-size 16px
|
|
text-align right
|
|
justify-content flex-end
|
|
small
|
|
text-align right
|
|
@media (max-width 600px)
|
|
padding-left 1em
|
|
display none
|
|
font-size .8em
|
|
|
|
.links
|
|
position relative
|
|
display flex
|
|
flex-wrap wrap
|
|
justify-content center
|
|
gap 0 12px
|
|
margin-bottom -8px
|
|
// margin-top 1em
|
|
// pointer-events none
|
|
font-size .85rem
|
|
transition opacity .4s
|
|
.button
|
|
margin-bottom 8px
|
|
details
|
|
display contents
|
|
&[open]
|
|
@media (pointer fine)
|
|
summary .tooltip
|
|
display none
|
|
a
|
|
animation popIn .7s (.07s * 11) cubic-bezier(0,0.5,0,2) backwards
|
|
for row in (1..10)
|
|
&:nth-of-type({row})
|
|
animation-delay .07s * row
|
|
// details[open]
|
|
// width 100%
|
|
// display flex
|
|
// summary
|
|
// display flex
|
|
&:hover, &:focus-within
|
|
> .button, fieldset, > a
|
|
opacity .4
|
|
&:hover, &:focus
|
|
opacity 1
|
|
& ~ details .button, & ~ details > :not(.button)
|
|
opacity .4 !important
|
|
summary.button:hover, summary.button:focus
|
|
& ~ .links
|
|
opacity 1 !important
|
|
& ~ *
|
|
opacity .4
|
|
details
|
|
> div
|
|
// extra div for position absolute
|
|
transition opacity .2s
|
|
width 100%
|
|
> div > div
|
|
pointer-events all
|
|
position absolute
|
|
animation fadeIn .4s
|
|
width calc(var(--pg-width))
|
|
max-width calc(100vw - (var(--padding) * 2))
|
|
right 0
|
|
&::before, &::after
|
|
content ""
|
|
position absolute
|
|
inset -10px
|
|
top 140px
|
|
border-radius var(--radius)
|
|
left -200px
|
|
background var(--bg)
|
|
z-index -1
|
|
opacity .5
|
|
box-shadow 0 0 120px 120px var(--bg)
|
|
&::before
|
|
inset-inline -100vw
|
|
bottom -400px
|
|
opacity .9
|
|
.links:not(.smoll-buttons)
|
|
width max-content
|
|
max-width 100%
|
|
margin-left auto
|
|
h3
|
|
width 100%
|
|
margin-block 1em 0
|
|
transition opacity .2s
|
|
font-size 1.5em
|
|
p img, span img
|
|
width 1.6em
|
|
height @width
|
|
display inline
|
|
vertical-align middle
|
|
.hidden
|
|
display none
|
|
.break
|
|
width 100%
|
|
.filter-glow
|
|
filter drop-shadow(0 0 40px var(--accent))
|
|
&.low
|
|
filter drop-shadow(0 0 40px transparentify(accent, .8))
|
|
|
|
.glow
|
|
position relative
|
|
width max-content
|
|
max-width 100%
|
|
text-shadow 0 0 40px transparentify(accent, .8), 0 0 120px transparentify(accent, .5)
|
|
|
|
.full-width
|
|
width 100vw
|
|
min-width 100vw
|
|
padding-inline 0 !important
|
|
.normal-width
|
|
width 100%
|
|
max-width var(--pg-width)
|
|
margin 0 auto
|
|
|
|
|
|
.flow
|
|
display flex
|
|
flex-wrap wrap
|
|
|
|
.column
|
|
flex-direction column
|
|
|
|
.sections
|
|
position relative
|
|
z-index 4
|
|
animation slideUpFade 3s 1s cubic-bezier(0,.5,0,1) backwards
|
|
&:focus-within
|
|
z-index 11
|
|
> .section:first-child
|
|
+motion()
|
|
/body:has(#info details[open]) &:not(:focus-within)
|
|
transform translateY(10px)
|
|
transition opacity .7s, transform .7s, visibility 0s .7s
|
|
/body:has(&:focus-within) #info details > div
|
|
display none
|
|
|
|
|
|
.section
|
|
display flex
|
|
flex-direction column
|
|
justify-content center
|
|
align-items center
|
|
position relative
|
|
padding 50px var(--padding)
|
|
z-index 4
|
|
// pointer-events none
|
|
*
|
|
pointer-events all
|
|
transition opacity .4s, transform 1.2s cubic-bezier(0,.5,0,1), visibility 0s
|
|
// animation slideLeft 1s .5s backwards
|
|
|
|
> style
|
|
display block
|
|
width 100%
|
|
height auto
|
|
padding 1em
|
|
border 1px solid var(--border)
|
|
border-radius var(--radius)
|
|
white-space break-spaces
|
|
> h4
|
|
margin-top -1em
|
|
margin-bottom 2em
|
|
|
|
&:first-child
|
|
padding-top 0
|
|
// &::before
|
|
// content ""
|
|
// position absolute
|
|
// background var(--bg)
|
|
// inset 0 -100vw
|
|
// z-index -1
|
|
&:hover
|
|
z-index 4 !important
|
|
& ~ .section:not(:focus-within)
|
|
opacity .8
|
|
|
|
.card-list
|
|
display flex
|
|
flex-wrap wrap
|
|
justify-content center
|
|
width 100%
|
|
gap 2em 3em
|
|
pointer-events none
|
|
// .card-img
|
|
// pointer-events all
|
|
&.three
|
|
> *
|
|
min-width 30%
|
|
> article, fieldset
|
|
transition transform 1s cubic-bezier(0,0,0,1), opacity .2s, flex-grow .7s, border-color .7s
|
|
pointer-events all
|
|
&:hover, &:focus-within
|
|
> article, > fieldset
|
|
opacity .5
|
|
+reduced()
|
|
&:hover, &:focus-within
|
|
opacity 1 !important
|
|
+motion()
|
|
transform translateY(5px)
|
|
&:hover, &:focus-within
|
|
transform translateY(-5px) !important
|
|
opacity 1 !important
|
|
transition transform .2s cubic-bezier(0,0,0,1), opacity .2s, flex-grow .7s, border-color .4s
|
|
z-index 10
|
|
|
|
.card, fieldset
|
|
padding 20px 24px 24px
|
|
// background var(--elevated)
|
|
border 1px solid var(--border)
|
|
border-radius var(--radius)
|
|
flex 1 1 31.5em
|
|
max-width 31.5em
|
|
// padding-right 150px
|
|
position relative
|
|
overflow hidden
|
|
display flex
|
|
flex-direction column
|
|
legend
|
|
color var(--accent)
|
|
font-weight 700
|
|
/fieldset
|
|
flex unset
|
|
padding 15px
|
|
overflow visible
|
|
pointer-events none !important
|
|
&::before
|
|
content ""
|
|
position absolute
|
|
inset 0
|
|
opacity 0
|
|
border-radius inherit
|
|
transform opacity .2s
|
|
box-shadow 0 8px 48px -24px var(--accent)
|
|
pointer-events none
|
|
h3, h5
|
|
margin-block 0
|
|
.content
|
|
display flex
|
|
flex-wrap wrap
|
|
justify-content flex-end
|
|
flex-grow 1
|
|
&::before
|
|
content ""
|
|
position absolute
|
|
inset 0
|
|
background linear-gradient(120deg, var(--bg) 50%, transparent)
|
|
z-index -1
|
|
opacity .5
|
|
> div
|
|
font-size .9em
|
|
width 200px
|
|
flex-grow 1
|
|
display flex
|
|
flex-direction column
|
|
// shadow = 0 0 40px var(--bg)
|
|
// text-shadow shadow, shadow, shadow, shadow, shadow, shadow, shadow, shadow, shadow
|
|
> p
|
|
flex-grow 1
|
|
> img
|
|
bottom 0
|
|
border-radius var(--radius) var(--radius) 0 0
|
|
width 250px
|
|
height auto
|
|
background var(--elevated)
|
|
margin-bottom -24px
|
|
margin-inline -100px -5px
|
|
align-self flex-end
|
|
z-index -2
|
|
transform translateY(20px) scale(.98)
|
|
opacity .7
|
|
transition transform .5s cubic-bezier(0.4,0.2,0,1), opacity .2s
|
|
ul
|
|
padding-left 0
|
|
margin-top .2em
|
|
li
|
|
// margin-left -.675em
|
|
// padding-left .675em
|
|
// margin-top -.5em
|
|
&::before
|
|
content ""
|
|
width .5em
|
|
height .5em
|
|
border-radius 100px
|
|
position absolute
|
|
vertical-align center
|
|
left -.275em
|
|
margin-top .5em
|
|
background currentColor
|
|
box-shadow 0 4px 12px rgba(0,0,0,.7)
|
|
&:hover, &:focus-within
|
|
color var(--accent)
|
|
&::marker
|
|
color transparent
|
|
a
|
|
font-weight 600
|
|
font-size .9em
|
|
vertical-align 0.4em
|
|
|
|
&:hover, &:focus-within
|
|
border-color var(--accent)
|
|
&::before
|
|
opacity 1
|
|
.content > img
|
|
transform none
|
|
opacity 1
|
|
|
|
|
|
.card-img
|
|
flex 1 1 21em
|
|
max-width 24em
|
|
display flex
|
|
flex-direction column
|
|
overflow hidden
|
|
margin -1.5em
|
|
padding 1.5em
|
|
h3
|
|
color var(--fg)
|
|
margin-inline var(--radius)
|
|
h3, p
|
|
max-width 20em
|
|
.img-container
|
|
position relative
|
|
order -1 // order is changed so name is read first
|
|
width 100%
|
|
padding-top 56.25% // 16:9 aspect ratio
|
|
background-color var(--bg)
|
|
border-radius var(--radius)
|
|
position relative
|
|
font-weight 700
|
|
transition transform .4s
|
|
&::before
|
|
content ""
|
|
position absolute
|
|
inset 0
|
|
border-radius var(--radius)
|
|
box-shadow 0 24px 40px -40px var(--shadow-hover)
|
|
opacity 0
|
|
transition opacity .2s
|
|
> *
|
|
position absolute
|
|
inset 0
|
|
object-fit cover
|
|
width 100%
|
|
height 100%
|
|
border-radius var(--radius)
|
|
img, .info
|
|
transition opacity .2s
|
|
.info
|
|
display flex
|
|
flex-direction column
|
|
padding 1.5em
|
|
opacity 0
|
|
// overflow hidden
|
|
font-size .9em
|
|
p
|
|
flex-grow 1
|
|
.button
|
|
display block
|
|
margin-top auto
|
|
margin-left auto
|
|
position static
|
|
&::before
|
|
content unset
|
|
&::after
|
|
inset -9999px !important
|
|
&:hover, &:focus-within
|
|
flex-grow 1.2
|
|
.img-container
|
|
transform translateY(-5px)
|
|
&::before
|
|
opacity 1
|
|
img
|
|
opacity .1
|
|
.info
|
|
opacity 1
|
|
|
|
|
|
.card-big
|
|
overflow auto hidden
|
|
margin 0 calc(0px - var(--padding))
|
|
padding var(--padding)
|
|
background none
|
|
transition scrollbar-color .2s
|
|
contain layout paint inline-size
|
|
> .normal-width
|
|
display flex
|
|
// flex-wrap wrap
|
|
gap 4em
|
|
align-items center
|
|
padding-inline var(--padding)
|
|
transform rotate(.5deg)
|
|
transform-origin top left
|
|
> div:first-child
|
|
min-width 12.5em
|
|
max-width 100vw
|
|
flex-grow 1
|
|
width 0
|
|
position sticky
|
|
left var(--padding)
|
|
z-index 2
|
|
text-shadow 0 0 40px var(--bg), 0 0 40px var(--bg)
|
|
&::before, &::after
|
|
content ""
|
|
position absolute
|
|
inset -120px -65px
|
|
right -300px
|
|
background var(--bg)
|
|
z-index -1
|
|
mask gradient-right
|
|
// opacity .9
|
|
-webkit-mask @mask
|
|
pointer-events none
|
|
&::after
|
|
right calc(0px - var(--padding))
|
|
// mask unset
|
|
// -webkit-mask unset
|
|
h3
|
|
font-size 2em
|
|
.slider
|
|
height 300px
|
|
width 400px
|
|
flex 9999 0 400px
|
|
display flex
|
|
align-items center
|
|
|
|
&::after // Add right padding
|
|
content ""
|
|
display block
|
|
min-width 120px
|
|
> .img-container
|
|
display flex
|
|
align-items center
|
|
position relative
|
|
height inherit
|
|
border-radius var(--radius)
|
|
perspective 1000px
|
|
transition transform .7s, opacity .4s, margin 1s
|
|
> img
|
|
max-height 100%
|
|
border-radius var(--radius)
|
|
margin-inline 1em
|
|
// box-shadow 0 4px 40px -12px var(--shadow-hover)
|
|
// background var(--elevated)
|
|
transition margin 1s, transform .7s cubic-bezier(0,0,0,1)
|
|
+motion()
|
|
&:hover
|
|
transform translateY(-6px) scale(1.02) !important
|
|
img
|
|
margin-inline 2em
|
|
|
|
rotation = 5deg
|
|
transform = 5px
|
|
|
|
> div
|
|
position absolute
|
|
width 50%
|
|
height 50%
|
|
z-index 2
|
|
.top-left
|
|
top 0
|
|
left 0
|
|
&:hover ~ img
|
|
transform rotate3d(-1, 1, 0, rotation)
|
|
.top-right
|
|
top 0
|
|
right 0
|
|
&:hover ~ img
|
|
transform rotate3d(-1, -1, 0, rotation)
|
|
.bottom-left
|
|
bottom 0
|
|
left 0
|
|
&:hover ~ img
|
|
transform rotate3d(1, 1, 0, rotation)
|
|
.bottom-right
|
|
bottom 0
|
|
right 0
|
|
&:hover ~ img
|
|
transform rotate3d(1, -1, 0, rotation)
|
|
.top-middle
|
|
top 0
|
|
bottom 50%
|
|
inset-inline 40% !important
|
|
width unset
|
|
height unset
|
|
&:hover ~ img
|
|
transform rotate3d(-1, 0, 0, rotation * 1.2)
|
|
.bottom-middle
|
|
top 50%
|
|
bottom 0
|
|
inset-inline 40% !important
|
|
width unset
|
|
height unset
|
|
&:hover ~ img
|
|
transform rotate3d(1, 0, 0, rotation * 1.2)
|
|
.center
|
|
inset 40%
|
|
width unset
|
|
height unset
|
|
@media (pointer: fine) // For mouse, no touchscreen
|
|
for row in (1..4)
|
|
&:nth-child({row})
|
|
transform translateY(1px * (row * 6))
|
|
opacity 1.2 - (row / 4 )
|
|
transition-delay (.1s * row) - .1s
|
|
&:hover, &:focus-within
|
|
.img-container
|
|
transform none !important
|
|
opacity 1 !important
|
|
|
|
|
|
.button, .smoll-buttons > a
|
|
position relative
|
|
padding .7em 1.2em
|
|
border 1px solid var(--border)
|
|
border-radius 6px
|
|
max-width 90vw !important
|
|
// display flex
|
|
align-items center
|
|
text-decoration none
|
|
color inherit
|
|
gap .4em
|
|
font-weight 600
|
|
// font-size .9em
|
|
box-shadow box-shadow 6px 12px 40px -12px transparent
|
|
text-shadow 0 0 20px var(--bg), 0 0 20px var(--bg), 0 0 10px var(--bg), 0 0 10px var(--bg)
|
|
pointer-events all
|
|
transition transform .2s cubic-bezier(0,0,0,2), background .2s, color .2s, opacity .2s, flex-grow .7s cubic-bezier(0,0,0,1)
|
|
&::before
|
|
content ""
|
|
position absolute
|
|
inset 0
|
|
box-shadow 6px 12px 40px -12px var(--shadow-hover)
|
|
opacity 0
|
|
border-radius inherit
|
|
transition opacity .2s
|
|
&::after // prevent weird glitching on hover caused by transform
|
|
content ""
|
|
position absolute
|
|
inset 0
|
|
|
|
&:hover, &:focus
|
|
background var(--bg-invert)
|
|
border-color transparent
|
|
color var(--fg-invert)
|
|
transform translate(-4px, -4px)
|
|
z-index 2
|
|
text-shadow none !important
|
|
transition transform .2s cubic-bezier(0,0,0,2), background .2s, color .2s, opacity .2s, flex-grow .2s cubic-bezier(0,0,0,1)
|
|
&::before
|
|
opacity 1
|
|
&::after
|
|
right -12px
|
|
bottom @right
|
|
.tooltip
|
|
opacity 1 !important
|
|
right 0
|
|
top 120%
|
|
transform none
|
|
+reduced()
|
|
transform none !important
|
|
.tooltip
|
|
transition none !important
|
|
&.with-icon
|
|
padding 1em 1.5em
|
|
padding-right 3em
|
|
border-radius var(--radius)
|
|
font-size 1.2em
|
|
.img-container
|
|
position absolute
|
|
right -1em
|
|
bottom -1.5em
|
|
pointer-events none
|
|
transition bottom .7s
|
|
animation bounceSmall 4s infinite alternate cubic-bezier(0.5, 0, 0.5, 1)
|
|
img
|
|
width 3.7em
|
|
height 3.7em
|
|
transform rotate(15deg)
|
|
transition width .3s, height .3s
|
|
&:hover, &:focus-visible
|
|
.img-container
|
|
bottom -1.2em
|
|
// img
|
|
// width 4em
|
|
// height 4em
|
|
@media (pointer: coarse)
|
|
// max-width 16em
|
|
&.button
|
|
flex-grow 1
|
|
|
|
.tooltip
|
|
position absolute
|
|
pointer-events none
|
|
opacity 0
|
|
top 100%
|
|
min-width max-content
|
|
// text-align right
|
|
text-shadow 0 0 20px var(--bg), 0 0 20px var(--bg), 0 0 10px var(--bg), 0 0 10px var(--bg)
|
|
font-size .8em
|
|
color var(--fg)
|
|
transform translateX(4px)
|
|
transition transform .4s cubic-bezier(0,.2,0,1)
|
|
z-index 3
|
|
img
|
|
vertical-align middle
|
|
&::first-line
|
|
font-size 1.1em
|
|
@media (pointer: coarse) // For touchscreens
|
|
margin-left .5em
|
|
position static
|
|
display block
|
|
opacity .8
|
|
text-shadow none
|
|
overflow hidden
|
|
text-overflow ellipsis
|
|
color inherit
|
|
min-width unset
|
|
width 100%
|
|
margin 0
|
|
// max-width 16em
|
|
|
|
.smoll-buttons
|
|
width 100%
|
|
gap 2px
|
|
margin-bottom 0
|
|
pointer-events none
|
|
contain inline-size layout
|
|
> a
|
|
padding 0
|
|
border 0
|
|
background none !important
|
|
img
|
|
display block
|
|
margin auto
|
|
image-rendering pixelated
|
|
width 88px
|
|
height 31px
|
|
position relative
|
|
z-index 10
|
|
+motion()
|
|
&:hover, &:focus
|
|
flex-grow .02
|
|
.tooltip
|
|
text-align right
|
|
padding-inline-start 10px
|
|
@media (pointer coarse)
|
|
.tooltip
|
|
width 0
|
|
min-width 100%
|
|
|
|
/// PAGE
|
|
|
|
#skip-to-content
|
|
position absolute
|
|
top 10px
|
|
padding .7em 1.7em
|
|
width max-content
|
|
background-color var(--accent)
|
|
border-radius var(--radius)
|
|
color white
|
|
box-shadow 0 8px 24px rgba(0,0,0,0.2)
|
|
z-index 100
|
|
transform translateY(-2em)
|
|
opacity 0
|
|
font-weight 700
|
|
transition transform .2s, opacity .2s
|
|
&:focus
|
|
transform none
|
|
opacity 1
|
|
|
|
@media (max-width 900px)
|
|
#parallax-foxxos
|
|
display none !important
|
|
// +reduced()
|
|
// #parallax-foxxos
|
|
// display none !important
|
|
|
|
#parallax-foxxos
|
|
display block
|
|
min-height 600px
|
|
max-height 600px
|
|
margin-bottom -600px
|
|
// background rgba(100,100,100,0.2)
|
|
pointer-events none
|
|
z-index 10
|
|
contain strict
|
|
> div
|
|
color var(--accent)
|
|
// filter drop-shadow(0 8px 60px var(--accent))
|
|
transform translateZ(-1px) scale(2.3) translateY(40%) translateX(100px)
|
|
&:nth-of-type(2)
|
|
opacity .8
|
|
z-index 1
|
|
transform translateZ(-2px) scale(2.3) translateY(40%) translateX(100px)
|
|
+motion() // For parallax
|
|
img
|
|
animation rotate 200s infinite
|
|
// filter drop-shadow(0 8px 400px transparentify(accent, .5))
|
|
> div
|
|
animation slideUpFade 4s .2s backwards,
|
|
bounce 20s 4s infinite alternate cubic-bezier(0.5, 0, 0.5, 1)
|
|
> :nth-child(odd), > :nth-child(even) img
|
|
animation-direction alternate-reverse
|
|
for row in (1..10)
|
|
&:nth-child({row}) img
|
|
animation-delay 1s * (1.1 * row)
|
|
|
|
&:nth-of-type(2)
|
|
animation-duration 6s
|
|
animation-direction alternate-reverse
|
|
> div
|
|
// animation-duration 25s
|
|
animation slideUpFade 4s .5s backwards,
|
|
bounce 25s 4.5s infinite alternate cubic-bezier(0.5, 0, 0.5, 1)
|
|
|
|
#MORE
|
|
position absolute
|
|
z-index 3
|
|
opacity 0
|
|
& + label
|
|
position absolute
|
|
font-weight 700
|
|
transition transform .4s cubic-bezier(0,0,0,1.4), margin .3s cubic-bezier(0,1,0,1.2)
|
|
cursor pointer
|
|
z-index 10
|
|
animation slideDown 4s 2s backwards cubic-bezier(0,1,0,1)
|
|
&:hover
|
|
transform scale(1.05)
|
|
&:active
|
|
transform scale(.98) !important
|
|
&:focus:not(:checked)
|
|
& + label
|
|
outline auto
|
|
&:checked
|
|
opacity 1
|
|
& + label
|
|
margin-left 30px
|
|
transform-origin center left
|
|
transform scale(1.2)
|
|
> span
|
|
// display none
|
|
text-transform uppercase
|
|
&:nth-child(2)
|
|
display none
|
|
&.hidden
|
|
display unset !important
|
|
> span
|
|
margin-right .2em
|
|
> span
|
|
margin-right .4em
|
|
font-weight 900
|
|
opacity .5
|
|
& ~ .hehehe
|
|
top 0px
|
|
right 0px !important
|
|
&:nth-of-type(2)
|
|
right 100px !important
|
|
z-index 1
|
|
.hehe
|
|
display unset !important
|
|
img
|
|
animation blobfox 2s infinite linear
|
|
& ~ .animate
|
|
transform rotate(-2deg) translateY(-15px)
|
|
> span > span
|
|
animation-name margin-inline-more !important
|
|
animation-duration 1s !important
|
|
|
|
|
|
|
|
#hero
|
|
position relative
|
|
margin-top -300px
|
|
padding-top 300px
|
|
pointer-events none
|
|
/.bg
|
|
position relative
|
|
padding 10px var(--padding)
|
|
// position sticky
|
|
// top 0
|
|
color white
|
|
z-index 0
|
|
user-select none
|
|
contain strict
|
|
min-height 330px
|
|
margin-bottom -50px
|
|
width calc(var(--pg-width) + 900px)
|
|
padding-left 510px
|
|
transition padding 1s
|
|
@media (max-width 500px)
|
|
padding-left 470px
|
|
max-width calc(100% + 900px)
|
|
// +motion() // For parallax
|
|
// transform translateZ(-1px) scale(2) translateY(75px)
|
|
> :not(h1):not(input):not(label)
|
|
pointer-events none
|
|
|
|
&::before
|
|
content ""
|
|
position absolute
|
|
background linear-gradient(150deg, #ffa700, #f00)
|
|
top -100px
|
|
inset-inline -100vw
|
|
height 450px
|
|
z-index -2
|
|
// animation waveBGIn 8s
|
|
// border-bottom-left-radius 20%
|
|
// animation fadeIn 1s
|
|
@keyframes waveBGIn
|
|
from
|
|
transform translateY(-200px) rotate(20deg)
|
|
animation-timing-function cubic-bezier(0,0,0,1.2)
|
|
&::after // covering up the bg
|
|
content ""
|
|
position absolute
|
|
top -20px
|
|
inset-inline -100vw
|
|
height 400px
|
|
background var(--bg)
|
|
z-index 1
|
|
animation coverOut 1.5s forwards cubic-bezier(1,0,0.2,1.04)
|
|
@keyframes coverOut
|
|
to
|
|
transform translateY(400px)
|
|
+reduced()
|
|
animation-duration 0s
|
|
/.hehehe
|
|
position absolute
|
|
inset -100px
|
|
left -300px
|
|
right 150px
|
|
top 25px
|
|
height 250px
|
|
min-width 1600px
|
|
display flex
|
|
flex-direction column
|
|
z-index -2
|
|
contain strict
|
|
&:nth-of-type(2)
|
|
transform rotate(5deg)
|
|
right 100px
|
|
img
|
|
animation-duration 3s !important
|
|
// +reduced()
|
|
// animation-duration 20s !important
|
|
/.hehe
|
|
text-align right
|
|
height 0
|
|
flex-grow 1
|
|
position relative
|
|
|
|
img
|
|
position absolute
|
|
width 70px
|
|
height @width
|
|
// +reduced()
|
|
// animation-duration 30s !important
|
|
&:not(.hidden) img
|
|
animation blobfox 2s infinite linear
|
|
+reduced()
|
|
animation-play-state paused
|
|
for row in (1..14)
|
|
&:nth-last-child({row})
|
|
img
|
|
animation-delay (.7s * row) - 9s !important
|
|
@keyframes blobfox
|
|
to
|
|
transform translateX(-2500px) rotate(1turn) translateY(100px)
|
|
h1
|
|
font-size 8em
|
|
margin-block .4em
|
|
color var(--accent)
|
|
-webkit-text-stroke 2px white
|
|
// z-index 1
|
|
margin-top 90px
|
|
position relative
|
|
transition margin 1s
|
|
white-space nowrap
|
|
& ~ p // Used ~ instead of + because extensions like LanguageTool place an element between
|
|
position absolute
|
|
margin-top -3em
|
|
margin-left 1em
|
|
font-weight 900
|
|
font-size .9em
|
|
pointer-events all
|
|
transition margin 1.4s
|
|
@media (max-width 500px)
|
|
margin-left 40px
|
|
|
|
> span
|
|
margin-right 0em
|
|
margin-block -100px
|
|
padding-block 100px
|
|
transition padding 2s cubic-bezier(0,0,0,1)
|
|
for row in (1..11)
|
|
&:nth-child({row})
|
|
animation-delay .85s + (.04s * row) !important
|
|
+reduced()
|
|
animation none !important
|
|
+motion()
|
|
&:hover
|
|
padding-inline .1em
|
|
transition padding .1s cubic-bezier(0,1,0,1)
|
|
/.animate
|
|
+motion()
|
|
transform translateX(.7em)
|
|
animation transform both 1.4s .7s cubic-bezier(0,0,0,1)
|
|
> span
|
|
display inline-block
|
|
animation popIn 1s (.04s * 11) backwards cubic-bezier(0,0,0,1.4)
|
|
for row in (1..20)
|
|
&:nth-child({row})
|
|
animation-delay (.04s * row)
|
|
+reduced()
|
|
color rgba(255,255,255, 1 / (row / 2))
|
|
> span
|
|
animation-delay (.2s * row)
|
|
display inline-block
|
|
> span
|
|
animation margin-inline .7s infinite alternate both
|
|
+motion()
|
|
@keyframes margin-inline
|
|
from
|
|
// margin-inline -0.02em // This looked better I think but it has too much of a performance impact, transforms are usually better
|
|
color white
|
|
transform translate(5px, 1px)
|
|
opacity 1
|
|
@keyframes margin-inline-more
|
|
from
|
|
color white
|
|
transform translate(10px,30px)
|
|
// opacity 1
|
|
to
|
|
color transparent
|
|
transform translate(-30px,-20px) scale(.9)
|
|
// opacity 0
|
|
+motion()
|
|
&:hover
|
|
// transform translateX(-.2em) !important
|
|
margin-left -0.2em
|
|
/.streaks
|
|
position absolute
|
|
inset 0
|
|
width 6000px
|
|
opacity .2
|
|
display flex
|
|
animation transformLeft 3s infinite linear
|
|
> img
|
|
width 3000px
|
|
height 350px
|
|
transform scaleX(2) rotate(180deg)
|
|
+reduced()
|
|
display none
|
|
// &:nth-of-type(2)
|
|
// animation-delay 1.5s
|
|
/.wave_lol
|
|
position absolute
|
|
right -800px
|
|
left -1446px
|
|
width 4423px
|
|
|
|
top -958px
|
|
bottom 0
|
|
|
|
min-width 3570px
|
|
width unset
|
|
color white
|
|
fill var(--bg)
|
|
stroke-width 8px
|
|
transform rotate(0deg) scaleY(0.9) scaleX(1.2) translateX(300px)
|
|
animation waveIn 1.5s
|
|
pointer-events none
|
|
// stroke #833B0A90
|
|
// stroke-width 24px
|
|
// filter drop-shadow(-100px 50px 200px rgba(0,0,100,.5))
|
|
// filter drop-shadow(-100px -20px 20px rgba(0,0,100,0.3))
|
|
// filter drop-shadow(-10px -10px 5px var(--bg)) drop-shadow(-100px -20px 20px rgba(0,0,100,0.3))
|
|
// mask-image url(assets/rect3.svg)
|
|
// background-color var(--bg)
|
|
|
|
&::before, &::after // fallback for if svg doesn't load, for ex. tor
|
|
content ""
|
|
position absolute
|
|
inset 0
|
|
background var(--bg)
|
|
transform rotate(-24deg) translateY(1190px)
|
|
&::after
|
|
transform rotate(-10deg) translateY(1240px)
|
|
+reduced()
|
|
animation none !important
|
|
&:nth-of-type(2)
|
|
fill none
|
|
filter drop-shadow(0 0 24px white)
|
|
@keyframes waveIn
|
|
from
|
|
transform translateY(-450px) translateX(400px) rotate(0deg) scaleY(0.01)
|
|
animation-timing-function cubic-bezier(1,0,0.2,1.1)
|
|
// filter drop-shadow(0 0 0 rgba(0,0,0,0))
|
|
/#info
|
|
display flex
|
|
flex-wrap wrap
|
|
position relative
|
|
z-index 10
|
|
text-align right
|
|
margin-top -200px
|
|
margin-right var(--padding)
|
|
justify-content flex-end
|
|
pointer-events none
|
|
text-shadow 0 2px 2px rgba(0,0,0,0.1)
|
|
// filter drop-shadow(0 2px 2px rgba(0,0,0,0.1))
|
|
animation slideUpFade 2s cubic-bezier(0,0,0,1) .5s backwards
|
|
> div
|
|
padding-left var(--padding)
|
|
justify-content flex-end
|
|
width 900px
|
|
> div > *
|
|
pointer-events all
|
|
&::before
|
|
content ""
|
|
height 115px
|
|
flex-grow 1
|
|
width 200px
|
|
h1
|
|
margin-block .4em
|
|
margin-left auto
|
|
.pfp
|
|
width 90px
|
|
height 90px
|
|
margin-left auto
|
|
position relative
|
|
transition transform 1s
|
|
color var(--accent)
|
|
// filter drop-shadow(0 8px 60px transparentify(accent, .5))
|
|
outline-offset 2em
|
|
&:hover
|
|
transform translateY(-5px) rotate(2deg)
|
|
input
|
|
position absolute
|
|
left 15px
|
|
top 35px
|
|
width calc(100% - 60px)
|
|
height @width
|
|
// opacity 0
|
|
// z-index 2
|
|
cursor pointer
|
|
appearance none
|
|
border-radius 100px !important
|
|
outline-offset 1em
|
|
transition outline .2s, outline-offset .4s, transform .7s
|
|
&:focus-visible
|
|
outline 8px dashed var(--fg)
|
|
outline-offset 2em
|
|
transform rotate(20deg)
|
|
|
|
& ~ img
|
|
position absolute
|
|
inset 0
|
|
pointer-events none
|
|
transition opacity .1s linear, transform .4s cubic-bezier(0,0,0,2)
|
|
& ~ :nth-of-type(2)
|
|
transform-origin bottom right
|
|
transform scale(1.1)
|
|
& ~ img:not(:first-of-type)
|
|
opacity 0
|
|
&:checked
|
|
& ~ img
|
|
// display none
|
|
opacity 0
|
|
& ~ :nth-of-type(2)
|
|
// display unset
|
|
opacity 1
|
|
&:active
|
|
cursor none
|
|
& ~ img
|
|
opacity 0 !important
|
|
& ~ :nth-of-type(2)
|
|
opacity 1 !important
|
|
& ~ img
|
|
transform scale(1.05)
|
|
|
|
&:checked
|
|
& ~ :nth-of-type(2)
|
|
// display none
|
|
opacity 0
|
|
& ~ :nth-of-type(3)
|
|
// display unset
|
|
opacity 1
|
|
|
|
p
|
|
font-size 1.1em
|
|
font-weight 600
|
|
margin-left auto
|
|
max-width 400px
|
|
.links
|
|
justify-content flex-end
|
|
margin-top 1em
|
|
|
|
|
|
|
|
/// ANIMATIONS
|
|
+reduced()
|
|
img, .img-container
|
|
transform none !important
|
|
+motion()
|
|
@keyframes popIn
|
|
from
|
|
opacity 0
|
|
transform translateY(-10%)
|
|
1%
|
|
opacity 1
|
|
transform translateY(-10%)
|
|
to
|
|
opacity 1
|
|
margin-right .01em
|
|
|
|
@keyframes fadeIn
|
|
from
|
|
filter opacity(0)
|
|
|
|
@keyframes transformLeft
|
|
to
|
|
transform translateX(-100%)
|
|
|
|
@keyframes transform
|
|
to
|
|
transform none
|
|
filter none
|
|
@keyframes slideDown
|
|
from
|
|
transform translateY(-100px)
|
|
@keyframes slideUpFade
|
|
from
|
|
transform translateY(60px)
|
|
filter opacity(0)
|
|
@keyframes slideLeft
|
|
from
|
|
transform translateX(60px)
|
|
@keyframes rotate
|
|
to
|
|
transform rotate(1turn)
|
|
@keyframes bounce
|
|
to
|
|
transform translateY(40px)
|
|
@keyframes bounceSmall
|
|
to
|
|
transform translateY(10px)
|
|
@keyframes bounceSmaller
|
|
from
|
|
transform translateY(-1px)
|
|
to
|
|
transform translateY(1px)
|