/* Theme Name: Faidco Theme Description: A custom theme matching modern design principles. Version: 4.0 Author: Faidco */ :root { --bg-color: #ffffff; --text-primary: #202124; --text-secondary: #5f6368; --accent-blue: #1a73e8; --btn-dark: #202124; --btn-light: #f1f3f4; --card-border: #dadce0; /* Typography System */ --font-heading: 'Plus Jakarta Sans', sans-serif; --font-body: 'DM Sans', sans-serif; /* ─── Spacing Scale (8pt grid) ─── */ --sp-1: 8px; /* micro — icon gap, tag padding */ --sp-2: 16px; /* small — label→heading gap */ --sp-3: 24px; /* base — heading→text gap */ --sp-4: 32px; /* medium — text→CTA gap */ --sp-5: 48px; /* large — card gap, subsection */ --sp-6: 80px; /* xl — section padding mobile */ --sp-7: 112px; /* 2xl — section padding tablet */ --sp-8: 140px; /* 3xl — section padding desktop */ /* Legacy aliases (don't break existing rules) */ --space-xs: var(--sp-1); --space-sm: var(--sp-2); --space-md: var(--sp-3); --space-lg: var(--sp-5); --space-xl: var(--sp-6); --space-2xl: var(--sp-7); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background-color: var(--bg-color); color: var(--text-primary); line-height: 1.75; font-size: 17px; letter-spacing: -0.01em; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Setup Canvas Background — Dot Grid + Ambient Glow */ #antigravity-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 1; } /* Layout Utilities */ .container { max-width: 1200px; margin: 0 auto; padding: 0 48px; /* 48px gutters — industry standard */ } /* ─── Section Spacing — world class ─── */ .section { padding: var(--sp-8) 0; /* 140px desktop */ } /* First section after hero gets a bit less top */ .hero-section+.section { padding-top: var(--sp-7); /* 112px */ } .section-label { display: block; font-family: var(--font-body); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-1); /* 8px label→heading */ } /* ─── Global Heading Defaults (non-front-page) ─── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.25; font-weight: 700; color: var(--text-primary); } /* Default sizes — safe for articles, pages, archives */ h1 { font-size: 2rem; letter-spacing: -0.5px; } h2 { font-size: 1.6rem; letter-spacing: -0.3px; margin-bottom: var(--sp-3); } h3 { font-size: 1.3rem; letter-spacing: -0.2px; } h4 { font-size: 1.1rem; } h5 { font-size: 1rem; } h6 { font-size: 0.9rem; } p.lead { font-size: 17px; line-height: 1.8; color: var(--text-secondary); max-width: 680px; margin-bottom: var(--sp-4); } /* ───────────────────────────────────────────────────── FRONT PAGE — Scoped font sizes (won't bleed to other pages) WordPress adds class="front-page" to on home page ───────────────────────────────────────────────────── */ /* Hero Title */ .front-page .hero-title { font-size: clamp(40px, 5.5vw, 72px); letter-spacing: -2px; line-height: 1.08; font-weight: 700; margin-bottom: var(--sp-3); max-width: 860px; color: var(--text-primary); } /* Section h2 on front page */ .front-page .section h2, .front-page .blogs-header h2 { font-size: clamp(28px, 3.2vw, 42px); /* كبرناها — title رئيسي */ letter-spacing: -1px; line-height: 1.15; margin-bottom: var(--sp-3); } /* About dark card h2 */ .front-page .about-redesigned .about-top h2 { font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -1px; line-height: 1.2; } /* Feature rows h3 (Technology section) */ .front-page .feature-text h3 { font-size: clamp(30px, 3.5vw, 50px); letter-spacing: -1.5px; line-height: 1.1; margin-bottom: var(--sp-md); } /* Brand slider h3 */ .front-page .brand-slide-card h3 { font-size: clamp(28px, 3vw, 44px); letter-spacing: -1.5px; line-height: 1.15; } /* Stat numbers (big) */ .front-page .about-stat-value, .front-page .stat-value { font-size: clamp(36px, 4vw, 52px); letter-spacing: -2px; line-height: 1; } /* Highlight card h4 */ .front-page .about-highlight-card h4 { font-size: 17px; letter-spacing: -0.3px; } /* Header */ .site-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 48px; /* aligned with container gutters */ position: relative; width: 100%; z-index: 100; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .site-header.scrolled { /* No longer needed but keep for safety or remove styling */ border-bottom: 1px solid var(--card-border); } .site-branding { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: var(--text-primary); text-decoration: none; letter-spacing: -0.3px; } .site-branding img { height: 40px; /* Matched to footer logo */ } .main-navigation ul { list-style: none; display: flex; gap: 32px; } .main-navigation a { text-decoration: none; color: var(--text-secondary); font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; transition: color 0.2s; } .main-navigation a:hover { color: var(--text-primary); } .header-cta { background-color: var(--btn-dark); color: #fff; padding: 10px 24px; border-radius: 24px; text-decoration: none; font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 8px; transition: transform 0.2s; } .header-cta:hover { transform: scale(1.02); } /* Hero Section */ .hero-section { min-height: 55vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--sp-7) var(--sp-5); /* 112px — tighter than 140 */ position: relative; } /* Professional badge above hero title */ .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(26, 115, 232, 0.07); border: 1px solid rgba(26, 115, 232, 0.18); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; color: var(--accent-blue); text-transform: uppercase; margin-bottom: var(--sp-2); /* 16px */ } .hero-badge::before { content: ''; width: 6px; height: 6px; background: var(--accent-blue); border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } .hero-logo-group { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-2); font-size: 24px; font-weight: 500; color: var(--text-secondary); } .hero-logo-group img { height: 32px; } /* Front-page hero title override */ .front-page .hero-title { font-size: clamp(38px, 5vw, 64px); line-height: 1.1; font-weight: 800; letter-spacing: -2.5px; max-width: 820px; margin: 0 auto var(--sp-2) auto; /* 16px below title */ color: var(--text-primary); /* Professional gradient on key word */ background: linear-gradient(135deg, #202124 0%, #202124 55%, #1a73e8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Lead paragraph in hero — tighter */ .hero-section p.lead { font-size: 16px; line-height: 1.7; color: var(--text-secondary); max-width: 560px; margin: 0 auto var(--sp-4) auto; /* 32px below subtitle */ } .hero-actions { display: flex; gap: var(--sp-2); justify-content: center; align-items: center; flex-wrap: wrap; } .btn { padding: 14px 32px; border-radius: 32px; font-size: 16px; font-weight: 500; text-decoration: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; } .btn-primary { background-color: var(--btn-dark); color: #fff; } .btn-secondary { background-color: var(--btn-light); color: var(--text-primary); } .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); } .btn-secondary:hover { background-color: #e8eaed; } .btn-block { width: 100%; justify-content: center; } /* About Grid & Dark Card */ .dark-card { background-color: #000; color: #fff; border-radius: 32px; padding: var(--sp-8) var(--sp-7); /* 140px 112px */ position: relative; overflow: hidden; background-image: radial-gradient(circle at 10% 20%, rgba(66, 133, 244, 0.4) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(66, 133, 244, 0.2) 0%, transparent 30%); } /* Ensure text inside dark card is white */ .dark-card h2, .dark-card .section-label, .dark-card .lead, .dark-card p, .dark-card strong, .dark-card i { color: #fff !important; } .dark-card .section-label { opacity: 0.7; } .dark-card .lead { color: #e8eaed !important; } /* ===== Redesigned About Section ===== */ .about-redesigned { text-align: center; } .about-redesigned .about-top { max-width: 820px; margin: 0 auto 60px auto; } .about-redesigned .about-top h2 { font-family: var(--font-heading); font-size: clamp(32px, 3.5vw, 44px); line-height: 1.2; font-weight: 700; letter-spacing: -1px; margin-bottom: var(--space-md); color: #fff !important; } .about-redesigned .about-body-text { font-family: var(--font-body); font-size: 17px; line-height: 1.85; color: #9aa0a6 !important; max-width: 700px; margin: 0 auto; letter-spacing: 0.01em; } /* Stats Row */ .about-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 48px 0; margin-bottom: 60px; } .about-stat-item { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; } .about-stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 15%; height: 70%; width: 1px; background: rgba(255, 255, 255, 0.1); } .about-stat-value { font-family: var(--font-heading); font-size: 52px; font-weight: 700; color: #fff !important; line-height: 1; letter-spacing: -2px; } .about-stat-label { font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: #9aa0a6 !important; font-weight: 500; margin-top: 6px; } /* Highlights Grid */ .about-highlights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; } .about-highlight-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 32px 28px; transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .about-highlight-card:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); transform: translateY(-4px); } .about-highlight-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: linear-gradient(135deg, rgba(66, 133, 244, 0.3), rgba(66, 133, 244, 0.1)); margin-bottom: 20px; } .about-highlight-icon i { font-size: 22px; color: #8ab4f8 !important; } .about-highlight-card h4 { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: #fff !important; margin-bottom: 10px; letter-spacing: -0.3px; } .about-highlight-card p { font-family: var(--font-body); font-size: 14px; line-height: 1.75; color: #9aa0a6 !important; margin: 0; letter-spacing: 0.01em; } /* Responsive */ @media (max-width: 900px) { .about-redesigned { padding: 48px 24px; } .about-redesigned .about-top h2 { font-size: 30px; } .about-stats-row { grid-template-columns: 1fr; gap: 32px; padding: 32px 0; } .about-stat-item:not(:last-child)::after { display: none; } .about-highlights-grid { grid-template-columns: 1fr; } } /* Feature Rows (Technology Section) */ .feature-row { display: flex; align-items: stretch; gap: 80px; margin-bottom: 120px; } .feature-row:last-child { margin-bottom: 0; } /* Alternating Layout */ .feature-row.image-left { flex-direction: row-reverse; } .feature-text { flex: 1; display: flex; flex-direction: column; justify-content: center; } .feature-text h3 { font-family: var(--font-heading); font-size: clamp(30px, 3.5vw, 50px); line-height: 1.1; font-weight: 700; margin-bottom: var(--sp-4); /* 32px — كافي بين العنوان والنص */ color: var(--text-primary); letter-spacing: -1.5px; } .feature-text p { font-family: var(--font-body); font-size: 16px; /* أصغر شوية — contrast مع العنوان الكبير */ line-height: 1.85; /* line-height مريح للقراءة */ color: var(--text-secondary); max-width: 500px; letter-spacing: 0.01em; padding-top: 22px; } .feature-image-card { flex: 1; border-radius: 20px; overflow: hidden; padding: 0; background: none; box-shadow: none; aspect-ratio: 4 / 3; } .feature-image-card img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 20px; filter: grayscale(100%); transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .feature-row:hover .feature-image-card img { filter: grayscale(0%); transform: scale(1.03); } /* Responsive */ @media (max-width: 900px) { .feature-row, .feature-row.image-left { flex-direction: column-reverse; /* Text on top, or image on top? Usually Image top on mobile, but text first is accessible. Let's do Text Top. No wait, actually standard is Image then Text. */ flex-direction: column; gap: 40px; text-align: left; } .feature-text h3 { font-size: 40px; } } /* Cards Grid */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .ant-card { background: #fff; border: 1px solid var(--card-border); border-radius: 24px; padding: 32px; transition: box-shadow 0.2s; } .ant-card:hover { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); /* Subtle smooth shadow */ } .card-icon { font-size: 32px; margin-bottom: 20px; color: var(--text-primary); } .ant-card h3 { font-family: var(--font-heading); font-size: 20px; margin-bottom: var(--space-xs); font-weight: 700; letter-spacing: -0.3px; line-height: 1.3; } .ant-card p { font-family: var(--font-body); font-size: 15px; color: var(--text-secondary); line-height: 1.8; letter-spacing: 0.01em; } /* Feature Atlas (Strategy) */ .feature-block { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .feature-visual img { width: 100%; border-radius: 24px; border: 1px solid var(--card-border); aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(100%); transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .feature-block:hover .feature-visual img { filter: grayscale(0%); transform: scale(1.03); } /* Forms */ .contact-form { background: #fff; padding: 40px; border-radius: 24px; border: 1px solid var(--card-border); } .form-group { margin-bottom: 20px; } input, select, textarea { width: 100%; padding: 14px 20px; border-radius: 12px; /* Soft rounding */ border: 1px solid var(--card-border); font-family: inherit; font-size: 16px; background: var(--btn-light); /* Light gray input bg */ transition: all 0.2s; margin-bottom: 16px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--text-primary); background: #fff; } /* Stats */ .scale-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 80px; padding-top: 60px; border-top: 1px solid var(--card-border); } .scale-stat { text-align: center; } .stat-value { display: block; font-family: var(--font-heading); font-size: 52px; font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 10px; letter-spacing: -2px; } .stat-desc { font-family: var(--font-body); font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 2px; font-weight: 500; } /* Brands Slider */ .brands-slider { width: 100%; padding: 60px 0; overflow: hidden; } .swiper-slide { display: flex; justify-content: center; } .brand-slide-card { background: transparent; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; padding: 20px; max-width: 400px; } /* Particles behind the card content (simulated with radial gradients for safety/performance) */ .brand-particles { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; border-radius: 50%; z-index: -1; opacity: 0.5; background-image: radial-gradient(circle, #E8F0FE 2px, transparent 2.5px); background-size: 20px 20px; /* Pattern */ mask-image: radial-gradient(circle, black 30%, transparent 70%); } .brand-tag { display: inline-block; padding: 5px 10px; background: rgba(0, 0, 0, 0.06); border-radius: 4px; font-size: 10px; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 1px; font-weight: 600; margin-bottom: var(--sp-2); /* 16px — was 24px */ } .brand-slide-card { background: transparent; text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; padding: 32px 24px; min-height: 200px; width: 100%; } .brand-slide-card h3 { font-family: var(--font-heading); font-size: clamp(18px, 1.8vw, 22px); /* أصغر — brand name مش title */ font-weight: 600; line-height: 1.3; margin-bottom: var(--sp-2); color: var(--text-primary); letter-spacing: -0.3px; } .brand-btn { display: inline-block; padding: 12px 24px; background: #202124; /* Black pill */ color: #fff; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 500; transition: transform 0.2s, background 0.2s; } .brand-btn:hover { background: #3c4043; transform: translateY(-2px); } .swiper-pagination-bullet-active { background: var(--text-primary) !important; } /* Blogs Section */ .blogs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; } .blogs-header h2 { font-family: var(--font-heading); font-size: clamp(38px, 4vw, 58px); font-weight: 700; margin: 0; color: var(--text-primary); line-height: 1.1; letter-spacing: -1.5px; } .view-all-btn { display: inline-block; padding: 12px 24px; background: #f1f3f4; color: var(--text-primary); text-decoration: none; border-radius: 999px; font-size: 14px; font-weight: 500; transition: background 0.2s; } .view-all-btn:hover { background: #e8eaed; } .blogs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .blog-card { display: flex; flex-direction: column; } .blog-thumb { width: 100%; aspect-ratio: 1/1; /* Square images as per design */ background-color: #000; border-radius: 24px; overflow: hidden; margin-bottom: 24px; position: relative; } .blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .blog-card:hover .blog-thumb img { transform: scale(1.05); } .blog-title { font-family: var(--font-heading); font-size: 22px; font-weight: 700; margin: 0 0 var(--space-sm) 0; line-height: 1.35; letter-spacing: -0.5px; } .blog-title a { color: var(--text-primary); text-decoration: none; } .blog-meta { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; display: flex; gap: 12px; } .blog-read-more { font-size: 14px; font-weight: 500; color: var(--text-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .blog-read-more:hover { text-decoration: underline; } @media (max-width: 900px) { .blogs-grid { grid-template-columns: 1fr; gap: 60px; } .blogs-header { flex-direction: column; align-items: flex-start; gap: 20px; } } /* Main Footer Layout */ .site-footer { padding: 80px 0 40px; border-top: 1px solid var(--card-border); margin-top: 100px; background-color: var(--bg-color); text-align: left; /* Reset text align */ } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; /* 3 Columns now */ gap: 40px; margin-bottom: 60px; } .footer-logo { display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-family: var(--font-heading); font-weight: 700; font-size: 18px; margin-bottom: var(--space-sm); letter-spacing: -0.3px; } .footer-tagline { font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); line-height: 1.8; margin-bottom: var(--space-md); max-width: 300px; letter-spacing: 0.01em; } .footer-social { display: flex; gap: 16px; } .footer-social a { color: var(--text-secondary); font-size: 20px; transition: color 0.2s; } .footer-social a:hover { color: var(--text-primary); } .footer-col h4 { font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--text-primary); margin-bottom: 24px; letter-spacing: 0.5px; } .footer-col ul { list-style: none; padding: 0; } .footer-col ul li { margin-bottom: 12px; } .footer-col ul li a, .footer-address { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-style: normal; line-height: 1.6; transition: color 0.2s; } .footer-col ul li a:hover { color: var(--accent-blue); } /* Footer Bottom Legal */ .footer-legal { border-top: 1px solid var(--card-border); padding-top: 32px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; font-size: 12px; color: #9aa0a6; /* Lighter text for legal */ } .legal-info p { margin-bottom: 8px; } .legal-meta { text-align: right; } .legal-meta span { display: block; margin-bottom: 4px; } /* ─── Tablet (≤ 1024px) ─── */ @media (max-width: 1024px) { .container { padding: 0 32px; } .section { padding: var(--sp-7) 0; /* 112px */ } .hero-section { padding: var(--sp-7) var(--sp-4); } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; } .footer-brand { grid-column: span 2; } } /* ─── Mobile (≤ 768px) ─── */ @media (max-width: 768px) { .container { padding: 0 20px; } .section { padding: var(--sp-6) 0; /* 80px */ } .site-header { padding: 16px 20px; } .nav-menu, .desktop-only { display: none !important; } .hero-section { padding: var(--sp-6) var(--sp-2); /* 80px top/bottom */ } .hero-title { font-size: 36px; letter-spacing: -1.5px; margin-bottom: var(--sp-3); } .hero-actions { flex-direction: column; width: 100%; } .about-grid, .feature-block { grid-template-columns: 1fr; } h2 { font-size: 24px; } .dark-card { padding: var(--sp-6) var(--sp-3); /* 80px 24px */ border-radius: 20px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; } .footer-brand { grid-column: 1 / -1; } .footer-legal { flex-direction: column; } .legal-meta { text-align: left; } } /* Footer Logo Grayscale */ .footer-logo img { filter: grayscale(100%); opacity: 0.8; transition: all 0.3s; } .footer-logo img:hover { filter: grayscale(0%); opacity: 1; } /* Cookie Banner */ #cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; border-top: 1px solid #eee; padding: 20px; z-index: 9999; box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05); display: flex; justify-content: space-between; align-items: center; gap: 20px; transform: translateY(100%); transition: transform 0.3s ease-in-out; } #cookie-banner.visible { transform: translateY(0); } #cookie-banner p { margin: 0; font-size: 14px; color: var(--text-secondary); max-width: 800px; } #cookie-accept { white-space: nowrap; padding: 10px 24px; font-size: 14px; } /* ========================================= Redesign Styles (Single, Page, Archive) ========================================= */ /* Utilities */ .container-small { max-width: 800px; margin: 0 auto; padding: 0 24px; } /* Page Modern */ .page-hero { padding: 80px 0 40px; background: linear-gradient(to bottom, #f8f9fa, #fff); text-align: center; margin-bottom: 40px; } .page-title { font-size: 48px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; line-height: 1.1; } /* Modern Article */ .article-header { text-align: center; padding: 60px 0 40px; } .article-cat { display: inline-block; padding: 6px 16px; background: #e8f0fe; color: var(--accent-blue); border-radius: 20px; font-size: 13px; font-weight: 600; text-transform: uppercase; margin-bottom: 20px; text-decoration: none; transition: all 0.2s; } .article-cat:hover { background: var(--accent-blue); color: #fff; } .article-title { font-family: var(--font-heading); font-size: clamp(36px, 4vw, 54px); font-weight: 700; line-height: 1.15; margin-bottom: var(--space-md); color: var(--text-primary); letter-spacing: -1.5px; } .article-meta-bottom { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 15px; color: var(--text-secondary); } .author-info { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text-primary); } .author-info img { border-radius: 50%; } .article-featured-image { margin-bottom: 50px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); } .article-featured-image img { width: 100%; height: auto; display: block; } .article-content { font-family: var(--font-body); font-size: 18px; line-height: 1.9; color: #333; margin-bottom: var(--space-xl); letter-spacing: 0.01em; } .article-content p, .article-content h2, .article-content h3, .article-content ul, .article-content ol { margin-bottom: 24px; } .article-content h2 { font-size: 32px; margin-top: 48px; color: var(--text-primary); } /* Tags */ .article-tags { margin-bottom: 40px; display: flex; gap: 12px; } .article-tags a { color: var(--text-secondary); font-size: 14px; text-decoration: none; border: 1px solid #eee; padding: 6px 14px; border-radius: 6px; transition: all 0.2s; } .article-tags a:hover { border-color: var(--accent-blue); color: var(--accent-blue); } /* Navigation */ .article-navigation { display: flex; justify-content: space-between; padding-top: 30px; border-top: 1px solid #f0f0f0; margin-bottom: 60px; } .nav-prev, .nav-next { max-width: 45%; text-decoration: none; display: flex; flex-direction: column; } .nav-label { font-size: 13px; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .nav-title { font-size: 18px; font-weight: 600; color: var(--text-primary); transition: color 0.2s; } .nav-prev:hover .nav-title, .nav-next:hover .nav-title { color: var(--accent-blue); } /* Archives */ .archive-header { background: #f8f9fa; padding: 80px 0; text-align: center; margin-bottom: 60px; } .archive-label { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; color: var(--text-secondary); font-weight: 600; } .archive-title { font-size: 42px; margin-bottom: 16px; } .archive-desc { max-width: 600px; margin: 0 auto; font-size: 18px; color: var(--text-secondary); } .archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 40px; margin-bottom: 80px; } .post-card { background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; } .post-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .post-card-img img { width: 100%; height: 240px; object-fit: cover; display: block; } .post-card-content { padding: 24px; } .post-card-date { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; display: block; } .post-card-title { font-size: 22px; line-height: 1.4; margin-bottom: 12px; } .post-card-title a { text-decoration: none; color: var(--text-primary); transition: color 0.2s; } .post-card-title a:hover { color: var(--accent-blue); } .post-card-excerpt { font-size: 15px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; } .post-card-link { font-size: 14px; font-weight: 600; color: var(--accent-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } /* Pagination */ .pagination-wrap { text-align: center; margin-bottom: 80px; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #eee; color: var(--text-primary); text-decoration: none; margin: 0 5px; font-weight: 600; transition: all 0.2s; } .pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--text-primary); color: #fff; border-color: var(--text-primary); } /* Comments Section */ .comments-area { margin-top: 60px; padding-top: 40px; border-top: 1px solid #eee; } .comments-title { font-size: 24px; font-weight: 700; margin-bottom: 30px; display: flex; align-items: center; gap: 10px; } .comments-title i { color: var(--accent-blue); } .comment-list { list-style: none; padding: 0; margin: 0 0 40px 0; } .comment-body { display: flex; gap: 20px; margin-bottom: 30px; } .comment-list .children { list-style: none; padding-left: 60px; margin: 0; } .comment-avatar img { border-radius: 50%; width: 50px; height: 50px; object-fit: cover; } .comment-content { flex: 1; background: #f9f9f9; padding: 20px; border-radius: 12px; } .comment-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .comment-author-info { display: flex; flex-direction: column; } .comment-author-info cite { font-style: normal; font-weight: 600; color: var(--text-primary); font-size: 15px; } .comment-author-info cite a { color: var(--text-primary); text-decoration: none; } .comment-date { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .comment-text-content p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 10px; } .comment-text-content p:last-child { margin-bottom: 0; } .reply-action a { font-size: 13px; font-weight: 600; color: var(--accent-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .reply-action a:hover { text-decoration: underline; } /* Comment Form */ .comment-respond { background: #fff; padding: 30px; border: 1px solid #eee; border-radius: 12px; } .comment-reply-title { font-size: 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .comment-reply-title i { color: var(--accent-blue); } .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .comment-form-comment { grid-column: 1 / -1; } .form-input, .form-textarea { width: 100%; padding: 12px 15px; border: 1px solid #e0e0e0; border-radius: 8px; font-family: inherit; font-size: 15px; transition: all 0.2s; } .form-input:focus, .form-textarea:focus { border-color: var(--accent-blue); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .form-submit { grid-column: 1 / -1; margin-top: 10px; } /* Responsive Comments */ @media (max-width: 768px) { .comment-body { gap: 15px; } .comment-list .children { padding-left: 20px; } .comment-avatar img { width: 40px; height: 40px; } .comment-form { grid-template-columns: 1fr; } } /* ============================================= PREMIUM ANIMATIONS & TRANSITIONS SYSTEM ============================================= */ /* --- Page Load Transition --- */ @keyframes faidco-page-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } body { animation: faidco-page-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } /* --- Page Exit Overlay --- */ #faidco-page-overlay { position: fixed; inset: 0; background: #fff; z-index: 99999; pointer-events: none; opacity: 0; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1); } #faidco-page-overlay.active { opacity: 1; pointer-events: all; } /* --- Scroll Reveal Base --- */ [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } [data-reveal="left"] { transform: translateX(-40px); } [data-reveal="right"] { transform: translateX(40px); } [data-reveal="scale"] { transform: scale(0.94); } [data-reveal="fade"] { transform: none; } [data-reveal].is-visible { opacity: 1; transform: none; } /* --- Stagger children --- */ [data-stagger]>* { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } [data-stagger].is-visible>*:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: none; } [data-stagger].is-visible>*:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: none; } [data-stagger].is-visible>*:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: none; } [data-stagger].is-visible>*:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: none; } [data-stagger].is-visible>*:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: none; } [data-stagger].is-visible>*:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: none; } /* --- Smooth Link Hover Underline --- */ a { transition: color 0.2s ease, opacity 0.2s ease; } /* --- Card Lift on Hover --- */ .ant-card, .about-highlight-card, .blog-card, .post-card { transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease; } .ant-card:hover, .blog-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); } /* --- Button Press Effect --- */ .btn, .btn-primary, .btn-secondary, .header-cta, .brand-btn, .view-all-btn { transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .btn:active, .header-cta:active, .brand-btn:active { transform: scale(0.96) !important; } /* --- Number Count Animation --- */ @keyframes faidco-count-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .about-stat-value.counting { animation: faidco-count-up 0.5s ease both; } /* --- Smooth Scroll Behavior --- */ html { scroll-behavior: smooth; scroll-padding-top: 80px; } /* --- Section Divider Fade --- */ .section::before { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--card-border), transparent); margin-bottom: var(--space-2xl); opacity: 0.6; } .section:first-of-type::before, .hero-section::before, .dark-card::before { display: none; } /* --- Image Parallax Hint --- */ .feature-image-card, .blog-thumb { overflow: hidden; } /* --- Reduced Motion Respect --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal], [data-stagger]>* { opacity: 1 !important; transform: none !important; } }