Здесь делается вжух 🪄

настройки
Шрифт в постах
      [НОВОСТИ ТУТ] #БАРГЕСТ ПРОТИВ ВУДУИСТОВ пвп или зассал? #МЭРИЯ ТЕСТИРУЕТ ВНЕДРЕНИЕ ИИ В ГОРОДСКИЕ СИСТЕМЫ УПРАВЛЕНИЯ ебанёт? не должно!
      гостевая внешности правила сюжет нужные связь c амс оформление профиля
      киберпанкэпизодыанархия
      Loco
      D'Nash
      все под колпаком

      Приближение Макс-така она засекает через ответный пинг антенны радиосвязи. Кушинада пробирается вдоль антенны вдвое осторожней, держится подальше от частот аэрокара карателей. Она ищет выход на ближайший коммлинк чтобы в обход локдауна маякнуть Фалько. То ли "сможешь подобрать меня через полчаса?" то ли завещание и некролог в одном небольшом пакете нулей и единиц. И хотя сами системы Макс-така лучше оставить в покое, Люцина возвращается к внутренним камерам. Следит за синхронными движениями карателей, ловит дергающуюся сигнатуру киберпсиха — хороший нетраннер жив только благодаря сочетанию инстинкта самосохраненния с патологическим любопытством.

      Lucyna Kushinada / (moon) dust to dust
      в спотлайте
      звездный дуэт
      агент нео-советов в шкуре корпората
      ёринобу арасака
      японский гопник
      01.12спотлайт 01.12 игрыпазлы 01.12 игрыфоточеллендж 01.12 игрытоп 28.10 // лорРеклама в Киберпанке 02.11 // лорБорги, ч.3 хэдканон-челленджпро наших персонажей
      прокрутка поколесиком мыши

      datasprawl

      Информация о пользователе

      Привет, Гость! Войдите или зарегистрируйтесь.

      Вы здесь » datasprawl » Тестовый форум » примерочная

      примерочная

      Страница: 1

      Сообщений 1 страница 4 из 4

      1

      • Автор: root
      • Администратор
      • Зарегистрирован: 2025-11-22
      • Приглашений: 0
      • Сообщений: 27
      • Уважение: [+0/-0]
      • Позитив: [+0/-0]
      • Провел на форуме:
        11 часов 7 минут
      • Последний визит:
        Сегодня 01:11:55

      СТАНДАРТНАЯ ГРАФИКА

      Если вы хотите поставить иконку или хедер, но не желаете сами искать графику, предлагаем воспользоваться готовыми вариантами.
      [indent]✱ Представленные здесь варианты не одноразовые и могут повторяться у игроков;
      [indent]✱ Купить стандартную и заказать индивидуальную графику можно в банке;
      [indent]✱ Если заказываете фоны плашек, обращайте внимание на то, чтобы изображение не было излишне светлым - текст плашки белый, и на слишком светлом фоне может потеряться;
      [indent]✱ размеры:
      [indent][indent]> иконки: 24х24px
      [indent][indent]> фоны профиля: 210х300px
      [indent][indent]> фоны плашек: 210х40px

      Код:
      <!--HTML-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Customization</title>
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">

  <style>
    /* ================================================
       Scoped Styles (Encapsulating the Module)
    ================================================ */
    .ProfileKit {
      --background-profileKit-card: rgba(21, 21, 21, 0.9); /* Slightly lighter profileKit-card background */
      --background-hover: rgba(32, 32, 32, 0.9); /* Subtle hover background */
      --color-accent: #5c8b30; /* Green for titles and emphasis */
      --color-hover: #7a3eb1; /* Purple hover effects */
      --color-divider-dark: rgba(136, 136, 136, 0.5); /* Divider for dark pk-backgrounds */
      --font-primary: 'IBM Plex Mono', monospace;
      --font-title: 'IBM Plex Mono', 'Orbitron', monospace;
      --spacing-small: 5px;
      --spacing-medium: 10px;
      --spacing-large: 20px;
      --radius-small: 4px;
      --radius-large: 12px;
    }

    .ProfileKit * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .ProfileKit .ProfileKit-container {
      width: 100%;
      max-width: 1200px;
      margin: var(--spacing-medium) auto;
      padding: var(--spacing-medium);
      display: flex;
      flex-direction: column;
      gap: var(--spacing-large);
    }


    /* ================================================
       Section Titles
    ================================================ */
    .ProfileKit .title {
      font-family: var(--font-primary);
      font-size: 16px;
      color: var(--color-accent);
      text-align: left;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: var(--spacing-medium);
      padding: var(--spacing-small);
      border-radius: var(--radius-small);
    }

    .ProfileKit .title::after {
      content: '';
      display: block;
      margin-top: var(--spacing-small);
      width: 100%;
      border-bottom: 1px dashed var(--color-divider-dark);
    }

    /* ================================================
       Grid Layout
    ================================================ */
    .ProfileKit .grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: var(--spacing-small);
    }

    .ProfileKit .grid-large .profileKit-card {
      width: 180px;
      height: auto;
    }

    /* ================================================
       profileKit-card Design
    ================================================ */
    .ProfileKit .profileKit-card {
      background: var(--background-profileKit-card);
      border: 1px solid var(--color-divider-dark);
      border-radius: var(--radius-small);
      padding: var(--spacing-small);
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    }

    .ProfileKit #pk-icons .profileKit-card img {
      max-width: 32px;
      height: auto;
    }
    
    .ProfileKit #pk-icons .profileKit-card img:hover {
      transform: scale(1.2);
    }

    .ProfileKit .profileKit-card:hover {
      background: var(--background-hover);
      box-shadow: 0px 0px 12px var(--color-hover);
    }

    .ProfileKit .profileKit-card img {
      width: 100%;
      height: auto;
      border-radius: var(--radius-small);
      transition: transform 0.3s ease;
    }

    .ProfileKit .profileKit-card img:hover {
      transform: scale(1.07);
    }

    .ProfileKit .profileKit-card-title {
      font-family: var(--font-primary);
      font-size: 12px;
      color: var(--color-accent);
      text-align: center;
      margin-top: var(--spacing-small);
      text-transform: lowercase;
    }

    /* ================================================
       Responsive Design
    ================================================ */
    @media (max-width: 768px) {
      .ProfileKit .profileKit-card img:hover {
        transform: scale(1.03);
      }
    }

    @media (max-width: 480px) {
      .ProfileKit .profileKit-card {
        transform: scale(0.9);
      }
      

    }
  </style>
