/* ============================================================================
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; }
}
/* ==========================================================================
site.css — maniimani.ir · page layer on top of geek.css
Only layout and page-specific pieces. Colors, fonts, radii, motion: geek.css tokens.
Layout idea: Apple calm. One generous column, large type, quiet cards;
navy carries structure, green only signals (cursor, status, prompt).
========================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { padding-bottom: env(safe-area-inset-bottom, 0px); }
.gm-page { padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.small { font-size: 13px; }
h2 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -.01em; }
:lang(en) h1, :lang(en) h2 { letter-spacing: -.02em; }
/* ---- header ---- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
background: color-mix(in srgb, var(--gm-bg) 82%, transparent);
backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
border-bottom: 1px solid color-mix(in srgb, var(--gm-line) 70%, transparent); }
.top-in { display: flex; align-items: center; gap: 20px; height: 60px; }
.brand { text-decoration: none; font-size: 21px; }
.nav { display: flex; gap: 22px; margin-inline-start: 12px; }
.nav a { color: var(--gm-muted); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.nav a:hover { color: var(--gm-text); }
.tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.lang { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--gm-text); line-height: 1.6;
border: 1px solid var(--gm-line); border-radius: var(--gm-radius-pill); padding: 3px 11px; }
.lang:hover { background: var(--gm-chip); }
.gm-seg button { padding: 4px 11px; font-size: 13px; }
/* palette button: search + "/" on wide screens, menu icon on phones */
.kbtn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 10px; cursor: pointer;
font: inherit; color: var(--gm-muted); background: transparent;
border: 1px solid var(--gm-line); border-radius: var(--gm-radius-pill); }
:root[dir="rtl"] .kbtn { padding: 0 10px 0 6px; }
.kbtn:hover { color: var(--gm-text); background: var(--gm-chip); }
.kbtn .bi { width: 15px; height: 15px; }
.kbtn .i-menu { display: none; }
kbd { font-family: var(--gm-font-mono); font-size: 11.5px; line-height: 1; color: var(--gm-muted);
border: 1px solid var(--gm-line); border-bottom-width: 2px; border-radius: 6px; padding: 3px 6px; background: var(--gm-surface); }
@media (max-width: 860px) { .nav { gap: 16px; } .gm-seg { display: none; } }
@media (max-width: 760px) {
.nav { display: none; }
.top-in { gap: 12px; height: 56px; }
.kbtn { order: 2; width: 38px; height: 38px; padding: 0; justify-content: center; }
:root[dir="rtl"] .kbtn { padding: 0; }
.kbtn .i-search, .kbtn kbd { display: none; }
.kbtn .i-menu { display: block; width: 20px; height: 20px; color: var(--gm-text); }
.lang { padding: 6px 12px; }
}
/* ---- hero ---- */
.hero { padding-block: clamp(64px, 12vw, 132px) clamp(40px, 7vw, 72px); }
.hero-term { display: inline-block; margin: 0 0 28px; font-size: 12.5px; padding: 5px 12px; }
.hero h1 { font-size: clamp(42px, 8vw, 84px); font-weight: 900; line-height: 1.08; margin: 0; }
.hero .role { text-wrap: balance; margin: 14px 0 0; font-size: clamp(16px, 2.2vw, 20px); font-weight: 600; color: var(--gm-accent); }
.hero .tagline { margin: 22px 0 0; font-size: clamp(20px, 3vw, 30px); font-weight: 700; line-height: 1.55; max-width: 24ch; text-wrap: balance; }
.hero .now { margin-top: 22px; font-size: 14px; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
/* ---- sections ---- */
.sec { padding-block: clamp(56px, 9vw, 104px) 0; scroll-margin-top: 72px; }
.lead { color: var(--gm-muted); max-width: 62ch; margin: 0 0 26px; font-size: 16.5px; }
.sub { margin: 48px 0 6px; font-size: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; border-radius: var(--gm-radius-pill);
padding: 2px 10px; background: var(--gm-accent); color: var(--gm-on-accent); }
/* featured client project */
.feat { padding: clamp(22px, 3.5vw, 36px); display: grid; gap: 10px; }
.feat-k { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; }
.feat h3 { margin: 4px 0 0; font-size: clamp(20px, 2.6vw, 26px); }
.feat p { margin: 0; }
.ticks { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 8px; max-width: 70ch; }
.ticks li { position: relative; padding-inline-start: 22px; font-size: 15.5px; }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 9px; height: 9px;
border-radius: 3px; background: var(--gm-accent); opacity: .85; }
/* product family */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.prod { display: grid; gap: 12px; align-content: start; }
/* card image: bleeds to the card edges; light/dark files follow the theme like the wordmarks */
.prod-shot { margin: calc(-1 * var(--gm-space-5)) calc(-1 * var(--gm-space-5)) 4px; aspect-ratio: 16 / 10; overflow: hidden;
border-radius: var(--gm-radius-lg) var(--gm-radius-lg) 0 0; border-bottom: 1px solid var(--gm-line); background: var(--gm-chip); }
.prod-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.prod-shot .shot-dark { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .prod-shot.has-dark .shot-light { display: none; }
:root:not([data-theme="light"]) .prod-shot.has-dark .shot-dark { display: block; }
}
:root[data-theme="dark"] .prod-shot.has-dark .shot-light { display: none; }
:root[data-theme="dark"] .prod-shot.has-dark .shot-dark { display: block; }
.web-h h4 { font-size: 18px; font-weight: 800; }
.prod-h { display: flex; gap: 12px; align-items: center; min-height: 40px; }
.prod-h .gm-mark { flex: none; }
.prod-h h4 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -.02em; line-height: 1; unicode-bidi: isolate; }
.prod-h h4 b { color: var(--gm-accent); font-weight: 900; }
.prod p { margin: 0; font-size: 15px; line-height: 1.75; }
.prod-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto;
padding-top: 10px; border-top: 1px solid var(--gm-line); }
.more { font-family: var(--gm-font-mono); font-size: 12px; text-decoration: none; margin-inline-start: auto; }
.ver { font-family: var(--gm-font-mono); font-size: 12px; color: var(--gm-muted); }
.also { margin-top: 22px; color: var(--gm-muted); font-size: 14.5px; max-width: 80ch; }
.also b { color: var(--gm-text); }
/* tools */
.tools2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .tools2 { grid-template-columns: 1fr; } }
.tools2 > div { background: var(--gm-surface); border: 1px solid var(--gm-line); border-radius: var(--gm-radius-lg); padding: 20px; }
.tools2 h4 { margin: 0 0 12px; font-size: 15px; }
.tools2 .gm-chip { font-family: var(--gm-font); font-size: 13px; padding: 4px 12px; direction: inherit; }
/* about */
.about { display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 5vw, 56px); align-items: start; }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; } }
.portrait { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; background: #E3E3E0; }
@media (max-width: 760px) { .portrait { width: 140px; height: 140px; } }
.story { margin: 0; font-size: 17px; line-height: 1.95; max-width: 62ch; }
:lang(en) .story { line-height: 1.7; }
.sig { margin: 26px 0 0; padding: 4px 18px; border-inline-start: 3px solid var(--gm-accent); font-size: 18.5px; font-weight: 700; max-width: 40ch; }
.pils { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
@media (max-width: 760px) { .pils { grid-template-columns: 1fr; } }
.pil { background: var(--gm-surface); border: 1px solid var(--gm-line); border-radius: var(--gm-radius-md); padding: 14px 16px; }
.pil b { display: block; font-size: 15.5px; }
.pil span { font-size: 13.5px; color: var(--gm-muted); }
/* contact: one quiet list */
.contact { list-style: none; margin: 0; padding: 6px 0; max-width: 760px; }
.ci { display: grid; grid-template-columns: 170px 1fr auto; gap: 14px; align-items: center; padding: 14px 20px; }
.ci + .ci { border-top: 1px solid var(--gm-line); }
@media (max-width: 600px) { .ci { padding: 14px 16px; } .ci { grid-template-columns: 1fr auto; } .ci a { grid-column: 1 / -1; grid-row: 2; } }
.ci-k { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gm-muted); }
.bi { width: 18px; height: 18px; fill: currentColor; flex: none; }
.ci-k .bi { width: 20px; height: 20px; color: var(--gm-text); }
.gm-btn .bi { width: 16px; height: 16px; }
.ci a { font-family: var(--gm-font-mono); font-size: 14.5px; color: var(--gm-text); text-decoration: none; overflow-wrap: anywhere; text-align: start; }
:root[dir="rtl"] .ci a { text-align: right; }
.ci a:hover { color: var(--gm-accent); }
.copy { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600;
border: 1px solid var(--gm-line); background: var(--gm-bg); color: var(--gm-muted);
border-radius: var(--gm-radius-pill); padding: 4px 11px; cursor: pointer; }
.copy .bi { width: 13px; height: 13px; }
.copy:hover { color: var(--gm-text); }
.copy.done { color: var(--gm-signal); border-color: var(--gm-signal); }
/* footer */
.foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
margin-top: clamp(64px, 10vw, 120px); padding-block: 24px 40px; border-top: 1px solid var(--gm-line); }
/* ---- hero art: mark + product family on two orbits (wide screens only) ---- */
.hero-home { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; }
.orbit { position: relative; width: clamp(340px, 36vw, 440px); aspect-ratio: 1; }
@media (max-width: 960px) { .hero-home { grid-template-columns: 1fr; } .orbit { display: none; } }
.orbit::before { content: ""; position: absolute; inset: 12%; border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--gm-accent) 16%, transparent) 0%, transparent 70%); }
.orb-ring { position: absolute; border-radius: 50%; border: 1px solid var(--gm-line); }
.orb-ring.r1 { inset: 19.5%; }
.orb-ring.r2 { inset: 5.5%; border-style: dashed; }
.orb-core { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%);
border-radius: var(--gm-radius-mark); box-shadow: 0 18px 40px color-mix(in srgb, var(--gm-mark-bg) 35%, transparent); }
.orb-core svg, .orb-i svg { display: block; width: 100%; height: 100%; }
.orb-i { position: absolute; width: 13%; aspect-ratio: 1; margin: -6.5% 0 0 -6.5%; border-radius: var(--gm-radius-mark);
box-shadow: 0 8px 20px rgba(0, 0, 0, .14); }
.orb-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--gm-signal); opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
.orb-i { animation: orb-float 7s var(--gm-ease) infinite alternate; animation-delay: var(--d, 0s); }
.orb-ring.r2 { animation: orb-spin 120s linear infinite; }
@keyframes orb-float { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
@keyframes orb-spin { to { transform: rotate(360deg); } }
}
.feat-f { margin-top: 8px; }
.gm-btn .bi { width: 16px; height: 16px; }
/* ---- command palette (also the mobile menu) ---- */
.pal { width: min(560px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 24px)); margin: 12vh auto auto; padding: 0;
border: 1px solid var(--gm-line); border-radius: var(--gm-radius-xl); background: var(--gm-surface); color: var(--gm-text);
box-shadow: 0 24px 64px rgba(0, 0, 0, .22); overflow: hidden; }
.pal[open] { display: flex; flex-direction: column; }
.pal::backdrop { background: rgba(14, 18, 23, .38); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@media (prefers-reduced-motion: no-preference) {
.pal[open] { animation: pal-in var(--gm-time-ui) var(--gm-ease); }
@keyframes pal-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
}
.pal-q { display: flex; align-items: center; gap: 10px; padding: 6px 8px; padding-inline-start: 18px; border-bottom: 1px solid var(--gm-line); }
.pal-q > .bi { color: var(--gm-muted); }
.pal-q input { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; color: var(--gm-text);
font: inherit; font-size: 17px; }
.pal-x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer;
background: transparent; color: var(--gm-muted); }
.pal-x:hover { background: var(--gm-chip); color: var(--gm-text); }
.pal-l { overflow-y: auto; padding: 6px 8px 8px; overscroll-behavior: contain; }
.pal-g { margin: 10px 10px 4px; font-size: 12px; font-weight: 700; color: var(--gm-muted); }
.pal-i { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--gm-radius-sm);
background: transparent; color: var(--gm-text); font: inherit; font-size: 15px; text-align: start; text-decoration: none; cursor: pointer; }
.pal-i .bi { width: 17px; height: 17px; color: var(--gm-muted); }
.pal-i:hover, .pal-i.on { background: var(--gm-chip); }
.pal-i.on .bi { color: var(--gm-accent); }
.pal-i[hidden], .pal-g[hidden] { display: none; }
.pal-empty { margin: 0; padding: 18px 20px; color: var(--gm-muted); }
.pal-keys { margin: 0; padding: 10px 18px; border-top: 1px solid var(--gm-line); font-size: 12px; color: var(--gm-muted); }
@media (max-width: 760px) {
.pal { margin: 8px auto auto; max-height: calc(100dvh - 16px); width: calc(100vw - 16px); }
.pal-keys { display: none; }
.pal-i { min-height: 48px; font-size: 16px; }
}
/* ---- case study ---- */
.case-hero { padding-block: clamp(36px, 7vw, 72px) 0; }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gm-muted); text-decoration: none; margin-bottom: 26px; }
.back:hover { color: var(--gm-text); }
.kicker { margin: 0 0 10px; font-family: var(--gm-font-mono); font-size: 12.5px; color: var(--gm-signal); }
:lang(fa) .kicker { font-family: var(--gm-font); font-weight: 700; font-size: 14px; }
.case-h1 { font-size: clamp(30px, 5.6vw, 58px); font-weight: 900; line-height: 1.25; margin: 0; max-width: 20ch; text-wrap: balance; }
:lang(en) .case-h1 { line-height: 1.1; }
.hero .case-sum { max-width: 34ch; font-size: clamp(18px, 2.4vw, 24px); }
@media (max-width: 719px) { .hero .case-sum { max-width: none; } }
.case-scope { margin-top: 18px; }
.nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.nums li { display: grid; gap: 4px; align-content: start; padding: 18px 20px; background: var(--gm-surface); border: 1px solid var(--gm-line); border-radius: var(--gm-radius-lg); }
.nums b { font-size: clamp(30px, 4vw, 42px); font-weight: 900; line-height: 1.1; color: var(--gm-accent); letter-spacing: -.02em; }
.nums span { font-size: 14px; color: var(--gm-muted); }
@media (max-width: 420px) { .nums { grid-template-columns: 1fr 1fr; gap: 10px; } .nums li { padding: 14px 16px; } }
.js-only { display: none; }
.js .js-only { display: inline; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; counter-reset: s; }
.step { display: grid; gap: 6px; align-content: start; width: 100%; height: 100%; padding: 16px 18px; text-align: start; cursor: pointer;
font: inherit; color: var(--gm-text); background: var(--gm-surface); border: 1px solid var(--gm-line); border-radius: var(--gm-radius-lg);
transition: border-color var(--gm-time-hover) var(--gm-ease), opacity var(--gm-time-ui) var(--gm-ease); }
.step:hover { border-color: color-mix(in srgb, var(--gm-accent) 45%, var(--gm-line)); }
.step-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gm-chip);
font-size: 13px; font-weight: 800; color: var(--gm-accent); }
.step b { font-size: 16.5px; }
.step-d { font-size: 14px; line-height: 1.75; color: var(--gm-muted); }
:lang(en) .step-d { line-height: 1.55; }
.step-a { font-family: var(--gm-font-mono); font-size: 11.5px; color: var(--gm-muted); text-align: left; overflow-wrap: anywhere; }
:root[dir="rtl"] .step-a { text-align: right; }
.step[aria-pressed="true"], .step.lit { border-color: var(--gm-accent); box-shadow: inset 0 0 0 1px var(--gm-accent); }
.step[aria-pressed="true"] .step-n, .step.lit .step-n { background: var(--gm-accent); color: var(--gm-on-accent); }
.flow.focus .step:not(.lit) { opacity: .45; }
.always { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.amap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 760px) { .amap { grid-template-columns: 1fr; } }
.grp { background: var(--gm-surface); border: 1px solid var(--gm-line); border-radius: var(--gm-radius-lg); padding: 16px; }
.grp h3 { margin: 2px 6px 10px; font-size: 15px; }
.grp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.grp-core { border-top: 3px solid var(--gm-accent); }
.app { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: baseline; width: 100%; padding: 8px 10px;
border: 1px solid transparent; border-radius: var(--gm-radius-sm); background: transparent; color: var(--gm-text);
font: inherit; font-size: 14px; text-align: start; cursor: pointer;
transition: background var(--gm-time-hover) var(--gm-ease), opacity var(--gm-time-ui) var(--gm-ease); }
.app:hover { background: var(--gm-chip); }
.app code { font-family: var(--gm-font-mono); font-size: 12.5px; color: var(--gm-accent); text-align: left; }
:root[dir="rtl"] .app code { text-align: right; }
.app span { color: var(--gm-muted); line-height: 1.6; }
@media (max-width: 400px) { .app { grid-template-columns: 1fr; gap: 2px; } }
.app.lit { background: color-mix(in srgb, var(--gm-accent) 12%, transparent); border-color: color-mix(in srgb, var(--gm-accent) 40%, transparent); }
.app.lit span { color: var(--gm-text); }
.amap.focus .app:not(.lit) { opacity: .4; }
.feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .feats { grid-template-columns: 1fr; } }
.feats li { padding: 18px 20px; }
.feats h3 { margin: 0 0 6px; font-size: 16px; }
.feats p { margin: 0; font-size: 15px; line-height: 1.85; color: var(--gm-muted); }
:lang(en) .feats p { line-height: 1.6; }
.privacy { margin: 28px 0 0; font-size: 14px; padding-inline-start: 14px; border-inline-start: 3px solid var(--gm-line); max-width: 70ch; }
.case-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(22px, 4vw, 36px); }
.case-cta h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 4px; }
.case-cta p { margin: 0; }
/* ---- 404 ---- */
.nf { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-block: 48px; max-width: 640px; }
.nf .brand { font-size: 24px; margin-bottom: 8px; }
.nf-term { padding: 18px 20px; border: 1px solid var(--gm-line); border-radius: var(--gm-radius-lg); background: var(--gm-surface);
font-family: var(--gm-font-mono); font-size: 14px; line-height: 1.9; text-align: left; overflow-wrap: anywhere; }
.nf-term p { margin: 0; }
.nf-term .gm-prompt { color: var(--gm-signal); }
.nf-term .gm-cursor { height: 1em; vertical-align: -2px; }
.nf-err { color: var(--gm-danger); }
.nf-b h1 { margin: 0; font-size: clamp(26px, 5vw, 36px); font-weight: 900; }
.nf-b p { margin: 6px 0 0; }
.nf .cta { margin-top: 4px; }
/* ---- print: a clean one-colour copy of the page ---- */
.print-only { display: none; }
@media print {
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
--gm-bg: #fff; --gm-surface: #fff; --gm-text: #1A1D22; --gm-muted: #4A4F56; --gm-line: #D6D6D0; --gm-chip: #F0F0EB;
--gm-accent: #1F3A5F; --gm-on-accent: #fff; --gm-signal: #2F7A55;
}
@page { margin: 14mm 12mm; }
html { scroll-behavior: auto; }
body { background: #fff; font-size: 12pt; }
.top, .pal, .copy, .kbtn, .hero .cta, .feat-f, .case-cta .gm-btn, .hero-term, .back, .js-only, #resume, .gm-sign { display: none !important; }
.print-only { display: inline; }
.hero { padding-block: 0 8mm; }
.hero h1 { font-size: 30pt; }
.sec { padding-block: 8mm 0; }
.prod-shot .shot-dark { display: none !important; } .prod-shot .shot-light { display: block !important; }
.gm-card, .prod, .pil, .nums li, .step, .grp, .feats li, .tools2 > div { box-shadow: none !important; break-inside: avoid; }
.step, .app { opacity: 1 !important; }
.grid { grid-template-columns: 1fr 1fr; }
.about { grid-template-columns: 110px 1fr; }
.portrait { width: 110px; height: 110px; }
a { color: inherit; }
.foot { margin-top: 10mm; padding-block: 4mm 0; }
}