feat: font

packages/website/package.json

@@ -14,6 +14,7 @@
     "@astrolib/seo": "^1.0.0-beta.8",
     "@blitzkit/core": "workspace:*",
     "@blitzkit/i18n": "workspace:*",
+    "@fontsource/inter": "^5.2.5",
     "@nanostores/persistent": "^0.10.2",
     "@nanostores/react": "^0.7.3",
     "@nivo/bar": "^0.87.0",

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -120,7 +120,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
         gap="2"
         direction="column"
         top="50%"
-        right={display === TankopediaDisplay.DynamicArmor ? '3' : '-3rem'}
+        right={display === TankopediaDisplay.DynamicArmor ? '3' : '-4rem'}
         style={{
           position: 'absolute',
           transform: 'translateY(-50%)',

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title.tsx

@@ -93,8 +93,8 @@ export function Title({ outline }: TitleProps) {
       }}
     >
       <Heading
-        weight="bold"
         style={{
+          fontWeight: 900,
           userSelect: 'none',
           pointerEvents: 'none',
           fontSize: revealed
@@ -104,14 +104,16 @@ export function Title({ outline }: TitleProps) {
             : `${75 / name.length}vw`,
           whiteSpace: 'nowrap',
           color: outline ? Var(`${nationColors.tint}-a2`) : color,
+          opacity: outline && disturbed ? 0 : 1,
           WebkitTextStroke: outline
             ? `${revealed ? (disturbed ? '1px' : 'min(2px, 0.2vw)') : 0} ${color}`
             : undefined,
           letterSpacing: disturbed || !revealed ? 0 : '-0.03em',
           transition: `
-            letter-spacing 1s ${disturbed ? '0s' : '1s'},
+            letter-spacing 1.5s cubic-bezier(.81,-2,.68,1),
             font-size 1s,
-            -webkit-text-stroke 1.5s
+            -webkit-text-stroke 2s,
+            opacity 1s
           `,
         }}
         wrap="nowrap"

packages/website/src/layouts/BaseLayout.astro

@@ -1,4 +1,5 @@
 ---
+import '@fontsource/inter';
 import { Flex } from '@radix-ui/themes';
 import { BlitzKitTheme } from '../components/BlitzKitTheme';
 import { Checks } from '../components/Checks';

packages/website/src/layouts/base.css

@@ -1,5 +1,9 @@
 @import '@radix-ui/themes/styles.css';
 
+.radix-themes {
+  --default-font-family: 'Inter';
+}
+
 body {
   margin: 0;
 }