</head>

<body>
  <div class="ProfileKit">
    <div class="header-description-wrapper">

  <div class="ProfileKit-container">
    <!-- pk-icons Section -->
    <div id="pk-icons">
      <div class="title">Иконки: базовая коллекция</div>
      <div class="grid">
      <!-- Row 1 -->
      <div class="profileKit-card">
        <img src="https://i.imgur.com/9xDG0nZ.png" alt="tech">
        <div class="profileKit-card-title">tech</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/PTEXeJv.png" alt="body">
        <div class="profileKit-card-title">body</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/c9P34Nb.png" alt="int">
        <div class="profileKit-card-title">int</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/DEgaNL9.png" alt="cool">
        <div class="profileKit-card-title">cool</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/T1EinKB.png" alt="ref">
        <div class="profileKit-card-title">ref</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/u5Ke270.png" alt="relic">
        <div class="profileKit-card-title">rel</div>
      </div>
      <!-- Row 2 -->
      <div class="profileKit-card">
        <img src="https://i.imgur.com/sUAprSq.png" alt="arasaka">
        <div class="profileKit-card-title">saka</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/dMGtgYr.png" alt="militech">
        <div class="profileKit-card-title">mltc</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/8mEV242.png" alt="petrochem">
        <div class="profileKit-card-title">petr</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/RwyvAl9.png" alt="traumateam">
        <div class="profileKit-card-title">t-t</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/MZKEyhL.png" alt="samurai">
        <div class="profileKit-card-title">oni</div>
      </div>

      <!-- Row 3 -->
      <div class="profileKit-card">
        <img src="https://i.imgur.com/eIdRTCt.png" alt="valentinos">
        <div class="profileKit-card-title">v's</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/4iNFaTz.png" alt="tygers">
        <div class="profileKit-card-title">tgrs</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/ggnwZUb.png" alt="barghest">
        <div class="profileKit-card-title">dogs</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/PLtlAOU.png" alt="maelstrom">
        <div class="profileKit-card-title">mael</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/VRQxj9E.png" alt="mox">
        <div class="profileKit-card-title">mox</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/F465g9n.png" alt="voodoo">
        <div class="profileKit-card-title">vdb</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/3YaBtij.png" alt="edgerunners">
        <div class="profileKit-card-title">er</div>
      </div>
      <div class="profileKit-card">
        <img src="https://i.imgur.com/zDJkJ4L.png" alt="skippy">
        <div class="profileKit-card-title">skp</div>
      </div>
      </div>
    </div>

    <!-- Profile pk-backgrounds Section -->
    <div id="pk-backgrounds">
      <div class="title">Фоны профиля: базовая коллекция</div>
      <div class="grid grid-large">
        <div class="profileKit-card">
          <img src="https://i.imgur.com/AC3xLZa.png" alt="LENS FLARE">
          <div class="profileKit-card-title">lens flare</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/go9qI4f.png" alt="CITY LIGHTS">
          <div class="profileKit-card-title">city lights</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/grxzFJL.png" alt="CLUBBIN">
          <div class="profileKit-card-title">clubbin</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/pclbyhO.png" alt="GRAFFITI">
          <div class="profileKit-card-title">GRAFFITI</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/liVTmSP.png" alt="AURORA">
          <div class="profileKit-card-title">AURORA</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/nU9rSAd.png" alt="GLITCH">
          <div class="profileKit-card-title">GLITCH</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/XP577bW.png" alt="MEGABUILDING">
          <div class="profileKit-card-title">MEGABUILDING</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/VuwSYlW.png" alt="GASOLINE">
          <div class="profileKit-card-title">GASOLINE</div>
        </div>
      </div>
    </div>

    <!-- pk-plaques Section -->
    <div id="pk-plaques">
      <div class="title">Фоны плашки: базовая коллекция</div>
      <div class="grid grid-large">
        <div class="profileKit-card">
          <img src="https://i.imgur.com/NPBtJyr.gif" alt="SPACE">
          <div class="profileKit-card-title">space</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/24m6X4W.gif" alt="GLITCH">
          <div class="profileKit-card-title">glitch</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/h3hrbSu.gif" alt="CHROMATIC">
          <div class="profileKit-card-title">chromatic</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/wyAIAQd.gif" alt="CRASH">
          <div class="profileKit-card-title">CRASH</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/fgeuN30.gif" alt="ELETAPE">
          <div class="profileKit-card-title">ELETAPE</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/Gt0iF17.gif" alt="NEUROPLASTICITY">
          <div class="profileKit-card-title">NEUROPLASTICITY</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/JyEcKZh.gif" alt="TINDERS">
          <div class="profileKit-card-title">TINDERS</div>
        </div>
        <div class="profileKit-card">
          <img src="https://i.imgur.com/AQriuZP.gif" alt="HELLFIRE">
          <div class="profileKit-card-title">HELLFIRE</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

      0

      2

      • Автор: root
      • Администратор
      • Зарегистрирован: 2025-11-22
      • Приглашений: 0
      • Сообщений: 27
      • Уважение: [+0/-0]
      • Позитив: [+0/-0]
      • Провел на форуме:
        11 часов 7 минут
      • Последний визит:
        Сегодня 01:11:55

      HALLOWEEN '25

      > за участие в интерактивных тыквенноспасовых развлечениях 2025-го

      Код:
      <!--HTML-->
  <div class="ProfileKit">
    <div class="header-description-wrapper">

  <div class="ProfileKit-container">
    <!-- pk-icons Section -->
    <div id="pk-icons">
      <div class="title">Иконки:</div>
      <div class="grid">
      <!-- Row 1 -->
      <div class="profileKit-card">
        <img src="https://i.imgur.com/FIwlYeu.png" alt="cyberpsycho_1">
        <div class="profileKit-card-title">cyberpsycho_1</div>
      </div>
      </div>
    </div>

    <!-- Profile pk-backgrounds Section -->
    <div id="pk-backgrounds">
      <div class="title">Фоны профиля:</div>
      <div class="grid grid-large">
        <div class="profileKit-card">
          <img src="https://i.imgur.com/p039Zhx.png" alt="cyberpsycho_2">
          <div class="profileKit-card-title">cyberpsycho_2</div>
        </div>
      </div>
    </div>

    <!-- pk-plaques Section -->
    <div id="pk-plaques">
      <div class="title">Фоны плашки:</div>
      <div class="grid grid-large">
        <div class="profileKit-card">
          <img src="https://i.imgur.com/LY4ilvk.gif" alt="cyberpsycho_3">
          <div class="profileKit-card-title">cyberpsycho_3</div>
        </div>
      </div>
    </div>
  </div>

      [nick]hex.exe[/nick][icon]https://upforme.ru/uploads/001c/1a/06/2/216330.gif[/icon][lz]<a href="https://future404.ru" class="lz1">hex.exe</a><div class="lz2">S0M3TH1NG W1CK3D TH1S W4Y C0M3S</div>[/lz]

      0

      3

      • Автор: root
      • Администратор
      • Зарегистрирован: 2025-11-22
      • Приглашений: 0
      • Сообщений: 27
      • Уважение: [+0/-0]
      • Позитив: [+0/-0]
      • Провел на форуме:
        11 часов 7 минут
      • Последний визит:
        Сегодня 01:11:55

      https://upforme.ru/uploads/001c/98/42/2/331657.png https://upforme.ru/uploads/001c/98/42/2/928253.png https://upforme.ru/uploads/001c/98/42/2/277088.png
      https://upforme.ru/uploads/001c/98/42/2/231943.png https://upforme.ru/uploads/001c/98/42/2/725147.png https://upforme.ru/uploads/001c/98/42/2/238980.png
      https://upforme.ru/uploads/001c/98/42/2/10243.png https://upforme.ru/uploads/001c/98/42/2/906973.png https://upforme.ru/uploads/001c/98/42/2/674472.png
      https://upforme.ru/uploads/001c/98/42/2/203248.png https://upforme.ru/uploads/001c/98/42/2/893306.png https://upforme.ru/uploads/001c/98/42/2/286136.png
      https://upforme.ru/uploads/001c/98/42/2/614346.png https://upforme.ru/uploads/001c/98/42/2/374523.png https://upforme.ru/uploads/001c/98/42/2/920551.png
      https://upforme.ru/uploads/001c/98/42/2/142570.png https://upforme.ru/uploads/001c/98/42/2/935133.png https://upforme.ru/uploads/001c/98/42/2/226506.png
      https://upforme.ru/uploads/001c/98/42/2/46864.png https://upforme.ru/uploads/001c/98/42/2/501053.png https://upforme.ru/uploads/001c/98/42/2/742988.png

      0

      4

      • Автор: root
      • Администратор
      • Зарегистрирован: 2025-11-22
      • Приглашений: 0
      • Сообщений: 27
      • Уважение: [+0/-0]
      • Позитив: [+0/-0]
      • Провел на форуме:
        11 часов 7 минут
      • Последний визит:
        Сегодня 01:11:55
      Код:
      <!--HTML-->
