Remixes of warthunder.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Warthunder
description: |
War Thunder's design system embraces a military-industrial aesthetic with a
dark, immersive atmosphere that evokes historical wartime environments. The
palette combines deep naval blues and charcoal blacks with strategic accent
pops of red-orange to command attention and drive action. Typography is
condensed and bold, reinforcing strength and urgency. Interfaces favour sharp
corners over rounded forms, creating a utilitarian, instrument-panel feel. The
system balances visual drama—with layered dark surfaces and subtle colour
gradation—against functional clarity, ensuring critical information (CTAs,
navigation, game updates) cuts through the visual weight. Imagery is cinematic
and large-scale, showcasing aircraft and military hardware as heroes against
gradient sky backdrops.
source:
url: "https://warthunder.com/en"
pagesAnalyzed: 1
extractedAt: 2026-11-03
tokensMeasured: true
colors:
primary: "#E53935"
accent: "#546E7A"
canvas: "#13191B"
surface-alt: "#000000"
on-primary: "#FFFFFF"
hairline: "#31424A"
accent-1: "#7495A1"
accent-2: "#90A4AE"
accent-3: "#B0BEC5"
accent-4: "#FB8C00"
neutral-1: "#CFD8DC"
typography:
display:
fontFamily: RobotoCondensed
fontSize: 60px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
textTransform: uppercase
heading-md:
fontFamily: RobotoCondensed
fontSize: 36px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
heading-md-tight:
fontFamily: RobotoCondensed
fontSize: 36px
fontWeight: 700
lineHeight: 1.17
letterSpacing: 0px
heading-sm:
fontFamily: RobotoCondensed
fontSize: 30px
fontWeight: 400
lineHeight: 1.17
letterSpacing: 0px
heading-xs:
fontFamily: RobotoCondensed
fontSize: 28px
fontWeight: 400
lineHeight: 1.17
letterSpacing: 0px
textTransform: uppercase
heading-xs-strong:
fontFamily: Roboto
fontSize: 28px
fontWeight: 500
lineHeight: 1
letterSpacing: 0px
textTransform: uppercase
body-xl:
fontFamily: RobotoCondensed
fontSize: 24px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
body-xl-tight:
fontFamily: RobotoCondensed
fontSize: 24px
fontWeight: 400
lineHeight: 1.17
letterSpacing: 0px
body-lg:
fontFamily: RobotoCondensed
fontSize: 18px
fontWeight: 400
lineHeight: 1.17
letterSpacing: 0px
body-lg-uppercase:
fontFamily: RobotoCondensed
fontSize: 18px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
textTransform: uppercase
body-md:
fontFamily: RobotoCondensed
fontSize: 16px
fontWeight: 400
lineHeight: 1.17
letterSpacing: 0px
body-sm:
fontFamily: RobotoCondensed
fontSize: 14px
fontWeight: 400
lineHeight: 1.14
letterSpacing: 0px
caption:
fontFamily: RobotoCondensed
fontSize: 12px
fontWeight: 400
lineHeight: 1.17
letterSpacing: 0px
rounded:
none: 0px
xs: 3px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section: 44px
band: 52px
borderWidths:
thin: 1px
shadows:
sm: "rgba(5, 5, 5, 0.8) 0px 0px 45px -5px, rgba(0, 0, 0, 0.9) 1px 1px 5px 0px"
md: "rgba(0, 0, 0, 0.6) 0px 0px 10px 0px"
elevationStrategy: progressive
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FEF8F8"
surface: "#F4EEEE"
surfaceRaised: "#ECE7E7"
text: "#1C1313"
textMuted: "#706969"
border: "#DAD5D5"
accent: "#D6201C"
accentFg: "#FFFFFF"
focusRing: "#E53935"
elevation: shadow
dark:
bg: "#13191B"
surface: "#000000"
surfaceRaised: "#141414"
text: "#111111"
textMuted: "#121415"
border: "#31424A"
accent: "#E53935"
accentFg: "#0B0B0C"
focusRing: "#E53935"
elevation: "border+surface"
contrastFailures:
- "dark: text on bg = 1.06:1 (needs 4.5:1)"
- "dark: muted on bg = 1.04:1 (needs 4.5:1)"
- "dark: text on surface = 1.11:1 (needs 4.5:1)"
components:
button-primary:
typography: "{typography.heading-xs-strong}"
textColor: "{colors.on-primary}"
border: "1px solid {colors.primary}"
height: 70px
padding: "5px 20px 5px 20px"
rounded: "{rounded.xs}"
backgroundColor: "rgba(229, 57, 53, 0.7)"
button-primary-sm:
textColor: "{colors.on-primary}"
border: "1px solid {colors.primary}"
height: 40px
padding: "5px 20px 5px 20px"
fontSize: 18px
fontFamily: RobotoCondensed
fontWeight: 500
lineHeight: 1
rounded: "{rounded.xs}"
backgroundColor: "rgba(229, 57, 53, 0.7)"
button-filled:
typography: "{typography.body-lg}"
textColor: "{colors.neutral-1}"
height: 42px
padding: "10px 10px 9px 10px"
backgroundColor: "rgb(149, 73, 76)"
button-outline:
textColor: "{colors.accent-3}"
border: "1px solid {colors.accent-3}"
height: 50px
padding: "5px 20px 5px 20px"
fontSize: 24px
fontFamily: Roboto
fontWeight: 400
lineHeight: 1
rounded: "{rounded.xs}"
button-outline-sm:
textColor: "{colors.accent-2}"
border: "1px solid {colors.accent-2}"
height: 45px
padding: "5px 20px 5px 20px"
fontSize: 18px
fontFamily: Roboto
fontWeight: 400
lineHeight: 1
badge-filled:
typography: "{typography.body-lg}"
textColor: "{colors.on-primary}"
height: 41.0469px
padding: "10px 20px 10px 20px"
backgroundColor: "rgb(228, 72, 68)"
badge-text:
typography: "{typography.body-xl}"
textColor: "{colors.neutral-1}"
height: 43.0469px
footer:
typography: "{typography.body-xl}"
textColor: "{colors.neutral-1}"
backgroundColor: "rgba(0, 0, 0, 0.3)"
link:
textColor: "{colors.neutral-1}"
border: "1px solid {colors.neutral-1}"
padding: "10px 15px 10px 150px"
fontSize: 18px
fontFamily: RobotoCondensed
fontWeight: 400
lineHeight: 1.2
link-lg:
typography: "{typography.body-xl}"
textColor: "{colors.accent-1}"
states:
other-focus:
target: other
state: focus
outline: none
link-hover:
target: link
state: hover
textColor: "rgb(146, 211, 249)"
textDecoration: none
other-hover:
target: other
state: hover
textColor: "{colors.surface-alt}"
textDecoration: none
button-hover:
target: button
state: hover
textColor: "{colors.on-primary}"
borderColor: "{colors.on-primary}"
textDecoration: none
breakpoints:
- width: 375
containerWidth: 355
gridColumns: 7
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 12
sectionPaddingX: 0
- width: 768
containerWidth: 768
gridColumns: 8
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 24
sectionPaddingX: 0
- width: 1024
containerWidth: 1024
gridColumns: 8
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 24
sectionPaddingX: 0
- width: 1280
containerWidth: 1254
gridColumns: 8
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 24
sectionPaddingX: 0
- width: 1440
containerWidth: 1298
gridColumns: 8
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 24
sectionPaddingX: 0
coverage:
statesFound: 61
gradientsFound: 0
rolesUnassigned: 5
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
War Thunder's design system embraces a military-industrial aesthetic with a dark, immersive atmosphere that evokes historical wartime environments. The palette combines deep naval blues and charcoal blacks with strategic accent pops of red-orange to command attention and drive action. Typography is condensed and bold, reinforcing strength and urgency. Interfaces favour sharp corners over rounded forms, creating a utilitarian, instrument-panel feel. The system balances visual drama—with layered dark surfaces and subtle colour gradation—against functional clarity, ensuring critical information (CTAs, navigation, game updates) cuts through the visual weight. Imagery is cinematic and large-scale, showcasing aircraft and military hardware as heroes against gradient sky backdrops.
Key Characteristics:
{colors.canvas} — #13191B, {colors.surface-alt} — #000000) anchors all layouts{colors.primary} — #E53935) used sparingly but decisively for CTAs, highlights, and interactive focus{rounded.none} — 0px) reinforce precision and military discipline across buttons, badges, and cards{typography.body-lg-uppercase}, {typography.heading-xs}) amplifies authority and impactboxShadow with primary red){colors.primary} — #E53935): Primary CTA buttons, hero band accents, active state indicators, and brand emphasis. Used on "REGISTER NOW!" and conversion actions.{colors.accent} — #546E7A): Hero band backgrounds, section dividers, and secondary UI containers. Provides midtone contrast.{colors.accent-1} — #7495A1): Hover states and transitional UI layers. No primary role; used for visual depth.{colors.accent-2} — #90A4AE): Subtle borders and low-contrast text. Decorative; no critical role.{colors.accent-3} — #B0BEC5): Light neutral accent for disabled or secondary states. Decorative; no primary function.{colors.accent-4} — #FB8C00): Orange accent used in store badges and premium UI elements. Decorative; signals in-game currency/premium cosmetics.{colors.canvas} — #13191B): Default page background; primary surface for all content.{colors.surface-alt} — #000000): Alternating section bands and full-bleed overlays; deepest neutral for maximum contrast.{colors.on-primary} — #FFFFFF): Text and icons on brand surfaces (#E53935); ensures accessibility contrast on CTAs.{colors.hairline} — #31424A): 1px borders, dividers, and table grids. Subtle but present.{colors.neutral-1} — #CFD8DC): Secondary text, captions, and reduced-emphasis labels.No semantic colours (error, success, warning) are declared by the site. The extraction found no error/success/warning states. Status is communicated through interactive state changes (hover, focus, active) rather than fixed semantic colours.
Primary: RobotoCondensed (regular and semibold weights)
font-family: RobotoCondensed, Roboto, sans-serifSecondary: Roboto (for headings and body at specific weights)
font-family: Roboto, sans-serifTertiary: PTRootUI (measured but not extensively used in token data)
font-family: PTRootUI, Roboto, sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | RobotoCondensed | 60px | 700 | 1.2 | 0px | Uppercase, hero-scale headings; text-transform: uppercase |
| Heading XS | RobotoCondensed | 28px | 400 | 1.17 | 0px | Uppercase section headers; text-transform: uppercase |
| Heading XS Strong | Roboto | 28px | 500 | 1.0 | 0px | Uppercase strong emphasis; text-transform: uppercase |
| Heading SM | RobotoCondensed | 30px | 400 | 1.17 | 0px | Moderate-scale headlines (e.g. "News") |
| Heading MD | RobotoCondensed | 36px | 700 | 1.2 | 0px | Large bold headings; measured on <h> elements |
| Heading MD Tight | RobotoCondensed | 36px | 700 | 1.17 | 0px | Condensed line-height variant; line-height: 1.17 |
| Body XL | RobotoCondensed | 24px | 400 | 1.2 | 0px | Large body text; measured on list items |
| Body XL Tight | RobotoCondensed | 24px | 400 | 1.17 | 0px | Condensed variant; text-transform: uppercase variant exists |
| Body LG | RobotoCondensed | 18px | 400 | 1.17 | 0px | Standard body and nav links; uppercase variant exists |
| Body LG Uppercase | RobotoCondensed | 18px | 400 | 1.0 | 0px | Uppercase nav and links; text-transform: uppercase |
| Body MD | RobotoCondensed | 16px | 400 | 1.17 | 0px | Mid-weight body copy |
| Body SM | RobotoCondensed | 14px | 400 | 1.14 | 0px | Fine print and secondary text |
| Caption | RobotoCondensed | 12px | 400 | 1.17 | 0px | Smallest text role; labels and hints |
text-transform: uppercase to signal importance and military precision.line-height: 1.17 or 1.0, compressing vertical space and creating visual impact.0px letter-spacing; characters sit tight, reinforcing the industrial feel.rgba(229, 57, 53, 0.7) (Primary with 70% opacity)#FFFFFF#E53935{rounded.xs} (3px)#E53935 with boxShadow: #E53935 0px 0px 10pxrgba(229, 57, 53, 0.7)#FFFFFF#E53935{rounded.xs} (3px)rgba(0, 0, 0, 0) (transparent)#B0BEC5#B0BEC5{rounded.xs} (3px)#FFFFFF; interior remains transparentrgba(0, 0, 0, 0)#90A4AE#90A4AE{rounded.none} (0px)#954B4C (muted red-brown)#CFD8DC{rounded.none} (0px)#E44844 (solid red)#FFFFFF{rounded.none} (0px)rgba(0, 0, 0, 0) (transparent)#CFD8DC{rounded.none} (0px){colors.canvas} (#13191B) with optional dark overlay{colors.hairline} (#31424A){spacing.md} (16px) to {spacing.lg} (20px){rounded.none} (0px) — sharp corners throughout#CFD8DC; scale increases to 1.03; opacity rises to 1.0#FFFFFF{colors.neutral-1} (#CFD8DC){colors.canvas} with #FB8C00 (gold) border#FB8C00{rounded.xs} (3px){spacing.lg} (20px)#B8670B; scale 1.03; optional shadow glow{colors.surface-alt} (#000000){colors.hairline} (#31424A)#CFD8DC{spacing.md} (16px){rounded.none} (0px)rgba(207, 216, 220, 0.5)#90A4AE#FFFFFF; outline: none{colors.canvas} (#13191B){spacing.md} (16px) vertical, {spacing.lg} (20px) horizontal{colors.hairline} (#31424A) bottom#CFD8DC, text-transform: uppercase#92D3F9 (light blue); background optional{colors.primary} background, #FFFFFF text#FFFFFF; positioned left{colors.surface-alt} (#000000){colors.hairline} (#31424A){spacing.sm} (12px) vertical per item#CFD8DCrgba(69, 90, 100, 1) (mid-blue-grey); text #FFFFFF{rounded.none} (0px)rgba(0, 0, 0, 0.6) 0px 0px 10px 0pxBase Unit: 4px ({spacing.xxs})
Scale:
{spacing.xxs} = 4px — micro-spacing, icon/text pairs, tight lists{spacing.xs} = 8px — minor gaps between elements, padding inside small components{spacing.sm} = 12px — internal padding for badges, small buttons{spacing.md} = 16px — standard padding for cards, inputs, moderate margins{spacing.lg} = 20px — larger padding, hero sections, key spacing between groups{spacing.xl} = 24px — substantial gaps, column margins, section separation{spacing.xxl} = 32px — large structural spacing, section top/bottom margins{spacing.xxxl} = 40px — extra-large padding for hero areas{spacing.section} = 44px — major section boundaries, full-width gutters{spacing.band} = 52px — hero band and full-bleed section paddingUsage Contexts:
{spacing.md} (16px) internally; external margin of {spacing.lg} (20px) minimum{spacing.md} to {spacing.lg} (16–20px); gap of {spacing.xl} (24px) between cards{spacing.band} (52px) or {spacing.section} (44px); lateral padding varies by viewport{spacing.xl} (24px) gap before body; body line-height is baked into typography hierarchy{spacing.md} (16px) to {spacing.lg} (20px) between columns{spacing.band} (52px){colors.canvas} and {colors.surface-alt} for visual separation{spacing.xl} (24px) gap betweenWhitespace is used strategically to separate visual domains and reinforce hierarchy rather than fill empty space. Large full-bleed hero sections with minimal text overlay create breathing room around high-impact imagery. Section bands are delineated by colour shifts and generous padding ({spacing.band} = 52px) rather than fine rules. Card-based layouts rely on consistent gutters ({spacing.xl} = 24px) to create rhythm. Text is compressed vertically within paragraphs (via tight line-height: 1.17) but separated from adjacent elements by at least {spacing.lg} (20px) margins, forcing the eye to pause and scan fresh content.
{rounded.none} = 0px — buttons, badges, cards, inputs, navigation, images, overlays. Default throughout the system; sharp edges reinforce precision and military discipline.{rounded.xs} = 3px — subtle rounding on select store containers and hero banner; measured on one store card only. Minimal use; not standard.Note: The system is overwhelmingly sharp-cornered. No pill-shaped (9999px) elements measured.
| Level | Treatment | Use |
|---|---|---|
| Flat (base) | No shadow; colour-blocking on {colors.canvas} | Default surfaces, body cards, most UI |
| Raised (modal) | rgba(5, 5, 5, 0.8) 0px 0px 45px -5px, rgba(0, 0, 0, 0.9) 1px 1px 5px 0px | Modals, full-screen overlays, dialogs; heavy shadow with 45px blur and 5px inset, plus sharp edge shadow |
| Dropdown (menu) | rgba(0, 0, 0, 0.6) 0px 0px 10px 0px | Dropdown menus, tooltip-like surfaces; subtle 10px blur, 60% opacity |
| Interactive Glow | {colors.primary} 0px 0px 10px (custom per state) | Button hover states, accent focus rings; 10px blur with primary red or brand accent colour |
The system uses a colour-blocking approach to depth rather than relying on graduated shadows. Most surfaces sit flat on the canvas with no shadow; visual hierarchy comes from colour shifts (dark canvas to darker surface-alt) and border placement. Where shadows do appear, they are severe and dramatic:
This is not a graduated shadow system; it is situational and high-contrast.
rgba(229, 57, 53, 0.80) and similar) and some hover overlaysLayering Strategy: Modals sit at z-index 200 to ensure they eclipse sticky navigation and all dropdown content. Sticky elements (100–110) sit above base content (1) but below modals (200). Dropdowns (16–90) layer incrementally to allow nested or sequential menus.
{rounded.none} (0px) is the standard; only use {rounded.xs} (3px) on rare premium UI. Sharpness signals precision and military authority.{colors.primary} — #E53935) sparingly. Reserve it for hero CTAs, active states, and hover glows. Overuse dilutes impact.text-transform: uppercase on nav links, buttons, and section headers to reinforce hierarchy and formality.{colors.canvas} and {colors.surface-alt} to create visual rhythm; pair with generous padding ({spacing.band} = 52px).line-height: 1.17 or 1.0 to tighten vertical space and create visual density.{colors.hairline} (#31424A) on cards, inputs, and dividers for subtle but consistent edge definition.border-radius: 0px (with rare exception of 3px on premium store containers). Circles and pills break the military aesthetic.#FFFFFF or #E53935 on #13191B or #000000; #CFD8DC or #90A4AE on dark surfaces only.rgba(0, 0, 0, 0.5) or darker) behind text to ensure readability.{colors.accent} or {colors.accent-4}). Too many colours break focus.| Breakpoint | Viewport Width | Max Content Width | Grid Columns | Key Changes |
|---|---|---|---|---|
| Mobile | 375px | 355px | 8 | Full-width single-column layout; buttons stack vertically; hero text size reduced; navigation collapses (no inline links visible); nav toggle absent in measured data |
| Tablet | 768px | 768px | 8 | Content column reaches full viewport width; cards may appear 1–2 per row; section padding consistent; heading sizes hold or increase slightly |
| Laptop | 1024px | 1024px | 8 | Multi-column layouts stabilize; cards display 2–3 per row; sidebar or secondary content becomes visible; hero sections remain full-width |
| Desktop | 1280px–1440px | 1254px–1298px | 8 | Max content width enforced; layout centres with symmetric margins; all UI elements visible; hero imagery at full aspect ratio |
Navigation: Nav links visible count remains 0 across all measured breakpoints; no menu toggle was observed. Full navigation is either hidden behind a drawer (not captured) or dynamically loaded. Assume a responsive menu system exists but is not fully represented in static page measurements.
{spacing.xs} (8px) gap; preferably {spacing.md} (16px) to avoid fat-finger errors60px) and large headings (36px) hold or reduce modestly on mobile; body text (16px–18px) remains stable across viewports. No breakpoint-specific typography swaps observed in measurements.{spacing.band} = 52px) may reduce to {spacing.section} (44px) or {spacing.xxl} (32px) on mobile to preserve viewport height.{spacing.xl} (24px) to prevent cramping.Use these colour assignments for rapid UI implementation:
#E53935)#13191B)#000000)#FFFFFF)#FFFFFF) or Neutral Text (#CFD8DC)#CFD8DC)#31424A)#546E7A)#FB8C00)#7495A1, #90A4AE, #B0BEC5)Follow these rules for rapid, consistent implementation:
Colour: Every interactive element (button, link, badge) must use one of the 11 extracted colours; no custom hex values. Primary CTAs default to {colors.primary} (#E53935).
Corners: All interactive and container elements are square by default; border-radius: 0px. Only premium UI (store cards) uses border-radius: 3px.
Typography: Default to RobotoCondensed. Apply text-transform: uppercase to all nav, buttons, and section headings. Use line-height: 1.17 or 1.0 to compress vertical space.
Spacing: Use the scale (4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 44px, 52px). Do not introduce intermediate values. Buttons pad with {spacing.md} (16px); sections pad with {spacing.band} (52px).
Borders: Apply 1px solid {colors.hairline} (#31424A) to all card, input, and menu edges. No thicker or thinner strokes.
Shadows: Flat-first; no shadows on cards or standard UI. Reserve shadows for modals (45px ambient + 1px edge) and dropdowns (10px blur, 60% opacity).
Hover states: Shift colour (brighten or saturate), scale to 1.03, or add a glow (0px 0px 10px in the element's accent colour). Never fade-only; always include one of these three.
Opacity: Use discrete levels: 0.8, 0.6, 0.5, 0.3, 0.2, 0.02. Do not invent intermediate values like 0.75.
Buttons: Primary at 70px height, secondary at 40–50px. Padding always 5px (top/bottom) and 20px (left/right). Width varies by container but never below 150px on desktop.
Z-index layering: Base content at 1; dropdowns at 16–90; sticky nav at 100; modals at 200. Do not layer elements outside this range unless explicitly required by new content types.
Interaction states not captured in CSS: The extracted stylesheets include hover states but do not fully describe focus rings, active states (pressed buttons), disabled states, or keyboard navigation styles. Assume standard focus outlines (e.g. outline: 2px solid {colors.primary}) unless explicitly overridden.
Error / success / warning semantic colours: The site does not declare or use a status colour ramp. Form validation, alerts, and feedback messaging are not represented in the extracted data. Designer/developer must define these colours separately if error/success states are required.
Dark mode not measured: The extracted data represents a single dark theme only. No light-mode variant or theme toggle was captured.
Gradients or decorative meshes: Hero imagery uses atmospheric effects (sky gradients, aircraft silhouettes) but these are photographic, not CSS-rendered gradients. The UI layer itself contains no gradient fills on buttons, cards, or containers.
Unassigned decorative colours: Five accent colours ({colors.accent-1} through {colors.accent-4}, plus some borders) were measured but have no explicit role in the measured UI. They may be used off-page or in styles not captured. Assume they are decorative unless evidence emerges.
Surfaces behind authentication: The site homepage does not require login. In-game UIs, user dashboards, account settings, and post-login interfaces were not visited. Those surfaces likely use variations of this palette but are not documented here.
Responsive breakpoint names: Exact breakpoint labels (e.g. "sm", "md", "lg") are not defined in the extracted data. Breakpoints listed above are derived from viewport widths where content width or grid behaviour changed. Mobile-first vs. desktop-first strategy is not explicit.
Mobile navigation pattern: Nav links visible count is 0 across all breakpoints. The extraction did not capture a mobile menu toggle or drawer interaction. Assume a responsive nav system exists but cannot be fully specified here.
Animation / transition timings: No CSS animation or transition durations were extracted. Hover effects (colour shift, scale) are assumed to be instantaneous or very fast (< 200ms). Specific easing functions are not defined.
Print styles: No print-specific styles were extracted. Assume default browser print rendering unless overridden.