Container styles

Standard card and container surface treatments used across the site.

Container box

Default card container with subtle border and radial gradient fill.

Card title

Sample card body text demonstrating the container box styling with its subtle border and gradient background.

Border

#FFFFFF @ 5% opacity, 1px

Fill

Radial gradient: #121212 (0–68%) → #141414

Border radius

16px (rounded-2xl)

Usage

Stage cards, metric cards, alignment pillars, and operational cards on the home page.

Live pages

Home

Default hover

Subtle background shift for non-interactive containers. Indicates hover without implying clickability.

Hover to preview

Card title

Sample card body text demonstrating the container box styling with its subtle border and gradient background.

Fill (hover)

Radial gradient: #131313 (0–68%) → #151515

Transition

background 0.2s ease

Usage

Non-linked cards such as feature cards, integration logos, and stat displays.

Live pages

Integrations

Light beam hover

Animated border glow that rotates on hover. Use for linked cards to signal interactivity.

Hover to preview

Card title

Sample card body text demonstrating the container box styling with its subtle border and gradient background.

Beam color

Brand orange gradient: #FF5C00 → #FF781E → #FF7828

Beam arc

100° visible (40deg–140deg), centered at 90deg

Animation

3s linear infinite rotation, paused until hover

Fade in

opacity 0.3s ease

CSS class

light-beam (add alongside container-box)

Usage

Solution cards, industry cards, and any container that links to another page.

Live pages

Solutions Industry pages

IconCardBoxed

Icon + text in a container box with vertically centered alignment. Use for standalone feature cards in grids.

Feature title

Description text explaining the feature or value proposition.

Component

<IconCardBoxed icon={...} />

Layout

container-box, items-center, gap-5

When to use

Standalone feature cards, certification badges, cards representing distinct items

Live pages

Solutions Security

IconCard

Simple icon + text layout without container. Use within existing containers or sections.

Feature title

Description text for the feature.

Component

<IconCard icon={...} />

Layout

items-start, gap-4, no container

When to use

Content within existing containers, lists of features, inline icon + text pairings

Live pages

Home Alignment

IconBox

Standalone icon container for custom layouts. Use when you need just the icon without the text structure.

md (56px)

sm (48px)

Icon container

56×56px (md) or 48×48px (sm), radial gradient

Icon color

Desaturated orange: rgba(255,140,80,0.7)

Icon glow

drop-shadow(0 0 6px rgba(255,120,60,0.3))