Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
E
EL-Captain-Website
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Administrator
EL-Captain-Website
Commits
081d9938
Commit
081d9938
authored
Jun 18, 2026
by
Mahmoud Aglan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
kokokokoko
parent
8c142ce1
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
710 additions
and
249 deletions
+710
-249
base.css
public/css/base.css
+19
-6
components.css
public/css/components.css
+204
-108
home.css
public/css/home.css
+217
-48
pages.css
public/css/pages.css
+95
-39
tokens.css
public/css/tokens.css
+48
-37
main.js
public/js/main.js
+127
-11
No files found.
public/css/base.css
View file @
081d9938
...
...
@@ -32,7 +32,7 @@ html {
body
{
font-family
:
'Tajawal'
,
sans-serif
;
font-size
:
var
(
--text-base
);
line-height
:
1.7
;
line-height
:
1.7
5
;
color
:
var
(
--ink-primary
);
background-color
:
var
(
--bg-deep
);
overflow-x
:
hidden
;
...
...
@@ -40,14 +40,15 @@ body {
}
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
line-height
:
1.2
5
;
line-height
:
1.2
;
font-weight
:
700
;
text-wrap
:
balance
;
letter-spacing
:
-0.01em
;
}
h1
{
font-size
:
var
(
--text-5xl
);
font-weight
:
900
;
}
h2
{
font-size
:
var
(
--text-4xl
);
font-weight
:
800
;
}
h3
{
font-size
:
var
(
--text-3xl
);
}
h1
{
font-size
:
var
(
--text-5xl
);
font-weight
:
900
;
letter-spacing
:
-0.025em
;
line-height
:
1.05
;
}
h2
{
font-size
:
var
(
--text-4xl
);
font-weight
:
800
;
letter-spacing
:
-0.02em
;
line-height
:
1.1
;
}
h3
{
font-size
:
var
(
--text-3xl
);
letter-spacing
:
-0.015em
;
}
h4
{
font-size
:
var
(
--text-2xl
);
}
h5
{
font-size
:
var
(
--text-xl
);
}
...
...
@@ -86,7 +87,7 @@ ul, ol {
}
::selection
{
background
:
oklch
(
0.5
70
0.158
353.3
/
0.3
);
background
:
oklch
(
0.5
50
0.180
353.3
/
0.35
);
color
:
var
(
--ink-primary
);
}
...
...
@@ -109,6 +110,7 @@ ul, ol {
.section
{
padding-block
:
var
(
--space-section
);
position
:
relative
;
}
.visually-hidden
{
...
...
@@ -122,3 +124,14 @@ ul, ol {
white-space
:
nowrap
;
border
:
0
;
}
/* Noise texture overlay for depth */
body
::before
{
content
:
''
;
position
:
fixed
;
inset
:
0
;
pointer-events
:
none
;
z-index
:
9999
;
opacity
:
0.025
;
background-image
:
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)
'
/
%
3
E
%
3
C
/
svg
%
3
E
"
);
}
public/css/components.css
View file @
081d9938
...
...
@@ -5,15 +5,16 @@
right
:
0
;
left
:
0
;
z-index
:
var
(
--z-sticky
);
padding-block
:
var
(
--space-md
);
transition
:
background
var
(
--duration-normal
)
var
(
--ease-out-quart
),
backdrop-filter
var
(
--duration-normal
)
var
(
--ease-out-quart
);
padding-block
:
var
(
--space-sm
);
transition
:
all
var
(
--duration-slow
)
var
(
--ease-out-expo
);
}
.nav--scrolled
{
background
:
oklch
(
0.120
0.008
353.3
/
0.85
);
backdrop-filter
:
blur
(
20px
)
saturate
(
1.2
);
border-bottom
:
1px
solid
var
(
--border-subtle
);
background
:
oklch
(
0.095
0.006
280
/
0.8
);
backdrop-filter
:
blur
(
24px
)
saturate
(
1.4
);
-webkit-backdrop-filter
:
blur
(
24px
)
saturate
(
1.4
);
border-bottom
:
1px
solid
oklch
(
1
0
0
/
0.04
);
padding-block
:
var
(
--space-xs
);
}
.nav__inner
{
...
...
@@ -24,66 +25,70 @@
}
.nav__logo
{
font-size
:
var
(
--text-
xl
);
font-size
:
var
(
--text-
lg
);
font-weight
:
900
;
color
:
var
(
--ink-primary
);
display
:
flex
;
align-items
:
center
;
gap
:
var
(
--space-sm
);
letter-spacing
:
-0.02em
;
}
.nav__logo-mark
{
width
:
2
.5
rem
;
height
:
2
.5
rem
;
background
:
var
(
--brand-primary
);
width
:
2rem
;
height
:
2rem
;
background
:
linear-gradient
(
135deg
,
var
(
--brand-primary
),
var
(
--brand-primary-light
)
);
border-radius
:
var
(
--radius-md
);
display
:
grid
;
place-items
:
center
;
color
:
white
;
font-weight
:
900
;
font-size
:
var
(
--text-sm
);
font-size
:
var
(
--text-xs
);
box-shadow
:
0
2px
12px
oklch
(
0.550
0.180
353.3
/
0.3
);
}
.nav__links
{
display
:
flex
;
align-items
:
center
;
gap
:
var
(
--space-
lg
);
gap
:
var
(
--space-
xs
);
}
.nav__link
{
color
:
var
(
--ink-
secondary
);
color
:
var
(
--ink-
muted
);
font-size
:
var
(
--text-sm
);
font-weight
:
500
;
padding
:
var
(
--space-xs
)
var
(
--space-sm
);
border-radius
:
var
(
--radius-sm
);
transition
:
color
var
(
--duration-fast
)
var
(
--ease-out-quart
),
background
var
(
--duration-fast
)
var
(
--ease-out-quart
);
border-radius
:
var
(
--radius-md
);
transition
:
all
var
(
--duration-fast
)
var
(
--ease-out-quart
);
}
.nav__link
:hover
,
.nav__link--active
{
.nav__link
:hover
{
color
:
var
(
--ink-primary
);
background
:
oklch
(
1
0
0
/
0.05
);
}
.nav__link--active
{
color
:
var
(
--ink-primary
);
}
.nav__cta
{
display
:
inline-flex
;
align-items
:
center
;
gap
:
var
(
--space-xs
);
padding
:
var
(
--space-
sm
)
var
(
--space-lg
);
padding
:
var
(
--space-
xs
)
var
(
--space-md
);
background
:
var
(
--brand-primary
);
color
:
white
;
font-weight
:
7
00
;
font-weight
:
6
00
;
font-size
:
var
(
--text-sm
);
border-radius
:
var
(
--radius-
md
);
transition
:
transform
var
(
--duration-fast
)
var
(
--ease-out-quart
),
box-shadow
var
(
--duration-fast
)
var
(
--ease-out-quart
);
border-radius
:
var
(
--radius-
lg
);
transition
:
all
var
(
--duration-fast
)
var
(
--ease-out-quart
);
box-shadow
:
0
2px
8px
oklch
(
0.550
0.180
353.3
/
0.2
);
}
.nav__cta
:hover
{
color
:
white
;
transform
:
translateY
(
-1px
);
box-shadow
:
var
(
--shadow-glow
);
box-shadow
:
0
4px
20px
oklch
(
0.550
0.180
353.3
/
0.35
);
}
/* Mobile menu */
...
...
@@ -94,11 +99,17 @@
align-items
:
center
;
justify-content
:
center
;
color
:
var
(
--ink-primary
);
border-radius
:
var
(
--radius-md
);
transition
:
background
var
(
--duration-fast
)
var
(
--ease-out-quart
);
}
.nav__toggle
:hover
{
background
:
oklch
(
1
0
0
/
0.05
);
}
.nav__toggle
svg
{
width
:
2
4
px
;
height
:
2
4
px
;
width
:
2
0
px
;
height
:
2
0
px
;
}
@media
(
max-width
:
768px
)
{
...
...
@@ -111,7 +122,7 @@
top
:
0
;
right
:
0
;
bottom
:
0
;
width
:
min
(
3
2
0px
,
85vw
);
width
:
min
(
3
0
0px
,
85vw
);
flex-direction
:
column
;
align-items
:
stretch
;
padding
:
var
(
--space-3xl
)
var
(
--space-lg
);
...
...
@@ -120,6 +131,7 @@
transform
:
translateX
(
100%
);
transition
:
transform
var
(
--duration-slow
)
var
(
--ease-out-expo
);
z-index
:
var
(
--z-modal
);
backdrop-filter
:
blur
(
20px
);
}
.nav__links--open
{
...
...
@@ -127,7 +139,7 @@
}
.nav__link
{
font-size
:
var
(
--text-
lg
);
font-size
:
var
(
--text-
base
);
padding
:
var
(
--space-md
);
}
...
...
@@ -144,59 +156,88 @@
align-items
:
center
;
justify-content
:
center
;
gap
:
var
(
--space-sm
);
padding
:
var
(
--space-
md
)
var
(
--space-xl
);
font-weight
:
7
00
;
font-size
:
var
(
--text-
base
);
border-radius
:
var
(
--radius-
md
);
transition
:
transform
var
(
--duration-fast
)
var
(
--ease-out-quart
),
box-shadow
var
(
--duration-fast
)
var
(
--ease-out-quart
),
background
var
(
--duration-fast
)
var
(
--ease-out-quart
)
;
min-height
:
48px
;
padding
:
var
(
--space-
sm
)
var
(
--space-xl
);
font-weight
:
6
00
;
font-size
:
var
(
--text-
sm
);
border-radius
:
var
(
--radius-
lg
);
transition
:
all
var
(
--duration-normal
)
var
(
--ease-out-quart
);
min-height
:
44px
;
position
:
relative
;
overflow
:
hidden
;
}
.btn--primary
{
background
:
var
(
--brand-primary
);
background
:
linear-gradient
(
135deg
,
var
(
--brand-primary
),
var
(
--brand-primary-light
)
);
color
:
white
;
box-shadow
:
0
2px
16px
oklch
(
0.550
0.180
353.3
/
0.25
),
inset
0
1px
0
oklch
(
1
0
0
/
0.1
);
}
.btn--primary
::before
{
content
:
''
;
position
:
absolute
;
inset
:
0
;
background
:
linear-gradient
(
135deg
,
oklch
(
1
0
0
/
0.1
),
transparent
);
opacity
:
0
;
transition
:
opacity
var
(
--duration-fast
)
var
(
--ease-out-quart
);
}
.btn--primary
:hover
{
color
:
white
;
transform
:
translateY
(
-2px
);
box-shadow
:
var
(
--shadow-glow
);
box-shadow
:
0
6px
30px
oklch
(
0.550
0.180
353.3
/
0.4
),
inset
0
1px
0
oklch
(
1
0
0
/
0.15
);
}
.btn--primary
:hover::before
{
opacity
:
1
;
}
.btn--secondary
{
background
:
transparent
;
background
:
oklch
(
1
0
0
/
0.03
)
;
color
:
var
(
--ink-primary
);
border
:
1px
solid
var
(
--border-default
);
backdrop-filter
:
blur
(
8px
);
}
.btn--secondary
:hover
{
color
:
var
(
--ink-primary
);
background
:
oklch
(
1
0
0
/
0.0
5
);
background
:
oklch
(
1
0
0
/
0.0
7
);
border-color
:
var
(
--ink-muted
);
transform
:
translateY
(
-1px
);
}
.btn--large
{
padding
:
var
(
--space-lg
)
var
(
--space-2xl
);
font-size
:
var
(
--text-lg
);
border-radius
:
var
(
--radius-lg
);
padding
:
var
(
--space-md
)
var
(
--space-2xl
);
font-size
:
var
(
--text-base
);
border-radius
:
var
(
--radius-xl
);
min-height
:
52px
;
}
/* Screenshot showcase */
.screenshot
{
position
:
relative
;
border-radius
:
var
(
--radius-
lg
);
border-radius
:
var
(
--radius-
xl
);
overflow
:
hidden
;
border
:
1px
solid
var
(
--border-subtle
);
box-shadow
:
var
(
--shadow-lg
);
transition
:
transform
var
(
--duration-normal
)
var
(
--ease-out-quart
),
box-shadow
var
(
--duration-normal
)
var
(
--ease-out-quart
);
transition
:
all
var
(
--duration-slow
)
var
(
--ease-out-expo
);
background
:
var
(
--bg-surface
);
}
.screenshot
::after
{
content
:
''
;
position
:
absolute
;
inset
:
0
;
border-radius
:
inherit
;
box-shadow
:
inset
0
1px
0
oklch
(
1
0
0
/
0.05
);
pointer-events
:
none
;
}
.screenshot
:hover
{
transform
:
translateY
(
-4px
);
box-shadow
:
var
(
--shadow-lg
),
var
(
--shadow-glow
);
transform
:
translateY
(
-6px
)
scale
(
1.01
);
box-shadow
:
var
(
--shadow-lg
),
0
20px
60px
oklch
(
0
0
0
/
0.4
);
border-color
:
var
(
--border-glow
);
}
.screenshot
img
{
...
...
@@ -205,22 +246,31 @@
}
.screenshot--framed
{
background
:
var
(
--bg-
surface
);
padding
:
var
(
--space-sm
)
;
background
:
var
(
--bg-
elevated
);
padding
:
2px
;
}
.screenshot--framed
::before
{
content
:
''
;
display
:
block
;
height
:
2rem
;
background
:
var
(
--bg-elevated
);
border-radius
:
var
(
--radius-sm
)
var
(
--radius-sm
)
0
0
;
margin
:
calc
(
-1
*
var
(
--space-sm
));
margin-bottom
:
var
(
--space-sm
);
background-image
:
radial-gradient
(
circle
,
var
(
--ink-muted
)
4px
,
transparent
4px
);
background-size
:
16px
16px
;
background-position
:
12px
center
;
background-repeat
:
repeat-x
;
height
:
1.75rem
;
background
:
var
(
--bg-surface
);
border-radius
:
var
(
--radius-lg
)
var
(
--radius-lg
)
0
0
;
position
:
relative
;
display
:
flex
;
align-items
:
center
;
padding-right
:
12px
;
gap
:
6px
;
margin-bottom
:
2px
;
}
.screenshot--framed
::before
{
background-image
:
radial-gradient
(
circle
at
14px
50%
,
oklch
(
0.600
0.150
25
)
4px
,
transparent
4px
),
radial-gradient
(
circle
at
28px
50%
,
oklch
(
0.700
0.130
85
)
4px
,
transparent
4px
),
radial-gradient
(
circle
at
42px
50%
,
oklch
(
0.600
0.150
145
)
4px
,
transparent
4px
);
background-repeat
:
no-repeat
;
background-size
:
100%
100%
;
}
/* Feature cards */
...
...
@@ -228,31 +278,50 @@
padding
:
var
(
--space-xl
);
background
:
var
(
--bg-surface
);
border
:
1px
solid
var
(
--border-subtle
);
border-radius
:
var
(
--radius-lg
);
transition
:
border-color
var
(
--duration-normal
)
var
(
--ease-out-quart
),
box-shadow
var
(
--duration-normal
)
var
(
--ease-out-quart
);
border-radius
:
var
(
--radius-xl
);
transition
:
all
var
(
--duration-slow
)
var
(
--ease-out-expo
);
position
:
relative
;
overflow
:
hidden
;
}
.feature-card
::before
{
content
:
''
;
position
:
absolute
;
top
:
0
;
right
:
0
;
width
:
100px
;
height
:
100px
;
background
:
radial-gradient
(
circle
,
var
(
--brand-primary-ghost
),
transparent
70%
);
opacity
:
0
;
transition
:
opacity
var
(
--duration-slow
)
var
(
--ease-out-expo
);
}
.feature-card
:hover
{
border-color
:
var
(
--brand-primary-muted
);
box-shadow
:
0
0
30px
oklch
(
0.570
0.158
353.3
/
0.08
);
border-color
:
var
(
--border-glow
);
transform
:
translateY
(
-3px
);
box-shadow
:
0
8px
32px
oklch
(
0
0
0
/
0.3
),
0
0
0
1px
var
(
--border-glow
);
}
.feature-card
:hover::before
{
opacity
:
1
;
}
.feature-card__icon
{
width
:
3
rem
;
height
:
3
rem
;
width
:
2.75
rem
;
height
:
2.75
rem
;
display
:
grid
;
place-items
:
center
;
background
:
var
(
--brand-primary-dim
);
border-radius
:
var
(
--radius-
md
);
background
:
linear-gradient
(
135deg
,
var
(
--brand-primary-dim
),
var
(
--brand-primary-muted
)
);
border-radius
:
var
(
--radius-
lg
);
margin-bottom
:
var
(
--space-lg
);
color
:
var
(
--brand-primary-light
);
box-shadow
:
0
2px
8px
oklch
(
0.550
0.180
353.3
/
0.15
);
}
.feature-card__title
{
font-size
:
var
(
--text-
xl
);
font-size
:
var
(
--text-
lg
);
font-weight
:
700
;
margin-bottom
:
var
(
--space-
sm
);
margin-bottom
:
var
(
--space-
xs
);
color
:
var
(
--ink-primary
);
}
...
...
@@ -265,12 +334,16 @@
/* Stats */
.stat
{
text-align
:
center
;
position
:
relative
;
}
.stat__value
{
font-size
:
var
(
--text-4xl
);
font-weight
:
900
;
color
:
var
(
--brand-primary-light
);
background
:
linear-gradient
(
135deg
,
var
(
--brand-primary-light
),
var
(
--brand-primary
));
-webkit-background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;
background-clip
:
text
;
line-height
:
1
;
margin-bottom
:
var
(
--space-xs
);
}
...
...
@@ -287,15 +360,18 @@
}
.section-header__tag
{
display
:
inline-block
;
font-size
:
var
(
--text-sm
);
font-weight
:
700
;
display
:
inline-flex
;
align-items
:
center
;
gap
:
var
(
--space-xs
);
font-size
:
var
(
--text-xs
);
font-weight
:
600
;
color
:
var
(
--brand-primary-light
);
margin-bottom
:
var
(
--space-md
);
padding
:
var
(
--space-xs
)
var
(
--space-md
);
background
:
oklch
(
0.570
0.158
353.3
/
0.1
);
border-radius
:
var
(
--radius-sm
);
border
:
1px
solid
oklch
(
0.570
0.158
353.3
/
0.2
);
padding
:
var
(
--space-2xs
)
var
(
--space-sm
);
background
:
oklch
(
0.550
0.180
353.3
/
0.08
);
border-radius
:
var
(
--radius-xl
);
border
:
1px
solid
oklch
(
0.550
0.180
353.3
/
0.15
);
letter-spacing
:
0.02em
;
}
.section-header__title
{
...
...
@@ -304,7 +380,7 @@
.section-header__desc
{
font-size
:
var
(
--text-lg
);
max-width
:
60
ch
;
max-width
:
55
ch
;
}
/* Footer */
...
...
@@ -312,6 +388,18 @@
padding-block
:
var
(
--space-2xl
);
background
:
var
(
--bg-base
);
border-top
:
1px
solid
var
(
--border-subtle
);
position
:
relative
;
}
.footer
::before
{
content
:
''
;
position
:
absolute
;
top
:
0
;
left
:
50%
;
transform
:
translateX
(
-50%
);
width
:
200px
;
height
:
1px
;
background
:
linear-gradient
(
90deg
,
transparent
,
var
(
--brand-primary-dim
),
transparent
);
}
.footer__grid
{
...
...
@@ -322,19 +410,25 @@
@media
(
max-width
:
768px
)
{
.footer__grid
{
grid-template-columns
:
1
fr
;
grid-template-columns
:
1
fr
1
fr
;
gap
:
var
(
--space-xl
);
}
}
@media
(
max-width
:
480px
)
{
.footer__grid
{
grid-template-columns
:
1
fr
;
}
}
.footer__brand
{
max-width
:
30
ch
;
max-width
:
28
ch
;
}
.footer__brand-name
{
font-size
:
var
(
--text-
xl
);
font-size
:
var
(
--text-
lg
);
font-weight
:
900
;
margin-bottom
:
var
(
--space-
md
);
margin-bottom
:
var
(
--space-
sm
);
color
:
var
(
--ink-primary
);
}
...
...
@@ -355,12 +449,13 @@
display
:
block
;
font-size
:
var
(
--text-sm
);
color
:
var
(
--ink-muted
);
padding-block
:
var
(
--space-xs
);
transition
:
color
var
(
--duration-fast
)
var
(
--ease-out-quart
);
padding-block
:
var
(
--space-
2
xs
);
transition
:
all
var
(
--duration-fast
)
var
(
--ease-out-quart
);
}
.footer__link
:hover
{
color
:
var
(
--brand-primary-light
);
transform
:
translateX
(
-2px
);
}
.footer__bottom
{
...
...
@@ -377,14 +472,14 @@
@media
(
max-width
:
768px
)
{
.footer__bottom
{
flex-direction
:
column
;
gap
:
var
(
--space-
md
);
gap
:
var
(
--space-
sm
);
text-align
:
center
;
}
}
/* Module page hero */
.module-hero
{
min-height
:
6
0vh
;
min-height
:
5
0vh
;
display
:
flex
;
align-items
:
center
;
padding-top
:
6rem
;
...
...
@@ -396,7 +491,9 @@
content
:
''
;
position
:
absolute
;
inset
:
0
;
background
:
radial-gradient
(
ellipse
at
30%
20%
,
oklch
(
0.570
0.158
353.3
/
0.08
)
0%
,
transparent
60%
);
background
:
radial-gradient
(
ellipse
at
70%
30%
,
oklch
(
0.550
0.180
353.3
/
0.06
)
0%
,
transparent
50%
),
radial-gradient
(
ellipse
at
20%
80%
,
oklch
(
0.400
0.130
280
/
0.04
)
0%
,
transparent
50%
);
pointer-events
:
none
;
}
...
...
@@ -411,7 +508,7 @@
}
.module-hero__desc
{
font-size
:
var
(
--text-
xl
);
font-size
:
var
(
--text-
lg
);
margin-bottom
:
var
(
--space-xl
);
}
...
...
@@ -422,20 +519,32 @@
}
.gallery--2col
{
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
min
(
100%
,
50
0px
),
1
fr
));
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
min
(
100%
,
48
0px
),
1
fr
));
}
.gallery--3col
{
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
min
(
100%
,
3
5
0px
),
1
fr
));
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
min
(
100%
,
3
2
0px
),
1
fr
));
}
/*
Testimonial /
Quote blocks */
/* Quote blocks */
.quote-block
{
padding
:
var
(
--space-xl
);
background
:
var
(
--bg-surface
);
border-radius
:
var
(
--radius-
lg
);
border-right
:
3
px
solid
var
(
--brand-primary
);
border-radius
:
var
(
--radius-
xl
);
border-right
:
2
px
solid
var
(
--brand-primary
);
position
:
relative
;
overflow
:
hidden
;
}
.quote-block
::before
{
content
:
''
;
position
:
absolute
;
top
:
0
;
right
:
0
;
width
:
80px
;
height
:
100%
;
background
:
linear-gradient
(
to
left
,
oklch
(
0.550
0.180
353.3
/
0.03
),
transparent
);
pointer-events
:
none
;
}
.quote-block__text
{
...
...
@@ -470,18 +579,5 @@
}
.breadcrumb__separator
{
opacity
:
0.4
;
}
/* Page transitions */
.page-enter
{
opacity
:
0
;
transform
:
translateY
(
20px
);
}
.page-enter--active
{
opacity
:
1
;
transform
:
translateY
(
0
);
transition
:
opacity
var
(
--duration-slow
)
var
(
--ease-out-expo
),
transform
var
(
--duration-slow
)
var
(
--ease-out-expo
);
opacity
:
0.3
;
}
public/css/home.css
View file @
081d9938
...
...
@@ -11,27 +11,44 @@
.hero
::before
{
content
:
''
;
position
:
absolute
;
top
:
-20%
;
top
:
-30%
;
right
:
-20%
;
width
:
80%
;
height
:
80%
;
background
:
radial-gradient
(
ellipse
,
oklch
(
0.550
0.180
353.3
/
0.08
)
0%
,
transparent
60%
);
pointer-events
:
none
;
animation
:
hero-glow
10s
ease-in-out
infinite
alternate
;
}
.hero
::after
{
content
:
''
;
position
:
absolute
;
bottom
:
-20%
;
left
:
-10%
;
width
:
7
0%
;
height
:
7
0%
;
background
:
radial-gradient
(
ellipse
,
oklch
(
0.
570
0.158
353.3
/
0.12
)
0%
,
transparent
65
%
);
width
:
5
0%
;
height
:
5
0%
;
background
:
radial-gradient
(
ellipse
,
oklch
(
0.
400
0.100
280
/
0.05
)
0%
,
transparent
60
%
);
pointer-events
:
none
;
animation
:
hero-glow
8
s
ease-in-out
infinite
alternate
;
animation
:
hero-glow
-alt
12
s
ease-in-out
infinite
alternate
;
}
@keyframes
hero-glow
{
from
{
opacity
:
0.6
;
transform
:
translate
(
0
,
0
)
scale
(
1
);
}
to
{
opacity
:
1
;
transform
:
translate
(
3%
,
3%
)
scale
(
1.05
);
}
from
{
opacity
:
0.5
;
transform
:
translate
(
0
,
0
)
scale
(
1
);
}
to
{
opacity
:
1
;
transform
:
translate
(
2%
,
2%
)
scale
(
1.08
);
}
}
@keyframes
hero-glow-alt
{
from
{
opacity
:
0.3
;
transform
:
translate
(
0
,
0
)
scale
(
1
);
}
to
{
opacity
:
0.6
;
transform
:
translate
(
-2%
,
-1%
)
scale
(
1.05
);
}
}
@media
(
prefers-reduced-motion
:
reduce
)
{
.hero
::before
{
animation
:
none
;
}
.hero
::before
,
.hero
::after
{
animation
:
none
;
}
}
.hero__grid
{
display
:
grid
;
grid-template-columns
:
1
fr
1.
1
fr
;
grid-template-columns
:
1
fr
1.
2
fr
;
gap
:
var
(
--space-2xl
);
align-items
:
center
;
}
...
...
@@ -50,17 +67,20 @@
.hero__title
{
margin-bottom
:
var
(
--space-lg
);
letter-spacing
:
-0.02em
;
}
.hero__title-accent
{
color
:
var
(
--brand-primary-light
);
background
:
linear-gradient
(
135deg
,
var
(
--brand-primary-light
),
var
(
--brand-primary
));
-webkit-background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;
background-clip
:
text
;
}
.hero__desc
{
font-size
:
var
(
--text-
xl
);
font-size
:
var
(
--text-
lg
);
margin-bottom
:
var
(
--space-xl
);
max-width
:
50ch
;
max-width
:
45ch
;
line-height
:
1.9
;
}
@media
(
max-width
:
1024px
)
{
...
...
@@ -84,13 +104,33 @@
.hero__visual
{
position
:
relative
;
perspective
:
1200px
;
}
.hero__screenshot
{
border-radius
:
var
(
--radius-xl
);
border-radius
:
var
(
--radius-
2
xl
);
overflow
:
hidden
;
box-shadow
:
var
(
--shadow-lg
),
var
(
--shadow-glow
);
border
:
1px
solid
var
(
--border-subtle
);
box-shadow
:
0
25px
80px
oklch
(
0
0
0
/
0.5
),
0
0
0
1px
oklch
(
1
0
0
/
0.05
),
0
0
60px
oklch
(
0.550
0.180
353.3
/
0.08
);
border
:
1px
solid
oklch
(
1
0
0
/
0.06
);
transform
:
rotateY
(
-2deg
)
rotateX
(
1deg
);
transition
:
transform
var
(
--duration-slower
)
var
(
--ease-out-expo
);
position
:
relative
;
}
.hero__screenshot
::after
{
content
:
''
;
position
:
absolute
;
inset
:
0
;
background
:
linear-gradient
(
160deg
,
oklch
(
1
0
0
/
0.03
)
0%
,
transparent
40%
);
pointer-events
:
none
;
border-radius
:
inherit
;
}
.hero__screenshot
:hover
{
transform
:
rotateY
(
0deg
)
rotateX
(
0deg
)
scale
(
1.02
);
}
.hero__screenshot
img
{
...
...
@@ -98,33 +138,84 @@
height
:
auto
;
}
/* Floating decorative elements */
.hero__visual
::before
{
content
:
''
;
position
:
absolute
;
top
:
-10%
;
left
:
-5%
;
width
:
120%
;
height
:
120%
;
background
:
radial-gradient
(
circle
at
10%
20%
,
oklch
(
0.550
0.180
353.3
/
0.06
)
0%
,
transparent
30%
),
radial-gradient
(
circle
at
90%
80%
,
oklch
(
0.400
0.100
280
/
0.04
)
0%
,
transparent
25%
);
pointer-events
:
none
;
z-index
:
-1
;
}
/* Pain points section */
.pain-points
{
background
:
var
(
--bg-base
);
position
:
relative
;
}
.pain-points
::before
{
content
:
''
;
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
height
:
1px
;
background
:
linear-gradient
(
90deg
,
transparent
,
var
(
--border-subtle
),
transparent
);
}
.pain-points__grid
{
display
:
grid
;
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
min
(
100%
,
30
0px
),
1
fr
));
gap
:
var
(
--space-
lg
);
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
min
(
100%
,
28
0px
),
1
fr
));
gap
:
var
(
--space-
md
);
}
.pain-point
{
padding
:
var
(
--space-xl
);
border-radius
:
var
(
--radius-
lg
);
border-radius
:
var
(
--radius-
xl
);
background
:
var
(
--bg-surface
);
border
:
1px
solid
var
(
--border-subtle
);
transition
:
all
var
(
--duration-slow
)
var
(
--ease-out-expo
);
position
:
relative
;
overflow
:
hidden
;
}
.pain-point
::after
{
content
:
''
;
position
:
absolute
;
bottom
:
0
;
right
:
0
;
left
:
0
;
height
:
2px
;
background
:
linear-gradient
(
90deg
,
var
(
--brand-primary
),
var
(
--brand-primary-light
));
transform
:
scaleX
(
0
);
transform-origin
:
right
;
transition
:
transform
var
(
--duration-slow
)
var
(
--ease-out-expo
);
}
.pain-point
:hover
{
border-color
:
var
(
--border-glow
);
transform
:
translateY
(
-2px
);
}
.pain-point
:hover::after
{
transform
:
scaleX
(
1
);
}
.pain-point__problem
{
font-size
:
var
(
--text-
base
);
font-size
:
var
(
--text-
sm
);
color
:
var
(
--ink-muted
);
margin-bottom
:
var
(
--space-md
);
line-height
:
1.
7
;
line-height
:
1.
8
;
}
.pain-point__solution
{
font-size
:
var
(
--text-
lg
);
font-size
:
var
(
--text-
base
);
color
:
var
(
--brand-primary-light
);
font-weight
:
700
;
}
...
...
@@ -132,8 +223,8 @@
/* Modules showcase */
.modules-showcase__grid
{
display
:
grid
;
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
min
(
100%
,
3
8
0px
),
1
fr
));
gap
:
var
(
--space-
lg
);
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
min
(
100%
,
3
5
0px
),
1
fr
));
gap
:
var
(
--space-
md
);
}
.module-card
{
...
...
@@ -141,36 +232,58 @@
padding
:
var
(
--space-xl
);
background
:
var
(
--bg-surface
);
border
:
1px
solid
var
(
--border-subtle
);
border-radius
:
var
(
--radius-lg
);
transition
:
border-color
var
(
--duration-normal
)
var
(
--ease-out-quart
),
transform
var
(
--duration-normal
)
var
(
--ease-out-quart
),
box-shadow
var
(
--duration-normal
)
var
(
--ease-out-quart
);
border-radius
:
var
(
--radius-xl
);
transition
:
all
var
(
--duration-slow
)
var
(
--ease-out-expo
);
position
:
relative
;
overflow
:
hidden
;
}
.module-card
::before
{
content
:
''
;
position
:
absolute
;
top
:
-50%
;
right
:
-50%
;
width
:
100%
;
height
:
100%
;
background
:
radial-gradient
(
circle
,
var
(
--brand-primary-ghost
),
transparent
70%
);
opacity
:
0
;
transition
:
opacity
var
(
--duration-slow
)
var
(
--ease-out-expo
);
}
.module-card
:hover
{
border-color
:
var
(
--b
rand-primary-muted
);
transform
:
translateY
(
-
3
px
);
box-shadow
:
0
1
2px
40px
oklch
(
0
0
0
/
0.3
);
border-color
:
var
(
--b
order-glow
);
transform
:
translateY
(
-
4
px
);
box-shadow
:
0
1
6px
48px
oklch
(
0
0
0
/
0.3
),
0
0
0
1px
var
(
--border-glow
);
color
:
inherit
;
}
.module-card
:hover::before
{
opacity
:
1
;
}
.module-card__icon
{
width
:
3
.5
rem
;
height
:
3
.5
rem
;
width
:
3rem
;
height
:
3rem
;
display
:
grid
;
place-items
:
center
;
background
:
oklch
(
0.5
70
0.158
353.3
/
0.1
);
border
:
1px
solid
oklch
(
0.5
70
0.158
353.3
/
0.2
);
border-radius
:
var
(
--radius-
md
);
background
:
oklch
(
0.5
50
0.180
353.3
/
0.08
);
border
:
1px
solid
oklch
(
0.5
50
0.180
353.3
/
0.15
);
border-radius
:
var
(
--radius-
lg
);
margin-bottom
:
var
(
--space-lg
);
font-size
:
1.5rem
;
color
:
var
(
--brand-primary-light
);
transition
:
all
var
(
--duration-normal
)
var
(
--ease-out-quart
);
}
.module-card
:hover
.module-card__icon
{
background
:
oklch
(
0.550
0.180
353.3
/
0.15
);
box-shadow
:
0
0
20px
oklch
(
0.550
0.180
353.3
/
0.15
);
}
.module-card__title
{
font-size
:
var
(
--text-
xl
);
font-size
:
var
(
--text-
lg
);
font-weight
:
700
;
color
:
var
(
--ink-primary
);
margin-bottom
:
var
(
--space-
sm
);
margin-bottom
:
var
(
--space-
xs
);
}
.module-card__desc
{
...
...
@@ -182,24 +295,52 @@
.module-card__link
{
font-size
:
var
(
--text-sm
);
font-weight
:
7
00
;
font-weight
:
6
00
;
color
:
var
(
--brand-primary-light
);
display
:
inline-flex
;
align-items
:
center
;
gap
:
var
(
--space-xs
);
transition
:
gap
var
(
--duration-normal
)
var
(
--ease-out-quart
);
}
.module-card
:hover
.module-card__link
{
gap
:
var
(
--space-sm
);
}
/* Product screenshots carousel section */
.product-showcase
{
position
:
relative
;
overflow
:
hidden
;
padding-bottom
:
var
(
--space-section
);
}
.product-showcase
::before
,
.product-showcase
::after
{
content
:
''
;
position
:
absolute
;
top
:
0
;
bottom
:
0
;
width
:
120px
;
z-index
:
var
(
--z-above
);
pointer-events
:
none
;
}
.product-showcase
::before
{
right
:
0
;
background
:
linear-gradient
(
to
left
,
var
(
--bg-deep
),
transparent
);
}
.product-showcase
::after
{
left
:
0
;
background
:
linear-gradient
(
to
right
,
var
(
--bg-deep
),
transparent
);
}
.product-showcase__track
{
display
:
flex
;
gap
:
var
(
--space-
lg
);
animation
:
scroll-right
4
0s
linear
infinite
;
gap
:
var
(
--space-
md
);
animation
:
scroll-right
5
0s
linear
infinite
;
width
:
max-content
;
padding-block
:
var
(
--space-md
);
}
@keyframes
scroll-right
{
...
...
@@ -209,18 +350,27 @@
@media
(
prefers-reduced-motion
:
reduce
)
{
.product-showcase__track
{
animation
:
none
;
flex-wrap
:
wrap
;
width
:
auto
;
}
.product-showcase
::before
,
.product-showcase
::after
{
display
:
none
;
}
}
.product-showcase__item
{
flex
:
0
0
40
0px
;
border-radius
:
var
(
--radius-
lg
);
flex
:
0
0
38
0px
;
border-radius
:
var
(
--radius-
xl
);
overflow
:
hidden
;
border
:
1px
solid
var
(
--border-subtle
);
box-shadow
:
var
(
--shadow-md
);
transition
:
all
var
(
--duration-normal
)
var
(
--ease-out-quart
);
}
.product-showcase__item
:hover
{
border-color
:
var
(
--border-glow
);
transform
:
scale
(
1.03
);
box-shadow
:
var
(
--shadow-lg
);
}
.product-showcase__item
img
{
width
:
100%
;
height
:
2
5
0px
;
height
:
2
3
0px
;
object-fit
:
cover
;
object-position
:
top
right
;
}
...
...
@@ -228,13 +378,25 @@
/* Numbers / Social proof */
.social-proof
{
background
:
var
(
--bg-base
);
position
:
relative
;
}
.social-proof
::before
{
content
:
''
;
position
:
absolute
;
inset
:
0
;
background
:
radial-gradient
(
ellipse
at
30%
50%
,
oklch
(
0.550
0.180
353.3
/
0.03
)
0%
,
transparent
50%
),
radial-gradient
(
ellipse
at
70%
50%
,
oklch
(
0.400
0.100
280
/
0.02
)
0%
,
transparent
50%
);
pointer-events
:
none
;
}
.social-proof__stats
{
display
:
grid
;
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
20
0px
,
1
fr
));
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
18
0px
,
1
fr
));
gap
:
var
(
--space-xl
);
text-align
:
center
;
position
:
relative
;
}
/* CTA section */
...
...
@@ -248,7 +410,9 @@
content
:
''
;
position
:
absolute
;
inset
:
0
;
background
:
radial-gradient
(
ellipse
at
center
,
oklch
(
0.570
0.158
353.3
/
0.06
)
0%
,
transparent
70%
);
background
:
radial-gradient
(
ellipse
at
center
30%
,
oklch
(
0.550
0.180
353.3
/
0.05
)
0%
,
transparent
60%
),
radial-gradient
(
ellipse
at
center
70%
,
oklch
(
0.400
0.100
280
/
0.03
)
0%
,
transparent
50%
);
pointer-events
:
none
;
}
...
...
@@ -262,7 +426,7 @@
}
.cta-section__desc
{
font-size
:
var
(
--text-
xl
);
font-size
:
var
(
--text-
lg
);
margin-inline
:
auto
;
margin-bottom
:
var
(
--space-xl
);
}
...
...
@@ -274,3 +438,8 @@
gap
:
var
(
--space-md
);
flex-wrap
:
wrap
;
}
/* Divider lines between sections */
.section--divided
{
border-top
:
1px
solid
var
(
--border-subtle
);
}
public/css/pages.css
View file @
081d9938
/* Module detail pages */
.module-detail__features
{
display
:
grid
;
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
min
(
100%
,
30
0px
),
1
fr
));
gap
:
var
(
--space-
lg
);
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
min
(
100%
,
28
0px
),
1
fr
));
gap
:
var
(
--space-
md
);
}
.module-detail__screenshot-section
{
...
...
@@ -42,25 +42,27 @@
display
:
flex
;
align-items
:
flex-start
;
gap
:
var
(
--space-sm
);
font-size
:
var
(
--text-
base
);
font-size
:
var
(
--text-
sm
);
color
:
var
(
--ink-secondary
);
line-height
:
1.7
;
}
.module-detail__list-item
::before
{
content
:
''
;
flex-shrink
:
0
;
width
:
6
px
;
height
:
6
px
;
margin-top
:
0.6
5
em
;
width
:
5
px
;
height
:
5
px
;
margin-top
:
0.6em
;
background
:
var
(
--brand-primary
);
border-radius
:
50%
;
box-shadow
:
0
0
6px
oklch
(
0.550
0.180
353.3
/
0.4
);
}
/* Features overview page */
.features-grid
{
display
:
grid
;
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
min
(
100%
,
3
2
0px
),
1
fr
));
gap
:
var
(
--space-
lg
);
grid-template-columns
:
repeat
(
auto-fit
,
minmax
(
min
(
100%
,
3
0
0px
),
1
fr
));
gap
:
var
(
--space-
md
);
}
.feature-item
{
...
...
@@ -70,27 +72,41 @@
padding
:
var
(
--space-xl
);
background
:
var
(
--bg-surface
);
border
:
1px
solid
var
(
--border-subtle
);
border-radius
:
var
(
--radius-
lg
);
border-radius
:
var
(
--radius-
xl
);
align-items
:
start
;
transition
:
all
var
(
--duration-slow
)
var
(
--ease-out-expo
);
position
:
relative
;
overflow
:
hidden
;
}
.feature-item
:hover
{
border-color
:
var
(
--border-glow
);
transform
:
translateY
(
-2px
);
box-shadow
:
0
8px
32px
oklch
(
0
0
0
/
0.2
);
}
.feature-item__number
{
font-size
:
var
(
--text-
3
xl
);
font-size
:
var
(
--text-
2
xl
);
font-weight
:
900
;
color
:
var
(
--brand-primary-dim
);
background
:
linear-gradient
(
135deg
,
var
(
--brand-primary-dim
),
var
(
--brand-primary-muted
));
-webkit-background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;
background-clip
:
text
;
line-height
:
1
;
opacity
:
0.
6
;
opacity
:
0.
7
;
}
.feature-item__content
h4
{
font-size
:
var
(
--text-lg
);
margin-bottom
:
var
(
--space-xs
);
font-size
:
var
(
--text-base
);
font-weight
:
700
;
margin-bottom
:
var
(
--space-2xs
);
color
:
var
(
--ink-primary
);
}
.feature-item__content
p
{
font-size
:
var
(
--text-sm
);
color
:
var
(
--ink-secondary
);
line-height
:
1.8
;
}
/* Contact / Pricing page */
...
...
@@ -116,7 +132,7 @@
.form-group
{
display
:
flex
;
flex-direction
:
column
;
gap
:
var
(
--space-xs
);
gap
:
var
(
--space-
2
xs
);
}
.form-group
label
{
...
...
@@ -128,14 +144,15 @@
.form-group
input
,
.form-group
textarea
,
.form-group
select
{
padding
:
var
(
--space-md
);
padding
:
var
(
--space-
sm
)
var
(
--space-
md
);
background
:
var
(
--bg-surface
);
border
:
1px
solid
var
(
--border-
default
);
border-radius
:
var
(
--radius-
md
);
border
:
1px
solid
var
(
--border-
subtle
);
border-radius
:
var
(
--radius-
lg
);
color
:
var
(
--ink-primary
);
font-family
:
inherit
;
font-size
:
var
(
--text-base
);
transition
:
border-color
var
(
--duration-fast
)
var
(
--ease-out-quart
);
font-size
:
var
(
--text-sm
);
transition
:
all
var
(
--duration-fast
)
var
(
--ease-out-quart
);
min-height
:
44px
;
}
.form-group
input
:focus
,
...
...
@@ -143,19 +160,33 @@
.form-group
select
:focus
{
outline
:
none
;
border-color
:
var
(
--brand-primary
);
box-shadow
:
0
0
0
3px
oklch
(
0.570
0.158
353.3
/
0.15
);
box-shadow
:
0
0
0
3px
oklch
(
0.550
0.180
353.3
/
0.1
),
0
0
20px
oklch
(
0.550
0.180
353.3
/
0.05
);
background
:
var
(
--bg-elevated
);
}
.form-group
input
::placeholder
,
.form-group
textarea
::placeholder
{
color
:
var
(
--ink-muted
);
}
.form-group
textarea
{
min-height
:
1
5
0px
;
min-height
:
1
2
0px
;
resize
:
vertical
;
}
.form-group
select
{
appearance
:
none
;
background-image
:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")
;
background-repeat
:
no-repeat
;
background-position
:
left
12px
center
;
padding-left
:
36px
;
}
.contact-info
{
padding
:
var
(
--space-xl
);
background
:
var
(
--bg-surface
);
border
:
1px
solid
var
(
--border-subtle
);
border-radius
:
var
(
--radius-
lg
);
border-radius
:
var
(
--radius-
xl
);
}
.contact-info__item
{
...
...
@@ -170,24 +201,25 @@
}
.contact-info__icon
{
width
:
2.5rem
;
height
:
2.5rem
;
width
:
2.
2
5rem
;
height
:
2.
2
5rem
;
display
:
grid
;
place-items
:
center
;
background
:
oklch
(
0.570
0.158
353.3
/
0.1
);
background
:
oklch
(
0.550
0.180
353.3
/
0.08
);
border
:
1px
solid
oklch
(
0.550
0.180
353.3
/
0.15
);
border-radius
:
var
(
--radius-md
);
color
:
var
(
--brand-primary-light
);
flex-shrink
:
0
;
}
.contact-info__label
{
font-size
:
var
(
--text-
sm
);
font-size
:
var
(
--text-
xs
);
color
:
var
(
--ink-muted
);
margin-bottom
:
2px
;
}
.contact-info__value
{
font-size
:
var
(
--text-
base
);
font-size
:
var
(
--text-
sm
);
color
:
var
(
--ink-primary
);
font-weight
:
500
;
}
...
...
@@ -196,7 +228,7 @@
.workflow
{
display
:
flex
;
align-items
:
center
;
gap
:
var
(
--space-
md
);
gap
:
var
(
--space-
sm
);
flex-wrap
:
wrap
;
justify-content
:
center
;
padding
:
var
(
--space-xl
)
0
;
...
...
@@ -205,19 +237,27 @@
.workflow__step
{
display
:
flex
;
align-items
:
center
;
gap
:
var
(
--space-
sm
);
padding
:
var
(
--space-
md
)
var
(
--space-lg
);
gap
:
var
(
--space-
xs
);
padding
:
var
(
--space-
sm
)
var
(
--space-md
);
background
:
var
(
--bg-surface
);
border
:
1px
solid
var
(
--border-subtle
);
border-radius
:
var
(
--radius-
md
);
border-radius
:
var
(
--radius-
lg
);
font-size
:
var
(
--text-sm
);
font-weight
:
500
;
color
:
var
(
--ink-primary
);
transition
:
all
var
(
--duration-normal
)
var
(
--ease-out-quart
);
white-space
:
nowrap
;
}
.workflow__step
:hover
{
border-color
:
var
(
--border-glow
);
box-shadow
:
0
0
16px
oklch
(
0.550
0.180
353.3
/
0.1
);
}
.workflow__arrow
{
color
:
var
(
--brand-primary-dim
);
font-size
:
var
(
--text-xl
);
font-size
:
var
(
--text-lg
);
opacity
:
0.6
;
}
/* Comparison table */
...
...
@@ -225,15 +265,15 @@
width
:
100%
;
border-collapse
:
collapse
;
background
:
var
(
--bg-surface
);
border-radius
:
var
(
--radius-
lg
);
border-radius
:
var
(
--radius-
xl
);
overflow
:
hidden
;
border
:
1px
solid
var
(
--border-subtle
);
}
.comparison-table
th
{
padding
:
var
(
--space-
md
)
var
(
--space-lg
);
padding
:
var
(
--space-
sm
)
var
(
--space-md
);
background
:
var
(
--bg-elevated
);
font-weight
:
7
00
;
font-weight
:
6
00
;
font-size
:
var
(
--text-sm
);
color
:
var
(
--ink-primary
);
text-align
:
right
;
...
...
@@ -241,10 +281,15 @@
}
.comparison-table
td
{
padding
:
var
(
--space-
md
)
var
(
--space-lg
);
padding
:
var
(
--space-
sm
)
var
(
--space-md
);
font-size
:
var
(
--text-sm
);
color
:
var
(
--ink-secondary
);
border-bottom
:
1px
solid
var
(
--border-subtle
);
border-bottom
:
1px
solid
oklch
(
1
0
0
/
0.02
);
transition
:
background
var
(
--duration-fast
)
var
(
--ease-out-quart
);
}
.comparison-table
tr
:hover
td
{
background
:
oklch
(
1
0
0
/
0.02
);
}
.comparison-table
tr
:last-child
td
{
...
...
@@ -258,5 +303,16 @@
.comparison-table
.cross
{
color
:
var
(
--ink-muted
);
opacity
:
0.5
;
opacity
:
0.4
;
}
/* Gradient section dividers */
.section--gradient-top
::before
{
content
:
''
;
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
height
:
1px
;
background
:
linear-gradient
(
90deg
,
transparent
10%
,
var
(
--brand-primary-dim
),
transparent
90%
);
}
public/css/tokens.css
View file @
081d9938
:root
{
/* Brand seed: oklch(0.570 0.158 353.3) — deep rose/crimson */
--brand-primary
:
oklch
(
0.570
0.158
353.3
);
--brand-primary-light
:
oklch
(
0.650
0.140
353.3
);
--brand-primary-dim
:
oklch
(
0.450
0.120
353.3
);
--brand-primary-muted
:
oklch
(
0.380
0.080
353.3
);
--brand-primary
:
oklch
(
0.550
0.180
353.3
);
--brand-primary-light
:
oklch
(
0.680
0.160
353.3
);
--brand-primary-dim
:
oklch
(
0.400
0.130
353.3
);
--brand-primary-muted
:
oklch
(
0.320
0.090
353.3
);
--brand-primary-ghost
:
oklch
(
0.570
0.158
353.3
/
0.06
);
/* Backgrounds —
true dark, not warm-tinted
*/
--bg-deep
:
oklch
(
0.
120
0.008
353.3
);
--bg-base
:
oklch
(
0.1
50
0.010
353.3
);
--bg-surface
:
oklch
(
0.1
85
0.012
353.3
);
--bg-elevated
:
oklch
(
0.
220
0.014
353.3
);
/* Backgrounds —
deeper, colder dark
*/
--bg-deep
:
oklch
(
0.
095
0.006
280
);
--bg-base
:
oklch
(
0.1
15
0.008
280
);
--bg-surface
:
oklch
(
0.1
45
0.010
280
);
--bg-elevated
:
oklch
(
0.
180
0.012
280
);
/* Text */
--ink-primary
:
oklch
(
0.9
50
0.005
353.3
);
--ink-secondary
:
oklch
(
0.7
50
0.010
353.3
);
--ink-muted
:
oklch
(
0.5
50
0.008
353.3
);
--ink-primary
:
oklch
(
0.9
60
0.003
280
);
--ink-secondary
:
oklch
(
0.7
20
0.008
280
);
--ink-muted
:
oklch
(
0.5
00
0.006
280
);
/* Borders */
--border-subtle
:
oklch
(
0.250
0.012
353.3
);
--border-default
:
oklch
(
0.320
0.015
353.3
);
--border-subtle
:
oklch
(
0.200
0.010
280
);
--border-default
:
oklch
(
0.280
0.012
280
);
--border-glow
:
oklch
(
0.550
0.180
353.3
/
0.25
);
/* Accent —
gold for secondary highlights
*/
--accent-gold
:
oklch
(
0.7
00
0.12
0
85
);
/* Accent —
warm gold for secondary
*/
--accent-gold
:
oklch
(
0.7
50
0.13
0
85
);
--accent-gold-dim
:
oklch
(
0.550
0.090
85
);
/* Functional */
...
...
@@ -32,45 +34,54 @@
/* Typography scale — 1.333 ratio (perfect fourth) */
--text-xs
:
clamp
(
0.694rem
,
0.65
vi
+
0.5rem
,
0.75rem
);
--text-sm
:
clamp
(
0.833rem
,
0.8
vi
+
0.6rem
,
0.875rem
);
--text-base
:
clamp
(
1rem
,
1
vi
+
0.7rem
,
1.063
rem
);
--text-lg
:
clamp
(
1.
125rem
,
1.2
vi
+
0.8rem
,
1.25
rem
);
--text-xl
:
clamp
(
1.
333rem
,
1.5
vi
+
0.9rem
,
1.
5rem
);
--text-2xl
:
clamp
(
1.
777rem
,
2.2
vi
+
1rem
,
2.25
rem
);
--text-3xl
:
clamp
(
2.
369rem
,
3
vi
+
1.2rem
,
3
rem
);
--text-4xl
:
clamp
(
3.157rem
,
4
vi
+
1.5rem
,
4
rem
);
--text-5xl
:
clamp
(
4.209rem
,
5.5
vi
+
1.8rem
,
5
.5rem
);
--text-base
:
clamp
(
0.938rem
,
0.9
vi
+
0.65rem
,
1
rem
);
--text-lg
:
clamp
(
1.
063rem
,
1.1
vi
+
0.75rem
,
1.188
rem
);
--text-xl
:
clamp
(
1.
25rem
,
1.4
vi
+
0.85rem
,
1.37
5rem
);
--text-2xl
:
clamp
(
1.
6rem
,
2
vi
+
0.95rem
,
2
rem
);
--text-3xl
:
clamp
(
2.
1rem
,
2.8
vi
+
1.1rem
,
2.75
rem
);
--text-4xl
:
clamp
(
2.8rem
,
3.5
vi
+
1.3rem
,
3.5
rem
);
--text-5xl
:
clamp
(
3.4rem
,
4.5
vi
+
1.5rem
,
4
.5rem
);
/* Spacing */
--space-2xs
:
clamp
(
0.125rem
,
0.25
vi
,
0.25rem
);
--space-xs
:
clamp
(
0.25rem
,
0.5
vi
,
0.5rem
);
--space-sm
:
clamp
(
0.5rem
,
1
vi
,
0.75rem
);
--space-md
:
clamp
(
1rem
,
2
vi
,
1.
5rem
);
--space-lg
:
clamp
(
1.
5rem
,
3
vi
,
2.5
rem
);
--space-xl
:
clamp
(
2
.5rem
,
5
vi
,
4
rem
);
--space-2xl
:
clamp
(
4rem
,
8
vi
,
6
rem
);
--space-3xl
:
clamp
(
6rem
,
12
vi
,
10
rem
);
--space-md
:
clamp
(
0.875rem
,
1.5
vi
,
1.2
5rem
);
--space-lg
:
clamp
(
1.
25rem
,
2.5
vi
,
2
rem
);
--space-xl
:
clamp
(
2
rem
,
4
vi
,
3
rem
);
--space-2xl
:
clamp
(
3rem
,
6
vi
,
5
rem
);
--space-3xl
:
clamp
(
5rem
,
10
vi
,
8
rem
);
--space-section
:
clamp
(
5rem
,
10
vi
,
8rem
);
/* Radius */
--radius-xs
:
0.125rem
;
--radius-sm
:
0.25rem
;
--radius-md
:
0.5rem
;
--radius-lg
:
1rem
;
--radius-xl
:
1.5rem
;
--radius-lg
:
0.875rem
;
--radius-xl
:
1.25rem
;
--radius-2xl
:
1.75rem
;
/* Shadows */
--shadow-sm
:
0
1px
3px
oklch
(
0
0
0
/
0.3
);
--shadow-md
:
0
4px
12px
oklch
(
0
0
0
/
0.4
);
--shadow-lg
:
0
8px
32px
oklch
(
0
0
0
/
0.5
);
--shadow-glow
:
0
0
40px
oklch
(
0.570
0.158
353.3
/
0.2
);
--shadow-sm
:
0
1px
3px
oklch
(
0
0
0
/
0.4
);
--shadow-md
:
0
4px
16px
oklch
(
0
0
0
/
0.5
);
--shadow-lg
:
0
12px
48px
oklch
(
0
0
0
/
0.6
);
--shadow-glow
:
0
0
60px
oklch
(
0.550
0.180
353.3
/
0.15
);
--shadow-glow-strong
:
0
0
80px
oklch
(
0.550
0.180
353.3
/
0.25
);
--shadow-inner
:
inset
0
1px
0
oklch
(
1
0
0
/
0.04
);
/* Transitions */
--ease-out-quart
:
cubic-bezier
(
0.25
,
1
,
0.5
,
1
);
--ease-out-expo
:
cubic-bezier
(
0.16
,
1
,
0.3
,
1
);
--ease-out-back
:
cubic-bezier
(
0.34
,
1.56
,
0.64
,
1
);
--ease-spring
:
cubic-bezier
(
0.175
,
0.885
,
0.32
,
1.275
);
--duration-fast
:
150ms
;
--duration-normal
:
300ms
;
--duration-slow
:
500ms
;
--duration-slower
:
800ms
;
/* Z-index scale */
--z-base
:
0
;
--z-above
:
10
;
--z-dropdown
:
100
;
--z-sticky
:
200
;
--z-modal-backdrop
:
300
;
...
...
@@ -79,7 +90,7 @@
--z-tooltip
:
600
;
/* Layout */
--container-max
:
12
8
0px
;
--container-wide
:
14
4
0px
;
--content-max
:
7
5ch
;
--container-max
:
12
0
0px
;
--container-wide
:
14
0
0px
;
--content-max
:
6
5ch
;
}
public/js/main.js
View file @
081d9938
...
...
@@ -2,6 +2,9 @@ document.addEventListener('DOMContentLoaded', () => {
initNav
();
initReveal
();
initMobileMenu
();
initParallax
();
initCountUp
();
initSmoothHover
();
});
function
initNav
()
{
...
...
@@ -12,12 +15,14 @@ function initNav() {
window
.
addEventListener
(
'scroll'
,
()
=>
{
if
(
!
ticking
)
{
requestAnimationFrame
(()
=>
{
nav
.
classList
.
toggle
(
'nav--scrolled'
,
window
.
scrollY
>
5
0
);
nav
.
classList
.
toggle
(
'nav--scrolled'
,
window
.
scrollY
>
3
0
);
ticking
=
false
;
});
ticking
=
true
;
}
},
{
passive
:
true
});
if
(
window
.
scrollY
>
30
)
nav
.
classList
.
add
(
'nav--scrolled'
);
}
function
initMobileMenu
()
{
...
...
@@ -32,7 +37,7 @@ function initMobileMenu() {
});
links
.
addEventListener
(
'click'
,
(
e
)
=>
{
if
(
e
.
target
.
classList
.
contains
(
'nav__link'
))
{
if
(
e
.
target
.
classList
.
contains
(
'nav__link'
)
||
e
.
target
.
classList
.
contains
(
'nav__cta'
)
)
{
links
.
classList
.
remove
(
'nav__links--open'
);
toggle
.
setAttribute
(
'aria-expanded'
,
'false'
);
document
.
body
.
style
.
overflow
=
''
;
...
...
@@ -41,7 +46,12 @@ function initMobileMenu() {
}
function
initReveal
()
{
if
(
window
.
matchMedia
(
'(prefers-reduced-motion: reduce)'
).
matches
)
return
;
if
(
window
.
matchMedia
(
'(prefers-reduced-motion: reduce)'
).
matches
)
{
document
.
querySelectorAll
(
'[data-reveal]'
).
forEach
(
el
=>
{
el
.
style
.
opacity
=
'1'
;
});
return
;
}
const
observer
=
new
IntersectionObserver
(
(
entries
)
=>
{
...
...
@@ -52,21 +62,127 @@ function initReveal() {
}
});
},
{
threshold
:
0.
1
,
rootMargin
:
'0px 0px -5
0px 0px'
}
{
threshold
:
0.
08
,
rootMargin
:
'0px 0px -6
0px 0px'
}
);
document
.
querySelectorAll
(
'[data-reveal]'
).
forEach
((
el
)
=>
{
document
.
querySelectorAll
(
'[data-reveal]'
).
forEach
((
el
,
i
)
=>
{
const
delay
=
parseInt
(
el
.
dataset
.
reveal
)
||
0
;
el
.
style
.
opacity
=
'0'
;
el
.
style
.
transform
=
'translateY(24px)'
;
el
.
style
.
transition
=
`opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)`
;
const
delay
=
el
.
dataset
.
reveal
||
'0'
;
el
.
style
.
transitionDelay
=
`
${
delay
}
ms`
;
el
.
style
.
transform
=
'translateY(32px)'
;
el
.
style
.
transition
=
`opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1)
${
delay
}
ms, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)
${
delay
}
ms`
;
observer
.
observe
(
el
);
});
}
document
.
documentElement
.
addEventListener
(
'animationend'
,
()
=>
{});
function
initParallax
()
{
if
(
window
.
matchMedia
(
'(prefers-reduced-motion: reduce)'
).
matches
)
return
;
const
heroVisual
=
document
.
querySelector
(
'.hero__visual'
);
if
(
!
heroVisual
)
return
;
let
ticking
=
false
;
window
.
addEventListener
(
'scroll'
,
()
=>
{
if
(
!
ticking
)
{
requestAnimationFrame
(()
=>
{
const
scrolled
=
window
.
scrollY
;
const
rate
=
scrolled
*
0.15
;
if
(
scrolled
<
window
.
innerHeight
)
{
heroVisual
.
style
.
transform
=
`translateY(
${
rate
}
px)`
;
}
ticking
=
false
;
});
ticking
=
true
;
}
},
{
passive
:
true
});
}
function
initCountUp
()
{
const
stats
=
document
.
querySelectorAll
(
'.stat__value'
);
if
(
!
stats
.
length
)
return
;
const
observer
=
new
IntersectionObserver
(
(
entries
)
=>
{
entries
.
forEach
((
entry
)
=>
{
if
(
entry
.
isIntersecting
)
{
animateValue
(
entry
.
target
);
observer
.
unobserve
(
entry
.
target
);
}
});
},
{
threshold
:
0.5
}
);
stats
.
forEach
(
stat
=>
observer
.
observe
(
stat
));
}
function
animateValue
(
el
)
{
if
(
window
.
matchMedia
(
'(prefers-reduced-motion: reduce)'
).
matches
)
return
;
const
text
=
el
.
textContent
.
trim
();
const
hasPlus
=
text
.
startsWith
(
'+'
);
const
hasPercent
=
text
.
endsWith
(
'%'
);
const
numStr
=
text
.
replace
(
/
[^
0-9.
]
/g
,
''
);
const
target
=
parseFloat
(
numStr
);
if
(
isNaN
(
target
))
return
;
const
duration
=
1500
;
const
start
=
performance
.
now
();
function
update
(
now
)
{
const
elapsed
=
now
-
start
;
const
progress
=
Math
.
min
(
elapsed
/
duration
,
1
);
const
eased
=
1
-
Math
.
pow
(
1
-
progress
,
4
);
const
current
=
Math
.
round
(
eased
*
target
);
el
.
textContent
=
(
hasPlus
?
'+'
:
''
)
+
current
+
(
hasPercent
?
'%'
:
''
);
if
(
progress
<
1
)
{
requestAnimationFrame
(
update
);
}
}
el
.
textContent
=
(
hasPlus
?
'+'
:
''
)
+
'0'
+
(
hasPercent
?
'%'
:
''
);
requestAnimationFrame
(
update
);
}
function
initSmoothHover
()
{
const
cards
=
document
.
querySelectorAll
(
'.module-card, .feature-card, .pain-point'
);
cards
.
forEach
(
card
=>
{
card
.
addEventListener
(
'mouseenter'
,
(
e
)
=>
{
const
rect
=
card
.
getBoundingClientRect
();
const
x
=
e
.
clientX
-
rect
.
left
;
const
y
=
e
.
clientY
-
rect
.
top
;
card
.
style
.
setProperty
(
'--mouse-x'
,
`
${
x
}
px`
);
card
.
style
.
setProperty
(
'--mouse-y'
,
`
${
y
}
px`
);
});
card
.
addEventListener
(
'mousemove'
,
(
e
)
=>
{
const
rect
=
card
.
getBoundingClientRect
();
const
x
=
e
.
clientX
-
rect
.
left
;
const
y
=
e
.
clientY
-
rect
.
top
;
card
.
style
.
setProperty
(
'--mouse-x'
,
`
${
x
}
px`
);
card
.
style
.
setProperty
(
'--mouse-y'
,
`
${
y
}
px`
);
});
});
}
// Inject styles
const
style
=
document
.
createElement
(
'style'
);
style
.
textContent
=
`.revealed { opacity: 1 !important; transform: translateY(0) !important; }`
;
style
.
textContent
=
`
.revealed {
opacity: 1 !important;
transform: translateY(0) !important;
}
.module-card::before,
.feature-card::before,
.pain-point::before {
background: radial-gradient(
400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
oklch(0.550 0.180 353.3 / 0.04),
transparent 60%
) !important;
opacity: 1 !important;
}
`
;
document
.
head
.
appendChild
(
style
);
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
