/* ============================================================================
UzNetPress — Landing layer
Layout primitives for the FIRST public web landing (uznet.press).
Built entirely on colors_and_type.css tokens + components.css (uz-*).
No new hardcoded hex. Editorial, restrained, flat. Class prefix: lp-
Import order on a real page:
Light/dark follow the token layer (set data-theme on ).
============================================================================ */
/* ---- Page rhythm -------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
.lp {
font-family: var(--font-sans);
color: var(--text-primary);
background: var(--bg);
overflow-x: hidden;
}
.lp-container {
width: 100%;
max-width: 1080px;
margin: 0 auto;
padding-inline: clamp(20px, 5vw, 48px);
}
.lp-section {
padding-block: clamp(40px, 8vw, 88px);
}
.lp-section--tight { padding-block: clamp(32px, 5vw, 56px); }
.lp-section--surface { background: var(--surface); border-block: 1px solid var(--border); }
/* Eyebrow / kicker — newspaper kicker, accent, uppercase */
.lp-eyebrow {
margin: 0 0 14px;
font-size: var(--fs-micro);
font-weight: var(--fw-heavy);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--accent);
}
.lp-eyebrow--muted { color: var(--text-muted); }
/* Headlines — landing scale (larger than the mobile app), still Inter */
.lp-h1 {
margin: 0;
font-size: clamp(32px, 6vw, 52px);
font-weight: var(--fw-heavy);
line-height: 1.05;
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
.lp-h2 {
margin: 0 0 12px;
font-size: clamp(24px, 4vw, 34px);
font-weight: var(--fw-bold);
line-height: 1.15;
letter-spacing: var(--tracking-tight);
text-wrap: pretty;
}
.lp-h3 {
margin: 0 0 6px;
font-size: var(--fs-h3);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
}
.lp-lead {
margin: 0;
font-size: clamp(16px, 2.2vw, 19px);
line-height: var(--lh-normal);
color: var(--text-secondary);
max-width: 52ch;
}
.lp-section-head { max-width: 60ch; margin-bottom: clamp(24px, 4vw, 40px); }
/* ---- Top bar ------------------------------------------------------------ */
.lp-topbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 16px;
min-height: 64px;
}
.lp-topbar__spacer { flex: 1; }
.lp-wordmark {
display: inline-flex;
flex-direction: column;
font-family: var(--font-wordmark);
font-weight: 500;
line-height: 0.8;
text-transform: uppercase;
font-size: 22px;
color: var(--wordmark-ink);
}
.lp-wordmark .b { color: var(--wordmark-blue); }
.lp-wordmark .press {
align-self: flex-end;
font-size: 0.42em;
text-transform: none;
}
/* ---- CTA buttons (landing scale; reuse uz-btn semantics) --------------- */
.lp-cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.lp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 50px;
padding: 0 22px;
border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
line-height: 1;
cursor: pointer;
text-decoration: none;
transition:
background var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard);
}
.lp-btn--primary { background: var(--accent); color: var(--text-on-accent); }
.lp-btn--primary:hover { background: var(--accent-hover); }
.lp-btn--primary:active { transform: translateY(1px); }
.lp-btn--secondary {
background: var(--surface);
border-color: var(--border-strong);
color: var(--text-primary);
}
.lp-btn--secondary:hover { background: var(--surface-2); border-color: var(--text-muted); }
.lp-btn--ghost { background: transparent; color: var(--accent); padding-inline: 12px; }
.lp-btn--ghost:hover { background: var(--accent-soft); }
.lp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-cta-note { font-size: var(--fs-caption); color: var(--text-muted); }
/* ---- Hero --------------------------------------------------------------- */
.lp-hero {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(28px, 5vw, 56px);
align-items: center;
}
.lp-hero__copy { display: grid; gap: 22px; align-content: start; }
.lp-hero__preview { display: flex; justify-content: center; }
@media (max-width: 760px) {
.lp-hero { grid-template-columns: 1fr; }
.lp-hero__preview { order: -1; }
}
/* Digest preview frame — a restrained Telegram/Mini App snapshot, not an image */
.lp-preview {
width: 100%;
max-width: 360px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-2);
overflow: hidden;
}
.lp-preview__bar {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.lp-preview__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.lp-preview__body { padding: 14px; display: grid; gap: 10px; }
/* ---- Value grid --------------------------------------------------------- */
.lp-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, 1fr);
}
.lp-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .lp-grid, .lp-grid--2 { grid-template-columns: 1fr; } }
.lp-feature {
display: grid;
gap: 8px;
align-content: start;
padding: 20px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
}
.lp-feature__icon {
width: 38px; height: 38px;
display: grid; place-items: center;
border-radius: var(--radius-sm);
background: var(--accent-soft);
color: var(--accent);
margin-bottom: 4px;
}
.lp-feature__title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.lp-feature__text { font-size: var(--fs-meta); color: var(--text-secondary); line-height: var(--lh-normal); }
/* Inline tag list (темы · бренды · персоны) */
.lp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* ---- Basic / pricing block --------------------------------------------- */
.lp-pricing {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: clamp(24px, 4vw, 44px);
align-items: center;
}
@media (max-width: 760px) { .lp-pricing { grid-template-columns: 1fr; } }
.lp-pricelist { display: grid; gap: 8px; }
.lp-checklist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lp-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body); }
.lp-checklist svg { color: var(--success); flex: none; margin-top: 2px; }
/* ---- Archive / RSS continuity ------------------------------------------ */
.lp-archive {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(24px, 4vw, 44px);
align-items: center;
}
@media (max-width: 760px) { .lp-archive { grid-template-columns: 1fr; } }
.lp-stat-row { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 20px; }
.lp-stat { display: grid; gap: 2px; align-content: start; }
.lp-stat__num {
font-size: clamp(24px, 4vw, 32px);
font-weight: var(--fw-heavy);
letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
line-height: 1.1;
white-space: nowrap;
}
.lp-stat__label { font-size: var(--fs-caption); color: var(--text-secondary); }
.lp-panel {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
overflow: hidden;
}
.lp-panel__row {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.lp-panel__row:last-child { border-bottom: 0; }
.lp-panel__row .mono { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-secondary); }
.lp-panel__icon { color: var(--text-secondary); flex: none; }
.lp-panel__spacer { flex: 1; }
/* ---- Final CTA ---------------------------------------------------------- */
.lp-final {
display: grid;
gap: 20px;
justify-items: center;
text-align: center;
padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 48px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
}
.lp-final .lp-lead { margin-inline: auto; }
/* ---- Footer ------------------------------------------------------------- */
.lp-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
padding-block: 28px;
border-top: 1px solid var(--border);
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.lp-footer a { color: var(--text-secondary); text-decoration: none; }
.lp-footer a:hover { color: var(--text-primary); }
.lp-footer__spacer { flex: 1; }
/* ---- Top navigation ---------------------------------------------------- */
.lp-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-5);
}
.lp-nav a:not(.lp-btn) {
color: var(--text-secondary);
text-decoration: none;
font-size: var(--fs-meta);
font-weight: var(--fw-medium);
}
.lp-nav a:not(.lp-btn):hover { color: var(--text-primary); }
/* Buttons in nav keep their own scale/colors, just tighten height for the bar. */
.lp-nav .lp-btn { min-height: 40px; padding: 0 var(--space-4); }
/* Compact top bar on phones: wordmark + one primary action on a single row. */
@media (max-width: 600px) {
.lp-topbar { gap: var(--space-2); min-height: 52px; }
.lp-wordmark { font-size: 18px; }
.lp-nav { gap: var(--space-3); }
.lp-nav a:not(.lp-btn) { display: none; }
.lp-nav .lp-btn { min-height: 38px; padding: 0 var(--space-3); font-size: var(--fs-meta); }
}
/* ---- Breadcrumb ------------------------------------------------------- */
.lp-breadcrumb {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--accent);
text-decoration: none;
font-size: var(--fs-meta);
font-weight: var(--fw-medium);
}
.lp-breadcrumb:hover { text-decoration: underline; }
/* ---- Story material feed (uz-rowitem list) ---------------------------- */
.lp-feed {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 0 var(--space-4);
}
.lp-feed a.uz-rowitem {
text-decoration: none;
color: inherit;
}
.lp-feed a.uz-rowitem:hover .uz-rowitem__title { color: var(--accent); }
.lp-feed__links {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-2);
}
.lp-feed__links a {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
color: var(--accent);
text-decoration: none;
}
.lp-feed__links a:hover { text-decoration: underline; }
/* ---- Article body (story page editorial formatting) ------------------- */
.lp-article { display: grid; gap: var(--space-6); }
.lp-article > p {
margin: 0;
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
color: var(--text-primary);
}
.lp-keyfacts {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6);
}
.lp-keyfacts__title {
margin: 0 0 var(--space-3);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--text-muted);
}
.lp-keyfacts ul {
margin: 0;
padding-left: var(--space-5);
display: grid;
gap: var(--space-2);
}
.lp-keyfacts li { line-height: var(--lh-normal); color: var(--text-primary); }