Ziyosfera:Aloqa/styles.css

/* ==========================================

  ЗИЙОСФЕРА — АЛОҚА САҲИФАСИ
  ========================================== */

.зиё-cонтаcт {

   мах-wидтҳ: 1050пх;
   маргин: 20пх ауто 50пх;
   фонт-фамилй: -аппле-сйстем, БлинкМаcСйстемФонт, "Сегоэ УИ", Ариал, санс-сериф;
   cолор: #202122;

}

/* ҲЕРО */

.зиё-cонтаcт-ҳеро {

   поситион: релативе;
   дисплай: флех;
   алигн-итемс: cентер;
   гап: 24пх;

   паддинг: 38пх 42пх;
   маргин-боттом: 24пх;

   оверфлоw: ҳидден;

   бордер-радиус: 18пх;

   баcкгроунд:
       линеар-градиэнт(
           135дег,
           #087бе8 0%,
           #079дд7 55%,
           #12б8ад 100%
       );

   cолор: #ффф;

   бох-шадоw: 0 10пх 32пх ргба(0, 112, 190, 0.16);

}

.зиё-cонтаcт-ҳеро::афтер {

   cонтент: "";
   поситион: абсолуте;

   wидтҳ: 230пх;
   ҳеигҳт: 230пх;

   ригҳт: -70пх;
   топ: -100пх;

   бордер-радиус: 50%;

   баcкгроунд: ргба(255,255,255,.10);

}

.зиё-cонтаcт-ҳеро-иcон {

   поситион: релативе;
   з-индех: 2;

   дисплай: флех;
   алигн-итемс: cентер;
   жустифй-cонтент: cентер;

   wидтҳ: 68пх;
   ҳеигҳт: 68пх;

   флех-шринк: 0;

   бордер: 1пх солид ргба(255,255,255,.35);
   бордер-радиус: 18пх;

   баcкгроунд: ргба(255,255,255,.15);

   фонт-сизе: 30пх;

}

.зиё-cонтаcт-ҳеро-cонтент {

   поситион: релативе;
   з-индех: 2;

}

.зиё-cонтаcт-ҳеро ҳ1 {

   паддинг: 0;
   маргин: 0 0 9пх;

   бордер: 0;

   cолор: #ффф;

   фонт-сизе: 30пх;
   фонт-wеигҳт: 700;

}

.зиё-cонтаcт-ҳеро п {

   мах-wидтҳ: 700пх;

   маргин: 0;

   cолор: ргба(255,255,255,.92);

   фонт-сизе: 15пх;
   лине-ҳеигҳт: 1.65;

}

/* АСОСИЙ ТЕЛЕГРАМ КАРТАСИ */

.зиё-cонтаcт-cард {

   дисплай: флех;
   алигн-итемс: cентер;

   паддинг: 28пх 30пх;
   маргин-боттом: 22пх;

   бордер: 1пх солид #дфе6эc;
   бордер-радиус: 16пх;

   баcкгроунд: #ффф;

   бох-шадоw: 0 5пх 18пх ргба(0,0,0,.045);

}

.зиё-cонтаcт-примарй {

   бордер-cолор: #cфе5ф4;

   баcкгроунд:
       линеар-градиэнт(
           135дег,
           #фффффф 0%,
           #ф5фбфф 100%
       );

}

.зиё-cонтаcт-иcон {

   дисплай: флех;
   алигн-итемс: cентер;
   жустифй-cонтент: cентер;

   wидтҳ: 64пх;
   ҳеигҳт: 64пх;

   маргин-ригҳт: 22пх;

   флех-шринк: 0;

   бордер-радиус: 17пх;

   баcкгроунд: #168бд2;

   cолор: #ффф;

   фонт-сизе: 27пх;

   бох-шадоw: 0 7пх 18пх ргба(22,139,210,.20);

}

.зиё-cонтаcт-cард-cонтент {

   флех: 1;

}

.зиё-cонтаcт-лабел {

   маргин-боттом: 4пх;

   cолор: #168бд2;

   фонт-сизе: 10пх;
   фонт-wеигҳт: 700;

   леттер-спаcинг: .8пх;

}

.зиё-cонтаcт-cард ҳ2 {

   паддинг: 0;
   маргин: 0 0 7пх;

   бордер: 0;

   фонт-сизе: 21пх;

}

.зиё-cонтаcт-cард п {

   мах-wидтҳ: 680пх;

   маргин: 0 0 16пх;

   cолор: #54595д;

   фонт-сизе: 13пх;
   лине-ҳеигҳт: 1.6;

}

/* ТУГМАЛАР */

.зиё-cонтаcт-буттон а, .зиё-cонтаcт-боттом-буттон а {

   дисплай: инлине-блоcк;

   паддинг: 10пх 17пх;

   бордер-радиус: 9пх;

   баcкгроунд: #168бд2;

   cолор: #ффф !импортант;

   фонт-сизе: 13пх;
   фонт-wеигҳт: 600;

   техт-деcоратион: ноне !импортант;

   бох-шадоw: 0 4пх 11пх ргба(22,139,210,.18);

   транситион:
       трансформ .18с эасе,
       баcкгроунд .18с эасе,
       бох-шадоw .18с эасе;

}

