/* ============================================================ Castor Troy Ricafort — AI-Native Software Engineer Single-page portfolio. Theme: "terminal noir". Dark charcoal + grid, Claude-coral accent, terminal-green. Bricolage Grotesque display · Hanken Grotesk body · JetBrains Mono. ============================================================ */ /* ---- Tokens ----------------------------------------------- */ :root { --bg: #0e0c0a; /* warm Claude-Code near-black */ --bg-2: #15110d; --bg-3: #1c1712; --line: rgba(255, 240, 230, 0.10); --line-2: rgba(255, 240, 230, 0.05); --text: #efe9e0; --text-soft: #aaa498; --text-faint:#736d62; --coral: #d97757; /* Claude Code coral */ --coral-deep:#bd5b39; --coral-glow: rgba(217, 119, 87, 0.40); --green: #6ee7a8; /* terminal text */ --cyan: #5cc8ff; /* secondary accent */ --amber: #ffd166; --font-display: "Bricolage Grotesque", "Times New Roman", serif; --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --container: 78rem; --nav-h: 4.6rem; --radius: 14px; --radius-sm: 8px; --ease: cubic-bezier(0.4, 0, 0.1, 1); --dur: 0.4s; } /* ---- Reset ------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1.4rem); /* offset for sticky header on anchor jumps */ -webkit-text-size-adjust: 100%; scrollbar-color: var(--bg-3) var(--bg); /* dark scrollbar to match the theme */ /* no rubber-band at the top — swiping down at scroll 0 used to drag the whole page (header included) down and snap back */ overscroll-behavior-y: none; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overscroll-behavior-y: none; /* some browsers read this from , not */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } ::selection { background: var(--coral); color: #1a0f0a; } :focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 3px; } /* ---- Animated background ---------------------------------- */ .bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* faint grid */ .bg::before { content: ""; position: absolute; inset: -2px; background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 40%, transparent 100%); } .bg .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; } .bg .orb-1 { width: 42vw; height: 42vw; top: -10vw; left: -8vw; background: radial-gradient(circle, var(--coral-glow), transparent 70%); animation: drift1 22s ease-in-out infinite; } .bg .orb-2 { width: 38vw; height: 38vw; top: 30vh; right: -10vw; background: radial-gradient(circle, rgba(255, 209, 102, 0.12), transparent 70%); animation: drift2 28s ease-in-out infinite; } .bg .orb-3 { width: 34vw; height: 34vw; bottom: -10vw; left: 25vw; background: radial-gradient(circle, rgba(217, 119, 87, 0.14), transparent 70%); animation: drift1 26s ease-in-out infinite reverse; } @keyframes drift1 { 50% { transform: translate(6vw, 5vh) scale(1.1); } } @keyframes drift2 { 50% { transform: translate(-7vw, 4vh) scale(0.92); } } /* ---- Layout ----------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3.5rem); } .section { padding-block: clamp(4rem, 10vw, 8rem); } .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: 1.6rem; } .eyebrow b { color: var(--coral); font-weight: 500; } /* ---- Typography ------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; } .display { font-size: clamp(2.8rem, 8vw, 5.75rem); font-weight: 800; line-height: 0.96; } h2 { font-size: clamp(2rem, 5vw, 3.25rem); } h3 { font-size: 1.3rem; } p { max-width: 62ch; } .lead { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.55; color: var(--text-soft); } .grad { background: linear-gradient(100deg, var(--coral), var(--amber) 60%, var(--coral)); -webkit-background-clip: text; background-clip: text; color: transparent; } .mono { font-family: var(--font-mono); } /* ---- Buttons ---------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; padding: 0.85rem 1.5rem; border-radius: 100px; border: 1px solid transparent; cursor: pointer; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--coral); color: #1a0f0a; box-shadow: 0 8px 30px -8px var(--coral-glow); } .btn--primary:hover { background: #ff8e69; box-shadow: 0 14px 40px -8px var(--coral-glow); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--line); } .btn--ghost:hover { border-color: var(--coral); color: var(--coral); } .btn .arrow { transition: transform var(--dur) var(--ease); } .btn:hover .arrow { transform: translate(3px, -3px); } /* ---- Header / nav ----------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; /* solid — a translucent + backdrop-filter header let the hero's display text bleed through legibly and flickered mid-scroll in Chromium */ background: var(--bg); border-bottom: 1px solid var(--line-2); } .nav { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); } .brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; } .brand .sigil { color: var(--coral); font-size: 1.2rem; } .brand .blink { color: var(--coral); animation: blink 1.1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } .nav-links { display: flex; align-items: center; gap: 2rem; } .nav-link { position: relative; font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-soft); padding: 0.3rem 0; transition: color var(--dur) var(--ease); } .nav-link::before { content: "/ "; color: var(--text-faint); } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px; background: var(--coral); transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease); } .nav-link:hover { color: var(--text); } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; } .nav-link.active { color: var(--coral); } .nav-cta { display: inline-flex; align-items: center; gap: 1.25rem; } .nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; /* ≥44px touch target */ background: none; border: none; cursor: pointer; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---- Hero ------------------------------------------------- */ .hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 8vw, 6rem); } .hero-grid { display: grid; /* minmax(0,…) — a bare 1fr can't shrink below the terminal's min-content width (its one-line title bar), which used to force page overflow */ grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 4rem); align-items: center; } .hero h1 { margin: 1.4rem 0; } .hero .lead { margin-bottom: 2rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; } .hero-stats { display: flex; flex-wrap: wrap; gap: 1.25rem 1.9rem; margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-2); } .hero-stats .stat .n { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--text); line-height: 1; } .hero-stats .stat .l { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.4rem; } /* ---- Tech icons (brand SVGs) ------------------------------ */ .ti { width: 1.05em; height: 1.05em; object-fit: contain; display: inline-block; vertical-align: -0.18em; flex: none; } .tag .ti { margin-right: 0.5em; } .glyph .ti { width: 1.5rem; height: 1.5rem; vertical-align: 0; } .chip .ti { width: 0.95rem; height: 0.95rem; vertical-align: -0.12em; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- Reusable terminal window ----------------------------- */ .term { position: relative; z-index: 1; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, #14100c, #0a0c10); box-shadow: 0 40px 90px -45px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.04); overflow: hidden; } .term-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.62rem 0.85rem; background: #100d0a; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); } .term-bar .dots { display: flex; gap: 6px; flex: none; } .term-bar .dot { width: 11px; height: 11px; border-radius: 50%; display: block; } .term-bar .dot.r { background: #ff5f57; } .term-bar .dot.y { background: #febc2e; } .term-bar .dot.g { background: #28c840; } .term-bar .t-title { margin-left: 0.3rem; flex: 1; min-width: 0; /* let the flex item shrink so the ellipsis can kick in */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .term-bar .t-state { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--green); } .term-bar .dotpulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(110,231,168,0.6); animation: pulse 2.2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(110, 231, 168, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(110, 231, 168, 0); } 100% { box-shadow: 0 0 0 0 rgba(110, 231, 168, 0); } } /* ---- Hero scene: Pokémon battle × Claude Code ------------- */ .scene { position: relative; } /* the arena slides in once the terminal "boots"; the move buttons stay available the whole time (no layout gap, and recruiters can tap right away) */ .term--battle .arena { transition: height 0.6s var(--ease), opacity 0.55s var(--ease); } .term--battle.booting .arena { height: 0; opacity: 0; } /* arena */ .arena { position: relative; height: 19.25rem; overflow: hidden; background: radial-gradient(130% 80% at 50% 118%, rgba(255,125,84,0.13), transparent 60%), radial-gradient(90% 60% at 80% -10%, rgba(92,200,255,0.10), transparent 60%); } .arena::before { /* faint pixel-grid floor */ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, transparent 30%, #000 100%); } .combatant { position: absolute; display: flex; gap: 0.5rem; z-index: 2; } .c-claude { top: 1rem; right: 1rem; align-items: flex-start; } .c-player { left: 1rem; bottom: 1rem; align-items: flex-end; } /* sprite platforms */ .stage { position: relative; } .stage::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 110%; height: 1.4rem; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255,125,84,0.28), transparent 75%); border-radius: 50%; } /* player: Castor as a Pokémon trainer (provided pixel-art image) */ .trainer { position: relative; width: clamp(6rem, 15.5vw, 7.6rem); filter: drop-shadow(0 7px 11px rgba(0,0,0,0.45)); animation: bob 2.9s ease-in-out infinite; } .c-player.attacking .trainer { animation: lunge 0.5s var(--ease); } .trainer-img { display: block; width: 100%; height: auto; } .c-player.hurt .trainer { animation: shake 0.4s; } .c-player.hurt .trainer-img { filter: brightness(1.5); } @keyframes bob { 50% { transform: translateY(-7px); } } @keyframes lunge { 28% { transform: translate(30px, -12px) rotate(5deg); } } /* token readout under each nameplate (replaces the pokéball team dots) */ .tok { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-faint); margin-top: 0.3rem; letter-spacing: 0.02em; } .tok b { color: var(--text); font-weight: 700; } /* claude opponent sprite */ .claude-sprite { width: clamp(5.25rem, 15vw, 7rem); display: grid; place-items: center; filter: drop-shadow(0 7px 12px rgba(0,0,0,0.5)) drop-shadow(0 0 22px var(--coral-glow)); animation: floaty 3.4s ease-in-out infinite; } .cc-avatar { width: 100%; height: auto; image-rendering: pixelated; } .c-claude.hurt .claude-sprite { animation: shake 0.4s; } .c-claude.hurt .cc-avatar { filter: brightness(1.55); } @keyframes floaty { 50% { transform: translateY(-9px); } } @keyframes shake { 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } } /* floating "−38K tokens" combat text */ .dmg-float { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); font-family: var(--font-mono); font-weight: 800; font-size: 0.95rem; color: #ff7a66; text-shadow: 0 2px 6px rgba(0,0,0,0.85); pointer-events: none; white-space: nowrap; z-index: 6; animation: floatUp 1.05s var(--ease) forwards; } .dmg-float.mini { font-size: 0.78rem; color: #ffd27a; } @keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.8); } 18% { opacity: 1; transform: translate(-50%, -2px) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -32px) scale(1); } } /* nameplates + HP */ .plate { align-self: center; background: color-mix(in srgb, var(--bg-3) 92%, transparent); border: 1px solid var(--line); border-radius: 9px; padding: 0.4rem 0.6rem; min-width: 8.5rem; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .plate .pname { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .plate .lvl { color: var(--text-faint); font-weight: 400; } .ctx { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; } .ctx .lab { font-family: var(--font-mono); font-size: 0.6rem; color: var(--amber); } .ctx .track { flex: 1; height: 5px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow: hidden; } .ctx .fill { display: block; height: 100%; width: 100%; border-radius: 4px; transition: width 0.55s var(--ease); } .ctx .fill.green { background: linear-gradient(90deg, #39d98a, var(--green)); } .ctx .fill.coral { background: linear-gradient(90deg, var(--coral-deep), var(--coral)); } /* battle dialog box (Claude Code terminal styling) */ .battle-box { border-top: 1px solid var(--line); background: #0a0c10; padding: 1rem 1.15rem 1.15rem; } .dialog { font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.65; min-height: 5.6rem; color: var(--text-soft); } .dialog .ln { display: block; } .dialog .me { color: var(--green); } .dialog .cl { color: var(--coral); } .dialog .eff { color: var(--amber); } .dialog .sys { color: var(--text-faint); } .moves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 0.85rem; } .move { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.82rem; text-align: left; padding: 0.6rem 0.75rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; color: var(--text); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease); } .move:hover, .move:focus-visible { border-color: var(--coral); color: var(--coral); transform: translateY(-2px); } .move .mi { font-size: 1rem; } .cmd { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg); } .cmd .ps { font-family: var(--font-mono); color: var(--coral); font-size: 0.82rem; } .cmd input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-family: var(--font-mono); font-size: 0.8rem; } .cmd input::placeholder { color: var(--text-faint); } .cmd .opt { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-faint); white-space: nowrap; } /* floating tool-icon chips around the arena */ .chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.72rem; padding: 0.34rem 0.7rem; background: color-mix(in srgb, var(--bg-3) 90%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 100px; color: var(--text-soft); box-shadow: 0 10px 30px -16px rgba(0,0,0,0.9); animation: floatChip 7s ease-in-out infinite; } /* hug the terminal's corners/edges — small offsets so nothing covers the dialog text or command input, and nothing pokes past the viewport */ .chip-a { top: -0.9rem; left: -1.1rem; animation-delay: -0.5s; } .chip-b { top: 42%; right: -1.1rem; animation-delay: -2.4s; } .chip-c { bottom: -0.9rem; left: 9%; animation-delay: -3.6s; } @keyframes floatChip { 50% { transform: translateY(-9px); } } /* ---- About ------------------------------------------------ */ .about-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); } .about-grid .prose p + p { margin-top: 1.1rem; color: var(--text-soft); } .about-grid .prose strong { color: var(--coral); font-weight: 600; } .about-side { border-left: 2px solid var(--line); padding-left: 1.5rem; display: grid; gap: 1.4rem; align-content: start; } .about-side .row .k { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; } .about-side .row .v { color: var(--text); font-weight: 500; margin-top: 0.2rem; } /* ---- AI toolbelt (feature row) ---------------------------- */ .toolbelt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1rem; margin-bottom: 3.5rem; } /* exactly five tools — keep them on one row once there's room, instead of stranding an orphan card on a second row */ @media (min-width: 64rem) { .toolbelt { grid-template-columns: repeat(5, 1fr); } } .tool { position: relative; padding: 1.4rem 1.25rem; background: linear-gradient(180deg, var(--bg-2), var(--bg)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .tool::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 0%, var(--coral-glow), transparent 70%); opacity: 0; transition: opacity var(--dur) var(--ease); } .tool:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--coral) 45%, transparent); } .tool:hover::after { opacity: 0.5; } .tool .glyph { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: var(--coral); display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 0.9rem; position: relative; } .tool h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; position: relative; } .tool p { font-size: 0.86rem; color: var(--text-soft); margin-top: 0.35rem; position: relative; } /* ---- Stack (categorized tags) ----------------------------- */ .stack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2rem; } .stack-group h3 { font-family: var(--font-mono); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .stack-group h3::before { content: "▹"; color: var(--coral); } .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tag { font-family: var(--font-mono); font-size: 0.82rem; padding: 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-soft); background: var(--bg-2); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .tag:hover { border-color: var(--coral); color: var(--coral); transform: translateY(-2px); } /* ---- Terminal prompts woven through the page -------------- */ .prompt-echo { font-family: var(--font-mono); font-size: 0.86rem; color: var(--text-soft); } .prompt-echo .ps { color: var(--coral); margin-right: 0.55rem; } .prompt-echo .c { color: var(--text-faint); } .prompt-echo .str { color: var(--green); } /* Experience rendered as a terminal session */ .term--xp { margin-top: 0.5rem; } .xp-body { padding: clamp(1.25rem, 3.5vw, 2.25rem); } .xp-line { font-family: var(--font-mono); font-size: 0.88rem; color: var(--text-soft); max-width: none; } .xp-line .ps { color: var(--coral); margin-right: 0.5rem; } .xp-line .str { color: var(--green); } .xp-line.out { color: var(--text-faint); margin: 0.35rem 0 1.85rem; } .xp-line.out .spark { color: var(--coral); margin-right: 0.45rem; } .term--xp .timeline { margin-bottom: 0.25rem; } /* ---- Experience / timeline -------------------------------- */ .timeline { border-left: 1px solid var(--line); margin-left: 0.5rem; } .entry { position: relative; padding: 0 0 2.75rem 2rem; } .entry:last-child { padding-bottom: 0; } .entry::before { content: ""; position: absolute; left: -6px; top: 0.55rem; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--coral); box-shadow: 0 0 12px var(--coral-glow); } .entry .when { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.03em; color: var(--text-faint); } .entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem; margin: 0.3rem 0 0.1rem; } .entry-head h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; } .entry-head .org { color: var(--coral); font-weight: 600; font-size: 0.95rem; } .entry-head .org::before { content: "@ "; color: var(--text-faint); font-weight: 400; } .entry ul { margin-top: 0.7rem; display: grid; gap: 0.5rem; } .entry li { position: relative; padding-left: 1.25rem; color: var(--text-soft); font-size: 0.96rem; } .entry li::before { content: "▸"; position: absolute; left: 0; color: var(--coral); } /* ---- Projects --------------------------------------------- */ .project-grid { display: grid; /* min(100%,…) keeps the track floor from exceeding tiny viewports */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; } .card { display: flex; flex-direction: column; padding: 1.75rem; background: linear-gradient(180deg, var(--bg-2), var(--bg)); border: 1px solid var(--line); border-radius: var(--radius); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--coral) 40%, transparent); box-shadow: 0 28px 60px -34px rgba(0,0,0,0.9); } .card .role, .pmodal .role { font-family: var(--font-mono); font-size: 0.74rem; color: var(--coral); text-transform: uppercase; letter-spacing: 0.05em; } .card h3, .pmodal h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.3rem; margin: 0.5rem 0 0.15rem; } .card .kind, .pmodal .kind { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-faint); } .card p { color: var(--text-soft); font-size: 0.95rem; margin-top: 0.9rem; flex: 1; } .card .ctags, .pmodal .ctags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; } .card .ctags span, .pmodal .ctags span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-soft); padding: 0.2rem 0.55rem; border: 1px solid var(--line-2); border-radius: 6px; } /* clickable cards: status badge row + prompt-line open affordance */ .card[data-modal] { cursor: pointer; } .card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .status { display: inline-flex; align-items: center; gap: 0.45rem; flex: none; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; } .status--live { color: var(--green); } .status--thesis { color: var(--coral); } .status .dotpulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2.2s infinite; } .card-open { background: none; border: 0; padding: 1.1rem 0 0; text-align: left; cursor: pointer; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-faint); transition: color var(--dur) var(--ease); } .card-open .ps { color: var(--coral); margin-right: 0.55rem; } .card:hover .card-open, .card-open:focus-visible { color: var(--coral); } /* ---- Project modals ---------------------------------------- */ /* Each project's detail view is a native