/* =============================================================================
CinemaBox design tokens
=============================================================================
The ONE stylesheet every CinemaBox screen imports: the public landing, the
Telegram Mini App, and every screen built after them. Import it once, then
build with the tokens and the classes below. Do not copy a colour, a radius
or a button rule into a page.
Deployed to /var/www/cinemabox/public/css/cinemabox-tokens.css.
Source of truth: Modules/CinemaBox/Resources/assets/css/cinemabox-tokens.css.
WHY the file is self hosted and has no @import: Iran cannot reach cdnjs,
jsdelivr, fonts.googleapis.com or unpkg. Every byte comes from cinemabox.cc.
WHY the design is dark only: the palette is read off the owner's screens.
The Mini App shell (Resources/views/miniapp/app.blade.php) also copies the
live Telegram theme into ITS OWN variables --bg, --text, --muted and --tg.
Those names are kept and still work. CinemaBox names every token --cb-*, so
a light Telegram theme can never repaint the CinemaBox look.
This file paints html and body. Import it on a CinemaBox screen only, never
on a vendor admin panel screen.
Written right to left first. Use logical properties in new work:
margin-inline-start, padding-inline-end, inset-inline-start.
============================================================================= */
/* -----------------------------------------------------------------------------
1. The font
-----------------------------------------------------------------------------
Yekan Bakh 3 ProPlus, the VARIABLE face. One file carries every weight from
100 to 950, so a phone downloads about 130 KB instead of many megabytes of
static faces. This is the single biggest win for load time on a slow link.
The licence travels with the file: /fonts/YekanBakh-3-License.pdf.
The FaNum face is deliberately NOT shipped. FaNum rewrites every Latin digit
as a Persian one. CinemaBox chooses per value instead: the year is 2014, the
IMDb score is 8.7, the runtime is ۰۲:۴۹. Modules/CinemaBox/Support/
PersianDigits.php makes that choice, and a font must not fight it.
READ THIS BEFORE YOU CHANGE THE DESCRIPTORS.
The file has three axes: wght 100..950, wdth 62.5..150 and DOTS 0..1. Its
DEFAULT instance is wght 100 wdth 62.5, which is Thin ExtraCondensed. So the
width range MUST be declared here and the width MUST be pinned to 100% on
:root. Drop either one and the whole site renders thin and squashed.
The paths are relative, so the file also works if the app ever moves under a
sub path. /css/ + ../fonts/ = /fonts/.
----------------------------------------------------------------------------- */
@font-face {
font-family: 'YekanBakh';
src: url('../fonts/YekanBakh-VF.woff2') format('woff2'),
url('../fonts/YekanBakh-VF.woff') format('woff');
font-weight: 100 900;
font-stretch: 62.5% 150%;
font-style: normal;
/* Persian text is readable at once in a system face, then swaps. A blank
page on a slow Iranian link is worse than one reflow. */
font-display: swap;
}
/* -----------------------------------------------------------------------------
2. The tokens
----------------------------------------------------------------------------- */
:root {
/* --- the ground ---------------------------------------------------- */
--cb-bg: #0B1017; /* near black navy, the page ground */
--cb-surface: #131A24; /* a card */
--cb-surface-2: #1B2430; /* a raised chip or an input */
/* --- the brand ----------------------------------------------------- */
--cb-accent: #F0544C; /* the coral red on every button and chip */
--cb-accent-2: #FF6B63; /* the lighter coral, for a hover */
/* --- the text ------------------------------------------------------ */
--cb-text: #FFFFFF;
--cb-text-dim: #A8B0BA; /* the genre line, the description */
/* --- one fixed brand colour ---------------------------------------- */
--cb-imdb: #F5C518; /* the IMDb badge yellow */
/* --- shape --------------------------------------------------------- */
--cb-radius: 20px; /* a card, generously rounded */
--cb-radius-sm: 12px; /* a button, an input, a small tile */
--cb-radius-pill: 999px;
/* Derived, so nothing new is invented. A hairline and a lift, both read
from the ground colour, not from a second palette. */
--cb-line: rgba(255, 255, 255, .08);
--cb-shadow: 0 18px 44px rgba(0, 0, 0, .55);
--cb-accent-wash: rgba(240, 84, 76, .14); /* --cb-accent at 14% */
/* --- the family ----------------------------------------------------
The fallback stack carries the page until the webfont swaps in, and it
covers any glyph the webfont lacks. YekanBakh itself carries Latin, so
an English film title such as Interstellar is drawn by the same family
and stays in the same design. */
--cb-font-fallback: 'Vazirmatn', 'IRANSans', 'IRANYekan', 'Segoe UI', Tahoma,
'Noto Sans Arabic', system-ui, -apple-system, Roboto, Arial, sans-serif;
--cb-font: var(--cb-font-fallback);
}
/* The webfont is offered ONLY to an engine that can drive a variable axis.
An old browser that loaded this file would otherwise get the default
instance, Thin ExtraCondensed, and Persian would be unreadable. Every
engine that parses font-variation-settings supports variable fonts. */
@supports (font-variation-settings: normal) {
:root { --cb-font: 'YekanBakh', var(--cb-font-fallback); }
}
/* -----------------------------------------------------------------------------
3. The ground
----------------------------------------------------------------------------- */
html {
background: var(--cb-bg);
/* Dark only. This also paints a native scrollbar and a native form
control dark, so nothing flashes white. */
color-scheme: dark;
-webkit-text-size-adjust: 100%;
}
body {
background: var(--cb-bg);
color: var(--cb-text);
font-family: var(--cb-font);
/* Pin the width axis to normal. See the warning above the @font-face. */
font-stretch: 100%;
font-size: 15px;
line-height: 1.85;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
}
/* Belt and braces for the width axis: an engine that ignores font-stretch on
an element still gets wdth 100 from here. Only wdth is named, so
font-weight keeps full control of the wght axis. */
@supports (font-variation-settings: normal) {
body { font-variation-settings: 'wdth' 100; }
}
/* -----------------------------------------------------------------------------
4. The shared classes
Every later screen builds its card and its hero out of these. Do not write a
second coral button.
----------------------------------------------------------------------------- */
/* --- the button ------------------------------------------------------- */
.cb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px; /* a comfortable thumb target on a phone */
padding-block: 12px;
padding-inline: 24px;
color: var(--cb-text);
font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
text-align: center;
text-decoration: none;
background: transparent;
border: 1px solid transparent;
border-radius: var(--cb-radius-sm);
cursor: pointer;
transition: background-color .18s ease, border-color .18s ease,
color .18s ease, transform .12s ease;
}
.cb-btn:active { transform: scale(.97); }
.cb-btn:focus-visible {
outline: 2px solid var(--cb-accent-2);
outline-offset: 2px;
}
.cb-btn[disabled],
.cb-btn[aria-disabled='true'] {
opacity: .55;
cursor: default;
transform: none;
}
/* An icon inside a button never stretches. */
.cb-btn > svg { flex: none; width: 20px; height: 20px; }
.cb-btn--solid {
color: #FFFFFF;
background: var(--cb-accent);
border-color: var(--cb-accent);
}
.cb-btn--solid:hover,
.cb-btn--solid:focus-visible {
background: var(--cb-accent-2);
border-color: var(--cb-accent-2);
}
.cb-btn--outline {
color: var(--cb-accent);
background: transparent;
border-color: var(--cb-accent);
}
.cb-btn--outline:hover,
.cb-btn--outline:focus-visible {
color: var(--cb-accent-2);
background: var(--cb-accent-wash);
border-color: var(--cb-accent-2);
}
/* The round button carries one glyph, such as the plus beside the main call
to action. Combine it with --solid or --outline. */
.cb-btn--round {
flex: none;
width: 48px;
min-width: 48px;
padding: 0;
font-size: 22px;
font-weight: 400;
border-radius: var(--cb-radius-pill);
}
/* --- the genre chip ---------------------------------------------------- */
/* Coral fill, white text, a rounded rectangle. The radius is read off the
owner's screen: the chip is NOT a full pill there. Add .cb-chip--pill when
a screen wants the pill. */
.cb-chip {
display: inline-flex;
align-items: center;
padding-block: 4px;
padding-inline: 14px;
color: #FFFFFF;
font-size: 13px;
font-weight: 600;
line-height: 1.9;
white-space: nowrap;
background: var(--cb-accent);
border-radius: 10px;
}
.cb-chip--pill { border-radius: var(--cb-radius-pill); }
/* A quiet chip, for a value that is not a genre. */
.cb-chip--muted {
color: var(--cb-text-dim);
background: var(--cb-surface-2);
}
/* --- the IMDb badge ---------------------------------------------------- */
/* IMDb8.7
The score stays in LATIN digits. That is deliberate: the owner's screens
show 8.7 and 2014 in Latin and only the runtime ۰۲:۴۹ in Persian. */
.cb-imdb {
display: inline-flex;
align-items: center;
gap: 8px;
}
.cb-imdb__mark {
display: grid;
place-items: center;
flex: none;
width: 28px;
height: 28px;
color: var(--cb-bg);
font-size: 8px;
font-weight: 900;
line-height: 1;
letter-spacing: -.2px;
/* The wordmark is Latin and must not be reordered on an RTL line. */
direction: ltr;
unicode-bidi: isolate;
background: var(--cb-imdb);
border-radius: var(--cb-radius-pill);
}
.cb-imdb__score {
color: var(--cb-text);
font-size: 17px;
font-weight: 700;
line-height: 1;
/* 8.7 must read as 8.7, never as 7.8, beside Persian text. */
direction: ltr;
unicode-bidi: isolate;
}
/* --- the meta row ------------------------------------------------------ */
/* A row of value plus icon groups, right to left.
۰۲:۴۹2014
The ICON is the first child. On an RTL line the first child sits on the
right, which is where the owner's screens put it. */
.cb-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 18px;
color: var(--cb-text);
font-size: 13.5px;
font-weight: 500;
}
.cb-meta__item {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
/* The icons are coral, the values are white. */
.cb-meta__icon {
flex: none;
width: 16px;
height: 16px;
color: var(--cb-accent);
}
/* A Latin value on an RTL line, such as the year. */
.cb-meta__value--ltr {
direction: ltr;
unicode-bidi: isolate;
}
/* --- the clamped description ------------------------------------------- */
/* Four lines, then an ellipsis. -webkit-box is still the only method every
browser in use supports, so the prefixed properties stay.
This class only cuts the text. It sets NO colour, so it can clamp a white
heading too. A film description is dim: add color: var(--cb-text-dim). */
/* -webkit- ONLY. The unprefixed `line-clamp` is a newer shorthand, and an iOS
web view that already implements it takes the later declaration and clamps
NOTHING. That is not a cosmetic loss: a box that does not clamp grows, and a
card of a fixed height then loses the rows above and below it. The Mini App
billboard failed exactly that way. */
.cb-clamp-4 {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* -----------------------------------------------------------------------------
5. Motion
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.cb-btn {
transition: none;
}
.cb-btn:active { transform: none; }
}