-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyles.css
More file actions
134 lines (123 loc) · 8.58 KB
/
Copy pathstyles.css
File metadata and controls
134 lines (123 loc) · 8.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
:root{
--bg:#050507;
--ink:#eef0f5;
--dim:#9a9caa;
--faint:#5f6070;
--violet:#b6a8ff;
--cyan:#86e6ff;
--pink:#ffb0e6;
--line:rgba(238,240,245,.14);
--max:1340px;
--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:"Space Grotesk",system-ui,sans-serif;font-weight:300;
line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
em{font-style:italic}
::selection{background:var(--violet);color:#0a0714}
#chrome{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
#chrome.fallback{background:
radial-gradient(60% 60% at 40% 35%,#c9c6e6,transparent 60%),
radial-gradient(50% 50% at 70% 60%,#86e6ff,transparent 60%),
radial-gradient(70% 70% at 50% 80%,#ffb0e6,transparent 60%),#050507}
body>*:not(#chrome){position:relative;z-index:2}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
padding:24px clamp(18px,4vw,56px)}
.brand{font-family:"Syne",sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:.02em;
background:linear-gradient(120deg,#fff,#b6a8ff 40%,#86e6ff 70%,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;gap:clamp(16px,2.4vw,34px);align-items:center;font-size:.86rem;letter-spacing:.02em}
.nav-links a{color:var(--dim);transition:color .3s}.nav-links a:hover{color:var(--ink)}
.nav-cta{border:1px solid var(--line);border-radius:40px;padding:9px 18px;color:var(--ink)!important;
transition:border-color .3s,background .3s}
.nav-cta:hover{border-color:var(--violet);background:rgba(182,168,255,.14)}
@media(max-width:720px){.nav-links a:nth-child(1),.nav-links a:nth-child(2){display:none}}
/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;
padding:120px clamp(18px,4vw,56px) 60px;max-width:var(--max);margin:0 auto}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(100deg,rgba(5,5,7,.72) 0%,rgba(5,5,7,.3) 45%,transparent 70%)}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:1.6rem}
.hero-title{font-family:"Syne",sans-serif;font-weight:800;line-height:.9;letter-spacing:-.03em;
font-size:clamp(3.4rem,13.5vw,11.5rem)}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line>span{display:inline-block;
background:linear-gradient(105deg,#ffffff 10%,#b6a8ff 34%,#86e6ff 54%,#ffb0e6 74%,#ffffff 92%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
filter:drop-shadow(0 4px 30px rgba(182,168,255,.25))}
.hero-sub{max-width:42ch;margin:2rem 0 2.4rem;color:var(--ink);font-size:clamp(1.02rem,1.5vw,1.24rem);opacity:.86}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.btn{position:relative;border:1px solid var(--line);border-radius:40px;padding:13px 26px;font-size:.86rem;letter-spacing:.04em;
overflow:hidden;transition:border-color .3s}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .35s;
background:linear-gradient(120deg,var(--violet),var(--cyan),var(--pink))}
.btn:hover{border-color:transparent;color:#0a0714}.btn:hover::before{opacity:1}
.meta{font-family:"JetBrains Mono",monospace;font-size:.76rem;color:var(--faint);letter-spacing:.04em}
/* strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;
padding:18px 0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:rgba(5,5,7,.4)}
.strip-track{display:inline-flex;gap:2rem;align-items:center;animation:slide 28s linear infinite;
font-family:"Syne",sans-serif;font-weight:700;font-size:clamp(1.3rem,3vw,2rem);letter-spacing:.04em;color:var(--dim)}
.strip-track b{color:var(--violet)}
@keyframes slide{to{transform:translateX(-50%)}}
/* sections */
section{padding:clamp(90px,12vh,160px) clamp(18px,4vw,56px)}
.section-head{max-width:var(--max);margin:0 auto 3rem}
.kicker{font-family:"JetBrains Mono",monospace;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:1rem}
h2{font-family:"Syne",sans-serif;font-weight:700;font-size:clamp(2.6rem,7vw,6rem);line-height:.92;letter-spacing:-.02em}
/* work list */
.work-list{max-width:var(--max);margin:0 auto;list-style:none;border-top:1px solid var(--line)}
.work-row{display:grid;grid-template-columns:60px 1fr auto auto;gap:20px;align-items:center;
padding:clamp(18px,3vw,34px) 6px;border-bottom:1px solid var(--line);position:relative;isolation:isolate;
transition:padding-left .5s var(--ease)}
.work-row::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
background:linear-gradient(90deg,rgba(182,168,255,.16),transparent 70%)}
.work-row:hover,.work-row:focus-visible{padding-left:26px;outline:none}
.work-row:hover::before,.work-row:focus-visible::before{opacity:1}
.w-n{font-family:"JetBrains Mono",monospace;font-size:.85rem;color:var(--faint)}
.w-name{font-family:"Syne",sans-serif;font-weight:700;font-size:clamp(1.6rem,4vw,3rem);line-height:1}
.w-cat{font-family:"JetBrains Mono",monospace;font-size:.8rem;color:var(--dim)}
.w-yr{font-family:"JetBrains Mono",monospace;font-size:.85rem;color:var(--faint)}
@media(max-width:680px){.work-row{grid-template-columns:36px 1fr auto}.w-cat{display:none}}
/* studio */
.studio{border-top:1px solid var(--line)}
.studio-inner{max-width:var(--max);margin:0 auto}
.studio-text{font-family:"Syne",sans-serif;font-weight:600;font-size:clamp(1.7rem,4.2vw,3.2rem);line-height:1.14;
letter-spacing:-.01em;margin:1rem 0 3.4rem;max-width:22ch}
.studio-text em{background:linear-gradient(120deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.studio-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
@media(max-width:820px){.studio-cols{grid-template-columns:1fr;gap:26px}}
.studio-cols h3{font-family:"Syne",sans-serif;font-weight:700;font-size:1.2rem;margin-bottom:.7rem}
.studio-cols p{color:var(--dim);max-width:36ch}
/* statement */
.statement{text-align:center;padding-block:clamp(120px,20vh,240px)}
.statement p{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(3rem,13vw,13rem);line-height:.9;letter-spacing:-.02em}
.statement em{background:linear-gradient(120deg,var(--violet),var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.statement span{color:var(--ink)}
/* footer */
.footer{border-top:1px solid var(--line);padding:clamp(70px,10vh,130px) clamp(18px,4vw,56px) 44px;text-align:center}
.foot-k{font-family:"JetBrains Mono",monospace;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;margin-bottom:1.6rem}
.foot-mail{display:inline-block;font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(2rem,8vw,6rem);line-height:1;letter-spacing:-.02em;
background:linear-gradient(120deg,#fff,#b6a8ff,#86e6ff,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:filter .3s}
.foot-mail:hover{filter:brightness(1.2) drop-shadow(0 0 20px rgba(134,230,255,.4))}
.foot-bottom{max-width:var(--max);margin:2.6rem auto 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
padding-top:24px;border-top:1px solid var(--line);font-family:"JetBrains Mono",monospace;font-size:.78rem;color:var(--faint)}
.foot-bottom a{color:var(--dim)}.foot-bottom a:hover{color:var(--cyan)}
/* reveals + hero intro */
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .hero-title .line>span{transform:translateY(110%);transition:transform 1.2s var(--ease)}
.hero.loaded .hero-title .line>span{transform:translateY(0)}
.hero.loaded .reveal{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.hero .eyebrow{transition-delay:.1s}.hero .line>span{transition-delay:.2s}
.hero .hero-sub{transition-delay:.42s}.hero .hero-actions{transition-delay:.56s}
a:focus-visible,.btn:focus-visible,.work-row:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
@media (prefers-reduced-motion:reduce){
.reveal,.js .reveal{opacity:1!important;transform:none!important}
.hero-title .line>span{transform:none!important}
.strip-track{animation:none}
}