Hugging Face's logo

Spaces:
enzostvs
/
deepsite
Running

App Files Community
302
deepsite
File size: 3,658 Bytes 
afa9e42
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import 'aos/dist/aos.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Cairo', 'Poppins', system-ui, sans-serif;
    scroll-behavior: smooth;
  }
  
  body {
    @apply transition-colors duration-300;
  }
  
  [dir="rtl"] {
    font-family: 'Cairo', system-ui, sans-serif;
  }
  
  [dir="ltr"] {
    font-family: 'Poppins', system-ui, sans-serif;
  }
}

@layer components {
  .btn-primary {
    @apply bg-blueprint-accent hover:bg-opacity-90 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 hover:shadow-lg hover:scale-105;
  }
  
  .btn-secondary {
    @apply border-2 border-blueprint-accent text-blueprint-accent hover:bg-blueprint-accent hover:text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300;
  }
  
  .section-padding {
    @apply py-16 px-4 sm:px-6 lg:px-8;
  }
  
  .container-custom {
    @apply max-w-7xl mx-auto;
  }
  
  .blueprint-pattern {
    background-image: 
      linear-gradient(45deg, transparent 24%, rgba(199, 156, 73, 0.05) 25%, rgba(199, 156, 73, 0.05) 26%, transparent 27%, transparent 74%, rgba(199, 156, 73, 0.05) 75%, rgba(199, 156, 73, 0.05) 76%, transparent 77%, transparent),
      linear-gradient(-45deg, transparent 24%, rgba(199, 156, 73, 0.05) 25%, rgba(199, 156, 73, 0.05) 26%, transparent 27%, transparent 74%, rgba(199, 156, 73, 0.05) 75%, rgba(199, 156, 73, 0.05) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
  }
  
  .floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
  }
  
  .floating-shapes::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, rgba(199, 156, 73, 0.1), rgba(27, 47, 92, 0.1));
    border-radius: 50%;
    top: 10%;
    left: 10%;
    animation: float 8s ease-in-out infinite;
  }
  
  .floating-shapes::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background: linear-gradient(-45deg, rgba(199, 156, 73, 0.08), rgba(27, 47, 92, 0.08));
    border-radius: 20px;
    top: 60%;
    right: 15%;
    animation: float 6s ease-in-out infinite reverse;
  }
}

/* Arabic text improvements */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-blueprint-light dark:bg-blueprint-dark;
}

::-webkit-scrollbar-thumb {
  @apply bg-blueprint-accent rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-opacity-80;
}

/* Loading animation */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #1B2F5C 0%, #2a4a7a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out;
}

.loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.blueprint-logo-loading {
  width: 120px;
  height: 120px;
  position: relative;
}

.blueprint-logo-loading svg {
  width: 100%;
  height: 100%;
  stroke: #C69C49;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 3s ease-in-out infinite;
}

@keyframes draw {
  0% {
    stroke-dashoffset: 1000;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1000;
  }
}