fixed start page and profile icon
This commit is contained in:
SlimusMinus
@@ -1,6 +1,22 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
/*
|
||||
Design tokens live scoped to .nk-page so nothing outside this page
|
||||
needs to change. --teal / --teal-rgb / --bg-* / --text-* / --muted*
|
||||
/ --border / --hover-bg still come from the app's existing theme
|
||||
(light/dark), we only add one new accent: --nk-amber.
|
||||
|
||||
Story: the radar's blue is the "signal" — a lost item calling out.
|
||||
Amber is "found" — the moment it's answered. The one gradient on
|
||||
the page runs from signal to found; everything else stays quiet.
|
||||
*/
|
||||
|
||||
.nk-page {
|
||||
--nk-amber: #d98f3b;
|
||||
--nk-amber-rgb: 217, 143, 59;
|
||||
--nk-signal: var(--teal, #0095f6);
|
||||
--nk-signal-rgb: var(--teal-rgb, 0, 149, 246);
|
||||
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-app) 100%);
|
||||
color: var(--text-primary);
|
||||
@@ -59,6 +75,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes eyebrowShimmer {
|
||||
0% { background-position: 100% 50%; }
|
||||
100% { background-position: -100% 50%; }
|
||||
}
|
||||
|
||||
.nk-hero {
|
||||
position: relative;
|
||||
padding: 28px 6vw 0;
|
||||
@@ -74,39 +100,58 @@
|
||||
background-image: radial-gradient(var(--text-primary) 1px, transparent 1px);
|
||||
background-size: 26px 26px;
|
||||
animation: drift 14s linear infinite;
|
||||
opacity: 0.1;
|
||||
opacity: 0.07;
|
||||
mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, #000 0%, transparent 75%);
|
||||
}
|
||||
|
||||
.nk-glow {
|
||||
position: absolute;
|
||||
top: -20%;
|
||||
right: -10%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(0, 149, 246, 0.14) 0%, transparent 70%);
|
||||
top: -22%;
|
||||
right: -12%;
|
||||
width: 620px;
|
||||
height: 620px;
|
||||
background: radial-gradient(circle, rgba(var(--nk-signal-rgb), 0.16) 0%, transparent 70%);
|
||||
filter: blur(10px);
|
||||
animation: fadeIn 1.2s ease both;
|
||||
}
|
||||
|
||||
.nk-glow::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -260px;
|
||||
bottom: -320px;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
background: radial-gradient(circle, rgba(var(--nk-amber-rgb), 0.13) 0%, transparent 72%);
|
||||
filter: blur(6px);
|
||||
}
|
||||
|
||||
/* ---------- Nav ---------- */
|
||||
|
||||
.nk-nav {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 10px 8px 4px;
|
||||
border-radius: 999px;
|
||||
background: rgba(var(--nk-signal-rgb), 0.02);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.nk-logo {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 22px;
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nk-nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nk-lang-btn,
|
||||
@@ -114,15 +159,16 @@
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-primary);
|
||||
padding: 9px 12px;
|
||||
padding: 9px 14px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: background 0.2s;
|
||||
gap: 6px;
|
||||
transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.nk-theme-btn {
|
||||
@@ -132,23 +178,37 @@
|
||||
.nk-lang-btn:hover,
|
||||
.nk-theme-btn:hover {
|
||||
background: var(--hover-bg);
|
||||
border-color: rgba(var(--nk-signal-rgb), 0.35);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nk-lang-btn:focus-visible,
|
||||
.nk-theme-btn:focus-visible,
|
||||
.nk-nav-btn:focus-visible,
|
||||
.nk-cta-primary:focus-visible {
|
||||
outline: 2px solid var(--nk-signal);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.nk-nav-btn {
|
||||
background: var(--teal, #0095f6);
|
||||
border: 1px solid var(--teal, #0095f6);
|
||||
background: var(--nk-signal);
|
||||
border: 1px solid var(--nk-signal);
|
||||
color: #fff;
|
||||
padding: 9px 20px;
|
||||
padding: 10px 22px;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.nk-nav-btn:hover {
|
||||
background: #0074d9;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 20px rgba(var(--nk-signal-rgb), 0.3);
|
||||
}
|
||||
|
||||
/* ---------- Radar (untouched) ---------- */
|
||||
|
||||
.nk-radar {
|
||||
position: absolute;
|
||||
right: 4vw;
|
||||
@@ -196,49 +256,76 @@
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
/* ---------- Hero copy ---------- */
|
||||
|
||||
.nk-hero-text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 620px;
|
||||
margin-top: 40px;
|
||||
margin-top: 56px;
|
||||
animation: riseIn 0.8s ease both;
|
||||
}
|
||||
|
||||
.nk-eyebrow {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 30px;
|
||||
background: linear-gradient(100deg, var(--nk-signal) 0%, var(--nk-amber) 40%, var(--nk-signal) 80%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
background-size: 200% 100%;
|
||||
animation: eyebrowShimmer 3s ease infinite;
|
||||
letter-spacing: 0.09em;
|
||||
margin-bottom: 22px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nk-eyebrow::before {
|
||||
content: '';
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--nk-signal);
|
||||
box-shadow: 0 0 0 3px rgba(var(--nk-signal-rgb), 0.18);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nk-h1 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 600;
|
||||
font-size: clamp(30px, 6.76vw, 75px);
|
||||
line-height: 1.08;
|
||||
font-size: clamp(28px, 4.5vw, 56px);
|
||||
line-height: 1.06;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0 0 22px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nk-accent {
|
||||
background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:root:not([data-theme="dark"]) .nk-accent {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nk-lead {
|
||||
font-size: 17px;
|
||||
line-height: 1.6;
|
||||
line-height: 1.65;
|
||||
color: var(--muted);
|
||||
max-width: 500px;
|
||||
max-width: 480px;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.nk-lead-spacer {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.nk-cta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -247,32 +334,50 @@
|
||||
}
|
||||
|
||||
.nk-cta-primary {
|
||||
background: #0095f6;
|
||||
background: var(--nk-signal);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
padding: 16px 32px;
|
||||
border-radius: 999px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.nk-cta-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
background: #0074d9;
|
||||
box-shadow: 0 12px 28px rgba(0, 149, 246, 0.35);
|
||||
box-shadow: 0 14px 30px rgba(var(--nk-signal-rgb), 0.32);
|
||||
}
|
||||
|
||||
.nk-cta-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.nk-cta-hint {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
color: var(--muted2, var(--muted));
|
||||
}
|
||||
|
||||
.nk-cta-primary .nk-arrow {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.nk-cta-primary:hover .nk-arrow {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
/* ---------- Steps (kept in sync in case re-enabled) ---------- */
|
||||
|
||||
.nk-h2 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: clamp(24px, 3vw, 34px);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 42px;
|
||||
text-align: center;
|
||||
color: var(--text-primary);
|
||||
@@ -291,18 +396,19 @@
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 26px 24px;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.nk-step-card:hover {
|
||||
border-color: rgba(var(--teal-rgb), 0.4);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
|
||||
border-color: rgba(var(--nk-signal-rgb), 0.4);
|
||||
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.nk-step-num {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 15px;
|
||||
color: var(--teal);
|
||||
color: var(--nk-signal);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -328,9 +434,11 @@
|
||||
|
||||
.nk-footer {
|
||||
text-align: center;
|
||||
padding: 24px 0 34px;
|
||||
padding: 28px 0 36px;
|
||||
font-size: 13px;
|
||||
color: var(--muted2);
|
||||
color: var(--muted2, var(--muted));
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -340,9 +448,23 @@
|
||||
}
|
||||
|
||||
.nk-hero {
|
||||
padding: 20px 6vw 0;
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
|
||||
.nk-nav {
|
||||
padding: 4px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.nk-logo {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.nk-hero-text {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.nk-radar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
@@ -373,6 +495,7 @@
|
||||
|
||||
.nk-footer {
|
||||
margin-top: -100px;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -381,17 +504,9 @@
|
||||
animation-duration: 8s !important;
|
||||
}
|
||||
|
||||
.nk-grid {
|
||||
.nk-grid,
|
||||
.nk-glow,
|
||||
.nk-hero-text {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nk-cta-primary .nk-arrow {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
transition: transform .2s;
|
||||
}
|
||||
|
||||
.nk-cta-primary:hover .nk-arrow {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
@@ -385,9 +385,16 @@
|
||||
/* Profile avatar inside the nav */
|
||||
.f-bn-profile .f-profile-avatar,
|
||||
.f-bn-profile .f-profile-avatar-placeholder {
|
||||
width: 26px; height: 26px;
|
||||
width: 32px; height: 32px;
|
||||
border-width: 2px;
|
||||
border-color: rgba(255, 255, 255, .45);
|
||||
border-radius: 9px;
|
||||
}
|
||||
.f-bn-profile .f-profile-avatar-placeholder { font-size: .95rem; }
|
||||
:root:not([data-theme="dark"]) .f-bn-profile .f-profile-avatar,
|
||||
:root:not([data-theme="dark"]) .f-bn-profile .f-profile-avatar-placeholder {
|
||||
border-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
.f-bn-item.f-bn-profile.active::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user