<div class="cyberpunk-display">
   <div class="cyberpunk-container">

    <!-- Cyber Toys Section -->
    <div class="cyber-section">
      <div class="cyber-button i_active">Киберигрушки <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: block;">
        <div class="cyber-grid">
            <!-- Card 1 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/629438.webp" alt="cyber-toy-1">
               </div>
               <div class="cyber-card-title">Шар 1</div>
            </div>

            <!-- Card 2 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/21322.webp" alt="cyber-toy-2">
               </div>
               <div class="cyber-card-title">Шар 2</div>
            </div>

            <!-- Card 3 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/793443.webp" alt="cyber-toy-3">
               </div>
               <div class="cyber-card-title">Шар 3</div>
            </div>

            <!-- Card 4 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/880561.webp" alt="cyber-toy-4">
               </div>
               <div class="cyber-card-title">Шар 4</div>
            </div>

            <!-- Card 5 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/406707.webp" alt="cyber-toy-5">
               </div>
               <div class="cyber-card-title">Шар 5</div>
            </div>

            <!-- Card 6 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/754796.webp" alt="cyber-toy-6">
               </div>
               <div class="cyber-card-title">Шар 6</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/529505.webp" alt="cyber-toy-7">
               </div>
               <div class="cyber-card-title">Шар 7</div>
            </div>

            <!-- Card 8 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/40022.webp" alt="cyber-toy-8">
               </div>
               <div class="cyber-card-title">Шар 8</div>
            </div>

            <!-- Card 9 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/955053.webp" alt="cyber-toy-9">
               </div>
               <div class="cyber-card-title">Шар 9</div>
            </div>

            <!-- Card 10 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/636071.webp" alt="cyber-toy-10">
               </div>
               <div class="cyber-card-title">Шар 10</div>
            </div>

            <!-- Card 11 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/640147.webp" alt="cyber-toy-11">
               </div>
               <div class="cyber-card-title">Шар 11</div>
            </div>

            <!-- Card 12 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/27745.webp" alt="cyber-toy-12">
               </div>
               <div class="cyber-card-title">Шар 12</div>
            </div>

            <!-- Card 13 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/958430.webp" alt="cyber-toy-13">
               </div>
               <div class="cyber-card-title">Шар 13</div>
            </div>

            <!-- Card 14 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/467899.webp" alt="cyber-toy-14">
               </div>
               <div class="cyber-card-title">Шар 14</div>
            </div>

            <!-- Card 15 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/389246.webp" alt="cyber-toy-15">
               </div>
               <div class="cyber-card-title">Шар 15</div>
            </div>

            <!-- Card 16 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/745679.webp" alt="cyber-toy-16">
               </div>
               <div class="cyber-card-title">Шар 16</div>
            </div>

            <!-- Card 17 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/119644.webp" alt="cyber-toy-17">
               </div>
               <div class="cyber-card-title">Шар 17</div>
            </div>

            <!-- Card 18 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/13807.webp" alt="cyber-toy-18">
               </div>
               <div class="cyber-card-title">Шар 18</div>
            </div>

            <!-- Card 19 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/95737.webp" alt="cyber-toy-19">
               </div>
               <div class="cyber-card-title">Шар 19</div>
            </div>

            <!-- Card 20 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/972087.webp" alt="cyber-toy-20">
               </div>
               <div class="cyber-card-title">Шар </div>
            </div>

            <!-- Card 21 -->
            <div class="cyber-card toy-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/907558.webp" alt="cyber-toy-21">
               </div>
               <div class="cyber-card-title">Шар 21</div>
            </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>

    <!-- Cyber Decorations Section -->
    <div class="cyber-section">
      <div class="cyber-button">Украшения для стола и Нибблз <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
        <div class="cyber-grid">
            <!-- Card 1 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/314586.webp" alt="champaradise">
               </div>
               <div class="cyber-card-title">Шампарадайс</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Глотни заряд блаженства.</div>
            </div>

            <!-- Card 2 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/191350.webp" alt="сentzon-еotochtin">
               </div>
               <div class="cyber-card-title">Сенцон Тоточтин</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Текила, которой нет равных.</div>
            </div>

            <!-- Card 3 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/857309.webp" alt="ab-synth">
               </div>
               <div class="cyber-card-title">Аб-Синт</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Будь богемой.</div>
            </div>

            <!-- Card 4 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/846521.webp" alt="sake-utagawa">
               </div>
               <div class="cyber-card-title">Сакэ Утагава</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Идеальный подарок себе.</div>
            </div>

            <!-- Card 5 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/149402.webp" alt="romvlvs-gin">
               </div>
               <div class="cyber-card-title">Ромулус Джин</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Сделай глоток престижа.</div>
            </div>

            <!-- Card 6 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/760926.webp" alt="paul-night">
               </div>
               <div class="cyber-card-title">Пол Найт</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Любимый напиток художников и мечтателей.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/875284.webp" alt="chateau-delen-2012">
               </div>
               <div class="cyber-card-title">Шато Делен 2012</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Всего 200 бутылок. Завладей своей.</div>
            </div>

            <!-- Card 8 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/368756.webp" alt="calavera-feliz">
               </div>
               <div class="cyber-card-title">Калавера Фелиз</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Фиеста? Калавера.</div>
            </div>

            <!-- Card 9 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/988568.webp" alt="baalbek-arak">
               </div>
               <div class="cyber-card-title">Баальбек Арак</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Мы запечатали жар пустынного солнца в бутылки.</div>
            </div>

            <!-- Card 10 -->
            <div class="cyber-card decor-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/716470.webp" alt="armagnac-massy">
               </div>
               <div class="cyber-card-title">Арманьяк Месси</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Не пей - наслаждайся им.</div>
            </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>

    <!-- Cyber Decorations Section -->
    <div class="cyber-section">
      <div class="cyber-button">Коробки <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
        <div class="cyber-grid">
            <!-- Card 1 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/882397.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">Коробка 1</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Квадратная. Сбалансированная. Классика.</div>
            </div>

            <!-- Card 3 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/192237.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">Коробка 2</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Для любителей классики, распробовавших элегантность.</div>
            </div>

            <!-- Card 4 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/799466.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">Коробка 3</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Когда выпендреж - ваше все.</div>
            </div>

            <!-- Card 5 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/718754.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">Коробка 4</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Форма и содержание - соответствуют друг другу.</div>
            </div>

            <!-- Card 6 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/760043.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">Коробка 5</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Да, может быть, не самая аккуратная упаковка, зато от души!</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/977520.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">Коробка 6</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Вы можете подарить все, что хотите. Даже головы врагов! Вы... вы же не восприняли это как руководство к действию?</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/764287.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">Коробка 7</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Не голова. Или не та. Или не всему.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/788704.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">Коробка 8</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Для ценителей теплоты, уюта, хэндмейда и щепотки любви.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/596202.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">Коробка 9</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Классика, но другая.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/290411.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">Коробка 10</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Когда часы 12 бьют, а ты спешишь на праздник под тикающий таймер.</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/178922.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">Коробка 11</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">А это точно подарок??</div>
            </div>

            <!-- Card 7 -->
            <div class="cyber-card gift-card">
               <div class="cyber-image-wrapper">
                  <img src="https://upforme.ru/uploads/001c/98/42/2/612284.webp" alt="gift-wrap-1">
               </div>
               <div class="cyber-card-title">Коробка 12</div>
               <div class="cyber-expand-indicator"></div>
               <div class="cyber-card-description">Когда размер не имеет значения</div>
            </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>

    <!-- Cyber Gifts Section -->
    <div class="cyber-section">
      <div class="cyber-button">Обёртки <i class="select-mark"></i></div>
      <div class="cyber-content-wrap" style="display: none;">
        <div class="cyber-grid cyber-gift-wrap">
                  <!-- Card 1 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/331657.png" alt="gift-wrap-1">
                     </div>
                     <div class="cyber-card-title">Обёртка 1</div>
                  </div>

                  <!-- Card 2 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/928253.png" alt="gift-wrap-2">
                     </div>
                     <div class="cyber-card-title">Обёртка 2</div>
                  </div>

                  <!-- Card 3 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/277088.png" alt="gift-wrap-3">
                     </div>
                     <div class="cyber-card-title">Обёртка 3</div>
                  </div>

                  <!-- Card 4 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/231943.png" alt="gift-wrap-4">
                     </div>
                     <div class="cyber-card-title">Обёртка 4</div>
                  </div>

                  <!-- Card 5 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/725147.png" alt="gift-wrap-5">
                     </div>
                     <div class="cyber-card-title">Обёртка 5</div>
                  </div>

                  <!-- Card 6 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/238980.png" alt="gift-wrap-6">
                     </div>
                     <div class="cyber-card-title">Обёртка 6</div>
                  </div>

                  <!-- Card 7 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/10243.png" alt="gift-wrap-7">
                     </div>
                     <div class="cyber-card-title">Обёртка 7</div>
                  </div>

                  <!-- Card 8 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/906973.png" alt="gift-wrap-8">
                     </div>
                     <div class="cyber-card-title">Обёртка 8</div>
                  </div>

                  <!-- Card 9 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/674472.png" alt="gift-wrap-9">
                     </div>
                     <div class="cyber-card-title">Обёртка 9</div>
                  </div>

                  <!-- Card 10 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/203248.png" alt="gift-wrap-10">
                     </div>
                     <div class="cyber-card-title">Обёртка 10</div>
                  </div>

                  <!-- Card 11 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/893306.png" alt="gift-wrap-11">
                     </div>
                     <div class="cyber-card-title">Обёртка 11</div>
                  </div>

                  <!-- Card 12 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/286136.png" alt="gift-wrap-12">
                     </div>
                     <div class="cyber-card-title">Обёртка 12</div>
                  </div>

                  <!-- Card 13 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/614346.png" alt="gift-wrap-13">
                     </div>
                     <div class="cyber-card-title">Обёртка 13</div>
                  </div>

                  <!-- Card 14 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/374523.png" alt="gift-wrap-14">
                     </div>
                     <div class="cyber-card-title">Обёртка 14</div>
                  </div>

                  <!-- Card 15 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/920551.png" alt="gift-wrap-15">
                     </div>
                     <div class="cyber-card-title">Обёртка 15</div>
                  </div>

                  <!-- Card 16 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/142570.png" alt="gift-wrap-16">
                     </div>
                     <div class="cyber-card-title">Обёртка 16</div>
                  </div>

                  <!-- Card 17 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/935133.png" alt="gift-wrap-17">
                     </div>
                     <div class="cyber-card-title">Обёртка 17</div>
                  </div>

                  <!-- Card 18 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/226506.png" alt="gift-wrap-18">
                     </div>
                     <div class="cyber-card-title">Обёртка 18</div>
                  </div>

                  <!-- Card 19 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/46864.png" alt="gift-wrap-19">
                     </div>
                     <div class="cyber-card-title">Обёртка 19</div>
                  </div>

                  <!-- Card 20 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/501053.png" alt="gift-wrap-20">
                     </div>
                     <div class="cyber-card-title">Обёртка 20</div>
                  </div>

                  <!-- Card 21 -->
                  <div class="cyber-card gift-card">
                     <div class="cyber-image-wrapper">
                        <img src="https://upforme.ru/uploads/001c/98/42/2/742988.png" alt="gift-wrap-21">
                     </div>
                     <div class="cyber-card-title">Обёртка 21</div>
                  </div>
          <!-- More cards go here -->
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* ================================================
   Scoped Styles for Cyberpunk Display
