/* Hand-written CSS, served raw (not processed by Tailwind) and loaded after the * bundles by Layouts/head/global-head.ctp. Keep this to things Tailwind cannot * express: @font-face, document-level defaults, and the handful of base element * rules the design applies globally. * * Anything expressible as a utility belongs in the views instead; anything that * is specific to one layout belongs in that layout's entry under _v2/css/src/. */ /* ─── Vazirmatn (self-hosted; see _v2/fonts) ────────────────────────────── The design references the jsDelivr build — we ship it locally so there is no third-party request and the preload in global-head.ctp actually hits. All six weights the design uses (400/500/600/700/800/900) are declared; without them the browser synthesises fake bolds and the headings drift off the approved design. */ @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 400; font-display: swap; src: url("/_v2/fonts/Vazirmatn-Regular.woff2") format("woff2"); } @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 500; font-display: swap; src: url("/_v2/fonts/Vazirmatn-Medium.woff2") format("woff2"); } @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 600; font-display: swap; src: url("/_v2/fonts/Vazirmatn-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 700; font-display: swap; src: url("/_v2/fonts/Vazirmatn-Bold.woff2") format("woff2"); } @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 800; font-display: swap; src: url("/_v2/fonts/Vazirmatn-ExtraBold.woff2") format("woff2"); } @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 900; font-display: swap; src: url("/_v2/fonts/Vazirmatn-Black.woff2") format("woff2"); } /* ─── Document defaults ─────────────────────────────────────────────────── Applied to bare elements so every page inherits the design's typography without repeating font/color utilities on . */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "Vazirmatn", ui-sans-serif, system-ui, "Segoe UI", Tahoma, sans-serif; font-size: 16px; line-height: 1.75; /* ss01 swaps in the Persian letterforms the design was set in */ font-feature-settings: "ss01"; color: #41485a; background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Form controls do not inherit the family on their own. */ input, button, select, textarea { font-family: inherit; } /* ─── Scroll progress ───────────────────────────────────────────────────── Rendered by Elements/header.ctp on every layout and driven by _v2/js/main.js. Sticks directly under the 74px masthead, so it reads as the header's bottom border filling in as the page scrolls. Values are the design's (chabok-src/article.css); the inner span is scaled rather than resized so the browser keeps it off the main thread. */ .progress { position: sticky; top: 74px; z-index: 40; height: 3px; background: transparent; } .progress span { display: block; height: 100%; background: var(--color-accent); transform: scaleX(0); /* RTL: the bar grows from the right edge */ transform-origin: right; transition: transform 0.05s linear; } /* Persian digits are proportional by default, which makes numeric columns (prices, dates, ticker values) jitter. `.num` locks them to tabular and turns ss01 off, since it otherwise substitutes the digit forms. */ .num { font-variant-numeric: tabular-nums; font-feature-settings: "ss01" off; } /* ─── Feed load-more (FRONT_D) ────────────────────────────────────────────── Rows appended by the feedLoadMore module in _v2/js/main.js fade up into place instead of snapping in, so it reads as "more arrived" rather than a reflow. These live here rather than in Tailwind because the class is added by JS — custom.css is served raw, so no safelisting is involved. `both` keeps the row invisible through its stagger delay; without it a delayed row would flash at full opacity before the animation starts. */ @keyframes feed-row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .feed-row-in { animation: feed-row-in 0.38s ease-out both; } /* While a batch is in flight the control dims and shows a progress cursor. */ [data-feed-more][aria-busy="true"] { opacity: 0.65; cursor: progress; } /* Readers who ask for less motion get the content, not the choreography. */ @media (prefers-reduced-motion: reduce) { .feed-row-in { animation: none; } } /* ─── FRONT_ALOCHABOK promo («الو چابک») ────────────────────────────────── The design's `.promo` verbatim (chabok-src/home.css:74-86), kept as raw classes so the element's markup mirrors the design 1:1 instead of a utility wall. It is a shared sidebar component (home, landing, tag, archive), so it lives here (global) rather than a single layout entry. Tokens are the project's — `--color-navy` / `--color-accent`; the design's `--radius` is 10px. */ .promo { display: block; position: relative; overflow: hidden; padding: 26px 24px; border-radius: 10px; background: var(--color-navy); color: #fff; } .promo::after { content: ""; position: absolute; left: -30px; bottom: -30px; width: 120px; height: 120px; border-radius: 50%; background: var(--color-accent); opacity: 0.18; } .promo__k { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--color-accent); } .promo__t { display: block; margin-bottom: 16px; font-size: 16px; line-height: 1.7; font-weight: 500; } .promo__cta { display: inline-block; font-size: 14.5px; font-weight: 700; color: #fff; white-space: nowrap; } /* ─── Static content pages: about (64) + contact (65) ───────────────────── The design's #about / #contact (chabok-src «پیش‌نمایش», STATIC CONTENT PAGES block), scoped under `.cms-page` — the shared base both pages carry (page-hero, crumb, info-card, kicker, promo). About adds prose/values/callout/ license; contact adds the form + map (see the CONTACT block below). These live here (built into the served CSS) rather than the CMS content field because the panel's editor strips class attributes and