95 lines
10 KiB
CSS
95 lines
10 KiB
CSS
:root {
|
|
--acid: #d9f75f; --ink: #eeeee7; --muted: #9a9a91; --line: #292926;
|
|
--display: 'Unbounded', sans-serif; --body: 'Manrope', sans-serif; --mono: 'DM Mono', monospace;
|
|
color-scheme: dark; font-family: var(--body); color: var(--ink); background: #0a0a0a;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; background-image: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px); background-size: 34px 34px; }
|
|
a { color: inherit; text-decoration: none; }
|
|
button, input { font: inherit; }
|
|
button, a { -webkit-tap-highlight-color: transparent; }
|
|
button:not(:disabled), a { cursor: pointer; }
|
|
button, a, input { transition: background .2s, color .2s, border-color .2s; }
|
|
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
|
|
::selection { background: var(--acid); color: #080808; }
|
|
[hidden] { display: none !important; }
|
|
.skip-link { position: fixed; top: -100px; left: 20px; padding: 15px; background: var(--acid); color: #080808; z-index: 5; }
|
|
.skip-link:focus { top: 20px; }
|
|
.nav { height: 98px; padding: 0 clamp(22px, 5vw, 80px); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
|
|
.mark { display: inline-flex; gap: 13px; align-items: center; }
|
|
.mark-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--acid); font: 600 14px/1 var(--display); letter-spacing: -1px; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
|
|
.mark-icon span { color: var(--acid); font-size: 9px; }
|
|
.mark-copy { display: flex; flex-direction: column; gap: 3px; font-family: var(--display); letter-spacing: .08em; }
|
|
.mark-copy strong { font-size: 12px; }
|
|
.mark-copy small { font-size: 8px; color: var(--muted); letter-spacing: .32em; }
|
|
.alpha-tag { font: 500 9px var(--mono); letter-spacing: .12em; color: var(--muted); display: flex; align-items: center; gap: 12px; }
|
|
.alpha-tag i, .card-bottom i { width: 5px; height: 5px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 10px #d9f75f40; }
|
|
.tag-divider { color: #48483d; margin: 0 5px; }
|
|
.hero { max-width: 1536px; margin: auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(385px, .8fr); gap: clamp(40px, 7vw, 110px); padding: 72px clamp(22px, 5vw, 80px) 76px; align-items: center; }
|
|
.eyebrow { font: 500 9px var(--mono); letter-spacing: .15em; color: var(--muted); display: flex; align-items: center; gap: 12px; }
|
|
.eyebrow > span { display: inline-block; width: 26px; height: 1px; background: var(--acid); }
|
|
.hero h1 { font: 600 clamp(52px, 6.3vw, 98px)/1.04 var(--display); letter-spacing: -.065em; margin: 29px 0 27px; }
|
|
.hero h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px var(--acid); }
|
|
.lede { max-width: 490px; color: #adada5; font-size: 15px; line-height: 1.85; margin: 0; }
|
|
.transmission { display: flex; gap: 23px; align-items: center; margin-top: 38px; }
|
|
.transmission small { font: 500 8px var(--mono); letter-spacing: .1em; color: var(--acid); }
|
|
.transmission p { font-size: 12px; line-height: 1.8; color: #bcbcb2; margin: 10px 0 0; }
|
|
.signal { position: relative; flex: 0 0 83px; width: 83px; height: 83px; display: grid; place-items: center; border: 1px solid #36372c; border-radius: 50%; }
|
|
.signal:before, .signal:after { content: ''; position: absolute; inset: 10px; border: 1px solid #2c2e22; border-radius: 50%; }
|
|
.signal:after { inset: 23px; border-color: #464d27; }
|
|
.signal b { font: 600 10px var(--display); color: var(--acid); }
|
|
.signal i { position: absolute; background: var(--acid); border-radius: 50%; width: 4px; height: 4px; top: 12px; left: 11px; }
|
|
.signal i:nth-child(2) { top: 61px; left: 69px; }
|
|
.trust-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 38px; font: 400 8px var(--mono); color: var(--muted); letter-spacing: .07em; }
|
|
.trust-row i { width: 3px; height: 3px; border-radius: 50%; background: #6b7545; }
|
|
.access-card { border: 1px solid #383b2b; background: linear-gradient(140deg, #14150f, #0d0d0b 35%, #0b0b0a); box-shadow: 0 30px 100px #0006; position: relative; }
|
|
.access-card:before { content: ''; position: absolute; height: 2px; width: 46px; background: var(--acid); top: -1px; left: -1px; }
|
|
.card-top { display: flex; align-items: center; justify-content: space-between; min-height: 47px; padding: 0 25px; border-bottom: 1px solid var(--line); font: 400 8px var(--mono); letter-spacing: .12em; color: var(--muted); }
|
|
.lock { color: var(--acid); font-size: 21px; }
|
|
.card-content { padding: 28px 32px 27px; }
|
|
.acid { color: var(--acid); font-size: 8px; }
|
|
.access-card h2 { font: 600 clamp(29px, 3vw, 44px)/1.15 var(--display); letter-spacing: -.055em; margin: 17px 0 15px; }
|
|
.card-lede { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 0 0 27px; }
|
|
form label { display: flex; justify-content: space-between; gap: 10px; font: 500 8px var(--mono); letter-spacing: .09em; margin-bottom: 10px; }
|
|
form label span { color: var(--muted); }
|
|
input { display: block; width: 100%; height: 59px; background: #090909; border: 1px solid #45473a; color: var(--ink); padding: 0 16px; font: 400 21px var(--mono); letter-spacing: .16em; border-radius: 0; }
|
|
input::placeholder { color: #8a8c7c; font-size: 13px; letter-spacing: .05em; }
|
|
input:focus { border-color: var(--acid); }
|
|
input[aria-invalid="true"] { border-color: #f1a48a; }
|
|
.hint { font-size: 10px; line-height: 1.7; color: var(--muted); margin: 10px 0 20px; }
|
|
.enter-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 53px; padding: 0 19px; background: var(--acid); color: #0c1002; border: 1px solid var(--acid); font: 500 10px var(--mono); letter-spacing: .09em; }
|
|
.enter-button > span:last-child { font-size: 23px; }
|
|
.enter-button:hover { background: #e6ff91; }
|
|
.enter-button:disabled { opacity: .65; cursor: wait; }
|
|
.form-status { margin: 0 0 15px; padding: 12px; font: 400 11px/1.7 var(--body); color: #ffc0a8; border: 1px solid #724b3b; background: #221813; }
|
|
.form-status.success { color: var(--acid); border-color: #596522; background: #171b0c; }
|
|
.request-access { border-top: 1px solid var(--line); margin-top: 27px; padding-top: 22px; }
|
|
.request-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
.request-heading h3 { font: 500 8px var(--mono); letter-spacing: .07em; margin: 0; }
|
|
.request-heading > span { font: 400 8px var(--mono); color: #777e58; }
|
|
.request-access p { font-size: 11px; color: var(--muted); line-height: 1.8; margin: 12px 0 17px; }
|
|
.request-access strong { color: #dbdcd1; font-weight: 500; }
|
|
.providers { display: flex; gap: 10px; }
|
|
.provider { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #35372e; min-height: 44px; padding: 0 12px; font: 500 9px var(--mono); letter-spacing: .04em; }
|
|
.provider > span:first-child { font-size: 14px; color: var(--acid); }
|
|
.provider > span:last-child { color: #90937e; }
|
|
.provider:hover { background: #1a1e0f; border-color: var(--acid); }
|
|
.request-access .dm-note { font-size: 9px; margin: 13px 0 0; }
|
|
.providers .unavailable { border: 1px solid var(--line); padding: 12px; margin: 0; }
|
|
.card-bottom { min-height: 37px; padding: 0 24px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); color: var(--muted); font: 400 7px var(--mono); letter-spacing: .05em; }
|
|
.card-bottom > span { margin-left: auto; color: #888e6e; }
|
|
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0b0b0af0; padding: 0 clamp(22px, 5vw, 80px); }
|
|
.steps article { position: relative; display: flex; gap: 22px; padding: 31px 28px 33px 0; }
|
|
.steps article + article { border-left: 1px solid var(--line); padding-left: 32px; }
|
|
.step-number { font: 500 11px var(--mono); color: var(--acid); padding-top: 2px; }
|
|
.steps h2 { font: 500 10px/1.6 var(--display); letter-spacing: -.02em; margin: 0 0 10px; }
|
|
.steps p { font-size: 11px; line-height: 1.8; margin: 0; color: var(--muted); }
|
|
.step-arrow { margin-left: auto; font: 20px var(--mono); color: #5b6144; }
|
|
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px clamp(22px, 5vw, 80px); font: 400 7px var(--mono); letter-spacing: .11em; color: var(--muted); }
|
|
.footer i { color: #737765; font-style: normal; padding: 0 7px; }
|
|
@media (min-width: 1600px) { .hero { padding-top: 100px; padding-bottom: 100px; } }
|
|
@media (max-width: 1000px) { .hero { gap: 35px; grid-template-columns: minmax(0, 1fr) minmax(340px, .95fr); padding-top: 45px; padding-bottom: 50px; } .hero h1 { font-size: 54px; } .card-content { padding: 24px; } .trust-row { font-size: 7px; gap: 7px; } .steps article, .steps article + article { gap: 12px; padding: 25px 18px; } .steps article:first-child { padding-left: 0; } .step-arrow { display: none; } .steps h2 { font-size: 9px; } }
|
|
@media (max-width: 760px) { .nav { height: 80px; } .alpha-tag { font-size: 8px; } .alpha-tag .tag-divider, .alpha-tag { gap: 7px; } .hero { grid-template-columns: 1fr; max-width: 620px; padding-top: 38px; gap: 35px; } .hero h1 { font-size: clamp(49px, 10vw, 70px); margin: 23px 0 22px; } .lede { font-size: 13px; } .transmission { margin-top: 24px; } .trust-row { margin-top: 25px; font-size: 7px; gap: 12px; } .card-content { padding: 27px; } .access-card h2 { font-size: 36px; } .steps { grid-template-columns: 1fr; } .steps article, .steps article + article { padding: 25px 0; border-left: 0; gap: 22px; } .steps article + article { border-top: 1px solid var(--line); } .steps h2 { font-size: 10px; } .steps br { display: none; } .step-arrow { display: block; } .footer { line-height: 1.9; } .footer > span:last-child { text-align: right; } }
|
|
@media (max-width: 480px) { .alpha-tag { max-width: 105px; line-height: 1.6; } .tag-divider { display: none; } .alpha-tag i { flex: 0 0 5px; } .hero h1 { font-size: clamp(39px, 10vw, 49px); } .hero h1 br:first-child { display: initial; } .hero .eyebrow { font-size: 7px; gap: 8px; } .hero-copy .eyebrow > span { width: 17px; } .card-content { padding: 25px 20px; } .card-top { padding: 0 20px; } .card-bottom { padding: 0 16px; font-size: 6px; } .trust-row { font-size: 6px; gap: 8px; } .transmission { gap: 15px; } .transmission small { font-size: 7px; } .transmission p { font-size: 11px; } .desktop-break { display: none; } .footer { font-size: 6px; } }
|
|
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { transition: none !important; scroll-behavior: auto !important; } }
|