/* =========================================================
INTER_FONT_LOCAL
Local webfont for Figma ↔ Telegram typography parity
========================================================= */
@font-face {
font-family: "Inter";
src: url("../assets/fonts/Inter-Regular.woff2") format("woff2");
font-style: normal;
font-weight: 100 900;
font-display: swap;
}
:root {
--frame-fill: #0B0F13;
--frame-border: #313841;
--frame-border-width: 0.5px;
--frame-radius: 16px;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #0b0f13;
}
body {
overflow: hidden;
}
#app {
width: 100%;
height: 100vh;
height: 100dvh;
background-color: #0b0f13;
background-image: url("../assets/background.png");
background-repeat: no-repeat;
/*
Повторяем композицию Figma:
изображение масштабируется по высоте
и прижимается правой стороной.
*/
background-size: auto 100%;
background-position: right top;
}
/* LOGO_MAIN_V1 */
#logo-main {
position: absolute;
left: 50%;
top: calc(
var(--tg-content-safe-area-inset-top, 0px)
+ 4.710793vw
);
width: 91.282051%;
height: auto;
transform: translateX(-50%);
display: block;
z-index: 1;
pointer-events: none;
}
/* WELCOME_TEXT_V1 */
#welcome-title {
position: absolute;
left: 6.153846vw;
top: calc(
var(--tg-content-safe-area-inset-top, 0px)
+ 31.222421vw
);
margin: 0;
color: #ffffff;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 23px;
font-weight: 700;
line-height: 28px;
letter-spacing: 0;
white-space: nowrap;
z-index: 2;
}
#welcome-subtitle {
position: absolute;
left: 6.153846vw;
top: calc(
var(--tg-content-safe-area-inset-top, 0px)
+ 39.595051vw
);
margin: 0;
color: #9a9a9a;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0;
white-space: nowrap;
z-index: 2;
}
/* BOTTOM_NAV_FRAME_V1 */
#bottom-nav-frame {
position: absolute;
left: 3vw;
top: 85.071090vh;
width: 94vw;
height: 9.004739vh;
z-index: 2;
pointer-events: none;
background: var(--frame-fill);
border: var(--frame-border-width) solid var(--frame-border);
border-radius: var(--frame-radius);
}
/* CARDS_V1 */
#feature-card-frame {
position: absolute;
left: 3.846154vw;
top: 25.28125vh;
width: 92.307692vw;
height: 64.102564vw;
z-index: 2;
pointer-events: none;
background: var(--frame-fill);
border: var(--frame-border-width) solid var(--frame-border);
border-radius: var(--frame-radius);
}
#premium-card-frame {
position: absolute;
left: 3vw;
top: 61.611374vh;
width: 94vw;
height: 21.327014vh;
z-index: 2;
pointer-events: none;
background: var(--frame-fill);
border: var(--frame-border-width) solid var(--frame-border);
border-radius: var(--frame-radius);
}
/* ==================================================
BOTTOM NAV ICONS V1
Только статичное отображение.
Без active-state / click / navigation / labels.
================================================== */
#bottom-nav-icons {
position: absolute;
left: 3vw;
top: 85.071090vh;
width: 94vw;
height: 9.004739vh;
z-index: 3;
pointer-events: none;
}
.bottom-nav-icon {
position: absolute;
/*
В Figma:
icon Y 722
frame Y 718
разница = 4px
4 / 76 = 5.263158%
*/
top: 5.263158%;
/*
36px на reference width 390px
*/
width: 9.230769vw;
height: 9.230769vw;
transform: translateX(-50%);
color: #313841;
}
.bottom-nav-icon svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
/*
Четыре равные зоны внутри bottom_nav_frame.
*/
#nav_home_icon {
left: 12.5%;
}
#nav_learning_icon {
left: 37.5%;
}
#nav_signals_icon {
left: 62.5%;
}
#nav_profile_icon {
left: 87.5%;
}
/* END BOTTOM NAV ICONS V1 */
/* ==================================================
BOTTOM NAV LABELS V1
Только статичное отображение.
Без active-state / click / navigation.
================================================== */
#bottom-nav-labels {
position: absolute;
left: 3vw;
top: 85.071090vh;
width: 94vw;
height: 9.004739vh;
z-index: 3;
pointer-events: none;
}
.bottom-nav-label {
position: absolute;
top: 57.894737%;
width: 25%;
height: 14px;
color: #9A9A9A;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 14px;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
}
#nav_home_label {
left: 0;
}
#nav_learning_label {
left: 25%;
}
#nav_signals_label {
left: 50%;
}
#nav_profile_label {
left: 75%;
}
/* END BOTTOM NAV LABELS V1 */
/* ==================================================
NATIVE_NAV_TEST_V3
Native navigation.
ZERO JavaScript navigation.
================================================== */
/*
Снимаем блокировку касаний
с уже существующих nav-контейнеров.
*/
#bottom-nav-icons,
#bottom-nav-labels {
pointer-events: auto;
}
/*
Теперь существующие icon и label —
реальные HTML .
*/
.bottom-nav-icon,
.bottom-nav-label {
pointer-events: auto;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color:
transparent;
touch-action: manipulation;
}
/*
Сохраняем текущий цвет текста.
*/
.bottom-nav-label:link,
.bottom-nav-label:visited,
.bottom-nav-label:hover,
.bottom-nav-label:active {
color: #9A9A9A;
text-decoration: none;
}
/*
Сохраняем текущий цвет SVG.
*/
.bottom-nav-icon:link,
.bottom-nav-icon:visited,
.bottom-nav-icon:hover,
.bottom-nav-icon:active {
color: #313841;
text-decoration: none;
}
/* ------------------------------------------
TEST PAGES
------------------------------------------ */
.native-test-page {
position: absolute;
inset: 0;
display: none;
z-index: 4;
background: #0B0F13;
}
/*
Native CSS navigation:
URL #target → соответствующий экран.
*/
.native-test-page:target {
display: block;
}
.native-test-title {
position: absolute;
left: 0;
top: calc(
var(
--tg-content-safe-area-inset-top,
0px
)
+ 40px
);
width: 100%;
color: #FFFFFF;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 30px;
text-align: center;
}
/*
Нижняя навигация остаётся выше
тестовой страницы.
*/
#bottom-nav-frame {
z-index: 5;
}
#bottom-nav-icons,
#bottom-nav-labels {
z-index: 6;
}
/* END NATIVE_NAV_TEST_V3 */
/* ==================================================
BOTTOM_NAV_ACTIVE_V1
Active color + neon glow.
Navigation mechanics are NOT changed.
================================================== */
:root {
--nav-active: #00E676;
}
/* ------------------------------------------
DEFAULT / HOME
Если ни одна тестовая страница не :target,
активна Главная.
Это также работает для #home.
------------------------------------------ */
body:not(:has(.native-test-page:target))
#nav_home_icon {
color: var(--nav-active);
}
body:not(:has(.native-test-page:target))
#nav_home_icon svg {
filter:
drop-shadow(
0 0 4px
rgba(0, 230, 118, 0.75)
)
drop-shadow(
0 0 10px
rgba(0, 230, 118, 0.35)
);
}
body:not(:has(.native-test-page:target))
#nav_home_label {
color: var(--nav-active);
}
/* ------------------------------------------
LEARNING
------------------------------------------ */
body:has(#test-learning:target)
#nav_learning_icon {
color: var(--nav-active);
}
body:has(#test-learning:target)
#nav_learning_icon svg {
filter:
drop-shadow(
0 0 4px
rgba(0, 230, 118, 0.75)
)
drop-shadow(
0 0 10px
rgba(0, 230, 118, 0.35)
);
}
body:has(#test-learning:target)
#nav_learning_label {
color: var(--nav-active);
}
/* ------------------------------------------
SIGNALS
------------------------------------------ */
body:has(#test-signals:target)
#nav_signals_icon {
color: var(--nav-active);
}
body:has(#test-signals:target)
#nav_signals_icon svg {
filter:
drop-shadow(
0 0 4px
rgba(0, 230, 118, 0.75)
)
drop-shadow(
0 0 10px
rgba(0, 230, 118, 0.35)
);
}
body:has(#test-signals:target)
#nav_signals_label {
color: var(--nav-active);
}
/* ------------------------------------------
PROFILE
------------------------------------------ */
body:has(#test-profile:target)
#nav_profile_icon {
color: var(--nav-active);
}
body:has(#test-profile:target)
#nav_profile_icon svg {
filter:
drop-shadow(
0 0 4px
rgba(0, 230, 118, 0.75)
)
drop-shadow(
0 0 10px
rgba(0, 230, 118, 0.35)
);
}
body:has(#test-profile:target)
#nav_profile_label {
color: var(--nav-active);
}
/* END BOTTOM_NAV_ACTIVE_V1 */
/* ==================================================
INDICATOR_CARD_CONTENT_V1
Только:
- badge icon
- badge text
- title
- description
Button / graphic / interaction are NOT added.
================================================== */
#premium-card-frame {
overflow: hidden;
}
/* ------------------------------------------
indicator_badge_icon
ЗВЁЗДОЧКА В КРУЖКЕ
Figma absolute:
X31 Y536 W18 H18
------------------------------------------ */
#indicator_badge_icon {
position: absolute;
left: 4.444444%;
top: 8.888889%;
width: 18px;
height: 18px;
color: #00E676;
z-index: 1;
}
#indicator_badge_icon svg {
display: block;
width: 100%;
height: 100%;
}
/* ------------------------------------------
indicator_badge_text
"ТОРГОВЫЙ ИНДИКАТОР"
Figma absolute:
X55 Y538 W150 H14
------------------------------------------ */
#indicator_badge_text {
position: absolute;
left: 11.111111%;
top: 10%;
width: 150px;
height: 14px;
color: #00E676;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 11px;
font-weight: 500;
line-height: 14px;
letter-spacing: 0;
text-align: left;
white-space: nowrap;
z-index: 1;
}
/* ------------------------------------------
indicator_title
ГЛАВНЫЙ БЕЛЫЙ ЗАГОЛОВОК
Figma absolute:
X33 Y562 W180 H48
------------------------------------------ */
#indicator_title {
position: absolute;
left: 5%;
top: 23.333333%;
width: 180px;
height: 40px;
color: #FFFFFF;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0;
text-align: left;
z-index: 1;
}
/* ------------------------------------------
indicator_description
СЕРОЕ ОПИСАНИЕ
Figma absolute:
X33 Y612 W180 H42
------------------------------------------ */
#indicator_description {
position: absolute;
left: 5%;
top: 48.888889%;
width: 180px;
height: 39px;
color: #9A9A9A;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 13px;
letter-spacing: 0;
text-align: left;
z-index: 1;
}
/* END INDICATOR_CARD_CONTENT_V1 */
/* ==================================================
INDICATOR_CARD_TYPOGRAPHY_V2
Figma synchronized:
title 16 / 20 / 600 / H40
description 11 / 13 / 400 / H39 / Y608
Only typography and description Y were changed.
================================================== */
/* ==================================================
INDICATOR_CARD_CTA_GRAPHIC_V1
================================================== */
#indicator_buy_button {
position: absolute;
left: 5%;
top: 76.666667%;
width: 50%;
height: 17.777778%;
background: #00E676;
border: none;
border-radius: 10px;
z-index: 3;
pointer-events: none;
}
#indicator_buy_button_text {
position: absolute;
left: 11.111111%;
top: 81.666667%;
width: 116px;
height: 14px;
color: #06110D;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 14px;
letter-spacing: 0;
text-align: left;
white-space: nowrap;
z-index: 4;
pointer-events: none;
}
#indicator_buy_button_arrow_icon {
position: absolute;
left: 45.555556%;
top: 81.666667%;
width: 14px;
height: 14px;
color: #06110D;
z-index: 4;
pointer-events: none;
}
#indicator_buy_button_arrow_icon svg {
display: block;
width: 100%;
height: 100%;
}
/* END INDICATOR_CARD_CTA_GRAPHIC_V1 */
/* ==================================================
INDICATOR_GRAPHIC_V2
Figma:
X217 Y538 W144 H144
================================================== */
#indicator_graphic {
position: absolute;
right: 3.888889%;
top: 50%;
width: 40%;
height: auto;
transform: translateY(-50%);
display: block;
object-fit: contain;
z-index: 1;
pointer-events: none;
}
/* END INDICATOR_GRAPHIC_V2 */
/* BTC_FEATURE_HEADER_V1 */
/*
Figma reference:
feature_card_frame = X15 Y254 W360 H250
btc_price_label = X31 Y272 W110 H20
btc_live_badge = X300 Y270 W59 H24
btc_live_dot = X308 Y278 W8 H8
btc_live_text = X321 Y275 W30 H14
*/
#btc_price_label {
position: absolute;
left: 4.444444%;
top: 5.2%;
width: 30.555556%;
height: 20px;
margin: 0;
color: #9A9A9A;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0;
white-space: nowrap;
z-index: 3;
pointer-events: none;
}
#btc_live_badge {
position: absolute;
left: 79.166667%;
top: 4.4%;
width: 16.388889%;
height: 24px;
background: rgba(0, 230, 118, 0.12);
border-radius: 12px;
z-index: 3;
pointer-events: none;
}
#btc_live_dot {
position: absolute;
left: 81.388889%;
top: 7.6%;
width: 8px;
height: 8px;
background: #00E676;
border-radius: 50%;
z-index: 4;
pointer-events: none;
}
#btc_live_text {
position: absolute;
left: 85%;
top: 6.4%;
width: 30px;
height: 14px;
color: #00E676;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 11px;
font-weight: 500;
line-height: 14px;
letter-spacing: 0;
white-space: nowrap;
z-index: 4;
pointer-events: none;
}
/* FEATURE_LOWER_CARDS_V1 */
/*
Figma:
feature_card_frame = X15 Y254 W360 H250
signals = X31 Y428 W100 H68
learning = X145 Y428 W100 H68
indicator = X259 Y428 W100 H68
*/
#feature_signals_card,
#feature_learning_card,
#feature_indicator_card {
position: absolute;
top: 69.6%;
width: 27.777778%;
height: 27.2%;
background: #0B0F13;
border: 0.5px solid #313841;
border-radius: 14px;
z-index: 3;
pointer-events: none;
}
#feature_signals_card {
left: 4.444444%;
}
#feature_learning_card {
left: 36.111111%;
}
#feature_indicator_card {
left: 67.777778%;
}
/* FEATURE_CARD_ICONS_V2
Geometry: SVG files
Visual color/stroke/position: CSS
*/
:root {
--feature-icon-color: #00E676;
--feature-icon-stroke: 1px;
--feature-icon-bg: rgba(0, 230, 118, 0.12);
}
.feature_icon_bg {
position: absolute;
left: 2.051282vw;
top: 2.564103vw;
width: 8.205128vw;
height: 8.205128vw;
background: var(--feature-icon-bg);
border-radius: 8px;
z-index: 1;
pointer-events: none;
}
.feature_icon_svg {
position: absolute;
left: 3.333333vw;
top: 3.846154vw;
width: 5.641026vw;
height: 5.641026vw;
display: block;
overflow: visible;
color: var(--feature-icon-color);
z-index: 2;
pointer-events: none;
}
/*
Жёстко задаём визуальную толщину линии через CSS.
non-scaling-stroke особенно важен для signals SVG,
у которого исходный viewBox 1254×1254.
*/
.feature_icon_svg path,
.feature_icon_svg line,
.feature_icon_svg polyline,
.feature_icon_svg polygon,
.feature_icon_svg ellipse {
stroke-width: var(--feature-icon-stroke);
vector-effect: non-scaling-stroke;
}
/* Центральная точка indicator остаётся fill=currentColor. */
.feature_icon_svg circle {
vector-effect: non-scaling-stroke;
}
/* =========================================================
FEATURE_CARD_TITLES_V1
Figma source:
feature_signals_title
X 45 / Y 10 / W 47 / H 28
Inter Medium 9 / 12
========================================================= */
.feature_card_title {
position: absolute;
left: 45px;
top: 10px;
width: 47px;
height: 28px;
margin: 0;
padding: 0;
color: #FFFFFF;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 9px;
font-weight: 500;
line-height: 12px;
letter-spacing: 0;
text-align: left;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
z-index: 3;
pointer-events: none;
}
/* ========================================================================
MAIN_TELEGRAM_APP_SHELL_V1
ONE RESPONSIVE MODEL
Telegram stable viewport
-> content safe area
-> scrollable Main flow
-> local responsive components
Bottom navigation stays outside the scroll flow.
No device-specific breakpoint is used.
======================================================================== */
/* ------------------------------------------------------------------------
APP SHELL
------------------------------------------------------------------------ */
#app {
position: relative;
width: 100%;
height: var(
--tg-viewport-stable-height,
100dvh
);
min-height: var(
--tg-viewport-stable-height,
100dvh
);
overflow: hidden;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* ------------------------------------------------------------------------
MAIN SCROLL FLOW
Horizontal Telegram content-safe-area is respected.
max-width 390px is the original Main component canvas,
not a device breakpoint.
<= 390px:
flow consumes available safe width.
> 390px:
component canvas stays 390px and is centered.
------------------------------------------------------------------------ */
#main-flow {
position: absolute;
top: var(
--tg-content-safe-area-inset-top,
0px
);
bottom: 0;
left: var(
--tg-content-safe-area-inset-left,
0px
);
right: var(
--tg-content-safe-area-inset-right,
0px
);
width: auto;
max-width: 390px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom:
calc(
var(
--tg-content-safe-area-inset-bottom,
0px
)
+ min(
28.717949vw,
112px
)
);
scrollbar-width: none;
}
#main-flow::-webkit-scrollbar {
display: none;
}
/* ------------------------------------------------------------------------
LOGO
Old reference:
top = 18.372093px
width = 355.999999px
Position is now relative to Main flow.
------------------------------------------------------------------------ */
#main-flow > #logo-main {
position: relative;
left: auto;
top: auto;
width: 91.282051%;
height: auto;
margin:
min(
4.710793vw,
18.372093px
)
auto
0;
transform: none;
display: block;
z-index: 1;
}
/* ------------------------------------------------------------------------
WELCOME TITLE
Reference inverse check:
old top = 121.767442px
new top = 121.767442px
------------------------------------------------------------------------ */
#main-flow > #welcome-title {
position: relative;
left: auto;
top: auto;
width: auto;
height: auto;
margin:
min(
3.691115vw,
14.395349px
)
0
0
6.153846%;
z-index: 2;
}
/* ------------------------------------------------------------------------
WELCOME SUBTITLE
Reference inverse check:
old top = 154.420699px
new top = 154.420699px
------------------------------------------------------------------------ */
#main-flow > #welcome-subtitle {
position: relative;
left: auto;
top: auto;
width: auto;
height: auto;
margin:
min(
1.193143vw,
4.653257px
)
0
0
6.153846%;
z-index: 2;
}
/* ------------------------------------------------------------------------
BTC / FEATURE COMPONENT
Original:
360 × 250 at reference 390px width.
Screen-level Y is removed.
------------------------------------------------------------------------ */
#main-flow > #feature-card-frame {
position: relative;
left: auto;
top: auto;
width: 92.307692%;
height: auto;
aspect-ratio: 360 / 250;
margin:
min(
9.987962vw,
38.953051px
)
auto
0;
z-index: 2;
}
/* ------------------------------------------------------------------------
PREMIUM / INDICATOR COMPONENT
Current audited reference:
width = 366.600000px
height = 179.999998px
366.6 / 180 = 611 / 300
------------------------------------------------------------------------ */
#main-flow > #premium-card-frame {
position: relative;
left: auto;
top: auto;
width: 94%;
height: auto;
aspect-ratio: 611 / 300;
margin:
min(
14.519551vw,
56.626247px
)
auto
0;
z-index: 2;
}
/* ------------------------------------------------------------------------
LOWER FEATURE CARDS — LOCAL ICON GEOMETRY
These values are now percentages of each 100 × 68 card.
OLD viewport-derived bg:
8 × 10 × 32 × 32
NEW local:
left 8.000000%
top 14.705885%
width 31.999999%
height 47.058822%
OLD viewport-derived svg:
13 × 15 × 22 × 22
NEW local:
left 12.999999%
top 22.058824%
width 22.000001%
height 32.352943%
------------------------------------------------------------------------ */
#feature-card-frame .feature_icon_bg {
left: 8.000000%;
top: 14.705885%;
width: 31.999999%;
height: 47.058822%;
}
#feature-card-frame .feature_icon_svg {
left: 12.999999%;
top: 22.058824%;
width: 22.000001%;
height: 32.352943%;
}
/* ------------------------------------------------------------------------
BOTTOM NAV — TELEGRAM STABLE BOTTOM
Old:
top: 85.071090vh
New:
bottom = Telegram content safe bottom
+ design gap.
At widths <= 390px it scales with width.
At wider windows it stops growing at original Main dimensions.
------------------------------------------------------------------------ */
#bottom-nav-frame,
#bottom-nav-labels,
#bottom-nav-icons {
position: absolute;
left: 50%;
top: auto;
bottom:
calc(
var(
--tg-content-safe-area-inset-bottom,
0px
)
+ min(
4.615385vw,
18px
)
);
width:
min(
94%,
366.6px
);
height:
min(
19.487179vw,
76px
);
transform: translateX(-50%);
}
#bottom-nav-frame {
z-index: 5;
}
#bottom-nav-labels,
#bottom-nav-icons {
z-index: 6;
}
.bottom-nav-icon {
width:
min(
9.230769vw,
36px
);
height:
min(
9.230769vw,
36px
);
}
/* ========================================================================
MAIN_CONTENT_DRIVEN_RESPONSIVE_V2
Telegram Mini App responsive model:
Telegram content-safe-area
-> available content box
-> normal document flow
-> component-local responsive geometry
No device-specific layout.
No reference viewport.
No runtime 390 × 844 canvas.
======================================================================== */
/* ------------------------------------------------------------------------
APP SHELL
Telegram defines the safe content boundaries.
The page itself does not derive component geometry from a device model.
------------------------------------------------------------------------ */
#app {
position: relative;
width: 100%;
height:
var(
--tg-viewport-stable-height,
100dvh
);
min-height:
var(
--tg-viewport-stable-height,
100dvh
);
overflow: hidden;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* ------------------------------------------------------------------------
MAIN CONTENT
IMPORTANT:
- no max-width: 390px
- no width based on reference device
- no screen-level top coordinates
- no vh/vw positioning of sections
The flow simply consumes the content-safe-area made available by
Telegram.
Horizontal padding is a design spacing rule, not a device breakpoint.
------------------------------------------------------------------------ */
#main-flow {
position: absolute;
top:
var(
--tg-content-safe-area-inset-top,
0px
);
right:
var(
--tg-content-safe-area-inset-right,
0px
);
bottom: 0;
left:
var(
--tg-content-safe-area-inset-left,
0px
);
width: auto;
max-width: none;
margin: 0;
padding:
1.125rem
1rem
calc(
7rem
+ var(
--tg-content-safe-area-inset-bottom,
0px
)
);
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
align-items: stretch;
scrollbar-width: none;
}
#main-flow::-webkit-scrollbar {
display: none;
}
/* ------------------------------------------------------------------------
LOGO
Normal flow element.
It takes the available content width.
There is no absolute screen coordinate and no viewport-based size.
------------------------------------------------------------------------ */
#main-flow > #logo-main {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: 100%;
max-width: none;
height: auto;
margin: 0;
transform: none;
display: block;
flex: 0 0 auto;
pointer-events: none;
}
/* ------------------------------------------------------------------------
WELCOME COPY
Vertical relationships are expressed as spacing between elements,
not as coordinates measured from the screen.
------------------------------------------------------------------------ */
#main-flow > #welcome-title {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: auto;
height: auto;
margin:
0.875rem
0
0;
padding: 0;
flex: 0 0 auto;
white-space: normal;
}
#main-flow > #welcome-subtitle {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: auto;
height: auto;
margin:
0.3rem
0
0;
padding: 0;
flex: 0 0 auto;
white-space: normal;
}
/* ------------------------------------------------------------------------
BTC / FEATURE COMPONENT
The component owns its own proportions.
Its page position is entirely determined by document flow.
------------------------------------------------------------------------ */
#main-flow > #feature-card-frame {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 360 / 250;
margin:
2.25rem
0
0;
flex: 0 0 auto;
box-sizing: border-box;
container-type: inline-size;
}
/* ------------------------------------------------------------------------
LOWER FEATURE CARDS
Children already use local percentage geometry.
Their icon geometry remains tied to each component itself,
never to the viewport.
------------------------------------------------------------------------ */
#feature-card-frame .feature_icon_bg {
left: 8%;
top: 14.705882%;
width: 32%;
height: 47.058824%;
}
#feature-card-frame .feature_icon_svg {
left: 13%;
top: 22.058824%;
width: 22%;
height: 32.352941%;
}
/* ------------------------------------------------------------------------
INDICATOR / PREMIUM COMPONENT
Again:
no screen Y,
no viewport height,
no reference-device width.
It follows the BTC component naturally.
------------------------------------------------------------------------ */
#main-flow > #premium-card-frame {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 2.035;
margin:
1.5rem
0
0;
flex: 0 0 auto;
box-sizing: border-box;
container-type: inline-size;
}
/* ------------------------------------------------------------------------
BOTTOM NAV
Navigation is not positioned by "85% of screen height".
It belongs to the App Shell and is anchored to Telegram's safe bottom.
Width follows the available Telegram content area.
------------------------------------------------------------------------ */
#bottom-nav-frame,
#bottom-nav-labels,
#bottom-nav-icons {
position: absolute;
left:
calc(
var(
--tg-content-safe-area-inset-left,
0px
)
+ 1rem
);
right:
calc(
var(
--tg-content-safe-area-inset-right,
0px
)
+ 1rem
);
top: auto;
bottom:
calc(
var(
--tg-content-safe-area-inset-bottom,
0px
)
+ 1rem
);
width: auto;
max-width: none;
height: 4.75rem;
transform: none;
box-sizing: border-box;
}
#bottom-nav-frame {
z-index: 5;
}
#bottom-nav-labels,
#bottom-nav-icons {
z-index: 6;
}
/* ------------------------------------------------------------------------
NAV ICON COMPONENT SIZE
Component size is independent of viewport units.
------------------------------------------------------------------------ */
.bottom-nav-icon {
width: 2.25rem;
height: 2.25rem;
}
/* ------------------------------------------------------------------------
GLOBAL MAIN PAGE TYPOGRAPHY BEHAVIOUR
Prevent WebKit from independently inflating text.
------------------------------------------------------------------------ */
html,
body,
#app {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* ========================================================================
MAIN_RESPONSIVE_DASHBOARD_V3
Telegram stable viewport
-> content safe area
-> dashboard area
-> CSS Grid distributes available vertical space
This is one layout model for every Telegram client.
No device-specific rules.
======================================================================== */
/* ------------------------------------------------------------------------
TELEGRAM APP SHELL
------------------------------------------------------------------------ */
#app {
position: relative;
width: 100%;
height:
var(
--tg-viewport-stable-height,
100dvh
);
min-height:
var(
--tg-viewport-stable-height,
100dvh
);
overflow: hidden;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* ------------------------------------------------------------------------
MAIN DASHBOARD AREA
Its bottom boundary is the persistent navigation.
Grid gets the actual remaining Telegram space and distributes it
between the header content and both major cards.
auto overflow is only fallback. With sufficient room the dashboard
itself fits and has nothing to scroll.
------------------------------------------------------------------------ */
#main-flow {
position: absolute;
top:
var(
--tg-content-safe-area-inset-top,
0px
);
right:
var(
--tg-content-safe-area-inset-right,
0px
);
bottom:
calc(
var(
--tg-content-safe-area-inset-bottom,
0px
)
+ 6.75rem
);
left:
var(
--tg-content-safe-area-inset-left,
0px
);
width: auto;
max-width: none;
margin: 0;
padding:
0.75rem
1rem
0.5rem;
box-sizing: border-box;
display: grid;
grid-template-columns:
minmax(0, 1fr);
grid-template-rows:
auto
auto
auto
minmax(12rem, 1.45fr)
minmax(8.5rem, 1fr);
gap:
clamp(
0.25rem,
1cqh,
0.75rem
);
align-content: stretch;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#main-flow::-webkit-scrollbar {
display: none;
}
/* ------------------------------------------------------------------------
LOGO
Normal grid item.
It no longer creates an arbitrary large page-level vertical block.
------------------------------------------------------------------------ */
#main-flow > #logo-main {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
display: block;
width: 91.282051%;
max-width: 100%;
height: auto;
max-height: 7.25rem;
object-fit: contain;
margin:
0
auto;
transform: none;
align-self: center;
pointer-events: none;
}
/* ------------------------------------------------------------------------
WELCOME TEXT
These are ordinary grid rows.
------------------------------------------------------------------------ */
#main-flow > #welcome-title {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: auto;
height: auto;
margin: 0;
padding: 0;
align-self: end;
white-space: normal;
}
#main-flow > #welcome-subtitle {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: auto;
height: auto;
margin: 0;
padding: 0;
align-self: start;
white-space: normal;
}
/* ------------------------------------------------------------------------
BTC CARD
This card occupies the space assigned by Grid.
No screen-level top.
No vh/vw page height.
No fixed reference-device position.
------------------------------------------------------------------------ */
#main-flow > #feature-card-frame {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: 100%;
max-width: none;
height: 100%;
min-height: 12rem;
aspect-ratio: auto;
margin: 0;
box-sizing: border-box;
overflow: hidden;
align-self: stretch;
}
/* ------------------------------------------------------------------------
INDICATOR CARD
Same mechanism as BTC card.
------------------------------------------------------------------------ */
#main-flow > #premium-card-frame {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: 100%;
max-width: none;
height: 100%;
min-height: 8.5rem;
aspect-ratio: auto;
margin: 0;
box-sizing: border-box;
overflow: hidden;
align-self: stretch;
}
/* ------------------------------------------------------------------------
LOWER FEATURE CARD ICONS
Keep them local to each small component.
------------------------------------------------------------------------ */
#feature-card-frame .feature_icon_bg {
left: 8%;
top: 14.705882%;
width: 32%;
height: 47.058824%;
}
#feature-card-frame .feature_icon_svg {
left: 13%;
top: 22.058824%;
width: 22%;
height: 32.352941%;
}
/* ------------------------------------------------------------------------
BOTTOM NAV
Persistent shell element.
Telegram stable viewport + content safe bottom.
------------------------------------------------------------------------ */
#bottom-nav-frame,
#bottom-nav-labels,
#bottom-nav-icons {
position: absolute;
left:
calc(
var(
--tg-content-safe-area-inset-left,
0px
)
+ 1rem
);
right:
calc(
var(
--tg-content-safe-area-inset-right,
0px
)
+ 1rem
);
top: auto;
bottom:
calc(
var(
--tg-content-safe-area-inset-bottom,
0px
)
+ 1rem
);
width: auto;
max-width: none;
height: 4.75rem;
transform: none;
box-sizing: border-box;
}
#bottom-nav-frame {
z-index: 5;
}
#bottom-nav-labels,
#bottom-nav-icons {
z-index: 6;
}
.bottom-nav-icon {
width: 2.25rem;
height: 2.25rem;
}
/* ========================================================================
MAIN_NAV_LIFT_10PX_V1
Visual-only adjustment:
lift the complete Main bottom navigation by 10px.
Architecture is unchanged.
======================================================================== */
#bottom-nav-frame,
#bottom-nav-labels,
#bottom-nav-icons {
bottom:
calc(
var(
--tg-content-safe-area-inset-bottom,
0px
)
+ 1rem
+ 10px
);
}