/* ============================================================= style.css — shared stylesheet for all pages Plain CSS, no frameworks, no build step. THEMING • Light + dark color schemes are defined with CSS variables. • Dark mode follows the OS setting automatically AND can be toggled manually (see theme.js + the button in the nav). • The manual choice is stored on . • To re-theme, edit the variables in the :root / [data-theme] blocks. ============================================================= */ /* ---- Light theme (default) ---- */ :root { --accent: #4f46e5; /* single accent color (indigo) */ --accent-hover: #4338ca; --accent-soft: rgba(79, 70, 229, 0.10); --bg: #ffffff; --bg-soft: #f7f7f9; /* card / section background */ --text: #1f2430; /* main text */ --text-muted: #5b6472; /* secondary text */ --border: #e6e8ee; --nav-bg: rgba(255, 255, 255, 0.9); --radius: 12px; --max-width: 960px; --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(16, 24, 40, 0.05); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ---- Dark theme ---- */ /* Applied when the user manually picks dark (data-theme="dark") … */ [data-theme="dark"] { --accent: #818cf8; --accent-hover: #a5b4fc; --accent-soft: rgba(129, 140, 248, 0.14); --bg: #0f1117; --bg-soft: #181b23; --text: #e7e9ee; --text-muted: #9aa3b2; --border: #272b36; --nav-bg: rgba(15, 17, 23, 0.85); --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35); } /* … and automatically when the OS prefers dark AND the user has not made an explicit choice (data-theme="auto" or unset). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #818cf8; --accent-hover: #a5b4fc; --accent-soft: rgba(129, 140, 248, 0.14); --bg: #0f1117; --bg-soft: #181b23; --text: #e7e9ee; --text-muted: #9aa3b2; --border: #272b36; --nav-bg: rgba(15, 17, 23, 0.85); --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35); } } /* ---- Base reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Never allow horizontal scrolling on small screens */ html, body { overflow-x: hidden; } /* Images are always fluid — they never force the layout wider */ img { max-width: 100%; height: auto; } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background 0.2s ease, color 0.2s ease; } /* Centered, padded content wrapper used on every page */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Inline SVG icon helper — sizes any consistently */ .icon { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; } /* ============================================================= Navigation bar ============================================================= */ .site-nav { position: sticky; top: 0; z-index: 10; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--border); } .site-nav .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; min-height: 60px; } /* Brand: logo icon + text */ .site-nav .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; color: var(--text); } .site-nav .brand:hover { text-decoration: none; } .site-nav .brand .icon { width: 1.4em; height: 1.4em; color: var(--accent); } /* Right side of nav holds links + theme toggle */ .nav-right { display: flex; align-items: center; gap: 8px; } .nav-links { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; } .nav-links a { display: inline-block; padding: 6px 12px; border-radius: 8px; color: var(--text-muted); font-size: 0.95rem; } .nav-links a:hover { background: var(--bg-soft); color: var(--text); text-decoration: none; } /* Mark the current page in the nav with class="active" */ .nav-links a.active { color: var(--accent); font-weight: 600; } /* Theme toggle button (sun / moon) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .theme-toggle:hover { background: var(--bg-soft); color: var(--text); } .theme-toggle .icon { width: 1.2em; height: 1.2em; } /* Show the right icon depending on the active theme */ .theme-toggle .icon-moon { display: inline-block; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline-block; } } /* ============================================================= Page header / hero ============================================================= */ .hero { padding: 64px 0 40px; text-align: center; } /* Decorative gradient avatar/logo above the title */ .hero-logo { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 18px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, var(--accent), #06b6d4); box-shadow: var(--shadow); } .hero-logo .icon { width: 38px; height: 38px; stroke-width: 1.8; } .hero h1 { margin: 0 0 8px; font-size: 2.4rem; letter-spacing: -0.02em; } .hero .tagline { margin: 0; color: var(--text-muted); font-size: 1.15rem; } /* Large hero illustration (open-source unDraw SVG) */ .hero-art { margin: 32px auto 0; max-width: 460px; } .hero-art img { display: block; width: 100%; height: auto; } /* Smaller header used on inner pages */ .page-head { padding: 48px 0 24px; } .page-head h1 { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 2rem; letter-spacing: -0.02em; } .page-head h1 .icon { width: 1.1em; height: 1.1em; color: var(--accent); } .page-head p { margin: 0; color: var(--text-muted); } /* Inner-page header that places text beside an illustration */ .page-head .container.with-art { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .page-head .head-text { flex: 1 1 320px; } .page-head .head-art { flex: 0 1 260px; max-width: 260px; } .page-head .head-art img { display: block; width: 100%; height: auto; } /* ============================================================= Project card grid ============================================================= */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 8px 0 48px; } .card { display: flex; flex-direction: column; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, border-color 0.2s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } /* Illustration cover banner at the top of a card. Negative margins make it span edge-to-edge over the card padding. */ .card-cover { display: flex; align-items: center; justify-content: center; height: 150px; margin: -22px -22px 18px; padding: 18px; border-radius: var(--radius) var(--radius) 0 0; background: var(--accent-soft); border-bottom: 1px solid var(--border); } .card-cover img { display: block; max-width: 78%; max-height: 100%; height: auto; } /* Square icon badge at the top of each card */ .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 12px; color: var(--accent); background: var(--accent-soft); } .card-icon .icon { width: 24px; height: 24px; } .card h3 { margin: 0 0 8px; font-size: 1.2rem; } .card p { margin: 0 0 16px; color: var(--text-muted); font-size: 0.98rem; flex-grow: 1; /* pushes tags + button to the bottom */ } /* Tech tag pills */ .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; } .tags li { font-size: 0.78rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 999px; } /* Link button inside a card (with trailing arrow icon) */ .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 0.92rem; font-weight: 600; transition: background 0.15s ease; } .btn:hover { background: var(--accent-hover); text-decoration: none; } .btn .icon { width: 1em; height: 1em; } /* ============================================================= Notices (e.g. "Coming soon") ============================================================= */ .notice { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--bg-soft); border: 1px dashed var(--border); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--text-muted); margin: 8px 0 48px; } .notice .icon { width: 1.3em; height: 1.3em; color: var(--accent); } .notice strong { color: var(--text); } /* ============================================================= Long-form content (privacy policy) ============================================================= */ .prose { padding: 8px 0 48px; max-width: 720px; } .prose h2 { display: flex; align-items: center; gap: 10px; margin: 32px 0 8px; font-size: 1.3rem; } .prose h2 .icon { width: 1.05em; height: 1.05em; color: var(--accent); } .prose p, .prose li { color: var(--text); } .prose ul { padding-left: 22px; } .prose .muted { color: var(--text-muted); } /* ============================================================= Footer ============================================================= */ .site-footer { border-top: 1px solid var(--border); padding: 28px 0; margin-top: 24px; color: var(--text-muted); font-size: 0.9rem; } .site-footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .site-footer a { display: inline-flex; align-items: center; gap: 6px; } /* ============================================================= Responsive tweaks for phones ============================================================= */ @media (max-width: 600px) { body { font-size: 16px; } .hero { padding: 44px 0 28px; } .hero h1 { font-size: 2rem; } .card-grid { grid-template-columns: 1fr; } .site-footer .container { flex-direction: column; text-align: center; } /* Stack inner-page header and shrink its illustration on phones */ .page-head .container.with-art { flex-direction: column-reverse; align-items: flex-start; } .page-head .head-art { max-width: 200px; margin-bottom: 8px; } /* Stack the nav so links/toggle wrap onto their own row (no overflow) */ .site-nav .container { flex-direction: column; align-items: stretch; gap: 6px; } .nav-right { justify-content: space-between; } .nav-links { gap: 2px; } .nav-links a { padding: 6px 9px; } }