:root {
--page-bg: #05070c;
--panel-bg: #0b0f17;
--panel-bg-secondary: #101724;
--text-main: #f5f7fb;
--text-muted: #8d99aa;
--search-bg: #111827;
--search-border: #263247;
--search-placeholder: #6f7c90;
--accent: #3b82f6;
--accent-light: #60a5fa;
--accent-dark: #2563eb;
--button-text: #ffffff;
--link-muted: #718096;
--link-accent: #60a5fa;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
background:
radial-gradient(
circle at top,
rgba(37, 99, 235, 0.12),
transparent 430px
),
var(--page-bg);
color: var(--text-main);
font-family: Inter, Arial, sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 28px 24px 60px;
}
.frame {
position: relative;
overflow: hidden;
width: min(1095px, calc(100vw - 80px));
min-height: 440px;
padding: 48px 52px 30px;
margin-top: 0;
text-align: center;
background:
linear-gradient(
145deg,
rgba(17, 24, 39, 0.96),
rgba(7, 10, 16, 0.98)
);
border: 1px solid rgba(96, 165, 250, 0.12);
border-radius: 22px;
box-shadow:
0 25px 70px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.frame::before {
content: "";
position: absolute;
top: -180px;
left: 50%;
width: 520px;
height: 320px;
transform: translateX(-50%);
background: rgba(37, 99, 235, 0.18);
filter: blur(110px);
pointer-events: none;
}
.frame > * {
position: relative;
z-index: 1;
}
h1 {
margin: 0;
font-family: Anton, Impact, sans-serif;
font-size: 66px;
line-height: 1;
font-weight: 400;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffffff;
text-shadow:
0 2px 15px rgba(0, 0, 0, 0.65),
0 0 35px rgba(59, 130, 246, 0.12);
}
h1 a {
color: inherit;
text-decoration: none;
}
h1 a:hover {
color: var(--accent-light);
}
.tagline {
max-width: 780px;
margin: 32px auto 28px;
font-size: 27px;
line-height: 1.3;
font-weight: 500;
letter-spacing: -0.3px;
color: var(--text-muted);
}
.search-wrap {
width: min(100%, 940px);
min-height: 60px;
margin: 0 auto 20px;
display: grid;
grid-template-columns: 1fr 60px;
align-items: center;
background: rgba(17, 24, 39, 0.9);
border: 1px solid var(--search-border);
border-radius: 14px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.025),
0 10px 30px rgba(0, 0, 0, 0.25);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.search-wrap:focus-within {
border-color: rgba(96, 165, 250, 0.75);
box-shadow:
0 0 0 4px rgba(59, 130, 246, 0.1),
0 12px 35px rgba(0, 0, 0, 0.3);
transform: translateY(-1px);
}
.search-input {
width: 100%;
height: 58px;
padding: 0 10px 0 60px;
border: 0;
outline: 0;
background: transparent;
color: var(--text-main);
text-align: center;
font-family: Inter, Arial, sans-serif;
font-size: 17px;
}
.search-input::placeholder {
color: var(--search-placeholder);
opacity: 1;
}
.search-icon {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-light);
font-size: 19px;
border-left: 1px solid rgba(148, 163, 184, 0.1);
user-select: none;
}
.top-search {
width: min(100%, 900px);
margin: 0 auto;
color: #9ca9bb;
font-size: 15px;
line-height: 1.65;
font-weight: 400;
}
.top-search strong {
color: #cbd5e1;
font-weight: 600;
}
.top-search a {
color: var(--accent-light);
text-decoration: none;
}
.top-search a:hover {
color: #93c5fd;
text-decoration: underline;
}
.cta {
width: min(100%, 330px);
min-height: 82px;
margin-top: 28px;
padding: 16px 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(147, 197, 253, 0.5);
border-radius: 14px;
background:
linear-gradient(
135deg,
var(--accent),
var(--accent-dark)
);
color: var(--button-text);
text-decoration: none;
font-size: 22px;
font-weight: 600;
box-shadow:
0 12px 30px rgba(37, 99, 235, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.cta:hover {
transform: translateY(-3px);
background:
linear-gradient(
135deg,
var(--accent-light),
var(--accent)
);
box-shadow:
0 17px 38px rgba(37, 99, 235, 0.38),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.cta:active {
transform: translateY(-1px);
}
.footer-note {
margin-top: 34px;
color: var(--link-muted);
font-size: 14px;
line-height: 1.6;
}
.footer-note a {
color: var(--link-accent);
text-decoration: none;
font-weight: 700;
}
.footer-note a:hover {
color: #93c5fd;
text-decoration: underline;
}
@media (max-width: 1200px) {
.frame {
width: min(1095px, calc(100vw - 40px));
}
}
@media (max-width: 900px) {
body {
padding: 16px;
}
.frame {
width: 100%;
min-height: auto;
padding: 38px 22px 28px;
border-radius: 18px;
}
h1 {
font-size: clamp(42px, 10vw, 56px);
}
.tagline {
margin: 25px auto 24px;
font-size: 21px;
}
.top-search {
font-size: 14px;
}
.cta {
min-height: 72px;
font-size: 20px;
}
}
@media (max-width: 520px) {
body {
padding: 10px;
}
.frame {
padding: 32px 15px 24px;
border-radius: 16px;
}
h1 {
font-size: 42px;
letter-spacing: 0.5px;
}
.tagline {
font-size: 18px;
line-height: 1.4;
}
.search-wrap {
min-height: 56px;
grid-template-columns: 1fr 52px;
border-radius: 12px;
}
.search-input {
height: 54px;
padding-left: 52px;
font-size: 15px;
}
.search-icon {
font-size: 17px;
}
.cta {
min-height: 66px;
margin-top: 23px;
font-size: 18px;
border-radius: 12px;
}
.footer-note {
margin-top: 28px;
font-size: 13px;
}
}