=============================================== */
.cyberpunk-display {
  --background-card: rgba(19, 19, 22, 0.9); /* Dark background for cards */
  --background-hover: rgba(32, 32, 45, 0.9); /* Subtle hover background */
  --color-text: #f5f5f5; /* Light text for readability */
  --color-accent: #FFE81F; /* Cyberpunk yellow */
  --color-hover: #FF007E; /* Hot pink Neomancer */
  --color-border: rgba(255, 248, 31, 0.5); /* Faint yellow border */
  --font-primary: 'Orbitron', 'Roboto', monospace;
  --font-title: 'Orbitron', 'Roboto', monospace;
  --radius: 10px;
  --spacing-small: 5px;
  --spacing-medium: 10px;
  --spacing-large: 20px;
}

.cyberpunk-display * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cyberpunk-display .cyberpunk-container {
  width: 100%;
  max-width: 1200px;
  margin: var(--spacing-medium) auto;
  padding: var(--spacing-large);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}

/* ================================================
   Section Titles
=============================================== */
.cyberpunk-display .cyber-title {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  color: var(--color-hover);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--spacing-medium);
  border-bottom: 1px solid var(--color-hover);
}

/* ================================================
   Grid Layout
=============================================== */
.cyberpunk-display .cyber-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--spacing-medium);
}

