چیت‌شیت CSS

1body {2  font-family: Inter, Arial, sans-serif;3  font-size: 1rem;4  font-weight: 400;5  line-height: 1.6;6}

1.page-title {2  text-align: center;3  text-transform: uppercase;4  letter-spacing: 0.04em;5}6.article-copy { text-align: start; }

1:root {2  --brand: rebeccapurple;3  --brand-hex: #663399;4  --brand-rgb: rgb(102 51 153);5  --brand-soft: hsl(270 50% 40% / 18%);6}7.badge { background: var(--brand-soft); }

1.hero {2  background:3    linear-gradient(rgb(15 23 42 / 65%), transparent),4    url("/images/hero.jpg") center / cover no-repeat;5}

1.page-title {2  font-size: clamp(2rem, 5vw, 4rem);3  font-weight: 800;4  line-height: 1.1;5}

1*,2*::before,3*::after {4  box-sizing: border-box;5}67.panel {8  width: 20rem;9  padding: 1rem;10  border: 1px solid #cbd5e1;11}

1.card {2  margin-block: 1rem;3  padding-inline: 1.25rem;4  padding-block: 1rem;5}

1.card { position: relative; }2.card__badge {3  position: absolute;4  inset-block-start: 0.75rem;5  inset-inline-end: 0.75rem;6  z-index: 1;7}

1.scroll-region {2  max-block-size: 20rem;3  overflow: auto;4}56html { scroll-behavior: smooth; }

1.article {2  width: min(100% - 2rem, 72rem);3  margin-inline: auto;4}5.article p { max-width: 68ch; }

1@keyframes fade-in {2  from { opacity: 0; transform: translateY(0.5rem); }3  to { opacity: 1; transform: translateY(0); }4}56.notice {7  animation: fade-in 300ms ease-out both;8}

1.loader {2  animation-name: spin;3  animation-duration: 800ms;4  animation-timing-function: linear;5  animation-iteration-count: infinite;6}

1@media (prefers-reduced-motion: reduce) {2  *,3  *::before,4  *::after {5    scroll-behavior: auto !important;6    animation-duration: 0.01ms !important;7    animation-iteration-count: 1 !important;8    transition-duration: 0.01ms !important;9  }10}

1.toolbar {2  display: flex;3  align-items: center;4  justify-content: space-between;5  gap: 1rem;6}

1.tag-list {2  display: flex;3  flex-flow: row wrap;4  align-content: flex-start;5  gap: 0.5rem;6}

1.centered {2  display: flex;3  align-items: center;4  justify-content: center;5  min-block-size: 12rem;6}

1.layout { display: flex; gap: 1rem; }2.layout__main { flex: 1 1 auto; min-width: 0; }3.layout__sidebar { flex: 0 0 16rem; }

1.app {2  display: flex;3  flex-direction: column;4  min-height: 100vh;5}6.app__content { flex: 1; }

1.card-grid {2  display: grid;3  grid-template-columns: repeat(4    auto-fit,5    minmax(min(100%, 16rem), 1fr)6  );7  gap: 1rem;8}

1.dashboard {2  display: grid;3  grid-template-columns: 14rem 1fr;4  grid-template-areas: "nav main";5  gap: 1.25rem;6}7.dashboard__main { grid-area: main; }

1.grid {2  display: grid;3  grid-template-columns: repeat(3, minmax(0, 1fr));4  justify-items: stretch;5  align-items: center;6  gap: 1rem 1.5rem;7}

1:root { --brand-color: #0f766e; }2.button {3  color: var(--button-text, white);4  background: var(--brand-color);5}

1.chapters { counter-reset: chapter; }2.chapters h2 { counter-increment: chapter; }3.chapters h2::before {4  content: "بخش " counter(chapter) " — ";5}