/* ============================================================ EDITORIAL DESIGN SYSTEM — style.css read.cv × Paco Coursey inspired clean, readable, content-first aesthetic. Uses .dark class on for dark mode toggling. ============================================================ */ /* ------------------------------------------------------------ 1. BASE — HTML & Body ------------------------------------------------------------ */ :root { --space-fib-1: 8px; /* ~ 0.5rem */ --space-fib-2: 13px; /* ~ 0.8125rem */ --space-fib-3: 21px; /* ~ 1.3125rem */ --space-fib-4: 34px; /* ~ 2.125rem */ --space-fib-5: 55px; /* ~ 3.4375rem */ --space-fib-6: 89px; /* ~ 5.5625rem */ --space-fib-7: 144px; /* ~ 9rem */ } html { font-size: 17px; } @media (min-width: 1024px) { html { font-size: 18px; } } /* Remove tap highlight gray box on iOS devices */ * { -webkit-tap-highlight-color: transparent; } /* ------------------------------------------------------------ 1a. GLASS EFFECT SAFARI FALLBACK Solid background when backdrop-filter not supported. ------------------------------------------------------------ */ .glass-bg { background-color: rgba(248, 250, 252, 0.95); } .dark .glass-bg { background-color: rgba(11, 15, 25, 0.95); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass-bg { background-color: rgba(248, 250, 252, 0.75); } .dark .glass-bg { background-color: rgba(11, 15, 25, 0.75); } } /* Feedback overlay glass fallback */ .glass-overlay { background-color: rgba(0, 0, 0, 0.4); } .dark .glass-overlay { background-color: rgba(0, 0, 0, 0.6); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass-overlay { background-color: rgba(0, 0, 0, 0.1); } .dark .glass-overlay { background-color: rgba(0, 0, 0, 0.3); } } /* Handle Safe Area Insets for notched/dynamic-island devices */ body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } #navbar { padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } #mobile-drawer { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px); } #back-to-top { bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important; right: calc(1.5rem + env(safe-area-inset-right, 0px)) !important; } /* Disable transitions for all interactive elements to keep them flat */ a, button, .list-item-hover, .project-item, .tag, .filter-btn, .nav-link, #back-to-top, .material-symbols-rounded { transition: none !important; } /* ------------------------------------------------------------ 2. SCROLL REVEAL Fade-in + subtle translateY animation on intersection. ------------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity 400ms ease, transform 400ms ease; } .revealed { opacity: 1; transform: translateY(0); } /* ------------------------------------------------------------ 4. NAV LINK ACTIVE & HOVER STATES ------------------------------------------------------------ */ .nav-link { position: relative; } /* Underline expansion animation removed to keep nav links flat */ .nav-link.active { color: #1B3A4B; } .dark .nav-link.active { color: #60A5FA; } /* ------------------------------------------------------------ 5. SECTION DIVIDERS Full-width hairline rule between sections. ------------------------------------------------------------ */ .section-divider { width: 100%; height: 1px; background-color: #F0EFEA; margin-top: var(--space-fib-1); margin-bottom: var(--space-fib-2); border: none; } .dark .section-divider { background-color: #222222; } /* ------------------------------------------------------------ 6. LIST ITEM HOVER Subtle background shift on interactive list rows. ------------------------------------------------------------ */ .list-item-hover { border-radius: 8px; } /* ------------------------------------------------------------ 7. PROJECT FILTER — Item States Controls visibility and fade transitions for filtered cards. ------------------------------------------------------------ */ .project-item { position: relative; } .project-item.hidden-item { display: none; } .project-item.fade-out { opacity: 0; } .project-item.fade-in { opacity: 1; } /* ------------------------------------------------------------ 8. FILTER BUTTON ACTIVE Solid accent fill when a filter category is selected. ------------------------------------------------------------ */ .filter-btn.active { background-color: #1B3A4B; color: #FFFFFF; } .dark .filter-btn.active { background-color: #60A5FA; color: #0B0F19; } /* Filter button hover rules removed */ /* ------------------------------------------------------------ 9. TAGS / PILLS Compact metadata labels used on cards and lists. ------------------------------------------------------------ */ .tag { display: inline-flex; align-items: center; padding: 2px 7px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; background-color: #F0EFEA; color: #6B6B6B; border-radius: 9999px; } .dark .tag { background-color: #24304A; color: #E5E7EB; } /* Accent variant — uses primary blue tint */ .tag-accent { background-color: rgba(245, 166, 35, 0.1); color: #F5A623; } .dark .tag-accent { background-color: rgba(245, 166, 35, 0.15); color: #F5A623; } /* Tag hover rules removed */ /* ------------------------------------------------------------ 10. CUSTOM SCROLLBAR Thin, branded scrollbar for webkit browsers. ------------------------------------------------------------ */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #F8FAFC; } ::-webkit-scrollbar-thumb { background-color: #1B3A4B; border-radius: 9999px; } .dark ::-webkit-scrollbar-track, .dark::-webkit-scrollbar-track { background: #0B0F19; } .dark ::-webkit-scrollbar-thumb, .dark::-webkit-scrollbar-thumb { background-color: #60A5FA; } /* Firefox thin scrollbar */ * { scrollbar-width: thin; scrollbar-color: #1B3A4B #F8FAFC; } .dark * { scrollbar-color: #60A5FA #0B0F19; } /* ------------------------------------------------------------ 11. TEXT SELECTION Branded highlight color for selected text. ------------------------------------------------------------ */ ::selection { background: rgba(27, 58, 75, 0.15); } .dark ::selection { background: rgba(96, 165, 250, 0.2); } /* ------------------------------------------------------------ 12. FORM FOCUS Clean focus state — removes default outline. ------------------------------------------------------------ */ input:focus-visible, textarea:focus-visible { outline: none; } /* ------------------------------------------------------------ 13. AVATAR Circular profile image with responsive sizing. ------------------------------------------------------------ */ .avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; } @media (min-width: 640px) { .avatar { width: 96px; height: 96px; } } /* ------------------------------------------------------------ 14. SECTION SPACING UTILITY Sections use Tailwind py-8/md:py-12 for vertical rhythm. This utility ensures no extra bottom margin stacking. ------------------------------------------------------------ */ .section-gap { margin-bottom: 0; } /* ------------------------------------------------------------ 15. BLOG / ARTICLE CONTENT Long-form reading optimised line-height and paragraph spacing. ------------------------------------------------------------ */ .blog-content { line-height: 1.8; font-size: 1rem; } .blog-content p { margin-bottom: 1.5em; } @media (min-width: 768px) { .blog-content, .blog-content p, section p { text-align: justify; } } /* ------------------------------------------------------------ 16. EDITORIAL LINK HOVER Smooth color transition for inline content links. ------------------------------------------------------------ */ a.editorial-link { color: #1B3A4B; } .dark a.editorial-link { color: #60A5FA; } /* ------------------------------------------------------------ 17. MONOSPACE LABELS Structured data labels for read.cv aesthetic. ------------------------------------------------------------ */ .mono-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; color: #9CA3AF; } .dark .mono-label { color: #666666; } /* ------------------------------------------------------------ 18. STATUS INDICATOR Animated dot for 'currently available' status. ------------------------------------------------------------ */ .status-dot { position: relative; display: inline-flex; width: 8px; height: 8px; will-change: transform, opacity; } .status-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background-color: #F5A623; animation: status-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0.75; } .status-dot::after { content: ''; position: relative; display: inline-flex; width: 8px; height: 8px; border-radius: 50%; background-color: #F5A623; } .dark .status-dot::before { background-color: #F5A623; } .dark .status-dot::after { background-color: #F5A623; } @keyframes status-ping { 75%, 100% { transform: scale(2); opacity: 0; } } /* ------------------------------------------------------------ 19. SECTION NUMBERS Monospace numbered prefix for section headings. ------------------------------------------------------------ */ .section-number { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500; color: #9CA3AF; margin-right: 12px; } .dark .section-number { color: #666666; } /* ------------------------------------------------------------ 20. MULTI-LANGUAGE SYSTEM ------------------------------------------------------------ */ html:not(.lang-id) .lang-id { display: none !important; } html.lang-id .lang-en { display: none !important; } /* ------------------------------------------------------------ 21. CHART LOADING SPINNER ------------------------------------------------------------ */ .chart-spinner { width: 32px; height: 32px; border: 2px solid rgba(27, 58, 75, 0.1); border-top-color: #1B3A4B; border-radius: 50%; animation: chart-spin 0.8s linear infinite; will-change: transform; } .dark .chart-spinner { border-color: rgba(96, 165, 250, 0.15); border-top-color: #60A5FA; } @keyframes chart-spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------------ 22. OVERRIDE UTILITY ------------------------------------------------------------ */ @media (max-width: 767px) { .text-justify { text-align: left !important; } } /* ------------------------------------------------------------ 23. DUAL-BRANDING MODE SYSTEM (DEVELOPER vs ACADEMIC) ------------------------------------------------------------ */ html:not(.mode-academic) .mode-acad { display: none !important; } html.mode-academic .mode-dev { display: none !important; } /* Sidebar Mode Toggle Style */ .mode-toggle-container { display: inline-flex; padding: 2px; border-radius: 8px; background-color: #F0EFEA; width: 100%; max-width: 280px; border: 1px solid #FAF8F5; } .dark .mode-toggle-container { background-color: #172033; border-color: #0B0F19; } .mode-select-btn { flex: 1; text-align: center; padding: 6px 12px; border-radius: 6px; font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; transition: all 0.2s ease-in-out; } /* Developer Mode Active States */ html:not(.mode-academic) #mode-dev-btn { background-color: #1B3A4B; color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .dark:not(.mode-academic) #mode-dev-btn { background-color: #60A5FA; color: #0B0F19; } html:not(.mode-academic) #mode-acad-btn { background-color: transparent; color: #6C757D; } .dark:not(.mode-academic) #mode-acad-btn { color: #9CA3AF; } /* Academic Mode Active States */ html.mode-academic #mode-acad-btn { background-color: #1B3A4B; color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .dark.mode-academic #mode-acad-btn { background-color: #60A5FA; color: #0B0F19; } html.mode-academic #mode-dev-btn { background-color: transparent; color: #6C757D; } .dark.mode-academic #mode-dev-btn { color: #9CA3AF; } /* ============================================================ DARK MODE ACCENT OVERRIDES Uses accent-light (#60A5FA) instead of accent (#1B3A4B) for better contrast on dark backgrounds. ============================================================ */ .dark .text-accent { color: #60A5FA; } .dark .bg-accent { background-color: #60A5FA; } .dark .bg-accent\/10 { background-color: rgba(96, 165, 250, 0.1); } .dark .bg-accent\/5 { background-color: rgba(96, 165, 250, 0.05); } .dark .border-accent { border-color: #60A5FA; } .dark .border-accent\/10 { border-color: rgba(96, 165, 250, 0.1); } .dark .border-accent\/30 { border-color: rgba(96, 165, 250, 0.3); } /* ============================================================ 25. BACKGROUND GRID & DOT SYSTEM (WITH MASKING) ============================================================ */ .grid-bg, #grid-canvas { width: 100%; height: 100%; } #bg-grid-container.grid-in-front { z-index: 45; } /* Masked grid: gate for Safari compatibility */ @supports ((-webkit-mask-image: radial-gradient(circle, transparent, black)) or (mask-image: radial-gradient(circle, transparent, black))) { .grid-bg, #grid-canvas { /* Inverted mask: transparent in the center (maximum text contrast) and grid on the outside */ -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 15%, rgba(0, 0, 0, 0.3) 55%, black 85%); mask-image: radial-gradient(circle at 50% 50%, transparent 15%, rgba(0, 0, 0, 0.3) 55%, black 85%); } } /* 25.3. Academic Mode (Mathematical Symbols Grid) */ html.mode-academic .grid-bg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ctext x='5' y='21' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3EΣ%3C/text%3E%3Ctext x='35' y='21' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3Eπ%3C/text%3E%3Ctext x='65' y='21' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3E∫%3C/text%3E%3Ctext x='95' y='21' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3E√%3C/text%3E%3Ctext x='5' y='51' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3E∞%3C/text%3E%3Ctext x='35' y='51' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3E∂%3C/text%3E%3Ctext x='65' y='51' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3Eλ%3C/text%3E%3Ctext x='95' y='51' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3Eα%3C/text%3E%3Ctext x='5' y='81' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3Eβ%3C/text%3E%3Ctext x='35' y='81' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3EΔ%3C/text%3E%3Ctext x='65' y='81' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3Eθ%3C/text%3E%3Ctext x='95' y='81' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3Eμ%3C/text%3E%3Ctext x='5' y='111' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3Eσ%3C/text%3E%3Ctext x='35' y='111' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3Eχ%3C/text%3E%3Ctext x='65' y='111' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3E≈%3C/text%3E%3Ctext x='95' y='111' font-family='Times New Roman, serif' font-size='18' fill='%231B3A4B' opacity='0.20'%3E∫%3C/text%3E%3C/svg%3E"); background-size: 120px 120px; } /* 25.4. Academic Mode + Dark Mode */ html.mode-academic.dark .grid-bg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ctext x='5' y='21' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3EΣ%3C/text%3E%3Ctext x='35' y='21' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3Eπ%3C/text%3E%3Ctext x='65' y='21' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3E∫%3C/text%3E%3Ctext x='95' y='21' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3E√%3C/text%3E%3Ctext x='5' y='51' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3E∞%3C/text%3E%3Ctext x='35' y='51' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3E∂%3C/text%3E%3Ctext x='65' y='51' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3Eλ%3C/text%3E%3Ctext x='95' y='51' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3Eα%3C/text%3E%3Ctext x='5' y='81' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3Eβ%3C/text%3E%3Ctext x='35' y='81' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3EΔ%3C/text%3E%3Ctext x='65' y='81' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3Eθ%3C/text%3E%3Ctext x='95' y='81' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3Eμ%3C/text%3E%3Ctext x='5' y='111' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3Eσ%3C/text%3E%3Ctext x='35' y='111' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3Eχ%3C/text%3E%3Ctext x='65' y='111' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3E≈%3C/text%3E%3Ctext x='95' y='111' font-family='Times New Roman, serif' font-size='18' fill='%2360A5FA' opacity='0.30'%3E∫%3C/text%3E%3C/svg%3E"); } /* ============================================================ 26. DARK MODE TEXT UTILITY CLASSES Color tokens are managed directly in tailwind.config.js. ============================================================ */ .text-accent-gold { color: #F5A623; } .text-accent-gold-dark { color: #1B3A4B; } .dark .text-accent-gold-dark { color: #F5A623; } /* Body scroll lock for iOS mobile menu — static properties only */ .body-scroll-lock { overflow: hidden; position: fixed; width: 100%; } /* Custom line-height for body/reading text */ .leading-body { line-height: 1.8; } /* ============================================================ 27. CONTENT READABILITY & CONTRAST ENHANCEMENTS ============================================================ */ /* Redundant .dark .tag color override removed (merged into main tag definition) */ /* On desktop, shift the transparent mask center to align with the main content column (around 66% horizontal) */ @supports ((-webkit-mask-image: radial-gradient(circle, transparent, black)) or (mask-image: radial-gradient(circle, transparent, black))) { @media (min-width: 1024px) { .grid-bg, #grid-canvas { -webkit-mask-image: radial-gradient(circle at 66% 50%, transparent 15%, rgba(0, 0, 0, 0.3) 55%, black 85%); mask-image: radial-gradient(circle at 66% 50%, transparent 15%, rgba(0, 0, 0, 0.3) 55%, black 85%); } } } /* ============================================================ 28. STAGGERED CHILD REVEAL Direct children of .stagger-parent fade in sequentially when the parent scrolls into view. ============================================================ */ .stagger-parent > * { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; } .stagger-revealed.stagger-parent > * { opacity: 1; transform: translateY(0); } .stagger-revealed.stagger-parent > :nth-child(1) { transition-delay: 0ms; } .stagger-revealed.stagger-parent > :nth-child(2) { transition-delay: 100ms; } .stagger-revealed.stagger-parent > :nth-child(3) { transition-delay: 200ms; } .stagger-revealed.stagger-parent > :nth-child(4) { transition-delay: 300ms; } .stagger-revealed.stagger-parent > :nth-child(5) { transition-delay: 400ms; } .stagger-revealed.stagger-parent > :nth-child(6) { transition-delay: 500ms; } /* ============================================================ 29. MILESTONE NAVIGATION Vertical dot rail on the right edge — desktop only. ============================================================ */ #milestone { transform: translateY(-50%); } /* Vertical rail line */ #milestone::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #F0EFEA; transform: translateX(-50%); } .dark #milestone::before { background: #222222; } /* Dot base */ .milestone-dot { position: relative; display: block; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid #D1D5DB; background: transparent; transition: all 200ms ease !important; cursor: pointer; z-index: 1; } .dark .milestone-dot { border-color: #444; } /* Dot hover */ .milestone-dot:hover { border-color: #F5A623; transform: scale(1.3); } /* Dot active */ .milestone-dot.active { width: 8px; height: 8px; border-color: #F5A623; background: #F5A623; } /* Tooltip */ .milestone-dot::after { content: attr(data-label-en); position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%); font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 500; white-space: nowrap; color: #FFF; background: #1B3A4B; padding: 3px 8px; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity 150ms ease; } .dark .milestone-dot::after { background: #60A5FA; color: #0B0F19; } html.lang-id .milestone-dot::after { content: attr(data-label-id); } .milestone-dot:hover::after { opacity: 1; } /* ============================================================ 30. CRT MONITOR / MATRIX TERMINAL MODAL Scanlines, phosphor glow, bezel frame. ============================================================ */ .crt-screen { position: relative; background: #0a0e0a; border: 2px solid #1a3a1a; border-radius: 4px; overflow: hidden; } .crt-screen::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px ); pointer-events: none; border-radius: 3px; z-index: 1; } .crt-text { color: #00FF88; text-shadow: 0 0 7px rgba(0, 255, 136, 0.6), 0 0 21px rgba(0, 255, 136, 0.4), 0 0 42px rgba(0, 255, 136, 0.2); } .crt-dim { color: rgba(0, 255, 136, 0.55); } .crt-border { border-color: rgba(0, 255, 136, 0.2) !important; } .crt-red { color: #FF5555; text-shadow: 0 0 7px rgba(255, 85, 85, 0.6), 0 0 21px rgba(255, 85, 85, 0.4), 0 0 42px rgba(255, 85, 85, 0.2); } .crt-blue { color: #60A5FA; text-shadow: 0 0 7px rgba(96, 165, 250, 0.6), 0 0 21px rgba(96, 165, 250, 0.4), 0 0 42px rgba(96, 165, 250, 0.2); } .crt-cursor { display: inline-block; width: 7px; height: 14px; background: #00FF88; animation: crt-blink 1s step-end infinite; vertical-align: text-bottom; margin-left: 2px; } @keyframes crt-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ============================================================ 31. TERMINAL TYPEWRITER ANIMATION ~ follow the white rabbit — types itself, cursor blinks, glow breathes. ============================================================ */ .terminal-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; animation: typewrite 2s steps(26) forwards; animation-delay: 0.5s; vertical-align: bottom; } @keyframes typewrite { from { width: 0; } to { width: 26ch; } } .trigger-text { color: #1B3A4B; } .dark .trigger-text { color: #00FF88; text-shadow: 0 0 7px rgba(0, 255, 136, 0.6), 0 0 21px rgba(0, 255, 136, 0.4), 0 0 42px rgba(0, 255, 136, 0.2); } .dark .trigger-glow { animation: breathe 4s ease-in-out infinite; } .trigger-cursor { display: inline-block; width: 6px; height: 12px; background: #1B3A4B; animation: blink 1s step-end infinite; vertical-align: text-bottom; margin-left: 1px; opacity: 1; } .dark .trigger-cursor { background: #00FF88; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes breathe { 0%, 100% { text-shadow: 0 0 7px rgba(0,255,136,0.6), 0 0 21px rgba(0,255,136,0.4), 0 0 42px rgba(0,255,136,0.2); } 50% { text-shadow: 0 0 10px rgba(0,255,136,0.9), 0 0 30px rgba(0,255,136,0.6), 0 0 60px rgba(0,255,136,0.3); } } /* ── 32. SLIDE TRANSITION ── */ .deep-slide { transition: opacity 300ms ease; } .deep-slide.hidden { display: none; } /* ============================================================ 33. PREVENT FLASH OF UNSTYLED ICONS (FOUI) ============================================================ */ .material-symbols-rounded { display: inline-block; overflow: hidden; vertical-align: middle; width: 1em; height: 1em; } .material-symbols-rounded.hidden { display: none !important; }