/* MentorNation — A+++ Supreme Artistic Edition v10.0 */ /* Philosophy: Islamic geometric art × carved stone elegance × editorial photography × micro-interactions */ /* Fonts loaded via in HTML for reliability + preconnect */ /* @import removed — was causing slow/unreliable Arabic font loading */ /* === DESIGN TOKENS === */ :root { --white:#ffffff; --bg:#fafafa; --bg-warm:#fdfcfb; --bg-subtle:#f5f5f7; --bg-cream:#faf8f5; --bg-pattern:rgba(0,108,53,0.015); --surface:#ffffff; --border:rgba(0,0,0,0.06); --border-hover:rgba(0,0,0,0.12); --border-focus:rgba(0,108,53,0.35); --border-art:rgba(0,108,53,0.08); --text:#111113; --text-2:#555; --text-3:#999; --text-4:#bbb; --red-deep:#991b1b; --green:#006C35; --green-light:#f0fdf4; --green-50:#f0fdf4; --green-100:#dcfce7; --green-200:#bbf7d0; --green-hover:#005a2c; --green-glow:rgba(0,108,53,0.12); --green-deep:#003d1e; --gold:#C8A951; --gold-light:#d4b96a; --gold-50:#fefce8; --gold-glow:rgba(200,169,81,0.15); --gold-dark:#a68b3a; --red:#ef4444; --red-50:#fef2f2; /* Radii */ --radius:12px; --radius-lg:18px; --radius-xl:24px; --radius-2xl:32px; --radius-pill:100px; /* Shadows */ --shadow-xs:0 1px 2px rgba(0,0,0,0.04); --shadow-sm:0 1px 3px rgba(0,0,0,0.04),0 4px 8px -2px rgba(0,0,0,0.04); --shadow:0 2px 4px rgba(0,0,0,0.02),0 8px 24px -4px rgba(0,0,0,0.06); --shadow-lg:0 4px 8px rgba(0,0,0,0.02),0 16px 40px -8px rgba(0,0,0,0.08); --shadow-xl:0 8px 16px rgba(0,0,0,0.03),0 32px 64px -12px rgba(0,0,0,0.14); --shadow-green:0 2px 8px rgba(0,108,53,0.12),0 8px 24px -4px rgba(0,108,53,0.2); --shadow-gold:0 2px 8px rgba(200,169,81,0.15),0 8px 24px -4px rgba(200,169,81,0.2); --shadow-carved:inset 0 2px 4px rgba(0,0,0,0.06),0 1px 0 rgba(255,255,255,0.8); --shadow-emboss:0 1px 0 rgba(255,255,255,0.9),inset 0 1px 3px rgba(0,0,0,0.08); /* Motion */ --ease:cubic-bezier(0.25,0.1,0.25,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1); --ease-out:cubic-bezier(0,0,0.2,1); --ease-in-out:cubic-bezier(0.4,0,0.2,1); --ease-dramatic:cubic-bezier(0.16,1,0.3,1); --duration:0.35s; --duration-fast:0.2s; --duration-slow:0.6s; /* Layout */ --max-w:1120px; --nav-h:64px; --glass:rgba(255,255,255,0.82); --glass-border:rgba(255,255,255,0.4); } /* === RESET === */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--white);color:var(--text);line-height:1.6;font-size:15px;overflow-x:hidden;font-feature-settings:'cv02','cv03','cv04','cv11';font-optical-sizing:auto} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font-family:inherit} /* === SERIF ACCENT FONT === */ .serif{font-family:'Playfair Display',Georgia,'Times New Roman',serif} /* ============================================================ ISLAMIC GEOMETRIC PATTERN SYSTEM (SVG-based) ============================================================ */ /* Tessellated 8-point star pattern — top-level bg */ .pattern-overlay{ position:absolute;inset:0;pointer-events:none;opacity:0.035; background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23006C35' stroke-width='0.5'%3E%3Cpath d='M40 0L54.14 14.14 40 28.28 25.86 14.14z'/%3E%3Cpath d='M0 40L14.14 25.86 28.28 40 14.14 54.14z'/%3E%3Cpath d='M40 51.72L54.14 65.86 40 80 25.86 65.86z'/%3E%3Cpath d='M51.72 40L65.86 25.86 80 40 65.86 54.14z'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3Cpath d='M40 14.14L54.14 40 40 65.86 25.86 40z'/%3E%3C/g%3E%3C/svg%3E"); } /* Arabesque border — horizontal rule accent */ .arabesque-border{ height:40px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden; } .arabesque-border::before{ content:'';position:absolute;inset:0; background-image:url("data:image/svg+xml,%3Csvg width='120' height='40' viewBox='0 0 120 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C8A951' stroke-width='0.6' opacity='0.35'%3E%3Cpath d='M0 20C10 10 20 10 30 20S50 30 60 20S80 10 90 20S110 30 120 20'/%3E%3Cpath d='M0 20C10 30 20 30 30 20S50 10 60 20S80 30 90 20S110 10 120 20'/%3E%3Ccircle cx='0' cy='20' r='2'/%3E%3Ccircle cx='30' cy='20' r='2'/%3E%3Ccircle cx='60' cy='20' r='2'/%3E%3Ccircle cx='90' cy='20' r='2'/%3E%3Ccircle cx='120' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:repeat-x;background-position:center; } /* Geometric corner ornaments */ .corner-ornament{position:relative} .corner-ornament::before, .corner-ornament::after{ content:'';position:absolute;width:60px;height:60px;pointer-events:none;opacity:0.12; background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C8A951' stroke-width='0.8'%3E%3Cpath d='M0 0L20 0 20 20 0 20z'/%3E%3Cpath d='M5 5L15 5 15 15 5 15z'/%3E%3Cpath d='M0 0L20 20M20 0L0 20'/%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3C/g%3E%3C/svg%3E"); background-size:contain;background-repeat:no-repeat; } .corner-ornament::before{top:12px;left:12px} .corner-ornament::after{bottom:12px;right:12px;transform:rotate(180deg)} /* Geometric divider */ .geo-divider{ width:100%;height:1px;position:relative;margin:0 auto;max-width:var(--max-w); background:linear-gradient(90deg,transparent 0%,var(--border) 15%,var(--border) 85%,transparent 100%); } .geo-divider::before{ content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:20px;height:20px; background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C8A951' stroke-width='0.7'%3E%3Cpath d='M10 0L14.14 5.86 20 10 14.14 14.14 10 20 5.86 14.14 0 10 5.86 5.86z'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3C/g%3E%3C/svg%3E"); background-size:contain;background-color:var(--white); } /* ============================================================ CARVED / ENGRAVED EFFECTS ============================================================ */ .carved-text{ color:var(--green-deep); text-shadow:0 1px 0 rgba(255,255,255,0.7),0 -1px 0 rgba(0,0,0,0.05); letter-spacing:-0.5px; } .carved-border{ border:1px solid var(--border-art); box-shadow:var(--shadow-carved); position:relative; } .carved-border::before{ content:'';position:absolute;inset:4px;border:1px solid rgba(0,108,53,0.04);border-radius:inherit;pointer-events:none; } .embossed{ background:linear-gradient(180deg,rgba(255,255,255,0.9) 0%,rgba(245,245,247,0.95) 100%); box-shadow:var(--shadow-emboss); border:1px solid rgba(0,0,0,0.04); } .inset-panel{ background:linear-gradient(180deg,var(--bg-subtle) 0%,var(--bg) 100%); box-shadow:inset 0 2px 6px rgba(0,0,0,0.06),inset 0 -1px 0 rgba(255,255,255,0.8); border:1px solid rgba(0,0,0,0.06); } /* ============================================================ PHOTOGRAPHY FRAME SYSTEM ============================================================ */ .photo-frame{ position:relative;overflow:hidden;border-radius:var(--radius-xl); } .photo-frame img{ width:100%;height:100%;object-fit:cover;transition:transform 0.8s var(--ease),filter 0.6s var(--ease); } .photo-frame:hover img{ transform:scale(1.05); } .photo-frame::after{ content:'';position:absolute;inset:0; border:1px solid rgba(255,255,255,0.15);border-radius:inherit; box-shadow:inset 0 0 40px rgba(0,0,0,0.08);pointer-events:none; } /* Photo with gold frame */ .photo-gold-frame{ position:relative;padding:6px; background:linear-gradient(145deg,var(--gold) 0%,var(--gold-light) 30%,var(--gold-dark) 70%,var(--gold) 100%); border-radius:var(--radius-xl);box-shadow:var(--shadow-lg); } .photo-gold-frame .photo-inner{ border-radius:calc(var(--radius-xl) - 4px);overflow:hidden; } .photo-gold-frame .photo-inner img{ width:100%;height:100%;object-fit:cover;display:block; } /* Photo with geometric overlay */ .photo-geo-overlay{position:relative;overflow:hidden;border-radius:var(--radius-xl)} .photo-geo-overlay::before{ content:'';position:absolute;inset:0;z-index:2;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-width='0.3' opacity='0.15'%3E%3Cpath d='M100 0L141.42 58.58 200 100 141.42 141.42 100 200 58.58 141.42 0 100 58.58 58.58z'/%3E%3Ccircle cx='100' cy='100' r='40'/%3E%3Ccircle cx='100' cy='100' r='70'/%3E%3C/g%3E%3C/svg%3E"); } /* Photo mosaic grid */ .photo-mosaic{ display:grid;grid-template-columns:1fr 1fr;grid-template-rows:200px 200px;gap:8px; } .photo-mosaic .mosaic-main{grid-row:1/3;border-radius:var(--radius-xl);overflow:hidden} .photo-mosaic .mosaic-main img, .photo-mosaic .mosaic-small img{width:100%;height:100%;object-fit:cover} .photo-mosaic .mosaic-small{border-radius:var(--radius-lg);overflow:hidden} /* === GRADIENT TOP BAR (Artistic) === */ .gradient-top{ height:4px;position:relative;z-index:101; background:linear-gradient(90deg,var(--green-deep) 0%,var(--green) 20%,var(--gold) 50%,var(--green) 80%,var(--green-deep) 100%); background-size:200% 100%;animation:gradientShift 6s ease infinite; } .gradient-top::after{ content:'';position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent); animation:shimmerBar 3s ease-in-out infinite; } @keyframes gradientShift{0%,100%{background-position:0% 0}50%{background-position:100% 0}} @keyframes shimmerBar{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}} /* === NAV (Glass + carved) === */ .nav{position:fixed;top:4px;left:0;right:0;z-index:100;height:var(--nav-h);background:var(--glass);backdrop-filter:saturate(200%) blur(20px);-webkit-backdrop-filter:saturate(200%) blur(20px);border-bottom:1px solid var(--border);transition:all var(--duration) var(--ease)} .nav.scrolled{background:rgba(255,255,255,0.95);box-shadow:0 0 0 1px rgba(0,0,0,0.03),0 2px 16px rgba(0,0,0,0.06)} .nav-inner{max-width:var(--max-w);margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 32px} .nav-logo{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;letter-spacing:-0.5px;color:var(--text);text-decoration:none} .nav-logo-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg,var(--green) 0%,#00a355 50%,#00c96a 100%);color:white;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;letter-spacing:0.5px;box-shadow:0 2px 10px rgba(0,108,53,0.3),inset 0 1px 0 rgba(255,255,255,0.15);transition:transform var(--duration) var(--ease-spring),box-shadow var(--duration);position:relative;overflow:hidden} .nav-logo-mark::after{content:'';position:absolute;inset:2px;border:1px solid rgba(255,255,255,0.12);border-radius:8px;pointer-events:none} .nav-logo:hover .nav-logo-mark{transform:scale(1.08) rotate(-3deg);box-shadow:0 4px 16px rgba(0,108,53,0.35)} .nav-links{display:flex;align-items:center;gap:1px} .nav-link{padding:7px 14px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--text-2);transition:all var(--duration-fast) var(--ease);position:relative;letter-spacing:-0.1px} .nav-link:hover{color:var(--text);background:rgba(0,0,0,0.03)} .nav-link.active{color:var(--green);font-weight:600} .nav-link.active::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:18px;height:2px;background:var(--green);border-radius:1px;opacity:0.8} .nav-actions{display:flex;align-items:center;gap:6px} .nav-mobile{display:none;background:none;border:none;font-size:18px;color:var(--text-2);cursor:pointer;padding:8px;border-radius:9px;transition:all var(--duration-fast)} .notif-bell:hover{background:rgba(0,0,0,0.04);color:var(--green)} .notif-item:hover{background:var(--bg-subtle)!important} .nav-mobile:hover{background:rgba(0,0,0,0.04)} .mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:#ffffff;padding:16px 0 0;z-index:999;flex-direction:column;gap:0;animation:slideDown 0.25s var(--ease-dramatic);overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.04)} .mobile-menu.open{display:flex} .mobile-menu .nav-link{display:flex;align-items:center;gap:10px;padding:16px 24px;font-size:16px;font-weight:500;border-bottom:1px solid var(--border);margin:0;border-radius:0;color:var(--text);transition:background 0.15s} .mobile-menu .nav-link:hover{background:var(--green-50);color:var(--green)} .mobile-menu .nav-link:active{background:var(--green-100)} .mobile-menu .nav-link.active{color:var(--green);font-weight:700;background:var(--green-50)} .mobile-menu .mobile-auth-row{padding:20px 24px;margin-top:auto;border-top:1px solid var(--border);display:flex;gap:10px;align-items:center;background:var(--bg)} @keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} /* === BUTTONS (Carved style) === */ .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:var(--radius);font-size:13.5px;font-weight:600;font-family:inherit;border:none;cursor:pointer;text-decoration:none;transition:all var(--duration) var(--ease);white-space:nowrap;line-height:1.4;position:relative;overflow:hidden;letter-spacing:-0.1px} .btn::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.12) 0%,transparent 50%);pointer-events:none;opacity:0;transition:opacity var(--duration)} .btn:hover::after{opacity:1} .btn-primary{background:var(--green);color:white;box-shadow:0 1px 2px rgba(0,108,53,0.2),inset 0 1px 0 rgba(255,255,255,0.1)} .btn-primary:hover{background:var(--green-hover);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,108,53,0.25),inset 0 1px 0 rgba(255,255,255,0.1)} .btn-primary:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,108,53,0.2),inset 0 1px 0 rgba(255,255,255,0.1)} .btn-outline{background:var(--white);color:var(--text);border:1.5px solid var(--border);box-shadow:var(--shadow-xs)} .btn-outline::after{display:none} .btn-outline:hover{border-color:var(--green);color:var(--green);box-shadow:0 2px 12px rgba(0,108,53,0.06);transform:translateY(-2px)} .btn-outline.active{border-color:var(--green);color:var(--white);background:var(--green);box-shadow:0 2px 12px rgba(0,108,53,0.15)} .btn-outline.disabled,.btn-outline[disabled]{opacity:0.35;cursor:not-allowed;pointer-events:none;text-decoration:line-through} .filter-chip{transition:all 0.15s!important;border-radius:20px!important} .filter-chip.active{border-color:var(--green)!important;color:var(--white)!important;background:var(--green)!important} .btn-ghost{background:transparent;color:var(--text-2);padding:10px 14px} .btn-ghost::after{display:none} .btn-ghost:hover{color:var(--text);background:rgba(0,0,0,0.03)} .btn-sm{padding:8px 16px;font-size:13px;border-radius:10px} .btn-lg{padding:13px 28px;font-size:14px;border-radius:14px;font-weight:700} .btn:disabled{opacity:0.35;cursor:not-allowed;transform:none!important;box-shadow:none!important;filter:none!important} .btn-danger{background:var(--red-50);color:var(--red);border:1px solid #fecdd3} .btn-danger::after{display:none} .btn-gold{background:linear-gradient(145deg,var(--gold) 0%,var(--gold-light) 50%,var(--gold) 100%);color:white;box-shadow:0 1px 2px rgba(200,169,81,0.2),inset 0 1px 0 rgba(255,255,255,0.2);border:1px solid var(--gold-dark)} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(200,169,81,0.3),inset 0 1px 0 rgba(255,255,255,0.2)} .btn i.fa-arrow-right{transition:transform var(--duration) var(--ease)} .btn:hover i.fa-arrow-right{transform:translateX(3px)} /* Carved-style button variant */ .btn-carved{ background:linear-gradient(180deg,var(--bg-subtle) 0%,var(--border) 100%); color:var(--text);border:1px solid rgba(0,0,0,0.1); box-shadow:0 2px 4px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.8); text-shadow:0 1px 0 rgba(255,255,255,0.6); } .btn-carved:hover{ box-shadow:0 4px 12px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.8);transform:translateY(-2px); } /* === LAYOUT === */ .container{max-width:var(--max-w);margin:0 auto;padding:0 32px} .page{padding-top:calc(var(--nav-h) + 4px)} /* === HERO (Cinematic with Art) === */ .hero{ padding:100px 32px 72px;text-align:center;position:relative;overflow:hidden; background:linear-gradient(180deg,var(--bg-cream) 0%,var(--white) 50%,var(--bg-subtle) 100%); } /* Subtle pattern behind hero */ .hero .pattern-overlay{opacity:0.03} .hero::before{content:'';position:absolute;top:-400px;left:50%;transform:translateX(-50%);width:1000px;height:1000px;background:radial-gradient(ellipse 50% 35% at center,rgba(0,108,53,0.05) 0%,rgba(0,108,53,0.01) 50%,transparent 70%);pointer-events:none;animation:heroPulse 10s ease-in-out infinite alternate} .hero::after{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(200,169,81,0.04) 0%,transparent 55%);pointer-events:none} @keyframes heroPulse{from{opacity:0.7;transform:translateX(-50%) scale(1)}to{opacity:1;transform:translateX(-50%) scale(1.08)}} .hero-inner{max-width:640px;margin:0 auto;position:relative;z-index:2} .hero h1{font-size:52px;font-weight:900;line-height:1.06;letter-spacing:-2.5px;margin-bottom:18px;color:var(--text)} .hero h1 .accent{background:linear-gradient(145deg,var(--green) 0%,#00a355 60%,#00c96a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero h1 .serif-accent{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700} .hero p{font-size:17px;color:var(--text-2);line-height:1.7;margin-bottom:32px;max-width:480px;margin-left:auto;margin-right:auto;font-weight:400} .hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* === HERO BADGE (with gold carved effect) === */ .hero-badge{ display:inline-flex;align-items:center;gap:7px;padding:7px 18px;border-radius:var(--radius-pill); background:linear-gradient(180deg,var(--white) 0%,var(--bg-cream) 100%); color:var(--green);font-size:12.5px;font-weight:700;margin-bottom:24px; border:1px solid var(--green-200); box-shadow:0 1px 8px rgba(0,108,53,0.06),inset 0 1px 0 rgba(255,255,255,0.8); letter-spacing:0.2px; } .hero-badge i{font-size:10px;opacity:0.7} /* === ORBIT RINGS (Hero decoration) === */ .orbit-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,108,53,0.05);pointer-events:none;animation:orbitSpin var(--dur,25s) linear infinite} .orbit-dot{position:absolute;width:var(--dot,6px);height:var(--dot,6px);border-radius:50%;background:var(--green);opacity:0.12;top:calc(50% - var(--dot,6px)/2);left:calc(50% - var(--dot,6px)/2);transform:translateX(calc(var(--orbit-r,200px)))} @keyframes orbitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} /* ============================================================ HERO PHOTO GALLERY (Editorial style) ============================================================ */ .hero-gallery{ display:flex;gap:12px;justify-content:center;margin-top:48px;padding:0 16px; } .hero-gallery-item{ width:180px;height:240px;border-radius:var(--radius-xl);overflow:hidden;position:relative; box-shadow:var(--shadow-lg);transition:all 0.5s var(--ease);flex-shrink:0; } .hero-gallery-item:nth-child(2){transform:translateY(-16px)} .hero-gallery-item:nth-child(4){transform:translateY(-16px)} .hero-gallery-item:hover{transform:translateY(-8px) scale(1.03);box-shadow:var(--shadow-xl)} .hero-gallery-item:nth-child(2):hover{transform:translateY(-24px) scale(1.03)} .hero-gallery-item:nth-child(4):hover{transform:translateY(-24px) scale(1.03)} .hero-gallery-item img{width:100%;height:100%;object-fit:cover} .hero-gallery-item::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,60,30,0.5) 100%); pointer-events:none; } .hero-gallery-item .gallery-label{ position:absolute;bottom:12px;left:12px;right:12px;z-index:2; color:white;font-size:11px;font-weight:600;letter-spacing:0.3px; text-shadow:0 1px 3px rgba(0,0,0,0.4); } /* === SECTIONS === */ .section{padding:96px 32px;position:relative} .section-alt{background:var(--bg-cream);position:relative} .section-alt::before{ content:'';position:absolute;inset:0;pointer-events:none;opacity:0.02; background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23006C35' stroke-width='0.4'%3E%3Cpath d='M30 0L37.07 22.93 60 30 37.07 37.07 30 60 22.93 37.07 0 30 22.93 22.93z'/%3E%3C/g%3E%3C/svg%3E"); } .section-dark{background:#111113;color:white;position:relative;overflow:hidden} .section-dark::before{ content:'';position:absolute;inset:0;pointer-events:none;opacity:0.04; background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C8A951' stroke-width='0.4'%3E%3Cpath d='M40 0L54.14 14.14 40 28.28 25.86 14.14z'/%3E%3Cpath d='M0 40L14.14 25.86 28.28 40 14.14 54.14z'/%3E%3Cpath d='M40 51.72L54.14 65.86 40 80 25.86 65.86z'/%3E%3Cpath d='M51.72 40L65.86 25.86 80 40 65.86 54.14z'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3C/g%3E%3C/svg%3E"); } .section-dark .section-label{color:var(--gold-light)} .section-dark .section-title{color:white} .section-dark .section-desc{color:rgba(255,255,255,0.5)} .section-header{text-align:center;margin-bottom:56px} .section-label{ font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px; color:var(--green);margin-bottom:12px;display:inline-flex;align-items:center;gap:10px; } .section-label::before,.section-label::after{ content:'';width:20px;height:1px;background:var(--gold);opacity:0.4;border-radius:1px; } .section-title{font-size:36px;font-weight:900;letter-spacing:-1.5px;margin-bottom:12px;line-height:1.12} .section-title .serif-accent{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700} .section-desc{font-size:15.5px;color:var(--text-2);max-width:460px;margin:0 auto;line-height:1.7} /* === STATS (Carved style) === */ .stats-row{display:flex;justify-content:center;gap:0;margin:40px auto 0;max-width:560px;border-radius:var(--radius-xl);overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm),inset 0 1px 3px rgba(0,0,0,0.03);border:1px solid var(--border-art);position:relative} .stats-row::before{ content:'';position:absolute;inset:3px;border:1px solid rgba(0,108,53,0.03);border-radius:calc(var(--radius-xl) - 3px);pointer-events:none; } .stat-item{flex:1;padding:24px 16px;text-align:center;position:relative;transition:background var(--duration)} .stat-item:hover{background:var(--green-50)} .stat-item + .stat-item{border-left:1px solid var(--border)} .stat-value{font-size:30px;font-weight:900;letter-spacing:-1px;color:var(--text);font-family:'Playfair Display',Georgia,serif} .stat-label{font-size:10px;color:var(--text-3);margin-top:4px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px} /* === CARDS === */ .card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all var(--duration) var(--ease);position:relative} .card:hover{box-shadow:var(--shadow);border-color:var(--border-hover)} /* Artistic card — carved double border */ .card-art{ background:var(--white);border-radius:var(--radius-xl);padding:32px;position:relative; border:1px solid var(--border-art); box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,0.8); transition:all var(--duration) var(--ease);overflow:hidden; } .card-art::before{ content:'';position:absolute;inset:5px;border:1px solid rgba(200,169,81,0.06);border-radius:calc(var(--radius-xl) - 5px);pointer-events:none; } .card-art:hover{ box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:rgba(200,169,81,0.15); } /* === GLASS CARD === */ .glass-card{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)} /* === MENTOR CARDS (Artistic) === */ .mentor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px} .mentor-card{ background:var(--white);border:1px solid var(--border-art);border-radius:var(--radius-lg);padding:24px;cursor:pointer; transition:all var(--duration) var(--ease);position:relative;overflow:hidden; } .mentor-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--green),var(--gold),var(--green)); opacity:0;transition:opacity var(--duration) var(--ease); } .mentor-card::after{ content:'';position:absolute;top:8px;right:8px;width:32px;height:32px;pointer-events:none;opacity:0.06; background-image:url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C8A951' stroke-width='0.5'%3E%3Cpath d='M16 0L22.63 9.37 32 16 22.63 22.63 16 32 9.37 22.63 0 16 9.37 9.37z'/%3E%3Ccircle cx='16' cy='16' r='5'/%3E%3C/g%3E%3C/svg%3E"); transition:opacity var(--duration); } .mentor-card:hover{border-color:transparent;box-shadow:var(--shadow-lg);transform:translateY(-4px)} .mentor-card:hover::before{opacity:1} .mentor-card:hover::after{opacity:0.12} .mentor-header{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px} .mentor-avatar{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:white;flex-shrink:0;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--duration) var(--ease-spring);position:relative} .mentor-card:hover .mentor-avatar{transform:scale(1.06)} .mentor-avatar img{width:100%;height:100%;object-fit:cover} .mentor-avatar-lg{width:76px;height:76px;border-radius:20px;overflow:hidden;flex-shrink:0;box-shadow:var(--shadow)} .mentor-avatar-lg img{width:100%;height:100%;object-fit:cover} .mentor-name{font-size:15.5px;font-weight:800;margin-bottom:2px;letter-spacing:-0.3px} .mentor-title{font-size:13px;color:var(--text-2);line-height:1.4} .mentor-meta{font-size:11px;color:var(--text-3);margin-top:3px;font-weight:500} .mentor-bio{font-size:13.5px;color:var(--text-2);line-height:1.7;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .mentor-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px} .mentor-footer{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--border)} /* === TAGS === */ .tag{display:inline-block;padding:3px 10px;border-radius:7px;font-size:11px;font-weight:600;background:var(--bg-subtle);color:var(--text-2);transition:all var(--duration-fast) var(--ease);letter-spacing:0.1px} .tag-green{background:var(--green-50);color:#047857} .tag-gold{background:var(--gold-50);color:#b45309} .tag:hover{transform:translateY(-1px)} /* === STARS === */ .stars{display:inline-flex;gap:1.5px} .stars i{color:var(--gold);font-size:11px} /* === FEATURE GRID (Carved) === */ .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .feature-card{ padding:28px;border:1px solid var(--border-art);border-radius:var(--radius-lg);background:var(--white); transition:all var(--duration) var(--ease);position:relative;overflow:hidden; } .feature-card::before{ content:'';position:absolute;inset:4px;border:1px solid rgba(0,108,53,0.02);border-radius:calc(var(--radius-lg) - 4px);pointer-events:none; } .feature-card::after{content:'';position:absolute;bottom:-50px;right:-50px;width:140px;height:140px;background:radial-gradient(circle,var(--green-glow) 0%,transparent 70%);opacity:0;transition:opacity var(--duration) var(--ease);pointer-events:none} .feature-card:hover{box-shadow:var(--shadow);border-color:var(--border-hover);transform:translateY(-3px)} .feature-card:hover::after{opacity:1} .feature-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:18px;transition:all var(--duration) var(--ease-spring)} .feature-card:hover .feature-icon{transform:scale(1.1) rotate(-5deg)} .feature-card h3{font-size:15.5px;font-weight:800;margin-bottom:8px;letter-spacing:-0.2px} .feature-card p{font-size:13.5px;color:var(--text-2);line-height:1.7} /* === STEPS (Connected Timeline with art) === */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:780px;margin:0 auto;position:relative} .steps::before{ content:'';position:absolute;top:28px;left:calc(16.66% + 28px);right:calc(16.66% + 28px);height:2px; background:linear-gradient(90deg,var(--green),var(--gold),var(--green));opacity:0.15; } .step{text-align:center;padding:0 12px;position:relative} .step-num{ width:56px;height:56px;border-radius:50%; background:linear-gradient(145deg,var(--green) 0%,var(--green-hover) 100%); color:white;display:inline-flex;align-items:center;justify-content:center; font-size:17px;font-weight:800;margin-bottom:18px; box-shadow:0 2px 8px rgba(0,108,53,0.2),inset 0 1px 0 rgba(255,255,255,0.15); transition:all var(--duration) var(--ease-spring);position:relative;z-index:1; font-family:'Playfair Display',Georgia,serif; } .step-num::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--gold);opacity:0;transition:all var(--duration) var(--ease)} .step:hover .step-num{transform:scale(1.1)} .step:hover .step-num::after{opacity:0.3;inset:-8px} .step h3{font-size:15px;font-weight:800;margin-bottom:8px;letter-spacing:-0.2px} .step p{font-size:13.5px;color:var(--text-2);line-height:1.7} /* === FORMS === */ .form-group{margin-bottom:20px} .form-group label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--text);letter-spacing:0.2px} .form-label{display:block;font-size:12px;font-weight:700;margin-bottom:5px;color:var(--text-2);letter-spacing:0.1px;text-transform:uppercase} .form-input{width:100%;padding:10px 14px;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--white);font-size:14px;font-family:inherit;color:var(--text);transition:all var(--duration) var(--ease);outline:none} .form-input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-glow)} .form-input::placeholder{color:var(--text-4)} textarea.form-input{min-height:80px;resize:vertical;line-height:1.7} select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer} .input{width:100%;padding:11px 15px;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--white);font-size:14px;font-family:inherit;color:var(--text);transition:all var(--duration) var(--ease);outline:none} .input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-glow)} .input::placeholder{color:var(--text-4)} textarea.input{min-height:120px;resize:vertical;line-height:1.7} select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer} /* === SEARCH === */ .search-wrap{position:relative} .search-wrap input{width:100%;padding:13px 15px 13px 42px;border:1.5px solid var(--border);border-radius:var(--radius-lg);font-size:14.5px;font-family:inherit;color:var(--text);outline:none;transition:all var(--duration) var(--ease);background:var(--white);box-shadow:var(--shadow-xs)} .search-wrap input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-glow),var(--shadow-sm)} .search-wrap i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:14px;transition:color var(--duration)} .search-wrap input:focus ~ i,.search-wrap:focus-within i{color:var(--green)} /* === FILTERS === */ .filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px} .filter-btn{padding:7px 16px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;border:1.5px solid var(--border);background:var(--white);color:var(--text-2);cursor:pointer;transition:all var(--duration) var(--ease);font-family:inherit;letter-spacing:0.1px} .filter-btn:hover{border-color:var(--green);color:var(--green);transform:translateY(-1px)} .filter-btn.active{background:var(--green);color:white;border-color:var(--green);box-shadow:0 2px 8px rgba(0,108,53,0.15)} /* === MODAL === */ .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn 0.2s var(--ease)} .modal{width:100%;max-width:580px;max-height:88vh;overflow-y:auto;background:var(--white);border-radius:var(--radius-2xl);padding:36px;box-shadow:var(--shadow-xl);position:relative;animation:modalIn 0.3s var(--ease-spring)} .modal-close{position:absolute;top:16px;right:16px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:10px;color:var(--text-3);width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--duration) var(--ease);font-size:13px} .modal-close:hover{color:var(--text);background:var(--border-hover);transform:rotate(90deg)} /* === TOAST === */ .toast{position:fixed;bottom:24px;right:24px;z-index:9999;padding:13px 22px;border-radius:var(--radius);font-size:13.5px;font-weight:600;color:white;box-shadow:var(--shadow-lg);animation:toastIn 0.35s var(--ease-spring)} .toast-success{background:var(--green)} .toast-error{background:var(--red)} /* === FOOTER (with pattern) === */ .footer{padding:64px 32px 32px;border-top:1px solid var(--border);background:#111113;position:relative;overflow:hidden} .footer::before{ content:'';position:absolute;inset:0;pointer-events:none;opacity:0.03; background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C8A951' stroke-width='0.3'%3E%3Cpath d='M40 0L54.14 14.14 40 28.28 25.86 14.14z'/%3E%3Cpath d='M0 40L14.14 25.86 28.28 40 14.14 54.14z'/%3E%3Cpath d='M40 51.72L54.14 65.86 40 80 25.86 65.86z'/%3E%3Cpath d='M51.72 40L65.86 25.86 80 40 65.86 54.14z'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3C/g%3E%3C/svg%3E"); } .footer-inner{max-width:var(--max-w);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap;position:relative} .footer-brand{max-width:280px} .footer-brand .nav-logo{color:white} .footer-brand .nav-logo-mark{background:linear-gradient(145deg,var(--green),#00c96a)} .footer-brand p{font-size:13.5px;color:rgba(255,255,255,0.35);margin-top:12px;line-height:1.75} .footer-links{display:flex;gap:48px;position:relative} .footer-col h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--gold);margin-bottom:14px;opacity:0.6} .footer-col a{display:block;font-size:13px;color:rgba(255,255,255,0.35);padding:3px 0;transition:all var(--duration-fast) var(--ease)} .footer-col a:hover{color:var(--green-200);transform:translateX(3px)} .footer-social{display:flex;gap:8px;margin-top:16px} .footer-social a{width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.3);font-size:12px;transition:all var(--duration-fast)} .footer-social a:hover{color:var(--green-200);border-color:rgba(0,108,53,0.3);transform:translateY(-2px)} .footer-bottom{max-width:var(--max-w);margin:32px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,0.06);font-size:11.5px;color:rgba(255,255,255,0.25);display:flex;justify-content:space-between;align-items:center;position:relative} /* === CTA (Artistic) === */ .cta{ padding:56px 44px;border-radius:var(--radius-2xl);text-align:center; background:linear-gradient(150deg,var(--green-50) 0%,var(--gold-50) 40%,var(--green-50) 100%); border:1px solid rgba(200,169,81,0.1);position:relative;overflow:hidden; } .cta::before{content:'';position:absolute;inset:5px;border:1px solid rgba(200,169,81,0.06);border-radius:calc(var(--radius-2xl) - 5px);pointer-events:none} .cta::after{ content:'';position:absolute;inset:0;pointer-events:none;opacity:0.03; background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23006C35' stroke-width='0.4'%3E%3Cpath d='M40 0L54.14 14.14 40 28.28 25.86 14.14z'/%3E%3Cpath d='M0 40L14.14 25.86 28.28 40 14.14 54.14z'/%3E%3Cpath d='M40 51.72L54.14 65.86 40 80 25.86 65.86z'/%3E%3Cpath d='M51.72 40L65.86 25.86 80 40 65.86 54.14z'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3C/g%3E%3C/svg%3E"); } .cta h2{font-size:28px;font-weight:900;margin-bottom:10px;letter-spacing:-0.8px;position:relative;z-index:1} .cta p{font-size:15px;color:var(--text-2);margin-bottom:24px;position:relative;z-index:1} /* === FAQ === */ .faq-item{border-bottom:1px solid var(--border)} .faq-q{width:100%;padding:18px 0;display:flex;justify-content:space-between;align-items:center;background:none;border:none;cursor:pointer;color:var(--text);text-align:left;font-family:inherit;font-size:15px;font-weight:700;transition:color var(--duration)} .faq-q:hover{color:var(--green)} .faq-q i{color:var(--text-3);font-size:12px;transition:transform var(--duration) var(--ease);flex-shrink:0;margin-left:16px} .faq-a{max-height:0;overflow:hidden;transition:max-height var(--duration-slow) var(--ease)} .faq-a p{padding-bottom:18px;font-size:14px;color:var(--text-2);line-height:1.8} /* === COLUMNS === */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} .three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .four-col{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} /* === DIVIDER === */ .divider{height:1px;background:linear-gradient(90deg,transparent 0%,var(--border) 25%,var(--border) 75%,transparent 100%);margin:0 auto;max-width:var(--max-w)} /* === SKELETON === */ .skeleton{background:linear-gradient(90deg,var(--bg-subtle) 25%,#eee 50%,var(--bg-subtle) 75%);background-size:200% 100%;animation:shimmer 1.8s ease-in-out infinite;border-radius:8px} /* === AVATAR ROW === */ .avatar-row{display:flex;align-items:center;justify-content:center;margin-top:36px;gap:0} .avatar-row-stack{display:flex;margin-right:14px} .avatar-row-stack img{width:40px;height:40px;border-radius:50%;border:2.5px solid white;object-fit:cover;margin-left:-10px;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:all var(--duration) var(--ease-spring)} .avatar-row-stack img:first-child{margin-left:0} .avatar-row-stack img:hover{transform:scale(1.15) translateY(-3px);z-index:2;box-shadow:0 4px 16px rgba(0,0,0,0.15)} .avatar-row-text{font-size:14px;color:var(--text-2)} .avatar-row-text strong{color:var(--text);font-weight:800} /* === TRUST BAR (with carved inset) === */ .trust-bar{ display:flex;align-items:center;justify-content:center;gap:40px;padding:24px 32px;flex-wrap:wrap; background:linear-gradient(180deg,var(--bg-subtle) 0%,var(--bg) 100%); border-top:1px solid var(--border);border-bottom:1px solid var(--border); box-shadow:inset 0 1px 4px rgba(0,0,0,0.03); } .trust-item{font-size:11px;color:var(--text-3);display:flex;align-items:center;gap:7px;font-weight:700;text-transform:uppercase;letter-spacing:1px;transition:color var(--duration)} .trust-item:hover{color:var(--text-2)} .trust-item i{font-size:16px;color:var(--green)} /* === TESTIMONIAL (with carved frame) === */ .testimonial{ padding:32px;border-radius:var(--radius-xl);background:var(--white);position:relative;overflow:hidden; transition:all var(--duration) var(--ease); border:1px solid var(--border-art); box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,0.8); } .testimonial::before{ content:'\201C';position:absolute;top:-10px;left:20px; font-size:80px;font-weight:900;color:var(--gold);opacity:0.08; font-family:'Playfair Display',Georgia,serif;line-height:1;pointer-events:none; } .testimonial::after{ content:'';position:absolute;inset:4px;border:1px solid rgba(200,169,81,0.04);border-radius:calc(var(--radius-xl) - 4px);pointer-events:none; } .testimonial:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:rgba(200,169,81,0.12)} .testimonial-text{font-size:15px;color:var(--text-2);line-height:1.8;font-style:italic;margin-bottom:20px;position:relative;font-family:'Playfair Display',Georgia,serif} .testimonial-author{display:flex;align-items:center;gap:12px} .testimonial-author img{width:40px;height:40px;border-radius:12px;object-fit:cover;box-shadow:var(--shadow-xs)} .testimonial-author-info .name{font-size:14px;font-weight:800} .testimonial-author-info .role{font-size:11.5px;color:var(--text-3);font-weight:500} /* === CATEGORY CARD (with pattern hover) === */ .cat-card{ padding:28px;border:1px solid var(--border-art);border-radius:var(--radius-lg);background:var(--white); transition:all var(--duration) var(--ease);text-decoration:none;color:inherit; display:flex;flex-direction:column;position:relative;overflow:hidden; } .cat-card::before{ content:'';position:absolute;inset:4px;border:1px solid rgba(0,0,0,0.02);border-radius:calc(var(--radius-lg) - 4px);pointer-events:none; } .cat-card::after{ content:'';position:absolute;inset:0;opacity:0;transition:opacity var(--duration);pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23006C35' stroke-width='0.3' opacity='0.08'%3E%3Cpath d='M20 0L27.07 12.93 40 20 27.07 27.07 20 40 12.93 27.07 0 20 12.93 12.93z'/%3E%3C/g%3E%3C/svg%3E"); } .cat-card:hover{box-shadow:var(--shadow-lg);border-color:transparent;transform:translateY(-4px)} .cat-card:hover::after{opacity:1} .cat-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:16px;transition:all var(--duration) var(--ease-spring)} .cat-card:hover .cat-icon{transform:scale(1.1) rotate(-6deg)} .cat-card h3{font-size:15px;font-weight:800;margin-bottom:6px;letter-spacing:-0.2px} .cat-card p{font-size:12.5px;color:var(--text-2);line-height:1.7} /* === GREEN STRIPE (Gold accent) === */ .green-stripe{width:48px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--green),var(--gold));margin:0 auto 20px} /* === ICON BOX === */ .icon-box{display:flex;gap:14px;align-items:center;padding:18px 20px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--white);transition:all var(--duration) var(--ease);margin-bottom:12px} .icon-box:hover{box-shadow:var(--shadow-sm);border-color:var(--border-hover);transform:translateX(4px)} .icon-box-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;transition:transform var(--duration) var(--ease-spring)} .icon-box:hover .icon-box-icon{transform:scale(1.08) rotate(-3deg)} /* === FLOATING BUBBLES === */ .floating-bubbles{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden} .floating-bubble{position:absolute;border-radius:50%;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.1);border:2.5px solid white;animation:floatBubble var(--dur,7s) ease-in-out infinite} .floating-bubble img{width:100%;height:100%;object-fit:cover} @keyframes floatBubble{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(6px,-10px) scale(1.03)}50%{transform:translate(-3px,-5px) scale(1)}75%{transform:translate(-5px,6px) scale(0.98)}} /* === MARQUEE (with arabesque) === */ .marquee-wrap{overflow:hidden;padding:24px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-cream)} .marquee{display:flex;gap:56px;animation:marqueeScroll 35s linear infinite;width:max-content} .marquee-item{font-size:13px;font-weight:700;color:var(--text-3);white-space:nowrap;display:flex;align-items:center;gap:7px} .marquee-item i{font-size:16px;color:var(--green)} @keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* === BENTO GRID === */ .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .bento-item{border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--white);padding:28px;transition:all var(--duration) var(--ease);overflow:hidden;position:relative} .bento-item:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:transparent} .bento-span-2{grid-column:span 2} /* === METRIC CARD === */ .metric-card{text-align:center;padding:24px 14px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--white);transition:all var(--duration) var(--ease)} .metric-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .metric-value{font-size:32px;font-weight:900;letter-spacing:-1px;color:var(--green);font-family:'Playfair Display',Georgia,serif} .metric-label{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:1.2px;margin-top:5px;font-weight:700} /* ============================================================ PHOTO SHOWCASE SECTION ============================================================ */ .photo-showcase{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;max-width:var(--max-w);margin:0 auto; } .photo-showcase-item{ position:relative;border-radius:var(--radius-xl);overflow:hidden;height:280px; box-shadow:var(--shadow);transition:all 0.5s var(--ease); } .photo-showcase-item:first-child{grid-row:span 2;height:auto} .photo-showcase-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s var(--ease)} .photo-showcase-item:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)} .photo-showcase-item:hover img{transform:scale(1.06)} .photo-showcase-item::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,40,20,0.4) 100%); pointer-events:none; } .photo-showcase-caption{ position:absolute;bottom:16px;left:16px;right:16px;z-index:2; color:white;font-size:12px;font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,0.4); } .photo-showcase-caption .caption-title{font-size:15px;font-weight:800;margin-bottom:2px} /* ============================================================ VISION 2030 BANNER (with arabesque pattern) ============================================================ */ .vision-banner{ padding:40px;border-radius:var(--radius-2xl);position:relative;overflow:hidden; background:linear-gradient(135deg,var(--green-deep) 0%,var(--green) 50%,var(--green-hover) 100%); color:white;display:flex;align-items:center;gap:32px; } .vision-banner::before{ content:'';position:absolute;inset:0;pointer-events:none;opacity:0.06; background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-width='0.5'%3E%3Cpath d='M40 0L54.14 14.14 40 28.28 25.86 14.14z'/%3E%3Cpath d='M0 40L14.14 25.86 28.28 40 14.14 54.14z'/%3E%3Cpath d='M40 51.72L54.14 65.86 40 80 25.86 65.86z'/%3E%3Cpath d='M51.72 40L65.86 25.86 80 40 65.86 54.14z'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3Cpath d='M40 14.14L54.14 40 40 65.86 25.86 40z'/%3E%3C/g%3E%3C/svg%3E"); } .vision-banner::after{ content:'';position:absolute;inset:4px;border:1px solid rgba(255,255,255,0.06);border-radius:calc(var(--radius-2xl) - 4px);pointer-events:none; } .vision-banner-content{flex:1;position:relative} .vision-banner h3{font-size:22px;font-weight:900;margin-bottom:8px;letter-spacing:-0.5px} .vision-banner p{font-size:14px;opacity:0.7;line-height:1.7;max-width:480px} .vision-banner .badge-gold{ display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:var(--radius-pill); background:rgba(200,169,81,0.2);color:var(--gold-light);font-size:11px;font-weight:700; letter-spacing:0.5px;margin-bottom:12px;border:1px solid rgba(200,169,81,0.15); } /* === ADMIN === */ .admin-sidebar{position:fixed;left:0;top:calc(var(--nav-h) + 4px);bottom:0;width:230px;background:var(--white);border-right:1px solid var(--border);padding:14px 8px;overflow-y:auto} .admin-content{margin-left:230px;padding:24px;min-height:calc(100vh - var(--nav-h) - 4px);background:var(--bg-subtle)} .sidebar-section{padding:12px 14px 6px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-3)} .sidebar-link{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:9px;font-size:13px;font-weight:500;color:var(--text-2);transition:all var(--duration-fast) var(--ease);margin-bottom:1px} .sidebar-link:hover{color:var(--text);background:var(--bg-subtle)} .sidebar-link.active{color:var(--green);background:var(--green-50);font-weight:600} .sidebar-link i{width:16px;text-align:center;font-size:12px} .dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:24px} .dash-card{padding:18px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--border);transition:all var(--duration-fast) var(--ease)} .dash-card:hover{box-shadow:var(--shadow-sm)} .dash-value{font-size:26px;font-weight:800;margin-bottom:2px;letter-spacing:-0.5px} .dash-label{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.8px} .table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--white)} .table{width:100%;border-collapse:collapse} .table th{padding:10px 14px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-3);background:var(--bg-subtle);border-bottom:1px solid var(--border)} .table td{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--border)} .table tr:last-child td{border-bottom:none} .table tr:hover td{background:var(--bg-subtle)} .login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:linear-gradient(150deg,var(--green-50),var(--gold-50),var(--green-50))} .login-box{width:100%;max-width:380px;padding:40px;border-radius:var(--radius-2xl);background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-lg)} /* === ANIMATIONS === */ @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes modalIn{from{opacity:0;transform:scale(0.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}} @keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} /* === FADE UP === */ .fade-up{opacity:0;transform:translateY(20px);transition:opacity 0.65s var(--ease-out),transform 0.65s var(--ease-dramatic)} .fade-up.visible{opacity:1;transform:translateY(0)} .stagger-1{transition-delay:0.08s}.stagger-2{transition-delay:0.16s}.stagger-3{transition-delay:0.24s}.stagger-4{transition-delay:0.32s} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1024px){ .admin-sidebar{display:none}.admin-content{margin-left:0} .two-col{grid-template-columns:1fr;gap:32px} .bento{grid-template-columns:repeat(2,1fr)}.bento-span-2{grid-column:span 1} .four-col{grid-template-columns:repeat(2,1fr)} .photo-showcase{grid-template-columns:1fr 1fr} .photo-showcase-item:first-child{grid-row:span 1} .vision-banner{flex-direction:column;text-align:center} } @media(max-width:768px){ .nav-links{display:none}.nav-mobile{display:block} .nav-actions .nav-link{display:none} .notif-wrapper{display:none} .nav-mobile{display:flex !important;align-items:center;justify-content:center;width:44px;height:44px;font-size:20px;z-index:110;position:relative} .hero{padding:72px 20px 48px}.hero h1{font-size:34px;letter-spacing:-1.2px}.hero p{font-size:15px} .section{padding:56px 20px}.container{padding:0 20px}.nav-inner{padding:0 16px} .stats-row{flex-direction:column;max-width:240px} .stat-item+.stat-item{border-left:none;border-top:1px solid var(--border)} .steps{grid-template-columns:1fr;gap:20px;max-width:340px;margin:0 auto}.steps::before{display:none}.step{padding:0} .mentor-grid{grid-template-columns:1fr} .feature-grid,.three-col,.four-col{grid-template-columns:1fr} .dash-grid{grid-template-columns:1fr!important} .md-grid{grid-template-columns:1fr!important} .hero-actions{flex-direction:column;align-items:center} .hero-actions .btn{width:100%;max-width:280px;justify-content:center} .footer-inner{flex-direction:column}.footer-links{flex-direction:column;gap:24px} .footer-bottom{flex-direction:column;gap:8px;text-align:center} .filter-bar{gap:5px}.cta{padding:40px 20px} .section-title{font-size:26px}.section-header{margin-bottom:36px} .trust-bar{gap:20px}.floating-bubbles{display:none} .avatar-row{flex-direction:column;gap:10px} .bento{grid-template-columns:1fr} .marquee-wrap{display:none} .hero-gallery{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;padding:0 16px 8px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory} .hero-gallery .hero-gallery-item{flex:0 0 200px;scroll-snap-align:start;border-radius:12px} .hero-gallery .hero-gallery-item img{height:220px} .photo-showcase{grid-template-columns:1fr} .photo-mosaic{grid-template-columns:1fr;grid-template-rows:auto} .photo-mosaic .mosaic-main{grid-row:span 1} } /* === FOCUS & SELECTION === */ *:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px} ::selection{background:var(--green-100);color:var(--green)} /* === SCROLLBAR === */ ::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:var(--border-hover)} /* ============================================================ A+++ SUPREME ENHANCEMENTS v10.0 Particles · Micro-interactions · Kinetic Typography · Parallax ============================================================ */ /* === ANIMATED GEOMETRIC PARTICLES === */ .geo-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0} .geo-particle{ position:absolute;opacity:0; animation:geoFloat var(--p-dur, 12s) var(--p-delay, 0s) ease-in-out infinite; } @keyframes geoFloat{ 0%{opacity:0;transform:translateY(20px) rotate(0deg) scale(0.8)} 15%{opacity:var(--p-opacity, 0.07)} 50%{transform:translateY(-30px) rotate(180deg) scale(1)} 85%{opacity:var(--p-opacity, 0.07)} 100%{opacity:0;transform:translateY(20px) rotate(360deg) scale(0.8)} } /* === KINETIC TYPOGRAPHY — text reveal === */ .text-reveal{display:inline-block;overflow:hidden;vertical-align:bottom} .text-reveal-inner{ display:inline-block; transform:translateY(110%); animation:textRevealUp 0.9s var(--ease-dramatic) forwards; } /* RTL: add margin to preserve word spacing between inline-block text-reveal spans */ html[dir="rtl"] h1 .text-reveal + .text-reveal{margin-inline-start:0.25em} .text-reveal-inner.delay-1{animation-delay:0.12s} .text-reveal-inner.delay-2{animation-delay:0.24s} .text-reveal-inner.delay-3{animation-delay:0.36s} @keyframes textRevealUp{ 0%{transform:translateY(110%);opacity:0} 100%{transform:translateY(0);opacity:1} } /* === HERO GLOW PULSE (ambient light) === */ .hero-glow{ position:absolute;width:600px;height:600px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(0,108,53,0.08) 0%,transparent 60%); animation:glowPulse 6s ease-in-out infinite alternate; filter:blur(40px); } .hero-glow-gold{ background:radial-gradient(circle,rgba(200,169,81,0.06) 0%,transparent 60%); animation:glowPulse 8s 2s ease-in-out infinite alternate; } @keyframes glowPulse{ 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(1.15);opacity:1} } /* === SCROLL-TRIGGERED COUNTER === */ .counter-value{ font-family:'Playfair Display',Georgia,serif; font-variant-numeric:tabular-nums; transition:color 0.3s; } /* === PREMIUM CARD SHIMMER (hover reveal) === */ .card-shimmer{position:relative;overflow:hidden} .card-shimmer::before{ content:'';position:absolute;top:0;left:-100%;width:60%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); transition:none;pointer-events:none; } .card-shimmer:hover::before{ animation:cardShimmer 0.7s ease forwards; } @keyframes cardShimmer{ 0%{left:-100%} 100%{left:150%} } /* === MAGNETIC HOVER (for buttons) === */ .magnetic{transition:transform 0.3s var(--ease-spring)} /* === SECTION SCROLL INDICATOR (gold dot) === */ .scroll-dot{ width:6px;height:6px;border-radius:50%;background:var(--gold); margin:0 auto 24px; animation:scrollDotPulse 2s ease-in-out infinite; } @keyframes scrollDotPulse{ 0%,100%{opacity:0.3;transform:scale(1)} 50%{opacity:0.8;transform:scale(1.5)} } /* === UPGRADED HERO (parallax-ready) === */ .hero-parallax{ position:relative;overflow:hidden; background:linear-gradient(180deg,var(--bg-cream) 0%,var(--white) 40%,var(--bg-subtle) 100%); } .hero-parallax .hero-bg-layer{ position:absolute;inset:0;pointer-events:none; transition:transform 0.1s linear; } /* === REFINED NAV (glow on scroll) === */ .nav.scrolled{ background:rgba(255,255,255,0.96); box-shadow:0 0 0 1px rgba(0,0,0,0.02),0 1px 3px rgba(0,0,0,0.04),0 8px 32px rgba(0,0,0,0.04); } .nav-link{position:relative} .nav-link::before{ content:'';position:absolute;bottom:0;left:50%;width:0;height:1.5px; background:var(--gold);border-radius:1px; transition:width 0.3s var(--ease),left 0.3s var(--ease); } .nav-link:hover::before{width:60%;left:20%} .nav-link.active::before{display:none} /* === UPGRADED MENTOR CARD === */ .mentor-card{ background:linear-gradient(180deg,var(--white) 0%,#fcfcfc 100%); } .mentor-card .mentor-avatar{ box-shadow:0 2px 8px rgba(0,0,0,0.08),0 0 0 2px rgba(200,169,81,0.08); } /* === FEATURE CARD UPGRADED (with number) === */ .feature-card-num{ position:absolute;top:14px;right:14px; font-family:'Playfair Display',Georgia,serif;font-size:42px;font-weight:800; color:rgba(0,108,53,0.04);line-height:1;pointer-events:none; } /* === GOLD ACCENT LINE === */ .gold-line{ width:40px;height:2px;border-radius:1px; background:linear-gradient(90deg,var(--gold),var(--gold-light)); margin-bottom:16px; } .gold-line-center{margin-left:auto;margin-right:auto} /* === SECTION CONNECTOR (vertical gold line) === */ .section-connector{ width:1px;height:48px;margin:0 auto; background:linear-gradient(180deg,transparent,var(--gold),transparent); opacity:0.3; } /* === PHOTO HOVER TILT === */ .photo-tilt{transition:transform 0.5s var(--ease)} .photo-tilt:hover{transform:perspective(800px) rotateY(-3deg) rotateX(2deg) scale(1.02)} /* === TESTIMONIAL UPGRADED === */ .testimonial{ background:linear-gradient(180deg,var(--white) 0%,#fdfcfa 100%); } .testimonial .testimonial-text{ font-size:15.5px;letter-spacing:-0.1px; } /* === STAT ITEM HOVER GLOW === */ .stat-item{position:relative;overflow:hidden} .stat-item::after{ content:'';position:absolute;bottom:-20px;left:50%;transform:translateX(-50%); width:60px;height:40px;border-radius:50%; background:radial-gradient(ellipse,var(--green-glow),transparent); opacity:0;transition:opacity 0.4s; } .stat-item:hover::after{opacity:1} /* === STEP CONNECTOR DOTS === */ .step-connector-dot{ position:absolute;top:28px;width:8px;height:8px;border-radius:50%; background:var(--gold);opacity:0.2; } /* === CTA UPGRADED — with floating orbs === */ .cta{position:relative;overflow:hidden} .cta-orb{ position:absolute;border-radius:50%;pointer-events:none; filter:blur(30px);animation:orbFloat 8s ease-in-out infinite; } .cta-orb-1{width:200px;height:200px;top:-60px;right:-40px;background:rgba(200,169,81,0.08);animation-delay:0s} .cta-orb-2{width:160px;height:160px;bottom:-40px;left:-30px;background:rgba(0,108,53,0.06);animation-delay:3s} @keyframes orbFloat{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(15px,-15px) scale(1.1)} } /* === VISION BANNER UPGRADED === */ .vision-banner{ box-shadow:0 8px 32px rgba(0,60,30,0.2),inset 0 1px 0 rgba(255,255,255,0.05); } /* === FOOTER UPGRADED === */ .footer{ background:linear-gradient(180deg,#0d0d0f 0%,#111113 40%,#0a0a0b 100%); } .footer-col h4{ color:var(--gold);opacity:0.5;position:relative;padding-bottom:8px; } .footer-col h4::after{ content:'';position:absolute;bottom:0;left:0;width:16px;height:1px; background:var(--gold);opacity:0.3; } /* === PAGE TRANSITION (subtle) === */ .page{animation:pageIn 0.5s var(--ease-out)} @keyframes pageIn{from{opacity:0.85;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* === LOADING SHIMMER UPGRADED === */ .skeleton{ background:linear-gradient(90deg,var(--bg-subtle) 25%,var(--border) 37%,var(--bg-subtle) 63%); background-size:400% 100%; animation:shimmer 1.4s ease-in-out infinite; } /* === INPUT FOCUS GLOW === */ .input:focus{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-glow),0 1px 2px rgba(0,0,0,0.04); } /* === BADGE PULSE === */ .hero-badge{ animation:badgePulse 3s ease-in-out infinite; } @keyframes badgePulse{ 0%,100%{box-shadow:0 1px 8px rgba(0,108,53,0.06)} 50%{box-shadow:0 1px 16px rgba(0,108,53,0.12),0 0 0 4px rgba(0,108,53,0.03)} } /* === SMOOTH SCROLL PROGRESS BAR === */ .scroll-progress{ position:fixed;top:0;left:0;height:2px;z-index:9999; background:linear-gradient(90deg,var(--green),var(--gold)); transform-origin:left;transform:scaleX(0); transition:transform 0.1s linear; } /* ============================================================ A+++ ULTIMATE PREMIUM ENHANCEMENTS v11.0 Morphing borders · Liquid glass · 3D depth · Split-reveal ============================================================ */ /* === MORPHING BORDER (animated gradient border) === */ .morph-border{ position:relative;border-radius:var(--radius-xl);padding:2px; background:linear-gradient(135deg,var(--green),var(--gold),var(--green),var(--gold)); background-size:300% 300%;animation:morphBorder 6s ease infinite; } .morph-border-inner{ background:var(--white);border-radius:calc(var(--radius-xl) - 2px); padding:32px;height:100%; } @keyframes morphBorder{ 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} } /* === LIQUID GLASS CARD === */ .liquid-glass{ background:rgba(255,255,255,0.65); backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%); border:1px solid rgba(255,255,255,0.5); box-shadow:0 8px 32px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.8); border-radius:var(--radius-xl); } /* === 3D DEPTH CARD === */ .depth-card{ transform-style:preserve-3d;perspective:1000px; transition:transform 0.5s var(--ease); } .depth-card:hover{ transform:perspective(1000px) rotateX(2deg) rotateY(-2deg) translateZ(10px); } .depth-card-layer{ position:absolute;inset:0;border-radius:inherit;pointer-events:none; border:1px solid rgba(200,169,81,0.04); transform:translateZ(5px); } /* === TEXT GRADIENT (premium headings) === */ .text-gradient{ background:linear-gradient(135deg,var(--green) 0%,var(--gold) 50%,var(--green) 100%); background-size:200% 200%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; animation:textGradientFlow 4s ease infinite; } @keyframes textGradientFlow{ 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} } /* === SPLIT REVEAL (scroll animation) === */ .split-reveal{ opacity:0;transform:translateX(-30px); transition:opacity 0.7s var(--ease-dramatic),transform 0.7s var(--ease-dramatic); } .split-reveal.from-right{transform:translateX(30px)} .split-reveal.visible{opacity:1;transform:translateX(0)} /* === STAGGERED GRID (cascade animation) === */ .stagger-grid > *{ opacity:0;transform:translateY(24px) scale(0.97); transition:opacity 0.5s var(--ease-out),transform 0.5s var(--ease-dramatic); } .stagger-grid.visible > *:nth-child(1){transition-delay:0.05s;opacity:1;transform:none} .stagger-grid.visible > *:nth-child(2){transition-delay:0.12s;opacity:1;transform:none} .stagger-grid.visible > *:nth-child(3){transition-delay:0.19s;opacity:1;transform:none} .stagger-grid.visible > *:nth-child(4){transition-delay:0.26s;opacity:1;transform:none} .stagger-grid.visible > *:nth-child(5){transition-delay:0.33s;opacity:1;transform:none} .stagger-grid.visible > *:nth-child(6){transition-delay:0.40s;opacity:1;transform:none} .stagger-grid.visible > *:nth-child(7){transition-delay:0.47s;opacity:1;transform:none} .stagger-grid.visible > *:nth-child(8){transition-delay:0.54s;opacity:1;transform:none} /* === PREMIUM COUNTER CARD === */ .counter-card{ background:linear-gradient(180deg,var(--white) 0%,#fdfcfa 100%); border:1px solid var(--border-art);border-radius:var(--radius-xl); padding:28px;text-align:center;position:relative;overflow:hidden; box-shadow:var(--shadow-sm);transition:all var(--duration) var(--ease); } .counter-card::before{ content:'';position:absolute;inset:4px;border:1px solid rgba(200,169,81,0.04); border-radius:calc(var(--radius-xl) - 4px);pointer-events:none; } .counter-card:hover{ box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:rgba(200,169,81,0.12); } .counter-card .counter-icon{ width:44px;height:44px;border-radius:14px;display:flex;align-items:center; justify-content:center;margin:0 auto 14px;font-size:16px; transition:transform var(--duration) var(--ease-spring); } .counter-card:hover .counter-icon{transform:scale(1.12) rotate(-6deg)} /* === TIMELINE (vertical connected steps) === */ .v-timeline{position:relative;padding-left:40px} .v-timeline::before{ content:'';position:absolute;left:15px;top:8px;bottom:8px;width:2px; background:linear-gradient(180deg,var(--green),var(--gold),var(--green)); opacity:0.15;border-radius:1px; } .v-timeline-item{position:relative;padding-bottom:32px} .v-timeline-item:last-child{padding-bottom:0} .v-timeline-dot{ position:absolute;left:-33px;top:4px;width:18px;height:18px;border-radius:50%; background:var(--white);border:2.5px solid var(--green); box-shadow:0 0 0 4px rgba(0,108,53,0.08);transition:all var(--duration) var(--ease);z-index:1; } .v-timeline-item:hover .v-timeline-dot{ background:var(--green);box-shadow:0 0 0 6px rgba(0,108,53,0.12); } .v-timeline-dot-gold{border-color:var(--gold)} .v-timeline-item:hover .v-timeline-dot-gold{background:var(--gold);box-shadow:0 0 0 6px rgba(200,169,81,0.12)} /* === FLOATING TAG CLOUD === */ .tag-cloud{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .tag-cloud .tag{ padding:6px 14px;border-radius:var(--radius-pill);font-size:12px; transition:all 0.3s var(--ease-spring);cursor:default; } .tag-cloud .tag:hover{transform:translateY(-3px) scale(1.05)} /* === RIBBON BADGE === */ .ribbon{ position:absolute;top:16px;right:-6px;padding:4px 16px 4px 12px; background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:white;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase; border-radius:3px 0 0 3px;box-shadow:0 2px 6px rgba(200,169,81,0.3); } .ribbon::after{ content:'';position:absolute;right:0;bottom:-6px;border:3px solid var(--gold-dark); border-right-color:transparent;border-bottom-color:transparent; } /* === ICON PULSE RING === */ .icon-pulse{position:relative} .icon-pulse::after{ content:'';position:absolute;inset:-4px;border-radius:inherit; border:2px solid var(--green);opacity:0; animation:iconPulseRing 2s ease-in-out infinite; } @keyframes iconPulseRing{ 0%{transform:scale(1);opacity:0.3} 50%{transform:scale(1.15);opacity:0} 100%{transform:scale(1);opacity:0} } /* === HOVER LINE REVEAL === */ .line-reveal{position:relative;display:inline-block} .line-reveal::after{ content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px; background:linear-gradient(90deg,var(--green),var(--gold));border-radius:1px; transition:width 0.4s var(--ease-dramatic); } .line-reveal:hover::after{width:100%} /* === ENHANCED SECTION DIVIDER === */ .section-divider-art{ position:relative;height:64px;display:flex;align-items:center;justify-content:center; overflow:hidden; } .section-divider-art::before{ content:'';position:absolute;left:0;right:0;top:50%;height:1px; background:linear-gradient(90deg,transparent 0%,var(--border) 20%,var(--border) 80%,transparent 100%); } .section-divider-art .divider-ornament{ position:relative;z-index:1;width:32px;height:32px;background:var(--white); display:flex;align-items:center;justify-content:center; } .section-divider-art .divider-ornament svg{width:24px;height:24px;color:var(--gold);opacity:0.4} /* ============================================================ LANGUAGE TOGGLE BUTTON ============================================================ */ .lang-toggle{ width:36px;height:36px;border-radius:10px;border:1.5px solid var(--border); background:var(--white);color:var(--text);font-size:14px;font-weight:700; cursor:pointer;display:flex;align-items:center;justify-content:center; transition:all var(--duration) var(--ease);flex-shrink:0; box-shadow:var(--shadow-xs); } .lang-toggle:hover{ border-color:var(--green);color:var(--green);transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,108,53,0.12); } /* === RESPONSIVE A+++ ADDITIONS === */ @media(max-width:768px){ .geo-particles{display:none} .hero-glow,.hero-glow-gold{display:none} .scroll-progress{height:2px} .section-connector{height:32px} .v-timeline{padding-left:32px} .v-timeline::before{left:11px} .v-timeline-dot{left:-28px} .morph-border-inner{padding:20px} .counter-card{padding:18px} } /* ============================================================ RTL (Arabic) SUPPORT — v11.1 comprehensive fix When html[dir="rtl"] is set, flip layout direction ============================================================ */ /* --- Base RTL --- */ html[dir="rtl"]{direction:rtl} html[dir="rtl"] body{ font-family:'Cairo','Inter',system-ui,-apple-system,sans-serif; text-align:right; } html[dir="rtl"] *{ /* Reset letter-spacing globally for Arabic (Latin tracking looks odd) */ letter-spacing:0 !important; } html[dir="rtl"] .serif, html[dir="rtl"] .serif-accent{ font-family:'Cairo',sans-serif; } /* Arabic headings: use Cairo for all heading levels */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3{ font-family:'Cairo',sans-serif; font-weight:800; font-style:normal; } html[dir="rtl"] .hero h1{ font-family:'Cairo',sans-serif; font-weight:800; font-style:normal; line-height:1.3; } /* --- Nav RTL --- */ html[dir="rtl"] .nav-inner{flex-direction:row-reverse} html[dir="rtl"] .nav-links{flex-direction:row-reverse} html[dir="rtl"] .nav-actions{flex-direction:row-reverse} @media(max-width:768px){ html[dir="rtl"] .nav-inner{flex-direction:row-reverse} html[dir="rtl"] .nav-mobile{order:-1} } html[dir="rtl"] .nav-logo{flex-direction:row-reverse} html[dir="rtl"] .nav-logo-mark{margin-left:8px;margin-right:0} html[dir="rtl"] .btn i.fa-arrow-right{transform:scaleX(-1);margin-left:0;margin-right:6px} html[dir="rtl"] .btn i.fa-arrow-left{transform:scaleX(-1)} /* --- Hero RTL --- */ html[dir="rtl"] .hero-inner{text-align:center} html[dir="rtl"] .hero-actions{flex-direction:row-reverse;justify-content:center} html[dir="rtl"] .hero-badge{flex-direction:row-reverse} html[dir="rtl"] .hero-badge i{margin-left:7px;margin-right:0} /* --- Gallery RTL --- */ html[dir="rtl"] .hero-gallery{flex-direction:row-reverse} /* --- Stats RTL --- */ html[dir="rtl"] .stats-row{flex-direction:row-reverse} html[dir="rtl"] .stat-item + .stat-item{border-left:none;border-right:1px solid var(--border)} /* --- Trust bar RTL --- */ html[dir="rtl"] .trust-bar{flex-direction:row-reverse} html[dir="rtl"] .trust-item{flex-direction:row-reverse} html[dir="rtl"] .trust-item i{margin-left:7px;margin-right:0} /* --- Section labels RTL --- */ html[dir="rtl"] .section-label{flex-direction:row-reverse} html[dir="rtl"] .section-header{text-align:center} /* --- Mentor cards RTL --- */ html[dir="rtl"] .mentor-header{flex-direction:row-reverse;text-align:right} html[dir="rtl"] .mentor-footer{flex-direction:row-reverse} html[dir="rtl"] .mentor-tags{justify-content:flex-start;direction:rtl} html[dir="rtl"] .mentor-bio{text-align:right} /* --- Feature grid RTL --- */ html[dir="rtl"] .feature-card{text-align:right} html[dir="rtl"] .feature-card-num{left:auto;right:14px} /* --- Steps RTL --- */ html[dir="rtl"] .steps{direction:rtl} html[dir="rtl"] .step{text-align:center} /* --- Forms RTL (CRITICAL FIX) --- */ html[dir="rtl"] .form-group{text-align:right} html[dir="rtl"] .form-group label{text-align:right} html[dir="rtl"] .input{ text-align:right; direction:rtl; font-family:'Cairo','Inter',system-ui,sans-serif; } html[dir="rtl"] .input::placeholder{ text-align:right; direction:rtl; } /* Select dropdown fix — flip arrow to left side, add padding */ html[dir="rtl"] select.input{ background-position:left 14px center; padding-left:36px; padding-right:15px; text-align:right; direction:rtl; } /* Select option elements */ html[dir="rtl"] select.input option{ direction:rtl; text-align:right; font-family:'Cairo','Inter',system-ui,sans-serif; } /* Search input fix */ html[dir="rtl"] .search-wrap i{left:auto;right:15px} html[dir="rtl"] .search-wrap input{padding-left:15px;padding-right:42px;text-align:right} /* Textarea */ html[dir="rtl"] textarea.input{text-align:right;direction:rtl} /* Form-input RTL support (mentee profile) */ html[dir="rtl"] .form-label{text-align:right} html[dir="rtl"] .form-input{text-align:right;direction:rtl;font-family:'Cairo','Inter',system-ui,sans-serif} html[dir="rtl"] .form-input[dir="ltr"]{text-align:left;direction:ltr} html[dir="rtl"] .form-input::placeholder{text-align:right;direction:rtl} html[dir="rtl"] select.form-input{background-position:left 14px center;padding-left:36px;padding-right:14px;text-align:right;direction:rtl} html[dir="rtl"] textarea.form-input{text-align:right;direction:rtl} /* --- Footer RTL --- */ html[dir="rtl"] .footer-inner{flex-direction:row-reverse} html[dir="rtl"] .footer-links{flex-direction:row-reverse} html[dir="rtl"] .footer-bottom{flex-direction:row-reverse} html[dir="rtl"] .footer-col{text-align:right} html[dir="rtl"] .footer-col a:hover{transform:translateX(-3px)} html[dir="rtl"] .footer-social{flex-direction:row-reverse} html[dir="rtl"] .footer-brand{text-align:right} /* --- Filter bar RTL --- */ html[dir="rtl"] .filter-bar{flex-direction:row-reverse;justify-content:flex-start} /* --- Two col RTL --- */ html[dir="rtl"] .two-col{direction:rtl} /* --- Icon box RTL --- */ html[dir="rtl"] .icon-box{flex-direction:row-reverse;text-align:right} /* --- Testimonial RTL --- */ html[dir="rtl"] .testimonial{text-align:right} html[dir="rtl"] .testimonial-author{flex-direction:row-reverse;text-align:right} html[dir="rtl"] .testimonial::after{left:auto;right:28px} /* --- Avatar row RTL --- */ html[dir="rtl"] .avatar-row{flex-direction:row-reverse} html[dir="rtl"] .avatar-row-stack{flex-direction:row-reverse;margin-right:0;margin-left:14px} html[dir="rtl"] .avatar-row-stack img{margin-left:0;margin-right:-10px} html[dir="rtl"] .avatar-row-stack img:first-child{margin-right:0} html[dir="rtl"] .avatar-row-text{text-align:right} /* --- Timeline RTL --- */ html[dir="rtl"] .v-timeline{padding-left:0;padding-right:48px} html[dir="rtl"] .v-timeline::before{left:auto;right:15px} html[dir="rtl"] .v-timeline-dot{left:auto;right:-32px} html[dir="rtl"] .v-timeline-item .card-art, html[dir="rtl"] .v-timeline-item .liquid-glass{text-align:right} /* --- Modal RTL --- */ html[dir="rtl"] .modal{text-align:right} html[dir="rtl"] .modal-close{left:16px;right:auto} html[dir="rtl"] .modal .three-col{direction:rtl} html[dir="rtl"] .modal .tag-cloud{justify-content:flex-start;direction:rtl} /* --- Photo showcase RTL --- */ html[dir="rtl"] .photo-showcase{flex-direction:row-reverse} /* --- CTA RTL --- */ html[dir="rtl"] .cta{text-align:center} html[dir="rtl"] .cta .hero-actions{flex-direction:row-reverse;justify-content:center} /* --- Toast RTL --- */ html[dir="rtl"] .toast{left:24px;right:auto} html[dir="rtl"] .toast i{margin-left:8px;margin-right:0} /* --- Mobile menu RTL --- */ html[dir="rtl"] .mobile-menu{text-align:right} html[dir="rtl"] .mobile-menu .nav-link{text-align:right;padding-right:24px;flex-direction:row-reverse} html[dir="rtl"] .mobile-menu .nav-link i{margin-left:10px;margin-right:0} html[dir="rtl"] .mobile-menu .mobile-auth-row{flex-direction:row-reverse} /* --- Gold line RTL --- */ html[dir="rtl"] .gold-line{margin-left:auto;margin-right:0} /* --- Split reveal RTL --- */ html[dir="rtl"] .split-reveal{text-align:right} /* --- Tag cloud RTL --- */ html[dir="rtl"] .tag-cloud{justify-content:flex-start;direction:rtl} /* --- Counter card RTL --- */ html[dir="rtl"] .counter-card{text-align:center} /* --- Three col RTL --- */ html[dir="rtl"] .three-col{direction:rtl} /* --- Icon in RTL margin fix --- */ html[dir="rtl"] i[style*="margin-right"]{margin-right:0 !important;margin-left:4px} html[dir="rtl"] .fa-lock{margin-left:4px !important;margin-right:0 !important} html[dir="rtl"] .fa-paper-plane{margin-left:6px;margin-right:0} /* --- FAQ RTL --- */ html[dir="rtl"] .faq-q{text-align:right;flex-direction:row-reverse} html[dir="rtl"] .faq-q span{text-align:right} html[dir="rtl"] .faq-a p{text-align:right} /* --- Vision banner RTL --- */ html[dir="rtl"] .vision-banner-content{text-align:center} /* --- Scroll progress stays LTR (left-to-right fill) --- */ html[dir="rtl"] .scroll-progress{direction:ltr} /* --- Gradient top stays full width --- */ html[dir="rtl"] .gradient-top{direction:ltr} /* --- RTL line-height for Arabic readability --- */ html[dir="rtl"] p, html[dir="rtl"] .mentor-bio, html[dir="rtl"] .feature-card p, html[dir="rtl"] .step p{ line-height:1.9; } /* --- RTL responsive --- */ @media(max-width:768px){ html[dir="rtl"] .v-timeline{padding-right:32px;padding-left:0} html[dir="rtl"] .v-timeline::before{right:11px;left:auto} html[dir="rtl"] .v-timeline-dot{right:-28px;left:auto} html[dir="rtl"] .two-col{grid-template-columns:1fr} html[dir="rtl"] .nav-inner{flex-direction:row-reverse} html[dir="rtl"] .stats-row{flex-direction:column} html[dir="rtl"] .stat-item + .stat-item{border-right:none;border-top:1px solid var(--border)} html[dir="rtl"] .trust-bar{flex-direction:column;align-items:center} html[dir="rtl"] .hero-actions{flex-direction:column;align-items:center} html[dir="rtl"] .cta .hero-actions{flex-direction:column;align-items:center} } @media(max-width:640px){ #msgSidebar{width:100%!important;min-width:100%!important;border:none!important} #msgChat{display:none!important} #msgChat.active{display:flex!important} } /* ============================================================ v28.3 ENHANCEMENTS — Micro-interactions, Transitions, Polish ============================================================ */ /* === PAGE LOAD TRANSITION === */ .page{animation:pageSlideIn 0.4s var(--ease-dramatic) both} @keyframes pageSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} /* === FLOATING ORB (used in login/404 screens) === */ @keyframes floatOrb{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* === ENHANCED SKELETON PULSE === */ .skeleton{position:relative;overflow:hidden} .skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.5) 50%,transparent 100%);animation:skeletonWave 1.6s ease-in-out infinite} @keyframes skeletonWave{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} /* === STAT CARD HOVER EFFECT === */ .dash-stat{transition:all 0.25s var(--ease-out);cursor:default} .dash-stat:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.08);border-color:var(--green-200,var(--border))} .dash-stat i{transition:transform 0.3s var(--ease-out)} .dash-stat:hover i{transform:scale(1.15)} /* === BOOKING CARD HOVER === */ .booking-card{transition:all 0.2s var(--ease-out)} .booking-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.06);border-color:var(--green-200,rgba(0,108,53,0.2))} /* === CONVERSATION ITEM HOVER === */ .msg-conv-item{transition:all 0.15s ease} .msg-conv-item:hover{background:var(--white)!important;box-shadow:inset 3px 0 0 var(--green)} html[dir="rtl"] .msg-conv-item:hover{box-shadow:inset -3px 0 0 var(--green)} /* === QUICK ACTION BUTTON LIFT === */ .quick-action-btn{transition:all 0.2s var(--ease-out)} .quick-action-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.06)} /* === SMOOTH SCROLL === */ html{scroll-behavior:smooth} /* === MESSAGE BUBBLE ENTRANCE === */ @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes msgBounceIn{from{opacity:0;transform:scale(0.9) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}} #msgBody > div{animation:msgBounceIn 0.25s var(--ease-out) both} /* === TYPING INDICATOR === */ .typing-indicator{display:flex;align-items:center;gap:4px;padding:12px 16px;opacity:0.7} .typing-indicator span{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:typingBounce 1.4s infinite} .typing-indicator span:nth-child(2){animation-delay:0.15s} .typing-indicator span:nth-child(3){animation-delay:0.3s} @keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:0.4}30%{transform:translateY(-6px);opacity:1}} /* === NOTIFICATION DOT PULSE === */ .notif-dot{animation:notifPulse 2s ease-in-out infinite} @keyframes notifPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,108,53,0.3)}50%{box-shadow:0 0 0 6px rgba(0,108,53,0)}} /* === ENHANCED BADGE PILL === */ .badge-pill{transition:all 0.2s} .badge-pill:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,108,53,0.15)} /* === TAB SWITCH ANIMATION === */ .booking-tab{transition:all 0.2s var(--ease-out)} .booking-tab.active{box-shadow:0 2px 12px rgba(0,0,0,0.06)} .booking-tab-content{animation:tabFadeIn 0.3s ease both} @keyframes tabFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* === CARD ENTRANCE STAGGER === */ .card-entrance{animation:cardSlideUp 0.35s var(--ease-out) both} .card-entrance:nth-child(1){animation-delay:0.05s} .card-entrance:nth-child(2){animation-delay:0.1s} .card-entrance:nth-child(3){animation-delay:0.15s} .card-entrance:nth-child(4){animation-delay:0.2s} .card-entrance:nth-child(5){animation-delay:0.25s} @keyframes cardSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} /* === EMPTY STATE ILLUSTRATION BREATHE === */ .empty-illust{animation:breathe 3s ease-in-out infinite} @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}} /* === FORM INPUT FOCUS GLOW === */ .form-input:focus,.input:focus{border-color:var(--green)!important;box-shadow:0 0 0 3px rgba(0,108,53,0.08)!important;transition:all 0.2s} /* === SUCCESS ANIMATION (contact form) === */ @keyframes successPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}} .success-icon{animation:successPop 0.5s var(--ease-dramatic) both} /* === BACK-TO-TOP PULSE ON HOVER === */ #backToTop:hover{transform:translateY(-3px)!important;box-shadow:0 6px 20px rgba(0,108,53,0.35)} /* === SCROLL PROGRESS BAR GLOW === */ #scrollProgress{box-shadow:0 0 8px rgba(0,108,53,0.3)} /* === MENTOR CARD ENHANCE === */ .mentor-card-art{transition:all 0.3s var(--ease-out)} .mentor-card-art:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.1)} .mentor-card-art img{transition:transform 0.4s var(--ease-out)} .mentor-card-art:hover img{transform:scale(1.03)} /* === MOBILE MESSAGE SIDEBAR POLISH === */ @media(max-width:640px){ .msg-conv-item{padding:16px!important} .msg-conv-item:hover{background:var(--bg-subtle)!important;box-shadow:none} #msgContainer{border:none!important;border-radius:0!important;height:auto!important;min-height:calc(100vh - var(--nav-h) - 60px)!important} #msgSidebar{padding:8px 0!important;background:var(--white)!important} } /* === LINK HOVER UNDERLINE EFFECT === */ .link-hover{position:relative;text-decoration:none} .link-hover::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--green);transition:width 0.25s var(--ease-out)} .link-hover:hover::after{width:100%} /* === AVATAR HOVER RING === */ .avatar-ring{transition:box-shadow 0.2s} .avatar-ring:hover{box-shadow:0 0 0 3px var(--green-100),0 0 0 5px rgba(0,108,53,0.15)} /* === STATUS BADGE SUBTLE SHIMMER === */ .status-badge{position:relative;overflow:hidden} .status-badge::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:badgeShimmer 3s ease-in-out infinite} @keyframes badgeShimmer{0%{left:-100%}50%,100%{left:200%}} /* ============================================================ v28.4 DEEP POLISH — Card Interactions, Form UX, Nav, CTA ============================================================ */ /* === FEATURE CARD HOVER === */ .feature-card{transition:all 0.3s var(--ease-out)} .feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.08)} .feature-card .feature-icon{transition:transform 0.3s var(--ease-out)} .feature-card:hover .feature-icon{transform:scale(1.12) rotate(-3deg)} /* === COUNTER CARD HOVER === */ .counter-card{transition:all 0.3s var(--ease-out)} .counter-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.08)} .counter-card .counter-icon{transition:transform 0.3s var(--ease-out)} .counter-card:hover .counter-icon{transform:scale(1.1)} .counter-card .metric-value{transition:color 0.3s} .counter-card:hover .metric-value{color:var(--green)} /* === ICON BOX HOVER === */ .icon-box{transition:all 0.2s var(--ease-out)} .icon-box:hover{transform:translateX(4px)} html[dir="rtl"] .icon-box:hover{transform:translateX(-4px)} .icon-box .icon-box-icon{transition:transform 0.3s var(--ease-out)} .icon-box:hover .icon-box-icon{transform:scale(1.1)} /* === DEPTH CARD HOVER GLOW === */ .depth-card{transition:all 0.3s var(--ease-out);position:relative} .depth-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(0,108,53,0.15),transparent);opacity:0;transition:opacity 0.3s;z-index:-1;pointer-events:none} .depth-card:hover::before{opacity:1} .depth-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.08)} /* === NAV ACTIVE INDICATOR === */ .nav-link.active{position:relative} .nav-link.active::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:16px;height:2px;background:var(--green);border-radius:1px;animation:navDotIn 0.3s var(--ease-out)} @keyframes navDotIn{from{width:0;opacity:0}to{width:16px;opacity:1}} /* === FORM VALIDATION SHAKE === */ @keyframes formShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}} .shake{animation:formShake 0.4s ease} /* === FORM INPUT ANIMATED LABEL === */ .form-group label,.form-label{transition:color 0.2s} .form-group:focus-within label,.form-group:focus-within .form-label{color:var(--green)} /* === FAQ ACCORDION SMOOTH === */ .faq-item{transition:background 0.2s} .faq-item:hover{background:rgba(0,108,53,0.02)} .faq-q{transition:all 0.2s} .faq-q:hover{color:var(--green)} .faq-a{overflow:hidden;max-height:0;transition:max-height 0.4s var(--ease-out),padding 0.3s} .faq-a p{transition:opacity 0.3s;opacity:0.7} .faq-item:has(.faq-a[style*="max-height"]:not([style*="max-height: 0"])) .faq-a p{opacity:1} /* === CTA SECTION ENHANCE === */ .cta{transition:all 0.4s var(--ease-out)} .cta:hover{transform:translateY(-2px);box-shadow:0 16px 48px rgba(0,0,0,0.15)} .cta .btn{transition:all 0.25s var(--ease-out)} .cta .btn:hover{transform:translateY(-2px)} /* === TIMELINE DOT PULSE === */ .v-timeline-dot{transition:all 0.3s} .v-timeline-item:hover .v-timeline-dot{box-shadow:0 0 0 4px rgba(0,108,53,0.15);transform:scale(1.2)} .v-timeline-item{transition:all 0.2s} .v-timeline-item:hover{transform:translateX(4px)} html[dir="rtl"] .v-timeline-item:hover{transform:translateX(-4px)} /* === STEP CARD HOVER === */ .step{transition:all 0.3s var(--ease-out)} .step:hover{transform:translateY(-4px)} .step .step-num{transition:all 0.3s var(--ease-out)} .step:hover .step-num{transform:scale(1.1);box-shadow:0 4px 12px rgba(0,108,53,0.2)} /* === TRUST BAR ITEM HOVER === */ .trust-item{transition:all 0.2s var(--ease-out);cursor:default} .trust-item:hover{transform:translateY(-2px);color:var(--green)} /* === PHOTO SHOWCASE CAPTION SLIDE === */ .photo-showcase-item{overflow:hidden;transition:all 0.3s var(--ease-out)} .photo-showcase-item:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.1)} .photo-showcase-caption{transition:all 0.3s var(--ease-out)} .photo-showcase-item:hover .photo-showcase-caption{transform:translateY(-4px)} /* === HERO BADGE FLOAT === */ .hero-badge{animation:heroBadgeFloat 3s ease-in-out infinite} @keyframes heroBadgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} /* === SECTION LABEL DASH === */ .section-label{position:relative;display:inline-block} .section-label::before{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--green);transition:width 0.5s var(--ease-out)} .fade-up.visible .section-label::before{width:100%} /* === SCROLL DOT ENHANCED === */ .scroll-dot{transition:all 0.3s;cursor:default} .scroll-dot:hover{transform:scale(1.3);background:var(--green)} /* === BUTTON RIPPLE EFFECT === */ .btn{position:relative;overflow:hidden} .btn::after{content:'';position:absolute;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.2);transition:width 0.4s ease,height 0.4s ease,opacity 0.4s;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0} .btn:active::after{width:200px;height:200px;opacity:1;transition:0s} /* === LIQUID GLASS HOVER === */ .liquid-glass{transition:all 0.3s var(--ease-out)} .liquid-glass:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,0.2)} /* === TAG HOVER === */ .tag{transition:all 0.2s} .tag-green:hover{background:var(--green);color:white;transform:translateY(-1px)} .tag-gold:hover{background:var(--gold);color:white;transform:translateY(-1px)} /* === PHOTO TILT ENHANCED === */ .photo-tilt{transition:transform 0.4s var(--ease-out)} .photo-tilt:hover{transform:perspective(800px) rotateY(2deg) rotateX(-1deg) scale(1.02)} /* === PERK/ICON BOX ANIMATE IN === */ .icon-box{opacity:0;animation:iconBoxIn 0.4s var(--ease-out) forwards} .icon-box:nth-child(1){animation-delay:0.05s} .icon-box:nth-child(2){animation-delay:0.1s} .icon-box:nth-child(3){animation-delay:0.15s} .icon-box:nth-child(4){animation-delay:0.2s} .icon-box:nth-child(5){animation-delay:0.25s} .icon-box:nth-child(6){animation-delay:0.3s} @keyframes iconBoxIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} /* ============================================================ v28.5 DEEP DIVE — Admin Polish, Message Bubbles, Profile FX, Find Mentors, Mentor Dashboard, Global Micro-interactions ============================================================ */ /* === ADMIN SKELETON LOADER (replaces spinners) === */ .admin-skeleton{display:flex;flex-direction:column;gap:8px;padding:40px} .admin-skeleton-row{height:44px;background:linear-gradient(90deg,var(--bg-subtle) 25%,rgba(255,255,255,0.08) 50%,var(--bg-subtle) 75%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:8px} .admin-skeleton-row:nth-child(2){width:90%;animation-delay:0.1s} .admin-skeleton-row:nth-child(3){width:75%;animation-delay:0.2s} .admin-skeleton-row:nth-child(4){width:85%;animation-delay:0.3s} .admin-skeleton-row:nth-child(5){width:60%;animation-delay:0.4s} /* === ADMIN STAT CARD ENHANCED === */ .dash-card{transition:all 0.25s var(--ease-out)} .dash-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.1)} .dash-card .dash-value{transition:transform 0.3s var(--ease-out)} .dash-card:hover .dash-value{transform:scale(1.05)} .dash-card i{transition:all 0.3s var(--ease-out)} .dash-card:hover i{transform:scale(1.15) rotate(-5deg)} /* === ADMIN TABLE ROW HOVER === */ .table tbody tr{transition:all 0.15s ease} .table tbody tr:hover{background:rgba(0,108,53,0.03);transform:translateX(2px)} html[dir="rtl"] .table tbody tr:hover{transform:translateX(-2px)} /* === ADMIN FILTER BUTTON ACTIVE TRANSITION === */ .filter-btn{transition:all 0.2s var(--ease-out);position:relative;overflow:hidden} .filter-btn.active{box-shadow:0 2px 8px rgba(0,108,53,0.15)} .filter-btn::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(0,108,53,0.1),transparent);opacity:0;transition:opacity 0.2s} .filter-btn:hover::before{opacity:1} /* === ADMIN QUICK ACCESS CARD HOVER === */ .admin-content .card{transition:all 0.25s var(--ease-out)} .admin-content .card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.1);border-color:rgba(0,108,53,0.2)} .admin-content .card i:first-child{transition:transform 0.3s var(--ease-out)} .admin-content .card:hover i:first-child{transform:scale(1.2)} /* === ADMIN MODAL ENTRANCE === */ .modal-overlay{animation:modalBgIn 0.2s ease} .modal{animation:modalSlideUp 0.3s var(--ease-dramatic)} @keyframes modalBgIn{from{opacity:0}to{opacity:1}} @keyframes modalSlideUp{from{opacity:0;transform:translateY(20px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}} /* === ADMIN SIDEBAR ACTIVE GLOW === */ .sidebar-link{transition:all 0.2s var(--ease-out)} .sidebar-link:hover{transform:translateX(3px)} html[dir="rtl"] .sidebar-link:hover{transform:translateX(-3px)} .sidebar-link.active{position:relative;box-shadow:0 2px 8px rgba(0,108,53,0.1)} /* === MESSAGE BUBBLE ENHANCED === */ #msgBody > div > div{position:relative} #msgBody > div > div[style*="background:var(--green)"]{box-shadow:0 2px 8px rgba(0,108,53,0.2)} #msgBody > div > div[style*="background:var(--bg-subtle)"]{box-shadow:0 1px 4px rgba(0,0,0,0.04)} /* === MESSAGE INPUT AREA === */ #msgInput{transition:all 0.2s var(--ease-out)} #msgInput:focus{box-shadow:0 0 0 3px rgba(0,108,53,0.1);transform:scale(1.005)} #msgSendBtn{transition:all 0.2s var(--ease-out)} #msgSendBtn:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,108,53,0.25)} #msgSendBtn:active{transform:scale(0.95)} /* === ONLINE STATUS DOT === */ .online-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid var(--white);position:absolute;bottom:0;right:0;box-shadow:0 0 0 0 rgba(34,197,94,0.4);animation:onlinePulse 2s ease-in-out infinite} @keyframes onlinePulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.4)}50%{box-shadow:0 0 0 4px rgba(34,197,94,0)}} /* === MENTOR DASHBOARD STAT CARDS === */ .md-stat-card{transition:all 0.25s var(--ease-out);position:relative;overflow:hidden} .md-stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.08);border-color:rgba(0,108,53,0.2)} .md-stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),var(--gold));transform:scaleX(0);transition:transform 0.3s var(--ease-out)} .md-stat-card:hover::before{transform:scaleX(1)} /* === MENTOR PROFILE AVATAR GLOW === */ .mentor-avatar-glow{transition:all 0.4s var(--ease-out)} .mentor-avatar-glow:hover{box-shadow:0 0 0 4px var(--green-100),0 8px 24px rgba(0,108,53,0.2)} /* === BOOKING CARD STAGGER + ENHANCED === */ .booking-card{position:relative;overflow:hidden} .booking-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;transition:height 0.3s var(--ease-out)} .booking-card:hover::before{height:100%} .booking-card[data-status="confirmed"]::before{background:var(--green)} .booking-card[data-status="pending"]::before{background:var(--gold)} .booking-card[data-status="completed"]::before{background:#2563eb} .booking-card[data-status="cancelled"]::before{background:var(--danger)} /* === FIND MENTORS GRID TRANSITIONS === */ #mentorsGrid{transition:opacity 0.2s ease} #mentorsGrid.filtering{opacity:0.5;pointer-events:none} /* === SEARCH INPUT PULSE ON FOCUS === */ .search-wrap{transition:all 0.2s var(--ease-out)} .search-wrap:focus-within{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.06)} .search-wrap:focus-within i{color:var(--green)} /* === FILTER CHIP ACTIVE BOUNCE === */ .filter-chip{transition:all 0.15s var(--ease-out)} .filter-chip.active{animation:chipBounce 0.3s var(--ease-out)} @keyframes chipBounce{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}} /* === PROFILE SECTION CARD === */ .profile-section{transition:all 0.3s var(--ease-out);position:relative} .profile-section:hover{box-shadow:0 8px 24px rgba(0,0,0,0.06)} .profile-section::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:0;transition:opacity 0.3s} .profile-section:hover::after{opacity:1} /* === PROFILE EDIT MODE HIGHLIGHT === */ .profile-editing{border-color:var(--green)!important;box-shadow:0 0 0 3px rgba(0,108,53,0.08)!important} /* === CERTIFICATE CARD HOVER === */ .cert-card{transition:all 0.3s var(--ease-out);position:relative;overflow:hidden} .cert-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.1)} .cert-card::after{content:'';position:absolute;top:0;right:0;width:60px;height:60px;background:linear-gradient(135deg,transparent 50%,rgba(0,108,53,0.05) 50%);transition:all 0.3s} .cert-card:hover::after{width:80px;height:80px} /* === PROGRESS BAR ANIMATED FILL === */ @keyframes progressFill{from{width:0}to{width:var(--target-width,0)}} .progress-bar-animated{animation:progressFill 1s var(--ease-out) both} /* === TOOLTIP === */ [data-tooltip]{position:relative;cursor:help} [data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--text);color:var(--white);font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:all 0.2s var(--ease-out);z-index:100} [data-tooltip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)} /* === PULSE RING (for important actions) === */ @keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(0,108,53,0.4)}100%{box-shadow:0 0 0 12px rgba(0,108,53,0)}} .pulse-ring{animation:pulseRing 1.5s ease infinite} /* === COUNT-UP NUMBER TRANSITION === */ .count-up{display:inline-block;transition:all 0.3s var(--ease-out)} /* === SMOOTH SECTION TRANSITIONS === */ .section{opacity:0;transform:translateY(20px);transition:all 0.6s var(--ease-out)} .section.visible,.section:has(.visible){opacity:1;transform:translateY(0)} .section-alt{opacity:0;transform:translateY(20px);transition:all 0.6s var(--ease-out)} .section-alt.visible,.section-alt:has(.visible){opacity:1;transform:translateY(0)} /* === REVIEW CARD HOVER === */ div[style*="border-bottom:1px solid var(--border)"]>div[style*="gap:10px"]{transition:all 0.2s ease} /* === MOBILE OPTIMIZATIONS === */ @media(max-width:768px){ .dash-card:hover,.md-stat-card:hover{transform:none;box-shadow:none} .admin-content .card:hover{transform:none} .feature-card:hover,.depth-card:hover{transform:translateY(-2px)} .mentor-card-art:hover{transform:translateY(-2px)} .v-timeline-item:hover{transform:translateX(2px)} html[dir="rtl"] .v-timeline-item:hover{transform:translateX(-2px)} } /* === REDUCE MOTION FOR ACCESSIBILITY === */ @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} .skeleton::after{animation:none} .page{animation:none} .online-dot{animation:none} .hero-badge{animation:none} .notif-dot{animation:none} .empty-illust{animation:none} .md-stat-card::before,.booking-card::before,.profile-section::after,.cert-card::after{display:none} } /* ============================================================ v30.0 — DARK MODE SYSTEM ============================================================ */ /* Dark theme variables — override all light tokens */ :root[data-theme="dark"] { --white:#0f1117; --bg:#0a0b0f; --bg-warm:#0f1117; --bg-subtle:#161822; --bg-cream:#0f1117; --bg-pattern:rgba(0,200,100,0.02); --surface:#1a1d2a; --border:rgba(255,255,255,0.08); --border-hover:rgba(255,255,255,0.15); --border-focus:rgba(0,200,100,0.4); --border-art:rgba(0,200,100,0.1); --text:#e8e8ec; --text-2:#9a9ab0; --text-3:#666680; --text-4:#444458; --green:#00c464; --green-light:rgba(0,196,100,0.1); --green-50:rgba(0,196,100,0.06); --green-100:rgba(0,196,100,0.12); --green-200:rgba(0,196,100,0.18); --green-hover:#00a854; --green-glow:rgba(0,196,100,0.15); --green-deep:#006C35; --gold:#e0be5a; --gold-light:#c8a951; --gold-50:rgba(200,169,81,0.08); --gold-glow:rgba(200,169,81,0.18); --gold-dark:#b8a040; --red:#f87171; --red-50:rgba(248,113,113,0.1); --red-deep:#fca5a5; --shadow-xs:0 1px 2px rgba(0,0,0,0.3); --shadow-sm:0 1px 3px rgba(0,0,0,0.3),0 4px 8px -2px rgba(0,0,0,0.3); --shadow:0 2px 4px rgba(0,0,0,0.2),0 8px 24px -4px rgba(0,0,0,0.4); --shadow-lg:0 4px 8px rgba(0,0,0,0.25),0 16px 40px -8px rgba(0,0,0,0.5); --shadow-xl:0 8px 16px rgba(0,0,0,0.3),0 32px 64px -12px rgba(0,0,0,0.6); --shadow-green:0 2px 8px rgba(0,196,100,0.15),0 8px 24px -4px rgba(0,196,100,0.25); --shadow-gold:0 2px 8px rgba(200,169,81,0.15),0 8px 24px -4px rgba(200,169,81,0.25); --shadow-carved:inset 0 2px 4px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.03); --shadow-emboss:0 1px 0 rgba(255,255,255,0.03),inset 0 1px 3px rgba(0,0,0,0.3); --glass:rgba(15,17,23,0.88); --glass-border:rgba(255,255,255,0.06); color-scheme: dark; } /* Dark mode — body & page backgrounds */ :root[data-theme="dark"] body{background:var(--bg)} /* Nav in dark mode */ :root[data-theme="dark"] .nav{background:rgba(15,17,23,0.92);border-bottom-color:var(--border)} :root[data-theme="dark"] .gradient-top{background:linear-gradient(180deg,rgba(0,196,100,0.06) 0%,transparent 100%)} /* Cards, surfaces, modals */ :root[data-theme="dark"] .mentor-card, :root[data-theme="dark"] .booking-card, :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .counter-card, :root[data-theme="dark"] .feature-card, :root[data-theme="dark"] .depth-card, :root[data-theme="dark"] .step-card, :root[data-theme="dark"] .faq-item, :root[data-theme="dark"] .trust-bar{background:linear-gradient(180deg,var(--bg-subtle) 0%,var(--bg) 100%);box-shadow:inset 0 1px 4px rgba(0,0,0,0.2)} :root[data-theme="dark"] .trust-item{color:var(--text-3)} :root[data-theme="dark"] .modal-content{background:var(--surface);border-color:var(--border)} /* Hero section */ :root[data-theme="dark"] .hero, :root[data-theme="dark"] .hero-parallax{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-subtle) 100%)} :root[data-theme="dark"] .stats-row{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-sm)} :root[data-theme="dark"] .stats-row::before{border-color:rgba(255,255,255,0.03)} :root[data-theme="dark"] .stat-item + .stat-item{border-left-color:var(--border)} :root[data-theme="dark"] .stat-label{color:var(--text-3)} :root[data-theme="dark"] .hero-glow{opacity:0.15} /* Section alternates */ :root[data-theme="dark"] .section-alt{background:var(--bg-subtle)} :root[data-theme="dark"] .section-connector{opacity:0.4} :root[data-theme="dark"] .arabesque-border::before{opacity:0.1} /* Footer */ :root[data-theme="dark"] .footer{background:var(--bg);border-top-color:var(--border)} :root[data-theme="dark"] .footer-bottom{border-top-color:var(--border)} /* Inputs & forms */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select{background:var(--bg-subtle);border-color:var(--border);color:var(--text)} :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder{color:var(--text-3)} /* Buttons */ :root[data-theme="dark"] .btn-outline{border-color:var(--border);color:var(--text-2)} :root[data-theme="dark"] .btn-outline:hover{border-color:var(--green);color:var(--green);background:rgba(0,196,100,0.08)} :root[data-theme="dark"] .filter-btn{background:var(--bg-subtle);border-color:var(--border);color:var(--text-2)} :root[data-theme="dark"] .filter-btn.active{background:rgba(0,196,100,0.12);border-color:var(--green);color:var(--green)} /* Search bar */ :root[data-theme="dark"] .search-wrap{background:var(--surface);border-color:var(--border)} :root[data-theme="dark"] .search-wrap input{background:transparent;color:var(--text)} /* Skeleton & loading */ :root[data-theme="dark"] .skeleton{background:var(--bg-subtle)} :root[data-theme="dark"] .skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent)} /* Tables */ :root[data-theme="dark"] table{border-color:var(--border)} :root[data-theme="dark"] th{background:var(--bg-subtle);color:var(--text-2);border-color:var(--border)} :root[data-theme="dark"] td{border-color:var(--border)} :root[data-theme="dark"] tr:hover td{background:rgba(255,255,255,0.02)} /* Toast */ :root[data-theme="dark"] .toast{background:var(--surface);border-color:var(--border);color:var(--text)} /* Tags & badges */ :root[data-theme="dark"] .tag, :root[data-theme="dark"] .badge-pill{background:var(--bg-subtle);color:var(--text-2);border-color:var(--border)} /* Mobile menu */ :root[data-theme="dark"] .mobile-menu{background:var(--surface);border-color:var(--border)} :root[data-theme="dark"] .mobile-menu .nav-link{color:var(--text-2);border-bottom-color:var(--border)} /* Admin sidebar */ :root[data-theme="dark"] .admin-sidebar{background:var(--surface);border-color:var(--border)} /* Notification dropdown */ :root[data-theme="dark"] #notifDropdown{background:var(--surface) !important;border-color:var(--border) !important} /* Conversation items */ :root[data-theme="dark"] .conversation-item{border-bottom-color:var(--border)} :root[data-theme="dark"] .conversation-item:hover{background:rgba(255,255,255,0.03)} /* Message bubbles */ :root[data-theme="dark"] .msg-bubble-user{background:var(--green);color:white} :root[data-theme="dark"] .msg-bubble-mentor{background:var(--bg-subtle);color:var(--text)} /* Certificate cards */ :root[data-theme="dark"] .cert-card{background:var(--surface);border-color:var(--border)} /* Tab buttons */ :root[data-theme="dark"] .tab-btn{color:var(--text-3)} :root[data-theme="dark"] .tab-btn.active{color:var(--green);border-color:var(--green)} /* SVG patterns — reduce opacity in dark */ :root[data-theme="dark"] .pattern-overlay{opacity:0.015} /* Scroll progress bar */ :root[data-theme="dark"] .scroll-progress{background:var(--green)} /* Liquid glass effect */ :root[data-theme="dark"] .liquid-glass{background:rgba(26,29,42,0.85);border-color:rgba(255,255,255,0.06)} /* Back to top */ :root[data-theme="dark"] .back-to-top{background:var(--surface);border-color:var(--border);color:var(--text-2)} /* Theme toggle button */ .theme-toggle{ background:none;border:none;cursor:pointer;padding:8px;border-radius:9px; color:var(--text-2);font-size:16px;transition:all 0.2s var(--ease); display:flex;align-items:center;justify-content:center;width:36px;height:36px; } .theme-toggle:hover{color:var(--gold);background:var(--gold-50)} .theme-toggle i{transition:transform 0.3s var(--ease-spring)} .theme-toggle:hover i{transform:rotate(30deg)} /* Database page dark mode */ :root[data-theme="dark"] .db-page{background:var(--bg)} :root[data-theme="dark"] .db-card{background:var(--surface);border-color:var(--border)} :root[data-theme="dark"] .db-header{background:var(--surface);border-color:var(--border)} /* Governance page dark mode */ :root[data-theme="dark"] .gov-card{background:var(--surface);border-color:var(--border)} :root[data-theme="dark"] .gov-header{background:var(--surface);border-color:var(--border)} /* Process page dark mode */ :root[data-theme="dark"] .process-card{background:var(--surface);border-color:var(--border)} /* Saudi ecosystem dark mode */ :root[data-theme="dark"] .eco-card{background:var(--surface);border-color:var(--border)} /* Chips/pills in dark mode */ :root[data-theme="dark"] .chip{background:var(--bg-subtle);color:var(--text-2);border-color:var(--border)} :root[data-theme="dark"] .chip.active{background:rgba(0,196,100,0.12);color:var(--green);border-color:var(--green)} /* System preference: auto-detect if no manual choice */ @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]):not([data-theme="dark"]){ --white:#0f1117;--bg:#0a0b0f;--bg-warm:#0f1117;--bg-subtle:#161822; --bg-cream:#0f1117;--surface:#1a1d2a; --border:rgba(255,255,255,0.08);--border-hover:rgba(255,255,255,0.15); --text:#e8e8ec;--text-2:#9a9ab0;--text-3:#666680;--text-4:#444458; --green:#00c464;--green-light:rgba(0,196,100,0.1);--green-hover:#00a854; --gold:#e0be5a;--gold-light:#c8a951; --shadow-sm:0 1px 3px rgba(0,0,0,0.3),0 4px 8px -2px rgba(0,0,0,0.3); --shadow:0 2px 4px rgba(0,0,0,0.2),0 8px 24px -4px rgba(0,0,0,0.4); --shadow-lg:0 4px 8px rgba(0,0,0,0.25),0 16px 40px -8px rgba(0,0,0,0.5); --glass:rgba(15,17,23,0.88);--glass-border:rgba(255,255,255,0.06); color-scheme:dark; } }