.зиё-cонтаcт-буттон а:ҳовер, .зиё-cонтаcт-боттом-буттон а:ҳовер {

   баcкгроунд: #0878бд;

   трансформ: транслатеЙ(-1пх);

   бох-шадоw: 0 6пх 15пх ргба(22,139,210,.25);

}

/* УCҲТА МА'ЛУМОТ КАРТАСИ */

.зиё-cонтаcт-инфо-грид {

   дисплай: грид;

   грид-темплате-cолумнс: репеат(3, 1фр);

   гап: 16пх;

   маргин-боттом: 22пх;

}

.зиё-cонтаcт-инфо-cард {

   паддинг: 22пх;

   бордер: 1пх солид #э1э7эc;
   бордер-радиус: 14пх;

   баcкгроунд: #ффф;

   транситион:
       трансформ .18с эасе,
       бох-шадоw .18с эасе,
       бордер-cолор .18с эасе;

}

.зиё-cонтаcт-инфо-cард:ҳовер {

   трансформ: транслатеЙ(-3пх);

   бордер-cолор: #c7деэc;

   бох-шадоw: 0 7пх 20пх ргба(0,0,0,.06);

}

.зиё-cонтаcт-смалл-иcон {

   дисплай: флех;
   алигн-итемс: cентер;
   жустифй-cонтент: cентер;

   wидтҳ: 36пх;
   ҳеигҳт: 36пх;

   маргин-боттом: 13пх;

   бордер-радиус: 10пх;

   баcкгроунд: #эдф7фд;

   cолор: #168бд2;

   фонт-сизе: 16пх;
   фонт-wеигҳт: 700;

}

.зиё-cонтаcт-инфо-cард ҳ3 {

   маргин: 0 0 7пх;

   фонт-сизе: 15пх;

}

.зиё-cонтаcт-инфо-cард п {

   маргин: 0;

   cолор: #646а70;

   фонт-сизе: 12.5пх;
   лине-ҳеигҳт: 1.6;

}

/* ЭСЛАТМА */

.зиё-cонтаcт-ноте {

   дисплай: флех;

   гап: 13пх;

   паддинг: 17пх 19пх;
   маргин-боттом: 22пх;

   бордер: 1пх солид #д8э9ф4;
   бордер-радиус: 12пх;

   баcкгроунд: #ф6фбфе;

}

.зиё-cонтаcт-ноте-иcон {

   дисплай: флех;
   алигн-итемс: cентер;
   жустифй-cонтент: cентер;

   wидтҳ: 25пх;
   ҳеигҳт: 25пх;

   флех-шринк: 0;

   бордер-радиус: 50%;

   баcкгроунд: #168бд2;

   cолор: #ффф;

   фонт-сизе: 12пх;
   фонт-wеигҳт: 700;

}

.зиё-cонтаcт-ноте стронг {

   фонт-сизе: 13пх;

}

.зиё-cонтаcт-ноте п {

   маргин: 3пх 0 0;

   cолор: #54595д;

   фонт-сизе: 12пх;
   лине-ҳеигҳт: 1.55;

}

/* ПАСТКИ CТА */

.зиё-cонтаcт-боттом {

   дисплай: флех;
   алигн-итемс: cентер;
   жустифй-cонтент: спаcе-бетwеэн;

   гап: 25пх;

   паддинг: 24пх 28пх;

   бордер-радиус: 15пх;

   баcкгроунд: #202а33;

   cолор: #ффф;

}

.зиё-cонтаcт-боттом ҳ2 {

   паддинг: 0;
   маргин: 0 0 4пх;

   бордер: 0;

   cолор: #ффф;

   фонт-сизе: 18пх;

}

.зиё-cонтаcт-боттом п {

   маргин: 0;

   cолор: #бдc6cд;

   фонт-сизе: 12.5пх;

}

/* МОБИЛ */

@медиа (мах-wидтҳ: 700пх) {

   .зиё-cонтаcт {
       маргин-топ: 10пх;
   }

   .зиё-cонтаcт-ҳеро {
       паддинг: 27пх 22пх;
       гап: 15пх;
   }

   .зиё-cонтаcт-ҳеро-иcон {
       wидтҳ: 50пх;
       ҳеигҳт: 50пх;

       бордер-радиус: 14пх;

       фонт-сизе: 22пх;
   }

   .зиё-cонтаcт-ҳеро ҳ1 {
       фонт-сизе: 23пх;
   }

   .зиё-cонтаcт-ҳеро п {
       фонт-сизе: 13пх;
   }

   .зиё-cонтаcт-cард {
       алигн-итемс: флех-старт;

       паддинг: 21пх 18пх;
   }

   .зиё-cонтаcт-иcон {
       wидтҳ: 45пх;
       ҳеигҳт: 45пх;

       маргин-ригҳт: 14пх;

       бордер-радиус: 12пх;

       фонт-сизе: 20пх;
   }

   .зиё-cонтаcт-инфо-грид {
       грид-темплате-cолумнс: 1фр;
   }

   .зиё-cонтаcт-боттом {
       алигн-итемс: флех-старт;
       флех-диреcтион: cолумн;
   }

}

@медиа (мах-wидтҳ: 450пх) {

   .зиё-cонтаcт-ҳеро-иcон {
       дисплай: ноне;
   }

   .зиё-cонтаcт-cард {
       дисплай: блоcк;
   }

   .зиё-cонтаcт-иcон {
       маргин: 0 0 15пх;
   }

}