/* ================================================
   Individual Cards
=============================================== */
.cyberpunk-display .cyber-card {
  position: relative;
  width: 120px;
  background: var(--background-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  padding: 1px;
    clip-path: polygon(0% 0%, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0% 90%); /* Применяем обрезание УГЛА только к обертке, а не к изображению */
}

/* Image Behavior */
.cyberpunk-display .cyber-image-wrapper {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cyberpunk-display .cyber-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease, z-index 0.3s ease;
  padding: 1px;
}

.cyberpunk-display .cyber-image-wrapper img:hover {
  transform: scale(1.1); /* Enlarges the image */
  filter: saturate(150%) brightness(110%);
  z-index: 10; /* Brings the image to the front */
  box-shadow: 0px 5px 8px -4px rgba(255, 255, 31, 0.8), 
              0px 8px 10px -4px rgba(255, 0, 126, 0.6); /* Подсветка только снизу */
}

/*оквадрачивание обёрток*/
#cyber-gifts .cyber-image-wrapper {
  width: 100%;
  height: 100px; /* Высота картинки равна высоте карточки */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Скрываем части изображения, которые выходят за пределы */
}

#cyber-gifts .cyber-image-wrapper img {
  width: 100%; /* Заполняет всю ширину доступного пространства */
  height: 100%; /* Заполняет всю высоту доступного пространства */
  object-fit: cover; /* Обрезает изображение, чтобы заполнить квадрат, сохраняя пропорции */
  transition: transform 0.3s ease; /* Добавляем плавное увеличение при наведении */
}

