/* ===================================================================== دانیال مرادی — Personal Brand Site style.css فهرست مطالب: 1. Design Tokens (Custom Properties) 2. Reset / Base 3. Typography 4. Layout Utilities 5. Loading Screen 6. Custom Cursor 7. Header / Navigation 8. Hero Section 9. About Section 10. Skills Section 11. Stats / Counters 12. Services Section 13. Portfolio Section 14. Contact Section 15. Footer 16. Buttons & Interactive Elements 17. Scroll / Reveal Animations 18. Responsive Breakpoints 19. Accessibility & Reduced Motion ===================================================================== */ /* --------------------------------------------------------------------- 1. Design Tokens --------------------------------------------------------------------- */ :root { /* Core palette — مشکی، سرمه‌ای، بنفش، آبی، سفید، طلایی کم‌رنگ */ --color-void: #05060a; /* پس‌زمینه اصلی مشکی مطلق */ --color-navy: #0b1120; /* سرمه‌ای پنل‌ها */ --color-navy-soft: #10182c; /* سرمه‌ای روشن‌تر برای کارت‌ها */ --color-purple: #7c5cfc; /* بنفش برند */ --color-purple-soft: #9b82ff; --color-blue: #4c8dff; /* آبی برند */ --color-blue-soft: #7fb0ff; --color-gold: #d4af6a; /* طلایی کم، فقط برای لمس نهایی */ --color-white: #f5f7fb; --color-muted: #97a1b8; --color-muted-2: #626c85; --color-border: rgba(245, 247, 251, 0.08); --color-border-strong: rgba(245, 247, 251, 0.16); /* Glass surfaces */ --glass-bg: rgba(255, 255, 255, 0.045); --glass-bg-strong: rgba(255, 255, 255, 0.07); --glass-blur: 18px; /* Gradients */ --grad-primary: linear-gradient(135deg, var(--color-purple) 0%, var(--color-blue) 100%); --grad-aurora: radial-gradient(circle at 20% 20%, rgba(124, 92, 252, 0.35), transparent 55%), radial-gradient(circle at 80% 15%, rgba(76, 141, 255, 0.28), transparent 50%), radial-gradient(circle at 50% 90%, rgba(212, 175, 106, 0.10), transparent 60%); --grad-gold-line: linear-gradient(90deg, transparent, var(--color-gold), transparent); /* Typography */ --font-fa: "Vazirmatn", "Tahoma", sans-serif; --font-en: "Inter", "Vazirmatn", sans-serif; --fs-hero: clamp(2.4rem, 6vw, 5.2rem); --fs-h2: clamp(1.9rem, 4vw, 3rem); --fs-h3: clamp(1.25rem, 2.2vw, 1.7rem); --fs-body: clamp(0.95rem, 1.1vw, 1.05rem); --fs-small: 0.85rem; /* Spacing scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.75rem; --space-lg: 3rem; --space-xl: 5rem; --space-2xl: 8rem; /* Radii & shadows */ --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --shadow-glow-purple: 0 20px 60px -20px rgba(124, 92, 252, 0.45); --shadow-glow-blue: 0 20px 60px -20px rgba(76, 141, 255, 0.4); --shadow-card: 0 10px 40px -12px rgba(0, 0, 0, 0.55); /* Motion */ --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.25s; --dur-med: 0.55s; --dur-slow: 0.9s; --container-w: min(1240px, 92vw); --header-h: 84px; } /* Light mode override (toggle via data-theme="light" on ) */ :root[data-theme="light"] { --color-void: #f6f7fb; --color-navy: #ffffff; --color-navy-soft: #eef0f8; --color-white: #0b1120; --color-muted: #4a5268; --color-muted-2: #6b7280; --color-border: rgba(11, 17, 32, 0.08); --color-border-strong: rgba(11, 17, 32, 0.14); --glass-bg: rgba(11, 17, 32, 0.04); --glass-bg-strong: rgba(11, 17, 32, 0.06); --shadow-card: 0 10px 40px -14px rgba(11, 17, 32, 0.18); } /* --------------------------------------------------------------------- 2. Reset / Base --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 100%; } html, body { background: var(--color-void); color: var(--color-white); overflow-x: hidden; } body { font-family: var(--font-fa); font-size: var(--fs-body); line-height: 1.8; transition: background var(--dur-med) var(--ease-premium), color var(--dur-med) var(--ease-premium); cursor: default; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button, input, textarea { font-family: inherit; color: inherit; background: none; border: none; outline: none; } button { cursor: pointer; } svg { display: block; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -60px; right: var(--space-sm); background: var(--color-purple); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); z-index: 999; transition: top var(--dur-fast) var(--ease-premium); } .skip-link:focus { top: var(--space-sm); } :focus-visible { outline: 2px solid var(--color-blue-soft); outline-offset: 3px; border-radius: 4px; } /* --------------------------------------------------------------------- 3. Typography --------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-fa); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-en); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-purple-soft); direction: ltr; unicode-bidi: isolate; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--grad-primary); } .section-heading { max-width: 46rem; margin-inline-start: 0; } .section-heading h2 { margin-block: var(--space-sm) var(--space-sm); font-size: var(--fs-h2); } .section-heading p { color: var(--color-muted); font-size: 1.02rem; max-width: 40rem; } .gradient-text { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; } .text-gold { color: var(--color-gold); } /* --------------------------------------------------------------------- 4. Layout Utilities --------------------------------------------------------------------- */ .container { width: var(--container-w); margin-inline: auto; } section { position: relative; padding-block: var(--space-2xl); } .section-alt { background: linear-gradient(180deg, transparent, rgba(124, 92, 252, 0.035), transparent); } .divider-glow { height: 1px; width: 100%; background: var(--grad-gold-line); opacity: 0.5; } /* Glass card base, reused across skills / services / portfolio / hero badge */ .glass-card { background: var(--glass-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); backdrop-filter: blur(var(--glass-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); box-shadow: var(--shadow-card); transition: transform var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), background var(--dur-med) var(--ease-premium); } .glass-card:hover { border-color: var(--color-border-strong); background: var(--glass-bg-strong); } /* --------------------------------------------------------------------- 5. Loading Screen --------------------------------------------------------------------- */ .loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-md); background: var(--color-void); transition: opacity 0.7s var(--ease-premium), visibility 0.7s var(--ease-premium); } .loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loader__mark { font-family: var(--font-en); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.08em; direction: ltr; } .loader__mark span { color: var(--color-purple-soft); } .loader__bar { width: 200px; height: 2px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; } .loader__bar-fill { height: 100%; width: 0%; background: var(--grad-primary); border-radius: 2px; } .loader__percent { font-family: var(--font-en); font-size: 0.8rem; color: var(--color-muted); direction: ltr; } /* --------------------------------------------------------------------- 6. Custom Cursor --------------------------------------------------------------------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; z-index: 9998; transform: translate(-50%, -50%); will-change: transform; } .cursor-dot { width: 6px; height: 6px; background: var(--color-purple-soft); } .cursor-ring { width: 34px; height: 34px; border: 1px solid var(--color-border-strong); transition: width var(--dur-fast) var(--ease-premium), height var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-premium); } .cursor-ring.is-active { width: 60px; height: 60px; background: rgba(124, 92, 252, 0.08); border-color: var(--color-purple-soft); } @media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } } /* --------------------------------------------------------------------- 7. Header / Navigation --------------------------------------------------------------------- */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 900; height: var(--header-h); display: flex; align-items: center; } .site-header__inner { width: var(--container-w); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1.25rem; border-radius: 999px; border: 1px solid transparent; transition: background var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium); } .site-header.is-scrolled .site-header__inner { background: rgba(11, 17, 32, 0.55); border-color: var(--color-border); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: var(--shadow-card); } .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; } .brand__mark { width: 38px; height: 38px; } .brand__name { font-size: 1rem; letter-spacing: -0.01em; } .brand__name b { color: var(--color-purple-soft); } .nav { display: flex; align-items: center; gap: var(--space-lg); } .nav__list { display: flex; align-items: center; gap: var(--space-md); } .nav__link { position: relative; font-size: 0.92rem; color: var(--color-muted); padding-block: 0.4rem; transition: color var(--dur-fast) var(--ease-premium); } .nav__link::after { content: ""; position: absolute; bottom: -2px; right: 0; width: 0; height: 1.5px; background: var(--grad-primary); transition: width var(--dur-med) var(--ease-premium); } .nav__link:hover, .nav__link.is-active { color: var(--color-white); } .nav__link:hover::after, .nav__link.is-active::after { width: 100%; } .nav__actions { display: flex; align-items: center; gap: 0.9rem; } .theme-toggle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); transition: border-color var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium); } .theme-toggle:hover { border-color: var(--color-border-strong); transform: rotate(20deg); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } .nav-toggle { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-border); position: relative; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-toggle span { width: 18px; height: 1.5px; background: var(--color-white); transition: transform var(--dur-fast) var(--ease-premium), opacity var(--dur-fast) var(--ease-premium); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* --------------------------------------------------------------------- 8. Hero Section --------------------------------------------------------------------- */ .hero { min-height: 100vh; display: flex; align-items: center; padding-top: calc(var(--header-h) + var(--space-lg)); position: relative; overflow: clip; } .hero__bg { position: absolute; inset: -10% -10%; background: var(--grad-aurora); filter: blur(10px); z-index: -2; } .hero__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%); opacity: 0.5; z-index: -1; } .hero__inner { width: var(--container-w); margin-inline: auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-xl); align-items: center; } .hero__status { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; color: var(--color-muted); border: 1px solid var(--color-border); padding: 0.4rem 0.9rem; border-radius: 999px; margin-bottom: var(--space-md); } .hero__status .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2); animation: pulse-dot 2.4s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2); } 50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.08); } } .hero__title { font-size: var(--fs-hero); letter-spacing: -0.02em; } .hero__title .line { display: block; overflow: hidden; } .hero__lead { margin-top: var(--space-md); color: var(--color-muted); font-size: 1.1rem; max-width: 34rem; } .hero__role { font-family: var(--font-en); color: var(--color-blue-soft); direction: ltr; unicode-bidi: isolate; } .hero__cta { display: flex; gap: 1rem; margin-top: var(--space-lg); flex-wrap: wrap; } .hero__meta { display: flex; gap: var(--space-lg); margin-top: var(--space-xl); flex-wrap: wrap; } .hero__meta-item .num { font-family: var(--font-en); font-size: 1.9rem; font-weight: 700; direction: ltr; } .hero__meta-item .label { color: var(--color-muted); font-size: 0.85rem; } /* Signature element — floating glass identity badge */ .id-card { position: relative; padding: var(--space-lg) var(--space-md); border-radius: var(--radius-lg); transform-style: preserve-3d; will-change: transform; overflow: hidden; } .id-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255,255,255,0.09), transparent 40%); pointer-events: none; } .id-card__top { display: flex; align-items: center; gap: 1rem; } .id-card__avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--grad-primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: 700; font-size: 1.3rem; color: #fff; position: relative; } .id-card__avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--color-gold); opacity: 0.55; } .id-card__name { font-weight: 700; font-size: 1.05rem; } .id-card__role { font-family: var(--font-en); font-size: 0.82rem; color: var(--color-muted); direction: ltr; min-height: 1.2em; } .id-card__role .cursor-char { display: inline-block; width: 1px; background: var(--color-purple-soft); margin-inline-start: 2px; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .id-card__divider { height: 1px; background: var(--color-border); margin-block: var(--space-md); } .id-card__stack { display: flex; flex-wrap: wrap; gap: 0.5rem; } .id-card__chip { font-size: 0.72rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-muted); font-family: var(--font-en); direction: ltr; } .id-card__footer { margin-top: var(--space-md); display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--color-muted-2); } .id-card__footer span:first-child { direction: ltr; font-family: var(--font-en); } .hero__scroll-indicator { position: absolute; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: var(--color-muted-2); font-size: 0.75rem; font-family: var(--font-en); letter-spacing: 0.15em; direction: ltr; } .hero__scroll-indicator .wheel { width: 22px; height: 36px; border: 1.5px solid var(--color-border-strong); border-radius: 12px; position: relative; } .hero__scroll-indicator .wheel::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 6px; border-radius: 2px; background: var(--color-purple-soft); animation: scroll-wheel 1.8s ease-in-out infinite; } @keyframes scroll-wheel { 0% { opacity: 1; top: 6px; } 70% { opacity: 0; top: 18px; } 100% { opacity: 0; top: 18px; } } /* Floating ambient shapes shared by several sections */ .floating-shape { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; z-index: -1; pointer-events: none; } /* --------------------------------------------------------------------- 9. About Section --------------------------------------------------------------------- */ .about { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-xl); align-items: start; } .about__visual { position: sticky; top: calc(var(--header-h) + var(--space-md)); } .about__frame { padding: var(--space-md); border-radius: var(--radius-lg); position: relative; } .about__frame-inner { aspect-ratio: 4 / 5; border-radius: var(--radius-md); background: linear-gradient(160deg, rgba(124,92,252,0.25), rgba(76,141,255,0.15)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .about__frame-inner .monogram { font-family: var(--font-en); font-size: 5rem; font-weight: 800; color: rgba(255,255,255,0.9); direction: ltr; } .about__frame-badge { position: absolute; bottom: -18px; right: -18px; padding: 0.9rem 1.2rem; border-radius: var(--radius-md); display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; } .about__frame-badge .badge-num { font-family: var(--font-en); font-weight: 700; color: var(--color-gold); font-size: 1.1rem; } .about__body p { color: var(--color-muted); margin-bottom: var(--space-sm); } .about__body p strong { color: var(--color-white); font-weight: 600; } .about__highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: var(--space-lg); } .about__highlight { padding: 1.1rem 1.2rem; border-radius: var(--radius-sm); } .about__highlight h4 { font-size: 0.95rem; margin-bottom: 0.3rem; } .about__highlight p { font-size: 0.85rem; color: var(--color-muted); margin: 0; } /* --------------------------------------------------------------------- 10. Skills Section --------------------------------------------------------------------- */ .skills__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: var(--space-lg); } .skill-card { padding: var(--space-md); border-radius: var(--radius-md); position: relative; } .skill-card__icon { width: 46px; height: 46px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--grad-primary); margin-bottom: var(--space-sm); } .skill-card__icon svg { width: 22px; height: 22px; color: #fff; } .skill-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; } .skill-card p { color: var(--color-muted); font-size: 0.88rem; } .skill-card__bar { margin-top: var(--space-sm); height: 4px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; } .skill-card__bar-fill { height: 100%; width: 0%; border-radius: 4px; background: var(--grad-primary); transition: width 1.4s var(--ease-premium); } .skill-card__level { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 0.72rem; color: var(--color-muted-2); font-family: var(--font-en); direction: ltr; } /* --------------------------------------------------------------------- 11. Stats / Counters --------------------------------------------------------------------- */ .stats { padding-block: var(--space-xl); } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; } .stat-card { padding: var(--space-lg) var(--space-sm); border-radius: var(--radius-md); } .stat-card .num { font-family: var(--font-en); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; direction: ltr; } .stat-card .num .plus { color: var(--color-gold); } .stat-card .label { margin-top: 0.4rem; color: var(--color-muted); font-size: 0.9rem; } /* --------------------------------------------------------------------- 12. Services Section --------------------------------------------------------------------- */ .services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: var(--space-lg); } .service-card { padding: var(--space-md); border-radius: var(--radius-md); position: relative; display: flex; flex-direction: column; gap: 0.9rem; } .service-card__index { font-family: var(--font-en); font-size: 0.75rem; color: var(--color-muted-2); direction: ltr; } .service-card__icon { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--color-border-strong); display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium); } .service-card:hover .service-card__icon { background: var(--grad-primary); transform: scale(1.05); } .service-card__icon svg { width: 20px; height: 20px; } .service-card h3 { font-size: 1.05rem; } .service-card p { color: var(--color-muted); font-size: 0.87rem; flex-grow: 1; } .service-card__link { font-size: 0.82rem; color: var(--color-blue-soft); display: inline-flex; align-items: center; gap: 0.4rem; transition: gap var(--dur-fast) var(--ease-premium); } .service-card:hover .service-card__link { gap: 0.7rem; } /* --------------------------------------------------------------------- 13. Portfolio Section --------------------------------------------------------------------- */ .portfolio__filter { display: flex; gap: 0.6rem; margin-top: var(--space-md); flex-wrap: wrap; } .filter-btn { padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid var(--color-border); font-size: 0.85rem; color: var(--color-muted); transition: all var(--dur-fast) var(--ease-premium); } .filter-btn:hover { color: var(--color-white); border-color: var(--color-border-strong); } .filter-btn.is-active { color: #fff; border-color: transparent; background: var(--grad-primary); } .portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: var(--space-lg); } .project-card { border-radius: var(--radius-md); overflow: hidden; position: relative; display: flex; flex-direction: column; } .project-card__media { aspect-ratio: 4 / 3; overflow: hidden; position: relative; } .project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-premium); } .project-card:hover .project-card__media img { transform: scale(1.08); } .project-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,10,0) 40%, rgba(5,6,10,0.92) 100%); display: flex; align-items: flex-end; padding: var(--space-sm); opacity: 0; transition: opacity var(--dur-med) var(--ease-premium); } .project-card:hover .project-card__overlay { opacity: 1; } .project-card__view { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border-radius: 999px; background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); font-size: 0.85rem; transform: translateY(10px); transition: transform var(--dur-med) var(--ease-premium), background var(--dur-fast) var(--ease-premium); } .project-card:hover .project-card__view { transform: translateY(0); } .project-card__view:hover { background: var(--grad-primary); } .project-card__body { padding: var(--space-sm) var(--space-md) var(--space-md); } .project-card__tag { font-family: var(--font-en); font-size: 0.7rem; color: var(--color-purple-soft); letter-spacing: 0.1em; text-transform: uppercase; direction: ltr; } .project-card__body h3 { margin-top: 0.4rem; font-size: 1.1rem; } .project-card__body p { margin-top: 0.4rem; color: var(--color-muted); font-size: 0.88rem; } /* --------------------------------------------------------------------- 14. Contact Section --------------------------------------------------------------------- */ .contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-xl); } .contact__info { display: flex; flex-direction: column; gap: 1.25rem; } .contact__item { display: flex; align-items: flex-start; gap: 1rem; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); } .contact__item-icon { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(124, 92, 252, 0.12); color: var(--color-purple-soft); } .contact__item-icon svg { width: 19px; height: 19px; } .contact__item h4 { font-size: 0.95rem; margin-bottom: 0.2rem; } .contact__item p, .contact__item a { color: var(--color-muted); font-size: 0.88rem; direction: ltr; unicode-bidi: isolate; display: inline-block; } .contact__socials { display: flex; gap: 0.7rem; margin-top: 0.5rem; } .social-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease-premium); position: relative; overflow: hidden; } .social-btn svg { width: 18px; height: 18px; z-index: 1; } .social-btn:hover { border-color: transparent; transform: translateY(-3px); box-shadow: var(--shadow-glow-purple); } .social-btn:hover::before { content: ""; position: absolute; inset: 0; background: var(--grad-primary); } .contact__form { padding: var(--space-lg); border-radius: var(--radius-lg); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { margin-bottom: 1.1rem; position: relative; } .form-group label { display: block; font-size: 0.85rem; color: var(--color-muted); margin-bottom: 0.45rem; } .form-group input, .form-group textarea { width: 100%; padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: rgba(255,255,255,0.03); font-size: 0.92rem; transition: border-color var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-premium); } .form-group input:focus, .form-group textarea:focus { border-color: var(--color-purple-soft); background: rgba(255,255,255,0.05); } .form-group textarea { resize: vertical; min-height: 120px; } .form-error { font-size: 0.76rem; color: #ff8a8a; margin-top: 0.35rem; min-height: 1em; } .form-status { margin-top: 1rem; font-size: 0.88rem; color: var(--color-muted); } .form-status.is-success { color: #4ade80; } /* --------------------------------------------------------------------- 15. Footer --------------------------------------------------------------------- */ .site-footer { padding-block: var(--space-lg); border-top: 1px solid var(--color-border); } .site-footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .site-footer p { color: var(--color-muted-2); font-size: 0.85rem; } .footer-nav { display: flex; gap: 1.2rem; } .footer-nav a { font-size: 0.85rem; color: var(--color-muted); transition: color var(--dur-fast) var(--ease-premium); } .footer-nav a:hover { color: var(--color-white); } .back-to-top { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; transition: transform var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium); } .back-to-top:hover { transform: translateY(-4px); border-color: var(--color-border-strong); } .back-to-top svg { width: 16px; height: 16px; } /* --------------------------------------------------------------------- 16. Buttons & Interactive Elements --------------------------------------------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.9rem; border-radius: 999px; font-size: 0.92rem; font-weight: 600; overflow: hidden; isolation: isolate; transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium); } .btn:active { transform: scale(0.97); } .btn--primary { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-glow-purple); } .btn--primary:hover { box-shadow: 0 24px 70px -18px rgba(124, 92, 252, 0.65); transform: translateY(-2px); } .btn--ghost { border: 1px solid var(--color-border-strong); color: var(--color-white); } .btn--ghost:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); } .btn--block { width: 100%; } /* Magnetic wrapper — JS toggles transform via inline style */ .magnetic { will-change: transform; } /* Ripple */ .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.45); transform: scale(0); animation: ripple-anim 0.65s ease-out forwards; pointer-events: none; z-index: 0; } @keyframes ripple-anim { to { transform: scale(3.2); opacity: 0; } } /* --------------------------------------------------------------------- 17. Scroll / Reveal Animations --------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(28px); } .reveal-ready [data-reveal] { transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium); } .js-fallback [data-reveal] { opacity: 1; transform: none; } /* --------------------------------------------------------------------- 18. Responsive Breakpoints --------------------------------------------------------------------- */ @media (max-width: 1080px) { .hero__inner { grid-template-columns: 1fr; } .id-card { max-width: 420px; margin-inline-start: auto; } .about { grid-template-columns: 1fr; } .about__visual { position: static; max-width: 360px; } .services__grid { grid-template-columns: repeat(2, 1fr); } .skills__grid { grid-template-columns: repeat(2, 1fr); } .portfolio__grid { grid-template-columns: repeat(2, 1fr); } .stats__grid { grid-template-columns: repeat(2, 1fr); } .contact { grid-template-columns: 1fr; } } @media (max-width: 760px) { :root { --header-h: 72px; } .nav { position: fixed; inset-inline: 0; top: var(--header-h); background: rgba(5,6,10,0.97); backdrop-filter: blur(20px); flex-direction: column; padding: var(--space-lg) var(--space-md); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: all var(--dur-med) var(--ease-premium); } .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-md); width: 100%; } .nav__link { font-size: 1.1rem; } .nav-toggle { display: flex; } .services__grid { grid-template-columns: 1fr; } .skills__grid { grid-template-columns: 1fr; } .portfolio__grid { grid-template-columns: 1fr; } .stats__grid { grid-template-columns: repeat(2, 1fr); } .form-row { grid-template-columns: 1fr; } .hero__cta { flex-direction: column; align-items: stretch; } .hero__meta { gap: var(--space-md); } .site-footer__inner { flex-direction: column; text-align: center; } } /* --------------------------------------------------------------------- 19. Accessibility & Reduced Motion --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } }