Initial deploy
هذا الالتزام موجود في:
778
app/portfolio.css
Normal file
778
app/portfolio.css
Normal file
@@ -0,0 +1,778 @@
|
||||
:root {
|
||||
--font-display: "Georgia", "Times New Roman", serif;
|
||||
--font-display-ar: "Segoe UI", "Tahoma", "Arial", sans-serif;
|
||||
--font-body: "Trebuchet MS", "Segoe UI", "Tahoma", sans-serif;
|
||||
--text-label: 17px;
|
||||
--text-button: 14px;
|
||||
--text-nav: 14px;
|
||||
--text-chip: 16px;
|
||||
--text-body: 18px;
|
||||
--text-body-editorial: 17px;
|
||||
--text-body-large: 18px;
|
||||
--text-contact-label: 15px;
|
||||
--text-contact-value: clamp(16px, 1.4vw, 18px);
|
||||
--text-contact-email: clamp(15px, 1.1vw, 15px);
|
||||
--text-section-kicker: 25px;
|
||||
--text-eyebrow: 20px;
|
||||
--text-brand: 30px;
|
||||
--text-footer-brand: 24px;
|
||||
--text-hero-title: clamp(15px, 5.4vw, 50px);
|
||||
--text-hero-title-latin: clamp(20px, 4.35vw, 52px);
|
||||
--text-page-title: clamp(36px, 4.8vw, 60px);
|
||||
--text-section-title: clamp(30px, 3vw, 36px);
|
||||
--text-card-title-small: clamp(24px, 2.4vw, 30px);
|
||||
--text-card-title: clamp(20px, 3vw, 36px);
|
||||
--text-project-title: clamp(36px, 4vw, 48px);
|
||||
--text-metric: clamp(48px, 5vw, 60px);
|
||||
--text-contact-title: clamp(36px, 5vw, 60px);
|
||||
--color-mauve-100: #d8f2ff;
|
||||
--color-mauve-300: #86d7ff;
|
||||
--color-mauve-500: #3eb8ff;
|
||||
--color-mauve-600: #1698ea;
|
||||
--color-mauve-700: #0a6eb8;
|
||||
--color-blue-400: #1689c8;
|
||||
--color-blue-500: #21a7e8;
|
||||
--color-blue-050: #dff6ff;
|
||||
--color-ink: #16222d;
|
||||
--color-muted: #657586;
|
||||
--color-white: #ffffff;
|
||||
--color-cream: #f6fbff;
|
||||
--color-deep: #eaf4fa;
|
||||
--color-panel: rgba(255, 255, 255, 0.84);
|
||||
--color-panel-strong: rgba(255, 255, 255, 0.96);
|
||||
--color-line: rgba(28, 126, 177, 0.18);
|
||||
--shadow-soft: 0 24px 70px rgba(25, 72, 105, 0.14);
|
||||
--shadow-card: 0 18px 48px rgba(25, 72, 105, 0.12);
|
||||
--html-background: linear-gradient(180deg, #ffffff 0%, #f6fbff 44%, #eaf4fa 100%);
|
||||
--body-background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 251, 255, 0.96)),
|
||||
linear-gradient(90deg, rgba(33, 167, 232, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(rgba(33, 167, 232, 0.05) 1px, transparent 1px);
|
||||
--section-shell-background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 254, 0.92));
|
||||
--editorial-grid-background:
|
||||
linear-gradient(rgba(33, 167, 232, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(33, 167, 232, 0.06) 1px, transparent 1px);
|
||||
--line-frame-color: rgba(28, 126, 177, 0.2);
|
||||
--soft-card-background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 253, 0.92));
|
||||
--gradient-card-border: rgba(28, 126, 177, 0.2);
|
||||
--gradient-card-background:
|
||||
linear-gradient(145deg, rgba(232, 247, 255, 0.98), rgba(255, 255, 255, 0.98) 48%, rgba(240, 249, 252, 0.96));
|
||||
--hero-background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(232, 247, 255, 0.94) 46%, rgba(245, 251, 255, 0.98));
|
||||
--button-secondary-background: rgba(255, 255, 255, 0.92);
|
||||
--button-secondary-shadow: 0 10px 24px rgba(25, 72, 105, 0.08);
|
||||
--editorial-rule-background: linear-gradient(90deg, rgba(28, 126, 177, 0), rgba(28, 126, 177, 0.22), rgba(28, 126, 177, 0));
|
||||
--image-frame-background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 248, 253, 0.92));
|
||||
--header-background: rgba(255, 255, 255, 0.82);
|
||||
--header-border: rgba(28, 126, 177, 0.14);
|
||||
--logo-shell-background: #ffffff;
|
||||
--logo-shell-border: rgba(28, 126, 177, 0.18);
|
||||
--logo-shell-shadow: 0 10px 28px rgba(25, 72, 105, 0.12);
|
||||
--control-background: #ffffff;
|
||||
--control-border: rgba(28, 126, 177, 0.2);
|
||||
--control-border-hover: rgba(28, 126, 177, 0.36);
|
||||
--control-shadow: 0 8px 22px rgba(25, 72, 105, 0.08);
|
||||
--top-wash-background: linear-gradient(180deg, rgba(53, 182, 255, 0.12), transparent 64%);
|
||||
--surface-card-background: rgba(255, 255, 255, 0.88);
|
||||
--surface-card-alt-background: rgba(232, 247, 255, 0.86);
|
||||
--surface-card-strong-background: rgba(255, 255, 255, 0.9);
|
||||
--surface-card-shadow: 0 14px 36px rgba(25, 72, 105, 0.08);
|
||||
--project-card-background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 249, 253, 0.94));
|
||||
--project-card-shadow: 0 24px 70px rgba(25, 72, 105, 0.12);
|
||||
--rule-color: rgba(28, 126, 177, 0.22);
|
||||
--meta-border-color: rgba(28, 126, 177, 0.14);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--color-mauve-100: #d8f2ff;
|
||||
--color-mauve-300: #9fe1ff;
|
||||
--color-mauve-500: #63c8ff;
|
||||
--color-mauve-600: #35b6ff;
|
||||
--color-mauve-700: #86d7ff;
|
||||
--color-blue-400: #86d7ff;
|
||||
--color-blue-500: #35b6ff;
|
||||
--color-blue-050: #10283a;
|
||||
--color-ink: #f7fbff;
|
||||
--color-muted: #a8bac8;
|
||||
--color-cream: #06101a;
|
||||
--color-deep: #030b12;
|
||||
--color-panel: rgba(9, 24, 36, 0.84);
|
||||
--color-panel-strong: rgba(13, 34, 49, 0.94);
|
||||
--color-line: rgba(141, 220, 255, 0.16);
|
||||
--shadow-soft: 0 30px 90px rgba(0, 0, 0, 0.28);
|
||||
--shadow-card: 0 20px 54px rgba(0, 0, 0, 0.24);
|
||||
--html-background: linear-gradient(180deg, #030b12 0%, #06101a 46%, #0b1c2a 100%);
|
||||
--body-background:
|
||||
linear-gradient(180deg, rgba(3, 11, 18, 0.92), rgba(6, 16, 26, 0.96)),
|
||||
linear-gradient(90deg, rgba(141, 220, 255, 0.04) 1px, transparent 1px),
|
||||
linear-gradient(rgba(141, 220, 255, 0.04) 1px, transparent 1px);
|
||||
--section-shell-background: linear-gradient(180deg, rgba(8, 22, 33, 0.84), rgba(5, 14, 23, 0.96));
|
||||
--editorial-grid-background:
|
||||
linear-gradient(rgba(141, 220, 255, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(141, 220, 255, 0.06) 1px, transparent 1px);
|
||||
--line-frame-color: rgba(141, 220, 255, 0.22);
|
||||
--soft-card-background: linear-gradient(180deg, rgba(10, 27, 40, 0.92), rgba(6, 18, 28, 0.94));
|
||||
--gradient-card-border: rgba(141, 220, 255, 0.16);
|
||||
--gradient-card-background:
|
||||
linear-gradient(145deg, rgba(14, 43, 61, 0.96), rgba(8, 22, 33, 0.98) 48%, rgba(5, 14, 23, 0.96));
|
||||
--hero-background:
|
||||
linear-gradient(135deg, rgba(13, 34, 49, 0.96), rgba(6, 18, 29, 0.94) 46%, rgba(3, 11, 18, 0.98));
|
||||
--button-secondary-background: rgba(8, 22, 33, 0.9);
|
||||
--button-secondary-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
|
||||
--editorial-rule-background: linear-gradient(90deg, rgba(141, 220, 255, 0), rgba(141, 220, 255, 0.22), rgba(141, 220, 255, 0));
|
||||
--image-frame-background: linear-gradient(180deg, rgba(10, 26, 38, 0.92), rgba(5, 14, 23, 0.96));
|
||||
--header-background: rgba(3, 11, 18, 0.72);
|
||||
--header-border: rgba(141, 220, 255, 0.08);
|
||||
--logo-shell-background: rgba(10, 26, 38, 0.92);
|
||||
--logo-shell-border: rgba(141, 220, 255, 0.14);
|
||||
--logo-shell-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
|
||||
--control-background: rgba(9, 24, 36, 0.84);
|
||||
--control-border: rgba(141, 220, 255, 0.18);
|
||||
--control-border-hover: rgba(141, 220, 255, 0.34);
|
||||
--control-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
|
||||
--top-wash-background: linear-gradient(180deg, rgba(53, 182, 255, 0.12), transparent 64%);
|
||||
--surface-card-background: rgba(8, 22, 33, 0.88);
|
||||
--surface-card-alt-background: rgba(12, 31, 45, 0.94);
|
||||
--surface-card-strong-background: rgba(10, 27, 40, 0.9);
|
||||
--surface-card-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
|
||||
--project-card-background: linear-gradient(180deg, rgba(9, 24, 36, 0.9), rgba(6, 16, 26, 0.96));
|
||||
--project-card-shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
|
||||
--rule-color: rgba(141, 220, 255, 0.18);
|
||||
--meta-border-color: rgba(141, 220, 255, 0.12);
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-transparent;
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--html-background);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-body), sans-serif;
|
||||
font-size: var(--text-body);
|
||||
color: var(--color-ink);
|
||||
background: var(--body-background);
|
||||
background-size: auto, 96px 96px, 96px 96px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-display), serif;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] h1,
|
||||
[dir="rtl"] h2,
|
||||
[dir="rtl"] h3,
|
||||
[dir="rtl"] h4,
|
||||
[dir="rtl"] h5,
|
||||
[dir="rtl"] h6,
|
||||
[dir="rtl"] .display-face {
|
||||
font-family: var(--font-display-ar);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
font-family: var(--font-display-ar);
|
||||
}
|
||||
|
||||
p {
|
||||
@apply leading-7;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply transition-colors duration-200;
|
||||
}
|
||||
|
||||
.type-label {
|
||||
font-size: var(--text-label);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.type-label-wide {
|
||||
font-size: var(--text-label);
|
||||
line-height: 1.35;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.type-button {
|
||||
font-size: var(--text-button);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.type-nav {
|
||||
font-size: var(--text-nav);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.type-chip {
|
||||
font-size: var(--text-chip);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.type-body {
|
||||
font-size: var(--text-body);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.type-body-editorial {
|
||||
font-size: var(--text-body-editorial);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.type-body-responsive {
|
||||
font-size: var(--text-body);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.type-brand {
|
||||
font-size: var(--text-brand);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.type-footer-brand {
|
||||
font-size: var(--text-footer-brand);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.type-hero-title {
|
||||
font-size: var(--text-hero-title);
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.type-hero-title-latin {
|
||||
font-size: var(--text-hero-title-latin);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.type-page-title {
|
||||
font-size: var(--text-page-title);
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.type-section-title {
|
||||
font-size: var(--text-section-title);
|
||||
line-height: 1.16;
|
||||
}
|
||||
|
||||
.type-card-title-small {
|
||||
font-size: var(--text-card-title-small);
|
||||
line-height: 1.16;
|
||||
}
|
||||
|
||||
.type-card-title {
|
||||
font-size: var(--text-card-title-small);
|
||||
line-height: 1.16;
|
||||
}
|
||||
|
||||
.type-project-title {
|
||||
font-size: var(--text-project-title);
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.type-metric {
|
||||
font-size: var(--text-metric);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.type-body-responsive {
|
||||
font-size: var(--text-body-large);
|
||||
}
|
||||
}
|
||||
|
||||
.site-container {
|
||||
@apply mx-auto w-full max-w-[1440px] px-6 md:px-8 lg:px-12;
|
||||
}
|
||||
|
||||
.section-shell {
|
||||
@apply relative overflow-hidden rounded-[34px] border backdrop-blur-xl;
|
||||
border-color: var(--color-line);
|
||||
background: var(--section-shell-background);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
@apply px-6 py-16 md:px-10 md:py-20 lg:px-16;
|
||||
}
|
||||
|
||||
.section-kicker {
|
||||
@apply font-semibold uppercase tracking-[0.22em] text-[var(--color-mauve-700)];
|
||||
font-size: var(--text-section-kicker);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.editorial-grid {
|
||||
background-image: var(--editorial-grid-background);
|
||||
background-position: center;
|
||||
background-size: 140px 140px;
|
||||
}
|
||||
|
||||
.line-frame::before,
|
||||
.line-frame::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-color: var(--line-frame-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.line-frame::before {
|
||||
inset: 18px auto auto 18px;
|
||||
height: 84px;
|
||||
width: 84px;
|
||||
border-left-width: 1px;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.line-frame::after {
|
||||
inset: auto 18px 18px auto;
|
||||
height: 84px;
|
||||
width: 84px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.soft-card {
|
||||
@apply rounded-[28px] border p-6 backdrop-blur-xl transition-transform duration-300 hover:-translate-y-1;
|
||||
border-color: var(--color-line);
|
||||
background: var(--soft-card-background);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.gradient-card {
|
||||
@apply rounded-[28px] border p-6;
|
||||
border-color: var(--gradient-card-border);
|
||||
background: var(--gradient-card-background);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.hero-glow {
|
||||
background: var(--hero-background);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
@apply inline-flex items-center justify-center rounded-full border px-6 py-3 font-semibold transition-all duration-200 hover:-translate-y-0.5;
|
||||
font-size: var(--text-button);
|
||||
line-height: 1.25;
|
||||
border-color: rgba(22, 137, 200, 0.32);
|
||||
background: linear-gradient(135deg, #1698ea, #35b6ff);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 12px 30px rgba(33, 167, 232, 0.22);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
@apply inline-flex items-center justify-center rounded-full border px-6 py-3 font-semibold text-[var(--color-ink)] transition-all duration-200 hover:-translate-y-0.5;
|
||||
font-size: var(--text-button);
|
||||
line-height: 1.25;
|
||||
border-color: var(--color-line);
|
||||
background: var(--button-secondary-background);
|
||||
box-shadow: var(--button-secondary-shadow);
|
||||
}
|
||||
|
||||
.display-face {
|
||||
font-family: var(--font-display), serif;
|
||||
}
|
||||
|
||||
.editorial-rule {
|
||||
@apply h-px w-full;
|
||||
background: var(--editorial-rule-background);
|
||||
}
|
||||
|
||||
.image-frame {
|
||||
@apply relative overflow-hidden rounded-[32px] border p-3;
|
||||
border-color: var(--color-line);
|
||||
background: var(--image-frame-background);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.eyebrow-note {
|
||||
@apply uppercase tracking-[0.22em] text-[var(--color-muted)];
|
||||
font-size: var(--text-eyebrow);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.navbar-shell {
|
||||
border-color: var(--header-border);
|
||||
background: var(--header-background);
|
||||
}
|
||||
|
||||
.logo-shell {
|
||||
border-color: var(--logo-shell-border);
|
||||
background: var(--logo-shell-background);
|
||||
box-shadow: var(--logo-shell-shadow);
|
||||
}
|
||||
|
||||
.control-pill {
|
||||
@apply inline-flex h-10 items-center justify-center rounded-full border px-4 font-semibold text-[var(--color-ink)] transition-transform duration-200 hover:-translate-y-0.5 hover:text-[var(--color-blue-400)];
|
||||
font-size: var(--text-button);
|
||||
line-height: 1.25;
|
||||
border-color: var(--control-border);
|
||||
background: var(--control-background);
|
||||
box-shadow: var(--control-shadow);
|
||||
}
|
||||
|
||||
.control-pill:hover {
|
||||
border-color: var(--control-border-hover);
|
||||
}
|
||||
|
||||
.nav-link-pill {
|
||||
@apply inline-flex h-10 items-center justify-center rounded-full border px-4 font-semibold text-[var(--color-ink)] transition-transform duration-200 hover:-translate-y-0.5 hover:text-[var(--color-blue-400)];
|
||||
font-size: var(--text-nav);
|
||||
line-height: 1.25;
|
||||
border-color: var(--control-border);
|
||||
background: var(--control-background);
|
||||
box-shadow: var(--control-shadow);
|
||||
}
|
||||
|
||||
.nav-link-pill:hover {
|
||||
border-color: var(--control-border-hover);
|
||||
}
|
||||
|
||||
.nav-link-pill[data-active="true"] {
|
||||
border-color: rgba(33, 167, 232, 0.5);
|
||||
background: linear-gradient(135deg, rgba(33, 167, 232, 0.16), var(--control-background));
|
||||
color: var(--color-blue-400);
|
||||
}
|
||||
|
||||
.nav-scroll {
|
||||
@apply -mx-1 max-w-full overflow-x-auto px-1 pb-1;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.nav-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
@apply flex w-max items-center gap-2 font-medium text-[var(--color-muted)] md:w-full md:flex-wrap;
|
||||
font-size: var(--text-nav);
|
||||
}
|
||||
|
||||
.mobile-menu-panel {
|
||||
@apply absolute inset-x-0 top-full z-50 mt-3 rounded-[24px] border p-3 backdrop-blur-xl md:hidden;
|
||||
border-color: var(--control-border);
|
||||
background: var(--header-background);
|
||||
box-shadow: var(--shadow-card);
|
||||
max-height: calc(100vh - 5.5rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-menu-list {
|
||||
@apply grid gap-2;
|
||||
}
|
||||
|
||||
.mobile-menu-link {
|
||||
@apply flex min-h-[48px] items-center rounded-[18px] border px-4 py-3 font-semibold text-[var(--color-ink)] transition-all duration-200 hover:-translate-y-0.5 hover:text-[var(--color-blue-400)];
|
||||
border-color: var(--control-border);
|
||||
background: var(--control-background);
|
||||
box-shadow: var(--control-shadow);
|
||||
}
|
||||
|
||||
.mobile-menu-link:hover {
|
||||
border-color: var(--control-border-hover);
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
@apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border text-[var(--color-ink)] transition-transform duration-200 hover:-translate-y-0.5 hover:text-[var(--color-blue-400)];
|
||||
border-color: var(--control-border);
|
||||
background: var(--control-background);
|
||||
box-shadow: var(--control-shadow);
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
border-color: var(--control-border-hover);
|
||||
}
|
||||
|
||||
.theme-toggle svg {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.theme-toggle .sun-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-toggle .moon-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-toggle .sun-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-wash {
|
||||
background: var(--top-wash-background);
|
||||
}
|
||||
|
||||
.project-card-shell {
|
||||
border-color: var(--color-line);
|
||||
background: var(--project-card-background);
|
||||
box-shadow: var(--project-card-shadow);
|
||||
}
|
||||
|
||||
.project-rule-line {
|
||||
background: var(--rule-color);
|
||||
}
|
||||
|
||||
.project-meta-list {
|
||||
border-color: var(--meta-border-color);
|
||||
}
|
||||
|
||||
.surface-chip {
|
||||
@apply rounded-full border;
|
||||
border-color: var(--color-line);
|
||||
background: var(--surface-card-background);
|
||||
}
|
||||
|
||||
.surface-chip-alt {
|
||||
@apply rounded-full border;
|
||||
border-color: var(--color-line);
|
||||
background: var(--surface-card-alt-background);
|
||||
}
|
||||
|
||||
.surface-card {
|
||||
@apply border;
|
||||
border-color: var(--meta-border-color);
|
||||
background: var(--surface-card-background);
|
||||
box-shadow: var(--surface-card-shadow);
|
||||
}
|
||||
|
||||
.surface-card-alt {
|
||||
@apply border;
|
||||
border-color: var(--meta-border-color);
|
||||
background: var(--surface-card-alt-background);
|
||||
box-shadow: var(--surface-card-shadow);
|
||||
}
|
||||
|
||||
.surface-card-strong {
|
||||
@apply border;
|
||||
border-color: var(--color-line);
|
||||
background: var(--surface-card-strong-background);
|
||||
box-shadow: var(--surface-card-shadow);
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
@apply rounded-[22px] border px-5 py-4 text-[var(--color-muted)];
|
||||
font-size: var(--text-chip);
|
||||
line-height: 1.55;
|
||||
border-color: var(--color-line);
|
||||
background: var(--control-background);
|
||||
box-shadow: var(--control-shadow);
|
||||
}
|
||||
|
||||
.resume-timeline-card {
|
||||
@apply rounded-[24px] border p-6;
|
||||
border-color: var(--meta-border-color);
|
||||
background: var(--project-card-background);
|
||||
box-shadow: var(--surface-card-shadow);
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
@apply min-h-[140px] rounded-[26px] border px-6 py-5 transition-transform duration-300 hover:-translate-y-1;
|
||||
border-color: var(--color-line);
|
||||
background: var(--surface-card-strong-background);
|
||||
box-shadow: var(--surface-card-shadow);
|
||||
}
|
||||
|
||||
.contact-card:hover {
|
||||
border-color: var(--control-border-hover);
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: var(--text-contact-label);
|
||||
line-height: 1.35;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: var(--text-contact-value);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.contact-value-ltr {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-feature-settings: "tnum" 1, "lnum" 1;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.contact-value-email {
|
||||
font-size: var(--text-contact-email);
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.data-ltr {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-feature-settings: "tnum" 1, "lnum" 1;
|
||||
}
|
||||
|
||||
.contact-copy {
|
||||
@apply self-start pt-1;
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
@apply mt-5 max-w-4xl whitespace-pre-line text-[var(--color-ink)];
|
||||
font-size: var(--text-contact-title);
|
||||
line-height: 1.14;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.contact-description {
|
||||
@apply mt-6 max-w-2xl text-[var(--color-muted)];
|
||||
font-size: var(--text-body);
|
||||
line-height: 1.75;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.contact-description {
|
||||
font-size: var(--text-body-large);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.site-container {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.section-shell {
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding: 1.25rem 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.section-kicker {
|
||||
font-size: clamp(18px, 4.8vw, 22px);
|
||||
letter-spacing: 0.18em;
|
||||
}
|
||||
|
||||
.eyebrow-note,
|
||||
.type-label-wide {
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
|
||||
.navbar-shell .type-brand {
|
||||
font-size: clamp(24px, 8vw, 30px);
|
||||
}
|
||||
|
||||
.navbar-shell .type-label {
|
||||
display: block;
|
||||
max-width: 17rem;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.type-page-title {
|
||||
font-size: clamp(28px, 9vw, 42px);
|
||||
}
|
||||
|
||||
.type-section-title {
|
||||
font-size: clamp(24px, 7vw, 32px);
|
||||
}
|
||||
|
||||
.type-project-title {
|
||||
font-size: clamp(28px, 9vw, 38px);
|
||||
}
|
||||
|
||||
.type-card-title,
|
||||
.type-card-title-small {
|
||||
font-size: clamp(20px, 6.8vw, 28px);
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
font-size: clamp(28px, 10vw, 42px);
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
min-height: 126px;
|
||||
padding: 1.25rem 1rem;
|
||||
}
|
||||
|
||||
.line-frame::before,
|
||||
.line-frame::after {
|
||||
height: 56px;
|
||||
width: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.type-hero-title {
|
||||
font-size: clamp(30px, 11.5vw, 40px);
|
||||
line-height: 1.02;
|
||||
}
|
||||
|
||||
.type-hero-title-latin {
|
||||
font-size: clamp(28px, 10vw, 36px);
|
||||
line-height: 1.04;
|
||||
}
|
||||
|
||||
.type-project-title {
|
||||
font-size: clamp(24px, 9vw, 32px);
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
font-size: clamp(26px, 9.5vw, 36px);
|
||||
}
|
||||
|
||||
.hero-action-group {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.hero-action-group > * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 390px) {
|
||||
.site-container {
|
||||
padding-left: 0.875rem;
|
||||
padding-right: 0.875rem;
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding: 1rem 0.875rem 1.25rem;
|
||||
}
|
||||
|
||||
.navbar-shell .type-brand {
|
||||
font-size: clamp(20px, 7.2vw, 26px);
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
padding: 1rem 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.type-hero-title {
|
||||
font-size: clamp(26px, 10.5vw, 34px);
|
||||
}
|
||||
|
||||
.type-section-title {
|
||||
font-size: clamp(22px, 8.3vw, 28px);
|
||||
}
|
||||
|
||||
.type-chip {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
المرجع في مشكلة جديدة
حظر مستخدم