/* ============================================================================ geek.css — GeekMani design foundation Version 1.2.0 · 1405-08-13 · 2026-11-04 Owner: Mani ImaniSanjar (مانی ایمانی‌سنجر) · aka GeekMani (گیک‌مانی) Source of truth: brand/brand.tokens.json + brand/brand.md (§6, §7) Used by: maniimani.ir and every Geek product (GeekRTL, GeekRef, GeekType, GeekOrbit, GeekProject, …) ============================================================================ READ THIS FIRST (for people and for AI) ---------------------------------------------------------------------------- 1. Never write a hex color in your own CSS. Use the --gm-* variables below. They switch automatically between light and dark. 2. The palette in one sentence: warm paper neutrals everywhere, NAVY for the brand and anything interactive, a tiny bit of GREEN only as a signal (the cursor, a status dot, a terminal prompt). Nothing else. 3. Fonts: Vazirmatn for all text (Persian and English). JetBrains Mono only for code, versions, terminal lines and tiny labels. 4. Shapes are rounded, spacing is generous, motion is short and gentle. 5. No emoji in any UI. No gradients. No glow. No neon. COLOR MAP · which variable for what ---------------------------------------------------------------------------- Variable Light Dark Use it for --gm-bg #F4F4F0 #0E1217 page background (warm paper) --gm-surface #FFFFFF #151A22 cards, panels, popups, inputs --gm-text #1A1D22 #E9ECEF all body text and headings --gm-muted #5F646B #97A1AD secondary text, captions, hints --gm-line #E1E1DB #253040 borders, dividers, table rules --gm-chip #EBEBE5 #1D2431 tags, segmented controls, hover fill --gm-accent #1F3A5F #8DB1E0 NAVY: links, primary buttons, focus, the second half of the wordmark --gm-on-accent #FFFFFF #0E1217 text/icons placed ON --gm-accent --gm-signal #2F7A55 #6FCB97 GREEN: cursor, status dot, prompt "$" (small things only, never text blocks) --gm-danger #A3392F #E58B80 real errors only (not decoration) Fixed (same in both themes, used by the logo mark and product icons): --gm-mark-bg #1F3A5F navy square of the mark / product icons --gm-mark-glyph #FFFFFF white glyph inside the mark --gm-mark-cursor #6FCB97 green cursor inside the mark (5.8:1 on navy) PROPORTION in any screen: neutrals ~85–90% · navy ~8–12% · green ≤3%. CONTRAST (WCAG): text/bg 15.3 (light) · 15.9 (dark); muted/bg ≥5.4; on-accent/accent ≥8.5. Keep every text pair ≥4.5:1. QUICK START ---------------------------------------------------------------------------- or Fonts expected at ../fonts/vazirmatn/ and ../fonts/jetbrains-mono/ (copy them from assets/fonts/ in the maniimani folder). Theme follows the system. Force it with . CONTENTS ---------------------------------------------------------------------------- 01 Fonts 06 Buttons 02 Tokens · light 07 Chips, status, cards 03 Tokens · dark 08 Terminal line 04 Base 09 Theme switch 05 Wordmark, mark 10 Endorsement ("by GeekMani") 11 Accessibility and print ========================================================================== */ /* --------------------------------------------------------------------------- 01 · Fonts (local files, no CDN) ------------------------------------------------------------------------ */ @font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn/Vazirmatn-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn/Vazirmatn-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn/Vazirmatn-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } /* --------------------------------------------------------------------------- 02 · Tokens · light (default) ------------------------------------------------------------------------ */ :root { /* color: neutrals */ --gm-bg: #F4F4F0; --gm-surface: #FFFFFF; --gm-text: #1A1D22; --gm-muted: #5F646B; --gm-line: #E1E1DB; --gm-chip: #EBEBE5; /* color: brand */ --gm-accent: #1F3A5F; /* navy */ --gm-on-accent: #FFFFFF; --gm-signal: #2F7A55; /* green, small doses only */ /* color: state */ --gm-danger: #A3392F; /* color: logo mark (fixed in both themes) */ --gm-mark-bg: #1F3A5F; --gm-mark-glyph: #FFFFFF; --gm-mark-cursor: #6FCB97; /* type */ --gm-font: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif; --gm-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; --gm-size-xs: 12px; --gm-size-sm: 14px; --gm-size-base: 16px; --gm-size-md: 20px; --gm-size-lg: 24px; --gm-size-xl: 30px; --gm-size-2xl: 38px; --gm-size-3xl: 48px; --gm-size-4xl: 60px; --gm-leading-fa: 1.85; /* Persian body */ --gm-leading-en: 1.6; /* English body */ --gm-leading-head: 1.25; /* space (4px base) */ --gm-space-1: 4px; --gm-space-2: 8px; --gm-space-3: 12px; --gm-space-4: 16px; --gm-space-5: 24px; --gm-space-6: 32px; --gm-space-7: 48px; --gm-space-8: 64px; --gm-space-9: 96px; /* radius (rounded = friendly) */ --gm-radius-sm: 10px; --gm-radius-md: 14px; --gm-radius-lg: 18px; --gm-radius-xl: 22px; --gm-radius-pill: 999px; /* buttons, chips */ --gm-radius-mark: 24%; /* logo mark and product icons */ /* layout */ --gm-width-page: 1120px; --gm-width-text: 680px; /* motion */ --gm-time-hover: 150ms; --gm-time-ui: 250ms; --gm-time-enter: 350ms; --gm-ease: cubic-bezier(.2, .8, .2, 1); color-scheme: light; } /* --------------------------------------------------------------------------- 03 · Tokens · dark Same names, new values. Applied when the system is dark (unless the page forces light), or when the page forces dark. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gm-bg: #0E1217; --gm-surface: #151A22; --gm-text: #E9ECEF; --gm-muted: #97A1AD; --gm-line: #253040; --gm-chip: #1D2431; --gm-accent: #8DB1E0; --gm-on-accent: #0E1217; --gm-signal: #6FCB97; --gm-danger: #E58B80; color-scheme: dark; } } :root[data-theme="dark"] { --gm-bg: #0E1217; --gm-surface: #151A22; --gm-text: #E9ECEF; --gm-muted: #97A1AD; --gm-line: #253040; --gm-chip: #1D2431; --gm-accent: #8DB1E0; --gm-on-accent: #0E1217; --gm-signal: #6FCB97; --gm-danger: #E58B80; color-scheme: dark; } /* --------------------------------------------------------------------------- 04 · Base ------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--gm-bg); color: var(--gm-text); font-family: var(--gm-font); font-size: var(--gm-size-base); line-height: var(--gm-leading-en); -webkit-font-smoothing: antialiased; } :root:lang(fa) body { line-height: var(--gm-leading-fa); } h1, h2, h3 { margin: 0 0 .5em; line-height: var(--gm-leading-head); text-wrap: balance; } h1 { font-size: clamp(30px, 5vw, var(--gm-size-3xl)); font-weight: 800; } h2 { font-size: clamp(24px, 3.4vw, var(--gm-size-xl)); font-weight: 800; } h3 { font-size: var(--gm-size-md); font-weight: 700; } a { color: var(--gm-accent); text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--gm-accent); outline-offset: 2px; border-radius: 6px; } /* Code and anything Latin-technical inside Persian text stays left-to-right */ code, kbd, samp, .gm-mono { font-family: var(--gm-font-mono); direction: ltr; unicode-bidi: isolate; } .gm-muted { color: var(--gm-muted); } /* Justify rule (brand.md §7.3): only long running paragraphs, only on wide screens.

…

. Phones, cards, lists, tables, headings stay start-aligned. */ @media (min-width: 720px) { .gm-justify { text-align: justify; text-align-last: start; text-justify: inter-word; } } .gm-page { max-width: var(--gm-width-page); margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); } .gm-text { max-width: var(--gm-width-text); } /* --------------------------------------------------------------------------- 05 · Wordmark and mark Wordmark (live text): GeekMani گیک‌مانی The cursor always sits at the END of the line (right in English, left in Persian); writing it after the text in the HTML does that automatically. Mark / product icon: use the exported SVG inside .gm-mark. ------------------------------------------------------------------------ */ .gm-wordmark { font-weight: 900; line-height: 1; white-space: nowrap; color: var(--gm-text); } .gm-wordmark:lang(en) { letter-spacing: -.02em; } /* Persian is never letter-spaced */ .gm-wordmark b { font-weight: inherit; color: var(--gm-accent); } .gm-cursor { display: inline-block; width: .13em; height: .82em; margin-inline-start: .07em; vertical-align: -.06em; border-radius: .03em; background: var(--gm-signal); } .gm-wordmark:lang(fa) .gm-cursor { margin-inline-start: .09em; } @media (prefers-reduced-motion: no-preference) { .gm-blink .gm-cursor { animation: gm-blink 1.15s steps(1) infinite; } } @keyframes gm-blink { 50% { opacity: 0; } } .gm-mark { display: inline-grid; place-items: center; flex: none; overflow: hidden; width: var(--gm-mark-size, 48px); height: var(--gm-mark-size, 48px); border-radius: var(--gm-radius-mark); background: var(--gm-mark-bg); } .gm-mark > img, .gm-mark > svg { display: block; width: 100%; height: 100%; } /* --------------------------------------------------------------------------- 06 · Buttons … · ------------------------------------------------------------------------ */ .gm-btn { display: inline-flex; align-items: center; gap: var(--gm-space-2); padding: 8px 18px; border: 1px solid transparent; border-radius: var(--gm-radius-pill); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background var(--gm-time-hover) var(--gm-ease), border-color var(--gm-time-hover) var(--gm-ease); } .gm-btn--primary { background: var(--gm-accent); color: var(--gm-on-accent); } .gm-btn--secondary { background: transparent; color: var(--gm-text); border-color: var(--gm-line); } .gm-btn--secondary:hover { background: var(--gm-chip); } /* --------------------------------------------------------------------------- 07 · Chips, status, cards ------------------------------------------------------------------------ */ .gm-chip { /* technology tag: Django */ display: inline-block; padding: 2px 10px; border-radius: var(--gm-radius-pill); background: var(--gm-chip); color: var(--gm-text); font-family: var(--gm-font-mono); font-size: 11.5px; direction: ltr; } .gm-status { /* منتشرشده */ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gm-muted); } .gm-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gm-signal); } .gm-card { padding: var(--gm-space-5); border: 1px solid var(--gm-line); border-radius: var(--gm-radius-lg); background: var(--gm-surface); } @media (prefers-reduced-motion: no-preference) { .gm-card--lift { transition: transform var(--gm-time-ui) var(--gm-ease); } .gm-card--lift:hover { transform: translateY(-2px); } } /* --------------------------------------------------------------------------- 08 · Terminal line (geek spice: at most ONE per page)
$ whoami → geekmani
------------------------------------------------------------------------ */ .gm-term { padding: 8px 12px; overflow-x: auto; white-space: nowrap; border: 1px solid var(--gm-line); border-radius: var(--gm-radius-sm); background: var(--gm-surface); color: var(--gm-muted); font-family: var(--gm-font-mono); font-size: 13px; direction: ltr; text-align: left; } .gm-term .gm-prompt { color: var(--gm-signal); } /* --------------------------------------------------------------------------- 09 · Theme switch (System / Light / Dark)
Script sets or removes data-theme on . ------------------------------------------------------------------------ */ .gm-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--gm-radius-pill); background: var(--gm-chip); } .gm-seg button { padding: 5px 14px; border: 0; border-radius: var(--gm-radius-pill); background: transparent; color: var(--gm-muted); font: inherit; font-size: var(--gm-size-sm); cursor: pointer; } .gm-seg button[aria-pressed="true"] { background: var(--gm-surface); color: var(--gm-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } /* --------------------------------------------------------------------------- 10 · Endorsement — required at the bottom of every product by GeekMani Persian: «از گیک‌مانی». Always links to https://github.com/mani-imani ------------------------------------------------------------------------ */ .gm-sign { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--gm-muted); text-decoration: none; } .gm-sign:hover { color: var(--gm-text); } .gm-sign .gm-cursor { height: .9em; } /* --------------------------------------------------------------------------- 11 · Accessibility and print ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } @media print { .gm-cursor { animation: none !important; } .gm-seg { display: none; } }