diff --git a/assets/css/homepage/_donate.scss b/assets/css/homepage/_donate.scss new file mode 100644 index 0000000..eef056f --- /dev/null +++ b/assets/css/homepage/_donate.scss @@ -0,0 +1,72 @@ +/*!* + * This file is part of the SplendidBear Websites' projects. + * + * Copyright (c) 2026 @ www.splendidbear.org + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +.hero-donate-text { + position: relative; + z-index: 1; + font: 400 12px 'Rajdhani', sans-serif; + color: rgba(255, 255, 255, 0.5); + letter-spacing: 0.5px; + margin-top: 42px; + margin-bottom: 8px; + animation: rise 0.8s 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; +} + +.hero-donate { + position: relative; + display: inline-block; + font: 500 12px 'Rajdhani', sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + text-decoration: none; + color: rgba(255, 184, 82, 0.75); + padding: 6px 14px; + border-radius: 2px; + border: 1px solid rgba(255, 184, 82, 0.25); + + background: rgba(255, 140, 30, 0.05); + + box-shadow: + 0 0 0 1px rgba(255, 140, 30, 0.1), + 0 0 8px rgba(255, 140, 30, 0.08); + + transition: transform 200ms ease, box-shadow 200ms ease, color 200ms ease, background 200ms ease; + animation: rise 0.8s 0.58s cubic-bezier(0.22, 1, 0.36, 1) both; +} + +.hero-donate::before { + content: ''; + position: absolute; + inset: -2px; + border-radius: 3px; + background: rgba(255, 140, 30, 0.15); + filter: blur(8px); + opacity: 0.1; + z-index: -1; + transition: opacity 200ms ease; +} + +.hero-donate:hover { + transform: translateY(-1px); + color: rgba(255, 200, 100, 0.9); + background: rgba(255, 140, 30, 0.1); + box-shadow: + 0 0 0 1px rgba(255, 140, 30, 0.2), + 0 0 12px rgba(255, 140, 30, 0.15); +} + +.hero-donate:hover::before { + opacity: 0.2; +} + +.hero-donate:active { + transform: translateY(0px); +} + + diff --git a/assets/css/style.homepage.scss b/assets/css/style.homepage.scss index 99657f0..b607650 100644 --- a/assets/css/style.homepage.scss +++ b/assets/css/style.homepage.scss @@ -4,6 +4,7 @@ @use 'homepage/hero'; @use 'homepage/hero-compact'; @use 'homepage/cta'; +@use 'homepage/donate'; @use 'homepage/auth-bar'; @use 'homepage/auth'; @use 'homepage/content'; diff --git a/templates/Game/index.html.twig b/templates/Game/index.html.twig index de77929..9b0ba57 100644 --- a/templates/Game/index.html.twig +++ b/templates/Game/index.html.twig @@ -72,6 +72,10 @@

No account needed.
Just play.

{% endif %} Play Now +

Love this game?

+ + Buy me a coffee +