/* ── Shared Styles ── */ html { scroll-behavior: smooth; } /* Cross-page view transitions on supporting browsers (Chromium 111+, Safari TP). Older browsers ignore this — pages just navigate normally. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; } * { margin:0; padding:0; box-sizing:border-box; transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s; } :root { /* Shape & elevation tokens — keep radii/shadows consistent site-wide. */ --radius-s: 3px; --radius-m: 5px; --radius-pill: 999px; --shadow-hover: 0 8px 24px rgba(0,0,0,0.09); --shadow-hover-strong: 0 12px 32px rgba(0,0,0,0.14); --shadow-pill: 0 4px 14px rgba(0,0,0,0.08); --bg: #f0efe9; --card-bg: #fff; --card-border: #e0deda; --text-primary: #0f0f0f; --text-secondary: #5e5a52; --text-muted: #6b675f; --label: #6b675f; --icon-bg: #f0efe9; --icon-border: #e0deda; --icon-stroke: #555; --wm-stroke: #e7dbd4; --avatar-border: #dddbd6; --avatar-bg: #e8e6e0; --divider: #ddd; --footer-sub: #8a847a; --toggle-bg: #e0deda; --toggle-knob: #fff; --tag-bg: #e8e6e0; --tag-color: #666; --accent: #c63d1f; --code-bg: #e8e6e0; --code-border: #dddbd6; --inline-code-bg: #e4e2dc; --link-color: #0f0f0f; --blockquote-border: #ccc; --blockquote-bg: rgba(0,0,0,0.02); } body.dark, html.preload-dark body { --shadow-hover: 0 8px 24px rgba(0,0,0,0.5); --shadow-hover-strong: 0 12px 32px rgba(0,0,0,0.6); --shadow-pill: 0 4px 14px rgba(0,0,0,0.4); --bg: #0f0f0f; --card-bg: #1a1a1a; --card-border: #2a2a2a; --text-primary: #f4f3ef; --text-secondary: #959086; --text-muted: #807b72; --label: #807b72; --icon-bg: #111; --icon-border: #2a2a2a; --icon-stroke: #888; --wm-stroke: #241a16; --avatar-border: #2a2a2a; --avatar-bg: #1a1a1a; --divider: #222; --footer-sub: #635f58; --toggle-bg: #333; --toggle-knob: #f4f3ef; --tag-bg: #1e1e1e; --tag-color: #888; --accent: #c63d1f; --code-bg: #161616; --code-border: #2a2a2a; --inline-code-bg: #222; --link-color: #c63d1f; --blockquote-border: #333; --blockquote-bg: rgba(255,255,255,0.02); } body { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 48px 20px 80px; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; position: relative; overflow-x: hidden; transition: background 0.3s; } /* ── TYPE SYSTEM ── Body stays Inter (set on ). Display headings use Barlow Condensed; micro-labels & nav use JetBrains Mono for a terminal/noir accent. */ .name, .page-title, .nav-brand, .footer-wordmark, .site-footer-brand, .avatar-initials { font-family: 'Barlow Condensed', 'Inter', sans-serif; } .brand-tag, .page-subtitle, .section-label, .status-text, .nav-link, .nav-lang, .post-tag, .proj-tag, .footer-sub, .site-footer-sub { font-family: 'JetBrains Mono', 'Inter', monospace; } /* Decorative background wordmark. No `content` here on purpose: the pseudo-element only renders where a page opts in (see 404.html). */ body::before { position: fixed; bottom: -40px; left: 50%; transform: translateX(-50%); font-family: 'Barlow Condensed', 'Inter', sans-serif; font-size: 168px; font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px var(--wm-stroke); letter-spacing: 1px; pointer-events: none; user-select: none; white-space: nowrap; z-index: 0; transition: -webkit-text-stroke-color 0.3s; } /* Subtle film-grain overlay across the whole page. */ body::after { content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); opacity: 0.04; mix-blend-mode: multiply; } body.dark::after { opacity: 0.06; mix-blend-mode: screen; } .container { position: relative; z-index: 1; width: 100%; max-width: 680px; } /* ── SITE NAV ── */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; padding: 0 24px; height: 48px; background: var(--bg); border-bottom: 0.5px solid var(--card-border); transition: background 0.3s, border-color 0.3s; } .nav-brand { font-size: 14px; font-weight: 900; color: var(--text-primary); text-decoration: none; letter-spacing: -0.5px; margin-right: 28px; flex-shrink: 0; transition: opacity 0.15s; } .nav-brand:hover { opacity: 0.7; } .nav-links { display: flex; gap: 20px; flex: 1; } .nav-link { font-size: 12px; font-weight: 400; color: var(--text-muted); text-decoration: none; letter-spacing: 0.04em; transition: color 0.15s; padding: 4px 0; } .nav-link:hover { color: var(--text-primary); } .nav-link.active { color: var(--text-primary); font-weight: 500; } .nav-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-left: 12px; flex-shrink: 0; } .nav-toggle .toggle-icon { font-size: 11px; user-select: none; color: var(--text-muted); display: flex; align-items: center; } /* ── LANGUAGE TOGGLE ── */ .nav-lang { margin-left: auto; flex-shrink: 0; font-family: 'JetBrains Mono', 'Inter', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; padding: 5px 10px; border-radius: var(--radius-s); background: transparent; color: var(--text-muted); border: 0.5px solid var(--card-border); cursor: pointer; transition: all 0.15s; } .nav-lang:hover { border-color: var(--text-secondary); color: var(--text-primary); } /* ── INDEX-PAGE FLOATING CONTROLS (lang + theme) ── */ .index-controls { position: fixed; top: 16px; right: 20px; z-index: 51; display: flex; align-items: center; gap: 12px; } .index-controls .theme-toggle { position: static !important; top: auto !important; right: auto !important; } /* ── HAMBURGER ── */ .nav-hamburger { display: none; width: 36px; height: 36px; background: none; border: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-left: auto; padding: 0; } .nav-hamburger span { display: block; width: 18px; height: 1.5px; background: var(--text-primary); border-radius: 1px; transition: transform 0.25s, opacity 0.25s; } .site-nav.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .site-nav.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; } .site-nav.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 560px) { .nav-hamburger { display: flex; } .nav-links { display: none; position: absolute; top: 48px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 0.5px solid var(--card-border); padding: 8px 24px 16px; } .site-nav.nav-open .nav-links { display: flex; } .nav-link { padding: 10px 0; } .nav-lang { margin-left: auto; } .nav-toggle { margin-left: 8px; } } body.has-nav { padding-top: 72px; } /* ── STANDALONE THEME TOGGLE (index page) ── */ .theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 50; display: flex; align-items: center; gap: 8px; cursor: pointer; } .toggle-track { width: 36px; height: 20px; background: var(--toggle-bg); border-radius: 10px; position: relative; transition: background 0.25s; border: 0.5px solid var(--card-border); } .toggle-knob { width: 14px; height: 14px; background: var(--toggle-knob); border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.25s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } body.dark .toggle-knob { transform: translateX(16px); } .toggle-icon { font-size: 13px; user-select: none; color: var(--text-muted); display: flex; align-items: center; } /* ── PAGE HEADER (used on sub-pages below nav) ── */ .page-header { margin-bottom: 36px; opacity: 0; animation: fadeUp 0.4s ease 0.1s forwards; } .page-title { font-size: clamp(30px, 6vw, 38px); font-weight: 900; color: var(--text-primary); letter-spacing: -0.5px; line-height: 1.05; } .page-subtitle { font-size: 11px; color: var(--text-muted); letter-spacing: 0.15em; text-transform: uppercase; margin-top: 6px; } /* ── SECTION LABEL ── */ .section-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; padding-left: 2px; opacity: 0; animation: fadeUp 0.4s ease 0.2s forwards; } /* ── TAG ── */ .post-tag, .proj-tag { font-size: 9px; padding: 2px 8px; border-radius: 2px; background: var(--tag-bg); color: var(--tag-color); letter-spacing: 0.06em; text-transform: uppercase; transition: all 0.18s; } /* ── ANIMATIONS ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes popIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes pulse { 0%, 100% { opacity: 0; transform: scale(0.8); } 50% { opacity: 0.4; transform: scale(1.6); } } /* ── FOCUS STYLES (accessibility) ── */ a:focus-visible, button:focus-visible, .nav-toggle:focus-visible, .theme-toggle:focus-visible, .nav-hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-s); } /* ── SITE FOOTER ── */ .site-footer { margin-top: 60px; padding: 24px 0; border-top: 0.5px solid var(--divider); text-align: center; } .site-footer-brand { font-size: 12px; font-weight: 900; color: var(--text-muted); letter-spacing: -0.3px; } .site-footer-sub { font-size: 10px; color: var(--text-muted); letter-spacing: 0.15em; text-transform: uppercase; margin-top: 4px; } .site-footer-links { margin-top: 14px; font-size: 10px; color: var(--text-muted); letter-spacing: 0.15em; text-transform: uppercase; } .site-footer-links a { color: inherit; text-decoration: none; border-bottom: 0.5px solid transparent; transition: color 0.15s, border-color 0.15s; } .site-footer-links a:hover { color: var(--text-primary); border-bottom-color: var(--text-primary); } /* ── BACK TO TOP ── */ .back-to-top { position: fixed; bottom: 24px; right: 24px; z-index: 40; width: 36px; height: 36px; border-radius: 50%; background: var(--card-bg); border: 0.5px solid var(--card-border); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s, background 0.18s, border-color 0.18s; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .back-to-top.visible { opacity: 1; pointer-events: auto; } .back-to-top:hover { background: var(--text-primary); border-color: var(--text-primary); transform: translateY(-2px); } .back-to-top svg { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .back-to-top:hover svg { stroke: var(--bg); } /* ── SKIP TO CONTENT (a11y) ── */ .skip-link { position: absolute; top: -40px; left: 8px; z-index: 100; padding: 8px 16px; background: var(--text-primary); color: var(--bg); text-decoration: none; font-size: 12px; font-weight: 500; border-radius: var(--radius-s); letter-spacing: 0.04em; transition: top 0.18s ease; } .skip-link:focus { top: 8px; outline: 2px solid var(--accent); } /* ── REDUCED MOTION ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .link-card { transform-style: flat !important; } .link-card:hover { transform: none !important; } } /* ── ACCENT — rust signature (#c63d1f) ── */ /* Active nav item gets a rust underline instead of relying on weight alone. */ .nav-link.active { position: relative; } .nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--accent); border-radius: 1px; } /* Terminal-style rust tick leading every section label. */ .section-label { position: relative; padding-left: 14px; } .section-label::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--accent); border-radius: 1px; } /* Tags ignite on hover. */ .post-tag:hover, .proj-tag:hover { background: var(--accent); color: #fff; } /* Footer links underline in rust. */ .site-footer-links a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ── FX: background layers (js/fx.js) ── */ #fx-constellation, .fx-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.85; } #fx-bg-rain { opacity: 0.35; } #fx-bg-sonar, #fx-bg-scan { opacity: 0.7; } /* ── FX: aurora (calm drifting glows) ── */ .fx-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .fx-aurora b { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: 0.40; will-change: transform; } .fx-aurora .b1 { width: 46vw; height: 46vw; left: -6vw; top: -10vw; background: var(--accent); animation: aur1 26s ease-in-out infinite alternate; } .fx-aurora .b2 { width: 40vw; height: 40vw; right: -8vw; top: -6vw; background: #3a6ea5; opacity: 0.30; animation: aur2 32s ease-in-out infinite alternate; } .fx-aurora .b3 { width: 52vw; height: 52vw; left: 28vw; bottom: -22vw; background: var(--accent); opacity: 0.22; animation: aur3 38s ease-in-out infinite alternate; } body.dark .fx-aurora b { opacity: 0.46; } body.dark .fx-aurora .b2 { opacity: 0.34; } body.dark .fx-aurora .b3 { opacity: 0.26; } @keyframes aur1 { from { transform: translate(0,0) scale(1); } to { transform: translate(9vw,7vw) scale(1.16); } } @keyframes aur2 { from { transform: translate(0,0) scale(1.05); } to { transform: translate(-7vw,9vw) scale(0.9); } } @keyframes aur3 { from { transform: translate(0,0) scale(0.95); } to { transform: translate(6vw,-8vw) scale(1.2); } } /* ── FX: scroll-reveal ── */ .reveal { opacity: 0; transform: translateY(22px); will-change: opacity, transform; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2,0.7,0.2,1); } .reveal.reveal-in { opacity: 1; transform: none; } /* ── FX: frosted-glass nav ── */ .site-nav { background: var(--bg); /* fallback */ background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); } /* ── FX: cursor spotlight on cards ── */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .service-card, .uc-card, .pkg, .project-card, .cert-card { position: relative; } .service-card::after, .uc-card::after, .pkg::after, .project-card::after, .cert-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.3s ease; background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%); } .service-card:hover::after, .uc-card:hover::after, .pkg:hover::after, .project-card:hover::after, .cert-card:hover::after { opacity: 0.55; } }