/* ============================================================ Lucas Elliott — personal site Dark theme with a randomly-chosen deep glow (set per page load by the inline script in , via --glow / --glow-deep). ============================================================ */ :root { /* Fallback glow if JS is disabled (deep blue). The head script overrides these on every load. */ --glow: #2f6bff; --glow-deep: #050f2b; --text: #f4f4f6; --muted: #a7a7b0; --border: rgba(255, 255, 255, 0.12); --card-bg: rgba(255, 255, 255, 0.04); --radius: 16px; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.45); --maxw: 980px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Black at the top, deepening to the chosen color, with a soft glow blooming up from the bottom of the viewport. Fixed so the glow stays anchored to the screen, not the page. */ background-color: #000; background-image: radial-gradient(120% 75% at 50% 118%, var(--glow) 0%, color-mix(in srgb, var(--glow) 35%, transparent) 28%, transparent 60%), linear-gradient(to bottom, #000 0%, #000 32%, var(--glow-deep) 100%); background-attachment: fixed; background-repeat: no-repeat; } /* Browsers without color-mix() still get a clean black→deep gradient. */ @supports not (background: color-mix(in srgb, red, blue)) { body { background-image: radial-gradient(120% 75% at 50% 118%, var(--glow) 0%, transparent 55%), linear-gradient(to bottom, #000 0%, #000 32%, var(--glow-deep) 100%); } } a { color: #fff; text-decoration: none; } a:hover { text-decoration: underline; } .page { max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem); } /* ---- Two-column layout (stacks on mobile) ---- */ .layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 760px) { .layout { grid-template-columns: 1fr; } } /* ---- Profile (left) ---- */ .profile .avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); box-shadow: 0 0 0 6px rgba(255,255,255,.03), var(--shadow); } .name { font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 700; letter-spacing: -0.02em; margin: 1.4rem 0 0.25rem; } .tagline { color: var(--muted); font-size: 1.1rem; margin: 0 0 1.25rem; } .bio { font-size: 1.05rem; color: #e6e6ea; } .bio p:first-child { margin-top: 0; } .bio a { color: var(--glow); text-decoration: underline; text-underline-offset: 2px; } .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.75rem; } .btn { display: inline-flex; align-items: center; padding: 0.6rem 1.2rem; background: #fff; color: #0a0a0c; border-radius: 999px; font-weight: 600; font-size: 0.95rem; } .btn:hover { text-decoration: none; opacity: 0.9; } .social { padding: 0.55rem 0.95rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 0.9rem; background: var(--card-bg); } .social:hover { text-decoration: none; border-color: rgba(255,255,255,.35); } /* ---- Projects (right / bottom) ---- */ .projects h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 1rem; } .card { display: flex; gap: 1rem; padding: 0.85rem; margin-bottom: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; } .card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.07); } .card-img { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 10px; background-color: rgba(255,255,255,.06); background-size: cover; background-position: center; } .card-body { min-width: 0; } .card-body h3 { margin: 0.1rem 0 0.3rem; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; } .card-body .ext { color: var(--muted); font-size: 0.8em; } .card-blurb { color: var(--muted); font-size: 0.92rem; line-height: 1.5; } .card-blurb p { margin: 0; } .muted { color: var(--muted); } .site-footer { max-width: var(--maxw); margin: 0 auto; padding: 2rem clamp(1.25rem, 4vw, 2.5rem) 3rem; color: var(--muted); }