/* ============================================================ Design tokens — dark theme is the default (data-theme="dark" on , set before paint by an inline script in head.ejs). Light theme is an explicit opt-in via [data-theme="light"]. ============================================================ */ :root { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Dark theme (default) */ --color-bg: #0b0d14; --color-surface: #131622; --color-surface-rgb: 19, 22, 34; --color-surface-2: #1a1e2c; --color-border: #262b3d; --color-text: #edeff7; --color-text-muted: #98a0b8; --color-accent: #3b82f6; --color-accent-2: #0ea5e9; --color-accent-soft: rgba(59, 130, 246, 0.16); --color-success: #2fd08a; --color-success-soft: rgba(47, 208, 138, 0.14); --color-danger: #ff6b81; --color-danger-soft: rgba(255, 107, 129, 0.14); --color-warning: #f0ab2c; --color-warning-soft: rgba(240, 171, 44, 0.14); --gradient-accent: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; } html[data-theme="light"] { --color-bg: #f7f7fb; --color-surface: #ffffff; --color-surface-rgb: 255, 255, 255; --color-surface-2: #f2f2f8; --color-border: #e6e6ef; --color-text: #16161f; --color-text-muted: #6b6b7b; --color-accent: #2563eb; --color-accent-2: #0ea5e9; --color-accent-soft: #e6f1ff; --color-success: #16a672; --color-success-soft: #e7f8f1; --color-danger: #e0455c; --color-danger-soft: #fdecef; --color-warning: #d98a12; --color-warning-soft: #fdf3e0; --gradient-accent: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%); --shadow-sm: 0 1px 2px rgba(20, 20, 43, 0.06); --shadow-md: 0 8px 24px rgba(20, 20, 43, 0.08); --shadow-lg: 0 20px 48px rgba(20, 20, 43, 0.14); } /* ============================================================ Accent color presets — picked via the swatch button next to the theme toggle, stored client-side (localStorage), no admin control. "blue" is the site default and needs no override. ============================================================ */ html[data-accent="violet"] { --color-accent: #6d5bf7; --color-accent-2: #3b82f6; --color-accent-soft: rgba(109,91,247,0.16); --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); } html[data-accent="green"] { --color-accent: #22c55e; --color-accent-2: #0d9488; --color-accent-soft: rgba(34,197,94,0.16); --gradient-accent: linear-gradient(135deg, #0d9488 0%, #22c55e 100%); } html[data-accent="rose"] { --color-accent: #fb7185; --color-accent-2: #e11d48; --color-accent-soft: rgba(251,113,133,0.16); --gradient-accent: linear-gradient(135deg, #e11d48 0%, #fb7185 100%); } html[data-accent="amber"] { --color-accent: #f59e0b; --color-accent-2: #d97706; --color-accent-soft: rgba(245,158,11,0.18); --gradient-accent: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); } html[data-theme="light"][data-accent="violet"] { --color-accent: #5b46e5; --color-accent-2: #8b5cf6; --color-accent-soft: #efeafe; --gradient-accent: linear-gradient(135deg, #5b46e5 0%, #8b5cf6 100%); } html[data-theme="light"][data-accent="green"] { --color-accent: #0d9488; --color-accent-2: #16a672; --color-accent-soft: #e3f6f1; --gradient-accent: linear-gradient(135deg, #0d9488 0%, #22c55e 100%); } html[data-theme="light"][data-accent="rose"] { --color-accent: #e11d48; --color-accent-2: #fb7185; --color-accent-soft: #fdeaef; --gradient-accent: linear-gradient(135deg, #e11d48 0%, #fb7185 100%); } html[data-theme="light"][data-accent="amber"] { --color-accent: #d97706; --color-accent-2: #f59e0b; --color-accent-soft: #fdf1de; --gradient-accent: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); transition: background-color 0.2s ease, color 0.2s ease; background: var(--color-bg); color: var(--color-text); line-height: 1.65; -webkit-font-smoothing: antialiased; } .container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; } .section { padding-top: 4rem; padding-bottom: 4rem; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; } @media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } .section { padding-top: 2.5rem; padding-bottom: 2.5rem; } } @media (max-width: 480px) { .container { padding-left: 1.1rem; padding-right: 1.1rem; } } h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 0.6rem; } h2 { font-size: 1.7rem; } h3 { font-size: 1.15rem; } p { margin: 0 0 0.75rem; } a { color: var(--color-accent); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--color-accent-2); } .muted { color: var(--color-text-muted); font-size: 0.9rem; } .empty { color: var(--color-text-muted); padding: 1.5rem 0; } code { background: var(--color-surface-2); padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.85em; } /* ============================================================ Header / nav ============================================================ */ .site-header { border-bottom: 1px solid var(--color-border); background: rgba(var(--color-surface-rgb), 0.82); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease; } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; } .brand { font-weight: 800; font-size: 1.15rem; color: var(--color-text); letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.6rem; } .brand::before { display: none; } .brand-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 9px; box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm); transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease; } .brand:hover .brand-logo { transform: rotate(-6deg) scale(1.08); box-shadow: 0 0 0 2px var(--color-accent-soft), 0 0 18px rgba(109, 91, 247, 0.4); } .main-nav { display: flex; gap: 1.75rem; align-items: center; } .main-nav > a { color: var(--color-text); font-weight: 600; font-size: 0.94rem; position: relative; padding: 0.3rem 0; } .main-nav > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--gradient-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s cubic-bezier(.4,0,.2,1); } .main-nav > a:hover::after, .main-nav > a.active::after { transform: scaleX(1); } .main-nav > a:hover { color: var(--color-accent); } html[data-theme="dark"] .main-nav > a { transition: color 0.15s ease; } html[data-theme="dark"] .main-nav > a:hover { color: #8fb4ff; text-shadow: 0 0 12px rgba(59, 130, 246, 0.5); } .nav-dropdown { position: relative; } .nav-dropdown-menu { display: flex; position: absolute; top: 100%; left: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.5rem; min-width: 190px; flex-direction: column; gap: 0.15rem; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s cubic-bezier(.4,0,.2,1), visibility 0.2s; } .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .nav-dropdown-menu a { padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); color: var(--color-text); font-weight: 500; font-size: 0.9rem; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .nav-dropdown-menu a:hover { background: var(--color-accent-soft); color: var(--color-accent); transform: translateX(3px); } .main-nav-actions { display: flex; align-items: center; gap: 0.75rem; } .nav-dropdown-toggle { display: none; } .nav-backdrop { display: none; } /* Hamburger toggle (public nav) — hidden on desktop */ .nav-toggle { display: none; width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; } .nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--color-text); transition: transform 0.25s ease, opacity 0.2s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ Mobile nav (public site) ============================================================ */ @media (max-width: 860px) { .nav-toggle { display: inline-flex; } .main-nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 51; flex-direction: column; align-items: stretch; gap: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-lg); max-height: 0; overflow: hidden; opacity: 0; padding: 0 1.25rem; transition: max-height 0.3s cubic-bezier(.4,0,.2,1), opacity 0.25s ease, padding 0.3s ease; } .main-nav.open { max-height: 80vh; opacity: 1; overflow-y: auto; padding: 0.5rem 1.25rem 1.25rem; } .main-nav > a { width: 100%; padding: 0.9rem 0.1rem; border-bottom: 1px solid var(--color-border); } .main-nav > a::after { display: none; } .nav-dropdown { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); } .nav-dropdown > a { border-bottom: none; flex: 1; } .nav-dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: none; background: none; color: var(--color-text-muted); cursor: pointer; transition: transform 0.25s ease, background 0.15s ease; } .nav-dropdown-toggle:hover { background: var(--color-accent-soft); color: var(--color-accent); } .nav-dropdown.open .nav-dropdown-toggle { transform: rotate(180deg); } .nav-dropdown-menu { position: static; width: 100%; box-shadow: none; border: none; border-radius: 0; padding: 0 0 0.5rem 1rem; max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; margin: 0; transform: none; pointer-events: none; transition: max-height 0.25s ease, opacity 0.2s ease; } .nav-dropdown.open .nav-dropdown-menu { display: flex; max-height: 240px; opacity: 1; visibility: visible; pointer-events: auto; } .main-nav-actions { width: 100%; justify-content: flex-start; padding: 1rem 0.1rem 0.25rem; } .main-nav-actions .btn { margin-left: auto; } .nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 49; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .nav-backdrop.open { display: block; opacity: 1; pointer-events: auto; } } /* Theme toggle */ .theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); } /* Message bell (visitor header, links to /dashboard/messages) */ .message-bell { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .message-bell:hover { border-color: var(--color-accent); color: var(--color-accent); } .message-bell-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 999px; background: var(--color-danger); color: #fff; font-size: 0.62rem; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--color-surface); } .user-message-item { margin-bottom: 1rem; } /* Admin email tool inbox list */ .inbox-list { display: flex; flex-direction: column; margin-top: 0.5rem; } .inbox-row { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 0.4rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; transition: background 0.15s ease; } .inbox-row:last-child { border-bottom: none; } .inbox-row:hover { background: var(--color-surface-2); color: var(--color-text); } .inbox-from { flex: 0 0 180px; font-weight: 600; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inbox-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.6rem; overflow: hidden; } .inbox-subject { font-weight: 600; font-size: 0.88rem; flex-shrink: 0; } .inbox-snippet { color: var(--color-text-muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inbox-date { flex-shrink: 0; font-size: 0.78rem; color: var(--color-text-muted); } @media (max-width: 700px) { .inbox-row { flex-wrap: wrap; } .inbox-from { flex-basis: 100%; } .inbox-date { margin-left: auto; } } .icon-moon { display: none; } html[data-theme="light"] .icon-sun { display: none; } html[data-theme="light"] .icon-moon { display: block; } .admin-sidebar-footer { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; flex-shrink: 0; } /* Accent color picker */ .accent-picker { position: relative; } .accent-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--gradient-accent); display: block; box-shadow: 0 0 0 2px var(--color-surface) inset; } .accent-menu { display: flex; gap: 0.55rem; position: absolute; top: calc(100% + 10px); right: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.65rem; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s cubic-bezier(.4,0,.2,1), visibility 0.2s; } .accent-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .accent-swatch { width: 24px; height: 24px; border-radius: 50%; background: var(--swatch); border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease; } .accent-swatch:hover { transform: scale(1.15); } .accent-swatch.active { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-text); } /* Notification bar */ .notif-bar { background: var(--gradient-accent); color: #fff; position: relative; z-index: 51; animation: notifSlideDown 0.4s ease; } @keyframes notifSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } .notif-bar-inner { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.6rem 2.5rem; position: relative; text-align: center; } .notif-bar-text { margin: 0; font-size: 0.86rem; font-weight: 600; } .notif-bar-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .notif-bar-close { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; opacity: 0.85; padding: 0.2rem 0.5rem; transition: opacity 0.15s ease; } .notif-bar-close:hover { opacity: 1; } /* Dark-mode modern hover: blue gradient glow on buttons and links */ html[data-theme="dark"] .btn-primary:hover { box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5), 0 10px 30px rgba(59, 130, 246, 0.35), 0 0 20px rgba(139, 92, 246, 0.25); } html[data-theme="dark"] .btn-outline:hover { border-color: transparent; background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, var(--gradient-accent) border-box; border: 1px solid transparent; box-shadow: 0 0 16px rgba(59, 130, 246, 0.25); } html[data-theme="dark"] .prose a:hover, html[data-theme="dark"] .section-head a:hover, html[data-theme="dark"] .footer-meta a:hover, html[data-theme="dark"] .blog-sidebar-list a:hover { background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } html[data-theme="dark"] .card:hover { box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3), var(--shadow-md), 0 0 24px rgba(139, 92, 246, 0.15); } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 1.3rem; border-radius: var(--radius-full); font-weight: 600; cursor: pointer; border: 1px solid transparent; font-size: 0.92rem; font-family: inherit; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .btn-primary { background: var(--gradient-accent); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; } .btn-outline { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); } .btn-small { padding: 0.45rem 0.9rem; font-size: 0.82rem; } .btn:active { transform: translateY(0); } /* ============================================================ Cards ============================================================ */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } .card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.4rem; color: var(--color-text); box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; color: var(--color-text); } .card img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 0.9rem; } .card h3 { margin: 0 0 0.4rem; } .card p { color: var(--color-text-muted); margin: 0; font-size: 0.92rem; flex: 1; } .card .btn { margin-top: 1rem; align-self: flex-start; } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.25rem; } .section-head a { font-weight: 600; font-size: 0.9rem; } /* ============================================================ Hero ============================================================ */ .hero { padding: 4.5rem 1.5rem 3rem; display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 2.5rem; align-items: center; } @media (max-width: 820px) { .hero { grid-template-columns: 1fr; padding-top: 3rem; } .hero-visual { order: -1; } } .eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-accent); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.03em; text-transform: uppercase; background: var(--color-accent-soft); padding: 0.35rem 0.8rem; border-radius: var(--radius-full); margin: 0 0 1rem; } .hero h1 { font-size: 3rem; margin: 0 0 1rem; } .hero .lead { max-width: 560px; color: var(--color-text-muted); font-size: 1.12rem; } .hero-actions { display: flex; gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap; } .hero-visual { display: flex; justify-content: center; } .hero-photo { width: 260px; height: 260px; border-radius: var(--radius-lg); object-fit: cover; box-shadow: var(--shadow-lg); border: 6px solid var(--color-surface); background: var(--gradient-accent); } /* Timeline (experience) */ .timeline { display: flex; flex-direction: column; gap: 0; margin-top: 1.5rem; } .timeline-item { position: relative; padding: 0 0 1.75rem 1.75rem; border-left: 2px solid var(--color-border); } .timeline-item::before { content: ''; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--gradient-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); } .timeline-item:last-child { border-left-color: transparent; } .timeline-item h3 { margin: 0 0 0.2rem; } .timeline-item p { margin: 0.2rem 0; } /* Tags / skills */ .tags { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1rem; } .tag { background: var(--color-accent-soft); color: var(--color-accent); border: 1px solid transparent; padding: 0.4rem 0.85rem; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 600; transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), border-color 0.18s ease, box-shadow 0.18s ease; } .tag:hover { transform: translateY(-2px); border-color: var(--color-accent); } html[data-theme="dark"] .tag:hover { box-shadow: 0 0 0 1px rgba(59,130,246,0.25), 0 0 16px rgba(59,130,246,0.18); } .plain-list { padding-left: 1.2rem; } .plain-list li { margin-bottom: 0.6rem; } /* ============================================================ CV-style Experience & Education section (home page) ============================================================ */ .cv-group-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--color-accent); margin: 0 0 1rem; } .cv-group-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); } .cv-group-title:not(:first-child) { margin-top: 2rem; } .cv-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; margin-top: 1rem; } @media (max-width: 900px) { .cv-grid { grid-template-columns: 1fr; } } .cv-timeline { display: flex; flex-direction: column; } .cv-entry { display: flex; gap: 1rem; padding: 1.1rem 0.75rem; margin: 0 -0.75rem; border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md); transition: background 0.15s ease; } .cv-entry:last-child { border-bottom: none; } .cv-entry:hover { background: var(--color-surface-2); } .cv-entry:hover .cv-logo { border-color: var(--color-accent); } .cv-entry-body { flex: 1; min-width: 0; } .cv-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .cv-entry-head h4 { margin: 0; font-size: 1rem; font-weight: 700; } .cv-entry-period { font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; } .cv-entry-body p { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.55; } .cv-entry-body p.muted { margin-top: 0.2rem; } .cv-logo { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--color-surface-2); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: border-color 0.15s ease; } .cv-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; } .cv-logo span { font-size: 0.72rem; font-weight: 800; color: var(--color-accent); letter-spacing: 0.02em; } .cv-logo-sm { width: 30px; height: 30px; border-radius: 7px; } .cv-logo-sm span { font-size: 0.62rem; } .cv-sidebar { display: flex; flex-direction: column; gap: 1.5rem; } .cv-side-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.3rem; box-shadow: var(--shadow-sm); } .cv-side-block .cv-group-title { margin-top: 0; } .cv-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .cv-side-list li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; line-height: 1.4; } .cv-publications { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .cv-publication-list { max-width: 780px; } .cv-publication-list li { align-items: flex-start; } /* Big Applications tiles (home page) */ .app-big-tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 1.5rem; } @media (max-width: 700px) { .app-big-tile-grid { grid-template-columns: 1fr; } } .app-big-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; padding: 2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text); text-decoration: none; transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s ease, border-color 0.18s ease; } .app-big-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-accent); color: var(--color-text); } html[data-theme="dark"] .app-big-tile:hover { box-shadow: 0 0 0 1px rgba(59,130,246,0.3), var(--shadow-md), 0 0 24px rgba(59,130,246,0.15); } .app-big-tile-icon { font-size: 2rem; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--color-accent-soft); } .app-big-tile h3 { margin: 0; font-size: 1.2rem; } .app-big-tile p { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.5; } /* Articles */ .article .cover { width: 100%; max-height: 400px; object-fit: cover; border-radius: var(--radius-lg); margin: 1rem 0; } .prose { max-width: 720px; } .prose img { max-width: 100%; border-radius: var(--radius-md); } .prose p { margin: 1rem 0; } /* Renders Quill's editor output (lists, fonts, sizes, alignment) outside the editor itself — Quill marks these with data-attributes/classes instead of native list-style/font CSS, so without this the public site would show bullet lists as numbered lists, custom fonts as plain text, etc. */ .prose ol, .prose ul { padding-left: 1.5em; margin: 0.75em 0; } .prose li { margin-bottom: 0.3em; } .prose li[data-list] { list-style: none; position: relative; } .prose li[data-list="bullet"]::before { content: '•'; position: absolute; left: -1.1em; color: var(--color-text-muted); } .prose ol { counter-reset: prose-list; } .prose li[data-list="ordered"] { counter-increment: prose-list; } .prose li[data-list="ordered"]::before { content: counter(prose-list) '.'; position: absolute; left: -1.5em; width: 1.1em; text-align: right; color: var(--color-text-muted); } .prose .ql-ui { display: none; } .prose blockquote { margin: 1rem 0; padding: 0.6rem 1rem; border-left: 3px solid var(--color-accent); color: var(--color-text-muted); } .prose pre { background: var(--color-surface-2); border-radius: var(--radius-sm); padding: 0.85rem 1rem; overflow-x: auto; font-family: 'Courier New', monospace; font-size: 0.88em; } .prose .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; } .prose .ql-font-monospace { font-family: 'Courier New', monospace; } .prose .ql-size-small { font-size: 0.75em; } .prose .ql-size-large { font-size: 1.5em; } .prose .ql-size-huge { font-size: 2.5em; } .prose .ql-align-center { text-align: center; } .prose .ql-align-right { text-align: right; } .prose .ql-align-justify { text-align: justify; } .prose .ql-indent-1 { padding-left: 3em; } .prose .ql-indent-2 { padding-left: 6em; } .prose .ql-indent-3 { padding-left: 9em; } .pagination { display: flex; gap: 0.5rem; margin-top: 2rem; } .pagination a { padding: 0.5rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text); background: var(--color-surface); font-weight: 600; font-size: 0.88rem; } .pagination a.active { background: var(--gradient-accent); border-color: transparent; color: #fff; } /* Video list (courses) */ .video-list { display: flex; flex-direction: column; gap: 2rem; margin-top: 1.5rem; } .video-embed { position: relative; } .video-embed iframe, .video-embed video { width: 100%; aspect-ratio: 16/9; border: none; border-radius: var(--radius-lg); background: #000; box-shadow: var(--shadow-md); } .badge { padding: 0.25rem 0.65rem; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .badge-published { background: var(--color-success-soft); color: var(--color-success); } .badge-draft { background: var(--color-warning-soft); color: var(--color-warning); } .course-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; } .course-header .hero-actions { margin-top: 0.5rem; } .segment-title { margin-top: 2.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-border); } .video-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.6rem; flex-wrap: wrap; } .video-notes, .video-comments { margin-top: 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.8rem 1rem; background: var(--color-surface); } .video-notes summary, .video-comments summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; } .note-textarea { width: 100%; margin-top: 0.6rem; padding: 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-family: inherit; resize: vertical; } .comment-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.75rem 0; } .comment-item { padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; } .comment-item p { margin: 0.3rem 0 0; } .comment-form textarea { width: 100%; padding: 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-family: inherit; resize: vertical; margin-bottom: 0.5rem; } /* ============================================================ Course player (LinkedIn-Learning style) ============================================================ */ .player-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.75rem; margin-top: 1.5rem; align-items: start; } @media (max-width: 960px) { .player-layout { grid-template-columns: 1fr; } } .player-video-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .player-video-wrap #ytPlayerTarget, .player-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .player-video-wrap.fade-in { animation: playerFadeIn 0.35s ease; } @keyframes playerFadeIn { from { opacity: 0.35; transform: scale(0.99); } to { opacity: 1; transform: scale(1); } } .locked-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--color-surface-2); color: var(--color-text-muted); font-weight: 600; } .locked-placeholder.hidden, #ytPlayerTarget.hidden { display: none; } .fullscreen-btn { position: absolute; bottom: 0.75rem; right: 0.75rem; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; font-size: 1rem; z-index: 5; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .fullscreen-btn:hover { background: rgba(0,0,0,0.8); } .player-video-wrap:fullscreen #ytPlayerTarget { height: 100%; } .player-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.9rem 0; flex-wrap: wrap; } .player-main h2 { margin-top: 0.5rem; } .player-sidebar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.2rem; max-height: 640px; overflow-y: auto; box-shadow: var(--shadow-sm); } .player-sidebar h3 { margin: 0 0 0.9rem; } .playlist-segment { margin-bottom: 1.1rem; } .playlist-segment h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); margin: 0 0 0.5rem; } .playlist-tile { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; padding: 0.5rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; cursor: pointer; font-family: inherit; color: var(--color-text); margin-bottom: 0.35rem; transition: background 0.12s ease, border-color 0.12s ease; } .playlist-tile:hover:not(.locked) { background: var(--color-surface-2); } .playlist-tile.active { background: var(--color-accent-soft); border-color: var(--color-accent); } .playlist-tile.locked { opacity: 0.5; cursor: not-allowed; } .playlist-tile-thumb { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .playlist-tile-info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .playlist-tile-title { font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .playlist-tile-badges { display: flex; gap: 0.3rem; align-items: center; font-size: 0.72rem; } .course-side-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; } @media (max-width: 780px) { .course-side-widgets { grid-template-columns: 1fr; } } /* Forms */ .stacked-form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 560px; } .stacked-form label, .stacked-form .form-field { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 600; font-size: 0.88rem; } .stacked-form input, .stacked-form textarea, .stacked-form select { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; font-weight: normal; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .stacked-form input:focus, .stacked-form textarea:focus, .stacked-form select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } .stacked-form textarea { resize: vertical; } .inline-form { display: inline-flex; gap: 0.5rem; align-items: center; } .editor-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; flex-wrap: wrap; } /* Quill rich-text editor, themed to match the site — shared by every rich-text field (blog post content, course description, video description, ...) */ .rich-toolbar { background: var(--color-surface-2); border: 1px solid var(--color-border); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 0.5rem; } .rich-toolbar #insertImageBtn { background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: 1rem; padding: 2px 6px; } .rich-toolbar #insertImageBtn:hover { background: var(--color-accent-soft); } .rich-editor { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); min-height: 320px; font-family: inherit; } .rich-editor .ql-editor { min-height: 320px; font-size: 0.95rem; color: var(--color-text); } .rich-editor.rich-editor-sm, .rich-editor.rich-editor-sm .ql-editor { min-height: 140px; } .rich-editor .ql-editor.ql-blank::before { color: var(--color-text-muted); font-style: normal; } .rich-toolbar .ql-stroke { stroke: var(--color-text-muted); } .rich-toolbar .ql-fill { fill: var(--color-text-muted); } .rich-toolbar .ql-picker-label { color: var(--color-text-muted); } .rich-toolbar button:hover .ql-stroke, .rich-toolbar button.ql-active .ql-stroke, .rich-toolbar .ql-picker-label:hover { stroke: var(--color-accent); } .rich-toolbar button:hover .ql-fill, .rich-toolbar button.ql-active .ql-fill { fill: var(--color-accent); } .rich-toolbar .ql-picker-options { background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); } .rich-toolbar .ql-picker-item:hover { color: var(--color-accent); } .cover-preview { width: 220px; height: 130px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border); margin: 0.4rem 0; display: block; } .cover-preview.hidden { display: none; } .alert { padding: 0.9rem 1.1rem; border-radius: var(--radius-md); margin-bottom: 1rem; font-size: 0.92rem; } .alert-success { background: var(--color-success-soft); color: var(--color-success); border: 1px solid transparent; } .alert-error { background: var(--color-danger-soft); color: var(--color-danger); border: 1px solid transparent; } .alert-info { background: var(--color-accent-soft); color: var(--color-accent); border: 1px solid transparent; } .alert-error ul { margin: 0; padding-left: 1.2rem; } /* Contact + booking */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 1.5rem; } @media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; } } .contact-form-wrap, .booking-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); } .course-book-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--color-accent-soft); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin: 1.25rem 0; } .course-book-banner p { margin: 0; font-weight: 600; color: var(--color-text); } /* Footer */ .site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); margin-top: 3rem; } .footer-inner { display: flex; justify-content: space-between; gap: 2rem; padding: 2.75rem 1.5rem; flex-wrap: wrap; } .footer-subscribe h3 { margin: 0 0 0.4rem; } .subscribe-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; } .subscribe-form input { flex: 1; min-width: 0; padding: 0.65rem 0.9rem; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); } .subscribe-form button { border-radius: var(--radius-full); border: none; padding: 0.68rem 1.5rem; font-family: inherit; font-size: 0.92rem; font-weight: 700; color: #fff; background: #ef4444; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; animation: subscribePulse 2.2s ease-in-out infinite; } .subscribe-form button:hover { background: #dc2626; transform: translateY(-1px); animation-play-state: paused; } @keyframes subscribePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); } 50% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } } @media (prefers-reduced-motion: reduce) { .subscribe-form button { animation: none; } } .footer-meta { color: var(--color-text-muted); font-size: 0.85rem; text-align: right; } @media (max-width: 600px) { .footer-meta { text-align: left; } } .footer-social { display: flex; gap: 0.6rem; margin-top: 0.9rem; justify-content: flex-end; } @media (max-width: 600px) { .footer-social { justify-content: flex-start; } } .footer-social-link { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border); transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .footer-social-link:hover { color: var(--color-accent); border-color: var(--color-accent); transform: translateY(-3px) scale(1.06); box-shadow: var(--shadow-sm); } /* ============================================================ Social share bar (blog posts, courses, photography) ============================================================ */ .share-bar { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin: 1.5rem 0; } .share-label { font-weight: 700; font-size: 0.85rem; color: var(--color-text-muted); margin-right: 0.15rem; } .share-btn { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border); cursor: pointer; padding: 0; transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .share-btn:hover { color: var(--color-accent); border-color: var(--color-accent); transform: translateY(-3px) scale(1.06); box-shadow: var(--shadow-sm); } .share-copy-status { font-size: 0.82rem; color: var(--color-success, var(--color-accent)); } /* Chatbot widget */ #chatbot-widget { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; max-width: calc(100vw - 2rem); } #chatbot-toggle { width: 58px; height: 58px; border-radius: 50%; border: none; background: var(--gradient-accent); color: #fff; font-size: 1.4rem; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform 0.15s ease; } #chatbot-toggle:hover { transform: scale(1.06); } #chatbot-panel { position: absolute; bottom: 74px; right: 0; width: 330px; max-width: calc(100vw - 2rem); max-height: 460px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); } #chatbot-panel.hidden { display: none; } @media (max-width: 420px) { #chatbot-widget { right: 1rem; bottom: 1rem; } #chatbot-panel { max-height: 70vh; } } .chatbot-header { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--color-border); font-weight: 700; background: var(--color-surface-2); } .chatbot-header button { background: none; border: none; color: var(--color-text-muted); font-size: 1.3rem; cursor: pointer; } #chatbot-messages { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.9rem; } .chat-msg { padding: 0.55rem 0.8rem; border-radius: var(--radius-md); max-width: 85%; line-height: 1.4; } .chat-msg.user { align-self: flex-end; background: var(--gradient-accent); color: #fff; } .chat-msg.assistant { align-self: flex-start; background: var(--color-surface-2); } #chatbot-form { display: flex; border-top: 1px solid var(--color-border); } #chatbot-input { flex: 1; border: none; background: transparent; color: var(--color-text); padding: 0.8rem 1rem; font-family: inherit; } #chatbot-input:focus { outline: none; } #chatbot-form button { border: none; background: var(--gradient-accent); color: #fff; padding: 0 1.2rem; cursor: pointer; font-weight: 600; } /* ============================================================ Apps (quiz/calculators) ============================================================ */ .app-page { max-width: 980px; } /* Compact "selection button" tiles for the Applications index (replaces big flat cards) */ .app-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; margin-top: 1.5rem; max-width: 820px; } .app-tile { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s ease, border-color 0.18s ease; } .app-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-accent); color: var(--color-text); } html[data-theme="dark"] .app-tile:hover { box-shadow: 0 0 0 1px rgba(59,130,246,0.3), var(--shadow-md), 0 0 18px rgba(59,130,246,0.15); } .app-tile-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--color-accent-soft); } .app-tile-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .app-tile-title { font-weight: 700; font-size: 0.95rem; } .app-tile-desc { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.35; } .app-tile-arrow { margin-left: auto; flex-shrink: 0; color: var(--color-text-muted); font-weight: 700; opacity: 0; transform: translateX(-4px); transition: opacity 0.18s ease, transform 0.18s ease; } .app-tile:hover .app-tile-arrow { opacity: 1; transform: translateX(0); color: var(--color-accent); } .app-controls { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-end; margin: 1.25rem 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem; } .app-controls label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; } .app-controls input, .app-controls select { padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); } .app-actions { display: flex; gap: 0.75rem; margin: 1rem 0; flex-wrap: wrap; align-items: center; } .table-scroll { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); } .app-table { width: 100%; border-collapse: collapse; min-width: 780px; background: var(--color-surface); } .app-table th { background: var(--color-surface-2); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); } .app-table th, .app-table td { border-bottom: 1px solid var(--color-border); padding: 0.65rem 0.7rem; text-align: left; font-size: 0.88rem; } .app-table input, .app-table select { width: 100%; padding: 0.35rem; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); border-radius: 6px; } .app-summary { margin-top: 1.5rem; display: flex; gap: 2rem; flex-wrap: wrap; } .link-danger { background: none; border: none; color: var(--color-danger); cursor: pointer; font-weight: 600; font-size: 0.85rem; } /* Quiz */ .quiz-head { display: flex; justify-content: space-between; align-items: center; } .quiz-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; margin-top: 1rem; box-shadow: var(--shadow-sm); } .quiz-box.hidden { display: none; } .quiz-meta { display: flex; justify-content: space-between; font-weight: 700; color: var(--color-text-muted); margin-bottom: 0.5rem; font-size: 0.85rem; } .quiz-level { color: var(--color-accent); font-size: 0.85rem; margin: 0 0 0.5rem; font-weight: 600; } .quiz-options { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; } .quiz-option { text-align: left; padding: 0.8rem 1.1rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); cursor: pointer; font-size: 0.95rem; transition: all 0.12s ease; } .quiz-option:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-accent-soft); } .quiz-option.correct { border-color: var(--color-success); background: var(--color-success-soft); } .quiz-option.incorrect { border-color: var(--color-danger); background: var(--color-danger-soft); } /* DISC */ .disc-questions.hidden, #answeredCount.hidden, #submitBtn.hidden, #resultsBox.hidden, #certBox.hidden, #startBox.hidden { display: none; } .disc-question { padding: 1rem 0; border-bottom: 1px solid var(--color-border); } .disc-scale { display: flex; gap: 1.25rem; margin-top: 0.5rem; flex-wrap: wrap; } .disc-scale label { display: flex; gap: 0.35rem; align-items: center; font-size: 0.9rem; } .certificate { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .cert-inner { width: 100%; max-width: 780px; aspect-ratio: 297 / 210; box-sizing: border-box; border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.5rem, 5vw, 4rem); text-align: center; background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; } .cert-inner::before { content: ''; position: absolute; inset: 10px; border: 2px solid var(--color-accent); border-radius: calc(var(--radius-lg) - 6px); opacity: 0.5; pointer-events: none; } .cert-inner::after { content: ''; position: absolute; inset: 0; background: var(--gradient-accent); opacity: 0.05; pointer-events: none; } .cert-top { margin-bottom: 0.4rem; } .cert-seal { width: 52px; height: 52px; object-fit: contain; margin-bottom: 0.5rem; } .cert-kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 700; color: var(--color-accent); margin: 0 0 0.3rem; } .cert-title { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.55rem); } .cert-awarded { margin: 0.5rem 0 0; color: var(--color-text-muted); font-size: 0.85rem; } .cert-name { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 800; color: var(--color-accent); margin: 0.25rem 0; } .cert-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; margin: 1.1rem 0 0.4rem; } .cert-fact { display: flex; flex-direction: column; gap: 0.15rem; } .cert-fact span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .cert-fact strong { font-size: 0.92rem; } .cert-tip { font-size: 0.82rem; color: var(--color-text-muted); margin: 0.5rem 0 0; } .cert-bottom { margin-top: auto; padding-top: 1.5rem; display: flex; justify-content: center; } .cert-sign { text-align: center; } .cert-sign-line { font-weight: 700; font-family: 'Segoe Script', cursive; font-size: 1.15rem; border-bottom: 1px solid var(--color-border); padding: 0 1.5rem 0.3rem; } .cert-sign-title { margin: 0.3rem 0 0; font-size: 0.72rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } @media (max-width: 600px) { .cert-inner { aspect-ratio: auto; } } @media print { .site-header, .site-footer, #chatbot-widget, .no-print { display: none !important; } body { background: #fff; color: #000; } @page { size: A4 landscape; margin: 10mm; } .certificate { margin: 0; } .cert-inner { max-width: none; width: 100%; height: 100%; box-shadow: none; page-break-inside: avoid; } } /* ============================================================ Auth / dashboard ============================================================ */ .auth-page .stacked-form { max-width: none; } .oauth-buttons { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.25rem 0; } .oauth-btn { justify-content: center; gap: 0.6rem; width: 100%; } .oauth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--color-text-muted); font-size: 0.85rem; } .oauth-divider::before, .oauth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .dash-section { margin: 2.75rem 0; } .progress-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; } .progress-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.4rem; box-shadow: var(--shadow-sm); } .progress-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.7rem; } .progress-card-head h3 { margin: 0; } .progress-bar { background: var(--color-surface-2); border-radius: var(--radius-full); height: 10px; overflow: hidden; } .progress-bar-fill { background: var(--gradient-accent); height: 100%; border-radius: var(--radius-full); transition: width 0.3s; } .progress-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.7rem; } /* Modern course tiles with circular progress ring */ .course-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1rem; } .course-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; } .course-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .course-tile-cover { width: 100%; height: 130px; object-fit: cover; } .course-tile-body { padding: 1.1rem 1.2rem 1.3rem; } .course-tile-body h3 { margin: 0 0 0.8rem; font-size: 1.02rem; } .course-tile-progress { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; } .course-tile-meta { display: flex; flex-direction: column; gap: 0.35rem; } .course-tile-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .progress-ring { --pct: 0; width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(from -90deg, #3b82f6, #8b5cf6 calc(var(--pct) * 3.6deg), var(--color-surface-2) calc(var(--pct) * 3.6deg) 360deg); display: flex; align-items: center; justify-content: center; } .progress-ring-inner { width: 46px; height: 46px; border-radius: 50%; background: var(--color-surface); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; } .dash-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .dash-stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.3rem; box-shadow: var(--shadow-sm); } /* Layout with sidebar (dashboard, course page) */ .with-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; } @media (max-width: 900px) { .with-sidebar { grid-template-columns: 1fr; } } .blog-sidebar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.4rem; position: sticky; top: 90px; box-shadow: var(--shadow-sm); } .blog-sidebar h3 { margin: 0 0 1rem; } .blog-sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .blog-sidebar-list li { padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .blog-sidebar-list li:last-child { border-bottom: none; padding-bottom: 0; } .blog-sidebar-list a { font-weight: 600; font-size: 0.92rem; color: var(--color-text); } .blog-sidebar-list a:hover { color: var(--color-accent); } .blog-sidebar-list p { margin: 0.3rem 0 0; font-size: 0.82rem; } .sidebar-stack { display: flex; flex-direction: column; gap: 1.25rem; } .photo-sidebar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.4rem; box-shadow: var(--shadow-sm); } .photo-sidebar h3 { margin: 0 0 1rem; } .photo-sidebar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.9rem; } .photo-sidebar-item { display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; } .photo-sidebar-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.15s ease; } .photo-sidebar-item:hover img { transform: scale(1.08); } .avatar-upload-row { display: flex; align-items: center; gap: 1.25rem; margin: 1.25rem 0; flex-wrap: wrap; } .avatar-preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-border); } /* ============================================================ Admin ============================================================ */ .admin-body { margin: 0; background: var(--color-bg); } .admin-shell { display: flex; min-height: 100vh; } .admin-sidebar { width: 230px; flex-shrink: 0; background: var(--color-surface); border-right: 1px solid var(--color-border); padding: 1.75rem 1.1rem; display: flex; flex-direction: column; gap: 1.75rem; position: sticky; top: 0; height: 100vh; overflow: hidden; /* brand + footer stay pinned; the nav list scrolls internally when it's tall */ } .admin-sidebar .brand { padding: 0 0.5rem; flex-shrink: 0; } .admin-sidebar nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-height: 0; overflow-y: auto; } .admin-sidebar nav a { color: var(--color-text-muted); padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.92rem; display: flex; align-items: center; gap: 0.6rem; } .admin-sidebar nav a:hover { background: var(--color-accent-soft); color: var(--color-accent); } .admin-content { flex: 1; padding: 2.25rem 2.75rem; max-width: 1180px; min-width: 0; } .admin-login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--color-bg); padding: 1.5rem; } .admin-login-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2.75rem; width: 360px; max-width: 100%; box-shadow: var(--shadow-lg); } /* Hamburger toggle (admin sidebar) — hidden on desktop */ .admin-nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; position: fixed; top: 0.85rem; left: 1rem; z-index: 120; box-shadow: var(--shadow-md); } .admin-nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--color-text); transition: transform 0.25s ease, opacity 0.2s ease; } .admin-nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .admin-nav-toggle.open span:nth-child(2) { opacity: 0; } .admin-nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .admin-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 105; opacity: 0; transition: opacity 0.25s ease; } .admin-nav-overlay.open { display: block; opacity: 1; } @media (max-width: 860px) { .admin-nav-toggle { display: flex; } .admin-sidebar { position: fixed; top: 0; left: 0; z-index: 110; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow-lg); } .admin-sidebar.open { transform: translateX(0); } .admin-content { padding: 4.75rem 1.25rem 2rem; } } @media (max-width: 500px) { .admin-content { padding: 4.75rem 1rem 2rem; } } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.35rem; display: flex; flex-direction: column; gap: 0.3rem; box-shadow: var(--shadow-sm); } .stat-num { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; } /* Modern tiles (admin overview) */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1.25rem 0; } .tile { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; box-shadow: var(--shadow-sm); transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease, border-color 0.2s ease; color: inherit; text-decoration: none; position: relative; overflow: hidden; } a.tile { cursor: pointer; } .tile::before { content: ''; position: absolute; inset: 0; background: var(--gradient-accent); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .tile:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-md); border-color: var(--color-accent); color: inherit; } .tile:hover::before { opacity: 0.05; } html[data-theme="dark"] .tile:hover { box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35), var(--shadow-md), 0 0 22px rgba(139, 92, 246, 0.18); } a.tile:active { transform: translateY(-1px) scale(1.005); } .tile-num { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; position: relative; } .tile-label { color: var(--color-text-muted); font-size: 0.85rem; font-weight: 600; position: relative; } .tile-accent { border-left-color: var(--color-accent-2); } .tile-success { border-left-color: var(--color-success); } .tile-warning { border-left-color: var(--color-warning); } .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.25rem 0 1.5rem; } @media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } } .chart-grid canvas { max-height: 260px; } .admin-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 900px) { .admin-panels { grid-template-columns: 1fr; } } .panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.4rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); } .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.75rem; } .admin-table { width: 100%; border-collapse: collapse; margin-top: 1rem; } .admin-table th { text-align: left; padding: 0.7rem 0.6rem; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); } .admin-table td { text-align: left; padding: 0.75rem 0.6rem; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; } .admin-table tr:hover td { background: var(--color-surface-2); } @media (max-width: 720px) { .admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .admin-table th, .admin-table td { white-space: nowrap; } } .row-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; } .message-list { display: flex; flex-direction: column; gap: 1rem; } /* Split-pane contact inbox (Outlook/Gmail style) */ .mail-shell { display: grid; grid-template-columns: 340px 1fr; margin-top: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; min-height: 600px; background: var(--color-surface); box-shadow: var(--shadow-sm); } .mail-list { border-right: 1px solid var(--color-border); overflow-y: auto; max-height: 78vh; } .mail-list-item { display: block; width: 100%; text-align: left; padding: 0.9rem 1.1rem; border: none; border-bottom: 1px solid var(--color-border); background: none; cursor: pointer; font-family: inherit; color: var(--color-text); transition: background 0.12s ease; } .mail-list-item:hover { background: var(--color-surface-2); } .mail-list-item.active { background: var(--color-accent-soft); } .mail-list-item.is-unread .mail-list-name, .mail-list-item.is-unread .mail-list-subject { font-weight: 800; } .mail-list-item-top { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; margin-bottom: 0.2rem; } .mail-list-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-list-date { color: var(--color-text-muted); font-size: 0.75rem; flex-shrink: 0; } .mail-list-subject { font-size: 0.87rem; margin-bottom: 0.2rem; } .mail-list-preview { font-size: 0.8rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-list-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } .priority-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .priority-dot.priority-low { background: var(--color-text-muted); } .priority-dot.priority-normal { background: var(--color-accent); } .priority-dot.priority-high { background: var(--color-danger); } .mail-status-badge { padding: 0.15rem 0.55rem; border-radius: var(--radius-full); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .mail-status-badge.status-unread { background: var(--color-accent-soft); color: var(--color-accent); } .mail-status-badge.status-read { background: var(--color-surface-2); color: var(--color-text-muted); } .mail-status-badge.status-replied { background: var(--color-success-soft); color: var(--color-success); } .mail-status-badge.status-archived { background: var(--color-warning-soft); color: var(--color-warning); } .mail-reading-pane { padding: 1.75rem; overflow-y: auto; max-height: 78vh; } .mail-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 400px; gap: 0.75rem; color: var(--color-text-muted); } .mail-pane-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .mail-pane-subject { margin: 0 0 0.3rem; } .mail-priority-select { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); } .mail-priority-select select { padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); } .mail-quick-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .mail-pane-body { padding: 1.1rem; background: var(--color-surface-2); border-radius: var(--radius-md); margin-bottom: 1.5rem; line-height: 1.6; } .mail-reply-form label { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 600; font-size: 0.88rem; } .mail-reply-form textarea { width: 100%; padding: 0.7rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-family: inherit; resize: vertical; } .mail-reply-actions { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.75rem; } .mail-pane-error { margin-bottom: 1rem; } @media (max-width: 860px) { .mail-shell { grid-template-columns: 1fr; } .mail-list { max-height: 320px; border-right: none; border-bottom: 1px solid var(--color-border); } } .bulk-actions-bar { display: flex; align-items: center; gap: 0.9rem; margin: 1rem 0; padding: 0.9rem 1.1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 200; } .modal-overlay.hidden { display: none; } .modal-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; width: 480px; max-width: 92vw; box-shadow: var(--shadow-lg); } /* ============================================================ Photography page ============================================================ */ .tab-bar { display: flex; gap: 0.5rem; margin: 1.5rem 0 2rem; border-bottom: 1px solid var(--color-border); } .tab-btn { background: none; border: none; padding: 0.75rem 1.2rem; font-weight: 700; font-size: 0.95rem; color: var(--color-text-muted); cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s ease, border-color 0.15s ease; } .tab-btn:hover { color: var(--color-text); } .tab-btn.active { color: var(--color-accent); border-bottom-color: var(--color-accent); } .tab-panel { display: none; } .tab-panel.active { display: block; } .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; } .photo-item { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; } .photo-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .photo-item img { width: 100%; height: 260px; object-fit: cover; display: block; } .photo-caption { padding: 0.9rem 1rem; } .photo-caption h3 { margin: 0 0 0.2rem; font-size: 1rem; } .photo-caption p { margin: 0; color: var(--color-text-muted); font-size: 0.85rem; } /* ============================================================ Blog tag filter ============================================================ */ .tag-filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0.5rem; } .tag-pill { padding: 0.45rem 1.05rem; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); font-weight: 600; font-size: 0.85rem; transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; position: relative; } .tag-pill:hover { color: var(--color-accent); border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .tag-pill.active { background: var(--gradient-accent); color: #fff; border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-1px); } /* ============================================================ Scroll-reveal animation (applied broadly via main.js) ============================================================ */ .reveal-init { opacity: 0; filter: blur(4px); transition: opacity 0.55s ease, filter 0.55s ease; } .reveal-init.is-visible { opacity: 1; filter: blur(0); } @media (prefers-reduced-motion: reduce) { .reveal-init { opacity: 1 !important; filter: none !important; transition: none !important; } html { scroll-behavior: auto; } } body { animation: pageFadeIn 0.35s ease; } @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ Auth / profile card shell (login, signup, reset, profile) ============================================================ */ .auth-shell { display: flex; align-items: center; justify-content: center; padding: 2rem 0; } .auth-card { width: 100%; max-width: 460px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .auth-card::before { content: ''; position: absolute; top: -70px; right: -70px; width: 200px; height: 200px; border-radius: 50%; background: var(--gradient-accent); opacity: 0.12; filter: blur(6px); pointer-events: none; } .auth-card > * { position: relative; } .auth-card .stacked-form { max-width: none; } .auth-back-link { margin-bottom: 1rem; } .profile-card { max-width: 620px; } /* ============================================================ Photography — masonry gallery + lightbox ============================================================ */ .gallery-filter-bar { margin-bottom: 1.75rem; } .photo-masonry { columns: 1; column-gap: 1.25rem; margin-top: 1rem; } @media (min-width: 640px) { .photo-masonry { columns: 2; } } @media (min-width: 1024px) { .photo-masonry { columns: 3; } } .photo-card { display: block; width: 100%; break-inside: avoid; margin: 0 0 1.25rem; padding: 0; border: none; border-radius: var(--radius-lg); overflow: hidden; position: relative; cursor: pointer; background: var(--color-surface-2); box-shadow: var(--shadow-sm); transition: box-shadow 0.3s ease; } .photo-card:hover { box-shadow: var(--shadow-lg); } .photo-card.is-hidden { display: none; } .photo-card img { width: 100%; display: block; object-fit: cover; transition: transform 0.5s ease; } .photo-card:hover img { transform: scale(1.03); } .photo-card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; padding: 1.5rem 1.1rem 1rem; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0) 75%); opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; } .photo-card:hover .photo-card-overlay, .photo-card:focus-visible .photo-card-overlay { opacity: 1; transform: translateY(0); } .photo-card-overlay h3 { margin: 0 0 0.2rem; font-size: 1rem; color: #fff; } .photo-card-location { margin: 0 0 0.3rem; font-size: 0.8rem; color: rgba(255,255,255,0.85); } .photo-card-exif { margin: 0; font-size: 0.74rem; color: rgba(255,255,255,0.75); letter-spacing: 0.01em; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; } .lightbox.open { opacity: 1; visibility: visible; } .lightbox-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem; color: #fff; } .lightbox-counter { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.75); font-variant-numeric: tabular-nums; } .lightbox-close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.15s ease; } .lightbox-close:hover { background: rgba(255,255,255,0.16); transform: rotate(90deg); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.15s ease; } .lightbox-nav:hover { background: rgba(255,255,255,0.18); transform: translateY(-50%) scale(1.08); } .lightbox-prev { left: 1.25rem; } .lightbox-next { right: 1.25rem; } .lightbox-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 4.5rem 2rem; min-height: 0; } .lightbox-content img { max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .lightbox-caption { text-align: center; margin-top: 1.1rem; color: #fff; max-width: 640px; } .lightbox-caption h3 { margin: 0 0 0.3rem; color: #fff; font-size: 1.05rem; } .lightbox-caption p { margin: 0; color: rgba(255,255,255,0.7); font-size: 0.85rem; } #lightbox-share-bar { justify-content: center; margin: 0.9rem auto 0; } #lightbox-share-bar .share-label { color: rgba(255,255,255,0.6); } #lightbox-share-bar .share-btn { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); } #lightbox-share-bar .share-btn:hover { background: rgba(255,255,255,0.22); color: #fff; border-color: rgba(255,255,255,0.4); transform: translateY(-3px) scale(1.06); } #lightbox-share-bar .share-copy-status { color: #7dd3fc; } @media (max-width: 640px) { .lightbox-content { padding: 0 1rem 1.5rem; } .lightbox-nav { width: 40px; height: 40px; font-size: 1.5rem; } .lightbox-prev { left: 0.5rem; } .lightbox-next { right: 0.5rem; } }