/* ========================================================================== Design system — portfolio-JAMAL Light-first, minimal SaaS aesthetic. Loaded by layouts/app.blade.php and layouts/admin.blade.php. Dark theme via [data-theme="dark"] on . Legacy variable names (--primary, --bg-secondary, --text-primary, ...) are kept so page-level styles keep working; new aliases (--surface, --subtle, --shadow-*) are preferred for new rules. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Brand */ --primary: #e0402e; --primary-hover: #c73422; --primary-soft: rgba(224, 64, 46, 0.08); --accent: #d97706; /* Neutrals */ --bg-primary: #fafafa; --surface: #ffffff; --subtle: #f4f4f5; --bg-secondary: #ffffff; --bg-tertiary: #f4f4f5; --border-color: #e4e4e7; --border-strong: #d4d4d8; /* Text */ --text-primary: #18181b; --text-secondary: #52525b; --text-muted: #a1a1aa; --gray: #52525b; /* Legacy aliases: --dark = page bg, --light = text (inherited naming) */ --dark: #fafafa; --light: #18181b; /* Semantic */ --success: #16a34a; --success-soft: rgba(22, 163, 74, 0.1); --warning: #d97706; --warning-soft: rgba(217, 119, 6, 0.1); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.1); --info: #0284c7; --info-soft: rgba(2, 132, 199, 0.1); /* Elevation */ --shadow-color: rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.08); /* Shape */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; /* Chrome */ --nav-bg: rgba(255, 255, 255, 0.85); /* Type */ --font-display: 'Space Grotesk', 'Inter', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } [data-theme="dark"] { --primary: #ff5a47; --primary-hover: #ff6f5e; --primary-soft: rgba(255, 90, 71, 0.12); --accent: #fbbf24; --bg-primary: #101114; --surface: #17181c; --subtle: #1e1f24; --bg-secondary: #17181c; --bg-tertiary: #1e1f24; --border-color: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --text-primary: #ededef; --text-secondary: #a0a0a8; --text-muted: #6e6e76; --gray: #a0a0a8; --dark: #101114; --light: #ededef; --success: #4ade80; --success-soft: rgba(74, 222, 128, 0.12); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.12); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.12); --info: #38bdf8; --info-soft: rgba(56, 189, 248, 0.12); --shadow-color: rgba(0, 0, 0, 0.5); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.55); --nav-bg: rgba(16, 17, 20, 0.85); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ html, body { overflow-x: hidden; max-width: 100%; } body { font-family: var(--font-body); font-size: 16px; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; transition: background-color 0.2s ease, color 0.2s ease; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-primary); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; } a { color: var(--primary); } a:hover { color: var(--primary-hover); } ::selection { background: var(--primary); color: #ffffff; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; top: -48px; left: 1rem; z-index: 2000; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.5rem 1rem; font-weight: 500; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 0.75rem; } @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; } } /* Legacy template artifacts, permanently retired */ .mouseCursor { display: none !important; } .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } /* -------------------------------------------------------------------------- 3. Navigation -------------------------------------------------------------------------- */ nav#navbar { position: fixed; top: 0; width: 100%; padding: 1rem 0; background: var(--nav-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); z-index: 1000; transition: padding 0.2s ease, box-shadow 0.2s ease; border-bottom: 1px solid var(--border-color); } nav#navbar.scrolled { padding: 0.65rem 0; box-shadow: var(--shadow-sm); } .nav-content { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .logo { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); text-decoration: none; font-family: var(--font-display); white-space: nowrap; flex: 0 0 auto; } .logo:hover { color: var(--text-primary); } .nav-links { display: flex; gap: 0.25rem; list-style: none; margin: 0; align-items: center; flex: 1; justify-content: center; min-width: 0; } .nav-links > li { position: relative; } .nav-links a, .nav-dropdown-toggle { color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: color 0.15s ease, background-color 0.15s ease; position: relative; display: block; padding: 0.45rem 0.8rem; border-radius: var(--radius-sm); } .nav-dropdown-toggle { border: 0; background: transparent; font-family: inherit; cursor: pointer; } .nav-links > li > a:hover, .nav-dropdown-toggle:hover { color: var(--text-primary); background: var(--subtle); } .nav-links > li > a.active, .nav-dropdown-toggle.active, .nav-dropdown.open .nav-dropdown-toggle { color: var(--text-primary); background: var(--subtle); } /* Dropdowns */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { display: flex; align-items: center; gap: 0.35rem; } .nav-dropdown-toggle i { font-size: 0.65rem; transition: transform 0.15s ease; color: var(--text-muted); } .nav-dropdown:hover .nav-dropdown-toggle i, .nav-dropdown.open .nav-dropdown-toggle i { transform: rotate(180deg); } .nav-dropdown .dropdown-menu { display: block; position: absolute; top: 100%; left: 0; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.4rem; min-width: 200px; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, margin-top 0.15s ease; margin-top: 0.75rem; box-shadow: var(--shadow-lg); z-index: 1100; } .nav-dropdown .dropdown-menu-end { left: auto; right: 0; } .nav-dropdown:hover .dropdown-menu, .nav-dropdown.open .dropdown-menu, .nav-dropdown .dropdown-menu.active { opacity: 1; visibility: visible; margin-top: 0.4rem; } .nav-dropdown .dropdown-menu li { list-style: none; } .nav-dropdown .dropdown-menu a { padding: 0.55rem 0.8rem; color: var(--text-secondary); border-radius: var(--radius-sm); transition: background-color 0.15s ease, color 0.15s ease; } .nav-dropdown .dropdown-menu a:hover { background: var(--subtle); color: var(--text-primary); } /* Language switcher */ .lang-switcher { display: flex; gap: 0.25rem; align-items: center; margin-left: 0.75rem; } .lang-btn { padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); text-decoration: none; font-weight: 500; font-size: 0.8rem; transition: all 0.15s ease; border: 1px solid transparent; color: var(--text-secondary); background: transparent; } .lang-btn:hover { color: var(--text-primary); background: var(--subtle); } .lang-btn.active { background: var(--subtle); border-color: var(--border-color); color: var(--text-primary); } /* Theme toggle */ .theme-toggle { width: 36px; height: 36px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; margin-left: 0.5rem; } .theme-toggle:hover { background: var(--subtle); border-color: var(--border-strong); } .theme-toggle i { font-size: 15px; color: var(--text-secondary); } .fa-sun { display: none; } .fa-moon { display: block; } [data-theme="dark"] .fa-sun { display: block; } [data-theme="dark"] .fa-moon { display: none; } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: none; border: none; z-index: 1200; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: all 0.2s ease; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer */ .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1050; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .mobile-nav-overlay.open { display: block; } .mobile-nav-drawer { position: fixed; top: 0; right: 0; width: min(300px, 85vw); height: 100%; background: var(--surface); border-left: 1px solid var(--border-color); z-index: 1100; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; padding: 1.25rem 0; } .mobile-nav-drawer.open { transform: translateX(0); } .mobile-nav-header { display: flex; justify-content: space-between; align-items: center; padding: 0 1.25rem 1.25rem; border-bottom: 1px solid var(--border-color); margin-bottom: 0.5rem; } .mobile-nav-header .logo { font-size: 1rem; } .mobile-nav-close { background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; padding: 4px 8px; line-height: 1; border-radius: var(--radius-sm); } .mobile-nav-close:hover { color: var(--text-primary); background: var(--subtle); } .mobile-nav-links { list-style: none; padding: 0 0.75rem; margin: 0; } .mobile-nav-links li { border-bottom: none; } .mobile-nav-links a { display: block; padding: 0.7rem 0.75rem; color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 0.95rem; border-radius: var(--radius-sm); transition: background-color 0.15s ease, color 0.15s ease; } .mobile-nav-links a:hover, .mobile-nav-links a.active { color: var(--text-primary); background: var(--subtle); border-left: none; } .mobile-dropdown-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.75rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font: inherit; font-weight: 500; font-size: 0.95rem; cursor: pointer; text-align: left; transition: background-color 0.15s ease, color 0.15s ease; } .mobile-dropdown-toggle:hover, .mobile-dropdown-toggle.active, .mobile-dropdown.open .mobile-dropdown-toggle { color: var(--text-primary); background: var(--subtle); } .mobile-dropdown-toggle i { font-size: 0.7rem; color: var(--text-muted); transition: transform 0.15s ease; } .mobile-dropdown.open .mobile-dropdown-toggle i { transform: rotate(180deg); } .mobile-submenu { display: none; list-style: none; margin: 0.35rem 0 0.55rem; padding: 0.35rem 0 0.35rem 0.75rem; border-left: 1px solid var(--border-color); } .mobile-dropdown.open .mobile-submenu { display: block; } .mobile-submenu a { padding: 0.6rem 0.75rem; font-size: 0.88rem; color: var(--text-muted); } .mobile-submenu a:hover, .mobile-submenu a.active { color: var(--text-primary); background: var(--subtle); } .mobile-nav-footer { padding: 1.25rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--border-color); margin-top: 0.75rem; } @media (max-width: 968px) { .nav-links { display: none; } .hamburger { display: flex; } .nav-lang-switcher { display: none; } .nav-theme-toggle { display: none; } .container { padding: 0 1rem; } .page-header-section { padding: 7rem 0 2.5rem; } .section-padding { padding: 3rem 0; } } /* -------------------------------------------------------------------------- 4. Buttons -------------------------------------------------------------------------- */ .btn { padding: 0.55rem 1.1rem; border-radius: var(--radius-md); text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: all 0.15s ease; display: inline-block; line-height: 1.4; } .btn-primary { background: var(--primary); color: #ffffff; border: 1px solid var(--primary); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #ffffff; transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn-secondary { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover { border-color: var(--border-strong); background: var(--subtle); color: var(--text-primary); } .theme-btn { background: var(--primary); color: #ffffff; border: 1px solid var(--primary); padding: 0.7rem 1.6rem; border-radius: var(--radius-md); font-weight: 500; font-size: 0.95rem; transition: all 0.15s ease; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .theme-btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #ffffff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .link-btn { color: var(--primary); text-decoration: none; font-weight: 500; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; transition: gap 0.15s ease, color 0.15s ease; } .link-btn:hover { gap: 0.65rem; color: var(--primary-hover); } /* -------------------------------------------------------------------------- 5. Page header, sections, typography devices -------------------------------------------------------------------------- */ .page-header-section { background: var(--surface) !important; padding: 8.5rem 0 3.5rem; margin-top: 0; border-bottom: 1px solid var(--border-color); position: relative; } .page-header-content { position: relative; z-index: 2; text-align: center; } .page-header-content h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; text-transform: none; letter-spacing: -0.02em; } .breadcrumb { background: transparent; margin: 0; padding: 0; display: flex; justify-content: center; font-size: 0.85rem; } .breadcrumb-item { display: flex; align-items: center; } .breadcrumb-item a { color: var(--text-muted); text-decoration: none; transition: color 0.15s ease; font-weight: 500; } .breadcrumb-item a:hover { color: var(--text-primary); } .breadcrumb-item.active { color: var(--text-secondary); font-weight: 500; } .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); content: "/"; padding: 0 0.6rem; } .section-padding { padding: 5rem 0; background: var(--bg-primary); } /* Eyebrow: the signature quiet label above section titles */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; } .eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--primary); border-radius: 1px; } .section-title { font-size: clamp(1.6rem, 3vw, 2.25rem); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.75rem; } .section-title + p, .section-subtitle { color: var(--text-secondary); font-size: 1.05rem; max-width: 640px; margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- 6. Cards -------------------------------------------------------------------------- */ .project-items, .news-card-items, .feature-card, .content-card, .research-card, .resource-card, .coaching-card, .testimonial-card, .contact-info-box { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .project-items:hover, .news-card-items:hover, .feature-card:hover, .content-card:hover, .research-card:hover, .resource-card:hover, .coaching-card:hover, .contact-info-box:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .project-items { overflow: hidden; height: 100%; } .project-image { position: relative; overflow: hidden; } .project-image img { width: 100%; height: 260px; object-fit: cover; transition: transform 0.3s ease; } .project-items:hover .project-image img { transform: scale(1.03); } .project-content { padding: 1.5rem; background: var(--surface); } .project-content p { color: var(--primary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; } .project-content h3 { font-size: 1.2rem; margin: 0; } .project-content h3 a { color: var(--text-primary); text-decoration: none; transition: color 0.15s ease; } .project-content h3 a:hover { color: var(--primary); } .news-card-items { overflow: hidden; height: 100%; } .news-image { position: relative; overflow: hidden; } .news-image img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.3s ease; } .news-card-items:hover .news-image img { transform: scale(1.03); } .post-cat { position: absolute; top: 0.85rem; left: 0.85rem; background: var(--surface); border: 1px solid var(--border-color); padding: 0.3rem 0.75rem; border-radius: 50px; box-shadow: var(--shadow-sm); } .post-cat a { color: var(--text-primary); text-decoration: none; font-size: 0.75rem; font-weight: 600; } .news-content { padding: 1.5rem; } .news-content h3 { font-size: 1.2rem; margin-bottom: 0.6rem; } .news-content h3 a { color: var(--text-primary); text-decoration: none; transition: color 0.15s ease; } .news-content h3 a:hover { color: var(--primary); } .news-content p { color: var(--text-secondary); margin-bottom: 1.25rem; line-height: 1.65; font-size: 0.95rem; } .post-meta { list-style: none; padding: 0; margin: 0 0 1rem 0; display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-muted); } .post-meta i { color: var(--text-muted); margin-right: 0.4rem; } /* -------------------------------------------------------------------------- 7. Badges & status -------------------------------------------------------------------------- */ .badge-soft { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; background: var(--subtle); color: var(--text-secondary); border: 1px solid var(--border-color); } .badge-soft.success { background: var(--success-soft); color: var(--success); border-color: transparent; } .badge-soft.warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; } .badge-soft.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .badge-soft.info { background: var(--info-soft); color: var(--info); border-color: transparent; } .badge-soft.primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; } /* -------------------------------------------------------------------------- 8. Forms -------------------------------------------------------------------------- */ .form-control, .form-select { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.65rem 0.9rem; color: var(--text-primary); font-size: 0.95rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control:focus, .form-select:focus { background: var(--surface); border-color: var(--primary); color: var(--text-primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; } .form-control::placeholder { color: var(--text-muted); } .form-label { color: var(--text-primary); font-weight: 500; font-size: 0.9rem; margin-bottom: 0.4rem; } .input-with-icon { position: relative; } .input-with-icon i { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.9rem; z-index: 1; } .input-with-icon .form-control { padding-left: 2.6rem; } .input-with-icon textarea.form-control { padding-top: 0.65rem; } .input-with-icon textarea.form-control ~ i { top: 1.1rem; transform: none; } /* -------------------------------------------------------------------------- 9. Alerts -------------------------------------------------------------------------- */ .alert { border-radius: var(--radius-md); border: 1px solid var(--border-color); padding: 0.85rem 1.1rem; font-size: 0.92rem; } .alert-success { background: var(--success-soft); color: var(--success); border-color: transparent; } .alert-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .alert-info { background: var(--info-soft); color: var(--info); border-color: transparent; } .alert-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; } /* -------------------------------------------------------------------------- 10. Pagination -------------------------------------------------------------------------- */ .pagination-wrapper { display: flex; justify-content: center; } .pagination { gap: 0.35rem; } .page-link { background: var(--surface); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 0.5rem 0.9rem; border-radius: var(--radius-md) !important; font-size: 0.9rem; transition: all 0.15s ease; } .page-link:hover { background: var(--subtle); border-color: var(--border-strong); color: var(--text-primary); } .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #ffffff; } .page-item.disabled .page-link { background: var(--surface); color: var(--text-muted); border-color: var(--border-color); } /* -------------------------------------------------------------------------- 11. Empty state -------------------------------------------------------------------------- */ .empty-state { text-align: center; padding: 4rem 2rem; background: var(--surface); border: 1px dashed var(--border-color); border-radius: var(--radius-lg); } .empty-state i { font-size: 2.25rem; color: var(--text-muted); margin-bottom: 1rem; display: inline-block; } .empty-state h3, .empty-state h4 { font-size: 1.15rem; margin-bottom: 0.5rem; } .empty-state p { color: var(--text-secondary); max-width: 420px; margin: 0 auto 1.25rem; } /* -------------------------------------------------------------------------- 12. Progress -------------------------------------------------------------------------- */ .progress { height: 6px; background: var(--subtle); border-radius: 3px; overflow: hidden; } .progress-bar { background: var(--primary); border-radius: 3px; } /* -------------------------------------------------------------------------- 13. Back to top -------------------------------------------------------------------------- */ .back-to-top { background: var(--surface); border: 1px solid var(--border-color); color: var(--text-secondary); width: 42px; height: 42px; border-radius: var(--radius-md); position: fixed; bottom: 1.5rem; right: 1.5rem; transition: all 0.15s ease; z-index: 999; box-shadow: var(--shadow-md); } .back-to-top:hover { color: var(--text-primary); border-color: var(--border-strong); transform: translateY(-2px); } /* -------------------------------------------------------------------------- 14. Footer -------------------------------------------------------------------------- */ .footer-section { background: var(--surface); border-top: 1px solid var(--border-color); padding: 2.5rem 0 1.5rem; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr) minmax(180px, 0.6fr); gap: 2rem; align-items: start; margin-bottom: 1.75rem; } .footer-brand h2, .footer-contact h3, .footer-social h3 { font-family: var(--font-display); color: var(--text-primary); margin-bottom: 0.65rem; } .footer-brand h2 { font-size: 1.35rem; } .footer-contact h3, .footer-social h3 { font-size: 1rem; } .footer-title { color: var(--primary) !important; font-weight: 600; } .footer-brand p, .footer-contact span, .footer-contact a { color: var(--text-secondary); margin: 0 0 0.5rem; line-height: 1.65; font-size: 0.95rem; } .footer-contact { display: grid; gap: 0.35rem; } .footer-contact a, .footer-contact span { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .footer-contact a:hover { color: var(--primary); } .footer-contact i { color: var(--primary); width: 18px; } .footer-social-links { display: flex; gap: 0.5rem; flex-wrap: wrap; } .footer-social-links a { width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px solid var(--border-color); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); text-decoration: none; } .footer-social-links a:hover { color: var(--primary); border-color: var(--border-strong); background: var(--subtle); } .footer-bottom p { color: var(--text-muted); margin: 0; text-align: center; font-size: 0.9rem; } .pagination-wrapper nav, .pagination-wrap nav { display: flex; justify-content: center; } .pagination svg, .pagination-wrapper svg, .pagination-wrap svg { width: 1rem; height: 1rem; } .pagination { gap: 0.35rem; justify-content: center; align-items: center; } .pagination .page-link { color: var(--text-secondary); border-color: var(--border-color); background: var(--surface); border-radius: var(--radius-sm); } .pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 1.25rem; } } /* -------------------------------------------------------------------------- 15. Detail pages & article content -------------------------------------------------------------------------- */ .project-details-section, .blog-details-section { background: var(--bg-primary); } .project-details-wrapper, .blog-details-wrapper { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2.5rem; } @media (max-width: 768px) { .project-details-wrapper, .blog-details-wrapper { padding: 1.5rem; } } .project-details-image img, .blog-details-image img { width: 100%; border-radius: var(--radius-lg); margin-bottom: 2rem; } .project-info .badge { background: var(--primary-soft) !important; color: var(--primary) !important; padding: 0.35rem 0.9rem; font-size: 0.8rem; font-weight: 600; border-radius: var(--radius-sm); } .project-details-content h2, .blog-details-content h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 1.25rem; color: var(--text-primary); } .project-description p, .blog-content p { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.75; margin-bottom: 1.25rem; max-width: 72ch; } .blog-content { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.75; } .blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4 { color: var(--text-primary); margin-top: 2rem; margin-bottom: 0.85rem; } .blog-content ul, .blog-content ol { margin-left: 1.5rem; margin-bottom: 1.25rem; } .blog-content code { background: var(--subtle); border: 1px solid var(--border-color); padding: 0.15rem 0.4rem; border-radius: 4px; color: var(--text-primary); font-size: 0.88em; } .blog-content pre { background: var(--subtle); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md); overflow-x: auto; margin-bottom: 1.25rem; } .blog-content pre code { background: transparent; border: none; padding: 0; } .project-link .theme-btn { display: inline-flex; align-items: center; gap: 0.5rem; } /* -------------------------------------------------------------------------- 16. Contact -------------------------------------------------------------------------- */ .contact-section { background: var(--bg-primary); } .contact-info-wrapper { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2.5rem; } .contact-info h2 { font-size: 1.9rem; margin-bottom: 0.75rem; } .contact-info p { color: var(--text-secondary); font-size: 1rem; } .contact-info-box { padding: 1.5rem; } .contact-info-box i { color: var(--primary); } .contact-info-box h4 { margin: 0.85rem 0; font-size: 1.1rem; } .contact-info-box a { color: var(--text-secondary); text-decoration: none; transition: color 0.15s ease; } .contact-info-box a:hover { color: var(--primary); } .contact-form-wrapper h3 { font-size: 1.5rem; margin-bottom: 1.5rem; } .social-icon a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-secondary); transition: all 0.15s ease; } .social-icon a:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--subtle); transform: translateY(-2px); } /* -------------------------------------------------------------------------- 17. Modals (custom pattern used by coaching/testimonials) -------------------------------------------------------------------------- */ .custom-modal-surface { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }