/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #110821 #eae7f5 #0d0b14 #7c3aed #9d75f8 #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #0d0b14; --surface: #25232c; --surface-2: #191720; --border: #2f2d35; --border-strong: #56545b; --ink: #eae7f5; --muted: #928f9b; --accent: #7c3aed; --accent-hover: #9058f0; --accent-ink: #ffffff; --accent-text: #9d75f8; --accent-strong: #a171f1; --accent-soft: #251544; --accent-border: #3f2076; --success: #15803d; --success-ink: #ffffff; --success-soft: #0f251d; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #321b12; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #330f16; --danger-strong: #d16969;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #0d0b14; --surface: #25232c; --surface-2: #191720; --border: #2f2d35; --border-strong: #56545b; --ink: #eae7f5; --muted: #928f9b; --accent: #7c3aed; --accent-hover: #9058f0; --accent-ink: #ffffff; --accent-text: #9d75f8; --accent-strong: #a171f1; --accent-soft: #251544; --accent-border: #3f2076; --success: #15803d; --success-ink: #ffffff; --success-soft: #0f251d; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #321b12; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #330f16; --danger-strong: #d16969; } /* ==================================================================== * app.css — Pawan.dev, the portfolio's own styling. * * Static and deliberately motion-free: no keyframes, no scroll effects, no * transforms on hover. The character comes from spacing, type scale, a * softened radius and one restrained glass surface (the hero terminal card), * all built on the owner's own tokens — never a colour literal. * ==================================================================== */ :root { /* A softer, more premium radius than the system default. */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; /* A wider, more spacious column for a marketing page. */ --content-max: 1240px; --measure: 64ch; } /* ---- Section rhythm --------------------------------------------------- */ .section { scroll-margin-top: 84px; padding-block: var(--s-11) 0; } .section:first-of-type { padding-top: 0; } .pf-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; } .pf-section-head { max-width: 62ch; margin-bottom: var(--s-8); } .pf-section-title { margin-top: var(--s-2); font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .pf-section-sub { margin-top: var(--s-3); color: var(--muted); font-size: var(--t-lg); } .pf-card-title { font-size: var(--t-lg); font-weight: 600; color: var(--ink); } .pf-icon-badge { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-border); } /* ---- Hero -------------------------------------------------------------- */ .pf-hero { padding-block: var(--s-11) var(--s-11); margin-inline: calc(var(--s-6) * -1); padding-inline: var(--s-6); border-bottom: 1px solid var(--border); background: radial-gradient(560px circle at 12% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), radial-gradient(520px circle at 88% 12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%); } .pf-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-10); align-items: center; } .pf-hero-title { margin-top: var(--s-5); font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.4rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .pf-hero-sub { margin-top: var(--s-5); max-width: 52ch; color: var(--muted); font-size: var(--t-lg); } /* ---- Terminal graphic (the hero's "profile" visual) -------------------- */ .pf-terminal { border-radius: var(--radius-lg); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(18px) saturate(1.5); box-shadow: var(--shadow-raised); overflow: hidden; } .pf-terminal-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 60%, transparent); } .pf-terminal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); } .pf-terminal-name { margin-left: var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); } .pf-terminal-body { margin: 0; padding: var(--s-6); font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.75; color: var(--ink); white-space: pre; overflow-x: auto; } .pf-terminal-body .tok-key { color: var(--accent-text); font-weight: 600; } .pf-terminal-body .tok-str { color: var(--muted); } /* ---- About --------------------------------------------------------------- */ .pf-about-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: var(--s-10); align-items: start; } .pf-strengths { margin-top: var(--s-6); display: flex; flex-direction: column; } .pf-strengths li + li { margin-top: var(--s-3); } .pf-strengths li { display: flex; align-items: center; gap: var(--s-3); color: var(--ink); font-weight: 500; } .pf-strengths .icon { color: var(--accent-text); flex: 0 0 auto; } .pf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } .pf-stat-card { display: flex; align-items: center; } /* ---- Skills / Services grids ---------------------------------------------- */ .pf-skills-grid, .pf-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } /* ---- Timeline -------------------------------------------------------------- */ .pf-timeline { position: relative; display: flex; flex-direction: column; } .pf-timeline-item + .pf-timeline-item { margin-top: var(--s-7); } .pf-timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--border); } .pf-timeline-item { position: relative; padding-left: var(--s-9); } .pf-timeline-dot { position: absolute; left: 0; top: var(--s-2); width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } .pf-timeline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } .pf-timeline-company { margin-top: var(--s-1); color: var(--muted); font-size: var(--t-sm); } .pf-bullets { display: flex; flex-direction: column; padding-left: var(--s-5); list-style: disc; color: var(--muted); } .pf-bullets li + li { margin-top: var(--s-2); } /* ---- Projects --------------------------------------------------------------- */ .pf-projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } .pf-project-card { display: flex; flex-direction: column; } .pf-project-thumb { display: grid; place-items: center; height: 148px; color: var(--accent-strong); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); border-bottom: 1px solid var(--border); } .pf-project-thumb .icon { width: 34px; height: 34px; } /* ---- Testimonials ------------------------------------------------------------ */ .pf-testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } .pf-quote { color: var(--ink); font-size: var(--t-lg); line-height: 1.6; } /* ---- Contact ------------------------------------------------------------------ */ .pf-contact-panel { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-10); align-items: start; } .pf-contact-link { display: flex; align-items: center; gap: var(--s-3); color: var(--muted); font-weight: 500; } .pf-contact-link:hover { color: var(--accent-text); } .pf-contact-link .icon { color: var(--accent-text); flex: 0 0 auto; } /* ---- Footer -------------------------------------------------------------------- */ .pf-footer { margin-top: var(--s-12); padding-block: var(--s-9) var(--s-8); border-top: 1px solid var(--border); display: grid; grid-template-columns: 1.2fr 1fr auto; gap: var(--s-6); align-items: start; } .pf-footer-top { display: flex; flex-direction: column; } .pf-footer-top > * + * { margin-top: var(--s-2); } .pf-footer-tagline { max-width: 32ch; } .pf-footer-nav { flex-wrap: wrap; } .pf-footer-nav a { color: var(--muted); font-size: var(--t-sm); font-weight: 500; } .pf-footer-nav a:hover { color: var(--ink); } .pf-footer-bottom { grid-column: 1 / -1; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); } /* ---- Narrow screens: everything above collapses to one column ------------------ */ @media (max-width: 900px) { /* .content's own side padding drops to --s-4 at this breakpoint (see design.css); match it here so the hero's full-bleed edges stay flush instead of overflowing the shell by the difference. */ .pf-hero { margin-inline: calc(var(--s-4) * -1); padding-inline: var(--s-4); } .pf-hero-grid { grid-template-columns: 1fr; gap: var(--s-8); } .pf-about-grid { grid-template-columns: 1fr; gap: var(--s-7); } .pf-stats { grid-template-columns: 1fr 1fr; } .pf-skills-grid, .pf-services-grid { grid-template-columns: 1fr 1fr; } .pf-projects-grid, .pf-testimonials-grid { grid-template-columns: 1fr 1fr; } .pf-contact-panel { grid-template-columns: 1fr; } .pf-footer { grid-template-columns: 1fr; } } @media (max-width: 620px) { .pf-stats { grid-template-columns: 1fr 1fr; } .pf-skills-grid, .pf-services-grid, .pf-projects-grid, .pf-testimonials-grid { grid-template-columns: 1fr; } } /* ---- Resume page -------------------------------------------------------- */ .pf-resume { max-width: 78ch; margin-inline: auto; padding-block: var(--s-8) var(--s-11); } .pf-resume-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; padding-bottom: var(--s-6); border-bottom: 1px solid var(--border); } .pf-resume-name { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .pf-resume-title { margin-top: var(--s-1); color: var(--accent-text); font-weight: 600; } .pf-resume-contact { display: flex; flex-direction: column; margin-top: var(--s-4); } .pf-resume-contact li + li { margin-top: var(--s-2); } .pf-resume-contact a { display: flex; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--t-sm); } .pf-resume-contact a:hover { color: var(--accent-text); } .pf-resume-contact .icon { color: var(--accent-text); flex: 0 0 auto; } .pf-resume-body > * + * { margin-top: var(--s-9); } .pf-resume-section > * + * { margin-top: var(--s-4); } .pf-resume-h2 { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); } .pf-resume-strengths { display: flex; flex-direction: column; } .pf-resume-strengths li + li { margin-top: var(--s-2); } .pf-resume-strengths li { display: flex; align-items: center; gap: var(--s-3); color: var(--ink); } .pf-resume-strengths .icon { color: var(--accent-text); flex: 0 0 auto; } .pf-resume-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } .pf-resume-stats > div { display: flex; flex-direction: column; } .pf-resume-stat-value { font-size: var(--t-2xl); font-weight: 700; color: var(--ink); } .pf-resume-stat-label { margin-top: var(--s-1); color: var(--muted); font-size: var(--t-xs); } .pf-resume-skill-row { display: flex; align-items: baseline; flex-wrap: wrap; } .pf-resume-skill-row > * + * { margin-left: var(--s-4); } .pf-resume-skill-label { flex: 0 0 auto; min-width: 12ch; font-weight: 600; color: var(--ink); font-size: var(--t-sm); } @media (max-width: 620px) { .pf-resume-stats { grid-template-columns: 1fr 1fr; } .pf-resume-skill-row { flex-direction: column; } .pf-resume-skill-row > * + * { margin-left: 0; margin-top: var(--s-2); } } /* Print: strip the app chrome down to the resume itself. */ @media print { .topbar, .no-print { display: none; } .shell, .content { max-width: none; padding: 0; margin: 0; } .pf-resume { max-width: none; padding: 0; } body, .shell { background: none; } }