#cyber-gifts .cyber-image-wrapper img:hover {
  transform: scale(1.1); /* Увеличиваем изображение при наведении */
}

/* Hover Effect for Card */
.cyberpunk-display .cyber-card:hover {
  background: var(--background-hover);
  box-shadow: 0 0 16px 0 rgba(255, 255, 31, 0.6), 0px 0px 12px 0 var(--color-hover);
  transform: translateY(-3px);
}

/* Уникальный стиль для обёрток */
.cyberpunk-display .cyber-gift-wrap .cyber-image-wrapper {
  width: 100%;
  height: 120px; /* Пример высоты, можно заменить на любой фиксированный размер */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Скрываем выходящие за пределы части изображения */
  background-color: rgba(0, 0, 0, 0.7); /* Фон для случаев, когда изображение меньше контейнера */
}

.cyberpunk-display .cyber-gift-wrap .cyber-image-wrapper img {
  width: 100%; /* Заполняет ширину контейнера */
  height: 100%; /* Заполняет высоту контейнера */
  object-fit: cover; /* Обрезает изображение, чтобы заполнить контейнер без искажений */
  transition: transform 0.3s ease; /* Плавное увеличение при наведении */
}

.cyberpunk-display .cyber-gift-wrap .cyber-image-wrapper img:hover {
  transform: scale(1.1); /* Увеличение изображения при наведении */
}

