/* ======================================================== STYLE.CSS – Trọng Hiếu Bio Pure CSS, no framework. Uses CSS custom properties for light/dark theming toggled via .dark on . ======================================================== */ /* ---------- Reset & Base ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ---------- Design Tokens ---------- */ :root { /* Light palette */ --bg-start: #e0e7ff; --bg-end: #f8e8ff; --card-bg: transparent; --card-border: rgba(255, 255, 255, 0.35); --card-shadow: 0 18px 45px rgba(0, 0, 0, 0.18); --text-primary: #1e1b3a; --text-secondary: #5a5478; --text-muted: #8882a0; --accent: #6c5ce7; --tagline-color: #8b7fc7; --accent-soft: transparent; --btn-hover-lift: 0 14px 30px rgba(0, 0, 0, 0.20); --status-bg: transparent; --status-border: rgba(255, 255, 255, 0.28); --divider: rgba(0, 0, 0, 0.06); --qr-bg: #ffffff; --qr-border: #e2dff0; --toggle-bg: transparent; --toggle-color: #333; --page-bg-image: url("images/lightbackgroud.png"); --page-bg-overlay: rgba(255, 255, 255, 0.03); --blob-1: rgba(108, 92, 231, 0.18); --blob-2: rgba(162, 130, 255, 0.14); --blob-3: rgba(255, 170, 210, 0.13); } .dark { --bg-start: #0c0a1d; --bg-end: #18122b; --card-bg: transparent; --card-border: rgba(255, 255, 255, 0.22); --card-shadow: 0 22px 52px rgba(0, 0, 0, 0.36); --text-primary: #eae6ff; --text-secondary: #b3aed0; --text-muted: #7d78a0; --accent: #a78bfa; --tagline-color: #c4b5fd; --accent-soft: transparent; --btn-hover-lift: 0 14px 34px rgba(0, 0, 0, 0.30); --status-bg: transparent; --status-border: rgba(255, 255, 255, 0.12); --divider: rgba(255, 255, 255, 0.06); --qr-bg: #1e1a35; --qr-border: #2e2852; --toggle-bg: transparent; --toggle-color: #eae6ff; --page-bg-image: url("images/darkbackgroud.png"); --page-bg-overlay: rgba(0, 0, 0, 0.06); --blob-1: rgba(108, 92, 231, 0.10); --blob-2: rgba(162, 130, 255, 0.08); --blob-3: rgba(255, 130, 190, 0.06); } /* ---------- Body & Background ---------- */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: linear-gradient(var(--page-bg-overlay), var(--page-bg-overlay)), var(--page-bg-image) center / cover fixed no-repeat; color: var(--text-primary); min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 48px 16px; overflow-x: hidden; transition: background 0.4s ease, color 0.4s ease; } /* Floating blobs */ .blob { display: none; position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; animation: blobDrift 18s ease-in-out infinite alternate; } .blob--1 { width: 380px; height: 380px; background: var(--blob-1); top: -80px; left: -60px; } .blob--2 { width: 320px; height: 320px; background: var(--blob-2); bottom: -40px; right: -40px; animation-delay: -6s; } .blob--3 { width: 260px; height: 260px; background: var(--blob-3); top: 50%; left: 60%; animation-delay: -12s; } @keyframes blobDrift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(30px, -30px) scale(1.12); } } /* ---------- Theme Toggle ---------- */ .theme-toggle { position: fixed; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--card-border); background: var(--toggle-bg); color: var(--toggle-color); font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease; } .theme-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } .theme-toggle:active { transform: scale(0.95); } a, button, .link-btn, .theme-toggle { -webkit-tap-highlight-color: transparent; } a:focus, a:active, button:focus, button:active, .link-btn:focus, .link-btn:active, .theme-toggle:focus, .theme-toggle:active { outline: none; } a:focus-visible, button:focus-visible, .link-btn:focus-visible, .theme-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.58); outline-offset: 3px; box-shadow: 0 12px 28px rgba(40, 28, 90, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .dark a:focus-visible, .dark button:focus-visible, .dark .link-btn:focus-visible, .dark .theme-toggle:focus-visible { outline-color: rgba(255, 255, 255, 0.42); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.16); } /* ---------- Bio Card ---------- */ .bio-card { position: relative; z-index: 10; width: 100%; max-width: 520px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 32px; padding: 36px 32px 28px; box-shadow: var(--card-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; animation: cardEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .bio-card, .profile-name, .profile-tagline, .bio-intro, .status-box, .link-btn, .link-group__title, .site-footer, .album-title, .album-subtitle, .album-back { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75), 0 2px 8px rgba(255, 255, 255, 0.35); } .dark .bio-card, .dark .profile-name, .dark .profile-tagline, .dark .bio-intro, .dark .status-box, .dark .link-btn, .dark .link-group__title, .dark .site-footer, .dark .album-title, .dark .album-subtitle, .dark .album-back { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.78), 0 2px 9px rgba(0, 0, 0, 0.48); } @keyframes cardEnter { from { opacity: 0; transform: translateY(30px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- Profile Header ---------- */ .profile-header { text-align: center; margin-bottom: 18px; } .avatar-ring { width: 120px; height: 120px; margin: 0 auto 16px; border-radius: 50%; padding: 4px; background: linear-gradient(135deg, var(--accent), #f093fb); box-shadow: 0 6px 24px rgba(108, 92, 231, 0.30); animation: avatarFloat 4s ease-in-out infinite; } .avatar-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 3px solid var(--card-bg); } @keyframes avatarFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .profile-name { font-size: 26px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; margin-bottom: 6px; animation: fadeSlideUp 0.6s 0.15s both; } .profile-name-btn { border: 0; background: transparent; font-family: inherit; cursor: pointer; padding: 4px 10px; border-radius: 12px; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .profile-name-btn:hover { color: var(--accent); background: transparent; transform: translateY(-1px); } .profile-name-btn:active { transform: scale(0.98); } .profile-name-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .profile-tagline { font-size: 14px; font-weight: 500; color: var(--tagline-color); letter-spacing: 0.2px; animation: fadeSlideUp 0.6s 0.25s both; } /* ---------- Bio Intro ---------- */ .bio-intro { text-align: center; padding: 0 4px; margin-bottom: 24px; animation: fadeSlideUp 0.6s 0.35s both; } .bio-intro p { font-size: 14px; line-height: 1.7; color: var(--text-secondary); } .bio-intro strong { color: var(--text-primary); font-weight: 600; } /* ---------- Status Box ---------- */ .status-box { display: flex; align-items: flex-start; gap: 12px; background: var(--status-bg); border: 1px solid var(--status-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; animation: fadeSlideUp 0.6s 0.4s both; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14); backdrop-filter: none; -webkit-backdrop-filter: none; } .status-label { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; flex-shrink: 0; } .status-text { font-size: 13px; line-height: 1.55; color: var(--text-secondary); font-weight: 600; } /* ---------- Link Groups ---------- */ .link-group { margin-bottom: 16px; animation: fadeSlideUp 0.6s 0.45s both; } .link-group:nth-child(5) { animation-delay: 0.50s; } .link-group:nth-child(6) { animation-delay: 0.55s; } .link-group:nth-child(7) { animation-delay: 0.60s; } .link-group__title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 10px; padding-left: 2px; } .link-group__list { display: flex; flex-direction: column; gap: 10px; } /* ---------- Link Buttons ---------- */ .link-btn { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 14px; text-decoration: none; font-size: 15px; font-weight: 600; color: var(--text-primary); background: var(--accent-soft); border: 1px solid var(--card-border); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14); backdrop-filter: none; -webkit-backdrop-filter: none; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease; position: relative; overflow: hidden; } .link-btn i { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; } .link-btn:hover { transform: translateY(-3px); box-shadow: var(--btn-hover-lift); border-color: var(--card-border); } .link-btn:active { transform: translateY(0) scale(0.98); } /* Ripple on hover */ .link-btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.18) 0%, transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .link-btn:hover::after { opacity: 1; } /* Per-platform accent tints */ .link-btn--email { --tint: #e74c3c; } .link-btn--zalo { --tint: #0068ff; } .link-btn--facebook { --tint: #1877f2; } .link-btn--instagram { --tint: #e1306c; } .link-btn--linkedin { --tint: #0a66c2; } .link-btn--github { --tint: #6e40c9; } .link-btn--life { --tint: #e84393; } .link-btn--email i { color: #e74c3c; } .link-btn--zalo i { color: #0068ff; } .link-btn--facebook i { color: #1877f2; } .link-btn--instagram i { color: #e1306c; } .link-btn--linkedin i { color: #0a66c2; } .link-btn--github i { color: #6e40c9; } .link-btn--life i { color: #e84393; } .link-btn:hover { background: transparent; } .dark .link-btn:hover { background: transparent; } /* ---------- QR Section ---------- */ .qr-section { text-align: center; padding-top: 4px; margin-bottom: 28px; animation: fadeSlideUp 0.6s 0.65s both; } .qr-section__title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 14px; } .qr-frame { display: inline-block; padding: 10px; background: var(--qr-bg); border: 1px solid var(--qr-border); border-radius: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .qr-frame:hover { transform: scale(1.04); box-shadow: 0 8px 28px rgba(108, 92, 231, 0.15); } .qr-frame img { width: 140px; height: 140px; border-radius: 10px; display: block; object-fit: contain; } /* ---------- Footer ---------- */ .site-footer { text-align: center; padding-top: 8px; animation: fadeSlideUp 0.6s 0.7s both; } .site-footer p { font-size: 12px; color: var(--text-muted); letter-spacing: 0.3px; } /* ---------- QR Lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: none; -webkit-backdrop-filter: none; } .lightbox__content { position: relative; z-index: 1; transform: scale(0.85); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .lightbox.is-open .lightbox__content { transform: scale(1); } .lightbox__img { width: 280px; height: 280px; border-radius: 20px; background: #fff; padding: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); object-fit: contain; display: block; } .lightbox__close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease, background 0.2s ease; } .lightbox__close:hover { transform: scale(1.12); background: #5a3fd4; } /* ---------- Profile Info Modal ---------- */ .profile-modal { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .profile-modal.is-open { opacity: 1; visibility: visible; } .profile-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.58); backdrop-filter: none; -webkit-backdrop-filter: none; } .profile-modal__card { position: relative; z-index: 1; width: min(100%, 420px); min-height: 220px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; padding: 26px 24px 22px; color: var(--text-primary); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); backdrop-filter: none; -webkit-backdrop-filter: none; transform: scale(0.92) translateY(18px); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .profile-modal.is-open .profile-modal__card { transform: scale(1) translateY(0); } .profile-modal__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--accent-soft); color: var(--text-primary); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .profile-modal__close:hover { background: var(--accent); color: #fff; transform: scale(1.08); } .profile-modal__title { font-size: 20px; font-weight: 700; margin-bottom: 16px; padding-right: 36px; } .profile-modal__content { min-height: 120px; display: flex; align-items: center; justify-content: center; } .profile-modal__content p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); } .profile-modal__content strong { color: var(--text-primary); } .profile-modal__empty { width: 100%; text-align: center; font-size: 16px; font-weight: 600; color: var(--text-muted); } /* ---------- Album Pages ---------- */ .album-page { max-width: 1120px; padding: 28px; } .album-header { margin-bottom: 24px; } .album-back { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-bottom: 18px; padding: 8px 10px; border-radius: 999px; color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 600; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .album-back:hover { color: var(--accent); background: transparent; transform: translateX(-3px); } .album-title { font-size: 30px; line-height: 1.2; color: var(--text-primary); margin-bottom: 8px; } .album-subtitle { max-width: 560px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); } .photo-gallery { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .photo-card { display: block; width: 100%; aspect-ratio: 4 / 5; margin: 0; padding: 0; border: 1px solid var(--card-border); border-radius: 22px; background: var(--card-bg); color: inherit; text-align: left; overflow: hidden; cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14); backdrop-filter: none; -webkit-backdrop-filter: none; transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease; } .photo-card:hover { transform: translateY(-4px); filter: brightness(1.04); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.20); } .dark .photo-card { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); } .dark .photo-card:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42); } .photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; } .photo-info { padding: 12px 14px 14px; } .photo-info h2 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .photo-info p { font-size: 12px; line-height: 1.5; color: var(--text-muted); } .photo-lightbox { position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center; padding: 22px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .photo-lightbox.is-open { opacity: 1; visibility: visible; } .photo-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: none; -webkit-backdrop-filter: none; } .photo-lightbox__content { position: relative; z-index: 1; max-width: min(960px, 100%); max-height: 92vh; transform: scale(0.94) translateY(16px); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .photo-lightbox.is-open .photo-lightbox__content { transform: scale(1) translateY(0); } .photo-lightbox__img { display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: 24px; object-fit: contain; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); } .photo-lightbox__caption { margin-top: 10px; color: #fff; text-align: center; font-size: 13px; line-height: 1.5; } .photo-lightbox__close { position: absolute; top: -14px; right: -14px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease, background 0.2s ease; } .photo-lightbox__close:hover { transform: scale(1.1); background: #5a3fd4; } .photo-pager { display: flex; justify-content: center; gap: 8px; margin-top: 18px; } .photo-pager__btn { width: 34px; height: 34px; border: 1px solid var(--card-border); border-radius: 50%; background: var(--accent-soft); color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .photo-pager__btn:hover, .photo-pager__btn.is-active { background: var(--accent); color: #fff; transform: translateY(-1px); } /* ---------- Shared Animations ---------- */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Gallery Loading/Empty State ---------- */ .gallery-loading, .gallery-empty { grid-column: 1/-1; text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 14px; line-height: 1.6; } /* ---------- Responsive ---------- */ @media (max-width: 480px) { :root { --card-bg: transparent; --card-border: rgba(255, 255, 255, 0.34); --accent-soft: transparent; --status-bg: transparent; --toggle-bg: transparent; --page-bg-image: url("images/lightbackgroudmobile.png"); } .dark { --card-bg: transparent; --card-border: rgba(255, 255, 255, 0.22); --accent-soft: transparent; --status-bg: transparent; --toggle-bg: transparent; --page-bg-image: url("images/darkbackgroudmobile.png"); } body { padding: 44px 10px 28px; } a, button, .link-btn, .life-card, .photo-card, .theme-toggle { -webkit-tap-highlight-color: transparent; } a:focus, a:focus-visible, a:active, button:focus, button:focus-visible, button:active, .link-btn:focus, .link-btn:focus-visible, .link-btn:active, .life-card:focus, .life-card:focus-visible, .life-card:active, .photo-card:focus, .photo-card:focus-visible, .photo-card:active { outline: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .link-btn:focus-visible, .life-card:focus-visible, .photo-card:focus-visible, .theme-toggle:focus-visible { transform: translateY(-2px); outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 3px; } .bio-card, .profile-name, .profile-tagline, .status-box, .link-btn, .life-title, .life-subtitle, .life-card, .album-back { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 2px 8px rgba(255, 255, 255, 0.45); } .dark .bio-card, .dark .profile-name, .dark .profile-tagline, .dark .status-box, .dark .link-btn, .dark .life-title, .dark .life-subtitle, .dark .life-card, .dark .album-back { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 9px rgba(0, 0, 0, 0.55); } .bio-card { padding: 32px 20px 28px; border-radius: 22px; background: transparent; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16); backdrop-filter: none; -webkit-backdrop-filter: none; } .dark .bio-card { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); } .link-btn, .life-card, .status-box, .profile-modal__card, .photo-card, .theme-toggle { background: rgba(255, 255, 255, 0.07); border-color: var(--card-border); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14); backdrop-filter: none; -webkit-backdrop-filter: none; } .link-btn, .life-card, .status-box { font-weight: 700; } .status-text, .life-card__desc { font-weight: 600; } .profile-tagline { color: #6d5dfc; font-weight: 700; } .dark .link-btn, .dark .life-card, .dark .status-box, .dark .profile-modal__card, .dark .photo-card, .dark .theme-toggle { background: rgba(255, 255, 255, 0.06); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26); } .link-btn:hover, .life-card:hover, .photo-card:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18); } .dark .link-btn:hover, .dark .life-card:hover, .dark .photo-card:hover { background: rgba(255, 255, 255, 0.08); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32); } .avatar-ring { width: 116px; height: 116px; } .profile-name { font-size: 22px; } .link-btn { min-height: 52px; padding: 10px 16px; font-size: 14px; border-radius: 12px; } .link-group__list { gap: 8px; } .status-box { padding: 12px 16px; gap: 10px; } .qr-frame img { width: 120px; height: 120px; } .blob { filter: blur(60px); opacity: 0.7; } .album-page { padding: 24px 14px; } .album-title { font-size: 24px; } .photo-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .photo-card { border-radius: 12px; } .photo-pager { display: none; } .photo-lightbox { padding: 14px; } .photo-lightbox__img { max-height: 78vh; border-radius: 18px; } .photo-lightbox__close { top: 8px; right: 8px; } } @media (min-width: 481px) and (max-width: 820px) { .album-page { padding: 28px 22px; } .photo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } } @media (max-width: 360px) { .bio-card { padding: 24px 16px 24px; } .status-box { flex-direction: column; gap: 6px; } } /* ---------- Toast Notification ---------- */ .toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--accent); color: #fff; padding: 12px 24px; border-radius: 12px; font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; z-index: 3000; pointer-events: none; } .toast.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ---------- Email Button Reset ---------- */ button.link-btn { width: 100%; font-family: inherit; cursor: pointer; background: var(--accent-soft); } /* ---------- Accessibility: Reduce Motion ---------- */ @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; } .blob { animation: none !important; } .avatar-ring { animation: none !important; } .profile-name, .profile-tagline, .bio-intro, .status-box, .link-group, .qr-section, .site-footer { animation: none !important; } .link-btn, .life-card, .photo-card { transition: none !important; } .lightbox, .profile-modal, .gallery-overlay, .photo-lightbox { transition: none !important; } .lightbox__content, .profile-modal__card, .gallery-panel, .photo-lightbox__content { transform: none !important; transition: none !important; } }