/** * eichhof.me — Main Stylesheet * ============================ * Reset, CSS variables, theme toggle, accessibility, * page layout, components, and responsive styles. */ /* ======================================== CSS RESET ======================================== Universal reset to ensure consistent rendering across browsers box-sizing: border-box makes width/height include padding and border */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Screen reader only class for accessibility Content is hidden visually but still available to screen readers Uses the "visually-hidden" pattern recommended by WebAIM */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ======================================== CSS CUSTOM PROPERTIES (CSS Variables) ======================================== These define the color scheme for the entire site. Using RGB values (without 'rgb()') allows us to add alpha transparency later with rgba(var(--color), alpha) */ html { --accent-purple: 118, 75, 162; --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --text-primary: white; --text-secondary: rgba(255, 255, 255, 0.8); --text-muted: rgba(255, 255, 255, 0.6); --card-bg: rgba(255, 255, 255, 0.05); --card-border: rgba(255, 255, 255, 0.1); --link-color: rgba(255, 255, 255, 0.9); --link-hover: rgba(255, 255, 255, 1); --toggle-opacity: 0.4; --toggle-hover: 0.7; --tooltip-bg: rgba(0, 0, 0, 0.7); /* Index-specific variables */ --photo-border: rgba(255, 255, 255, 0.1); --photo-shadow: rgba(0, 0, 0, 0.3); --name-color: white; --tagline-color: rgba(255, 255, 255, 0.7); --tagline-link: rgba(255, 255, 255, 0.9); --card-hover-bg: rgba(255, 255, 255, 0.1); --card-hover-border: rgba(255, 255, 255, 0.2); --footer-color: rgba(255, 255, 255, 0.6); --footer-link: rgba(255, 255, 255, 0.8); --footer-link-hover: rgba(255, 255, 255, 1); --overlay-bg: rgba(30, 30, 50, 0.92); --overlay-content-bg: rgba(255, 255, 255, 0.1); --overlay-content-border: rgba(255, 255, 255, 0.2); --preview-bg: white; --preview-border: rgba(255, 255, 255, 0.1); --preview-shadow: rgba(0, 0, 0, 0.5); background: var(--bg-gradient); min-height: 100%; } /* ======================================== DARK MODE COLOR SCHEME ======================================== When .dark-mode class is added to , these variables override the default light mode colors. This approach keeps all theming logic centralized and easy to maintain. */ html.dark-mode { --bg-gradient: linear-gradient(135deg, #0d0d14 0%, #1a1a2e 100%); --text-primary: rgba(255, 255, 255, 0.95); --text-secondary: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.5); --card-bg: rgba(255, 255, 255, 0.03); --card-border: rgba(var(--accent-purple), 0.25); --link-color: rgba(255, 255, 255, 0.7); --link-hover: rgba(255, 255, 255, 0.9); --toggle-opacity: 0.3; --toggle-hover: 0.5; --tooltip-bg: rgba(var(--accent-purple), 0.6); /* Index-specific dark mode variables */ --photo-border: rgba(var(--accent-purple), 0.3); --photo-shadow: rgba(0, 0, 0, 0.5); --name-color: rgba(255, 255, 255, 0.95); --tagline-color: rgba(255, 255, 255, 0.5); --tagline-link: rgba(255, 255, 255, 0.7); --card-hover-bg: rgba(var(--accent-purple), 0.1); --card-hover-border: rgba(var(--accent-purple), 0.4); --footer-color: rgba(255, 255, 255, 0.4); --footer-link: rgba(255, 255, 255, 0.5); --footer-link-hover: rgba(255, 255, 255, 0.7); --overlay-bg: rgba(20, 15, 35, 0.95); --overlay-content-bg: rgba(var(--accent-purple), 0.15); --overlay-content-border: rgba(var(--accent-purple), 0.3); --preview-bg: #1a1a2e; --preview-border: rgba(var(--accent-purple), 0.3); --preview-shadow: rgba(0, 0, 0, 0.7); } /* ======================================== BASE TYPOGRAPHY ======================================== System font stack ensures fast loading and native appearance */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: transparent; color: var(--text-primary); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 2rem 1rem 15px; } /* ======================================== THEME TOGGLE BUTTON ======================================== Fixed button in top-right corner for switching between light/dark mode */ .theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 1000; } .theme-toggle-btn { width: 44px; height: 44px; padding: 9px; opacity: var(--toggle-opacity); cursor: pointer; transition: opacity 0.3s ease, transform 0.2s ease; background: none; border: none; } .theme-toggle-btn:hover, .theme-toggle-btn:focus-visible { opacity: var(--toggle-hover); transform: scale(1.1); } .theme-toggle-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 4px; border-radius: 50%; } .theme-toggle-btn svg { width: 100%; height: 100%; } /* Light mode: show moon icon (click to enable dark mode) */ .theme-toggle-btn .icon-sun { display: none; } /* Dark mode: swap icons */ html.dark-mode .theme-toggle-btn .icon-moon { display: none; } html.dark-mode .theme-toggle-btn .icon-sun { display: block; } /* Theme tooltip styling */ .theme-tooltip { position: absolute; top: 50%; right: calc(100% + 10px); transform: translateY(calc(-50% - 1px)); background: var(--tooltip-bg); color: white; padding: 6px 12px; border-radius: 6px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .theme-tooltip::after { content: ''; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); border: 5px solid transparent; border-left-color: var(--tooltip-bg); } @media (hover: hover) { .theme-toggle:hover .theme-tooltip { opacity: 1; } } /* Hide "light mode" tooltip text in light mode */ .theme-tooltip .tooltip-light { display: none; } html.dark-mode .theme-tooltip .tooltip-dark { display: none; } html.dark-mode .theme-tooltip .tooltip-light { display: inline; } /* ======================================== INDEX PAGE — BASE LAYOUT ======================================== */ .container { max-width: 375px; width: 100%; text-align: center; } /* ======================================== PROFILE PHOTO ======================================== */ .profile-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 4px solid var(--photo-border); margin: 0 auto 1.5rem; display: block; box-shadow: 0 8px 32px var(--photo-shadow); transition: transform 0.3s ease; cursor: default; transform-origin: 50% 50%; will-change: transform; } .profile-photo:hover { transform: scale(1.24); } .name { color: var(--name-color); font-size: 1.75rem; font-weight: 300; letter-spacing: 0.5px; margin-bottom: 0.75rem; } .tagline { color: var(--tagline-color); font-size: 1rem; font-weight: 300; letter-spacing: 0.3px; margin-bottom: 3rem; line-height: 1.5; } .tagline a { color: var(--tagline-link); text-decoration: none; position: relative; } .tagline a:hover, .tagline a:focus-visible { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.9); text-underline-offset: 2px; } .tagline a:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; border-radius: 2px; } /* ======================================== LINK PREVIEW TOOLTIP ======================================== */ .link-preview { position: fixed; width: 400px; height: 240px; background: var(--preview-bg); border: 2px solid var(--preview-border); border-radius: 12px; box-shadow: 0 20px 60px var(--preview-shadow); z-index: 10000; pointer-events: auto; opacity: 0; transition: opacity 0.3s ease; overflow: hidden; display: none; cursor: pointer; } .link-preview.active { display: block; opacity: 1; } .link-preview:hover { border-color: rgba(255, 255, 255, 0.2); } html.dark-mode .link-preview:hover { border-color: rgba(var(--accent-purple), 0.5); } .link-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .preview-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: none; background: rgba(0, 0, 0, 0.6); border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.2s ease, background 0.2s ease, transform 0.3s ease; z-index: 10; padding: 0; } .link-preview:hover .preview-close { opacity: 1; } .preview-close:hover, .preview-close:focus-visible { background: rgba(0, 0, 0, 0.8); transform: rotate(90deg); } .preview-close:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } /* ======================================== SOCIAL LINK CARDS ======================================== */ .links { display: flex; flex-direction: column; gap: 1rem; } .link-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: center; gap: 1rem; text-decoration: none; color: var(--text-primary); transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .link-card:hover { background: var(--card-hover-bg); border-color: var(--card-hover-border); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .link-card:active { transform: translateY(0); } .link-card:focus { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } .icon { width: 24px; height: 24px; flex-shrink: 0; } .link-text { width: 80px; font-size: 1rem; font-weight: 400; letter-spacing: 0.3px; text-align: left; } /* Brand-specific hover colors */ .link-card.linkedin:hover { background: rgba(10, 102, 194, 0.15); border-color: rgba(10, 102, 194, 0.3); } .link-card.instagram:hover { background: rgba(225, 48, 108, 0.15); border-color: rgba(225, 48, 108, 0.3); } .link-card.bluesky:hover { background: rgba(32, 139, 254, 0.15); border-color: rgba(32, 139, 254, 0.3); } .link-card.mastodon:hover { background: rgba(99, 100, 255, 0.15); border-color: rgba(99, 100, 255, 0.3); } .link-card.email:hover { background: rgba(255, 140, 0, 0.15); border-color: rgba(255, 140, 0, 0.3); } /* Two-column row for Bluesky and Mastodon */ .social-row { display: flex; gap: 1rem; } .social-row .link-card { flex: 1; } .social-row.mastodon-first #mastodon-btn { order: 1; } .social-row.mastodon-first #bluesky-btn { order: 2; } /* ======================================== FOOTER ELEMENTS ======================================== */ .footer, .footer-left { position: fixed; bottom: 15px; font-size: 11px; z-index: 100; } .footer { right: 20px; color: var(--footer-color); } .footer a { transition: all 0.3s ease; position: relative; } .footer a:hover, .footer a:focus-visible { color: rgba(255, 255, 255, 0.9); } .footer a svg { transition: opacity 0.3s ease; opacity: 1; } .footer a:hover svg, .footer a:focus-visible svg { opacity: 0.9; } .icon-github { width: 1em; height: 1em; vertical-align: -0.125em; } .overlay-email-link { color: inherit; text-decoration: underline; } .footer-link { color: inherit; text-decoration: none; transition: color 0.3s ease; } .footer-link:hover, .footer-link:focus-visible { color: rgba(255, 255, 255, 1); } .github-link-wrapper { position: relative; display: inline-block; } .github-tooltip { position: absolute; bottom: calc(100% + 10px); right: -7px; background: var(--tooltip-bg); color: white; padding: 6px 12px; border-radius: 6px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .github-tooltip::after { content: ''; position: absolute; top: 100%; right: 8px; border: 5px solid transparent; border-top-color: var(--tooltip-bg); } @media (hover: hover) { .github-link-wrapper:hover .github-tooltip { opacity: 1; } } .footer-hint { position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--footer-color); z-index: 100; opacity: 0; transition: opacity 0.5s ease; } .footer-hint.visible { opacity: 1; } .footer-left { left: 20px; } .footer-left a { color: var(--footer-link); text-decoration: none; transition: color 0.3s ease; cursor: pointer; } .footer-left a:hover, .footer-left a:focus-visible { color: var(--footer-link-hover); } .footer-left a:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } /* Mobile footer */ .mobile-footer { display: none; } /* ======================================== MODAL OVERLAY ======================================== */ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .overlay.active { opacity: 1; pointer-events: all; } .overlay-content { background: var(--overlay-content-bg); border: 1px solid var(--overlay-content-border); border-radius: 16px; padding: 2.5rem 2rem; max-width: 500px; max-height: 90vh; overflow-y: auto; width: 90%; color: white; position: relative; transform: scale(0.9); transition: transform 0.3s ease; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } .overlay-content:focus { outline: none; } .overlay-content::-webkit-scrollbar { width: 6px; } .overlay-content::-webkit-scrollbar-track { background: transparent; } .overlay-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; } .overlay-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } html.dark-mode .overlay-content { scrollbar-color: rgba(var(--accent-purple), 0.3) transparent; } html.dark-mode .overlay-content::-webkit-scrollbar-thumb { background: rgba(var(--accent-purple), 0.3); } html.dark-mode .overlay-content::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-purple), 0.45); } .overlay.active .overlay-content { transform: scale(1); } .overlay-content h2 { font-size: 1.5rem; font-weight: 300; margin-bottom: 1.5rem; letter-spacing: 0.5px; } .overlay-content h3 { font-size: 1.25rem; font-weight: 300; margin-top: 1.5rem; margin-bottom: 1rem; letter-spacing: 0.5px; } .overlay-content p { font-size: 1rem; line-height: 1.6; font-weight: 300; opacity: 0.9; } .overlay-content p + p { margin-top: 1rem; } .close-overlay { position: absolute; top: 1rem; right: 1rem; width: 32px; height: 32px; min-width: 32px; min-height: 32px; border: none; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: 0; transition: background 0.3s ease, transform 0.3s ease; } .close-overlay:hover, .close-overlay:focus-visible { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); } .close-overlay:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } /* ======================================== ACCESSIBILITY - REDUCED MOTION ======================================== */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .profile-photo:hover { transform: none; } .link-card:hover { transform: none; } .overlay.active .overlay-content { transform: scale(1); transition: none; } .overlay-content { transition: none; } } /* ======================================== RESPONSIVE - TABLET ======================================== */ @media (max-width: 768px) { .theme-toggle { top: 15px; right: 15px; } .theme-toggle-btn { width: 44px; height: 44px; padding: 12px; } .theme-tooltip { display: none; } .link-preview { display: none !important; } .profile-photo { width: 140px; height: 140px; } .link-card { padding: 1rem 1.25rem; } .link-text { font-size: 0.95rem; } .footer-hint { display: none; } .overlay-content { padding: 2rem 1.5rem; width: 85%; } .overlay-content h2 { font-size: 1.25rem; margin-bottom: 1.25rem; } .overlay-content p { font-size: 0.95rem; } .name { font-size: 1.5rem; } .tagline { font-size: 0.95rem; } .footer-left, .footer { font-size: 10px; } .github-link-wrapper { display: none; } } /* ======================================== RESPONSIVE - MOBILE ======================================== */ @media (max-width: 480px) { body { padding: 0 1rem 15px; align-items: flex-start; padding-top: 5rem; } .container { min-height: calc(100vh - 5rem - 15px); display: flex; flex-direction: column; } .links { margin-bottom: auto; gap: 0.75rem; } .profile-photo { width: 130px; height: 130px; margin-bottom: 1.25rem; } .name { font-size: 1.25rem; margin-bottom: 1rem; } .tagline { margin-bottom: 2rem; font-size: 0.9rem; } .link-card { padding: 0.875rem; } .link-text { font-size: 0.9rem; } .footer, .footer-left { display: none; } .mobile-footer { display: flex; justify-content: space-between; margin-top: 2rem; font-size: 11px; color: var(--footer-color); } .mobile-footer a { color: var(--footer-link); text-decoration: none; cursor: pointer; } .overlay-content { padding: 1.75rem 1.25rem; width: 90%; } .overlay-content h2 { font-size: 1.15rem; } .overlay-content p { font-size: 0.9rem; } .close-overlay { width: 28px; height: 28px; min-width: 28px; min-height: 28px; } .close-overlay svg { width: 14px; height: 14px; } } /* ======================================== CONTACT FORM STYLES ======================================== */ /* Honeypot field - hidden from users */ .contact-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } /* Form content container */ .contact-form-content { max-width: 450px; } .contact-form-content h2 { margin-bottom: 1.5rem; } /* Form fields */ .contact-field { margin-bottom: 1rem; position: relative; } .contact-field input, .contact-field textarea { width: 100%; padding: 0.875rem 1rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; color: white; font-size: 1rem; font-family: inherit; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .contact-field input::placeholder, .contact-field textarea::placeholder { color: rgba(255, 255, 255, 0.5); } .contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); } .contact-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; } /* Validation states */ .contact-field.error input, .contact-field.error textarea { border-color: rgba(239, 68, 68, 0.7); background: rgba(239, 68, 68, 0.1); } .contact-field.error input:focus, .contact-field.error textarea:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); } .contact-field.valid input, .contact-field.valid textarea { border-color: rgba(34, 197, 94, 0.5); } /* Privacy note */ .contact-privacy { font-size: 0.8rem; line-height: 1.3; font-weight: 300; opacity: 0.9; margin-bottom: 1.25rem; } /* Submit button */ .contact-submit { width: 100%; padding: 0.875rem 1.5rem; background: rgba(var(--accent-purple), 0.4); border: 1px solid rgba(var(--accent-purple), 0.5); border-radius: 8px; color: white; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .contact-submit:hover:not(:disabled) { background: rgba(var(--accent-purple), 0.6); border-color: rgba(var(--accent-purple), 0.7); transform: translateY(-1px); } .contact-submit:active:not(:disabled) { transform: translateY(0); } .contact-submit:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } .contact-submit:disabled { opacity: 0.6; cursor: not-allowed; } /* Loading spinner */ .contact-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: contact-spin 0.8s linear infinite; } .contact-submit.loading .contact-spinner { display: block; } .contact-submit.loading #contact-submit-text { display: none; } @keyframes contact-spin { to { transform: rotate(360deg); } } /* Feedback messages */ .contact-feedback { margin-top: 1rem; padding: 0; border-radius: 8px; font-size: 0.9rem; line-height: 1.5; text-align: center; transition: all 0.3s ease; } .contact-feedback:empty { display: none; } .contact-feedback.success { display: block; padding: 1rem; background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: rgba(134, 239, 172, 1); } .contact-feedback.error { display: block; padding: 1rem; background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: rgba(252, 165, 165, 1); } /* Fallback email link */ .contact-fallback { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; text-align: center; opacity: 0.8; } .contact-fallback a { color: white; text-decoration: underline; text-underline-offset: 2px; transition: opacity 0.2s ease; } .contact-fallback a:hover { opacity: 0.8; } /* Dark mode adjustments */ html.dark-mode .contact-field input, html.dark-mode .contact-field textarea { background: rgba(var(--accent-purple), 0.1); border-color: rgba(var(--accent-purple), 0.25); } html.dark-mode .contact-field input:focus, html.dark-mode .contact-field textarea:focus { background: rgba(var(--accent-purple), 0.15); border-color: rgba(var(--accent-purple), 0.4); box-shadow: 0 0 0 3px rgba(var(--accent-purple), 0.15); } html.dark-mode .contact-submit { background: rgba(var(--accent-purple), 0.3); border-color: rgba(var(--accent-purple), 0.4); } html.dark-mode .contact-submit:hover:not(:disabled) { background: rgba(var(--accent-purple), 0.45); border-color: rgba(var(--accent-purple), 0.55); } /* Mobile adjustments */ @media (max-width: 480px) { .contact-form-content { padding: 1.5rem 1.25rem; } .contact-field input, .contact-field textarea { padding: 0.75rem 0.875rem; font-size: 16px; /* Prevents zoom on iOS */ } .contact-submit { padding: 0.75rem 1.25rem; } .contact-privacy { font-size: 0.75rem; } } /* ======================================== ABOUT TRIGGER ICONS ======================================== */ .about-triggers { display: inline-flex; gap: 0.35rem; vertical-align: middle; margin-left: 0.25rem; } .about-trigger { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-width: 22px; max-width: 22px; min-height: 22px; max-height: 22px; color: var(--text-muted); text-decoration: none; transition: color 0.3s ease, transform 0.2s ease, opacity 0.3s ease; opacity: 0.5; cursor: pointer; vertical-align: -0.1em; -webkit-appearance: none; } .about-trigger svg { width: 100%; height: 100%; flex-shrink: 0; fill: none; stroke: currentColor; } .about-trigger:hover, .about-trigger:focus-visible { color: var(--text-primary); opacity: 0.9; transform: scale(1.15); } .about-trigger:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; border-radius: 4px; } .about-trigger:focus:not(:focus-visible) { outline: none; } /* ======================================== ABOUT OVERLAY CONTENT ======================================== */ .about-content { max-width: 560px; } .about-section { margin-top: 1.5rem; } .about-section:first-of-type { margin-top: 0; } /* Facts definition list */ .about-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; font-size: 0.95rem; line-height: 1.5; } .about-facts dt { font-weight: 400; opacity: 0.6; white-space: nowrap; } .about-facts dd { font-weight: 300; opacity: 0.9; } .about-facts a { color: white; text-decoration: underline; text-underline-offset: 2px; transition: opacity 0.2s ease; } .about-facts a:hover { opacity: 0.8; } /* Career timeline */ .about-career { list-style: none; font-size: 0.95rem; line-height: 1.5; } .about-career li { padding: 0.35rem 0; font-weight: 300; opacity: 0.9; } .about-career li strong { font-weight: 500; } .about-career a { color: white; text-decoration: underline; text-underline-offset: 2px; transition: opacity 0.2s ease; } .about-career a:hover { opacity: 0.8; } .about-year { display: block; opacity: 0.5; font-size: 0.8rem; margin-top: 0.1rem; } /* Links lists */ .about-links { list-style: none; font-size: 0.95rem; line-height: 1.5; } .about-links li { padding: 0.25rem 0; font-weight: 300; opacity: 0.9; } .about-links a { color: white; text-decoration: underline; text-underline-offset: 2px; transition: opacity 0.2s ease; } .about-links a:hover { opacity: 0.8; } /* LinkedIn career link */ .about-career-more { font-size: 0.9rem; font-weight: 300; opacity: 0.7; margin-top: 0.75rem; } .about-career-more a { color: white; text-decoration: underline; text-underline-offset: 2px; transition: opacity 0.2s ease; } .about-career-more a:hover { opacity: 0.8; } /* Human notice */ .about-notice { font-size: 0.8rem; font-weight: 300; opacity: 0.5; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.1); line-height: 1.5; } .about-notice a { color: inherit; text-decoration: underline; } /* Mobile adjustments for about */ @media (max-width: 480px) { .about-triggers { gap: 0.25rem; } .about-trigger { width: 18px; height: 18px; min-width: 18px; max-width: 18px; min-height: 18px; max-height: 18px; } .about-content { padding: 1.5rem 1.25rem; } .about-facts { font-size: 0.85rem; } .about-career, .about-links { font-size: 0.85rem; } }