Skip to content

Commit fe43999

Browse files
wecoded-devwecoded-dev
authored
Create text.css
0 parents  commit fe43999

1 file changed

Lines changed: 397 additions & 0 deletions

File tree

‎text.css‎

Lines changed: 397 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,397 @@
1+
/* text.css - Advanced Professional Typography Framework */
2+
/* Version 1.0 - Royal & Historical Inspired */
3+
4+
:root {
5+
/* Color Palette - Royal & Historical */
6+
--text-primary: #2C1810;
7+
--text-secondary: #5D4037;
8+
--text-accent: #8B4513;
9+
--text-gold: #D4AF37;
10+
--text-silver: #C0C0C0;
11+
--text-bronze: #CD7F32;
12+
--text-ivory: #FFFFF0;
13+
--text-parchment: #F5F5DC;
14+
15+
/* Font Families */
16+
--font-serif: 'Playfair Display', 'Times New Roman', serif;
17+
--font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
18+
--font-display: 'Cinzel', 'Georgia', serif;
19+
--font-script: 'Great Vibes', cursive;
20+
--font-mono: 'Courier New', monospace;
21+
22+
/* Typography Scale */
23+
--text-xs: 0.75rem;
24+
--text-sm: 0.875rem;
25+
--text-base: 1rem;
26+
--text-lg: 1.125rem;
27+
--text-xl: 1.25rem;
28+
--text-2xl: 1.5rem;
29+
--text-3xl: 1.875rem;
30+
--text-4xl: 2.25rem;
31+
--text-5xl: 3rem;
32+
--text-6xl: 3.75rem;
33+
--text-7xl: 4.5rem;
34+
35+
/* Line Heights */
36+
--leading-tight: 1.25;
37+
--leading-normal: 1.5;
38+
--leading-relaxed: 1.75;
39+
--leading-loose: 2;
40+
41+
/* Letter Spacing */
42+
--tracking-tight: -0.025em;
43+
--tracking-normal: 0;
44+
--tracking-wide: 0.025em;
45+
--tracking-wider: 0.05em;
46+
--tracking-widest: 0.1em;
47+
48+
/* Text Shadows */
49+
--shadow-subtle: 0 1px 2px rgba(0,0,0,0.1);
50+
--shadow-medium: 0 2px 4px rgba(0,0,0,0.2);
51+
--shadow-strong: 0 4px 8px rgba(0,0,0,0.3);
52+
--shadow-glow: 0 0 10px rgba(212, 175, 55, 0.3);
53+
}
54+
55+
/* Base Typography Reset */
56+
.text-reset {
57+
margin: 0;
58+
padding: 0;
59+
font-family: inherit;
60+
font-size: inherit;
61+
font-weight: inherit;
62+
line-height: inherit;
63+
color: inherit;
64+
}
65+
66+
/* Font Family Classes */
67+
.font-serif { font-family: var(--font-serif); }
68+
.font-sans { font-family: var(--font-sans); }
69+
.font-display { font-family: var(--font-display); }
70+
.font-script { font-family: var(--font-script); }
71+
.font-mono { font-family: var(--font-mono); }
72+
73+
/* Font Size Classes */
74+
.text-xs { font-size: var(--text-xs); }
75+
.text-sm { font-size: var(--text-sm); }
76+
.text-base { font-size: var(--text-base); }
77+
.text-lg { font-size: var(--text-lg); }
78+
.text-xl { font-size: var(--text-xl); }
79+
.text-2xl { font-size: var(--text-2xl); }
80+
.text-3xl { font-size: var(--text-3xl); }
81+
.text-4xl { font-size: var(--text-4xl); }
82+
.text-5xl { font-size: var(--text-5xl); }
83+
.text-6xl { font-size: var(--text-6xl); }
84+
.text-7xl { font-size: var(--text-7xl); }
85+
86+
/* Font Weight Classes */
87+
.font-thin { font-weight: 100; }
88+
.font-light { font-weight: 300; }
89+
.font-normal { font-weight: 400; }
90+
.font-medium { font-weight: 500; }
91+
.font-semibold { font-weight: 600; }
92+
.font-bold { font-weight: 700; }
93+
.font-black { font-weight: 900; }
94+
95+
/* Text Colors */
96+
.text-primary { color: var(--text-primary); }
97+
.text-secondary { color: var(--text-secondary); }
98+
.text-accent { color: var(--text-accent); }
99+
.text-gold { color: var(--text-gold); }
100+
.text-silver { color: var(--text-silver); }
101+
.text-bronze { color: var(--text-bronze); }
102+
.text-ivory { color: var(--text-ivory); }
103+
.text-parchment { color: var(--text-parchment); }
104+
105+
/* Text Alignment */
106+
.text-left { text-align: left; }
107+
.text-center { text-align: center; }
108+
.text-right { text-align: right; }
109+
.text-justify { text-align: justify; }
110+
111+
/* Text Transformation */
112+
.text-uppercase { text-transform: uppercase; }
113+
.text-lowercase { text-transform: lowercase; }
114+
.text-capitalize { text-transform: capitalize; }
115+
.text-normal-case { text-transform: none; }
116+
117+
/* Text Decoration */
118+
.text-underline { text-decoration: underline; }
119+
.text-overline { text-decoration: overline; }
120+
.text-line-through { text-decoration: line-through; }
121+
.text-no-underline { text-decoration: none; }
122+
123+
/* Letter Spacing */
124+
.tracking-tight { letter-spacing: var(--tracking-tight); }
125+
.tracking-normal { letter-spacing: var(--tracking-normal); }
126+
.tracking-wide { letter-spacing: var(--tracking-wide); }
127+
.tracking-wider { letter-spacing: var(--tracking-wider); }
128+
.tracking-widest { letter-spacing: var(--tracking-widest); }
129+
130+
/* Line Height */
131+
.leading-tight { line-height: var(--leading-tight); }
132+
.leading-normal { line-height: var(--leading-normal); }
133+
.leading-relaxed { line-height: var(--leading-relaxed); }
134+
.leading-loose { line-height: var(--leading-loose); }
135+
136+
/* Text Shadows */
137+
.text-shadow-subtle { text-shadow: var(--shadow-subtle); }
138+
.text-shadow-medium { text-shadow: var(--shadow-medium); }
139+
.text-shadow-strong { text-shadow: var(--shadow-strong); }
140+
.text-shadow-glow { text-shadow: var(--shadow-glow); }
141+
.text-shadow-none { text-shadow: none; }
142+
143+
/* Special Text Effects */
144+
.text-emboss {
145+
color: var(--text-primary);
146+
text-shadow: 1px 1px 1px rgba(255,255,255,0.5),
147+
-1px -1px 1px rgba(0,0,0,0.1);
148+
}
149+
150+
.text-deboss {
151+
color: var(--text-primary);
152+
text-shadow: -1px -1px 1px rgba(255,255,255,0.5),
153+
1px 1px 1px rgba(0,0,0,0.3);
154+
}
155+
156+
.text-gold-emboss {
157+
color: var(--text-gold);
158+
text-shadow: 2px 2px 4px rgba(0,0,0,0.5),
159+
-1px -1px 1px rgba(255,255,255,0.1);
160+
}
161+
162+
.text-outline {
163+
color: transparent;
164+
-webkit-text-stroke: 1px var(--text-primary);
165+
text-stroke: 1px var(--text-primary);
166+
}
167+
168+
.text-outline-gold {
169+
color: transparent;
170+
-webkit-text-stroke: 1px var(--text-gold);
171+
text-stroke: 1px var(--text-gold);
172+
}
173+
174+
/* Historical & Royal Styles */
175+
.text-royal {
176+
font-family: var(--font-display);
177+
color: var(--text-gold);
178+
text-shadow: var(--shadow-glow);
179+
letter-spacing: var(--tracking-wider);
180+
font-weight: 600;
181+
}
182+
183+
.text-manuscript {
184+
font-family: var(--font-script);
185+
color: var(--text-primary);
186+
background: linear-gradient(var(--text-parchment), var(--text-ivory));
187+
-webkit-background-clip: text;
188+
background-clip: text;
189+
-webkit-text-fill-color: transparent;
190+
}
191+
192+
.text-ancient {
193+
font-family: var(--font-serif);
194+
color: var(--text-bronze);
195+
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
196+
font-style: italic;
197+
}
198+
199+
.text-illuminated {
200+
font-family: var(--font-display);
201+
color: var(--text-gold);
202+
background: linear-gradient(45deg, var(--text-gold), var(--text-silver));
203+
-webkit-background-clip: text;
204+
background-clip: text;
205+
-webkit-text-fill-color: transparent;
206+
text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
207+
}
208+
209+
/* Professional Styles */
210+
.text-professional {
211+
font-family: var(--font-sans);
212+
color: var(--text-primary);
213+
letter-spacing: var(--tracking-normal);
214+
line-height: var(--leading-normal);
215+
font-weight: 400;
216+
}
217+
218+
.text-executive {
219+
font-family: var(--font-serif);
220+
color: var(--text-primary);
221+
font-weight: 500;
222+
letter-spacing: var(--tracking-tight);
223+
}
224+
225+
.text-minimal {
226+
font-family: var(--font-sans);
227+
color: var(--text-primary);
228+
font-weight: 300;
229+
letter-spacing: var(--tracking-wide);
230+
}
231+
232+
/* Modern Styles */
233+
.text-modern {
234+
font-family: var(--font-sans);
235+
color: var(--text-primary);
236+
font-weight: 400;
237+
letter-spacing: var(--tracking-normal);
238+
text-transform: uppercase;
239+
}
240+
241+
.text-futuristic {
242+
font-family: var(--font-mono);
243+
color: var(--text-silver);
244+
text-shadow: 0 0 5px rgba(192, 192, 192, 0.5);
245+
letter-spacing: var(--tracking-wide);
246+
}
247+
248+
/* Gradient Text Effects */
249+
.text-gradient-primary {
250+
background: linear-gradient(135deg, var(--text-primary), var(--text-accent));
251+
-webkit-background-clip: text;
252+
background-clip: text;
253+
-webkit-text-fill-color: transparent;
254+
}
255+
256+
.text-gradient-royal {
257+
background: linear-gradient(135deg, var(--text-gold), var(--text-bronze));
258+
-webkit-background-clip: text;
259+
background-clip: text;
260+
-webkit-text-fill-color: transparent;
261+
}
262+
263+
.text-gradient-silver {
264+
background: linear-gradient(135deg, var(--text-silver), #888888);
265+
-webkit-background-clip: text;
266+
background-clip: text;
267+
-webkit-text-fill-color: transparent;
268+
}
269+
270+
/* Hover Effects */
271+
.text-hover-glow:hover {
272+
text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
273+
transition: text-shadow 0.3s ease;
274+
}
275+
276+
.text-hover-scale:hover {
277+
transform: scale(1.05);
278+
transition: transform 0.3s ease;
279+
}
280+
281+
.text-hover-color:hover {
282+
color: var(--text-gold);
283+
transition: color 0.3s ease;
284+
}
285+
286+
/* Animation Classes */
287+
.text-fade-in {
288+
animation: fadeIn 1s ease-in;
289+
}
290+
291+
.text-slide-in {
292+
animation: slideIn 0.8s ease-out;
293+
}
294+
295+
.text-typewriter {
296+
overflow: hidden;
297+
border-right: 2px solid var(--text-gold);
298+
white-space: nowrap;
299+
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
300+
}
301+
302+
@keyframes fadeIn {
303+
from { opacity: 0; }
304+
to { opacity: 1; }
305+
}
306+
307+
@keyframes slideIn {
308+
from {
309+
transform: translateX(-100px);
310+
opacity: 0;
311+
}
312+
to {
313+
transform: translateX(0);
314+
opacity: 1;
315+
}
316+
}
317+
318+
@keyframes typing {
319+
from { width: 0 }
320+
to { width: 100% }
321+
}
322+
323+
@keyframes blink-caret {
324+
from, to { border-color: transparent }
325+
50% { border-color: var(--text-gold) }
326+
}
327+
328+
/* Responsive Text Classes */
329+
@media (max-width: 768px) {
330+
.text-responsive {
331+
font-size: calc(1rem + 0.5vw);
332+
line-height: var(--leading-relaxed);
333+
}
334+
335+
.text-mobile-center {
336+
text-align: center;
337+
}
338+
}
339+
340+
/* Print Styles */
341+
@media print {
342+
.text-print {
343+
color: #000 !important;
344+
text-shadow: none !important;
345+
font-family: "Times New Roman", serif !important;
346+
}
347+
}
348+
349+
/* Accessibility */
350+
.text-high-contrast {
351+
color: #000000;
352+
background-color: #FFFFFF;
353+
}
354+
355+
.text-large-print {
356+
font-size: 1.25rem;
357+
line-height: var(--leading-relaxed);
358+
}
359+
360+
/* Utility Classes */
361+
.text-truncate {
362+
overflow: hidden;
363+
text-overflow: ellipsis;
364+
white-space: nowrap;
365+
}
366+
367+
.text-break {
368+
word-wrap: break-word;
369+
word-break: break-word;
370+
}
371+
372+
.text-nowrap {
373+
white-space: nowrap;
374+
}
375+
376+
.text-pre {
377+
white-space: pre;
378+
}
379+
380+
.text-pre-line {
381+
white-space: pre-line;
382+
}
383+
384+
.text-pre-wrap {
385+
white-space: pre-wrap;
386+
}
387+
388+
/* Selection Styles */
389+
::selection {
390+
background-color: var(--text-gold);
391+
color: var(--text-primary);
392+
}
393+
394+
::-moz-selection {
395+
background-color: var(--text-gold);
396+
color: var(--text-primary);
397+
}

0 commit comments

Comments
 (0)