source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
style: enhance site-document layout with new flexbox structure and view transitions; add ClientRouter to multiple pages for improved navigation
+313
-292
+57
public/css/site-document.css
+57
public/css/site-document.css
···
37
37
flex-direction: column;
38
38
}
39
39
40
+
.site-doc__content {
41
+
flex: 1;
42
+
display: flex;
43
+
flex-direction: column;
44
+
}
45
+
46
+
.site-doc__content-main {
47
+
flex: 1;
48
+
view-transition-name: site-doc-page;
49
+
}
50
+
51
+
::view-transition-old(site-doc-page),
52
+
::view-transition-new(site-doc-page) {
53
+
animation-duration: 180ms;
54
+
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
55
+
}
56
+
57
+
::view-transition-old(site-doc-page) {
58
+
animation-name: site-doc-fade-out;
59
+
}
60
+
61
+
::view-transition-new(site-doc-page) {
62
+
animation-name: site-doc-fade-in;
63
+
}
64
+
65
+
@keyframes site-doc-fade-out {
66
+
from {
67
+
opacity: 1;
68
+
transform: translateY(0);
69
+
}
70
+
71
+
to {
72
+
opacity: 0;
73
+
transform: translateY(-2px);
74
+
}
75
+
}
76
+
77
+
@keyframes site-doc-fade-in {
78
+
from {
79
+
opacity: 0;
80
+
transform: translateY(2px);
81
+
}
82
+
83
+
to {
84
+
opacity: 1;
85
+
transform: translateY(0);
86
+
}
87
+
}
88
+
40
89
.site-doc--landing > .main-content {
41
90
flex: 1;
42
91
display: flex;
···
54
103
.site-doc__logo {
55
104
display: block;
56
105
margin-bottom: 2rem;
106
+
view-transition-name: site-doc-logo;
57
107
}
58
108
59
109
.site-doc__logo img {
···
156
206
font-size: 1.2rem;
157
207
}
158
208
}
209
+
210
+
@media (prefers-reduced-motion: reduce) {
211
+
::view-transition-old(site-doc-page),
212
+
::view-transition-new(site-doc-page) {
213
+
animation-duration: 0.01ms;
214
+
}
215
+
}
+144
public/css/site-landing-hero.css
+144
public/css/site-landing-hero.css
···
1
+
a:hover {
2
+
color: #f3f5fe;
3
+
}
4
+
5
+
a.logo {
6
+
text-decoration: none;
7
+
color: inherit;
8
+
}
9
+
10
+
.site-doc--landing {
11
+
--bg-color: var(--orbyt-page-bg);
12
+
--fg-color: var(--orbyt-white);
13
+
/* Tight stack: mark / wordmark / slogan */
14
+
--landing-logo-icon-wordmark-gap: clamp(4px, 1.2vw, 10px);
15
+
--landing-wordmark-slogan-gap: clamp(6px, 1.6vw, 14px);
16
+
/* Breathing room before CTAs */
17
+
--landing-hero-actions-gap: clamp(40px, 12vw, 96px);
18
+
}
19
+
20
+
/* Hero column — constrains content to a readable width on all screen sizes */
21
+
.hero-column {
22
+
width: 100%;
23
+
max-width: 420px;
24
+
}
25
+
26
+
.download-button-wrap {
27
+
position: relative;
28
+
margin: 0 0 10px 0;
29
+
overflow: visible;
30
+
}
31
+
32
+
.download-button-wrap .download-button {
33
+
position: relative;
34
+
z-index: 1;
35
+
margin: 0;
36
+
max-width: none;
37
+
width: 100%;
38
+
}
39
+
40
+
.download-button {
41
+
background: #551def;
42
+
border: 2px solid #000000;
43
+
border-radius: 30px;
44
+
min-height: 56px;
45
+
padding: 0.75rem 1.5rem;
46
+
font-weight: bold;
47
+
font-size: 19px;
48
+
line-height: 1.2;
49
+
display: flex;
50
+
align-items: center;
51
+
justify-content: center;
52
+
text-align: center;
53
+
text-decoration: none;
54
+
color: #e0ebff;
55
+
width: 100%;
56
+
margin: 0 0 10px 0;
57
+
}
58
+
59
+
.home-hero {
60
+
margin-top: 0;
61
+
margin-bottom: 0;
62
+
}
63
+
64
+
.home-actions {
65
+
text-align: center;
66
+
margin-top: var(--landing-hero-actions-gap);
67
+
}
68
+
69
+
.logo {
70
+
text-align: center;
71
+
display: flex;
72
+
flex-direction: column;
73
+
align-items: center;
74
+
gap: var(--landing-logo-icon-wordmark-gap);
75
+
}
76
+
77
+
.logo-icon {
78
+
width: 110px;
79
+
height: auto;
80
+
display: block;
81
+
margin: 0;
82
+
color: var(--fg-color);
83
+
}
84
+
85
+
.logo-icon .logo-bg {
86
+
fill: var(--bg-color);
87
+
}
88
+
89
+
.logo-icon .logo-fg {
90
+
fill: var(--fg-color);
91
+
stroke: var(--fg-color);
92
+
}
93
+
94
+
.logo-icon .logo-outline {
95
+
fill: none;
96
+
}
97
+
98
+
.logo-text {
99
+
font-family: 'Figtree', sans-serif;
100
+
font-weight: 900;
101
+
font-size: 42px;
102
+
color: var(--fg-color);
103
+
text-align: center;
104
+
text-box-trim: trim-start;
105
+
text-box-edge: cap alphabetic;
106
+
display: block;
107
+
margin: 0 auto;
108
+
}
109
+
110
+
.home-motto {
111
+
margin-top: var(--landing-wordmark-slogan-gap);
112
+
margin-bottom: 0;
113
+
text-align: center;
114
+
}
115
+
116
+
.motto-text {
117
+
font-family: 'Figtree', sans-serif;
118
+
font-weight: 500;
119
+
font-size: 20px;
120
+
color: #01f5b3;
121
+
text-align: center;
122
+
display: block;
123
+
margin: 0 auto;
124
+
letter-spacing: -0.02em;
125
+
}
126
+
127
+
@media (max-width: 360px) {
128
+
.logo-icon {
129
+
width: 88px;
130
+
}
131
+
132
+
.logo-text {
133
+
font-size: 34px;
134
+
}
135
+
136
+
.motto-text {
137
+
font-size: 17px;
138
+
}
139
+
140
+
.download-button {
141
+
font-size: 17px;
142
+
min-height: 50px;
143
+
}
144
+
}
+2
src/pages/404.astro
+2
src/pages/404.astro
···
5
5
import SiteFooter from '../components/SiteFooter.astro';
6
6
import SkipToContent from '../components/SkipToContent.astro';
7
7
import { SITE_DOCUMENT } from '../utils/site-document-theme';
8
+
import { ClientRouter } from 'astro:transitions';
8
9
import { useTranslations, localeToHtmlLang } from '../i18n/utils';
9
10
10
11
const locale = Astro.locals.locale ?? 'en';
···
23
24
/>
24
25
<meta name="viewport" content="width=device-width, initial-scale=1.0">
25
26
<title>{t('404.title')}</title>
27
+
<ClientRouter />
26
28
27
29
<!-- Critical: Load fonts immediately, before any external resources -->
28
30
<link rel="stylesheet" href="/css/fonts.css">
+2
src/pages/android.astro
+2
src/pages/android.astro
···
1
1
---
2
2
export const prerender = true;
3
+
import { ClientRouter } from 'astro:transitions';
3
4
---
4
5
5
6
<!doctype html>
···
7
8
<head>
8
9
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
9
10
<title>Android Beta sign up</title>
11
+
<ClientRouter />
10
12
<script is:inline async src="https://tally.so/widgets/embed.js"></script>
11
13
<style is:global>
12
14
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
+62
-139
src/pages/app.astro
+62
-139
src/pages/app.astro
···
2
2
// QR helps desktop users open this URL on iPhone; hidden on touch (same page on device).
3
3
import AltstorePalPeek from '../components/AltstorePalPeek.astro';
4
4
import DocumentColorScheme from '../components/DocumentColorScheme.astro';
5
+
import SiteFooter from '../components/SiteFooter.astro';
6
+
import SkipToContent from '../components/SkipToContent.astro';
7
+
import { ClientRouter } from 'astro:transitions';
5
8
import {
6
9
getIosDownloadOptionsFromRequest,
7
10
iosDownloadHrefFromOptions,
···
12
15
export const prerender = false;
13
16
14
17
const locale = Astro.locals.locale ?? 'en';
18
+
const countryCode = Astro.locals.countryCode;
15
19
const t = useTranslations(locale);
16
20
const appUrl = 'https://getorbyt.com/app';
17
21
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&bgcolor=000000&color=f3f5fe&data=${encodeURIComponent(appUrl)}`;
···
29
33
tileColor={SITE_DOCUMENT.orbytBlack}
30
34
/>
31
35
<link rel="stylesheet" href="/css/tokens.css" />
36
+
<link rel="stylesheet" href="/css/site-footer.css" />
37
+
<link rel="stylesheet" href="/css/site-document.css" />
38
+
<link rel="stylesheet" href="/css/site-landing-hero.css" />
32
39
<link rel="stylesheet" href="/css/caveat.css" />
33
40
<link rel="stylesheet" href="/css/klee-one.css" />
34
41
<meta name="viewport" content="width=device-width, initial-scale=1">
35
42
<title>{t('app.title')}</title>
43
+
<ClientRouter />
36
44
37
-
<style>
38
-
@font-face {
39
-
font-family: 'Figtree';
40
-
src: url('/fonts/Figtree/Figtree-VariableFont_wght.woff2') format('woff2');
41
-
font-weight: 300 900;
42
-
font-style: normal;
43
-
font-display: fallback;
44
-
}
45
-
</style>
46
45
<link rel="preload" href="/fonts/Figtree/Figtree-VariableFont_wght.woff2" as="font" type="font/woff2" crossorigin>
47
46
<link rel="preload" href="/fonts/Caveat/Caveat-latin-400.woff2" as="font" type="font/woff2" crossorigin>
48
47
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
49
48
<link rel="icon" type="image/x-icon" href="/favicon/favicon.ico">
50
49
51
50
<style>
52
-
* {
53
-
box-sizing: border-box;
54
-
}
55
-
html, body {
56
-
margin: 0;
57
-
padding: 0;
58
-
height: 100%;
59
-
min-height: 100%;
60
-
}
61
-
body {
62
-
--bg-color: #000;
63
-
--fg-color: #f3f5fe;
64
-
background: var(--bg-color);
65
-
font-family: 'Figtree', sans-serif;
66
-
min-height: 100dvh;
67
-
display: grid;
68
-
place-items: center;
69
-
overflow-x: hidden;
70
-
}
71
-
.container {
72
-
width: 100%;
73
-
max-width: 800px;
74
-
padding: 20px;
75
-
}
76
-
.main-content {
77
-
display: flex;
78
-
flex-direction: column;
79
-
align-items: center;
80
-
text-align: center;
81
-
}
82
-
.logo-icon {
83
-
width: 120px;
84
-
height: auto;
85
-
display: block;
86
-
margin: 0 auto;
87
-
}
88
-
.logo-icon .logo-fg {
89
-
fill: var(--fg-color);
90
-
stroke: var(--fg-color);
91
-
}
92
-
.logo {
93
-
display: block;
94
-
transition: opacity 0.2s ease;
95
-
}
96
-
.logo:hover {
97
-
opacity: 0.8;
98
-
}
99
-
.subtitle {
51
+
/* /app only — QR + subtitle copy; hero / CTAs come from site-landing-hero.css (same as index) */
52
+
.app-subtitle {
100
53
font-family: 'Figtree', sans-serif;
101
54
font-weight: 600;
102
55
font-size: 28px;
103
56
color: var(--fg-color);
57
+
line-height: 1.25;
104
58
text-align: center;
105
-
display: block;
106
-
margin: 20px auto 0;
59
+
margin: 0;
107
60
}
108
-
.qr-section {
109
-
margin: 40px 0;
61
+
62
+
.app-subtitle--mobile {
63
+
display: none;
64
+
}
65
+
66
+
.app-qr-section {
67
+
margin-top: clamp(28px, 7vw, 40px);
110
68
text-align: center;
111
69
}
112
-
.qr-container {
70
+
71
+
.app-qr-container {
113
72
background: var(--bg-color);
114
73
padding: 20px;
115
74
border-radius: 20px;
···
118
77
}
119
78
120
79
@supports (corner-shape: squircle) {
121
-
.qr-container {
80
+
.app-qr-container {
122
81
corner-shape: var(--orbyt-corner-shape, squircle);
123
82
}
124
83
}
125
-
.qr-code {
84
+
85
+
.app-qr-code {
126
86
width: 200px;
127
87
height: 200px;
128
88
display: block;
129
89
}
130
-
.qr-label {
90
+
91
+
.app-qr-label {
131
92
font-size: 14px;
132
93
color: #888;
133
94
margin-top: 16px;
134
95
letter-spacing: 0.05em;
135
96
}
136
-
.buttons {
137
-
text-align: center;
138
-
margin-top: 10px;
139
-
width: 100%;
140
-
max-width: 400px;
141
-
overflow: visible;
142
-
}
143
-
.download-button-wrap {
144
-
position: relative;
145
-
width: 100%;
146
-
margin: 0 auto 12px auto;
147
-
overflow: visible;
148
-
}
149
97
150
-
.download-button-wrap .download-button {
151
-
position: relative;
152
-
z-index: 1;
153
-
margin: 0;
98
+
a.logo {
99
+
transition: opacity 0.2s ease;
154
100
}
155
101
156
-
.download-button {
157
-
background: #551DEF;
158
-
border: 2px solid #000000;
159
-
border-radius: 30px;
160
-
min-height: 60px;
161
-
padding: 0.75rem 1.5rem;
162
-
font-weight: bold;
163
-
font-size: 20px;
164
-
line-height: 1.2;
165
-
display: flex;
166
-
align-items: center;
167
-
justify-content: center;
168
-
text-align: center;
169
-
text-decoration: none;
170
-
color: #E0EBFF;
171
-
width: 100%;
172
-
margin: 0 auto 12px auto;
173
-
}
174
-
.download-button:hover {
175
-
opacity: 0.9;
102
+
a.logo:hover {
103
+
opacity: 0.85;
176
104
}
177
105
178
-
/* Mobile-specific text */
179
-
.subtitle-mobile {
180
-
display: none;
181
-
}
182
-
183
-
/* Touch devices (mobile/tablet) */
184
106
@media (hover: none) and (pointer: coarse) {
185
-
.subtitle-desktop {
107
+
.app-subtitle--desktop {
186
108
display: none;
187
109
}
188
-
.subtitle-mobile {
110
+
111
+
.app-subtitle--mobile {
189
112
display: block;
190
113
}
191
-
.qr-section {
114
+
115
+
.app-qr-section {
192
116
display: none;
193
117
}
194
-
.buttons {
195
-
margin-top: 28px;
196
-
}
197
118
}
198
-
119
+
199
120
@media (max-width: 500px) {
200
-
.logo-icon {
201
-
width: 90px;
202
-
}
203
-
.subtitle {
121
+
.app-subtitle {
204
122
font-size: 22px;
205
123
}
206
-
.qr-section {
207
-
margin: 30px 0;
124
+
125
+
.app-qr-section {
126
+
margin-top: 30px;
208
127
}
209
-
.qr-code {
128
+
129
+
.app-qr-code {
210
130
width: 180px;
211
131
height: 180px;
212
132
}
213
-
.download-button {
214
-
min-height: 50px;
215
-
font-size: 18px;
216
-
}
217
133
}
218
-
219
134
</style>
220
135
</head>
221
136
<body>
222
-
<div class="container">
223
-
<div class="main-content">
137
+
<SkipToContent />
138
+
<div class="site-doc site-doc--landing">
139
+
<main id="main-content" class="main-content">
140
+
<div class="hero-column">
141
+
<div class="home-hero">
224
142
<a href="/" class="logo">
225
143
<svg class="logo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="65 65 894 894">
226
144
<defs>
···
234
152
<path class="logo-fg" mask="url(#cutout-mask)" stroke-width="65" stroke-linejoin="round" stroke-linecap="round" d="M349 129.3c-23.9 5.4-36.8 31.5-26.1 53.2 8 16.2 25.2 24.4 42.1 20.1 7.4-1.9 5.3-3.4 18.5 13.9 10.3 13.6 33.6 44.2 36.7 48.4 3.5 4.6 3.5 4.6-1.1 8.9-5.9 5.6-14.1 16.9-19 26-5 9.4-3.4 8.6-22.1 10.2-136.2 11.1-177 34.7-192.6 111.5-16.5 81.2-16.5 193.6.1 276.7 10.5 52.9 39.8 83.7 89.3 93.9 6 1.3 6 1.3 2.5 8.8-18.4 39.4-5.4 73.1 30 78.1 24.5 3.5 32.3-1.8 73.7-50 20.8-24.3 16.8-22.1 37-20.5 50.9 4.1 138.2 4.1 189 0 20.2-1.6 16.2-3.8 37 20.5 41.4 48.2 49.2 53.5 73.7 50 35.4-5 48.4-38.7 30-78.1-3.5-7.5-3.5-7.5 2.5-8.8 49.5-10.2 78.8-41 89.3-93.9 16.6-83.1 16.6-195.5.1-276.7C824 344.7 783.2 321.1 647 310c-18.7-1.6-17.1-.8-22.1-10.2-4.9-9.1-13.1-20.4-19-26-4.6-4.3-4.6-4.3-1.1-8.9 3.1-4.2 26.4-34.8 36.7-48.4 13.2-17.3 11.1-15.8 18.5-13.9 41.5 10.6 64.2-49.2 26.3-69.3-32-17.1-68 17.2-51.7 49.3 3.1 6.1 3.1 6.1-11.8 25.5-8.2 10.7-20 26-26.1 34.1-11.1 14.8-11.1 14.8-14.7 12.6-44.5-26.5-94.5-26.5-139 0-3.6 2.2-3.6 2.2-14.7-12.6-6.1-8.1-17.9-23.4-26.1-34.1-14.9-19.4-14.9-19.4-11.8-25.5 13.8-27.1-11.7-59.8-41.4-53.3Z"/>
235
153
</svg>
236
154
</a>
237
-
238
-
<div class="subtitle subtitle-desktop">{t('app.subtitle.desktop')}</div>
239
-
<div class="subtitle subtitle-mobile">{t('app.subtitle.mobile')}</div>
240
-
241
-
<div class="qr-section">
242
-
<div class="qr-container">
243
-
<img class="qr-code" src={qrCodeUrl} alt={t('app.qr.alt')} />
155
+
</div>
156
+
157
+
<div class="home-motto">
158
+
<p class="app-subtitle app-subtitle--desktop">{t('app.subtitle.desktop')}</p>
159
+
<p class="app-subtitle app-subtitle--mobile">{t('app.subtitle.mobile')}</p>
160
+
</div>
161
+
162
+
<div class="app-qr-section" aria-hidden="false">
163
+
<div class="app-qr-container">
164
+
<img class="app-qr-code" src={qrCodeUrl} alt={t('app.qr.alt')} />
244
165
</div>
245
-
<div class="qr-label">{t('app.qr.caption')}</div>
166
+
<div class="app-qr-label">{t('app.qr.caption')}</div>
246
167
</div>
247
168
248
-
<div class="buttons">
169
+
<div class="home-actions">
249
170
<div
250
171
class:list={[
251
172
'download-button-wrap',
···
257
178
</div>
258
179
<a href="/android" class="download-button">{t('app.button.android_waitlist')}</a>
259
180
</div>
260
-
</div>
181
+
</div>
182
+
</main>
183
+
<SiteFooter locale={locale} currentPath="/app" countryCode={countryCode} />
261
184
</div>
262
185
</body>
263
186
</html>
+19
-13
src/pages/contact.astro
+19
-13
src/pages/contact.astro
···
5
5
import SiteFooter from '../components/SiteFooter.astro';
6
6
import SkipToContent from '../components/SkipToContent.astro';
7
7
import { SITE_DOCUMENT } from '../utils/site-document-theme';
8
+
import { ClientRouter } from 'astro:transitions';
8
9
import { useTranslations, localeToHtmlLang } from '../i18n/utils';
9
10
10
11
const locale = Astro.locals.locale ?? 'en';
···
22
23
/>
23
24
<meta name="viewport" content="width=device-width, initial-scale=1.0">
24
25
<title>{t('contact.title')}</title>
26
+
<ClientRouter />
25
27
26
28
<link rel="preload" href="/fonts/Figtree/Figtree-VariableFont_wght.woff2" as="font" type="font/woff2" crossorigin>
27
29
···
38
40
<SkipToContent />
39
41
40
42
<div class="site-doc">
41
-
<header class="site-doc__masthead">
43
+
<div class="site-doc__content">
42
44
<a href="/" class="site-doc__logo">
43
45
<img src="/images/orbyt-logo.svg" alt={t('contact.logo.alt')}>
44
46
</a>
45
-
<h1>{t('contact.heading')}</h1>
46
-
</header>
47
+
<div class="site-doc__content-main">
48
+
<header class="site-doc__masthead">
49
+
<h1>{t('contact.heading')}</h1>
50
+
</header>
47
51
48
-
<main id="main-content" class="site-doc__prose">
52
+
<main id="main-content" class="site-doc__prose">
49
53
50
-
<h2>{t('contact.section.general')}</h2>
51
-
<p><a href="mailto:hello@getorbyt.com">hello@getorbyt.com</a></p>
54
+
<h2>{t('contact.section.general')}</h2>
55
+
<p><a href="mailto:hello@getorbyt.com">hello@getorbyt.com</a></p>
52
56
53
-
<h2>{t('contact.section.press')}</h2>
54
-
<p><a href="mailto:press@getorbyt.com">press@getorbyt.com</a></p>
57
+
<h2>{t('contact.section.press')}</h2>
58
+
<p><a href="mailto:press@getorbyt.com">press@getorbyt.com</a></p>
55
59
56
-
<h2>{t('contact.section.bugs')}</h2>
57
-
<p><a href="mailto:support@getorbyt.com">support@getorbyt.com</a></p>
60
+
<h2>{t('contact.section.bugs')}</h2>
61
+
<p><a href="mailto:support@getorbyt.com">support@getorbyt.com</a></p>
58
62
59
-
<h2>{t('contact.section.copyright')}</h2>
60
-
<p set:html={t('contact.copyright.html')} />
61
-
</main>
63
+
<h2>{t('contact.section.copyright')}</h2>
64
+
<p set:html={t('contact.copyright.html')} />
65
+
</main>
66
+
</div>
67
+
</div>
62
68
63
69
<SiteFooter locale={locale} currentPath="/contact" countryCode={countryCode} />
64
70
</div>
+3
-129
src/pages/index.astro
+3
-129
src/pages/index.astro
···
5
5
import DocumentColorScheme from '../components/DocumentColorScheme.astro';
6
6
import SiteFooter from '../components/SiteFooter.astro';
7
7
import SkipToContent from '../components/SkipToContent.astro';
8
+
import { ClientRouter } from 'astro:transitions';
8
9
import {
9
10
getIosDownloadOptionsFromRequest,
10
11
iosDownloadHrefFromOptions,
···
32
33
<link rel="stylesheet" href="/css/tokens.css" />
33
34
<link rel="stylesheet" href="/css/site-footer.css" />
34
35
<link rel="stylesheet" href="/css/site-document.css" />
36
+
<link rel="stylesheet" href="/css/site-landing-hero.css" />
35
37
<link rel="stylesheet" href="/css/caveat.css" />
36
38
<link rel="stylesheet" href="/css/klee-one.css" />
37
39
<meta name="google-site-verification" content="4xaimUg28uLCqKwsPNIz6QeG_tfnLlAdHgS5bC_90JU"/>
···
41
43
<title>{t('index.title')}</title>
42
44
<meta name="description" content={t('index.meta.description')}>
43
45
<meta name="viewport" content="width=device-width, initial-scale=1">
46
+
<ClientRouter />
44
47
45
48
<link rel="preload" href="/fonts/Figtree/Figtree-VariableFont_wght.woff2" as="font" type="font/woff2" crossorigin>
46
49
<link rel="preload" href="/fonts/Caveat/Caveat-latin-400.woff2" as="font" type="font/woff2" crossorigin>
···
95
98
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
96
99
<link rel="manifest" href="/favicon/site.webmanifest">
97
100
98
-
<style>
99
-
a:hover {
100
-
color: #f3f5fe;
101
-
}
102
-
103
-
.site-doc--landing {
104
-
--bg-color: var(--orbyt-page-bg);
105
-
--fg-color: var(--orbyt-white);
106
-
/* Tight stack: mark / wordmark / slogan */
107
-
--landing-logo-icon-wordmark-gap: clamp(4px, 1.2vw, 10px);
108
-
--landing-wordmark-slogan-gap: clamp(6px, 1.6vw, 14px);
109
-
/* Breathing room before CTAs */
110
-
--landing-hero-actions-gap: clamp(40px, 12vw, 96px);
111
-
}
112
-
113
-
/* Hero column — constrains content to a readable width on all screen sizes */
114
-
.hero-column {
115
-
width: 100%;
116
-
max-width: 420px;
117
-
}
118
-
119
-
.download-button-wrap {
120
-
position: relative;
121
-
margin: 0 0 10px 0;
122
-
overflow: visible;
123
-
}
124
-
125
-
.download-button-wrap .download-button {
126
-
position: relative;
127
-
z-index: 1;
128
-
margin: 0;
129
-
max-width: none;
130
-
width: 100%;
131
-
}
132
-
133
-
.download-button {
134
-
background: #551DEF;
135
-
border: 2px solid #000000;
136
-
border-radius: 30px;
137
-
min-height: 56px;
138
-
padding: 0.75rem 1.5rem;
139
-
font-weight: bold;
140
-
font-size: 19px;
141
-
line-height: 1.2;
142
-
display: flex;
143
-
align-items: center;
144
-
justify-content: center;
145
-
text-align: center;
146
-
text-decoration: none;
147
-
color: #E0EBFF;
148
-
width: 100%;
149
-
margin: 0 0 10px 0;
150
-
}
151
-
152
-
.home-hero {
153
-
margin-top: 0;
154
-
margin-bottom: 0;
155
-
}
156
-
157
-
.home-actions {
158
-
text-align: center;
159
-
margin-top: var(--landing-hero-actions-gap);
160
-
}
161
-
162
-
.logo {
163
-
text-align: center;
164
-
display: flex;
165
-
flex-direction: column;
166
-
align-items: center;
167
-
gap: var(--landing-logo-icon-wordmark-gap);
168
-
}
169
-
170
-
.logo-icon {
171
-
width: 110px;
172
-
height: auto;
173
-
display: block;
174
-
margin: 0;
175
-
color: var(--fg-color);
176
-
}
177
-
178
-
.logo-icon .logo-bg {
179
-
fill: var(--bg-color);
180
-
}
181
-
182
-
.logo-icon .logo-fg {
183
-
fill: var(--fg-color);
184
-
stroke: var(--fg-color);
185
-
}
186
-
187
-
.logo-icon .logo-outline {
188
-
fill: none;
189
-
}
190
-
191
-
.logo-text {
192
-
font-family: 'Figtree', sans-serif;
193
-
font-weight: 900;
194
-
font-size: 42px;
195
-
color: var(--fg-color);
196
-
text-align: center;
197
-
text-box-trim: trim-start;
198
-
text-box-edge: cap alphabetic;
199
-
display: block;
200
-
margin: 0 auto;
201
-
}
202
-
203
-
.home-motto {
204
-
margin-top: var(--landing-wordmark-slogan-gap);
205
-
margin-bottom: 0;
206
-
text-align: center;
207
-
}
208
-
209
-
.motto-text {
210
-
font-family: 'Figtree', sans-serif;
211
-
font-weight: 500;
212
-
font-size: 20px;
213
-
color: #01f5b3;
214
-
text-align: center;
215
-
display: block;
216
-
margin: 0 auto;
217
-
letter-spacing: -0.02em;
218
-
}
219
-
220
-
@media (max-width: 360px) {
221
-
.logo-icon { width: 88px; }
222
-
.logo-text { font-size: 34px; }
223
-
.motto-text { font-size: 17px; }
224
-
.download-button { font-size: 17px; min-height: 50px; }
225
-
}
226
-
</style>
227
101
</head>
228
102
229
103
<body>
+11
-5
src/pages/privacy.astro
+11
-5
src/pages/privacy.astro
···
5
5
import SiteFooter from '../components/SiteFooter.astro';
6
6
import SkipToContent from '../components/SkipToContent.astro';
7
7
import { SITE_DOCUMENT } from '../utils/site-document-theme';
8
+
import { ClientRouter } from 'astro:transitions';
8
9
import { useTranslations, localeToHtmlLang } from '../i18n/utils';
9
10
import { getPrivacyContent } from '../i18n/legal/privacy-content';
10
11
···
24
25
/>
25
26
<meta name="viewport" content="width=device-width, initial-scale=1.0">
26
27
<title>{t('privacy.title')}</title>
28
+
<ClientRouter />
27
29
28
30
<link rel="preload" href="/fonts/Figtree/Figtree-VariableFont_wght.woff2" as="font" type="font/woff2" crossorigin>
29
31
···
40
42
<SkipToContent />
41
43
42
44
<div class="site-doc">
43
-
<header class="site-doc__masthead">
45
+
<div class="site-doc__content">
44
46
<a href="/" class="site-doc__logo">
45
47
<img src="/images/orbyt-logo.svg" alt={t('privacy.logo.alt')}>
46
48
</a>
47
-
<h1>{t('privacy.heading')}</h1>
48
-
<p class="site-doc__subtitle">{t('privacy.last_updated')}</p>
49
-
</header>
49
+
<div class="site-doc__content-main">
50
+
<header class="site-doc__masthead">
51
+
<h1>{t('privacy.heading')}</h1>
52
+
<p class="site-doc__subtitle">{t('privacy.last_updated')}</p>
53
+
</header>
50
54
51
-
<main id="main-content" class="site-doc__prose" set:html={privacyBody} />
55
+
<main id="main-content" class="site-doc__prose" set:html={privacyBody} />
56
+
</div>
57
+
</div>
52
58
53
59
<SiteFooter locale={locale} currentPath="/privacy" countryCode={countryCode} />
54
60
</div>
+11
-5
src/pages/terms.astro
+11
-5
src/pages/terms.astro
···
5
5
import SiteFooter from '../components/SiteFooter.astro';
6
6
import SkipToContent from '../components/SkipToContent.astro';
7
7
import { SITE_DOCUMENT } from '../utils/site-document-theme';
8
+
import { ClientRouter } from 'astro:transitions';
8
9
import { useTranslations, localeToHtmlLang } from '../i18n/utils';
9
10
import { getTermsContent } from '../i18n/legal/terms-content';
10
11
···
24
25
/>
25
26
<meta name="viewport" content="width=device-width, initial-scale=1.0">
26
27
<title>{t('terms.title')}</title>
28
+
<ClientRouter />
27
29
28
30
<link rel="preload" href="/fonts/Figtree/Figtree-VariableFont_wght.woff2" as="font" type="font/woff2" crossorigin>
29
31
···
40
42
<SkipToContent />
41
43
42
44
<div class="site-doc">
43
-
<header class="site-doc__masthead">
45
+
<div class="site-doc__content">
44
46
<a href="/" class="site-doc__logo">
45
47
<img src="/images/orbyt-logo.svg" alt={t('terms.logo.alt')}>
46
48
</a>
47
-
<h1>{t('terms.heading')}</h1>
48
-
<p class="site-doc__subtitle">{t('terms.last_updated')}</p>
49
-
</header>
49
+
<div class="site-doc__content-main">
50
+
<header class="site-doc__masthead">
51
+
<h1>{t('terms.heading')}</h1>
52
+
<p class="site-doc__subtitle">{t('terms.last_updated')}</p>
53
+
</header>
50
54
51
-
<main id="main-content" class="site-doc__prose" set:html={termsBody} />
55
+
<main id="main-content" class="site-doc__prose" set:html={termsBody} />
56
+
</div>
57
+
</div>
52
58
53
59
<SiteFooter locale={locale} currentPath="/terms" countryCode={countryCode} />
54
60
</div>
+2
-1
src/styles/altstore-pal-peek.css
+2
-1
src/styles/altstore-pal-peek.css
···
363
363
right: 8px;
364
364
transform-origin: 58% 76%;
365
365
transform: translate(28%, -36%) rotate(7deg);
366
-
transition: transform 0.18s ease;
366
+
/* Avoid first-paint twitch on mobile when layout settles */
367
+
transition: none;
367
368
}
368
369
369
370
.download-button-wrap--pal .altstore-pal-peek:active {