/* chrome.css — the header, the footer and the notices, for EVERY page. One definition of the site's frame, loaded by both kinds of page: the three public pages tokens → chrome → style … pages → footer → site every other page tokens → chrome → footer → app Everything here used to live in two places: the header rules at the top of the theme's style.css (moved here verbatim by the theme split, 28 Shahrivar 1405) and the Django additions in site.css (the signed-in menu, the notices, the Telegram button, the identity rows and the seal). The panel pages never load style.css — its global `svg` rule would stroke every chart on them — so anything the frame needs has to be here, scoped to the frame. ⚠️ The panel's app.css loads AFTER this on panel pages and sets global rules of its own (`a { color: var(--tint) }`, `a:hover { opacity }`, heading sizes). The last block below pins the frame's own values so the header and footer look the same on a panel page as on the home page. */ /* ---- The font, from our own server ------------------------------------ The static theme pulled Vazirmatn from fonts.googleapis.com. The Django site has always served it itself, and that stays: a customer's home connection is not a datacentre, and a font that has to cross the border before any text renders is a page that loads blank on the network this service is for. Same file and same declaration as css/app.css. */ @font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn[wght].f6d31671339d.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; font-style: normal; } /* ---- The theme's header, moved from style.css --------------------------- */ .icon-defs{position:absolute;width:0;height:0;overflow:hidden}.container{width:min(1220px,calc(100% - 96px));margin-inline:auto}.skip{position:fixed;top:-70px;right:20px;padding:12px;background:var(--surface);z-index:100}.skip:focus{top:10px}.header{background:var(--glass);border-bottom:1px solid var(--surface-2)}.nav{height:99px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:inline-flex;align-items:center}.brand img{object-fit:contain;mix-blend-mode:multiply;width:125px;height:61px}.nav nav{display:flex;gap:35px;font-size:14px;font-weight:500}.nav nav a:hover{color:var(--accent-dark)}.button{background:var(--accent-dark);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:15px 23px;border-radius:12px;font-size:15px;font-weight:600;border:1px solid transparent;box-shadow:0 8px 20px var(--accent-glow);transition:background .2s,transform .2s}.button:hover{background:var(--accent-dark);transform:translateY(-2px)}.button-small{padding:10px 19px;font-size:14px;gap:18px}.button svg{width:20px;height:20px}.menu-toggle{display:none;border:0;background:none;color:var(--ink)}.footer{display:flex;gap:20px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-block:25px;margin-top:70px}.footer .brand img{width:90px;height:44px}.footer p{font-size:14px;color:var(--muted)}.footer>span{font-size:12px;color:var(--muted)} @media(max-width:1100px){.container{width:calc(100% - 56px)}} @media(max-width:760px){.container{width:calc(100% - 36px)}.nav{height:80px;gap:15px}.brand img{width:100px;height:49px}.nav-cta{margin-right:auto;font-size:14px;padding:8px 13px;gap:10px}.menu-toggle{display:grid;place-items:center;padding:7px}.nav nav{display:none;position:absolute;top:80px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);padding:25px;z-index:20;box-shadow:0 12px 15px var(--shadow)}.nav nav.open{display:flex;flex-wrap:wrap;gap:20px 26px}.footer{flex-wrap:wrap;margin-top:45px;gap:10px}.footer>span{width:100%;text-align:center}.footer p{font-size:14px}} /* The theme's icons are line drawings: no fill, a round 1.7 stroke. In style.css that is a GLOBAL svg rule, which is right for the public pages and wrong for the panel, whose charts are svg too. Here it is scoped to the frame. */ .header svg,.site-footer svg,.site-notices svg,.skip svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} /* ---- Header additions ---------------------------------------------------- */ .nav nav a[aria-current=page] { color: var(--accent-dark); } .nav .nav-login { display: inline-flex; align-items: center; gap: 6px; } .nav .nav-login svg { width: 17px; height: 17px; } .nav nav form { margin: 0; display: contents; } .nav .nav-logout { font: inherit; font-size: 14px; font-weight: 500; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .nav .nav-logout:hover { color: var(--accent-dark); } /* Counters on «پشتیبانی» and «صف تیکت‌ها», and the wallet dot. Same meaning as on the panel header: the number is unread replies; the dot is «something new» and deliberately not a count. */ .nav .nav-count b { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-inline-start: 5px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; } .nav .nav-dot i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-inline-start: 5px; vertical-align: middle; background: var(--accent); } .menu-toggle.has-unread { position: relative; } .menu-toggle.has-unread::after { content: ""; position: absolute; top: 5px; left: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } /* ⚠️ The theme's header was drawn for five links. A visitor gets six plus the button; a signed-in customer gets eight or nine plus «خروج». Letting that row overflow would push the logo off the page, so the menu folds into the button earlier: at 980px for a visitor and at 1260px once signed in (1180 until 30 Shahrivar 1405, when «بلاگ» made the staff menu twelve items — measured: it needs ~1232px, so 1260 keeps a margin). The rules are the theme's own ≤760px rules, repeated at the wider width. */ @media (max-width: 980px) { .site-public .nav { gap: 15px; } .site-public .menu-toggle { display: grid; place-items: center; padding: 7px; } .site-public .nav nav { display: none; position: absolute; top: 99px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 25px; z-index: 20; box-shadow: 0 12px 15px var(--shadow); } .site-public .nav nav.open { display: flex; flex-wrap: wrap; gap: 20px 26px; } .site-public .nav-cta { margin-right: auto; } } @media (max-width: 1260px) { .site-member .nav { gap: 15px; } .site-member .menu-toggle { display: grid; place-items: center; padding: 7px; } .site-member .nav nav { display: none; position: absolute; top: 99px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 25px; z-index: 20; box-shadow: 0 12px 15px var(--shadow); } .site-member .nav nav.open { display: flex; flex-wrap: wrap; gap: 20px 26px; } } @media (min-width: 1261px) { .site-member .nav nav { gap: 22px; font-size: 13.5px; } } @media (max-width: 760px) { .site-public .nav nav, .site-member .nav nav { top: 80px; } } .header { position: relative; } /* ---- Notices: messages, the operator's announcement, targeted notices, the recovery-code nag and the renewal question ---------------------- */ .site-notices { display: grid; gap: 12px; padding-top: 20px; } .site-alert { padding: 16px 20px; border-radius: 14px; font-size: 14.5px; line-height: 2; background: var(--info-soft); border: 1px solid var(--info-line); color: var(--info-ink); } .site-alert b { font-weight: 700; } .site-alert a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 4px; } .site-alert.is-warning { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); } .site-alert.is-success { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); } .site-alert.is-error { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad-ink); } .site-alert form { margin-top: 10px; } .site-alert .button, .site-renewal .button { padding: 9px 16px; font-size: 14px; gap: 10px; } .button-quiet { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); } .button-quiet:hover { background: var(--surface-2); } .site-renewal { padding: 22px 24px; border-radius: 18px; background: linear-gradient(120deg, var(--mint-soft), var(--accent-soft)); border: 1px solid var(--mint-line); } .site-renewal h3 { margin: 0 0 6px; font-size: 18px; } .site-renewal .choices { display: flex; gap: 22px; margin: 12px 0 16px; } .site-renewal label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } .site-renewal textarea { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); margin-bottom: 14px; } /* ---- Telegram, bottom-left of every page --------------------------------- `left`, not a logical property: the page is RTL and the operator asked for bottom-LEFT, which `inset-inline-start` would flip to the right. */ .tg-fab { position: fixed; left: 20px; bottom: 20px; z-index: 30; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #2aa3dc; color: #fff; box-shadow: 0 10px 25px #1b6e9a40; transition: transform .2s; } .tg-fab:hover { transform: translateY(-3px); } .tg-fab svg { width: 26px; height: 26px; fill: currentColor; stroke: none; } .footer-social svg.tg-glyph { fill: currentColor; stroke: none; } /* ---- Footer additions ---------------------------------------------------- */ .footer-about .footer-legal-name { font-weight: 600; color: var(--muted); margin: -6px 0 14px; font-size: 15px; } .footer-rows { display: grid; gap: 10px; } .footer-rows li { line-height: 2.1; } .footer-rows b { font-weight: 600; color: var(--muted); } .footer-rows a { direction: ltr; } /* The seal plate. ⚠️ The issuer's goes inside `.seal` byte-for-byte (|safe, from the TrustSeal table) — eNamad treats any edit to its snippet as a violation, and adding rel="noopener noreferrer" to their anchor is the documented way to stop the badge rendering. So the plate styles the WRAPPER and reaches into their markup only by element, never by adding attributes. */ .footer-seal .seal { display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--mint-line); border-radius: 15px; padding: 12px 10px; max-width: 155px; min-height: 150px; box-shadow: 0 8px 25px var(--shadow); } .footer-seal .seal img { width: 125px; height: auto; max-height: 136px; object-fit: contain; } .footer-seal .seal + .seal { margin-top: 12px; } .footer-seal .seal.is-pending { border-style: dashed; } .footer-seal .seal.is-pending img { opacity: 0; } /* ---- The frame, pinned against app.css ----------------------------------- Only what app.css would otherwise change. Higher specificity than its element rules, so load order stops mattering. */ .header,.site-footer{color:var(--ink);font-family:var(--font)} .header a,.site-footer a,.site-notices .site-renewal a{color:inherit;text-decoration:none} .header a:hover,.site-footer a:hover{opacity:1} .header img,.site-footer img{display:inline-block} .site-footer h2{line-height:1.6;letter-spacing:0} .site-footer p,.site-footer li,.site-footer address{letter-spacing:0} /* «دسترسی سریع» at the mockup's rhythm (30 Shahrivar 1405). The design set body line-height 1.9 and its footer links inherit it; the old-site type block (site.css) and app.css both set body to 1.65, which packed the four links 3px tighter per row than the mockup — measured 37px against the mockup's 40.5 (73 image px at its 1.8 scale). Pinned here so both kinds of page agree. */ .site-footer ul{line-height:1.9} .header .button,.site-notices .button{color:var(--on-accent)} .site-notices .button-quiet{color:var(--ink)} /* ⚠️ `.button` above is var(--accent-dark), not --accent: the design set its buttons to #bd5022 in connect.css, which the panel pages never load, so the header's «شروع» came out bright orange there (white on it: 2.65:1) and burnt orange on the home page. One colour now, everywhere. */ /* ---- Light / dark switch --------------------------------------------------- Shows the glyph of the theme it would switch TO: a moon on a light page, a sun on a dark one. Outside the