Add the landing page in WEBSITE
One page, English, plain HTML/CSS/JS with no build step and no third-party
requests: the four fonts (OFL) are served from the folder.
Brutal layout in the icon's colours (cyan, electric blue, violet, pink on
near black): hard 2px lines, solid slabs, offset shadows, marquee bands.
The centrepiece is a phone drawn in HTML at 390 x 844, used three times:
a looping teaser in the hero; a scroll-driven story of seven chapters
(home, swipe up, wave-alphabet scrub, folder blur, quick launch, clock
options, hide app) where the scroll position maps to a state, so it plays
both ways; and a playground that answers to touch and mouse (swipe up,
scrub, hold to hide with Undo, folder, quick launch, clock options, page
two, edge swipe home) plus buttons that run each demo.
Also: privacy section ("goes online for exactly two things"), download
with a QR code for the fixed-name latest APK, install steps, FAQ, link
preview image. Reduced motion shows each chapter's finished picture.
Checked in Chrome at 1440 x 900 and 390 x 844: no console errors, no
sideways scrolling, every playground gesture, and the QR as drawn scans.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
TMCandClaude Opus 5.5 committed
1 parent
c8da9f301c
commit
d273543070
19 files changed
+2831
No files matched your search
@@ -0,0 +1,46 @@
|
||||
# Flexera Launcher website
|
||||
|
||||
A one-page landing site for Flexera Launcher. Plain HTML, CSS and JavaScript: no build step, no
|
||||
libraries, and nothing is loaded from anyone else's server.
|
||||
|
||||
| File | What it is |
|
||||
| --- | --- |
|
||||
| `index.html` | The page and all its copy |
|
||||
| `styles.css` | Layout, colours and the phone's look |
|
||||
| `script.js` | The phone model, the scroll story, the playground, the scroll effects |
|
||||
| `assets/` | App icon (WebP and PNG favicons), QR code, link-preview image (`og.jpg`) |
|
||||
| `fonts/` | Unbounded, Space Grotesk, JetBrains Mono and Outfit, Latin subset, each with its licence |
|
||||
|
||||
## Look at it
|
||||
|
||||
Open `index.html` in a browser. To see it as a server would serve it:
|
||||
|
||||
```sh
|
||||
cd WEBSITE
|
||||
python -m http.server 8080
|
||||
```
|
||||
|
||||
and open <http://localhost:8080>.
|
||||
|
||||
## After a release
|
||||
|
||||
- Change `VERSION` at the top of `script.js`. The page fills every version number from it.
|
||||
`index.html` carries the same number as a fallback for browsers without JavaScript; replace
|
||||
`0.13.0` there too.
|
||||
- The download buttons and the QR code point at
|
||||
`.../releases/download/latest/FlexeraLauncher.apk`, the fixed-name copy that every release
|
||||
uploads, so they never need changing.
|
||||
- If the hero changes, retake `assets/og.jpg` (1200 x 630, the top of the page).
|
||||
|
||||
## The phone
|
||||
|
||||
The phone is drawn in HTML at 390 x 844 and scaled to fit, three times over: a looping teaser in
|
||||
the hero, one driven by the scroll position through the seven "How it works" chapters
|
||||
(`storyState()` in `script.js`), and one in the playground that answers to touch and mouse. All three
|
||||
render the same state object, described in `blank()`. App names and icons on it are generic
|
||||
stand-ins, not real apps.
|
||||
|
||||
## Fonts
|
||||
|
||||
All four are under the SIL Open Font License 1.1 (`fonts/*-OFL.txt`), downloaded from Google Fonts
|
||||
and served from this folder.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="41" height="41" class="segno"><path class="qrline" stroke="currentColor" d="M0 0.5h7m2 0h2m1 0h1m2 0h2m2 0h3m1 0h1m4 0h1m2 0h2m1 0h7m-41 1h1m5 0h1m2 0h1m1 0h3m2 0h1m1 0h1m1 0h2m3 0h1m1 0h1m2 0h1m1 0h1m1 0h1m5 0h1m-41 1h1m1 0h3m1 0h1m1 0h1m1 0h1m1 0h3m6 0h3m2 0h3m5 0h1m1 0h3m1 0h1m-41 1h1m1 0h3m1 0h1m1 0h3m2 0h1m4 0h1m3 0h6m6 0h1m1 0h3m1 0h1m-41 1h1m1 0h3m1 0h1m1 0h1m3 0h1m1 0h4m1 0h5m4 0h1m1 0h3m1 0h1m1 0h3m1 0h1m-41 1h1m5 0h1m1 0h1m1 0h4m2 0h2m2 0h3m1 0h1m2 0h1m1 0h1m4 0h1m5 0h1m-41 1h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7m-33 1h1m1 0h2m3 0h1m4 0h3m1 0h1m1 0h3m-29 1h1m1 0h5m2 0h1m3 0h1m2 0h2m4 0h5m2 0h1m1 0h1m2 0h5m-38 1h1m1 0h1m4 0h1m1 0h1m1 0h1m1 0h1m1 0h4m1 0h1m1 0h1m2 0h1m1 0h1m1 0h7m1 0h3m-40 1h1m1 0h2m1 0h2m1 0h1m3 0h2m5 0h3m4 0h2m3 0h1m6 0h1m-39 1h3m4 0h1m2 0h1m3 0h2m1 0h2m1 0h4m1 0h3m2 0h2m3 0h2m1 0h1m-39 1h2m2 0h4m2 0h1m2 0h1m1 0h2m4 0h1m1 0h3m2 0h1m1 0h1m4 0h3m-38 1h1m1 0h1m1 0h1m1 0h10m1 0h1m1 0h4m1 0h2m1 0h1m2 0h2m1 0h7m-40 1h1m1 0h1m2 0h1m4 0h4m4 0h1m1 0h1m2 0h4m1 0h2m2 0h1m1 0h1m1 0h1m-37 1h1m5 0h3m2 0h1m1 0h1m3 0h6m2 0h1m1 0h1m2 0h1m2 0h2m1 0h1m2 0h1m-40 1h1m3 0h3m1 0h1m1 0h3m1 0h3m1 0h1m2 0h5m2 0h1m3 0h1m1 0h1m2 0h2m-40 1h4m1 0h1m2 0h1m4 0h3m1 0h5m1 0h1m1 0h2m1 0h5m1 0h4m1 0h2m-41 1h3m2 0h2m2 0h1m3 0h1m3 0h1m3 0h1m2 0h1m2 0h2m3 0h1m3 0h2m-37 1h1m1 0h1m4 0h1m1 0h3m2 0h4m1 0h2m6 0h1m1 0h1m1 0h3m1 0h2m-34 1h4m1 0h1m1 0h1m3 0h2m2 0h1m2 0h5m2 0h1m2 0h1m4 0h2m-39 1h1m1 0h1m5 0h1m5 0h7m2 0h1m3 0h14m-38 1h5m1 0h2m3 0h1m6 0h2m2 0h1m1 0h2m1 0h1m1 0h1m3 0h3m-37 1h2m1 0h1m7 0h1m1 0h2m2 0h1m1 0h4m2 0h2m3 0h1m2 0h1m1 0h1m-36 1h1m2 0h4m8 0h1m2 0h1m4 0h2m2 0h1m5 0h1m-35 1h1m2 0h2m2 0h1m2 0h2m2 0h1m3 0h3m1 0h1m4 0h1m2 0h1m1 0h5m2 0h1m-39 1h1m2 0h2m1 0h1m1 0h1m3 0h1m1 0h1m3 0h1m5 0h2m1 0h2m1 0h4m-36 1h2m1 0h1m1 0h1m1 0h2m2 0h1m1 0h4m3 0h2m1 0h1m2 0h1m1 0h1m1 0h4m1 0h1m1 0h1m2 0h1m-40 1h1m3 0h3m5 0h2m2 0h1m5 0h4m2 0h1m1 0h2m4 0h3m-40 1h1m3 0h2m4 0h4m4 0h1m2 0h1m1 0h2m3 0h1m1 0h5m1 0h2m2 0h1m-41 1h1m1 0h1m1 0h1m1 0h1m7 0h1m1 0h1m4 0h2m1 0h5m3 0h4m1 0h1m-38 1h1m3 0h2m4 0h2m2 0h2m5 0h1m1 0h2m1 0h3m3 0h3m1 0h2m-38 1h1m1 0h2m2 0h5m6 0h1m6 0h4m1 0h1m2 0h8m-32 1h2m3 0h2m4 0h2m2 0h1m8 0h1m3 0h1m2 0h2m-41 1h7m3 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m3 0h1m1 0h3m1 0h3m1 0h1m1 0h3m-39 1h1m5 0h1m1 0h1m1 0h2m1 0h1m1 0h2m2 0h5m2 0h1m4 0h2m3 0h1m3 0h1m-41 1h1m1 0h3m1 0h1m1 0h3m1 0h1m3 0h1m1 0h4m1 0h5m1 0h1m2 0h5m1 0h2m-40 1h1m1 0h3m1 0h1m1 0h2m1 0h2m1 0h1m2 0h1m2 0h1m2 0h1m1 0h2m6 0h1m1 0h1m1 0h1m1 0h2m-41 1h1m1 0h3m1 0h1m1 0h1m1 0h1m3 0h5m1 0h1m1 0h1m1 0h1m2 0h2m2 0h6m1 0h1m-39 1h1m5 0h1m2 0h3m2 0h3m1 0h1m1 0h2m1 0h1m2 0h2m2 0h1m1 0h1m1 0h1m1 0h2m1 0h1m-40 1h7m1 0h1m1 0h1m2 0h2m2 0h1m1 0h1m2 0h6m1 0h3m1 0h1m1 0h2m1 0h1"/></svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1,93 @@
|
||||
Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
|
||||
This license is copied below, and is also available with a FAQ at: https://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
Copyright 2021 The Outfit Project Authors (https://github.com/Outfitio/Outfit-Fonts)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
Copyright 2022 The Unbounded Project Authors (https://github.com/googlefonts/unbounded)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
@@ -0,0 +1,391 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Flexera Launcher · One thumb. Every app.</title>
|
||||
<meta name="description" content="Flexera is an Android launcher with a calm home screen and an app list you scrub with one thumb. No ads, no account, no tracking.">
|
||||
<meta name="theme-color" content="#07070d">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Flexera Launcher · One thumb. Every app.">
|
||||
<meta property="og:description" content="An Android launcher with a calm home screen and an app list you scrub with one thumb. No ads, no account, no tracking.">
|
||||
<meta property="og:image" content="assets/og.jpg">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="icon" type="image/png" sizes="64x64" href="assets/favicon-64.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32.png">
|
||||
<link rel="apple-touch-icon" href="assets/icon-180.png">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="script.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Line icons used by the phone and the page. 24 x 24, drawn with strokes. -->
|
||||
<svg class="sprite" aria-hidden="true" focusable="false">
|
||||
<symbol id="g-camera" viewBox="0 0 24 24"><path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13" r="3.5"/></symbol>
|
||||
<symbol id="g-phone" viewBox="0 0 24 24"><path d="M6.6 3.5l3 3.6-1.8 2.3a12 12 0 0 0 6.8 6.8l2.3-1.8 3.6 3-1.6 2.4c-.5.7-1.4 1-2.2.8C10.3 18.8 5.2 13.7 3.4 7.3c-.2-.8.1-1.7.8-2.2z"/></symbol>
|
||||
<symbol id="g-msg" viewBox="0 0 24 24"><path d="M4 5h16v11H9.5L4 20z"/></symbol>
|
||||
<symbol id="g-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3.5 6.5L12 13l8.5-6.5"/></symbol>
|
||||
<symbol id="g-map" viewBox="0 0 24 24"><path d="M12 21s-6.5-6.2-6.5-11.2a6.5 6.5 0 0 1 13 0C18.5 14.8 12 21 12 21z"/><circle cx="12" cy="9.8" r="2.3"/></symbol>
|
||||
<symbol id="g-music" viewBox="0 0 24 24"><path d="M9 18V5l11-2v13"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="17.5" cy="16" r="2.5"/></symbol>
|
||||
<symbol id="g-cal" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M8 3v4M16 3v4"/></symbol>
|
||||
<symbol id="g-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
|
||||
<symbol id="g-notes" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M9 11h7M9 15h7M9 7h3"/></symbol>
|
||||
<symbol id="g-files" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></symbol>
|
||||
<symbol id="g-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.5 2.6 3.5 5.5 3.5 8.5s-1 5.9-3.5 8.5c-2.5-2.6-3.5-5.5-3.5-8.5s1-5.9 3.5-8.5z"/></symbol>
|
||||
<symbol id="g-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2.5V5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></symbol>
|
||||
<symbol id="g-wallet" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18M15.5 14.5h2"/></symbol>
|
||||
<symbol id="g-sliders" viewBox="0 0 24 24"><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/></symbol>
|
||||
<symbol id="g-mic" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/></symbol>
|
||||
<symbol id="g-pulse" viewBox="0 0 24 24"><path d="M3 12h4l2-4.5 3.5 9 2.5-4.5h6"/></symbol>
|
||||
<symbol id="g-translate" viewBox="0 0 24 24"><path d="M4 5h9M8.5 3v2M6 5c.6 3 2.5 5.6 5 7M11 5c-.6 3.2-3 6-6.5 7.5"/><path d="M13 21l4-9 4 9M14.5 17.5h5"/></symbol>
|
||||
<symbol id="g-calc" viewBox="0 0 24 24"><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M8.5 7.5h7M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16.5h.01M12 16.5h.01M15.5 16.5h.01"/></symbol>
|
||||
<symbol id="g-wave" viewBox="0 0 24 24"><path d="M4 10v4M8 7v10M12 4v16M16 8v8M20 11v2"/></symbol>
|
||||
<symbol id="g-book" viewBox="0 0 24 24"><path d="M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3z"/><path d="M5 17a3 3 0 0 1 3-3h11"/></symbol>
|
||||
<symbol id="g-news" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 9h6M7 13h10M7 16h7"/></symbol>
|
||||
<symbol id="g-play" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="3"/><path d="M10 9v6l5-3z"/></symbol>
|
||||
<symbol id="g-bag" viewBox="0 0 24 24"><path d="M5 8h14l-1 12H6z"/><path d="M9 8a3 3 0 0 1 6 0"/></symbol>
|
||||
<symbol id="g-bank" viewBox="0 0 24 24"><path d="M3 9l9-5 9 5M5 10v7M9.5 10v7M14.5 10v7M19 10v7M3 20h18"/></symbol>
|
||||
<symbol id="g-shield" viewBox="0 0 24 24"><path d="M12 3l7 3v5c0 5-3 8.5-7 10-4-1.5-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></symbol>
|
||||
<symbol id="g-person" viewBox="0 0 24 24"><circle cx="12" cy="8.5" r="3.5"/><path d="M5 20c.8-3.8 3.6-6 7-6s6.2 2.2 7 6"/></symbol>
|
||||
<symbol id="g-image" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 16l5-5 4 4 3-3 6 6"/><circle cx="15.5" cy="8.5" r="1.5"/></symbol>
|
||||
<symbol id="g-plane" viewBox="0 0 24 24"><path d="M2.5 13.5l19-8-6.5 15-3-6.5z"/></symbol>
|
||||
<symbol id="g-moon" viewBox="0 0 24 24"><path d="M19 14.5A7.5 7.5 0 1 1 9.5 5a6 6 0 0 0 9.5 9.5z"/></symbol>
|
||||
<symbol id="g-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/></symbol>
|
||||
<symbol id="g-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 11v5.5M12 7.6v.01"/></symbol>
|
||||
<symbol id="g-widgets" viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><path d="M16.5 3.5L20 7l-3.5 3.5L13 7z"/></symbol>
|
||||
<symbol id="g-edit" viewBox="0 0 24 24"><path d="M4 20h4L19 9l-4-4L4 16z"/></symbol>
|
||||
<symbol id="g-eyeoff" viewBox="0 0 24 24"><path d="M9.9 5.2C10.6 5.07 11.3 5 12 5c4.2 0 7.7 2.6 9.5 7-.6 1.4-1.4 2.6-2.4 3.6M16.4 17.6C15.1 18.5 13.6 19 12 19c-4.2 0-7.7-2.6-9.5-7 .8-2 2-3.6 3.5-4.8"/><path d="M14.1 14.1A3 3 0 0 1 9.9 9.9"/><path d="M4 4l16 16"/></symbol>
|
||||
<symbol id="g-flip" viewBox="0 0 24 24"><path d="M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3"/><path d="M18 3v4h-4M6 21v-4h4"/></symbol>
|
||||
<symbol id="g-arrow" viewBox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"/></symbol>
|
||||
<symbol id="g-down" viewBox="0 0 24 24"><path d="M12 4v15M6 13l6 6 6-6"/></symbol>
|
||||
<symbol id="g-up" viewBox="0 0 24 24"><path d="M12 20V5M6 11l6-6 6 6"/></symbol>
|
||||
<symbol id="g-star" viewBox="0 0 24 24"><path class="fill" d="M12 1.5c.7 5.6 4.9 9.8 10.5 10.5-5.6.7-9.8 4.9-10.5 10.5-.7-5.6-4.9-9.8-10.5-10.5C7.1 11.3 11.3 7.1 12 1.5z"/></symbol>
|
||||
</svg>
|
||||
|
||||
<a class="skip" href="#main">Skip to content</a>
|
||||
|
||||
<header class="nav" id="top">
|
||||
<a class="nav__brand" href="#top" aria-label="Flexera Launcher, back to top">
|
||||
<img src="assets/flexera-icon-256.webp" alt="" width="40" height="40">
|
||||
<span>Flexera</span>
|
||||
</a>
|
||||
<nav class="nav__links" aria-label="Sections">
|
||||
<a href="#how">How it works</a>
|
||||
<a href="#details">Details</a>
|
||||
<a href="#privacy">Privacy</a>
|
||||
<a href="#play">Play</a>
|
||||
</nav>
|
||||
<a class="btn btn--sm btn--pink" href="#get">Get the APK</a>
|
||||
<div class="nav__progress" aria-hidden="true"><i></i></div>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero" aria-labelledby="hero-title">
|
||||
<div class="hero__ghost" aria-hidden="true" data-parallax="0.18">Flexera</div>
|
||||
<div class="hero__grid">
|
||||
<div class="hero__copy">
|
||||
<p class="kicker rv"><span class="kicker__dot"></span>Android launcher <i>/</i> v<span data-version>0.13.0</span> <i>/</i> free</p>
|
||||
<h1 class="hero__title rv" id="hero-title">
|
||||
<span class="line"><span class="line__in">One thumb.</span></span>
|
||||
<span class="line"><span class="line__in grad">Every app.</span></span>
|
||||
</h1>
|
||||
<p class="lead rv">Flexera is a home screen for Android that stays calm, with an app list you fly through using one thumb. No ads. No account. Nothing about you leaves your phone.</p>
|
||||
<div class="cta rv">
|
||||
<a class="btn btn--big btn--cyan" href="https://git.mariosem.es/msemes/Flexera-Launcher-Releases/releases/download/latest/FlexeraLauncher.apk" data-apk>
|
||||
Download the APK <svg class="gly" aria-hidden="true"><use href="#g-down"/></svg>
|
||||
</a>
|
||||
<a class="btn btn--big btn--ghost" href="#how">
|
||||
See it move <svg class="gly" aria-hidden="true"><use href="#g-arrow"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<p class="meta rv">Android 8.0 or newer <i>·</i> Updates itself <i>·</i> No Play Store needed</p>
|
||||
</div>
|
||||
|
||||
<div class="hero__stage" aria-hidden="true">
|
||||
<div class="hero__slab"></div>
|
||||
<div class="hero__tilt" data-tilt>
|
||||
<div class="phone-host" data-phone="hero"></div>
|
||||
</div>
|
||||
<span class="sticker sticker--a">Wave<br>alphabet</span>
|
||||
<span class="sticker sticker--b">0 trackers</span>
|
||||
<div class="spinner">
|
||||
<svg viewBox="0 0 120 120" class="spinner__ring">
|
||||
<defs><path id="spin-path" d="M60,60 m-45,0 a45,45 0 1,1 90,0 a45,45 0 1,1 -90,0"/></defs>
|
||||
<text><textPath href="#spin-path">Swipe up · Scrub · Launch · Repeat · </textPath></text>
|
||||
</svg>
|
||||
<svg class="gly spinner__arrow"><use href="#g-down"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="bands" aria-hidden="true">
|
||||
<div class="marquee marquee--cyan">
|
||||
<div class="marquee__track" data-marquee="70">
|
||||
<span>One-handed</span><span>No ads</span><span>No account</span><span>No tracking</span><span>Wave alphabet</span><span>Blur folders</span><span>Quick launch</span><span>Updates itself</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="marquee marquee--pink">
|
||||
<div class="marquee__track" data-marquee="-55">
|
||||
<span>Swipe up</span><span>Scrub</span><span>Launch</span><span>Repeat</span><span>Swipe up</span><span>Scrub</span><span>Launch</span><span>Repeat</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STORY -->
|
||||
<section class="story" id="how" aria-labelledby="how-title">
|
||||
<header class="section-head">
|
||||
<p class="tag rv">[ 01 ] How it works</p>
|
||||
<h2 class="h2 rv" id="how-title">
|
||||
<span class="line"><span class="line__in">Keep scrolling.</span></span>
|
||||
<span class="line"><span class="line__in grad">The phone talks.</span></span>
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<div class="story__body">
|
||||
<div class="story__stage" aria-hidden="true">
|
||||
<div class="story__num" data-story-num>01</div>
|
||||
<div class="phone-host" data-phone="story"></div>
|
||||
<ol class="story__rail" data-story-rail>
|
||||
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="story__steps">
|
||||
<article class="step" data-step>
|
||||
<div class="step__card">
|
||||
<p class="step__no">01 / 07</p>
|
||||
<h3 class="step__title">Home, minus the noise.</h3>
|
||||
<p class="step__text">Pages, folders and widgets, in the Android layout you already know. No feed, no ads, nothing you didn't put there yourself.</p>
|
||||
<p class="step__gesture"><span>Gesture</span> None. Just look.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="step" data-step>
|
||||
<div class="step__card">
|
||||
<p class="step__no">02 / 07</p>
|
||||
<h3 class="step__title">Swipe up. A to Z.</h3>
|
||||
<p class="step__text">Every app in one clean column, straight over your wallpaper. New messages show up under the app's name, so you see them before you open anything.</p>
|
||||
<p class="step__gesture"><span>Gesture</span> Swipe up</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="step" data-step>
|
||||
<div class="step__card">
|
||||
<p class="step__no">03 / 07</p>
|
||||
<h3 class="step__title">Ride the wave.</h3>
|
||||
<p class="step__text">Slide your thumb along the letters on the edge. They swell around it like a wave, and the list drops that letter into the middle of the screen, right where your thumb already is. Swipe up and keep holding to scrub straight from home.</p>
|
||||
<p class="step__gesture"><span>Gesture</span> Slide on the edge</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="step" data-step>
|
||||
<div class="step__card">
|
||||
<p class="step__no">04 / 07</p>
|
||||
<h3 class="step__title">Folders in focus.</h3>
|
||||
<p class="step__text">Open a folder and the rest of the screen melts into a soft blur, wallpaper included. Just the apps you came for.</p>
|
||||
<p class="step__gesture"><span>Gesture</span> Tap</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="step" data-step>
|
||||
<div class="step__card">
|
||||
<p class="step__no">05 / 07</p>
|
||||
<h3 class="step__title">Swipe into nothing.</h3>
|
||||
<p class="step__text">There's no page left of your first one. Swipe there anyway and your camera opens. Or any app, or any shortcut you pick. Works past your last page too.</p>
|
||||
<p class="step__gesture"><span>Gesture</span> Swipe past the edge</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="step" data-step>
|
||||
<div class="step__card">
|
||||
<p class="step__no">06 / 07</p>
|
||||
<h3 class="step__title">Widgets that fit in.</h3>
|
||||
<p class="step__text">A clock that lines up with your icons: the date, a one-line forecast, left, center or right, thin to bold. Next to it, a picture frame in your icon shape that turns to the next photo every ten seconds.</p>
|
||||
<p class="step__gesture"><span>Gesture</span> Hold, then edit</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="step" data-step>
|
||||
<div class="step__card">
|
||||
<p class="step__no">07 / 07</p>
|
||||
<h3 class="step__title">Out of sight.</h3>
|
||||
<p class="step__text">Hold any app in the list and tap Hide app. Gone from the list and from search. Changed your mind? Undo, or bring it back from Settings whenever you like.</p>
|
||||
<p class="step__gesture"><span>Gesture</span> Hold, then hide</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DETAILS -->
|
||||
<section class="details" id="details" aria-labelledby="details-title">
|
||||
<header class="section-head">
|
||||
<p class="tag rv">[ 02 ] The details</p>
|
||||
<h2 class="h2 rv" id="details-title">
|
||||
<span class="line"><span class="line__in">Small things.</span></span>
|
||||
<span class="line"><span class="line__in grad">Done properly.</span></span>
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<div class="cards">
|
||||
<article class="card card--ink rv">
|
||||
<div class="card__art art-flip" aria-hidden="true"><i class="art-flip__phone"><b>A B C D E F G</b></i></div>
|
||||
<span class="card__no">01</span>
|
||||
<h3>Lefty? Flip it.</h3>
|
||||
<p>Move the alphabet to the left edge. One switch, and the whole list follows your other thumb.</p>
|
||||
</article>
|
||||
<article class="card card--cyan rv">
|
||||
<div class="card__art art-rows" aria-hidden="true"><i class="art-rows__col"><b></b><b></b><b></b><b></b><b></b></i><i class="art-rows__col art-rows__col--comfy"><b></b><b></b><b></b></i></div>
|
||||
<span class="card__no">02</span>
|
||||
<h3>Compact or comfy.</h3>
|
||||
<p>Pick how tall the rows in your app list are. More apps on screen, or bigger targets.</p>
|
||||
</article>
|
||||
<article class="card card--violet rv">
|
||||
<div class="card__art art-update" aria-hidden="true"><span class="art-update__v">v<span data-version>0.13.0</span></span><i class="art-update__bar"><b></b></i></div>
|
||||
<span class="card__no">03</span>
|
||||
<h3>Updates itself.</h3>
|
||||
<p>About once a day it checks for a new version and installs it when you say so. No store needed.</p>
|
||||
</article>
|
||||
<article class="card card--pink rv">
|
||||
<div class="card__art art-move" aria-hidden="true"><i class="art-move__box">SL</i><svg class="gly art-move__arrow"><use href="#g-arrow"/></svg><i class="art-move__box art-move__box--f"><img src="assets/flexera-icon-256.webp" alt="" width="44" height="44"></i></div>
|
||||
<span class="card__no">04</span>
|
||||
<h3>Move in, one tap.</h3>
|
||||
<p>Coming from Smart Launcher? Import your home screen from its backup: layout, folders and your photo widget.</p>
|
||||
</article>
|
||||
<article class="card card--ink rv">
|
||||
<div class="card__art art-shapes" aria-hidden="true"><i></i><i></i><i></i></div>
|
||||
<span class="card__no">05</span>
|
||||
<h3>Make it yours.</h3>
|
||||
<p>Icon packs, icon shapes, themed icons and colors. Labels on or off. Your grid, your rules.</p>
|
||||
</article>
|
||||
<article class="card card--cyan rv">
|
||||
<div class="card__art art-tap" aria-hidden="true"><i></i><i></i></div>
|
||||
<span class="card__no">06</span>
|
||||
<h3>Gestures for everything.</h3>
|
||||
<p>Double-tap to lock, swipe down for notifications, and more. Every gesture is yours to set.</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat rv"><b>0</b><span>Ads</span></div>
|
||||
<div class="stat rv"><b>0</b><span>Accounts</span></div>
|
||||
<div class="stat rv"><b>2</b><span>Reasons to<br>go online</span></div>
|
||||
<div class="stat rv"><b>1</b><span>Thumb<br>needed</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRIVACY -->
|
||||
<section class="privacy" id="privacy" aria-labelledby="privacy-title">
|
||||
<p class="tag tag--ink rv">[ 03 ] Privacy</p>
|
||||
<h2 class="privacy__title rv" id="privacy-title">It goes online for <span class="privacy__hl">exactly two</span> things.</h2>
|
||||
<div class="privacy__list">
|
||||
<div class="pitem rv">
|
||||
<span class="pitem__no">1</span>
|
||||
<h3>Updates</h3>
|
||||
<p>About once a day it asks its own release page whether there's a newer version. Installing it is your call.</p>
|
||||
</div>
|
||||
<div class="pitem rv">
|
||||
<span class="pitem__no">2</span>
|
||||
<h3>Weather, if you ask</h3>
|
||||
<p>Pick a town for the clock's weather line and it asks Open-Meteo about that place. Only that place. It never uses your location.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="privacy__end rv">Nothing else about you, your apps or your phone leaves it.</p>
|
||||
<p class="privacy__note rv">This page plays by the same rules: no cookies, no analytics, no fonts or scripts from anyone else.</p>
|
||||
</section>
|
||||
|
||||
<!-- PLAYGROUND -->
|
||||
<section class="play" id="play" aria-labelledby="play-title">
|
||||
<header class="section-head">
|
||||
<p class="tag rv">[ 04 ] Playground</p>
|
||||
<h2 class="h2 rv" id="play-title">
|
||||
<span class="line"><span class="line__in">Go on.</span></span>
|
||||
<span class="line"><span class="line__in grad">Touch it.</span></span>
|
||||
</h2>
|
||||
</header>
|
||||
<div class="play__grid">
|
||||
<div class="play__stage">
|
||||
<div class="phone-host" data-phone="play" aria-label="A working model of Flexera Launcher. Use the buttons beside it if you can't use touch or a mouse." role="img"></div>
|
||||
</div>
|
||||
<div class="play__side">
|
||||
<p class="play__caption" aria-live="polite" data-caption>Swipe up on the home screen to open your apps.</p>
|
||||
<div class="chips" role="group" aria-label="Show me">
|
||||
<button class="chip" type="button" data-demo="drawer"><svg class="gly" aria-hidden="true"><use href="#g-up"/></svg>Swipe up</button>
|
||||
<button class="chip" type="button" data-demo="scrub"><svg class="gly" aria-hidden="true"><use href="#g-wave"/></svg>Scrub the letters</button>
|
||||
<button class="chip" type="button" data-demo="folder"><svg class="gly" aria-hidden="true"><use href="#g-files"/></svg>Open a folder</button>
|
||||
<button class="chip" type="button" data-demo="hide"><svg class="gly" aria-hidden="true"><use href="#g-eyeoff"/></svg>Hide an app</button>
|
||||
<button class="chip" type="button" data-demo="quick"><svg class="gly" aria-hidden="true"><use href="#g-camera"/></svg>Quick launch</button>
|
||||
<button class="chip chip--ghost" type="button" data-demo="reset">Reset</button>
|
||||
</div>
|
||||
<ul class="howto">
|
||||
<li><b>Swipe up</b> on the home screen</li>
|
||||
<li><b>Drag</b> along the letters on the right</li>
|
||||
<li><b>Tap</b> a folder, then outside it</li>
|
||||
<li><b>Hold</b> an app in the list</li>
|
||||
<li><b>Swipe right</b> on the first page</li>
|
||||
<li><b>Hold</b> the clock to restyle it</li>
|
||||
<li><b>Swipe up</b> from the bottom edge to go home</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- GET IT -->
|
||||
<section class="get" id="get" aria-labelledby="get-title">
|
||||
<p class="tag tag--ink rv">[ 05 ] Get it</p>
|
||||
<h2 class="get__title rv" id="get-title">
|
||||
<span class="line"><span class="line__in">Get</span></span>
|
||||
<span class="line"><span class="line__in">Flexera.</span></span>
|
||||
</h2>
|
||||
<div class="get__grid">
|
||||
<figure class="qr rv">
|
||||
<svg class="qr__code" viewBox="-4 -4 49 49" role="img" aria-label="QR code that downloads the newest Flexera Launcher APK"><path class="qrline" stroke="currentColor" d="M0 0.5h7m2 0h2m1 0h1m2 0h2m2 0h3m1 0h1m4 0h1m2 0h2m1 0h7m-41 1h1m5 0h1m2 0h1m1 0h3m2 0h1m1 0h1m1 0h2m3 0h1m1 0h1m2 0h1m1 0h1m1 0h1m5 0h1m-41 1h1m1 0h3m1 0h1m1 0h1m1 0h1m1 0h3m6 0h3m2 0h3m5 0h1m1 0h3m1 0h1m-41 1h1m1 0h3m1 0h1m1 0h3m2 0h1m4 0h1m3 0h6m6 0h1m1 0h3m1 0h1m-41 1h1m1 0h3m1 0h1m1 0h1m3 0h1m1 0h4m1 0h5m4 0h1m1 0h3m1 0h1m1 0h3m1 0h1m-41 1h1m5 0h1m1 0h1m1 0h4m2 0h2m2 0h3m1 0h1m2 0h1m1 0h1m4 0h1m5 0h1m-41 1h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7m-33 1h1m1 0h2m3 0h1m4 0h3m1 0h1m1 0h3m-29 1h1m1 0h5m2 0h1m3 0h1m2 0h2m4 0h5m2 0h1m1 0h1m2 0h5m-38 1h1m1 0h1m4 0h1m1 0h1m1 0h1m1 0h1m1 0h4m1 0h1m1 0h1m2 0h1m1 0h1m1 0h7m1 0h3m-40 1h1m1 0h2m1 0h2m1 0h1m3 0h2m5 0h3m4 0h2m3 0h1m6 0h1m-39 1h3m4 0h1m2 0h1m3 0h2m1 0h2m1 0h4m1 0h3m2 0h2m3 0h2m1 0h1m-39 1h2m2 0h4m2 0h1m2 0h1m1 0h2m4 0h1m1 0h3m2 0h1m1 0h1m4 0h3m-38 1h1m1 0h1m1 0h1m1 0h10m1 0h1m1 0h4m1 0h2m1 0h1m2 0h2m1 0h7m-40 1h1m1 0h1m2 0h1m4 0h4m4 0h1m1 0h1m2 0h4m1 0h2m2 0h1m1 0h1m1 0h1m-37 1h1m5 0h3m2 0h1m1 0h1m3 0h6m2 0h1m1 0h1m2 0h1m2 0h2m1 0h1m2 0h1m-40 1h1m3 0h3m1 0h1m1 0h3m1 0h3m1 0h1m2 0h5m2 0h1m3 0h1m1 0h1m2 0h2m-40 1h4m1 0h1m2 0h1m4 0h3m1 0h5m1 0h1m1 0h2m1 0h5m1 0h4m1 0h2m-41 1h3m2 0h2m2 0h1m3 0h1m3 0h1m3 0h1m2 0h1m2 0h2m3 0h1m3 0h2m-37 1h1m1 0h1m4 0h1m1 0h3m2 0h4m1 0h2m6 0h1m1 0h1m1 0h3m1 0h2m-34 1h4m1 0h1m1 0h1m3 0h2m2 0h1m2 0h5m2 0h1m2 0h1m4 0h2m-39 1h1m1 0h1m5 0h1m5 0h7m2 0h1m3 0h14m-38 1h5m1 0h2m3 0h1m6 0h2m2 0h1m1 0h2m1 0h1m1 0h1m3 0h3m-37 1h2m1 0h1m7 0h1m1 0h2m2 0h1m1 0h4m2 0h2m3 0h1m2 0h1m1 0h1m-36 1h1m2 0h4m8 0h1m2 0h1m4 0h2m2 0h1m5 0h1m-35 1h1m2 0h2m2 0h1m2 0h2m2 0h1m3 0h3m1 0h1m4 0h1m2 0h1m1 0h5m2 0h1m-39 1h1m2 0h2m1 0h1m1 0h1m3 0h1m1 0h1m3 0h1m5 0h2m1 0h2m1 0h4m-36 1h2m1 0h1m1 0h1m1 0h2m2 0h1m1 0h4m3 0h2m1 0h1m2 0h1m1 0h1m1 0h4m1 0h1m1 0h1m2 0h1m-40 1h1m3 0h3m5 0h2m2 0h1m5 0h4m2 0h1m1 0h2m4 0h3m-40 1h1m3 0h2m4 0h4m4 0h1m2 0h1m1 0h2m3 0h1m1 0h5m1 0h2m2 0h1m-41 1h1m1 0h1m1 0h1m1 0h1m7 0h1m1 0h1m4 0h2m1 0h5m3 0h4m1 0h1m-38 1h1m3 0h2m4 0h2m2 0h2m5 0h1m1 0h2m1 0h3m3 0h3m1 0h2m-38 1h1m1 0h2m2 0h5m6 0h1m6 0h4m1 0h1m2 0h8m-32 1h2m3 0h2m4 0h2m2 0h1m8 0h1m3 0h1m2 0h2m-41 1h7m3 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m3 0h1m1 0h3m1 0h3m1 0h1m1 0h3m-39 1h1m5 0h1m1 0h1m1 0h2m1 0h1m1 0h2m2 0h5m2 0h1m4 0h2m3 0h1m3 0h1m-41 1h1m1 0h3m1 0h1m1 0h3m1 0h1m3 0h1m1 0h4m1 0h5m1 0h1m2 0h5m1 0h2m-40 1h1m1 0h3m1 0h1m1 0h2m1 0h2m1 0h1m2 0h1m2 0h1m2 0h1m1 0h2m6 0h1m1 0h1m1 0h1m1 0h2m-41 1h1m1 0h3m1 0h1m1 0h1m1 0h1m3 0h5m1 0h1m1 0h1m1 0h1m2 0h2m2 0h6m1 0h1m-39 1h1m5 0h1m2 0h3m2 0h3m1 0h1m1 0h2m1 0h1m2 0h2m2 0h1m1 0h1m1 0h1m1 0h2m1 0h1m-40 1h7m1 0h1m1 0h1m2 0h2m2 0h1m1 0h1m2 0h6m1 0h3m1 0h1m1 0h2m1 0h1"/></svg>
|
||||
<figcaption>Scan with your phone's camera</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="get__main">
|
||||
<a class="btn btn--huge btn--pink rv" href="https://git.mariosem.es/msemes/Flexera-Launcher-Releases/releases/download/latest/FlexeraLauncher.apk" data-apk>
|
||||
Download the APK <svg class="gly" aria-hidden="true"><use href="#g-down"/></svg>
|
||||
</a>
|
||||
<p class="meta meta--ink rv">Version <span data-version>0.13.0</span> <i>·</i> Android 8.0 or newer <i>·</i> Free, no ads</p>
|
||||
<ol class="steps rv">
|
||||
<li><b>Download</b> the APK on your Android phone.</li>
|
||||
<li><b>Open it.</b> When Android asks, let your browser install apps.</li>
|
||||
<li><b>Make it home.</b> Press Home and pick Flexera, or go to Settings → Apps → Default apps → Home app.</li>
|
||||
</ol>
|
||||
<a class="textlink rv" href="https://git.mariosem.es/msemes/Flexera-Launcher-Releases/releases">Every release and its notes <svg class="gly" aria-hidden="true"><use href="#g-arrow"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq">
|
||||
<details class="rv">
|
||||
<summary>Why isn't it on Google Play?</summary>
|
||||
<p>It's a small independent project, shipped straight from its own release page. The app checks that page for new versions, so you won't miss updates.</p>
|
||||
</details>
|
||||
<details class="rv">
|
||||
<summary>Android warns me before installing. Is that normal?</summary>
|
||||
<p>Yes. Android double-checks every app installed from outside the Play Store. Play Protect may also mention that the app can ask for notification access (for notification dots and previews) and accessibility (only for gestures such as double-tap to lock). Both stay off until you turn them on yourself.</p>
|
||||
</details>
|
||||
<details class="rv">
|
||||
<summary>Will it work on my phone?</summary>
|
||||
<p>It runs on Android 8.0 and newer. The blur behind folders needs Android 12 or newer; on older versions folders open over a plain dimmed background.</p>
|
||||
</details>
|
||||
<details class="rv">
|
||||
<summary>Can I go back to my old launcher?</summary>
|
||||
<p>Any time. Settings → Apps → Default apps → Home app, and pick the old one. Nothing is deleted.</p>
|
||||
</details>
|
||||
<details class="rv">
|
||||
<summary>What does it cost?</summary>
|
||||
<p>Nothing. No ads, no in-app purchases, no account.</p>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="foot">
|
||||
<div class="foot__word" aria-hidden="true">Flexera</div>
|
||||
<div class="foot__row">
|
||||
<p>Flexera Launcher <span data-version>0.13.0</span></p>
|
||||
<p>Built on Lawnchair and Android's Launcher3.</p>
|
||||
<p>© 2026 Flexera Launcher</p>
|
||||
<a class="textlink" href="#top">Back to top <svg class="gly" aria-hidden="true"><use href="#g-up"/></svg></a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
+1263
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,758 @@
|
||||
/* Flexera Launcher landing page.
|
||||
Brutal layout (hard 2px lines, solid slabs, offset shadows) in the app icon's neon colours.
|
||||
Fonts are served from this folder: nothing is loaded from anyone else. */
|
||||
|
||||
@font-face { font-family: "Unbounded"; src: url("fonts/unbounded.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
|
||||
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
|
||||
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
|
||||
@font-face { font-family: "Outfit"; src: url("fonts/outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
|
||||
|
||||
:root {
|
||||
--bg: #07070d;
|
||||
--bg-2: #0e0d1d;
|
||||
--fg: #f5f4ff;
|
||||
--dim: #b4b2d2;
|
||||
--ink: #07070d;
|
||||
|
||||
/* From the icon: ice and cyan at the top of the F, electric blue, deep indigo, violet, hot pink. */
|
||||
--ice: #76fafc;
|
||||
--cyan: #1ddbfd;
|
||||
--blue: #417df4;
|
||||
--indigo: #0d0b72;
|
||||
--violet: #653df0;
|
||||
--purple: #9c0ff6;
|
||||
--pink: #fc59fb;
|
||||
--grad: linear-gradient(95deg, #76fafc 0%, #1ddbfd 16%, #417df4 40%, #653df0 64%, #c866fa 82%, #fc59fb 100%);
|
||||
|
||||
--display: "Unbounded", "Arial Black", system-ui, sans-serif;
|
||||
--body: "Space Grotesk", system-ui, sans-serif;
|
||||
--mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
|
||||
--ui: "Outfit", system-ui, sans-serif;
|
||||
|
||||
--pad: clamp(16px, 4vw, 56px);
|
||||
--b: 2px;
|
||||
--max: 1520px;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font: 400 17px/1.55 var(--body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: clip;
|
||||
}
|
||||
/* Film grain over everything, very faint. */
|
||||
body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 90;
|
||||
opacity: .055;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
}
|
||||
img, svg { display: block; }
|
||||
a { color: inherit; }
|
||||
::selection { background: var(--pink); color: var(--ink); }
|
||||
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
|
||||
|
||||
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
|
||||
.gly { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
|
||||
.gly .fill, .fill { fill: currentColor; stroke: none; }
|
||||
|
||||
.skip {
|
||||
position: absolute; left: 12px; top: -60px; z-index: 200;
|
||||
background: var(--cyan); color: var(--ink); padding: 10px 14px; font: 700 14px var(--mono);
|
||||
border: var(--b) solid var(--ink); text-decoration: none;
|
||||
}
|
||||
.skip:focus { top: 12px; }
|
||||
|
||||
/* ---------- type helpers ---------- */
|
||||
.grad {
|
||||
background: var(--grad);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.tag {
|
||||
margin: 0;
|
||||
font: 700 13px/1 var(--mono);
|
||||
letter-spacing: .14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--cyan);
|
||||
}
|
||||
.tag--ink { color: var(--ink); }
|
||||
.h2 {
|
||||
margin: .35em 0 0;
|
||||
font: 900 clamp(40px, 7.2vw, 118px)/.9 var(--display);
|
||||
letter-spacing: -.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
/* Lines that slide up out of a mask when their heading scrolls into view. */
|
||||
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
|
||||
.line__in { display: block; transform: translateY(108%); transition: transform 1s cubic-bezier(.2, .8, .1, 1); }
|
||||
.line + .line .line__in { transition-delay: .09s; }
|
||||
.in .line__in { transform: none; }
|
||||
|
||||
.rv:not(.hero__title):not(.h2):not(.get__title) { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .1, 1); }
|
||||
.rv.in:not(.hero__title):not(.h2):not(.get__title) { opacity: 1; transform: none; }
|
||||
|
||||
.meta { margin: 18px 0 0; font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
|
||||
.meta i { font-style: normal; color: var(--pink); margin: 0 .35em; }
|
||||
.meta--ink { color: var(--ink); }
|
||||
.meta--ink i { color: var(--ink); }
|
||||
|
||||
/* ---------- buttons ---------- */
|
||||
.btn {
|
||||
--c: var(--cyan);
|
||||
--sh: var(--fg);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .7em;
|
||||
padding: 1.05em 1.45em;
|
||||
font: 800 15px/1 var(--display);
|
||||
letter-spacing: .01em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: var(--ink);
|
||||
background: var(--c);
|
||||
border: var(--b) solid var(--fg);
|
||||
box-shadow: 6px 6px 0 var(--sh);
|
||||
transition: transform .14s ease, box-shadow .14s ease, background .2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn .gly { width: 1.25em; height: 1.25em; stroke-width: 2.6; }
|
||||
.btn:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--sh); }
|
||||
.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--sh); }
|
||||
.btn--pink { --c: var(--pink); }
|
||||
.btn--cyan { --c: var(--cyan); }
|
||||
.btn--ghost { background: transparent; color: var(--fg); --sh: var(--violet); }
|
||||
.btn--sm { padding: .8em 1.05em; font-size: 12px; box-shadow: 4px 4px 0 var(--sh); }
|
||||
.btn--sm:hover { box-shadow: 6px 6px 0 var(--sh); }
|
||||
.btn--big { font-size: clamp(14px, 1.1vw, 17px); }
|
||||
.btn--huge { font-size: clamp(18px, 2.2vw, 30px); padding: 1em 1.3em; border-color: var(--ink); --sh: var(--ink); }
|
||||
|
||||
.textlink {
|
||||
display: inline-flex; align-items: center; gap: .5em;
|
||||
font: 700 14px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
|
||||
text-decoration: none; border-bottom: var(--b) solid currentColor; padding-bottom: 4px;
|
||||
}
|
||||
.textlink:hover { color: var(--pink); }
|
||||
|
||||
/* ---------- nav ---------- */
|
||||
.nav {
|
||||
position: fixed; inset: 0 0 auto 0; z-index: 80;
|
||||
display: flex; align-items: center; gap: 28px;
|
||||
padding: 14px var(--pad);
|
||||
transition: background .3s, border-color .3s;
|
||||
border-bottom: var(--b) solid transparent;
|
||||
}
|
||||
.nav.is-scrolled { background: rgba(7, 7, 13, .86); border-bottom-color: var(--fg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
|
||||
.nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 900 18px/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
|
||||
.nav__brand img { width: 40px; height: 40px; }
|
||||
.nav__links { display: flex; gap: 26px; margin-left: auto; }
|
||||
.nav__links a { font: 600 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; padding: 6px 0; border-bottom: var(--b) solid transparent; }
|
||||
.nav__links a:hover { border-bottom-color: var(--cyan); color: var(--cyan); }
|
||||
.nav__progress { position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; }
|
||||
.nav__progress i { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
|
||||
|
||||
/* ---------- hero ---------- */
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
padding: 120px var(--pad) 70px;
|
||||
overflow: hidden;
|
||||
border-bottom: var(--b) solid var(--fg);
|
||||
background:
|
||||
radial-gradient(60% 50% at 85% 30%, rgba(101, 61, 240, .35), transparent 70%),
|
||||
radial-gradient(40% 40% at 10% 90%, rgba(29, 219, 253, .14), transparent 70%),
|
||||
var(--bg);
|
||||
}
|
||||
.hero::before { /* the layout grid, drawn */
|
||||
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(245, 244, 255, .06) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(245, 244, 255, .06) 1px, transparent 1px);
|
||||
background-size: 96px 96px;
|
||||
mask-image: linear-gradient(to bottom, #000 40%, transparent);
|
||||
-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
|
||||
}
|
||||
.hero__ghost {
|
||||
position: absolute; left: -1vw; bottom: -5.5vw;
|
||||
font: 900 26vw/.8 var(--display); letter-spacing: -.06em; text-transform: uppercase;
|
||||
color: transparent; -webkit-text-stroke: 2px rgba(245, 244, 255, .08);
|
||||
white-space: nowrap; pointer-events: none; user-select: none;
|
||||
}
|
||||
.hero__grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
|
||||
gap: clamp(24px, 4vw, 80px);
|
||||
align-items: center;
|
||||
max-width: var(--max);
|
||||
margin: 0 auto;
|
||||
}
|
||||
.kicker {
|
||||
display: inline-flex; align-items: center; gap: 10px; margin: 0;
|
||||
padding: 9px 14px; border: var(--b) solid var(--fg);
|
||||
font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em;
|
||||
}
|
||||
.kicker i { font-style: normal; color: var(--pink); }
|
||||
.kicker__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(29, 219, 253, .2); animation: blink 1.6s steps(2) infinite; }
|
||||
@keyframes blink { 50% { opacity: .2; } }
|
||||
.hero__title {
|
||||
margin: 26px 0 28px;
|
||||
font: 900 clamp(50px, 8.4vw, 158px)/.86 var(--display);
|
||||
letter-spacing: -.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.lead { margin: 0; max-width: 33em; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.5; color: #dddbf3; }
|
||||
.cta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 36px; }
|
||||
|
||||
.hero__stage { position: relative; display: grid; place-items: center; perspective: 1600px; padding: 20px 0; }
|
||||
.hero__slab {
|
||||
position: absolute; inset: 9% 3% 12% 14%;
|
||||
background: var(--violet);
|
||||
border: var(--b) solid var(--fg);
|
||||
box-shadow: 14px 14px 0 var(--pink);
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
.hero__tilt {
|
||||
position: relative;
|
||||
transform: rotateY(var(--ry, -16deg)) rotateX(var(--rx, 8deg)) rotateZ(var(--rz, 3deg));
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
}
|
||||
.hero .phone-host { width: min(360px, 74vw); }
|
||||
.sticker {
|
||||
position: absolute; z-index: 3;
|
||||
padding: 11px 14px;
|
||||
font: 800 14px/1.05 var(--display); text-transform: uppercase; letter-spacing: -.01em;
|
||||
color: var(--ink); background: var(--cyan);
|
||||
border: var(--b) solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
|
||||
animation: bob 4s ease-in-out infinite;
|
||||
}
|
||||
.sticker--a { top: 12%; left: -2%; transform: rotate(-9deg); }
|
||||
.sticker--b { top: 54%; right: -3%; background: var(--pink); transform: rotate(7deg); animation-delay: -2s; }
|
||||
@keyframes bob { 50% { translate: 0 -10px; } }
|
||||
.spinner { position: absolute; left: 0; bottom: 4%; width: 128px; height: 128px; z-index: 3; display: grid; place-items: center; }
|
||||
.spinner__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
|
||||
.spinner__ring text { font: 700 10.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; fill: var(--fg); }
|
||||
.spinner__arrow { width: 38px; height: 38px; color: var(--ink); background: var(--ice); border-radius: 50%; padding: 8px; stroke-width: 2.8; border: var(--b) solid var(--ink); }
|
||||
@keyframes spin { to { rotate: 360deg; } }
|
||||
|
||||
/* ---------- marquees ---------- */
|
||||
.bands { position: relative; overflow: hidden; padding-bottom: 30px; } /* the tilted band stays inside */
|
||||
.marquee { position: relative; overflow: hidden; border-bottom: var(--b) solid var(--fg); z-index: 2; }
|
||||
.marquee--cyan { background: var(--cyan); color: var(--ink); }
|
||||
.marquee--pink { background: var(--pink); color: var(--ink); transform: rotate(-1.6deg) scale(1.03); margin-top: -4px; border-top: var(--b) solid var(--fg); }
|
||||
.marquee__track { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
|
||||
.marquee__track span {
|
||||
display: inline-flex; align-items: center; gap: .55em; padding: .32em .55em .32em 0;
|
||||
font: 900 clamp(26px, 3.8vw, 58px)/1 var(--display); text-transform: uppercase; letter-spacing: -.03em;
|
||||
}
|
||||
.marquee__track span::after {
|
||||
content: ""; width: .62em; height: .62em; flex: none;
|
||||
background: currentColor;
|
||||
clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
|
||||
}
|
||||
|
||||
/* ---------- sections ---------- */
|
||||
section { position: relative; }
|
||||
.section-head { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 11vw, 150px) var(--pad) clamp(30px, 4vw, 60px); }
|
||||
|
||||
/* ---------- story ---------- */
|
||||
.story { border-bottom: var(--b) solid var(--fg); }
|
||||
.story__body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
max-width: var(--max);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--pad);
|
||||
}
|
||||
.story__stage {
|
||||
grid-column: 2; grid-row: 1;
|
||||
position: sticky; top: 0;
|
||||
height: 100vh; height: 100svh;
|
||||
display: grid; place-items: center;
|
||||
align-self: start;
|
||||
}
|
||||
.story__num {
|
||||
position: absolute; left: 50%; top: 50%; translate: -50% -50%;
|
||||
font: 900 clamp(180px, 30vw, 480px)/1 var(--display); letter-spacing: -.07em;
|
||||
color: transparent; -webkit-text-stroke: 2px rgba(245, 244, 255, .1);
|
||||
pointer-events: none; user-select: none;
|
||||
}
|
||||
.story .phone-host { height: min(84vh, 880px); height: min(84svh, 880px); position: relative; z-index: 1; }
|
||||
.story__rail { position: absolute; right: 0; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
|
||||
.story__rail li { width: 12px; height: 34px; border: var(--b) solid var(--fg); transition: background .3s, height .3s; }
|
||||
.story__rail li.done { background: var(--fg); }
|
||||
.story__rail li.on { background: var(--pink); height: 54px; }
|
||||
.story__steps { grid-column: 1; grid-row: 1; padding-bottom: 50vh; padding-bottom: 50svh; }
|
||||
.step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-right: 4vw; }
|
||||
.step__card { opacity: .16; transition: opacity .5s ease; }
|
||||
.step.is-active .step__card { opacity: 1; }
|
||||
.step__no { margin: 0; font: 700 14px/1 var(--mono); letter-spacing: .1em; color: var(--pink); }
|
||||
.step__title { margin: 18px 0 22px; font: 900 clamp(34px, 4.3vw, 74px)/.94 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
|
||||
.step__text { margin: 0; max-width: 30em; font-size: clamp(18px, 1.35vw, 21px); color: #dcdaf3; }
|
||||
.step__gesture { display: inline-flex; gap: 12px; margin: 30px 0 0; padding: 10px 14px; border: var(--b) solid var(--fg); font: 700 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
|
||||
.step__gesture span { color: var(--cyan); }
|
||||
|
||||
/* ---------- details ---------- */
|
||||
.details { border-bottom: var(--b) solid var(--fg); }
|
||||
.cards {
|
||||
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
|
||||
gap: 0;
|
||||
}
|
||||
.card {
|
||||
position: relative;
|
||||
min-height: 380px;
|
||||
padding: 28px 28px 32px;
|
||||
border: var(--b) solid var(--fg);
|
||||
margin: 0 -2px -2px 0; /* collapse the borders into a single grid */
|
||||
display: flex; flex-direction: column;
|
||||
transition: transform .2s ease, box-shadow .2s ease, z-index 0s .2s;
|
||||
}
|
||||
.card:hover { transform: translate(-6px, -6px); box-shadow: 12px 12px 0 var(--fg); z-index: 2; transition: transform .2s ease, box-shadow .2s ease; }
|
||||
.card h3 { margin: auto 0 12px; font: 900 clamp(24px, 2.2vw, 34px)/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
|
||||
.card p { margin: 0; font-size: 17px; line-height: 1.5; }
|
||||
.card__no { position: absolute; top: 22px; right: 24px; font: 800 14px var(--mono); }
|
||||
.card--ink { background: var(--bg-2); }
|
||||
.card--ink p { color: var(--dim); }
|
||||
.card--cyan { background: var(--cyan); color: var(--ink); }
|
||||
.card--violet { background: var(--violet); }
|
||||
.card--pink { background: var(--pink); color: var(--ink); }
|
||||
.card__art { height: 150px; margin-bottom: 28px; position: relative; }
|
||||
|
||||
/* card art: alphabet that hops from edge to edge */
|
||||
.art-flip__phone { position: absolute; left: 0; top: 0; width: 120px; height: 150px; border: var(--b) solid currentColor; border-radius: 18px; }
|
||||
.art-flip__phone b { position: absolute; top: 12px; right: 8px; width: 12px; font: 700 10px/1.25 var(--ui); text-align: center; word-break: break-all; color: var(--cyan); animation: flip 4s cubic-bezier(.7, 0, .3, 1) infinite; }
|
||||
@keyframes flip { 0%, 40% { right: 8px; } 50%, 90% { right: 96px; } 100% { right: 8px; } }
|
||||
/* compact and comfy rows */
|
||||
.art-rows { display: flex; gap: 22px; }
|
||||
.art-rows__col { display: flex; flex-direction: column; gap: 9px; width: 120px; padding: 12px; border: var(--b) solid var(--ink); border-radius: 14px; }
|
||||
.art-rows__col b { display: block; height: 12px; background: var(--ink); border-radius: 3px; }
|
||||
.art-rows__col--comfy { gap: 16px; }
|
||||
.art-rows__col--comfy b { height: 20px; }
|
||||
/* update bar */
|
||||
.art-update { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
|
||||
.art-update__v { font: 900 46px/1 var(--display); letter-spacing: -.04em; }
|
||||
.art-update__bar { display: block; height: 22px; border: var(--b) solid var(--fg); }
|
||||
.art-update__bar b { display: block; height: 100%; background: var(--fg); animation: fillbar 3.2s cubic-bezier(.6, 0, .2, 1) infinite; }
|
||||
@keyframes fillbar { 0% { width: 0; } 70%, 100% { width: 100%; } }
|
||||
/* move in */
|
||||
.art-move { display: flex; align-items: center; gap: 18px; }
|
||||
.art-move__box { display: grid; place-items: center; width: 92px; height: 92px; border: var(--b) solid var(--ink); background: var(--fg); color: var(--ink); font: 900 26px var(--display); font-style: normal; box-shadow: 5px 5px 0 var(--ink); }
|
||||
.art-move__box--f { background: var(--ink); }
|
||||
.art-move__box--f img { width: 60px; height: 60px; }
|
||||
.art-move__arrow { width: 44px; height: 44px; stroke-width: 3; animation: nudge 1.2s ease-in-out infinite; }
|
||||
@keyframes nudge { 50% { translate: 8px 0; } }
|
||||
/* shapes that morph */
|
||||
.art-shapes { display: flex; align-items: center; gap: 18px; }
|
||||
.art-shapes i { width: 72px; height: 72px; background: var(--grad); border: var(--b) solid var(--fg); animation: morph 4.5s ease-in-out infinite; }
|
||||
.art-shapes i:nth-child(2) { animation-delay: -1.5s; }
|
||||
.art-shapes i:nth-child(3) { animation-delay: -3s; }
|
||||
@keyframes morph { 0%, 100% { border-radius: 50%; } 33% { border-radius: 30%; } 66% { border-radius: 8px; } }
|
||||
/* double tap */
|
||||
.art-tap { display: grid; place-items: center; }
|
||||
.art-tap i { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--ink); animation: tap 1.8s ease-out infinite; }
|
||||
.art-tap i:nth-child(2) { animation-delay: .22s; }
|
||||
@keyframes tap { 0% { scale: .3; opacity: 1; } 60%, 100% { scale: 2.3; opacity: 0; } }
|
||||
|
||||
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--max); margin: 0 auto; padding: clamp(60px, 8vw, 110px) var(--pad); }
|
||||
.stat { padding: 0 20px; border-left: var(--b) solid var(--fg); }
|
||||
.stat b { display: block; font: 900 clamp(70px, 10vw, 170px)/.9 var(--display); letter-spacing: -.06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
|
||||
.stat span { display: block; margin-top: 14px; font: 700 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
|
||||
|
||||
/* ---------- privacy ---------- */
|
||||
.privacy {
|
||||
background: var(--cyan);
|
||||
color: var(--ink);
|
||||
padding: clamp(80px, 11vw, 150px) var(--pad);
|
||||
border-bottom: var(--b) solid var(--fg);
|
||||
}
|
||||
.privacy > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
|
||||
.privacy__title { margin-top: 22px; margin-bottom: clamp(40px, 6vw, 80px); font: 900 clamp(40px, 6.8vw, 112px)/.92 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
|
||||
.privacy__hl { display: inline-block; padding: 0 .12em; background: var(--ink); color: var(--cyan); transform: rotate(-2deg); }
|
||||
.privacy__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
|
||||
.pitem { position: relative; padding: 34px 34px 40px 0; border-top: 3px solid var(--ink); }
|
||||
.pitem + .pitem { padding-left: 34px; border-left: 3px solid var(--ink); }
|
||||
.pitem__no { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: var(--cyan); font: 900 24px var(--display); }
|
||||
.pitem h3 { margin: 22px 0 10px; font: 900 clamp(24px, 2.4vw, 36px)/1 var(--display); text-transform: uppercase; letter-spacing: -.03em; }
|
||||
.pitem p { margin: 0; max-width: 28em; font-size: clamp(17px, 1.35vw, 20px); }
|
||||
.privacy__end { margin-top: clamp(40px, 6vw, 80px); padding-top: 34px; border-top: 3px solid var(--ink); font: 900 clamp(26px, 3.4vw, 54px)/1.02 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
|
||||
.privacy__note { margin-top: 26px; font: 600 14px/1.5 var(--mono); }
|
||||
|
||||
/* ---------- playground ---------- */
|
||||
.play {
|
||||
border-bottom: var(--b) solid var(--fg);
|
||||
background:
|
||||
linear-gradient(to right, rgba(245, 244, 255, .05) 1px, transparent 1px) 0 0 / 48px 48px,
|
||||
linear-gradient(to bottom, rgba(245, 244, 255, .05) 1px, transparent 1px) 0 0 / 48px 48px,
|
||||
var(--bg);
|
||||
}
|
||||
.play__grid {
|
||||
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: clamp(30px, 5vw, 90px);
|
||||
align-items: center;
|
||||
max-width: var(--max); margin: 0 auto;
|
||||
padding: 0 var(--pad) clamp(80px, 10vw, 140px);
|
||||
}
|
||||
.play__stage { display: grid; place-items: center; position: relative; }
|
||||
.play__stage::before {
|
||||
content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
|
||||
background: radial-gradient(closest-side, rgba(101, 61, 240, .55), rgba(252, 89, 251, .18) 60%, transparent);
|
||||
filter: blur(30px);
|
||||
}
|
||||
.play .phone-host { height: min(82vh, 860px); height: min(82svh, 860px); position: relative; touch-action: none; }
|
||||
.play__caption {
|
||||
margin: 0 0 28px; min-height: 3.2em;
|
||||
font: 800 clamp(22px, 2.2vw, 34px)/1.15 var(--display); letter-spacing: -.03em; text-transform: uppercase;
|
||||
}
|
||||
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
|
||||
.chip {
|
||||
display: inline-flex; align-items: center; gap: 9px;
|
||||
padding: 12px 16px;
|
||||
font: 700 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
|
||||
color: var(--fg); background: transparent;
|
||||
border: var(--b) solid var(--fg); box-shadow: 4px 4px 0 var(--violet);
|
||||
cursor: pointer; transition: transform .12s, box-shadow .12s, background .2s, color .2s;
|
||||
}
|
||||
.chip .gly { width: 18px; height: 18px; }
|
||||
.chip:hover { background: var(--fg); color: var(--ink); }
|
||||
.chip:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--violet); }
|
||||
.chip.is-on { background: var(--cyan); color: var(--ink); }
|
||||
.chip--ghost { box-shadow: none; border-style: dashed; }
|
||||
.howto { margin: 36px 0 0; padding: 0; list-style: none; border-top: var(--b) solid var(--fg); }
|
||||
.howto li { padding: 13px 0; border-bottom: 1px solid rgba(245, 244, 255, .2); font-size: 17px; color: var(--dim); }
|
||||
.howto b { color: var(--fg); font-weight: 700; }
|
||||
|
||||
/* ---------- get it ---------- */
|
||||
.get { background: var(--violet); padding: clamp(80px, 11vw, 150px) var(--pad); border-bottom: var(--b) solid var(--fg); }
|
||||
.get > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
|
||||
.get .tag { color: var(--fg); }
|
||||
.get__title { margin-top: 10px; margin-bottom: clamp(30px, 5vw, 70px); font: 900 clamp(44px, 14.6vw, 260px)/.82 var(--display); letter-spacing: -.07em; text-transform: uppercase; color: var(--fg); text-shadow: .045em .045em 0 var(--ink); }
|
||||
.get__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
|
||||
.qr {
|
||||
margin: 0; padding: 22px; width: clamp(220px, 22vw, 300px);
|
||||
background: var(--fg); color: var(--ink);
|
||||
border: var(--b) solid var(--ink); box-shadow: 12px 12px 0 var(--ink);
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
.qr__code { width: 100%; height: auto; }
|
||||
.qr__code path { fill: none; stroke-width: 1; shape-rendering: crispEdges; }
|
||||
.qr figcaption { margin-top: 14px; font: 700 12.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; text-align: center; }
|
||||
.get__main { display: flex; flex-direction: column; align-items: flex-start; }
|
||||
.get .btn--huge { --c: var(--pink); }
|
||||
.steps { counter-reset: s; margin: 40px 0 34px; padding: 0; list-style: none; max-width: 40em; }
|
||||
.steps li { counter-increment: s; position: relative; padding: 16px 0 16px 64px; border-top: var(--b) solid var(--ink); font-size: clamp(17px, 1.3vw, 20px); }
|
||||
.steps li:last-child { border-bottom: var(--b) solid var(--ink); }
|
||||
.steps li::before { content: "0" counter(s); position: absolute; left: 0; top: 16px; font: 900 22px/1 var(--display); color: var(--ice); }
|
||||
.get .textlink { color: var(--fg); }
|
||||
.faq { margin-top: clamp(60px, 8vw, 110px); border-top: 3px solid var(--ink); }
|
||||
.faq details { border-bottom: 3px solid var(--ink); }
|
||||
.faq summary {
|
||||
list-style: none; cursor: pointer; position: relative;
|
||||
padding: 24px 60px 24px 0;
|
||||
font: 800 clamp(18px, 1.8vw, 28px)/1.15 var(--display); letter-spacing: -.02em; text-transform: uppercase;
|
||||
}
|
||||
.faq summary::-webkit-details-marker { display: none; }
|
||||
.faq summary::after {
|
||||
content: ""; position: absolute; right: 6px; top: 50%; width: 26px; height: 26px; margin-top: -13px;
|
||||
background: linear-gradient(var(--fg), var(--fg)) center / 100% 4px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 4px 100% no-repeat;
|
||||
transition: rotate .25s;
|
||||
}
|
||||
.faq details[open] summary::after { rotate: 45deg; }
|
||||
.faq details p { margin: 0 0 26px; max-width: 46em; font-size: clamp(17px, 1.3vw, 19px); }
|
||||
|
||||
/* ---------- footer ---------- */
|
||||
.foot { padding: 40px var(--pad) 34px; overflow: hidden; }
|
||||
.foot__word {
|
||||
font: 900 16.6vw/.8 var(--display); letter-spacing: -.07em; text-transform: uppercase;
|
||||
background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
margin: 0 0 30px -.03em; white-space: nowrap;
|
||||
}
|
||||
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; padding-top: 22px; border-top: var(--b) solid var(--fg); font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
|
||||
.foot__row p { margin: 0; }
|
||||
.foot__row .textlink { margin-left: auto; color: var(--fg); }
|
||||
|
||||
/* =====================================================================
|
||||
The phone. Drawn at 390 x 844 (a phone's CSS pixels) and scaled to fit
|
||||
its host, so every measurement inside stays the same at any size.
|
||||
===================================================================== */
|
||||
.phone-host { position: relative; aspect-ratio: 414 / 868; }
|
||||
.phone {
|
||||
position: absolute; left: 0; top: 0;
|
||||
width: 414px; height: 868px;
|
||||
padding: 12px;
|
||||
border-radius: 60px;
|
||||
background: linear-gradient(150deg, #34324d, #121122 45%, #08070f);
|
||||
box-shadow:
|
||||
inset 0 0 0 2px #4a4767,
|
||||
inset 0 0 0 5px #0a0914,
|
||||
0 50px 90px -30px rgba(101, 61, 240, .7),
|
||||
0 0 0 2px #000;
|
||||
transform-origin: 0 0;
|
||||
transform: scale(var(--s, .5));
|
||||
user-select: none; -webkit-user-select: none;
|
||||
}
|
||||
.phone::before, .phone::after { /* side buttons */
|
||||
content: ""; position: absolute; right: -4px; width: 4px; border-radius: 0 3px 3px 0; background: #2b2940;
|
||||
}
|
||||
.phone::before { top: 190px; height: 70px; }
|
||||
.phone::after { top: 290px; height: 110px; }
|
||||
.screen {
|
||||
position: relative;
|
||||
width: 390px; height: 844px;
|
||||
border-radius: 48px;
|
||||
overflow: hidden;
|
||||
background: #05061a;
|
||||
font-family: var(--ui);
|
||||
color: #fff;
|
||||
isolation: isolate;
|
||||
contain: strict;
|
||||
}
|
||||
.screen * { box-sizing: border-box; }
|
||||
.screen .ic svg, .screen .gl { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
||||
|
||||
/* wallpaper and home screen sit in one layer, so the folder blur takes both */
|
||||
.world { position: absolute; inset: 0; transform-origin: 50% 50%; }
|
||||
.wall {
|
||||
position: absolute; inset: -30px;
|
||||
background:
|
||||
radial-gradient(70% 38% at 8% 12%, rgba(29, 219, 253, .62), transparent 70%),
|
||||
radial-gradient(60% 34% at 95% 92%, rgba(252, 89, 251, .55), transparent 70%),
|
||||
radial-gradient(55% 30% at 78% 40%, rgba(101, 61, 240, .7), transparent 72%),
|
||||
linear-gradient(168deg, #2a1fb8 0%, #120d82 30%, #0a0954 58%, #050525 100%);
|
||||
}
|
||||
.wall::before, .wall::after { /* the icon's sweeping light lines */
|
||||
content: ""; position: absolute; border-radius: 50%;
|
||||
border-top: 3px solid rgba(118, 250, 252, .55);
|
||||
filter: blur(1.5px);
|
||||
}
|
||||
.wall::before { left: -40%; top: 18%; width: 150%; height: 70%; transform: rotate(-22deg); }
|
||||
.wall::after { left: -10%; top: 52%; width: 150%; height: 60%; transform: rotate(-24deg); border-top-color: rgba(252, 89, 251, .5); }
|
||||
|
||||
.sbar { position: absolute; left: 0; right: 0; top: 0; height: 40px; padding: 14px 28px 0; display: flex; justify-content: space-between; font: 600 14px/1 var(--ui); z-index: 30; pointer-events: none; }
|
||||
.sbar__icons { display: flex; align-items: center; gap: 6px; }
|
||||
.sbar__sig { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
|
||||
.sbar__sig i { width: 3px; background: #fff; border-radius: 1px; }
|
||||
.sbar__sig i:nth-child(1) { height: 4px; } .sbar__sig i:nth-child(2) { height: 6px; } .sbar__sig i:nth-child(3) { height: 8px; } .sbar__sig i:nth-child(4) { height: 11px; }
|
||||
.sbar__bat { width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid #fff; padding: 1.5px; }
|
||||
.sbar__bat::before { content: ""; display: block; width: 72%; height: 100%; background: #fff; border-radius: 1px; }
|
||||
.notch { position: absolute; left: 50%; top: 12px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #000; z-index: 31; box-shadow: inset 0 0 0 4px #111; }
|
||||
|
||||
.home { position: absolute; inset: 0; transform-origin: 50% 60%; }
|
||||
.pages { position: absolute; inset: 0; }
|
||||
.page { position: absolute; top: 0; width: 390px; height: 844px; }
|
||||
.cell { position: absolute; display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
|
||||
.cell .lbl { margin-top: 7px; font: 500 12.5px/1.2 var(--ui); text-shadow: 0 1px 4px rgba(0, 0, 0, .55); white-space: nowrap; }
|
||||
.cell.tap .ic, .cell.tap .fic { animation: tapb .3s ease; }
|
||||
@keyframes tapb { 40% { transform: scale(.86); } }
|
||||
.ic {
|
||||
position: relative; display: grid; place-items: center;
|
||||
width: 58px; height: 58px; border-radius: 30%;
|
||||
color: #fff;
|
||||
background: linear-gradient(145deg, var(--a), var(--b));
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -6px rgba(0, 0, 0, .55);
|
||||
flex: none;
|
||||
}
|
||||
.ic svg { width: 46%; height: 46%; }
|
||||
.ndot { position: absolute; top: 4px; left: calc(50% + 20px); width: 13px; height: 13px; border-radius: 50%; background: var(--pink); border: 2px solid #0d0b40; }
|
||||
.fic { width: 58px; height: 58px; padding: 7px; border-radius: 30%; background: rgba(236, 233, 249, .94); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
|
||||
.ic--mini { width: 100%; height: auto; aspect-ratio: 1; box-shadow: none; }
|
||||
.ic--mini svg { stroke-width: 2.6; }
|
||||
|
||||
.w-clock { position: absolute; padding: 26px 18px 0; }
|
||||
.clk__line { white-space: nowrap; }
|
||||
.clk__line > span { display: inline-block; will-change: transform; }
|
||||
.clk__time { font: 300 88px/1 var(--ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
|
||||
.clk__date { margin-top: 8px; font: 500 18px/1.2 var(--ui); }
|
||||
.clk__wx { margin-top: 4px; font: 400 16px/1.2 var(--ui); opacity: .92; }
|
||||
|
||||
.w-pics { position: absolute; padding: 8px 12px 18px; }
|
||||
.pics { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
|
||||
.pic { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
|
||||
.pic.on { opacity: 1; }
|
||||
.pic--a { /* sunset over water */
|
||||
background:
|
||||
radial-gradient(circle at 50% 58%, #fff1b8 0 9%, #ffc56b 10%, transparent 30%),
|
||||
linear-gradient(to bottom, transparent 62%, rgba(10, 6, 60, .9) 62%),
|
||||
repeating-linear-gradient(to bottom, transparent 0 7px, rgba(255, 190, 120, .28) 7px 9px) 0 62% / 100% 38% no-repeat,
|
||||
linear-gradient(to bottom, #3b1c8f, #c2399b 40%, #ff7a59 62%);
|
||||
}
|
||||
.pic--b { /* mountains */
|
||||
background:
|
||||
linear-gradient(150deg, transparent 52%, #1a1660 52.4%) 0 100% / 60% 62% no-repeat,
|
||||
linear-gradient(-140deg, transparent 50%, #2a2390 50.4%) 100% 100% / 75% 75% no-repeat,
|
||||
linear-gradient(140deg, transparent 50%, #3c32b8 50.4%) 0 100% / 75% 55% no-repeat,
|
||||
radial-gradient(circle at 72% 28%, #fff 0 6%, transparent 7%),
|
||||
linear-gradient(to bottom, #1ddbfd, #417df4 55%, #9a7dff);
|
||||
}
|
||||
.pic--c { /* neon city */
|
||||
background:
|
||||
linear-gradient(to top, #fc59fb 0 2px, transparent 2px) 0 100% / 100% 100% no-repeat,
|
||||
linear-gradient(#0a0920, #0a0920) 8% 100% / 16% 58% no-repeat,
|
||||
linear-gradient(#120f33, #120f33) 28% 100% / 18% 76% no-repeat,
|
||||
linear-gradient(#0a0920, #0a0920) 52% 100% / 14% 48% no-repeat,
|
||||
linear-gradient(#17134a, #17134a) 74% 100% / 20% 68% no-repeat,
|
||||
linear-gradient(#0a0920, #0a0920) 98% 100% / 12% 40% no-repeat,
|
||||
radial-gradient(circle at 70% 22%, #fdf6ff 0 7%, transparent 8%),
|
||||
linear-gradient(to bottom, #3a0d6e, #b8279b 70%, #fc59fb);
|
||||
}
|
||||
.pagedots { position: absolute; left: 0; right: 0; top: 748px; display: flex; justify-content: center; gap: 8px; }
|
||||
.pagedots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background .2s, width .2s; }
|
||||
.pagedots i.on { background: #fff; width: 18px; border-radius: 4px; }
|
||||
.glow { position: absolute; top: 0; bottom: 0; left: -80px; width: 160px; background: radial-gradient(closest-side, rgba(118, 250, 252, .85), rgba(29, 219, 253, .25) 55%, transparent); opacity: 0; pointer-events: none; z-index: 5; }
|
||||
|
||||
.fscrim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 10; }
|
||||
.fcard {
|
||||
position: absolute; left: 45px; top: 282px; width: 300px;
|
||||
padding: 22px 12px 14px;
|
||||
border-radius: 32px;
|
||||
background: #eeebf8; color: #1c1a2d;
|
||||
z-index: 11; visibility: hidden; opacity: 0;
|
||||
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
|
||||
}
|
||||
.fcard__grid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
|
||||
.fcard__app { display: flex; flex-direction: column; align-items: center; gap: 7px; font: 500 12.5px/1.2 var(--ui); }
|
||||
.fcard__title { margin-top: 16px; text-align: center; font: 600 17px/1 var(--ui); }
|
||||
|
||||
.drawer { position: absolute; inset: 0; background: rgba(5, 4, 20, .8); z-index: 12; opacity: 0; visibility: hidden; }
|
||||
.drawer__in { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 30px, #000 52px); mask-image: linear-gradient(to bottom, transparent 30px, #000 52px); } /* the list fades out under the status bar */
|
||||
.list { position: absolute; left: 0; right: 0; top: 46px; padding: 0 58px 0 20px; will-change: transform; }
|
||||
.search { display: flex; align-items: center; gap: 12px; height: 50px; margin: 6px 0 12px; padding: 0 18px; border-radius: 25px; background: #f2f0fb; color: #4b4867; font: 500 16px/1 var(--ui); }
|
||||
.search .gl { width: 22px; height: 22px; color: #4b4867; stroke-width: 2.4; }
|
||||
.hdr { height: 34px; padding: 12px 0 0 2px; font: 500 13px/1 var(--ui); color: #b9b6dc; }
|
||||
.row { display: flex; align-items: center; gap: 15px; height: 54px; overflow: hidden; transition: background .2s; border-radius: 14px; }
|
||||
.row--note { height: 64px; }
|
||||
.row .ic { width: 40px; height: 40px; }
|
||||
.row__t { display: flex; flex-direction: column; min-width: 0; }
|
||||
.row__n { font: 500 17.5px/1.15 var(--ui); }
|
||||
.row__p { margin-top: 3px; font: 400 13px/1.2 var(--ui); color: #cfcbef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.row.flash { background: rgba(255, 255, 255, .12); }
|
||||
.row.held { background: rgba(255, 255, 255, .1); }
|
||||
|
||||
.alpha { position: absolute; right: 8px; top: 404px; width: 30px; display: flex; flex-direction: column; align-items: center; z-index: 2; }
|
||||
.alpha__s { width: 15px; height: 15px; margin-bottom: 8px; color: #fff; opacity: .9; }
|
||||
.alpha__l { display: block; width: 30px; height: 21px; font: 600 12.5px/21px var(--ui); text-align: center; color: rgba(255, 255, 255, .86); transform-origin: 50% 50%; }
|
||||
.alpha__l.on { color: var(--pink); font-weight: 800; }
|
||||
.bubble { position: absolute; left: 0; top: 0; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; background: var(--grad); color: #fff; font: 700 32px/1 var(--ui); box-shadow: 0 10px 30px -6px rgba(252, 89, 251, .6); opacity: 0; z-index: 3; pointer-events: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
|
||||
|
||||
.menu { position: absolute; left: 0; top: 0; width: 236px; padding: 6px 0; border-radius: 24px; background: #f6f4fd; color: #1e1c2c; z-index: 20; opacity: 0; visibility: hidden; transform-origin: 30% 0; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .65); }
|
||||
.mi { display: flex; align-items: center; gap: 16px; height: 50px; padding: 0 20px; font: 500 16px/1 var(--ui); }
|
||||
.mi .gl { width: 22px; height: 22px; stroke-width: 1.9; color: #3a3752; }
|
||||
.mi--hide.pick { background: #e2dcff; }
|
||||
|
||||
.snack { position: absolute; left: 24px; right: 24px; bottom: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 22px; border-radius: 18px; background: #f1eefb; color: #1b1a29; font: 500 15px/1.2 var(--ui); z-index: 21; opacity: 0; visibility: hidden; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6); }
|
||||
.snack__undo { all: unset; font: 700 15px/1 var(--ui); color: #5a33e6; cursor: pointer; padding: 4px; }
|
||||
|
||||
.sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 22px 36px; border-radius: 30px 30px 0 0; background: #f4f2fb; color: #1c1a2d; z-index: 22; transform: translateY(105%); box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .5); }
|
||||
.sheet__grab { display: block; width: 36px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: #a9a5c2; }
|
||||
.sheet h4 { margin: 0 0 10px; font: 600 22px/1.2 var(--ui); }
|
||||
.sheet__h { margin: 14px 0 8px; font: 600 13.5px/1 var(--ui); color: #5d5a78; }
|
||||
.seg { display: flex; border: 1.5px solid #8a86a6; border-radius: 22px; overflow: hidden; }
|
||||
.seg span { flex: 1; display: grid; place-items: center; height: 40px; font: 500 14px/1 var(--ui); border-left: 1.5px solid #8a86a6; transition: background .2s; }
|
||||
.seg span:first-child { border-left: 0; }
|
||||
.seg span.on { background: #ddd5ff; font-weight: 700; }
|
||||
|
||||
.cam { position: absolute; inset: 0; background: #000; z-index: 25; visibility: hidden; clip-path: inset(0 100% 0 0); }
|
||||
.cam__view {
|
||||
position: absolute; left: 0; right: 0; top: 52px; height: 560px; overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 66% 34%, #fff6d8 0 5%, #ffd48a 6%, transparent 22%),
|
||||
linear-gradient(to bottom, #4b2ac9, #c2399b 45%, #ff9b6a 70%, #ffd48a);
|
||||
}
|
||||
.cam__hill { position: absolute; left: -10%; right: -10%; bottom: 0; }
|
||||
.cam__hill--1 { height: 46%; background: #2a1563; clip-path: polygon(0 40%, 18% 22%, 36% 46%, 55% 18%, 74% 40%, 90% 28%, 100% 36%, 100% 100%, 0 100%); }
|
||||
.cam__hill--2 { height: 30%; background: #120a36; clip-path: polygon(0 30%, 25% 12%, 48% 40%, 70% 20%, 100% 44%, 100% 100%, 0 100%); }
|
||||
.cam__grid { position: absolute; inset: 0; background: linear-gradient(to right, transparent 33%, rgba(255, 255, 255, .35) 33%, rgba(255, 255, 255, .35) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(255, 255, 255, .35) 66%, rgba(255, 255, 255, .35) calc(66% + 1px), transparent calc(66% + 1px)), linear-gradient(to bottom, transparent 33%, rgba(255, 255, 255, .35) 33%, rgba(255, 255, 255, .35) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(255, 255, 255, .35) 66%, rgba(255, 255, 255, .35) calc(66% + 1px), transparent calc(66% + 1px)); }
|
||||
.cam__focus { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px; border: 2px solid #ffe066; border-radius: 6px; }
|
||||
.cam__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
|
||||
.cam__modes { position: absolute; left: 0; right: 0; top: 632px; display: flex; justify-content: center; gap: 26px; font: 600 13px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #9d9ab8; }
|
||||
.cam__modes .on { color: var(--ice); }
|
||||
.cam__bar { position: absolute; left: 0; right: 0; top: 684px; display: flex; align-items: center; justify-content: space-between; padding: 0 44px; }
|
||||
.cam__thumb { width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(145deg, #ff9b6a, #4b2ac9); border: 2px solid #fff; }
|
||||
.cam__shutter { width: 78px; height: 78px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px #000, 0 0 0 9px #fff; }
|
||||
.cam__flip { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #26243a; }
|
||||
.cam__flip .gl { width: 24px; height: 24px; color: #fff; }
|
||||
.cam__close { position: absolute; top: 58px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font: 400 26px/1 var(--ui); cursor: pointer; }
|
||||
|
||||
.gbar { position: absolute; left: 50%; bottom: 9px; width: 124px; height: 5px; margin-left: -62px; border-radius: 3px; background: rgba(255, 255, 255, .88); z-index: 40; pointer-events: none; }
|
||||
|
||||
.finger {
|
||||
position: absolute; left: 0; top: 0; width: 50px; height: 50px; margin: -25px 0 0 -25px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, .26);
|
||||
border: 2px solid rgba(255, 255, 255, .85);
|
||||
box-shadow: 0 0 0 7px rgba(255, 255, 255, .1), 0 10px 26px rgba(0, 0, 0, .35);
|
||||
z-index: 50; opacity: 0; pointer-events: none;
|
||||
}
|
||||
.finger__ring { position: absolute; inset: -9px; border-radius: 50%; background: conic-gradient(var(--pink) calc(var(--ring, 0) * 1turn), transparent 0); -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 80%); mask: radial-gradient(closest-side, transparent 78%, #000 80%); }
|
||||
|
||||
/* ---------- responsive ---------- */
|
||||
@media (max-width: 1100px) {
|
||||
.nav__links { display: none; }
|
||||
.nav .btn--sm { margin-left: auto; }
|
||||
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
body { font-size: 16px; }
|
||||
.hero { padding-top: 104px; }
|
||||
.hero__grid { grid-template-columns: minmax(0, 1fr); }
|
||||
.hero__stage { margin-top: 30px; }
|
||||
.hero .phone-host { width: min(300px, 70vw); }
|
||||
.sticker { font-size: 12px; }
|
||||
.sticker--a { left: 0; }
|
||||
.sticker--b { right: 0; }
|
||||
.spinner { width: 100px; height: 100px; left: 2%; }
|
||||
|
||||
.story__body { display: block; padding: 0; }
|
||||
.story__stage { position: sticky; top: 0; place-items: start center; padding-top: 70px; }
|
||||
.story .phone-host { height: 52vh; height: 52svh; }
|
||||
.story__num { top: 32%; font-size: 58vw; }
|
||||
.story__rail { right: 14px; top: 32%; gap: 6px; }
|
||||
.story__rail li { width: 8px; height: 20px; }
|
||||
.story__rail li.on { height: 32px; }
|
||||
.story__steps { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; padding: 0 var(--pad) 50svh; }
|
||||
.step { align-items: flex-end; padding: 0 0 4svh; }
|
||||
.step__card { opacity: 0; background: rgba(7, 7, 13, .94); border: var(--b) solid var(--fg); box-shadow: 6px 6px 0 var(--violet); padding: 18px 18px 20px; width: 100%; }
|
||||
.step__title { margin: 10px 0 10px; font-size: clamp(24px, 7vw, 34px); }
|
||||
.step__text { font-size: 15.5px; line-height: 1.45; }
|
||||
.step__gesture { display: none; }
|
||||
|
||||
.cards { grid-template-columns: minmax(0, 1fr); }
|
||||
.card { min-height: 0; }
|
||||
.stats { grid-template-columns: 1fr 1fr; row-gap: 40px; }
|
||||
.privacy__list { grid-template-columns: 1fr; }
|
||||
.pitem + .pitem { padding-left: 0; border-left: 0; }
|
||||
|
||||
.play__grid { grid-template-columns: minmax(0, 1fr); }
|
||||
.play .phone-host { height: 72svh; }
|
||||
.play__side { order: -1; }
|
||||
.play__caption { min-height: 2.4em; margin-bottom: 18px; }
|
||||
.howto { display: none; }
|
||||
|
||||
.get__grid { grid-template-columns: minmax(0, 1fr); }
|
||||
.qr { justify-self: start; }
|
||||
.foot__row .textlink { margin-left: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.cta .btn { width: 100%; justify-content: space-between; }
|
||||
.btn--huge { width: 100%; justify-content: space-between; font-size: 18px; }
|
||||
.marquee--pink { transform: rotate(-2.5deg) scale(1.06); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
|
||||
.line__in, .rv { transform: none !important; opacity: 1 !important; }
|
||||
}
|
||||
Reference in new issue
Block a user