/* ================================================ Cosmic Crusader — personal site Font: Architects Daughter (Google Fonts) Vibe: githubgalaxy.vercel.app ================================================ */ /* --- Reset --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* --- Theme tokens --- */ :root { --bg: #f9f9f9; --fg: #3a3a3a; --fg-muted: #707070; --primary: #555; --accent: #f3eac8; --accent-fg: #5d4037; --card: #fff; --border: #e0dede; --border-heavy: #c5c3c3; --ring: #999; --shadow: 0 2px 10px rgba(0,0,0,.06); --shadow-hover: 0 6px 20px rgba(0,0,0,.1); --font-sans: 'Architects Daughter', 'Comic Sans MS', 'Segoe Print', sans-serif; --radius: 10px; --measure: 620px; --ease: cubic-bezier(.25, .46, .45, .94); } /* Dark mode - applied via .dark class on */ html.dark { --bg: #1e1e1e; --fg: #e0e0e0; --fg-muted: #999; --primary: #bbb; --accent: #3b3828; --accent-fg: #e8dfa8; --card: #2a2a2a; --border: #3d3d3d; --border-heavy: #555; --ring: #bbb; --shadow: 0 2px 10px rgba(0,0,0,.3); --shadow-hover: 0 6px 20px rgba(0,0,0,.4); } /* Fallback: respect system preference if no manual override */ @media (prefers-color-scheme: dark) { html:not(.dark):not([class*="light"]) { --bg: #1e1e1e; --fg: #e0e0e0; --fg-muted: #999; --primary: #bbb; --accent: #3b3828; --accent-fg: #e8dfa8; --card: #2a2a2a; --border: #3d3d3d; --border-heavy: #555; --ring: #bbb; --shadow: 0 2px 10px rgba(0,0,0,.3); --shadow-hover: 0 6px 20px rgba(0,0,0,.4); } } /* --- Base --- */ html { font-size: 18px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.8; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* No extra letter-spacing — the handwritten font has natural spacing */ } ::selection { background: var(--accent); color: var(--accent-fg); } /* --- Layout --- */ main { max-width: var(--measure); margin: 0 auto; padding: 6.5rem 1.5rem 2.5rem; } footer { max-width: var(--measure); margin: 0 auto; padding: 1.5rem 1.5rem 4rem; text-align: center; color: var(--fg-muted); font-size: 0.82rem; } /* Make inline links obvious */ .now-card a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; } .now-card a:hover { opacity: 0.8; } /* --- Skip link (a11y) --- */ .skip-link { position: absolute; top: -100%; left: 1rem; background: var(--fg); color: var(--bg); padding: 0.4rem 0.8rem; font-size: 0.85rem; text-decoration: none; z-index: 100; border-radius: var(--radius); font-family: var(--font-sans); } .skip-link:focus { top: 0.5rem; } /* --- Navigation bar --- */ .nav-bar { position: fixed; top: 0; left: 0; right: 0; background: var(--bg); border-bottom: 1.5px solid var(--border); z-index: 40; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .nav-container { max-width: var(--measure); margin: 0 auto; padding: 0.85rem 1.5rem; display: flex; gap: 1.5rem; align-items: center; } .nav-link { font-size: 0.9rem; color: var(--fg-muted); text-decoration: none; transition: color 200ms var(--ease); position: relative; } .nav-link:hover { color: var(--fg); } .nav-link.active { color: var(--fg); font-weight: 600; } .nav-link.active::after { content: ''; position: absolute; bottom: -0.85rem; left: 0; right: 0; height: 1.5px; background: var(--fg); } /* --- Theme toggle button --- */ .theme-toggle { position: fixed; top: 1.25rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--card); border: 1.5px solid var(--border); box-shadow: var(--shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 300ms var(--ease), box-shadow 250ms var(--ease), border-color 250ms var(--ease), background 250ms var(--ease); z-index: 50; font-family: var(--font-sans); } .theme-toggle:hover { box-shadow: var(--shadow-hover); border-color: var(--border-heavy); transform: scale(1.05); } .theme-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } .theme-toggle svg { width: 1.125rem; height: 1.125rem; display: block; color: var(--fg); stroke-width: 1.5px; } .theme-toggle .icon-sun { opacity: 0; transform: rotate(-10deg) scale(.98); transition: opacity 200ms var(--ease), transform 220ms var(--ease); } .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); transition: opacity 200ms var(--ease), transform 220ms var(--ease); } html.dark .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } html.dark .theme-toggle .icon-moon { opacity: 0; transform: rotate(10deg) scale(.98); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { pointer-events: none; } /* --- Typography --- */ h1 { font-size: 1.75rem; font-weight: 400; /* Architects Daughter only has 400 */ line-height: 1.3; color: var(--fg); } h2 { font-size: 0.95rem; font-weight: 400; color: var(--fg-muted); margin-bottom: 1rem; text-transform: lowercase; } a { color: var(--primary); text-decoration: none; transition: color 200ms var(--ease); } a:hover { color: var(--fg); } a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 3px; } /* --- Intro --- */ .doodle { font-size: 2.2rem; margin-bottom: 0.25rem; display: inline-block; user-select: none; animation: wobble 5s ease-in-out infinite; } @keyframes wobble { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(8deg) scale(1.05); } 75% { transform: rotate(-5deg) scale(1); } } .identity { color: var(--fg-muted); font-size: 0.95rem; margin-top: 0.1rem; } .bio { margin-top: 1rem; line-height: 1.85; max-width: 520px; } .now-card { margin-top: 1.5rem; padding: 0.75rem 1.15rem; background: var(--accent); color: var(--accent-fg); border-radius: var(--radius); font-size: 0.85rem; border: 1.5px dashed var(--border-heavy); display: inline-block; line-height: 1.6; } .now-label { font-weight: 400; } /* --- Separator --- */ .sep { border: none; border-top: 1.5px dashed var(--border); margin: 2.5rem 0; } /* --- Projects --- */ .project-list { list-style: none; display: grid; gap: 0.75rem; } .project-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0.1rem 1rem; padding: 0.9rem 1.15rem; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: var(--fg); transition: box-shadow 250ms var(--ease), border-color 250ms var(--ease), transform 250ms var(--ease); } .project-card:hover { box-shadow: var(--shadow-hover); border-color: var(--border-heavy); transform: translateY(-2px); } .project-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } .project-title { font-size: 1rem; color: var(--fg); grid-column: 1; grid-row: 1; } .project-year { font-size: 0.78rem; color: var(--fg-muted); grid-column: 2; grid-row: 1; text-align: right; align-self: center; } .project-desc { font-size: 0.82rem; color: var(--fg-muted); grid-column: 1 / -1; grid-row: 2; line-height: 1.55; } /* --- Achievements --- */ .achievement-list { list-style: none; display: grid; gap: 0.5rem; } .achievement-item { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 0.7rem 1rem; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow 250ms var(--ease), border-color 250ms var(--ease), transform 250ms var(--ease); } .achievement-item:hover { box-shadow: var(--shadow-hover); border-color: var(--border-heavy); transform: translateX(3px); } .achievement-title { font-size: 0.92rem; color: var(--fg); line-height: 1.5; } .achievement-year { font-size: 0.78rem; color: var(--fg-muted); text-align: right; align-self: center; } /* --- Writing --- */ .writing-placeholder { color: var(--fg-muted); font-size: 0.88rem; background: var(--card); padding: 0.75rem 1.15rem; border: 1.5px dashed var(--border); border-radius: var(--radius); display: inline-block; } /* --- Posts Page --- */ .post-list { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 1.5rem; } .post-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; transition: transform 0.2s, box-shadow 0.2s; } .post-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .post-link { display: flex; align-items: baseline; gap: 1rem; color: var(--fg); text-decoration: none; margin-bottom: 0.5rem; } .post-link:hover .post-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .post-title { font-size: 1.25rem; font-weight: 600; transition: color 0.2s; } .post-date { font-size: 0.9rem; color: var(--fg-muted); white-space: nowrap; } .post-desc { margin: 0.75rem 0 0 0; color: var(--fg); opacity: 0.85; line-height: 1.6; } .post-empty { text-align: center; padding: 3rem 1rem; color: var(--fg-muted); } /* --- Contact links --- */ .link-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; } .link-list a { display: inline-block; padding: 0.4rem 0.9rem; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 0.88rem; color: var(--fg); box-shadow: var(--shadow); transition: box-shadow 250ms var(--ease), border-color 250ms var(--ease), transform 250ms var(--ease), background 250ms var(--ease), color 250ms var(--ease); } .link-list a:hover { box-shadow: var(--shadow-hover); border-color: var(--border-heavy); transform: translateY(-1px); background: var(--accent); color: var(--accent-fg); } /* --- Footer --- */ .footer-sep { margin: 0 0.35em; opacity: 0.35; } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; } } /* --- Mobile --- */ @media (max-width: 600px) { html { font-size: 16px; } main { padding: 3rem 1rem 2rem; } footer { padding: 1rem 1rem 3rem; } h1 { font-size: 1.5rem; } .theme-toggle { top: 1rem; right: 1rem; width: 2.2rem; height: 2.2rem; } .project-card { padding: 0.75rem; grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .project-year { grid-column: 1; grid-row: 1; text-align: left; font-size: 0.72rem; } .project-title { grid-row: 2; } .project-desc { grid-column: 1; grid-row: 3; } .now-card { display: block; } .achievement-item { padding: 0.6rem 0.75rem; grid-template-columns: 1fr; grid-template-rows: auto auto; } .achievement-year { grid-column: 1; grid-row: 1; text-align: left; font-size: 0.72rem; } .achievement-title { grid-row: 2; } }