1.tooltip-container {
2 position: relative;
3 cursor: pointer;
4 transition: all 0.2s;
5 font-size: 17px;
6 border-radius: 10px;
7}
8
9.tooltip {
10 position: absolute;
11 top: 0;
12 left: 50%;
13 transform: translateX(-50%);
14 padding: 10px;
15 opacity: 0;
16 pointer-events: none;
17 transition: all 0.3s;
18 border-radius: 15px;
19 box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
20 inset -5px -5px 15px rgba(255, 255, 255, 0.1),
21 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
22}
23
24.profile {
25 background: #2a2b2f;
26 border-radius: 10px 15px;
27 padding: 10px;
28 border: 1px solid #52382f;
29}
30
31.tooltip-container:hover .tooltip {
32 top: -150px;
33 opacity: 1;
34 visibility: visible;
35 pointer-events: auto;
36}
37
38.icon {
39 text-decoration: none;
40 color: #fff;
41 display: block;
42 position: relative;
43}
44.layer {
45 width: 55px;
46 height: 55px;
47 transition: transform 0.3s;
48}
49.icon:hover .layer {
50 transform: rotate(-35deg) skew(20deg);
51}
52.layer span {
53 position: absolute;
54 top: 0;
55 left: 0;
56 height: 100%;
57 width: 100%;
58 border: 1px solid #fff;
59 border-radius: 15px;
60 transition: all 0.3s;
61}
62
63.layer span,
64.text {
65 color: #e6683c;
66 border-color: #e6683c;
67}
68
69.icon:hover.layer span {
70 box-shadow: -1px 1px 3px #e6683c;
71}
72.icon .text {
73 position: absolute;
74 left: 50%;
75 bottom: -5px;
76 opacity: 0;
77 font-weight: 500;
78 transform: translateX(-50%);
79 transition: bottom 0.3s ease, opacity 0.3s ease;
80}
81.icon:hover .text {
82 bottom: -35px;
83 opacity: 1;
84}
85
86.icon:hover .layer span:nth-child(1) {
87 opacity: 0.2;
88}
89.icon:hover .layer span:nth-child(2) {
90 opacity: 0.4;
91 transform: translate(5px, -5px);
92}
93.icon:hover .layer span:nth-child(3) {
94 opacity: 0.6;
95 transform: translate(10px, -10px);
96}
97.icon:hover .layer span:nth-child(4) {
98 opacity: 0.8;
99 transform: translate(15px, -15px);
100}
101.icon:hover .layer span:nth-child(5) {
102 opacity: 1;
103 transform: translate(20px, -20px);
104}
105
106.instagramSVG {
107 font-size: 25px;
108 display: flex;
109 align-items: center;
110 justify-content: center;
111 background: -webkit-linear-gradient(
112 45deg,
113 #f09433 0%,
114 #e6683c 25%,
115 #dc2743 50%,
116 #cc2366 75%,
117 #bc1888 100%
118 );
119 background: linear-gradient(
120 45deg,
121 #f09433 0%,
122 #e6683c 25%,
123 #dc2743 50%,
124 #cc2366 75%,
125 #bc1888 100%
126 );
127 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
128}
129.user {
130 display: flex;
131 gap: 10px;
132}
133.img {
134 width: 50px;
135 height: 50px;
136 font-size: 25px;
137 font-weight: 700;
138 border: 1px solid #e6683c;
139 border-radius: 10px;
140 display: flex;
141 align-items: center;
142 justify-content: center;
143 background: #fff;
144}
145.name {
146 font-size: 17px;
147 font-weight: 700;
148 color: #e6683c;
149}
150.details {
151 display: flex;
152 flex-direction: column;
153 gap: 0;
154 color: #fff;
155}
156.about {
157 color: #ccc;
158 padding-top: 5px;
159}
160
