/* ============================================================ style.css — Gom Taye Blog Platform Dark mode IS the default — :root has dark vars. Light mode ONLY when html.light-mode class is added by JS. Fonts: Inter (body) + Space Grotesk (headings) Design: Apple-level dark glassmorphism ============================================================ */ /* ── GOOGLE FONTS ────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&display=swap'); /* ── DARK MODE VARIABLES (DEFAULT) ──────────────────────── */ :root { /* Backgrounds */ --bg-primary: #09090f; --bg-secondary: #0f0f18; --bg-card: #14141e; --bg-card-hover: #1a1a26; --bg-input: #1a1a26; /* Glass */ --glass-bg: rgba(255,255,255,0.045); --glass-bg-2: rgba(255,255,255,0.07); --glass-border: rgba(255,255,255,0.09); --glass-border-2:rgba(255,255,255,0.05); /* Accent palette */ --accent: #4f8ef7; --accent-hover: #3a7ded; --accent-glow: rgba(79,142,247,0.22); --accent-green: #34d399; --accent-red: #f87171; --accent-orange: #fb923c; --accent-purple: #a78bfa; --accent-teal: #67e8f9; /* Text */ --text-primary: #eef2ff; --text-secondary:#8b95b0; --text-muted: #4a5068; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.5); --shadow-md: 0 8px 32px rgba(0,0,0,0.65); --shadow-lg: 0 20px 60px rgba(0,0,0,0.75); --shadow-xl: 0 32px 80px rgba(0,0,0,0.85); --glow-blue: 0 0 40px rgba(79,142,247,0.18); --glow-green: 0 0 40px rgba(52,211,153,0.14); /* Border radius */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-2xl: 32px; --r-pill:9999px; /* Typography */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-heading: 'Space Grotesk', 'Inter', sans-serif; /* Transitions */ --t-fast: 140ms cubic-bezier(0.4,0,0.2,1); --t-base: 240ms cubic-bezier(0.4,0,0.2,1); --t-slow: 380ms cubic-bezier(0.4,0,0.2,1); --t-spring: 340ms cubic-bezier(0.34,1.56,0.64,1); /* Layout */ --max-w: 1280px; --nav-h: 68px; --section-pad: 100px; } /* ── LIGHT MODE OVERRIDE ─────────────────────────────────── */ /* Only applied when JS adds .light-mode class to */ html.light-mode { --bg-primary: #f7f8fc; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f0f2f9; --bg-input: #f0f2f9; --glass-bg: rgba(0,0,0,0.03); --glass-bg-2: rgba(0,0,0,0.055); --glass-border: rgba(0,0,0,0.08); --glass-border-2:rgba(0,0,0,0.04); --text-primary: #0f1120; --text-secondary:#3a4060; --text-muted: #6b7399; --shadow-sm: 0 2px 8px rgba(0,0,0,0.07); --shadow-md: 0 8px 32px rgba(0,0,0,0.10); --shadow-lg: 0 20px 60px rgba(0,0,0,0.13); --shadow-xl: 0 32px 80px rgba(0,0,0,0.16); } /* ── RESET ───────────────────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; tab-size:4; } body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); line-height: 1.65; font-size: 16px; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--t-slow), color var(--t-slow); } img,video,iframe { display:block; max-width:100%; } a { color:var(--accent); text-decoration:none; transition:color var(--t-fast); } a:hover { color:var(--accent-hover); } button { cursor:pointer; border:none; background:none; font-family:inherit; } input,textarea,select { font-family:inherit; outline:none; border:none; font-size:inherit; } ul,ol { list-style:none; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.18; letter-spacing: -0.025em; color: var(--text-primary); } /* ── LAYOUT ──────────────────────────────────────────────── */ .container { max-width:var(--max-w); margin:0 auto; padding:0 24px; } .section { padding:var(--section-pad) 0; } .section-alt{ background:var(--bg-secondary); border-top:1px solid var(--glass-border-2); border-bottom:1px solid var(--glass-border-2); } .section-sm { padding:60px 0; } /* ── READING PROGRESS ────────────────────────────────────── */ .reading-progress { position:fixed; top:0; left:0; z-index:2100; height:2px; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-green)); transition:width 40ms linear; box-shadow:0 0 10px var(--accent-glow); } /* ══════════════════════════════════════════════════════════ NAVBAR ══════════════════════════════════════════════════════════ */ .navbar { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h); display:flex; align-items:center; padding:0 32px; transition:background var(--t-base), border-color var(--t-base), backdrop-filter var(--t-base); } /* Scrolled state — glass effect */ .navbar.scrolled { background: rgba(9,9,15,0.82); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--glass-border-2); box-shadow: 0 1px 0 rgba(255,255,255,0.04); } html.light-mode .navbar.scrolled { background: rgba(247,248,252,0.88); } .nav-inner { display:flex; align-items:center; gap:40px; width:100%; } /* Logo */ .nav-logo { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--text-primary); letter-spacing:-0.03em; flex-shrink: 0; display:flex; align-items:center; transition: color var(--t-fast); } .nav-logo:hover { color: var(--accent); } .logo-dot { color:var(--accent); } /* Desktop links */ .nav-links { display:flex; align-items:center; gap:2px; flex:1; } .nav-link { color:var(--text-secondary); padding:8px 14px; border-radius:var(--r-sm); font-size:0.875rem; font-weight:500; transition:color var(--t-fast), background var(--t-fast); position:relative; } .nav-link:hover { color:var(--text-primary); background:var(--glass-bg); } .nav-link.active { color:var(--text-primary); background:var(--glass-bg); } .nav-link.active::after { content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--accent); } /* Nav actions */ .nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; } .nav-icon-btn { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-secondary); font-size:0.9rem; transition:all var(--t-fast); } .nav-icon-btn:hover { color:var(--text-primary); background:var(--glass-bg-2); } /* User dropdown */ .nav-user-wrap { position:relative; } .nav-user-btn { display:flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--r-pill); background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-primary); font-size:0.875rem; font-weight:500; transition:all var(--t-fast); } .nav-user-btn:hover { background:var(--glass-bg-2); } .nav-avatar { width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; flex-shrink:0; } .nav-chevron { font-size:0.65rem; color:var(--text-muted); transition:transform var(--t-fast); } .nav-user-btn[aria-expanded="true"] .nav-chevron { transform:rotate(180deg); } .nav-dropdown { position:absolute; top:calc(100% + 10px); right:0; background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--r-lg); padding:8px; min-width:190px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transform:translateY(-6px) scale(0.97); transition:all var(--t-base); } .nav-dropdown.open { opacity:1; pointer-events:all; transform:translateY(0) scale(1); } .nav-dropdown a { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--r-sm); color:var(--text-secondary); font-size:0.875rem; transition:all var(--t-fast); } .nav-dropdown a:hover { color:var(--text-primary); background:var(--glass-bg); } .text-red { color:var(--accent-red) !important; } /* Hamburger */ .hamburger { display:none; flex-direction:column; gap:5px; padding:8px; border-radius:var(--r-sm); transition:background var(--t-fast); } .hamburger:hover { background:var(--glass-bg); } .hamburger span { display:block; width:22px; height:2px; background:var(--text-primary); border-radius:2px; transition:transform var(--t-base), opacity var(--t-base); } .hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity:0; } .hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } /* Mobile menu */ .mobile-menu { position:fixed; top:0; right:0; bottom:0; z-index:1100; width:min(320px, 85vw); background:var(--bg-card); border-left:1px solid var(--glass-border); padding:24px; display:flex; flex-direction:column; gap:4px; transform:translateX(100%); transition:transform var(--t-slow); box-shadow:var(--shadow-xl); } .mobile-menu.open { transform:translateX(0); } .mobile-menu-close { align-self:flex-end; width:36px; height:36px; border-radius:50%; background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-secondary); font-size:1rem; display:flex; align-items:center; justify-content:center; margin-bottom:16px; transition:all var(--t-fast); } .mobile-menu-close:hover { background:var(--accent-red); color:#fff; border-color:transparent; } .mobile-menu nav { display:flex; flex-direction:column; gap:2px; } .mobile-menu a { padding:14px 16px; border-radius:var(--r-md); font-size:1.05rem; font-weight:600; font-family:var(--font-heading); color:var(--text-secondary); transition:all var(--t-fast); } .mobile-menu a:hover { color:var(--text-primary); background:var(--glass-bg); } .mob-login { color:var(--accent) !important; margin-top:12px; } .mob-join { background:var(--accent) !important; color:#fff !important; margin-top:4px; text-align:center; justify-content:center; } .mobile-overlay { position:fixed; inset:0; z-index:1099; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity var(--t-base); } .mobile-overlay.open { opacity:1; pointer-events:all; } /* ══════════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════════ */ .btn { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:var(--r-pill); font-family:var(--font-body); font-size:0.9rem; font-weight:600; border:none; cursor:pointer; white-space:nowrap; position:relative; transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast); text-decoration:none; } .btn:hover { transform:scale(1.02); } .btn:active { transform:scale(0.98); } .btn-primary { background:var(--accent); color:#fff; box-shadow:0 4px 20px var(--accent-glow); } .btn-primary:hover { background:var(--accent-hover); color:#fff; box-shadow:0 8px 32px var(--accent-glow); } .btn-secondary { background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-primary); backdrop-filter:blur(8px); } .btn-secondary:hover { background:var(--glass-bg-2); color:var(--text-primary); } .btn-ghost { color:var(--text-secondary); padding:8px 16px; border-radius:var(--r-sm); } .btn-ghost:hover { color:var(--text-primary); background:var(--glass-bg); } .btn-danger { background:var(--accent-red); color:#fff; } .btn-success { background:var(--accent-green); color:#0f1120; } .btn-sm { padding:8px 18px; font-size:0.82rem; } .btn-lg { padding:16px 36px; font-size:1rem; } /* ══════════════════════════════════════════════════════════ HERO — Dark, animated orbs, NO "ROLL" text ══════════════════════════════════════════════════════════ */ .hero { min-height:100vh; position:relative; display:flex; align-items:center; padding-top:var(--nav-h); overflow:hidden; } /* Animated mesh background */ .hero-bg { position:absolute; inset:0; z-index:0; } .hero-bg::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 85% 65% at 12% 55%, rgba(79,142,247,0.13) 0%, transparent 58%), radial-gradient(ellipse 65% 55% at 88% 18%, rgba(52,211,153,0.09) 0%, transparent 52%), radial-gradient(ellipse 75% 70% at 55% 92%, rgba(167,139,250,0.07) 0%, transparent 55%); animation:hero-drift 18s ease-in-out infinite alternate; } @keyframes hero-drift { 0% { transform:scale(1) translate(0,0); } 100% { transform:scale(1.04) translate(1%,-1%); } } .hero-bg::after { content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, black 20%, transparent 100%); } /* Floating colour orbs */ .hero-orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; } .hero-orb-1 { width:520px; height:520px; top:-180px; left:-160px; background:radial-gradient(circle, rgba(79,142,247,0.16) 0%, transparent 70%); animation:orb-float 9s ease-in-out infinite alternate; } .hero-orb-2 { width:420px; height:420px; top:15%; right:-120px; background:radial-gradient(circle, rgba(52,211,153,0.11) 0%, transparent 70%); animation:orb-float 11s ease-in-out infinite alternate; animation-delay:-3s; } .hero-orb-3 { width:320px; height:320px; bottom:8%; left:28%; background:radial-gradient(circle, rgba(167,139,250,0.09) 0%, transparent 70%); animation:orb-float 13s ease-in-out infinite alternate; animation-delay:-6s; } @keyframes orb-float { 0% { transform:translate(0,0) scale(1); } 100% { transform:translate(18px,-18px) scale(1.08); } } .hero-content { position:relative; z-index:1; max-width:900px; } /* Status badge */ .hero-badge { display:inline-flex; align-items:center; gap:10px; background:rgba(79,142,247,0.09); border:1px solid rgba(79,142,247,0.22); border-radius:var(--r-pill); padding:7px 18px; font-size:0.78rem; font-weight:500; color:var(--accent); margin-bottom:36px; backdrop-filter:blur(10px); letter-spacing:0.02em; } .hero-badge-dot { width:7px; height:7px; border-radius:50%; background:var(--accent-green); box-shadow:0 0 8px var(--accent-green); animation:pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.6)} } /* Hero headline */ .hero-title { font-family:var(--font-heading); font-size:clamp(2.8rem, 7.5vw, 5.8rem); font-weight:700; line-height:1.03; letter-spacing:-0.04em; margin-bottom:28px; color:var(--text-primary); } .hero-line-1 { display:block; } .hero-line-2 { display:block; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-green) 45%, var(--accent-purple) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; min-height:1.1em; } /* Typing cursor */ .typing-cursor { display:inline-block; width:3px; height:0.8em; background:var(--accent); border-radius:2px; margin-left:4px; vertical-align:text-bottom; animation:blink 1s step-end infinite; } @keyframes blink { 50%{opacity:0} } .hero-subtitle { font-size:clamp(1rem, 2.5vw, 1.2rem); color:var(--text-secondary); max-width:540px; margin-bottom:48px; line-height:1.78; font-weight:400; } .hero-actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; } /* Scroll indicator — CSS arrow, NO text rendering issues */ .hero-scroll-indicator { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:0; animation:bounce-indicator 2.5s ease-in-out infinite; pointer-events:none; } .scroll-arrow-wrap { width:38px; height:38px; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass-bg); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:0.75rem; } @keyframes bounce-indicator { 0%,100%{ transform:translateX(-50%) translateY(0); opacity:0.6; } 50% { transform:translateX(-50%) translateY(7px); opacity:1; } } /* ══════════════════════════════════════════════════════════ STATS SECTION ══════════════════════════════════════════════════════════ */ .stats-section { background:var(--bg-secondary); border-top:1px solid var(--glass-border-2); border-bottom:1px solid var(--glass-border-2); padding:56px 0; } .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); } .stat-item { padding:28px 24px; text-align:center; position:relative; } .stat-item:not(:last-child)::after { content:''; position:absolute; right:0; top:20%; bottom:20%; width:1px; background:var(--glass-border-2); } .stat-number { font-family:var(--font-heading); font-size:3rem; font-weight:700; letter-spacing:-0.04em; line-height:1; background:linear-gradient(135deg, var(--accent), var(--accent-green)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:8px; } .stat-label { color:var(--text-muted); font-size:0.82rem; font-weight:500; } /* ══════════════════════════════════════════════════════════ SECTION HEADERS ══════════════════════════════════════════════════════════ */ .section-header { text-align:center; margin-bottom:64px; } .section-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } .section-eyebrow::before,.section-eyebrow::after { content:''; width:24px; height:1px; background:var(--accent); opacity:0.4; } .section-title { font-family:var(--font-heading); font-size:clamp(1.9rem,5vw,2.9rem); font-weight:700; letter-spacing:-0.03em; margin-bottom:14px; } .section-desc { color:var(--text-secondary); font-size:1rem; max-width:520px; margin:0 auto; line-height:1.75; } .section-cta { text-align:center; margin-top:44px; } /* ══════════════════════════════════════════════════════════ BLOG CARDS ══════════════════════════════════════════════════════════ */ .blog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(330px,1fr)); gap:24px; } .blog-card { background:var(--bg-card); border:1px solid var(--glass-border-2); border-radius:var(--r-xl); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md), var(--glow-blue); border-color:rgba(79,142,247,0.18); } .blog-card-img { position:relative; overflow:hidden; aspect-ratio:16/9; } .blog-card-img img { width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow); } .blog-card:hover .blog-card-img img { transform:scale(1.05); } .blog-card-img-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, transparent 40%, rgba(9,9,15,0.7)); } .blog-card-body { padding:24px; flex:1; display:flex; flex-direction:column; gap:10px; } .blog-card-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .cat-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:var(--r-pill); font-size:0.68rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; } .blog-date,.blog-rt { color:var(--text-muted); font-size:0.78rem; display:flex; align-items:center; gap:4px; } .blog-card-title { font-family:var(--font-heading); font-size:1.1rem; font-weight:600; line-height:1.4; color:var(--text-primary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .blog-card-title a { color:inherit; } .blog-card-title a:hover { color:var(--accent); } .blog-card-excerpt { color:var(--text-muted); font-size:0.875rem; line-height:1.65; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .blog-card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--glass-border-2); margin-top:auto; } .blog-stats { display:flex; gap:14px; } .blog-stat { display:flex; align-items:center; gap:5px; color:var(--text-muted); font-size:0.78rem; } /* ── CAROUSEL ────────────────────────────────────────────── */ .carousel-outer { position:relative; } .carousel-track { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; } .carousel-track::-webkit-scrollbar { display:none; } .carousel-track .blog-card { flex:0 0 340px; scroll-snap-align:start; } .carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:var(--bg-card); border:1px solid var(--glass-border); color:var(--text-primary); box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center; z-index:5; transition:all var(--t-fast); } .carousel-arrow:hover { background:var(--accent); color:#fff; border-color:transparent; } .carousel-arrow.prev { left:-22px; } .carousel-arrow.next { right:-22px; } /* ── VLOG GRID ───────────────────────────────────────────── */ .vlog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:24px; } .vlog-card { background:var(--bg-card); border:1px solid var(--glass-border-2); border-radius:var(--r-xl); overflow:hidden; cursor:pointer; transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .vlog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--glass-border); } .vlog-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; } .vlog-thumb img { width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow); } .vlog-card:hover .vlog-thumb img { transform:scale(1.05); } .vlog-play-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(9,9,15,0.32); transition:background var(--t-fast); } .vlog-card:hover .vlog-play-overlay { background:rgba(9,9,15,0.55); } .vlog-play-btn { width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,0.95); color:#09090f; display:flex; align-items:center; justify-content:center; font-size:1.15rem; box-shadow:var(--shadow-md); transition:transform var(--t-spring); } .vlog-card:hover .vlog-play-btn { transform:scale(1.1); } .vlog-duration-badge { position:absolute; bottom:10px; right:10px; background:rgba(9,9,15,0.85); color:#fff; font-size:0.7rem; font-weight:600; padding:3px 8px; border-radius:4px; } .vlog-body { padding:20px; } .vlog-title { font-family:var(--font-heading); font-weight:600; font-size:0.95rem; margin:8px 0 6px; line-height:1.4; } .vlog-meta { color:var(--text-muted); font-size:0.78rem; display:flex; gap:12px; } /* ── MODAL ───────────────────────────────────────────────── */ .modal-overlay { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.88); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity var(--t-base); } .modal-overlay.open { opacity:1; pointer-events:all; } .modal { background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--r-2xl); padding:32px; max-width:900px; width:100%; position:relative; transform:scale(0.94); transition:transform var(--t-base); } .modal-overlay.open .modal { transform:scale(1); } .modal-close-btn { position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; font-size:0.9rem; transition:all var(--t-fast); } .modal-close-btn:hover { background:var(--accent-red); color:#fff; border-color:transparent; } .modal-title { font-family:var(--font-heading); font-weight:600; font-size:1.1rem; margin-bottom:16px; } .modal-video-wrap { aspect-ratio:16/9; } .modal-video-wrap iframe,.modal-video-wrap video { width:100%; height:100%; border-radius:var(--r-lg); border:none; } /* ── ABOUT SNIPPET (homepage) ────────────────────────────── */ .about-snippet-grid { display:grid; grid-template-columns:1fr 1.55fr; gap:80px; align-items:center; } .about-photo-frame { border-radius:var(--r-2xl); overflow:hidden; border:1px solid var(--glass-border); box-shadow:var(--shadow-xl); } .about-photo-frame img { width:100%; display:block; aspect-ratio:4/5; object-fit:cover; } .about-snippet-name { font-family:var(--font-heading); font-size:clamp(1.9rem,4vw,2.6rem); font-weight:700; letter-spacing:-0.03em; margin:14px 0 6px; } .about-snippet-role { color:var(--accent); font-size:0.9rem; font-weight:500; margin-bottom:20px; } .about-snippet-bio { color:var(--text-secondary); line-height:1.8; margin-bottom:16px; } .about-snippet-tags { display:flex; flex-wrap:wrap; gap:9px; margin:24px 0; } .about-snippet-actions { display:flex; gap:12px; flex-wrap:wrap; } .badge { display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:var(--r-pill); background:var(--glass-bg); border:1px solid var(--glass-border-2); color:var(--text-secondary); font-size:0.75rem; font-weight:500; } /* ── CONTACT SECTION ─────────────────────────────────────── */ .contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:start; } .contact-info-col h3 { font-family:var(--font-heading); font-size:clamp(1.6rem,3.5vw,2.2rem); font-weight:700; letter-spacing:-0.03em; margin-bottom:14px; } .contact-info-col > p { color:var(--text-secondary); line-height:1.75; margin-bottom:28px; } .social-links { display:flex; flex-direction:column; gap:10px; } .social-link { display:flex; align-items:center; gap:14px; padding:13px 18px; background:var(--bg-card); border:1px solid var(--glass-border-2); border-radius:var(--r-lg); color:var(--text-secondary); transition:all var(--t-fast); } .social-link:hover { color:var(--accent); border-color:rgba(79,142,247,0.28); background:rgba(79,142,247,0.06); transform:translateX(4px); } .social-link i { font-size:1rem; width:18px; text-align:center; } .sl-name { font-weight:600; font-size:0.9rem; } .sl-sub { color:var(--text-muted); font-size:0.78rem; margin-top:1px; } .map-frame { border-radius:var(--r-xl); overflow:hidden; height:260px; border:1px solid var(--glass-border-2); margin-top:24px; } .map-frame iframe { width:100%; height:100%; border:none; } .contact-form-card { background:var(--bg-card); border:1px solid var(--glass-border-2); border-radius:var(--r-2xl); padding:40px; } .contact-form-card h3 { font-family:var(--font-heading); font-size:1.3rem; font-weight:700; margin-bottom:24px; } .form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } /* ── FORMS ───────────────────────────────────────────────── */ .form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; } .form-label { font-size:0.82rem; font-weight:600; color:var(--text-secondary); letter-spacing:0.02em; } .form-input,.form-select,.form-textarea { background:var(--bg-input); border:1px solid var(--glass-border); border-radius:var(--r-lg); padding:13px 16px; color:var(--text-primary); font-size:0.9rem; width:100%; transition:border-color var(--t-fast), box-shadow var(--t-fast); } .form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,142,247,0.12); outline:none; } .form-input::placeholder,.form-textarea::placeholder { color:var(--text-muted); } .form-select { appearance:none; cursor:pointer; } .form-textarea { resize:vertical; min-height:130px; line-height:1.6; } .pass-field { position:relative; } .pass-toggle { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); cursor:pointer; transition:color var(--t-fast); font-size:0.9rem; } .pass-toggle:hover { color:var(--text-primary); } /* ── AUTH PAGES ──────────────────────────────────────────── */ .auth-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; padding-top:calc(var(--nav-h) + 32px); position:relative; overflow:hidden; } .auth-wrapper::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 55% 55% at 22% 42%, rgba(79,142,247,0.11), transparent), radial-gradient(ellipse 45% 45% at 78% 68%, rgba(167,139,250,0.07), transparent); } .auth-card { position:relative; z-index:1; width:100%; max-width:460px; background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--r-2xl); padding:48px 40px; box-shadow:var(--shadow-xl); } .auth-logo { font-family:var(--font-heading); font-size:1.2rem; font-weight:700; margin-bottom:28px; } .auth-logo span { color:var(--accent); } .auth-title { font-family:var(--font-heading); font-size:1.85rem; font-weight:700; letter-spacing:-0.03em; margin-bottom:8px; } .auth-subtitle { color:var(--text-secondary); margin-bottom:30px; font-size:0.9rem; line-height:1.6; } .auth-footer { text-align:center; margin-top:22px; color:var(--text-muted); font-size:0.875rem; } /* CAPTCHA — no copy/paste */ .captcha-wrap { background:var(--bg-secondary); border:1px solid var(--glass-border); border-radius:var(--r-lg); padding:16px; text-align:center; font-family:'Courier New',monospace; font-size:1.5rem; font-weight:700; letter-spacing:0.35em; color:var(--accent); position:relative; overflow:hidden; user-select:none; } .captcha-wrap::before { content:''; position:absolute; inset:0; opacity:0.07; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='60' filter='url(%23n)'/%3E%3C/svg%3E"); } .captcha-strike { position:absolute; top:50%; left:5%; right:5%; height:2px; background:rgba(248,113,113,0.5); transform:rotate(-2deg); } .captcha-refresh { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px; color:var(--text-muted); font-size:0.78rem; cursor:pointer; transition:color var(--t-fast); font-family:var(--font-body); } .captcha-refresh:hover { color:var(--accent); } /* ── ALERTS ──────────────────────────────────────────────── */ .alert { padding:13px 18px; border-radius:var(--r-lg); margin-bottom:18px; font-size:0.875rem; display:flex; align-items:center; gap:10px; } .alert-success { background:rgba(52,211,153,0.09); border:1px solid rgba(52,211,153,0.22); color:var(--accent-green); } .alert-error { background:rgba(248,113,113,0.09);border:1px solid rgba(248,113,113,0.22);color:var(--accent-red); } .alert-info { background:rgba(79,142,247,0.09); border:1px solid rgba(79,142,247,0.22); color:var(--accent); } .alert-warning { background:rgba(251,146,60,0.09); border:1px solid rgba(251,146,60,0.22); color:var(--accent-orange); } /* ── TOAST ───────────────────────────────────────────────── */ .toast-container { position:fixed; bottom:28px; right:28px; z-index:3000; display:flex; flex-direction:column; gap:10px; pointer-events:none; } .toast { background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--r-lg); padding:13px 20px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; font-size:0.875rem; min-width:220px; pointer-events:all; animation:toast-in var(--t-base) ease forwards; } @keyframes toast-in { from{opacity:0;transform:translateX(32px)} to{opacity:1;transform:translateX(0)} } .toast.removing { animation:toast-out var(--t-base) ease forwards; } @keyframes toast-out { to{opacity:0;transform:translateX(32px)} } .toast-success .toast-icon { color:var(--accent-green); } .toast-error .toast-icon { color:var(--accent-red); } .toast-info .toast-icon { color:var(--accent); } /* ── SKELETON ────────────────────────────────────────────── */ .skeleton { background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%); background-size:200% 100%; animation:skel 1.6s infinite; border-radius:var(--r-sm); } @keyframes skel { 0%{background-position:200%} 100%{background-position:-200%} } .skel-img { height:200px; border-radius:var(--r-xl) var(--r-xl) 0 0; } .skel-line { height:13px; margin-bottom:10px; } .skel-w75 { width:75%; } .skel-w50 { width:50%; } /* ── FOOTER ──────────────────────────────────────────────── */ .footer { background:var(--bg-secondary); border-top:1px solid var(--glass-border-2); padding:64px 0 32px; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; } .footer-logo { font-family:var(--font-heading); font-size:1.3rem; font-weight:700; letter-spacing:-0.03em; } .footer-logo span { color:var(--accent); } .footer-brand-desc { color:var(--text-muted); font-size:0.875rem; line-height:1.75; margin-top:12px; max-width:280px; } .footer-newsletter { margin-top:24px; } .footer-nl-label { font-size:0.72rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); } .footer-nl-sub { color:var(--text-muted); font-size:0.82rem; margin:4px 0 10px; } .newsletter-row { display:flex; gap:8px; } .newsletter-row input { flex:1; background:var(--bg-primary); border:1px solid var(--glass-border); border-radius:var(--r-pill); padding:9px 14px; color:var(--text-primary); font-size:0.82rem; transition:border-color var(--t-fast); } .newsletter-row input:focus { border-color:var(--accent); outline:none; } .newsletter-row input::placeholder { color:var(--text-muted); } .footer-nl-msg { font-size:0.8rem; margin-top:8px; } .footer-col-title { font-size:0.72rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:16px; } .footer-col ul { display:flex; flex-direction:column; gap:9px; } .footer-col a { color:var(--text-muted); font-size:0.875rem; transition:color var(--t-fast); } .footer-col a:hover { color:var(--accent); } .footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:28px; border-top:1px solid var(--glass-border-2); color:var(--text-muted); font-size:0.82rem; flex-wrap:wrap; gap:12px; } .footer-bottom a { color:var(--accent); } .footer-socials { display:flex; gap:10px; } .footer-social-btn { width:36px; height:36px; border-radius:var(--r-sm); background:var(--glass-bg); border:1px solid var(--glass-border-2); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:0.875rem; transition:all var(--t-fast); } .footer-social-btn:hover { color:var(--accent); border-color:rgba(79,142,247,0.3); background:rgba(79,142,247,0.07); } .footer-legal-links { display:flex; gap:16px; } .footer-legal-links a { color:var(--text-muted); font-size:0.82rem; transition:color var(--t-fast); } .footer-legal-links a:hover { color:var(--accent); } /* ── PWA BANNER ──────────────────────────────────────────── */ .pwa-banner { position:fixed; bottom:24px; left:50%; z-index:2000; transform:translateX(-50%) translateY(150%); transition:transform var(--t-slow); background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--r-xl); padding:18px 22px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-xl); max-width:380px; width:calc(100% - 48px); } .pwa-banner.show { transform:translateX(-50%) translateY(0); } .pwa-banner-icon img { width:48px; height:48px; border-radius:var(--r-md); } .pwa-banner-text { flex:1; } .pwa-banner-text strong { display:block; font-size:0.9rem; font-weight:700; margin-bottom:2px; } .pwa-banner-text span { color:var(--text-muted); font-size:0.78rem; } .pwa-banner-actions { display:flex; gap:8px; flex-shrink:0; } /* ── PAGE HEADER ─────────────────────────────────────────── */ .page-header { padding:calc(var(--nav-h) + 64px) 0 60px; text-align:center; background:radial-gradient(ellipse 60% 60% at 50% 0%, rgba(79,142,247,0.06), transparent); } .page-header h1 { font-family:var(--font-heading); font-size:clamp(2.2rem,5vw,3.5rem); font-weight:700; letter-spacing:-0.04em; } .page-header p { color:var(--text-secondary); max-width:480px; margin:12px auto 0; font-size:0.95rem; line-height:1.7; } /* ── FADE ANIMATIONS ─────────────────────────────────────── */ .fade-up { opacity:0; transform:translateY(26px); transition:opacity var(--t-slow), transform var(--t-slow); } .fade-up.visible { opacity:1; transform:translateY(0); } .fade-in { opacity:0; transition:opacity var(--t-slow); } .fade-in.visible { opacity:1; } .stagger-1{transition-delay:80ms} .stagger-2{transition-delay:160ms} .stagger-3{transition-delay:240ms} .stagger-4{transition-delay:320ms} /* ── EMPTY STATE ─────────────────────────────────────────── */ .empty-state { text-align:center; padding:80px 32px; } .empty-icon { font-size:2.8rem; color:var(--text-muted); margin-bottom:18px; } .empty-state h3 { font-family:var(--font-heading); font-size:1.4rem; font-weight:700; margin-bottom:10px; } .empty-state p { color:var(--text-secondary); } /* ── FILTER TABS ─────────────────────────────────────────── */ .page-filters { padding:40px 0 20px; display:flex; flex-direction:column; gap:18px; } .search-wrap { position:relative; max-width:500px; } .search-wrap input { width:100%; background:var(--bg-card); border:1px solid var(--glass-border-2); border-radius:var(--r-pill); padding:13px 20px 13px 46px; color:var(--text-primary); font-size:0.9rem; transition:border-color var(--t-fast), box-shadow var(--t-fast); } .search-wrap input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,142,247,0.12); outline:none; } .search-wrap input::placeholder { color:var(--text-muted); } .search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:0.9rem; pointer-events:none; } .filter-tabs { display:flex; gap:8px; flex-wrap:wrap; } .filter-tab { padding:7px 16px; border-radius:var(--r-pill); background:var(--glass-bg); border:1px solid var(--glass-border-2); color:var(--text-secondary); font-size:0.82rem; font-weight:500; transition:all var(--t-fast); cursor:pointer; } .filter-tab:hover { color:var(--text-primary); border-color:var(--glass-border); } .filter-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); } /* ── PAGINATION ──────────────────────────────────────────── */ .pagination { display:flex; justify-content:center; gap:8px; margin-top:60px; flex-wrap:wrap; } .page-btn { width:40px; height:40px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; background:var(--glass-bg); border:1px solid var(--glass-border-2); color:var(--text-secondary); font-size:0.875rem; cursor:pointer; transition:all var(--t-fast); } .page-btn:hover { color:var(--text-primary); border-color:var(--glass-border); } .page-btn.active { background:var(--accent); color:#fff; border-color:transparent; } .page-btn.disabled{ opacity:0.3; pointer-events:none; } /* ── INTERACT BAR ────────────────────────────────────────── */ .interact-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:18px 24px; margin:48px 0; background:var(--bg-card); border:1px solid var(--glass-border-2); border-radius:var(--r-xl); } .interact-btn { display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-pill); background:var(--glass-bg); border:1px solid var(--glass-border-2); color:var(--text-secondary); font-size:0.875rem; font-weight:500; transition:all var(--t-fast); cursor:pointer; } .interact-btn:hover { color:var(--text-primary); border-color:var(--glass-border); background:var(--glass-bg-2); } .interact-btn.liked { color:var(--accent-red); border-color:rgba(248,113,113,0.28); background:rgba(248,113,113,0.07); } .interact-btn.bookmarked { color:var(--accent-orange); border-color:rgba(251,146,60,0.28); background:rgba(251,146,60,0.07); } @keyframes heart-pop { 0%{transform:scale(1)} 40%{transform:scale(1.45)} 70%{transform:scale(0.9)} 100%{transform:scale(1)} } .heart-animate { animation:heart-pop .4s ease; } /* ── SHARE DROPDOWN ──────────────────────────────────────── */ .share-drop { position:absolute; bottom:calc(100% + 8px); left:0; background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--r-lg); padding:8px; min-width:180px; box-shadow:var(--shadow-lg); z-index:100; opacity:0; pointer-events:none; transform:translateY(6px); transition:all var(--t-fast); } .share-drop.open { opacity:1; pointer-events:all; transform:translateY(0); } .share-drop a,.share-drop button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; border-radius:var(--r-sm); color:var(--text-secondary); font-size:0.85rem; background:none; text-align:left; transition:all var(--t-fast); } .share-drop a:hover,.share-drop button:hover { color:var(--text-primary); background:var(--glass-bg); } /* ── COMMENTS ────────────────────────────────────────────── */ .comments-section { margin-top:64px; max-width:760px; } .comments-heading { font-family:var(--font-heading); font-size:1.5rem; font-weight:700; margin-bottom:28px; } .comment-form-wrap { background:var(--bg-card); border:1px solid var(--glass-border-2); border-radius:var(--r-xl); padding:24px; margin-bottom:36px; } .comment-form-wrap textarea { width:100%; background:var(--bg-secondary); border:1px solid var(--glass-border); border-radius:var(--r-lg); padding:14px 16px; color:var(--text-primary); resize:vertical; min-height:110px; font-size:0.9rem; line-height:1.6; transition:border-color var(--t-fast); } .comment-form-wrap textarea:focus { border-color:var(--accent); outline:none; } .comment-form-wrap textarea::placeholder { color:var(--text-muted); } .comment-form-actions { display:flex; justify-content:flex-end; margin-top:12px; } .comment-item { display:flex; gap:14px; margin-bottom:28px; } .comment-av { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.82rem; color:#fff; } .comment-body-inner { flex:1; } .comment-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; } .comment-author { font-weight:600; font-size:0.88rem; } .comment-date { color:var(--text-muted); font-size:0.78rem; } .comment-text { color:var(--text-secondary); font-size:0.9rem; line-height:1.65; } .comment-reply-btn { color:var(--text-muted); font-size:0.78rem; font-weight:500; margin-top:8px; display:inline-flex; align-items:center; gap:5px; transition:color var(--t-fast); } .comment-reply-btn:hover { color:var(--accent); } .replies { margin-left:50px; margin-top:20px; border-left:2px solid var(--glass-border-2); padding-left:20px; } /* ── NOT FOUND ───────────────────────────────────────────── */ .not-found { min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; padding-top:var(--nav-h); } .not-found-num { font-family:var(--font-heading); font-size:clamp(6rem,20vw,10rem); font-weight:700; letter-spacing:-0.06em; line-height:1; background:linear-gradient(135deg,var(--accent),var(--accent-green)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } /* ── RESPONSIVE ──────────────────────────────────────────── */ @media(max-width:1024px){ .footer-grid { grid-template-columns:1fr 1fr; } .about-snippet-grid { grid-template-columns:1fr; gap:40px; } .stats-grid { grid-template-columns:repeat(2,1fr); } .contact-grid{ grid-template-columns:1fr; } } @media(max-width:768px){ :root{ --nav-h:62px; --section-pad:72px; } .container { padding:0 16px; } .navbar { padding:0 16px; } .nav-links { display:none; } .nav-actions .btn:not(.nav-icon-btn) { display:none; } .hamburger { display:flex; } .blog-grid { grid-template-columns:1fr; } .vlog-grid { grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr; gap:32px; } .stats-grid { grid-template-columns:1fr 1fr; } .carousel-arrow { display:none; } .auth-card { padding:32px 22px; } .form-row-2 { grid-template-columns:1fr; } } @media(max-width:480px){ :root{ --section-pad:56px; } .stats-grid { grid-template-columns:1fr 1fr; } .hero-actions{ flex-direction:column; align-items:flex-start; } .filter-tabs { gap:6px; } .filter-tab { font-size:0.76rem; padding:6px 12px; } .footer-bottom{ flex-direction:column; text-align:center; } .stat-item::after { display:none; } } /* ── ABOUT PAGE extra vars (used in about.php inline styles) ── */ /* These are already in :root but ensure bg-primary is accessible */ .edu-dot { border-color: var(--bg-primary, #09090f) !important; } /* ══════════════════════════════════════════════════════════ THEME TOGGLE — Additional fixes Ensures all elements respect light/dark CSS vars ══════════════════════════════════════════════════════════ */ /* Smooth color transitions on theme switch */ body, .navbar, .footer, .blog-card, .glass-card, .glass, .auth-card, .form-input, .form-select, .form-textarea, .social-link, .expertise-card, .profile-card, .vlog-card, .modal, .interact-bar { transition: background-color var(--t-slow), border-color var(--t-slow), color var(--t-slow) !important; } /* Light mode — all key components */ html.light-mode .blog-card { background: #ffffff; border-color: rgba(0,0,0,0.07); } html.light-mode .blog-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.12); } html.light-mode .vlog-card { background: #ffffff; border-color: rgba(0,0,0,0.07); } html.light-mode .expertise-card { background: #ffffff; border-color: rgba(0,0,0,0.07); } html.light-mode .profile-card { background: #ffffff; border-color: rgba(0,0,0,0.07); } html.light-mode .social-link { background: #ffffff; border-color: rgba(0,0,0,0.07); } html.light-mode .auth-card { background: #ffffff; border-color: rgba(0,0,0,0.08); } html.light-mode .contact-form-card { background: #ffffff; border-color: rgba(0,0,0,0.07); } html.light-mode .form-input, html.light-mode .form-select, html.light-mode .form-textarea { background: #f4f5fb; border-color: rgba(0,0,0,0.12); color: #0f1120; } html.light-mode .form-input::placeholder, html.light-mode .form-textarea::placeholder { color: #9aa0c0; } html.light-mode .interact-bar { background: #ffffff; border-color: rgba(0,0,0,0.07); } html.light-mode .interact-btn { background: #f4f5fb; border-color: rgba(0,0,0,0.1); color: #3a4060; } html.light-mode .interact-btn:hover { background: #e8eaf4; color: #0f1120; } html.light-mode .comment-form-wrap { background: #ffffff; border-color: rgba(0,0,0,0.07); } html.light-mode .comment-form-wrap textarea { background: #f4f5fb; border-color: rgba(0,0,0,0.1); color: #0f1120; } html.light-mode .hero-bg::after { opacity: 0.5; } html.light-mode .nav-link { color: #3a4060; } html.light-mode .nav-link:hover, html.light-mode .nav-link.active { color: #0f1120; background: rgba(0,0,0,0.05); } html.light-mode .nav-user-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); } html.light-mode .footer-col a { color: #6b7399; } html.light-mode .footer-col a:hover { color: var(--accent); } html.light-mode .filter-tab { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.08); color: #3a4060; } html.light-mode .filter-tab.active { background: var(--accent); color: #fff; } html.light-mode .search-wrap input { background: #ffffff; border-color: rgba(0,0,0,0.1); color: #0f1120; } html.light-mode .page-btn { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.08); color: #3a4060; } html.light-mode .page-btn.active { background: var(--accent); color: #fff; } /* ── BUTTON ALIGNMENT — global fix ────────────────────────── */ .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .btn i { flex-shrink: 0; } /* ── MAP CONTAINER ─────────────────────────────────────────── */ .map-frame { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--glass-border-2); box-shadow: var(--shadow-sm); } .map-frame iframe { width: 100%; height: 100%; border: none; display: block; min-height: 260px; } /* ── USER PROFILE AVATAR IN NAVBAR ─────────────────────────── */ .nav-user-photo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .nav-user-initials { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; flex-shrink: 0; } /* ── PROFILE PAGE STYLES ────────────────────────────────────── */ .profile-page-grid { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; } .profile-card-static { background: var(--bg-card); border: 1px solid var(--glass-border-2); border-radius: var(--r-xl); padding: 32px 24px; text-align: center; position: sticky; top: calc(var(--nav-h) + 24px); } .profile-avatar-large { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; border: 3px solid var(--glass-border); box-shadow: var(--shadow-md); } .profile-avatar-initial { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-purple)); color: #fff; font-size: 2.5rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: var(--shadow-md); } .profile-name-display { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; } .profile-role-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: var(--r-pill); background: rgba(79,142,247,0.12); color: var(--accent); border: 1px solid rgba(79,142,247,0.22); font-size: 0.75rem; font-weight: 600; margin: 8px 0 12px; } .profile-joined { color: var(--text-muted); font-size: 0.78rem; } .profile-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-secondary); font-size: 0.82rem; font-weight: 500; cursor: pointer; margin-top: 16px; transition: all var(--t-fast); } .profile-upload-btn:hover { color: var(--text-primary); background: var(--glass-bg-2, var(--glass-bg)); } .profile-remove-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.2); color: var(--accent-red); font-size: 0.78rem; cursor: pointer; margin-top: 8px; transition: all var(--t-fast); } .profile-remove-btn:hover { background: rgba(248,113,113,0.15); } @media(max-width:768px) { .profile-page-grid { grid-template-columns: 1fr; } .profile-card-static { position: static; } }