/* Text Below Image */
.cyberpunk-display .cyber-card-title {
  font-family: var(--font-primary);
  font-size: 12px;
  color: var(--color-accent);
  background: rgba(0, 0, 0, 0.8);
  padding: var(--spacing-small);
  /*border-radius: var(--radius-small);*/
  margin-top: var(--spacing-small);
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;

  /* Эффект при наведении мышью на карточку */
  .cyber-card:hover & {
    color: var(--color-hover); /* Меняем цвет текста заголовка на розовый (hover) */
    transition: all 0.3s ease; /* Плавный переход */
  }
}

/* Expand indicator (triangle) */
.cyberpunk-display .cyber-expand-indicator {
  width: 0;
  height: 0;
  margin: 3px auto 3px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-accent); /* Yellow Triangle */
  transition: transform 0.3s ease;
}

/* Initially hide the description text */
.cyberpunk-display .cyber-card-description {
  opacity: 0; /* Скрываем текст */
  max-height: 0; /* Ограничиваем высоту */
  overflow: hidden;
  font-family: var(--font-primary);
  font-size: 10px;
  color: #aaaaaa;
  text-align: left;
  margin: 0 1em 0.25em;
  line-height: 1.4;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* Show the description on hover */
.cyberpunk-display .cyber-card:hover .cyber-card-description {
  opacity: 1; /* Показываем текст */
  max-height: 100px; /* Увеличиваем высоту для отображения текста */
}

.cyberpunk-display .cyber-card:hover .cyber-expand-indicator {
  transform: rotate(180deg); /* Flip the triangle to point upwards */
  margin-bottom: var(--spacing-small); /* Add spacing when hovered */
}

/* ================================================
   Сворачиваем разворачиваем
=============================================== */

.cyberpunk-display .cyber-section {
   margin-bottom: 0px; /* Расстояние между секциями */
}

.cyberpunk-display .cyber-button {
  cursor: pointer;
  background: rgba(19, 19, 22, 0.9); /* Фоновый цвет кнопок */
  color: #FFE81F; /* Цвет текста кнопки */
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  transition: all 0.3s ease;
}

.cyberpunk-display .cyber-button:hover {
  background: rgba(32, 32, 45, 0.9);
  color: #FF007E;
}

.cyberpunk-display .cyber-button.i_active {
  background: rgba(32, 32, 45, 0.9); /* Фон активной кнопки */
  color: #FF007E; /* Цвет текста активной кнопки */
  text-transform: uppercase;
}

.cyberpunk-display .cyber-content-wrap {
  display: none; /* Скрытые секции по умолчанию */
  background: rgba(19, 19, 22, 0.9); /* Фон секции */
  padding: 15px;
}

.cyberpunk-display .cyber-content-wrap .cyber-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cyberpunk-display .cyber-button .select-mark {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-accent); /* Yellow Triangle */
  transition: transform 0.3s ease;

}

