/* ========================================================= Soft glass over a pixel meadow. Mobile first. Colors, fonts and motion all start in :root below. ========================================================= */ :root { /* Scene images (the deployed site loads these files) */ --img-mobile: url("../img/bg-mobile.webp"); --img-desktop: url("../img/bg-desktop.webp"); /* Ink */ --ink: #1d2a47; --ink-2: #44506f; --ink-3: #5b6786; /* Scene */ --sky: #7ec8f0; --peach: #ffe3c2; --bg: #bfe3f5; /* Glass */ --glass: rgba(255, 255, 255, .58); --glass-hi: rgba(255, 255, 255, .78); --glass-line: rgba(255, 255, 255, .8); --glass-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 -1px 0 rgba(255, 255, 255, .25) inset, 0 28px 50px -26px rgba(29, 42, 71, .45), 0 3px 8px rgba(29, 42, 71, .06); /* Accents */ --blue: #4a7fe0; --blue-deep: #3459c0; --sun: #ffd66b; --sun-deep: #f5b83d; --pink: #ff8fb1; --mint: #8bd450; /* Tile tints */ --t-pink: #ffe0ea; --t-sky: #d9ecfb; --t-sun: #fff0bf; --t-mint: #e1f6d3; --t-lilac: #ebe5ff; --radius-lg: 30px; --radius-md: 22px; --spring: cubic-bezier(.34, 1.56, .64, 1); --liquid: cubic-bezier(.22, 1, .36, 1); --ease: cubic-bezier(.22, 1, .36, 1); --display: "Fredoka", "Nunito", system-ui, sans-serif; --body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --pixel: "Pixelify Sans", "Courier New", monospace; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--bg) linear-gradient(180deg, var(--sky), var(--peach)); min-height: 100vh; min-height: 100dvh; overflow-x: hidden; } body.intro-open { overflow: hidden; } ::selection { background: var(--sun); color: var(--ink); } img { max-width: 100%; height: auto; display: block; } a { color: var(--blue-deep); font-weight: 600; text-underline-offset: 3px; } a:hover { color: var(--ink); } :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 12px; } h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.01em; text-wrap: balance; } p { margin: 0; } .px { font-family: var(--pixel); font-weight: 600; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); } .ico { width: 1.1em; height: 1.1em; flex: none; } .skip-link { position: absolute; left: -999px; top: 8px; z-index: 500; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 99px; } .skip-link:focus { left: 12px; } /* --------------------------------------------------------- Glass --------------------------------------------------------- */ .glass { position: relative; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--glass-line); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); } /* bright rim that fades along the edge, like light catching a pane */ .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(140deg, rgba(255,255,255,.95), rgba(255,255,255,0) 38%, rgba(255,255,255,.35) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255, 255, 255, .88); } } /* --------------------------------------------------------- Scene --------------------------------------------------------- */ .scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--sky), var(--peach) 70%, #8bd450 70%, #3e8e2e); } .scene .bg { position: absolute; inset: -4% -4% -2%; background: var(--img-mobile) center bottom / cover no-repeat; will-change: transform; } @media (min-width: 900px) { .scene .bg { background-image: var(--img-desktop); } } .cloud-wrap { position: absolute; left: 0; will-change: transform; } .cloud { display: block; height: auto; image-rendering: pixelated; opacity: .95; animation: drift var(--dur, 90s) linear infinite; animation-delay: var(--delay, 0s); transform: translateX(-30vw); } .w1 { top: 9%; --k: -.05; --dur: 95s; --delay: -20s; } .w1 .cloud { width: 150px; } .w2 { top: 24%; --k: -.09; --dur: 130s; --delay: -70s; } .w2 .cloud { width: 230px; } .w3 { top: 15%; --k: -.03; --dur: 110s; --delay: -40s; } .w3 .cloud { width: 105px; } @keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } } /* --------------------------------------------------------- Buttons: soft, pillowy, springy --------------------------------------------------------- */ .btn { --b1: #6b9df2; --b2: #3b66d0; --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer; font: 600 1.05rem/1 var(--display); letter-spacing: .01em; text-decoration: none; color: var(--fg); background: linear-gradient(180deg, var(--b1), var(--b2)); box-shadow: inset 0 2px 1px rgba(255,255,255,.6), inset 0 -5px 9px rgba(18, 38, 110, .28), 0 12px 18px -8px rgba(52, 89, 192, .6), 0 2px 0 rgba(29, 42, 71, .1); text-shadow: 0 1px 1px rgba(18, 38, 110, .35); transition: transform .45s var(--spring), box-shadow .3s var(--ease); -webkit-tap-highlight-color: transparent; } .btn:hover { color: var(--fg); transform: translateY(-3px) scale(1.03); } .btn:active { transform: translateY(2px) scale(.96); transition-duration: .12s; box-shadow: inset 0 2px 1px rgba(255,255,255,.45), inset 0 -2px 5px rgba(18,38,110,.3), 0 4px 8px -4px rgba(52,89,192,.6); } .btn.soft { --b1: rgba(255,255,255,.95); --b2: rgba(255,255,255,.6); --fg: var(--ink); text-shadow: none; box-shadow: inset 0 2px 1px #fff, inset 0 -4px 8px rgba(80, 110, 170, .16), 0 10px 16px -8px rgba(29,42,71,.35), 0 0 0 1px rgba(255,255,255,.7); } .btn.small { min-height: 44px; padding: 0 20px; font-size: .98rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .btn-row.center { justify-content: center; } /* --------------------------------------------------------- Opening screen: pastel, frosted glass, about 3 seconds, once per visit --------------------------------------------------------- */ .intro { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; overflow: hidden; color: #1d1d1f; background: linear-gradient(160deg, #ffe3d3 0%, #ffe0ec 32%, #d8f4e8 62%, #d3e8ff 100%); transition: opacity .8s ease .1s, visibility .9s; animation: introFail .01s linear 4.6s forwards; } .intro.out { opacity: 0; visibility: hidden; } @keyframes introFail { to { opacity: 0; visibility: hidden; } } .orb { position: absolute; border-radius: 50%; opacity: .9; will-change: transform; animation: odrift 20s ease-in-out infinite alternate; } .orb.o1 { width: 62vmax; height: 62vmax; left: -22vmax; top: -20vmax; background: #ffc9ad; } .orb.o2 { width: 52vmax; height: 52vmax; right: -20vmax; top: -8vmax; background: #ffc6dd; animation-duration: 24s; animation-delay: -6s; } .orb.o3 { width: 56vmax; height: 56vmax; left: -14vmax; bottom: -30vmax; background: #b8efd8; animation-duration: 22s; animation-delay: -10s; } .orb.o4 { width: 54vmax; height: 54vmax; right: -18vmax; bottom: -26vmax; background: #b9dcff; animation-duration: 26s; animation-delay: -3s; } @keyframes odrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vmax, 4vmax, 0) scale(1.1); } } .monu { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 38vh; opacity: 0; transform: translateY(12%); shape-rendering: crispEdges; animation: monuRise 3s cubic-bezier(.2, .7, .2, 1) .1s forwards; pointer-events: none; } .monu use { stroke: #7f8fc0; } @keyframes monuRise { to { opacity: .26; transform: none; } } .pxd { position: absolute; shape-rendering: crispEdges; opacity: .85; animation: pxdrift 11s ease-in-out infinite alternate; pointer-events: none; } @keyframes pxdrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(10px, -14px, 0); } } .icard-wrap { position: relative; width: min(90vw, 540px); animation: floaty 9s ease-in-out infinite alternate; } @keyframes floaty { from { transform: translateY(-6px); } to { transform: translateY(8px); } } .icard { position: relative; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", Roboto, sans-serif; text-align: center; padding: clamp(28px, 7vw, 56px) clamp(20px, 6vw, 48px) clamp(26px, 6vw, 44px); border-radius: 32px; background: rgba(255, 255, 255, .56); border: 1px solid rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: 0 1px 1px rgba(60, 50, 90, .05), 0 6px 12px rgba(60, 50, 90, .06), 0 28px 56px -18px rgba(60, 50, 90, .22), 0 60px 100px -40px rgba(60, 50, 90, .22), inset 0 1px 0 rgba(255, 255, 255, .9); animation: cardIn .9s cubic-bezier(.2, .7, .2, 1) both; transition: transform .85s cubic-bezier(.4, 0, .2, 1), opacity .7s ease, filter .85s ease; } @keyframes cardIn { from { opacity: 0; transform: scale(.95) translateY(12px); } } .intro.out .icard { transform: scale(1.14); opacity: 0; filter: blur(16px); } .greet { position: relative; height: 1.25em; font-family: "Pixelify Sans", "Courier New", monospace; font-weight: 600; font-size: clamp(2.3rem, 11vw, 4rem); line-height: 1.25; letter-spacing: .01em; color: #3a3a46; } .greet span { position: absolute; inset: 0; opacity: 0; transition: opacity .14s ease; white-space: nowrap; } .greet span.on { opacity: 1; } .me, .sub, .enter { opacity: 0; transform: translateY(10px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); } .me { margin: 10px 0 0; font-weight: 700; font-size: clamp(2.6rem, 12.6vw, 4.6rem); letter-spacing: -.05em; line-height: 1.05; color: #1d1d1f; } .sub { margin: 14px 0 0; font-size: clamp(1rem, .95rem + .4vw, 1.1875rem); color: #6b6b73; transition-delay: .12s; } .enter { font-family: inherit; margin-top: clamp(22px, 5vw, 32px); min-height: 52px; padding: 0 38px; border-radius: 999px; cursor: pointer; font: 600 1.0625rem/1 var(--body); color: #1d1d1f; transition-delay: .24s; background: linear-gradient(135deg, rgba(255, 224, 210, .9), rgba(255, 220, 236, .9) 35%, rgba(205, 243, 228, .9) 68%, rgba(204, 229, 255, .95)); border: 1px solid rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -8px rgba(120, 130, 200, .45), 0 0 26px rgba(190, 215, 255, .55); } .intro.final .me, .intro.final .sub, .intro.final .enter { opacity: 1; transform: none; } .intro.final .enter:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 28px -10px rgba(120, 130, 200, .5), 0 0 34px rgba(190, 215, 255, .7); filter: saturate(.92) brightness(1.02); } .intro.final .enter:active { transform: translateY(0) scale(.985); } .intro .enter:focus-visible { outline: 3px solid #0071e3; outline-offset: 3px; } /* --------------------------------------------------------- Nav --------------------------------------------------------- */ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 90; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgba(255,255,255,.3); } .topbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 80; width: min(1180px, calc(100% - max(24px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 24px))); margin: calc(12px + env(safe-area-inset-top, 0px)) auto 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 8px 8px 12px; border-radius: 999px; } .dock a { text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .98rem; padding: 10px 16px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; transition: background .3s, color .3s; } .dock a[aria-current="true"] { background: #fff; color: var(--ink); box-shadow: 0 4px 10px -4px rgba(29,42,71,.35); } .dock { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 2px; padding: 6px; border-radius: 999px; max-width: calc(100vw - 24px); } .dock a { padding: 10px 14px; font-size: .92rem; } /* --------------------------------------------------------- Layout --------------------------------------------------------- */ .layout { width: min(1180px, 100%); margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-left, 0px)) 120px; padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "profile" "content"; } .hero { grid-area: hero; } .profile { grid-area: profile; } .content { grid-area: content; } @media (min-width: 960px) { .layout { grid-template-columns: 360px minmax(0, 1fr); grid-template-areas: "profile hero" "profile content"; grid-template-rows: auto 1fr; gap: 24px; padding-top: 30px; padding-bottom: 60px; align-items: start; } .profile { position: sticky; top: var(--stick, 96px); } } .content { display: grid; gap: 22px; min-width: 0; grid-template-columns: minmax(0, 1fr); } .panel { padding: clamp(20px, 3.2vw, 32px); min-width: 0; scroll-margin-top: 96px; } .panel h2 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 1.95rem); margin-bottom: 14px; display: flex; align-items: baseline; gap: 12px; } .panel h2 .px { font-size: .8rem; color: var(--blue-deep); background: rgba(74,127,224,.12); padding: 3px 9px; border-radius: 99px; transform: translateY(-3px); } .panel > p + p { margin-top: 12px; } /* scroll-driven rise, uses transform only so everything stays visible at rest */ @supports (animation-timeline: view()) { .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; } @keyframes rise { from { transform: translateY(26px) scale(.985); } to { transform: none; } } } /* --------------------------------------------------------- Hero --------------------------------------------------------- */ .hero { padding: clamp(24px, 4vw, 40px); scroll-margin-top: 100px; } .status { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; color: var(--ink); background: rgba(255, 255, 255, .62); border: 1px solid rgba(255,255,255,.8); padding: 7px 14px; border-radius: 99px; } .hero h1 { font-size: clamp(2.5rem, 1.4rem + 5vw, 4.5rem); font-weight: 700; margin: 18px 0 14px; line-height: 1.04; } .hl { position: relative; display: inline-block; white-space: nowrap; } .squiggle { position: absolute; left: 0; bottom: -.16em; width: 100%; height: .22em; color: var(--sun-deep); } .hero-sub { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--ink-2); max-width: 36em; margin-bottom: 24px; } /* --------------------------------------------------------- Profile --------------------------------------------------------- */ .profile { padding: 18px 18px 22px; } .portrait-wrap { position: relative; } .portrait { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #8fd0f3, #ffe3c2 62%, #8bd450 62%, #3e8e2e); box-shadow: inset 0 0 0 4px rgba(255,255,255,.85), 0 18px 28px -16px rgba(29,42,71,.5); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); } .portrait img { width: 100%; height: 100%; object-fit: cover; } .portrait::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.4), rgba(255,255,255,0) 55%); opacity: var(--go, 0); transition: opacity .4s; } @media (max-width: 959px) { .portrait-wrap { max-width: 360px; margin: 0 auto; } } .name { font-size: 1.7rem; font-weight: 700; text-align: center; margin: 18px 0 2px; } .role { text-align: center; font-weight: 600; color: var(--ink-2); } .tag { text-align: center; color: var(--ink-2); margin: 6px 0 14px; font-size: 1rem; } .loc { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; background: rgba(255,255,255,.65); border-radius: 99px; padding: 9px 14px; color: var(--ink); } .loc .ico { color: var(--pink); width: 1.2em; height: 1.2em; } .label { margin: 20px 0 10px; } .chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 6px 14px; border-radius: 99px; font-weight: 600; font-size: .9rem; color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 6px -3px rgba(29,42,71,.3); transition: transform .4s var(--spring); } .chip:hover { transform: translateY(-2px) rotate(-1.5deg); } .c1 { background: var(--t-mint); } .c2 { background: var(--t-sky); } .c3 { background: var(--t-sun); } .c4 { background: var(--t-pink); } .c5 { background: var(--t-lilac); } .link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .link-list a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; border-radius: 16px; text-decoration: none; color: var(--ink); background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 #fff, 0 6px 10px -8px rgba(29,42,71,.5); transition: transform .4s var(--spring), background .3s; } .link-list a:hover { background: #fff; transform: translateY(-2px); } .link-list a .ico { transition: transform .4s var(--spring); color: var(--blue-deep); } .link-list a:hover .ico { transform: translate(3px, -3px); } /* --------------------------------------------------------- Tiles, stats --------------------------------------------------------- */ .grid2 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tile { display: block; border-radius: var(--radius-md); padding: 18px; color: var(--ink); text-decoration: none; font-weight: 400; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 18px -14px rgba(29,42,71,.55); transition: transform .5s var(--spring), box-shadow .3s; } .tile h3 { font-size: 1.2rem; margin-bottom: 6px; } .tile p { color: var(--ink-2); } .t-pink { background: var(--t-pink); } .t-sky { background: var(--t-sky); } .t-sun { background: var(--t-sun); } .t-mint { background: var(--t-mint); } .project { display: grid; gap: 4px; align-content: start; } .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--blue-deep); } .more .ico { transition: transform .4s var(--spring); } .project:hover, .quest:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 22px 26px -16px rgba(29,42,71,.55); } .project:hover .more .ico { transform: translate(3px, -3px); } .quest { display: grid; gap: 4px; align-content: start; min-height: 128px; } .quest strong { font: 600 1.2rem var(--display); } .quest > span:last-child { color: var(--ink-2); } .quest:active { transform: scale(.97); transition-duration: .12s; } /* --------------------------------------------------------- Tabs --------------------------------------------------------- */ .tabs { display: grid; gap: 18px; } @media (min-width: 680px) { .tabs { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; } } .tablist { position: relative; display: flex; gap: 4px; padding: 6px; background: rgba(255,255,255,.45); border-radius: 22px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 2px 4px rgba(29,42,71,.1); align-self: start; } .tablist::-webkit-scrollbar { display: none; } @media (min-width: 680px) { .tablist { flex-direction: column; overflow: visible; } } .tab-ind { position: absolute; left: 0; top: 0; width: var(--iw, 0); height: var(--ih, 0); transform: translate(var(--ix, 0), var(--iy, 0)); background: #fff; border-radius: 17px; box-shadow: 0 8px 14px -8px rgba(29,42,71,.55), inset 0 -2px 0 rgba(74,127,224,.15); transition: transform .5s var(--spring), width .4s var(--ease), height .4s var(--ease); } .tablist button { position: relative; z-index: 1; font: 600 1rem var(--display); color: var(--ink-3); background: transparent; border: 0; border-radius: 17px; padding: 12px 18px; min-height: 48px; text-align: left; cursor: pointer; white-space: nowrap; transition: color .3s; -webkit-tap-highlight-color: transparent; } @media (min-width: 680px) { .tablist button { white-space: normal; } } .tablist button[aria-selected="true"] { color: var(--ink); } .tablist button:hover { color: var(--ink); } [role="tabpanel"]:not([hidden]) { animation: fadeUp .5s var(--ease); } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } } .tabpanels h3 { font-size: 1.35rem; } .at { color: #2f8f46; } .meta { color: var(--ink-3); font-weight: 600; margin: 4px 0 12px; } .bul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .bul li { position: relative; padding-left: 26px; } .bul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(145deg, #ffb3cc, #ff7ca3); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); transform: rotate(45deg) scale(.85); } /* --------------------------------------------------------- Contact, footer, toast --------------------------------------------------------- */ .cta { text-align: center; background: linear-gradient(160deg, rgba(255,240,191,.8), rgba(255,255,255,.6)); } .cta h2 { justify-content: center; } .cta > p { max-width: 34em; margin-left: auto; margin-right: auto; color: var(--ink-2); } .mail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 !important; font-weight: 600; color: var(--ink) !important; } .mail strong { background: rgba(255,255,255,.8); padding: 8px 16px; border-radius: 99px; user-select: all; overflow-wrap: anywhere; box-shadow: inset 0 1px 0 #fff, 0 6px 10px -8px rgba(29,42,71,.5); } .toast { position: fixed; z-index: 600; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 24px) scale(.96); opacity: 0; pointer-events: none; background: var(--ink); color: #fff; font-weight: 600; padding: 12px 20px; border-radius: 999px; max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 14px 24px -10px rgba(29,42,71,.7); transition: transform .45s var(--spring), opacity .25s; } .toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); } @media (min-width: 1000px) { .toast { bottom: 32px; } } /* --------------------------------------------------------- Reduced motion --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .cloud-wrap { display: none; } .scene .bg, .portrait { transform: none !important; } } /* ---- Srijan's page: additions ---- */ .hero-tag { font: 600 clamp(1.3rem, 1rem + 1.4vw, 1.85rem)/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); max-width: 24em; margin-bottom: 12px; text-wrap: balance; } .hero-sub { margin-bottom: 24px; } .status .ico { color: var(--pink); width: 1.15em; height: 1.15em; } .skillgrid { display: grid; gap: 4px 28px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 820px) { .skillgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .skillgrid .label { margin: 10px 0 10px; } .badge { display: inline-block; vertical-align: middle; margin-left: 8px; font: 600 .8rem/1 var(--body); padding: 6px 12px; border-radius: 99px; color: #4a3200; background: linear-gradient(180deg, #ffe38e, #f6bc40); box-shadow: inset 0 1px 1px rgba(255,255,255,.85), 0 5px 9px -5px rgba(200,130,0,.55); } .tile .px { margin-bottom: 6px; } /* ---------- Footer: places I'd love to see ---------- */ .foot { padding: clamp(64px, 9vw, 112px) 0 calc(var(--s7) + env(safe-area-inset-bottom, 0px)); text-align: center; } .places { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-bottom: 24px; } .hint { margin-top: 12px; font-size: .8125rem; color: var(--ink-3); } .copy { margin-top: 32px; color: var(--ink-3); font-size: .9375rem; } .foot { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); } @media (min-width: 1000px) { .foot { padding-bottom: 56px; } } /* ---------- Navigation: solid enough to stay readable over cards ---------- */ .topbar, .dock { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } @media (prefers-reduced-motion: reduce) { .orb, .pxd, .icard-wrap, .monu { animation: none !important; } .monu { opacity: .26; transform: none; } } [hidden] { display: none !important; } .hint, .copy { display: inline-block; padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, .78); color: var(--ink-2); } .hint { margin-top: 14px; } /* ---------- Interactive monuments skyline ---------- */ .scroller { overflow-x: auto; overflow-y: hidden; padding: 30px 6px 16px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border-radius: 22px; overscroll-behavior-x: contain; } .stage { --cq: 1vw; width: max(100%, 900px); container-type: inline-size; padding: 0 1cqw; } @supports (width: 1cqw) { .stage { --cq: 1cqw; } } .mrow { display: flex; justify-content: center; align-items: flex-end; } .mrow + .mrow { margin-top: calc(-1.5 * var(--cq)); } .mon { position: relative; top: calc(var(--dy) * var(--cq)); margin: 0 0 0 calc(var(--ml) * var(--cq)); padding: 0; border: 0; background: none; cursor: pointer; z-index: var(--z); height: calc(var(--h) * var(--cq)); flex: none; transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; border-radius: 12px; } .mon .pop { display: block; height: 100%; transform-origin: 50% 100%; transition: transform .55s var(--spring); } .mon img { will-change: transform; display: block; height: 100%; width: auto; transform-origin: 50% 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 6px 5px rgba(29, 42, 71, .3)); animation: sway var(--sd) ease-in-out var(--sl) infinite alternate; } @keyframes sway { from { transform: rotate(-1.7deg); } to { transform: rotate(1.7deg); } } @media (hover: hover) and (pointer: fine) { .mon:hover .pop { transform: translateY(-4px) scale(1.03); } } .mon:active .pop { transform: scale(.96); transition-duration: .12s; } .mon.up { z-index: 20; } .mon.up .pop { transform: translateY(-12px) scale(1.09); } .mon:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } .mlabel { position: fixed; left: 0; top: 0; z-index: 450; max-width: min(320px, calc(100vw - 16px)); padding: 10px 16px; border-radius: 16px; font: 600 .95rem/1.3 var(--display); color: var(--ink); text-align: center; background: rgba(255, 255, 255, .9); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px) scale(.96); transition: opacity .3s ease, transform .4s var(--spring), visibility .3s; } .mlabel.show { opacity: 1; visibility: visible; transform: none; } .hint .h-mouse { display: none; } @media (hover: hover) and (pointer: fine) { .hint .h-touch { display: none; } .hint .h-mouse { display: inline; } } @media (min-width: 900px) { .stage { width: 100%; } .scroller { overflow: visible; padding-top: 34px; } } @media (prefers-reduced-motion: reduce) { .mon img { animation: none; } .mon .pop, .mlabel { transition: none; } } /* ---------- Smoothness: compositor-only motion, fewer blurred layers ---------- */ .orb.o1 { background: radial-gradient(circle, #ffc9ad 0%, rgba(255, 201, 173, 0) 68%); } .orb.o2 { background: radial-gradient(circle, #ffc6dd 0%, rgba(255, 198, 221, 0) 68%); } .orb.o3 { background: radial-gradient(circle, #b8efd8 0%, rgba(184, 239, 216, 0) 68%); } .orb.o4 { background: radial-gradient(circle, #b9dcff 0%, rgba(185, 220, 255, 0) 68%); } .cloud { will-change: transform; } .mon img { will-change: transform; } .foot.idle .mon img { animation-play-state: paused; } html { -webkit-tap-highlight-color: transparent; } button, a, .tile, .chip { touch-action: manipulation; } @supports (animation-timeline: scroll()) { .scene .bg { animation: bgpar linear both; animation-timeline: scroll(root); } .cloud-wrap { animation: cwpar linear both; animation-timeline: scroll(root); } @keyframes bgpar { to { transform: translate3d(0, -110px, 0); } } @keyframes cwpar { to { transform: translate3d(0, calc(var(--k, -.06) * 1200px), 0); } } } /* Tactile press: instant, springy, consistent */ .btn:active, .tile:active, .chip:active, .link-list a:active, .dock a:active, .tablist button:active { transform: translateY(1px) scale(.96); transition-duration: .08s; } .intro.final .enter:active { transform: translateY(1px) scale(.96); transition-duration: .08s; } /* ---------- Liquid motion: real spring curves (falls back to cubic-bezier) ---------- */ @supports (transition-timing-function: linear(0, 1)) { :root { --spring: linear(0.0, 0.0224, 0.081, 0.1645, 0.2632, 0.3691, 0.4759, 0.5789, 0.6746, 0.7607, 0.8359, 0.8996, 0.952, 0.9935, 1.0251, 1.0479, 1.0631, 1.0718, 1.0753, 1.0747, 1.0711, 1.0654, 1.0582, 1.0503, 1.0423, 1.0343, 1.0269, 1.0202, 1.0142, 1.0091, 1.0049, 1.0014, 0.9988, 0.9969, 0.9956, 0.9947, 0.9944, 0.9943, 0.9945, 0.9949, 0.9954, 0.996, 0.9966, 0.9972, 1); --liquid: linear(0.0, 0.0212, 0.0754, 0.151, 0.2388, 0.3317, 0.4246, 0.5137, 0.5965, 0.6715, 0.7381, 0.7959, 0.8452, 0.8864, 0.9203, 0.9476, 0.9691, 0.9856, 0.9979, 1.0068, 1.0128, 1.0166, 1.0186, 1.0193, 1.019, 1.018, 1.0166, 1.015, 1.0132, 1.0114, 1.0097, 1.008, 1.0066, 1.0052, 1.0041, 1.0031, 1.0023, 1.0016, 1.0011, 1.0007, 1.0003, 1.0001, 0.9999, 0.9998, 1); } } /* a touch longer so the springs can breathe */ .tile, .project, .quest { transition: transform .8s var(--spring), box-shadow .5s var(--ease); } .chip, .link-list a, .link-list a .ico, .more .ico { transition-duration: .7s; } .btn { transition: transform .75s var(--spring), box-shadow .4s var(--ease); } .mon .pop { transition: transform .85s var(--spring); } .tab-ind { transition: transform .8s var(--spring), width .6s var(--liquid), height .6s var(--liquid); } .mlabel { transition: opacity .35s ease, transform .7s var(--spring), visibility .35s; } /* sliding nav pill (a single drop of "liquid" that glides between links) */ .has-slide { position: relative; } .has-slide a { position: relative; z-index: 1; } .has-slide a[aria-current="true"] { background: transparent !important; box-shadow: none !important; } .slide { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: #fff; box-shadow: 0 4px 10px -4px rgba(29, 42, 71, .35), inset 0 1px 0 #fff; opacity: 0; transition: transform .8s var(--spring), width .6s var(--liquid), height .6s var(--liquid), opacity .3s; will-change: transform; pointer-events: none; } .slide.still { transition: none; } /* sections arrive with a spring instead of tracking the scroll bar */ .js .reveal { animation: none; opacity: 0; transform: translate3d(0, 38px, 0) scale(.97); transition: opacity .7s ease, transform 1.15s var(--liquid); } .js .reveal.in { opacity: 1; transform: none; } @keyframes tileIn { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.94); } } .js .reveal.in .tile, .js .reveal.in .quest, .js .reveal.in .chip { animation: tileIn 1s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 65ms + 140ms); } .tile:nth-child(2), .chip:nth-child(2) { --i: 1; } .tile:nth-child(3), .chip:nth-child(3) { --i: 2; } .tile:nth-child(4), .chip:nth-child(4) { --i: 3; } .chip:nth-child(5) { --i: 4; } .chip:nth-child(6) { --i: 5; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .slide { transition: none; } } /* ---------- Footer: a meadow with the monuments standing in a row, then a dark-green legal band ---------- */ .foot.fx { padding: 0; margin-top: clamp(56px, 9vw, 110px); text-align: center; display: block; } .meadow { position: relative; padding: clamp(40px, 7vw, 72px) 0 0; background: linear-gradient(180deg, #a9dc6e 0%, #8fcb52 55%, #82c047 100%); } .meadow::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; background: #a9dc6e; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V7Q15 1 30 6T60 6T90 5T120 7V14Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 120px 14px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V7Q15 1 30 6T60 6T90 5T120 7V14Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 120px 14px repeat-x; } .meadow .places { margin: 0 0 clamp(18px, 3vw, 30px); padding: 0 16px; font: 600 clamp(1.3rem, 1.05rem + 1.2vw, 1.9rem)/1.2 var(--display); color: #1d2a47; } .meadow .scroller { overflow-x: auto; overflow-y: hidden; padding: 26px 0 0; border-radius: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .meadow .scroller::-webkit-scrollbar { display: none; } .meadow .stage { position: relative; width: max(100%, 1300px); padding: 0; container-type: inline-size; } @media (min-width: 900px) { .meadow .stage { width: 100%; } .meadow .scroller { overflow: visible; padding-top: 34px; } } .meadow .stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: rgba(240, 252, 214, .7); z-index: 0; pointer-events: none; } .meadow .mrow { position: relative; z-index: 1; padding-bottom: 0; justify-content: flex-start; } .meadow .mon { top: calc(var(--dy) * var(--cq) * -1); } .legal { position: relative; padding: 22px 16px calc(112px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, #4f8a2c, #3f7326); color: #eef8dc; } @media (min-width: 1000px) { .legal { padding-bottom: 40px; } } .legal .copy, .legal .hint { display: block; margin: 0; padding: 0; background: none; border-radius: 0; color: #eef8dc; font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); } .legal .copy { font-weight: 600; } .legal .hint { margin-top: 8px; font-size: .85rem; opacity: .8; } .foot.fx { overflow-x: clip; } /* Section links live in the bottom dock on every screen size */ .dock.has-slide, .dock { position: fixed; } .dock { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; justify-content: flex-start; max-width: min(calc(100vw - 24px), 760px); overscroll-behavior-x: contain; } .dock::-webkit-scrollbar { display: none; } .dock a { flex: none; } .legal { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; } /* ---------- Header journey: a panorama that pans with scroll, and a small character who walks ---------- */ .journey { --ph: 128px; --win: 44px; --ch: 32px; position: relative; flex: 1 1 0; min-width: 0; height: var(--win); margin: 0 0 0 4px; border-radius: calc(var(--win) / 2); overflow: hidden; contain: layout paint; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 2px 8px rgba(29, 42, 71, .12), 0 1px 0 rgba(255, 255, 255, .7); background: #e8f3ee; } .journey::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, 0)); } @media (max-width: 420px) { .journey { margin: 0 2px; } } /* ---------- Squishy: everything you can touch squashes under your finger and jellies back ---------- */ .pbit { position: fixed; z-index: 600; pointer-events: none; border-radius: 2px; image-rendering: pixelated; } .btn, .tile, .chip, .link-list a, .dock a, .tablist button, .badge, .portrait, .status, .quest, .project, .mon .pop, .skillgrid .chip { transform-origin: 50% 70%; -webkit-user-select: none; user-select: none; } .btn:active, .tile:active, .chip:active, .link-list a:active, .dock a:active, .tablist button:active, .badge:active, .portrait:active, .status:active, .quest:active, .project:active { transform: scale(1.05, .9) translateY(2px); transition-duration: .09s; } .mon:active .pop { transform: scale(1.1, .86); transition-duration: .09s; } @media (hover: hover) and (pointer: fine) { .chip:hover, .status:hover, .badge:hover { transform: translateY(-2px) scale(1.06); } .link-list a:hover { transform: translateX(3px) scale(1.02); } } .dock a, .btn { will-change: transform; } /* header: the panorama now fills the whole bar; the wave portrait stands on the grass */ .topbar { padding-right: 8px; } @media (min-width: 900px) { .topbar { padding-top: 10px; padding-bottom: 10px; } } .journey { margin-left: auto; } @media (min-width: 900px) { .topbar { padding-top: 10px; padding-bottom: 10px; } } /* ---------- Tactile 3D icons ---------- */ .tile:has(.ico3d) { position: relative; } .ico3d { position: absolute; top: 12px; right: 12px; width: 46px; height: auto; pointer-events: none; filter: drop-shadow(0 5px 4px rgba(29, 42, 71, .25)); transform-origin: 50% 70%; animation: icobob 4.8s ease-in-out infinite; transition: transform .8s var(--spring); } .tile:has(.ico3d) h3, .tile:has(.ico3d) strong { padding-right: 52px; } .tile.quest strong { display: block; } @keyframes icobob { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -4px; rotate: 2deg; } } .tile:nth-child(2) .ico3d { animation-delay: -1.2s; } .tile:nth-child(3) .ico3d { animation-delay: -2.4s; } .tile:nth-child(4) .ico3d { animation-delay: -3.4s; } @media (hover: hover) and (pointer: fine) { .tile:hover .ico3d { transform: scale(1.18) rotate(-8deg); } } .tile:active .ico3d { transform: scale(.9, 1.1); transition-duration: .1s; } .ico3d-h { display: inline-block; width: 38px; height: auto; vertical-align: -9px; margin-left: 6px; filter: drop-shadow(0 4px 3px rgba(29, 42, 71, .22)); animation: icobob 5s ease-in-out infinite; } .ico3d-s { display: inline-block; width: 24px; height: auto; vertical-align: -6px; margin-right: 6px; filter: drop-shadow(0 2px 2px rgba(29, 42, 71, .22)); } .status .ico3d-s { width: 22px; margin-right: 4px; } .link-list a .lab { display: inline-flex; align-items: center; } @media (prefers-reduced-motion: reduce) { .ico3d, .ico3d-h { animation: none; } } /* Monument card: designed popup */ .mlabel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: max-content; max-width: min(268px, calc(100vw - 16px)); padding: 12px 16px 14px; border-radius: 20px; background: linear-gradient(160deg, #fffdf6, #ffeef6 55%, #eaf6ff); border: 2.5px solid #fff; box-shadow: 0 3px 0 rgba(120,90,160,.18), 0 16px 34px rgba(80,70,140,.22); -webkit-backdrop-filter: none; backdrop-filter: none; transform-origin: var(--tip, 50%) 100%; } .mlabel.below { transform-origin: var(--tip, 50%) 0; } .mlabel .ml-pin { font: 700 .66rem/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #ff8fb1, #ffb86b); padding: 4px 9px; border-radius: 99px; margin-bottom: 6px; box-shadow: 0 2px 0 rgba(200,90,120,.3); } .mlabel .ml-name { font: 700 1.12rem/1.15 var(--display); color: var(--ink); } .mlabel .ml-where { font: 600 .78rem/1.2 var(--display); color: #6c63b0; margin-bottom: 4px; } .mlabel .ml-note { font: 500 .86rem/1.4 "Inter", system-ui, sans-serif; color: #4a4560; } .mlabel .ml-tip { position: absolute; left: var(--tip, 50%); bottom: -7px; width: 14px; height: 14px; background: #ffeef6; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 4px 0; } .mlabel.below .ml-tip { bottom: auto; top: -7px; transform: translateX(-50%) rotate(225deg); background: #fffdf6; } .mlabel { transform: translateY(8px) scale(.82); } .mlabel.show { transform: none; } /* ---------- Clouds: more, plus a faint layer drifting over the text ---------- */ .sky-front { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; } .fcloud { position: absolute; left: 0; opacity: .2; will-change: transform; animation: drift var(--dur) linear infinite; animation-delay: var(--delay); transform: translateX(-40vw); } .fcloud svg { display: block; width: 100%; height: auto; image-rendering: pixelated; } .f1 { top: 22%; width: 340px; --dur: 80s; --delay: -15s; } .f2 { top: 52%; width: 460px; --dur: 115s; --delay: -70s; opacity: .17; } .f3 { top: 76%; width: 260px; --dur: 68s; --delay: -40s; opacity: .22; } @media (max-width: 640px) { .f1 { width: 220px; } .f2 { width: 300px; } .f3 { width: 180px; } } /* ---------- Birds ---------- */ @media (prefers-reduced-motion: reduce) { .sky-front { display: none; } } /* lighter: fewer, fainter, cheaper */ .fcloud { opacity: .13; } /* Portrait: the new illustration on the meadow, with a colour pop */ .portrait { aspect-ratio: 4 / 5.1; background: linear-gradient(180deg, rgba(255,170,200,.35), rgba(255,220,170,.0) 55%), var(--img-desktop) 22% 100% / cover no-repeat, linear-gradient(180deg, #8fd0f3, #8bd450); } .portrait .self { position: absolute; left: 50%; bottom: 3%; width: auto; height: 92%; max-width: none; object-fit: contain; transform: translateX(-50%); transform-origin: 50% 100%; filter: drop-shadow(0 8px 6px rgba(29,42,71,.3)); animation: mebob 4s ease-in-out infinite; } @keyframes mebob { 0%, 100% { transform: translateX(-50%) scale(1, 1); } 50% { transform: translateX(-50%) scale(1.012, 1.02); } } @media (prefers-reduced-motion: reduce) { .portrait .self { animation: none; } } /* Header: the whole panorama, vivid and uncropped; no brand text */ .topbar { width: min(780px, calc(100% - 24px)); padding: 5px; border-radius: 30px; justify-content: center; } .journey { margin: 0; flex: 1 1 100%; max-width: none !important; height: auto; aspect-ratio: 1438 / 278; border-radius: 25px; container-type: inline-size; background: #e8f3ee; } .journey::after { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 40%); } @keyframes hiwave { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; translate: 0 -3%; } } /* Header size back to a slim bar (like before), whole panorama still visible */ .topbar { width: min(500px, calc(100% - 24px)); padding: 4px; border-radius: 26px; } .journey { border-radius: 22px; } /* Slim header: same slim height as before, whole panorama visible */ .topbar { width: min(396px, calc(100% - 24px)); padding: 3px; border-radius: 22px; margin-top: calc(8px + env(safe-area-inset-top, 0px)); top: calc(env(safe-area-inset-top, 0px) + 8px); } .journey { border-radius: 19px; } @media (min-width: 900px) { .topbar { padding: 3px; } } /* Header: full-width slim pill (as before), no logo/Contact; whole panorama centred, sides softly filled */ .topbar { width: min(1180px, calc(100% - 24px)); padding: 5px; border-radius: 999px; margin-top: calc(10px + env(safe-area-inset-top, 0px)); top: calc(env(safe-area-inset-top, 0px) + 10px); } .journey { --H: 70px; --ch: 32px; height: var(--H); aspect-ratio: auto; border-radius: 999px; container-type: normal; flex: 1 1 100%; } @media (min-width: 900px) { .journey { --H: 78px; --ch: 36px; } } .journey::after { z-index: 3; } /* Header: full-bleed edge to edge, slimmer */ .topbar { width: 100%; margin: 0; top: 0; padding: 0; border-radius: 0 0 22px 22px; border-top: 0; } .journey { --H: 54px; --ch: 26px; border-radius: 0 0 20px 20px; } @media (min-width: 900px) { .journey { --H: 60px; --ch: 29px; } } /* Opening screen: same meadow background as the site; Indian-language hellos; waits for Enter */ .intro { background: linear-gradient(180deg, #9fd4f2, #ffd9b8 70%, #8bd450 70%, #3e8e2e); animation: none; } .intro .ibg { position: absolute; inset: 0; background: var(--img-mobile) center bottom / cover no-repeat; } @media (min-width: 900px) { .intro .ibg { background-image: var(--img-desktop); } } .intro .orb, .intro .monu { display: none; } .icard { background: rgba(255, 255, 255, .5); } .greet { font-family: "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gujarati", "Noto Sans Gurmukhi", system-ui, sans-serif; font-weight: 700; line-height: 1.5; height: 1.5em; font-size: clamp(2.1rem, 10vw, 3.5rem); } .greet span { transition: opacity .35s ease, transform .35s ease; transform: translateY(6px); } .greet span.on { transform: none; } .greet span[lang="pa"] { font-size: .8em; } /* Greeting: liquid cross-morph (opacity, transform and a touch of blur only) */ .greet span { opacity: 0; transform: translate3d(0, 22px, 0) scale(.9); filter: blur(9px); transition: opacity .55s ease, transform 1s var(--liquid, cubic-bezier(.34,1.56,.64,1)), filter .6s ease; will-change: transform, opacity, filter; } .greet span.on { opacity: 1; transform: none; filter: blur(0); transition-delay: .08s; } .greet span.gone { opacity: 0; transform: translate3d(0, -20px, 0) scale(1.06); filter: blur(9px); transition: opacity .45s ease, transform .8s cubic-bezier(.3, .7, .3, 1), filter .5s ease; } /* Flying clouds on the opening page */ .isky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .icloud { position: absolute; left: 0; will-change: transform; animation: idrift var(--d) linear infinite; animation-delay: var(--l); transform: translate3d(-40vw, 0, 0); } .icloud svg { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 8px 6px rgba(80, 110, 170, .15)); } @keyframes idrift { 0% { transform: translate3d(-40vw, 0, 0); } 50% { transform: translate3d(35vw, -14px, 0); } 100% { transform: translate3d(115vw, 4px, 0); } } .ic1 { top: 8%; width: 190px; --d: 26s; --l: -6s; } .ic2 { top: 20%; width: 120px; --d: 19s; --l: -14s; opacity: .9; } .ic3 { top: 34%; width: 260px; --d: 38s; --l: -22s; opacity: .85; } .ic4 { top: 6%; width: 90px; --d: 15s; --l: -2s; opacity: .8; } .ic5 { top: 48%; width: 170px; --d: 30s; --l: -18s; opacity: .75; } .ic6 { top: 14%; width: 220px; --d: 44s; --l: -30s; opacity: .9; } @media (max-width: 640px) { .ic1 { width: 130px; } .ic3 { width: 170px; } .ic6 { width: 150px; } .ic5 { width: 110px; } } @media (prefers-reduced-motion: reduce) { .icloud { animation: none; } .greet span { transition: opacity .2s; filter: none; transform: none; } } .icard-wrap { position: relative; z-index: 1; } .icard { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Header: small, rounded, centred pill with the whole panorama */ .topbar { width: max-content; max-width: calc(100% - 24px); margin: calc(10px + env(safe-area-inset-top, 0px)) auto 0; top: calc(env(safe-area-inset-top, 0px) + 10px); padding: 4px; border-radius: 999px; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 3px 0 rgba(120, 100, 170, .16), 0 12px 26px -8px rgba(80, 70, 140, .32); } .journey { --H: 58px; --ch: 28px; flex: none; width: calc(var(--H) * 1438 / 278); height: var(--H); max-width: 100%; border-radius: 999px; } @media (min-width: 900px) { .journey { --H: 66px; --ch: 32px; } } /* Clouds: big ones drift slowly, small ones quickly. A few float over the cards, faint enough to read through. */ .f1 { top: 14%; width: 480px; --dur: 170s; --delay: -60s; opacity: .15; } .f2 { top: 44%; width: 340px; --dur: 120s; --delay: -20s; opacity: .17; } .f3 { top: 66%; width: 210px; --dur: 70s; --delay: -45s; opacity: .2; } .f4 { top: 30%; width: 120px; --dur: 38s; --delay: -12s; opacity: .22; } .f5 { top: 82%; width: 72px; --dur: 22s; --delay: -8s; opacity: .24; } @media (max-width: 640px) { .f1 { width: 300px; } .f2 { width: 220px; } .f3 { width: 140px; } .f4 { width: 90px; } .f5 { width: 56px; } } .w1 { --dur: 95s; } .w2 { --dur: 150s; } .w3 { --dur: 48s; } .greet { font-family: "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gujarati", "Noto Sans Gurmukhi", "Noto Sans Oriya", "Noto Naskh Arabic", system-ui, sans-serif; } .greet span[lang="ur"] { font-family: "Noto Naskh Arabic", system-ui, sans-serif; } /* Header: a wide rounded pill, centred with margins (not edge to edge) */ .topbar { width: min(1020px, calc(100% - 28px)); max-width: none; } .journey { flex: 1 1 100%; width: auto; max-width: none; } /* Portrait: pixel-art sticker of Srijan on its own meadow */ .portrait { aspect-ratio: 720 / 894; background: #8fd0f3; } .portrait .self { left: 0; bottom: 0; width: 100%; height: 100%; transform: none; object-fit: cover; filter: none; animation: none; } /* ========================================================= Header v2: one panorama strip (no mirroring, no repeats) that pans with scroll, and the new character sheet. ADJUST: --H = header window height, --ch = character height. ========================================================= */ .topbar { width: max-content; max-width: calc(100% - 24px); } .journey { --H: 60px; --ch: 40px; flex: none; position: relative; height: var(--H); width: min(calc(var(--H) * 2084 / 200), calc(100vw - 34px)); max-width: none; border-radius: 999px; overflow: hidden; contain: layout paint; background: #f6e1d6; } @media (min-width: 900px) { .journey { --H: 72px; --ch: 48px; } } .journey .strip { position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: none; will-change: transform; transform: translate3d(0,0,0); user-select: none; -webkit-user-drag: none; } .journey::after { z-index: 3; } .hiker { position: absolute; left: 0; bottom: calc(var(--H) * .03); z-index: 2; height: var(--ch); width: calc(var(--ch) * 170 / 310); will-change: transform; transform-origin: 50% 100%; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 2px 1px rgba(40, 40, 70, .25)); } .hiker.waving { animation: hiwave .6s ease-in-out 2; } @media (prefers-reduced-motion: reduce) { .journey .strip { transform: none !important; } .hiker.waving { animation: none; } } /* ========================================================= Smoothness pass ========================================================= */ html { scroll-behavior: auto; } /* backdrop-filter only on the top bar, the dock and the hero card; everything else gets a solid translucent fill */ .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.8)); } .topbar.glass, .dock.glass { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgba(255, 255, 255, .86); } .hero.glass { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(255, 255, 255, .6); } /* never blur inside an animated element: the intro card no longer floats */ .icard-wrap { animation: none; } /* static background blobs, contained scene */ .scene { contain: paint; } /* pause background motion while the intro is open or the tab is hidden */ body.intro-open .scene *, body.intro-open .sky-front *, body.tab-hidden * { animation-play-state: paused !important; } /* fewer permanent GPU layers */ .dock a, .btn, .mon img, .cloud, .cloud-wrap, .fcloud, .icloud { will-change: auto; } .foot.fx { margin-top: clamp(16px, 3vw, 36px); } .meadow { padding-top: clamp(28px, 4vw, 44px); } /* ========================================================= Final polish: one easing pair, one shadow system, quiet motion ========================================================= */ :root { color-scheme: light; --ease-out: cubic-bezier(.22, 1, .36, 1); --pop: cubic-bezier(.34, 1.56, .64, 1); --spring: var(--pop); --liquid: var(--ease-out); --ease: var(--ease-out); --shadow-1: 0 1px 2px rgba(29,42,71,.08), 0 4px 10px -4px rgba(29,42,71,.14); --shadow-2: 0 2px 4px rgba(29,42,71,.06), 0 12px 24px -10px rgba(29,42,71,.22); --shadow-3: 0 2px 6px rgba(29,42,71,.06), 0 24px 48px -20px rgba(29,42,71,.30), 0 60px 90px -50px rgba(29,42,71,.25); --pane: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(29,42,71,.05); --hair: rgba(29,42,71,.08); } /* Panes feel thick: top highlight, faint bottom shade, layered ink-tinted shadow */ .glass, .panel, .hero { box-shadow: var(--pane), var(--shadow-3); } .tile, .project, .quest, .link-list a, .mail strong { box-shadow: var(--pane), var(--shadow-2); } .chip, .status, .badge, .tablist, .tablist button[aria-selected="true"] { box-shadow: var(--pane), var(--shadow-1); } .topbar.glass, .dock.glass { box-shadow: var(--pane), var(--shadow-2); } .journey { box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), inset 0 2px 6px rgba(29,42,71,.12); } .ico3d, .ico3d-h, .ico3d-s { filter: drop-shadow(0 2px 3px rgba(29,42,71,.18)); } .mon .pop { filter: drop-shadow(0 6px 6px rgba(29,42,71,.16)); } /* Type: embossed on light panes, tighter tracking at large sizes, balanced wraps */ h1, h2, h3 { text-shadow: 0 1px 0 rgba(255,255,255,.7); text-wrap: balance; } h1, h2 { letter-spacing: -.02em; } p, li { text-wrap: pretty; } /* Interaction: lift 2px on hover (pointer devices only), .98 on press, always reversible */ .btn, .chip, .tile, .project, .quest, .link-list a, .status, .badge, .tablist button, .dock a, .mon .pop { transition: transform .24s var(--ease-out), background-color .24s var(--ease-out), color .2s var(--ease-out); } .btn:hover, .chip:hover, .tile:hover, .project:hover, .quest:hover, .link-list a:hover, .status:hover, .badge:hover { transform: none; } @media (hover: hover) and (pointer: fine) { .btn:hover, .chip:hover, .tile:hover, .project:hover, .quest:hover, .link-list a:hover, .status:hover, .badge:hover, .mon:hover .pop { transform: translateY(-2px); } .tile:hover .ico3d { transform: translateY(-1px); } } .btn:active, .chip:active, .tile:active, .project:active, .quest:active, .link-list a:active, .dock a:active, .tablist button:active, .status:active, .badge:active, .portrait:active, .mon:active .pop, .intro.final .enter:active { transform: scale(.98); transition-duration: .12s; } /* Section reveals: fade and a 16px rise, once; children stagger by 60ms */ .js .reveal { transform: translate3d(0, 16px, 0); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); } .js .reveal.in .tile, .js .reveal.in .quest, .js .reveal.in .chip { animation: settle .6s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms + 80ms); } @keyframes settle { from { opacity: 0; transform: translate3d(0, 12px, 0); } } /* Portrait: white ring, layered shadow, soft colour glow, slow float, gentle tilt */ .portrait-wrap { isolation: isolate; animation: portraitFloat 6s ease-in-out infinite alternate; } .portrait-wrap::before { content: ""; position: absolute; inset: 8% 6%; z-index: -1; border-radius: 30px; background: linear-gradient(135deg, #ffb3d1, #b9dcff); filter: blur(30px); opacity: .5; } .portrait { border-radius: 24px; box-shadow: 0 0 0 6px #fff, 0 4px 8px rgba(29,42,71,.10), 0 22px 40px -12px rgba(29,42,71,.35); transition: transform .6s var(--ease-out); } @keyframes portraitFloat { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -6px, 0); } } /* Background: subtle parallax only (at most 24px) */ @supports (animation-timeline: scroll()) { @keyframes bgpar { to { transform: translate3d(0, -24px, 0); } } @keyframes cwpar { to { transform: translate3d(0, -14px, 0); } } } .cloud, .fcloud svg { filter: drop-shadow(0 6px 5px rgba(80, 110, 170, .12)); } @media (max-width: 640px) { .w3, .f2, .f3, .f4, .f5 { display: none; } } /* Details */ ::selection { background: #ffd3e2; color: #1d2a47; } html { scrollbar-width: thin; scrollbar-color: rgba(29,42,71,.28) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(29,42,71,.25); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } :focus-visible { outline: 3px solid #6b9df2; outline-offset: 3px; transition: outline-offset .2s var(--ease-out); } hr, .divider { border: 0; border-top: 1px solid var(--hair); } /* Without JavaScript there is no intro, and nothing stays hidden */ html.no-js .intro { display: none; } @media (prefers-reduced-motion: reduce) { .portrait-wrap { animation: none; } .js .reveal { transform: none; } } /* Intro greeting: compositor-only crossfade (opacity + transform), no blur, no font swaps */ .greet { contain: layout paint; } .greet span { filter: none !important; opacity: 0; transform: translate3d(0, 14px, 0) scale(.96); will-change: transform, opacity; backface-visibility: hidden; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); transition-delay: 0s; } .greet span.on { opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition-delay: .12s; } .greet span.gone { opacity: 0; transform: translate3d(0, -12px, 0) scale(1.02); transition: opacity .45s var(--ease-out), transform .7s var(--ease-out); } /* The card sits over drifting clouds: a solid frosted fill instead of a live blur keeps every frame cheap */ .icard { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.7)); } .icloud { will-change: transform; } .ic5, .ic6 { display: none; } @media (prefers-reduced-motion: reduce) { .greet span { transition: opacity .2s; transform: none; } } /* While the intro covers the screen, skip painting the page underneath (it is revealed as the intro fades) */ body.intro-open main, body.intro-open .scene, body.intro-open .topbar, body.intro-open .dock, body.intro-open .foot, body.intro-open .sky-front { visibility: hidden; } /* Case study key term: one quiet line inside the card */ .term { margin: 2px 0 0; font-size: .9rem; line-height: 1.45; color: var(--ink-2, #4a5370); } .tile .term strong { color: var(--ink); font-weight: 600; padding-right: 0; } /* Location links open Google Maps */ .status-wrap, .loc-wrap { margin: 0; } .place-link { text-decoration: none; color: inherit; cursor: pointer; } .place-link:hover { color: var(--ink); } .place-link:hover .ico, .place-link:hover .ico3d-s { transform: translateY(-1px); } /* Character: the sheet is a child layer moved with transform, so frame changes never repaint */ .hiker { background: none; overflow: hidden; filter: none; } .hiker-sheet { position: absolute; left: 0; top: 0; width: 600%; height: 400%; background: url("../img/char.webp") 0 0 / 100% 100% no-repeat; will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; filter: drop-shadow(0 2px 1px rgba(40, 40, 70, .25)); } /* Greeting: a soft Gaussian blur as words change, animated on the word's own layer */ .greet span { filter: blur(6px) !important; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .7s var(--ease-out); will-change: transform, opacity, filter; } .greet span.on { filter: blur(0) !important; } .greet span.gone { filter: blur(6px) !important; transition: opacity .5s var(--ease-out), transform .7s var(--ease-out), filter .5s var(--ease-out); } @media (prefers-reduced-motion: reduce) { .greet span, .greet span.gone { filter: none !important; } } .hiker { clip-path: inset(1px 1px 0 1px); } /* The nav pills resize between links; containment keeps that layout work inside the dock and tab bar */ .dock, .tablist { contain: layout style; } .slide, .tab-ind { transition: transform .5s var(--ease-out), width .35s var(--ease-out), height .35s var(--ease-out), opacity .25s; } .hiker, .hiker.waving { animation: none !important; translate: none; }