/* ==================================================================== Elliot Piper — Portfolio stylesheet · "Nordic light" edition -------------------------------------------------------------------- Every color, font, spacing value, and radius is a custom property in the :root block below. Change the theme once there and the whole site follows. Dark-theme values live in the [data-theme="dark"] block right after it. The palette is a four-hue system inspired by northern light: · Fjord teal — primary / interactive (links, buttons, focus) · Aurora violet — Skills section + secondary highlights · Polar pink — Projects section · Midnight-sun amber — Experience section + warm details Each hue ships in three strengths: --c-* vivid (decorative fills, dots, gradients) --c-*-ink deep (text — WCAG AA on light surfaces) --c-*-soft tint (chip and badge backgrounds) ==================================================================== */ /* ---------------------------------------------------------------- 1. Theme tokens — light (default) ---------------------------------------------------------------- */ :root { /* Base */ --bg: #fdfcfa; /* page background — bright warm white */ --surface: #ffffff; /* cards, menus, panels */ --text: #211f33; /* primary text — deep indigo ink */ --muted: #5d5b72; /* secondary text */ --border: #e9e6f0; /* hairlines and card borders */ --header-bg: rgba(253, 252, 250, 0.82); /* translucent sticky nav */ /* Hue system */ --c-teal: #14b8a6; --c-teal-ink: #0f766e; --c-teal-soft: #d8f3ee; --c-violet: #8b5cf6; --c-violet-ink: #6d28d9; --c-violet-soft: #ece5fd; --c-pink: #ec4899; --c-pink-ink: #be185d; --c-pink-soft: #fce0ee; --c-amber: #f59e0b; --c-amber-ink: #b45309; --c-amber-soft: #fdeed2; /* Primary interactive color (kept as --accent so existing docs and habits still apply). Fjord teal, continuous with the old theme. */ --accent: var(--c-teal-ink); --accent-strong: #0b5f55; --accent-soft: var(--c-teal-soft); --on-accent: #ffffff; /* Neutral chip used for project tech tags */ --chip-bg: #efedf7; --chip-text: #4c4a63; /* Gradients — the site's recurring "aurora ribbon" */ --grad-aurora: linear-gradient(90deg, var(--c-teal), var(--c-violet) 38%, var(--c-pink) 70%, var(--c-amber)); --grad-aurora-v: linear-gradient(180deg, var(--c-teal), var(--c-violet) 38%, var(--c-pink) 70%, var(--c-amber)); --grad-btn: linear-gradient(135deg, #0e8577, #5b48d6); --btn-ink: #ffffff; /* Type */ --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-display: "Bricolage Grotesque", var(--font-sans); /* Layout & spacing */ --content-width: 1100px; --header-h: 4.25rem; --section-y: clamp(4.5rem, 10vw, 7rem); /* vertical section rhythm */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; /* Radii & effects */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(33, 31, 51, 0.05); --shadow-md: 0 2px 4px rgba(33, 31, 51, 0.04), 0 14px 34px rgba(33, 31, 51, 0.09); --transition: 180ms ease; color-scheme: light; } /* ---------------------------------------------------------------- 1b. Theme tokens — dark ("aurora night") Applied by js/script.js (and the inline script in index.html), which set data-theme on . ---------------------------------------------------------------- */ [data-theme="dark"] { --bg: #0d0e1d; --surface: #16172b; --text: #f2f1fa; --muted: #a5a3bf; --border: #2b2c47; --header-bg: rgba(13, 14, 29, 0.78); --c-teal: #2dd4bf; --c-teal-ink: #5eead4; --c-teal-soft: rgba(45, 212, 191, 0.14); --c-violet: #a78bfa; --c-violet-ink: #c4b5fd; --c-violet-soft: rgba(167, 139, 250, 0.15); --c-pink: #f472b6; --c-pink-ink: #f9a8d4; --c-pink-soft: rgba(244, 114, 182, 0.14); --c-amber: #fbbf24; --c-amber-ink: #fcd34d; --c-amber-soft: rgba(251, 191, 36, 0.14); --accent: var(--c-teal); --accent-strong: #5eead4; --accent-soft: var(--c-teal-soft); --on-accent: #07332c; --chip-bg: rgba(242, 241, 250, 0.08); --chip-text: #c9c7e2; --grad-btn: linear-gradient(135deg, #2dd4bf, #a78bfa); --btn-ink: #101226; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* Fallback: if JavaScript is disabled, still honor the system's dark-mode preference. Values mirror the block above. */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --bg: #0d0e1d; --surface: #16172b; --text: #f2f1fa; --muted: #a5a3bf; --border: #2b2c47; --header-bg: rgba(13, 14, 29, 0.78); --c-teal: #2dd4bf; --c-teal-ink: #5eead4; --c-teal-soft: rgba(45, 212, 191, 0.14); --c-violet: #a78bfa; --c-violet-ink: #c4b5fd; --c-violet-soft: rgba(167, 139, 250, 0.15); --c-pink: #f472b6; --c-pink-ink: #f9a8d4; --c-pink-soft: rgba(244, 114, 182, 0.14); --c-amber: #fbbf24; --c-amber-ink: #fcd34d; --c-amber-soft: rgba(251, 191, 36, 0.14); --accent: var(--c-teal); --accent-strong: #5eead4; --accent-soft: var(--c-teal-soft); --on-accent: #07332c; --chip-bg: rgba(242, 241, 250, 0.08); --chip-text: #c9c7e2; --grad-btn: linear-gradient(135deg, #2dd4bf, #a78bfa); --btn-ink: #101226; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.5); color-scheme: dark; } } /* ---------------------------------------------------------------- 2. Base & reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Keeps anchored sections clear of the sticky header (+ its keyline) */ scroll-padding-top: calc(var(--header-h) + 1.4rem); } body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; transition: background-color var(--transition), color var(--transition); } h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; margin: 0; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } img { display: block; max-width: 100%; } a { color: var(--accent); } .icon { width: 20px; height: 20px; flex: none; } ::selection { background-color: var(--c-amber); color: #201530; } /* Visible focus ring for keyboard users */ :focus-visible { outline: 2px solid var(--c-violet); outline-offset: 3px; border-radius: 4px; } /* Skip link — hidden until focused */ .skip-link { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 100; padding: 0.6rem 1rem; border-radius: var(--radius-sm); background: var(--grad-btn); color: var(--btn-ink); font-weight: 700; text-decoration: none; transform: translateY(-300%); } .skip-link:focus { transform: none; } /* ---------------------------------------------------------------- 3. Shared building blocks ---------------------------------------------------------------- */ .container { width: min(var(--content-width), 100% - 2.5rem); margin-inline: auto; } .section { padding-block: var(--section-y); } /* Each section carries its own hue; components below read these vars. */ :root { --sec: var(--c-teal); --sec-ink: var(--c-teal-ink); --sec-soft: var(--c-teal-soft); } #about { --sec: var(--c-teal); --sec-ink: var(--c-teal-ink); --sec-soft: var(--c-teal-soft); } #skills { --sec: var(--c-violet); --sec-ink: var(--c-violet-ink); --sec-soft: var(--c-violet-soft); } #projects{ --sec: var(--c-pink); --sec-ink: var(--c-pink-ink); --sec-soft: var(--c-pink-soft); } #experience { --sec: var(--c-amber); --sec-ink: var(--c-amber-ink); --sec-soft: var(--c-amber-soft); } #contact { --sec: var(--c-violet); --sec-ink: var(--c-violet-ink); --sec-soft: var(--c-violet-soft); } /* Soft full-bleed color bands give the page a gentle rhythm: plain → tinted → plain → tinted → panel. */ #skills { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-violet) 6%, transparent) 16% 84%, transparent); } #experience { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-amber) 6%, transparent) 16% 84%, transparent); } /* Accent-colored period used in the brand and hero name — a little "midnight sun" */ .accent-dot { color: var(--c-amber); } /* Small label pill with a colored dot, used above every heading. Picks up the section's hue automatically. */ .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; padding: 0.4rem 0.95rem; border: 1px solid color-mix(in srgb, var(--sec) 30%, transparent); border-radius: var(--radius-full); background-color: color-mix(in srgb, var(--sec) 10%, transparent); color: var(--sec-ink); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background-color: var(--sec); } .section-head { margin-bottom: clamp(2.5rem, 6vw, 3.5rem); } .section-head h2 { font-size: clamp(1.9rem, 1.45rem + 2.3vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; } .section-head-center .eyebrow { justify-content: center; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.7rem; border: 1.5px solid transparent; border-radius: var(--radius-full); font-family: inherit; font-size: 0.95rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition), filter var(--transition); } .btn-primary { background: var(--grad-btn); color: var(--btn-ink); box-shadow: 0 6px 18px color-mix(in srgb, var(--c-violet) 24%, transparent), 0 2px 6px color-mix(in srgb, var(--c-teal) 20%, transparent); } .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 28px color-mix(in srgb, var(--c-violet) 32%, transparent), 0 4px 10px color-mix(in srgb, var(--c-teal) 26%, transparent); } .btn-ghost { background-color: transparent; border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: color-mix(in srgb, var(--c-violet) 55%, transparent); background-color: color-mix(in srgb, var(--c-violet) 8%, transparent); color: var(--c-violet-ink); } /* Round icon-only buttons (theme toggle, social links) */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid transparent; border-radius: var(--radius-full); background-color: transparent; color: var(--muted); cursor: pointer; text-decoration: none; transition: color var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition); } .icon-btn:hover { color: var(--accent); background-color: var(--accent-soft); } /* The moon/sun toggle warms up on hover */ #theme-toggle:hover { color: var(--c-amber-ink); background-color: var(--c-amber-soft); } /* Inline text links with a trailing icon */ .text-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--accent); font-size: 0.9rem; font-weight: 700; text-decoration: none; } .text-link .icon { width: 16px; height: 16px; transition: transform var(--transition); } .text-link:hover { text-decoration: underline; text-underline-offset: 4px; } .text-link:hover .icon { transform: translate(2px, -2px); } /* Cards */ .card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* Tag pills — one
  • per skill or technology. Neutral by default; skill cards re-tint them with their own hue. */ .pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; } .pill-list li { padding: 0.35rem 0.8rem; border-radius: var(--radius-full); background-color: var(--chip-bg); color: var(--chip-text); font-size: 0.85rem; font-weight: 600; } .pill-list-small li { padding: 0.25rem 0.65rem; font-size: 0.75rem; } /* ---------------------------------------------------------------- 4. Sticky navigation ---------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background-color: var(--header-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition); } /* The aurora keyline — the site's signature ribbon, first seen here */ .site-header::before { content: ""; display: block; height: 3px; background: var(--grad-aurora); } /* Added by js/script.js once the page is scrolled */ .site-header.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); } .brand { color: var(--text); font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; } .nav-actions { display: flex; align-items: center; gap: 0.4rem; } /* Mobile-first: the menu is a dropdown panel under the header */ .nav-menu { position: absolute; top: 100%; left: 0; right: 0; padding: 0.5rem 0 0.9rem; background-color: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .nav-open .nav-menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .nav-list { display: flex; flex-direction: column; list-style: none; padding: 0 1.25rem; } .nav-link { position: relative; display: block; padding: 0.65rem 0.35rem; border-radius: var(--radius-sm); color: var(--muted); font-weight: 600; text-decoration: none; transition: color var(--transition); } .nav-link:hover { color: var(--text); } /* Active-section indicator (class set by js/script.js) */ .nav-link.active { color: var(--accent); } /* Hamburger button — three bars that morph into an X */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: var(--radius-sm); background-color: transparent; cursor: pointer; } .nav-toggle-bar { display: block; width: 100%; height: 2px; border-radius: var(--radius-full); background-color: var(--text); transition: transform var(--transition), opacity var(--transition); } .nav-open .nav-toggle .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-open .nav-toggle .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-open .nav-toggle .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Desktop: inline links, gradient underline indicator, no hamburger */ @media (min-width: 800px) { .nav-toggle { display: none; } .nav-menu { position: static; padding: 0; background-color: transparent; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .nav-list { flex-direction: row; gap: 1.9rem; padding: 0; } .nav-link { padding: 0.3rem 0; font-size: 0.95rem; } .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2.5px; border-radius: var(--radius-full); background: var(--grad-aurora); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } } /* Theme-toggle icon swap: moon in light mode, sun in dark mode */ .icon-sun { display: none; } [data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; } /* ---------------------------------------------------------------- 5. Hero ---------------------------------------------------------------- */ .hero { --sec: var(--c-teal); --sec-ink: var(--c-teal-ink); --sec-soft: var(--c-teal-soft); position: relative; overflow: hidden; padding-block: clamp(5rem, 13vw, 8.5rem) clamp(4.5rem, 10vw, 7rem); } /* Decorative layer: three soft aurora blobs + a dotted texture. Everything sits behind the content and ignores the pointer. */ .hero-decor { position: absolute; inset: 0; pointer-events: none; } .blob { position: absolute; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: 0.55; } .blob-1 { top: -22%; right: -8%; width: clamp(320px, 46vw, 560px); background: radial-gradient(circle at 32% 32%, color-mix(in srgb, var(--c-violet) 55%, transparent), transparent 70%); animation: drift 17s ease-in-out infinite alternate; } .blob-2 { top: 16%; left: -12%; width: clamp(260px, 36vw, 440px); background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--c-teal) 50%, transparent), transparent 70%); animation: drift 21s ease-in-out infinite alternate-reverse; } .blob-3 { right: 16%; bottom: -22%; width: clamp(200px, 26vw, 320px); background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--c-amber) 55%, transparent), transparent 70%); animation: drift 14s ease-in-out infinite alternate; } @keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(26px, -22px, 0) scale(1.07); } } .dot-grid { position: absolute; top: 16%; left: 0; width: min(420px, 58vw); height: 300px; background-image: radial-gradient( color-mix(in srgb, var(--text) 26%, transparent) 1.2px, transparent 1.3px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); opacity: 0.4; } .hero-inner { position: relative; /* keeps content above the decor */ } .hero-name { margin-bottom: 0.7rem; font-size: clamp(2.8rem, 1.7rem + 6vw, 4.75rem); font-weight: 800; letter-spacing: -0.03em; } /* Wavy aurora underline beneath the professional title */ .hero-title { width: fit-content; margin-bottom: 1.4rem; padding-bottom: 0.55em; color: var(--text); font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.7vw, 1.8rem); font-weight: 700; letter-spacing: -0.01em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='wg' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2314B8A6'/%3E%3Cstop offset='0.5' stop-color='%238B5CF6'/%3E%3Cstop offset='1' stop-color='%23EC4899'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2,8 Q10,2 18,8 T34,8 T50,8 T66,8 T82,8 T98,8 T114,8 T130,8 T146,8 T162,8 T178,8 T198,8' fill='none' stroke='url(%23wg)' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 9px no-repeat; } .hero-tagline { max-width: 34rem; margin-bottom: 2.25rem; color: var(--muted); font-size: 1.0625rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; } /* ---------------------------------------------------------------- 6. About ---------------------------------------------------------------- */ .about-grid { display: grid; gap: 2.5rem; align-items: center; } .about-text p { max-width: 60ch; color: var(--muted); } .about-text p + p { margin-top: 1.1rem; } .about-portrait-wrap { justify-self: center; } /* The portrait sits inside a slowly turning aurora ring, with two small playful shapes tucked behind and in front of it. */ .portrait-frame { position: relative; width: fit-content; } .portrait-ring { position: absolute; inset: -12px; border-radius: 50%; background: conic-gradient( var(--c-teal), var(--c-violet), var(--c-pink), var(--c-amber), var(--c-teal)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); opacity: 0.9; } @keyframes spin { to { transform: rotate(1turn); } } .portrait-shape { position: absolute; border-radius: 50%; } /* Solid amber dot peeking over the bottom-left rim */ .portrait-shape-a { z-index: 2; bottom: 4px; left: -8px; width: 42px; height: 42px; background-color: var(--c-amber); box-shadow: var(--shadow-sm); } /* Dashed teal circle floating behind the top-right rim */ .portrait-shape-b { z-index: 0; top: -26px; right: -30px; width: 74px; height: 74px; border: 3px dashed color-mix(in srgb, var(--c-teal) 60%, transparent); } .about-portrait { position: relative; z-index: 1; width: clamp(220px, 42vw, 300px); aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--surface); object-fit: cover; object-position: 50% 18%; /* keeps the face nicely framed in the circle */ box-shadow: var(--shadow-md); background: linear-gradient(160deg, var(--accent-soft), var(--surface)); } @media (min-width: 800px) { .about-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 4.5rem; } } /* ---------------------------------------------------------------- 7. Skills — each category owns one hue ---------------------------------------------------------------- */ .skills-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .skill-card { /* Default hue; the modifier classes below override it */ --sk: var(--c-teal); --sk-ink: var(--c-teal-ink); --sk-soft: var(--c-teal-soft); position: relative; overflow: hidden; padding: 1.8rem 1.5rem 1.6rem; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .skill-card-teal { --sk: var(--c-teal); --sk-ink: var(--c-teal-ink); --sk-soft: var(--c-teal-soft); } .skill-card-violet { --sk: var(--c-violet); --sk-ink: var(--c-violet-ink); --sk-soft: var(--c-violet-soft); } .skill-card-pink { --sk: var(--c-pink); --sk-ink: var(--c-pink-ink); --sk-soft: var(--c-pink-soft); } /* Colored top bar */ .skill-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background-color: var(--sk); } .skill-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sk) 35%, var(--border)); box-shadow: 0 14px 34px color-mix(in srgb, var(--sk) 20%, transparent); } /* Rounded icon chip above the category name */ .skill-chip { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 1rem; border-radius: var(--radius-md); background-color: var(--sk-soft); color: var(--sk-ink); } .skill-chip .icon { width: 22px; height: 22px; } .skill-card h3 { margin-bottom: 1rem; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; } /* Skill pills take the card's hue */ .skill-card .pill-list li { background-color: var(--sk-soft); color: var(--sk-ink); } @media (min-width: 800px) { .skills-grid { grid-template-columns: repeat(3, 1fr); } } /* ---------------------------------------------------------------- 8. Projects — thumbnails become small color scenes ---------------------------------------------------------------- */ .projects-grid { display: grid; grid-template-columns: 1fr; /* 1 column on mobile */ gap: 1.5rem; } .project-card { --pc: var(--c-teal); /* hue used for the hover glow */ display: flex; flex-direction: column; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .project-card:has(.thumb-a) { --pc: var(--c-teal); } .project-card:has(.thumb-b) { --pc: var(--c-violet); } .project-card:has(.thumb-c) { --pc: var(--c-amber); } .project-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--pc) 35%, var(--border)); box-shadow: 0 18px 40px color-mix(in srgb, var(--pc) 20%, transparent); } /* Image placeholder. If you swap in an , the sizing and cropping rules still apply automatically. */ .project-thumb { /* Hue pair per thumbnail; overridden by thumb-a/b/c below */ --pt: var(--c-teal); --pt2: var(--c-violet); --pt-ink: var(--c-teal-ink); position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--pt) 22%, var(--border)); color: var(--pt-ink); object-fit: cover; /* used when the placeholder becomes an */ background: radial-gradient(120% 100% at 85% 12%, color-mix(in srgb, var(--pt) 28%, transparent), transparent 55%), radial-gradient(110% 120% at 10% 92%, color-mix(in srgb, var(--pt2) 22%, transparent), transparent 58%), linear-gradient(160deg, color-mix(in srgb, var(--pt) 10%, var(--surface)), var(--surface)); } /* Two hue pairs + one warm trio so the three cards feel related but not copy-pasted */ .thumb-a { --pt: var(--c-teal); --pt2: var(--c-violet); --pt-ink: var(--c-teal-ink); } .thumb-b { --pt: var(--c-violet); --pt2: var(--c-pink); --pt-ink: var(--c-violet-ink); } .thumb-c { --pt: var(--c-amber); --pt2: var(--c-pink); --pt-ink: var(--c-amber-ink); } /* Translucent ring drifting off the top-right corner */ .project-thumb::before { content: ""; position: absolute; top: -28px; right: -28px; width: 116px; height: 116px; border: 2.5px solid color-mix(in srgb, var(--pt) 45%, transparent); border-radius: 50%; } /* Small dotted patch in the lower-left corner */ .project-thumb::after { content: ""; position: absolute; bottom: 12px; left: 14px; width: 120px; height: 84px; background-image: radial-gradient( color-mix(in srgb, var(--pt) 55%, transparent) 1.4px, transparent 1.5px); background-size: 12px 12px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); opacity: 0.75; } /* The icon floats in a frosted chip */ .project-thumb .icon { z-index: 1; width: 64px; height: 64px; padding: 15px; border-radius: var(--radius-lg); background-color: color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 8px 20px color-mix(in srgb, var(--pt) 25%, transparent); transition: transform var(--transition); } .project-card:hover .project-thumb .icon { transform: scale(1.07) rotate(-3deg); } .project-body { display: flex; flex: 1; flex-direction: column; gap: 0.9rem; padding: 1.4rem 1.5rem 1.6rem; } .project-body h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; } .project-body p { color: var(--muted); font-size: 0.95rem; } .project-links { display: flex; gap: 1.25rem; margin-top: auto; /* pins links to the card's bottom edge */ padding-top: 0.25rem; } @media (min-width: 640px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .projects-grid { grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */ } } /* ---------------------------------------------------------------- 9. Experience — the timeline is the aurora ribbon itself ---------------------------------------------------------------- */ .timeline { position: relative; max-width: 720px; list-style: none; } /* The vertical gradient line */ .timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 3px; border-radius: var(--radius-full); background: var(--grad-aurora-v); } .timeline-item { /* Default hue; each entry gets its own via nth-child below */ --tl: var(--c-teal); --tl-ink: var(--c-teal-ink); --tl-soft: var(--c-teal-soft); position: relative; padding: 0 0 2.75rem 2.5rem; } /* Entry hues follow the ribbon: teal → violet → pink → amber */ .timeline-item:nth-child(1) { --tl: var(--c-teal); --tl-ink: var(--c-teal-ink); --tl-soft: var(--c-teal-soft); } .timeline-item:nth-child(2) { --tl: var(--c-violet); --tl-ink: var(--c-violet-ink); --tl-soft: var(--c-violet-soft); } .timeline-item:nth-child(3) { --tl: var(--c-pink); --tl-ink: var(--c-pink-ink); --tl-soft: var(--c-pink-soft); } .timeline-item:nth-child(4) { --tl: var(--c-amber); --tl-ink: var(--c-amber-ink); --tl-soft: var(--c-amber-soft); } .timeline-item:last-child { padding-bottom: 0; } /* The dot on the line */ .timeline-item::before { content: ""; position: absolute; top: 6px; left: 1px; width: 15px; height: 15px; border-radius: 50%; background-color: var(--tl); box-shadow: 0 0 0 4px var(--tl-soft); } .timeline-date { margin-bottom: 0.35rem; color: var(--tl-ink); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .timeline-role { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; } .timeline-company { margin: 0.15rem 0 0.8rem; color: var(--muted); font-weight: 600; } .timeline-points { display: grid; gap: 0.45rem; padding-left: 1.1rem; color: var(--muted); font-size: 0.95rem; } .timeline-points li::marker { color: var(--tl); } /* ---------------------------------------------------------------- 10. Contact — a gradient-framed panel with soft corner glows ---------------------------------------------------------------- */ .contact-inner { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem); border: 1.5px solid transparent; border-radius: 28px; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-aurora) border-box; box-shadow: var(--shadow-md); text-align: center; } /* Two soft glows in opposite corners */ .contact-inner::before, .contact-inner::after { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; filter: blur(70px); opacity: 0.5; pointer-events: none; } .contact-inner::before { top: -130px; left: -110px; background: radial-gradient(circle, color-mix(in srgb, var(--c-teal) 45%, transparent), transparent 70%); } .contact-inner::after { right: -110px; bottom: -130px; background: radial-gradient(circle, color-mix(in srgb, var(--c-violet) 45%, transparent), transparent 70%); } .contact-inner > * { position: relative; z-index: 1; } .contact-lead { max-width: 34rem; margin-bottom: 2rem; color: var(--muted); font-size: 1.05rem; } .contact-email { margin-top: 1.25rem; color: var(--muted); font-size: 0.95rem; } .socials { display: flex; gap: 0.75rem; margin-top: 1.75rem; list-style: none; } .social-link { border-color: var(--border); } .social-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c-pink) 45%, transparent); background-color: var(--c-pink-soft); color: var(--c-pink-ink); } /* ---------------------------------------------------------------- 11. Footer ---------------------------------------------------------------- */ .site-footer { position: relative; padding-block: 1.9rem; } /* Faded echo of the header's aurora keyline */ .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-aurora); opacity: 0.65; } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; } .footer-copy { color: var(--muted); font-size: 0.875rem; } /* "Fable 5 assisted" credit pill next to the copyright line */ .fable-pill { display: inline-flex; align-items: center; gap: 0.4rem; margin-inline-start: 0.6rem; padding: 0.3rem 0.72rem; vertical-align: middle; border: 1px solid rgba(139, 92, 246, 0.35); border: 1px solid color-mix(in srgb, var(--c-violet) 32%, transparent); border-radius: 999px; background-color: rgba(139, 92, 246, 0.09); background-color: color-mix(in srgb, var(--c-violet) 9%, transparent); color: var(--c-violet-ink, #6d28d9); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .fable-pill .icon { width: 13px; height: 13px; } .back-to-top { font-size: 0.875rem; } .back-to-top .icon { width: 14px; height: 14px; } .back-to-top:hover .icon { transform: translateY(-2px); } /* ---------------------------------------------------------------- 12. Fade-in-on-scroll (driven by IntersectionObserver in js/script.js, which adds .visible) ---------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--reveal-delay, 0s); } .reveal.visible { opacity: 1; transform: none; } /* Small stagger utilities for grids */ .delay-1 { --reveal-delay: 90ms; } .delay-2 { --reveal-delay: 180ms; } /* ---------------------------------------------------------------- 13. Reduced motion — show everything, animate nothing ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* Floating message button (bottom-right) */ .msg-fab { position: fixed; right: 20px; bottom: 20px; z-index: 99998; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background-color: var(--accent, #0e8577); color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease; } .msg-fab svg { width: 26px; height: 26px; } .msg-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.34); } /* Dark theme: the accent goes bright, so the icon flips dark (same treatment as your primary buttons) */ [data-theme="dark"] .msg-fab { color: #101226; }