.cyberpunk-display .cyber-button.i_active .select-mark {
  transform: rotate(-180deg); /* Индикатор разворота */
}

/* ================================================
   Responsive Design
=============================================== */
@media (max-width: 768px) {

.cyberpunk-display .cyber-card {
  width: 100px;
}

.cyberpunk-display .cyber-image-wrapper img:hover {
    box-shadow: none;
}

  .cyberpunk-display .cyber-card-title {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
.cyberpunk-display .cyber-card {
  width: 100px;
}

.cyberpunk-display .cyber-image-wrapper img:hover {
    box-shadow: none;
}

  .cyberpunk-display .cyber-card-title {
    font-size: 10px;
  }
}
</style>

<script>

  document.querySelectorAll('.cyber-button').forEach(button => {
    button.addEventListener('click', () => {
      const content = button.nextElementSibling;

      // Сворачиваем все открытые секции
      document.querySelectorAll('.cyber-content-wrap').forEach(otherContent => {
        if (otherContent !== content) {
          otherContent.style.display = 'none';
          otherContent.previousElementSibling.classList.remove('i_active');
        }
      });

      // Переключаем текущую секцию
      if (content.style.display === 'block') {
        content.style.display = 'none';
        button.classList.remove('i_active');
      } else {
        content.style.display = 'block';
        button.classList.add('i_active');
      }
    });
  });

</script>

      [hideprofile]

      0

      Страница: 1

      Вы здесь » datasprawl » Тестовый форум » примерочная

      Рейтинг форумов | Создать форум бесплатно