/* ============================================================ Password gate ============================================================ */ #password-gate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #05030a; padding: 24px; transition: opacity 500ms ease; } #password-gate.gate--out { opacity: 0; pointer-events: none; } .gate__card { width: min(420px, 100%); background: rgba(14, 10, 26, 0.96); border: 1px solid rgba(167, 139, 250, 0.35); border-radius: 24px; padding: 48px 40px; text-align: center; box-shadow: 0 20px 60px -10px rgba(139, 92, 246, 0.35), 0 40px 100px -20px rgba(0,0,0,0.8); } .gate__logo { width: 56px; height: 56px; object-fit: contain; margin-bottom: 16px; } .gate__title { font-family: var(--font-display, 'Barlow', sans-serif); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; color: #fff; margin: 0 0 8px; } .gate__hint { color: rgba(180, 176, 198, 0.8); font-size: 0.92rem; margin: 0 0 28px; line-height: 1.5; } .gate__field { display: flex; gap: 10px; } .gate__input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(167, 139, 250, 0.3); border-radius: 12px; padding: 12px 16px; color: #fff; font: inherit; font-size: 0.95rem; outline: none; transition: border-color 180ms ease; } .gate__input:focus { border-color: #a78bfa; } .gate__input::placeholder { color: rgba(255,255,255,0.3); } .gate__btn { background: linear-gradient(135deg, #8b5cf6, #5b21b6); border: none; border-radius: 12px; padding: 12px 22px; color: #fff; font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: opacity 180ms ease, transform 180ms ease; } .gate__btn:hover { opacity: 0.88; transform: translateY(-1px); } .gate__error { color: #f87171; font-size: 0.85rem; margin: 14px 0 0; } @keyframes gate-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } } .gate--shake { animation: gate-shake 0.5s ease; } :root { --bg: #05030a; --bg-2: #0b0718; --text: #f5f5f7; --text-dim: #b4b0c6; --text-mute: #7c7794; --violet: #8b5cf6; --violet-2: #a78bfa; --violet-deep: #5b21b6; --glass-bg: rgba(22, 16, 40, 0.38); --glass-bg-strong: rgba(30, 22, 55, 0.55); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-strong: rgba(167, 139, 250, 0.22); --radius: 22px; --radius-lg: 28px; --radius-pill: 999px; --shadow-soft: 0 30px 80px -20px rgba(91, 33, 182, 0.35); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-slide: cubic-bezier(0.16, 1, 0.3, 1); /* Trade Gothic (commercial). Falls back to Barlow which mirrors its realist-grotesque proportions and has matching Light/Regular/Bold. */ --font-display: 'Trade Gothic LT Std', 'Trade Gothic Next LT Pro', 'Trade Gothic', 'Barlow', system-ui, sans-serif; --font-body: 'Trade Gothic LT Std', 'Trade Gothic Next LT Pro', 'Trade Gothic', 'Barlow', system-ui, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 100px; } /* Sticky-scroll on the homepage — scroll container is . Each snap section locks to viewport height so scrolling feels like a presentation transitioning between slides. */ html.has-snap { scroll-snap-type: y mandatory; } html.has-snap .snap-section { scroll-snap-align: start; scroll-snap-stop: always; height: 100vh; min-height: 640px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; } /* Hero keeps its own centered layout */ html.has-snap .hero { display: flex; align-items: center; justify-content: center; } /* Footer snaps to the tail without forcing viewport height */ html.has-snap .footer { scroll-snap-align: end; min-height: auto; } body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ===== Background ===== */ .bg-gradient { position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 60% 45% at 20% 10%, rgba(139, 92, 246, 0.22), transparent 60%), radial-gradient(ellipse 50% 40% at 85% 25%, rgba(167, 139, 250, 0.16), transparent 60%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(91, 33, 182, 0.28), transparent 60%), linear-gradient(180deg, #05030a 0%, #0b0718 50%, #05030a 100%); } .bg-grid { display: none; } /* ===== Glass ===== */ .glass { background: var(--glass-bg); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid var(--glass-border); } .glass-card { background: var(--glass-bg); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); position: relative; overflow: hidden; } .glass-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(167,139,250,0.35), rgba(255,255,255,0.04) 40%, rgba(167,139,250,0.18)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ===== Nav ===== */ .nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 100; width: min(1180px, calc(100% - 40px)); display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 10px 24px; border-radius: var(--radius-pill); } .nav__brand { display: flex; align-items: center; gap: 10px; } .nav__logo-img { height: 30px; width: auto; display: block; filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.35)); transition: filter 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .nav__brand:hover .nav__logo-img { filter: drop-shadow(0 0 20px rgba(167, 139, 250, 0.7)); transform: scale(1.04); } .nav__links { display: flex; gap: 30px; font-size: 14px; color: var(--text-dim); } .nav__links a { position: relative; padding: 6px 2px; transition: color 0.25s var(--ease-out); } .nav__links a:hover, .nav__links a.active { color: var(--text); } .nav__links a.active::after { content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); width: 4px; height: 4px; background: var(--violet-2); border-radius: 50%; box-shadow: 0 0 10px var(--violet-2); } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; color: var(--text); border: 1px solid var(--glass-border-strong); background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(91, 33, 182, 0.12)); cursor: pointer; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s var(--ease-out); } .btn:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(91, 33, 182, 0.25)); box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.7); } .btn__arrow { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--violet); align-items: center; justify-content: center; font-size: 11px; } /* ===== Hero ===== */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 24px 80px; overflow: hidden; } .hero { background: var(--bg); } .hero__orb { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .hero__orb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(120%) brightness(1.05); } /* Edge + bottom blend — softens the video frame into the page background. Uses screen blend on the sides and a longer fade at the bottom to hide the seam. */ .hero__orb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 40%, transparent 30%, rgba(5, 3, 10, 0.4) 75%, rgba(5, 3, 10, 0.95) 100%), linear-gradient(180deg, rgba(5, 3, 10, 0.2) 0%, transparent 18%, transparent 55%, rgba(5, 3, 10, 0.85) 88%, var(--bg) 100%); z-index: 2; pointer-events: none; } /* Solid fade strip at the bottom so the hero dissolves into the about section */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(180deg, transparent, var(--bg)); z-index: 3; pointer-events: none; } .hero__content { position: relative; z-index: 5; text-align: center; max-width: 1100px; } .hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 7vw, 6.2rem); line-height: 1.15; letter-spacing: -0.03em; } .hero__title em { font-style: normal; background: linear-gradient(135deg, #c4b5fd, #8b5cf6 60%, #5b21b6); -webkit-background-clip: text; background-clip: text; color: transparent; } .reveal-line { display: block; overflow: visible; padding-bottom: 0.15em; } .reveal-line__inner { display: inline-block; transform: translateY(105%); animation: riseUp 1s var(--ease-out) forwards; } .reveal-line:nth-child(1) .reveal-line__inner { animation-delay: 0.25s; } .reveal-line:nth-child(2) .reveal-line__inner { animation-delay: 0.45s; } @keyframes riseUp { to { transform: translateY(0); } } .hero__slogan { margin-top: 26px; color: var(--text-dim); font-size: clamp(0.95rem, 1.2vw, 1.05rem); letter-spacing: 0.04em; opacity: 0; animation: fadeIn 1s var(--ease-out) 0.85s forwards; } @keyframes fadeIn { to { opacity: 1; } } .hero__scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-dim); opacity: 0; animation: fadeIn 1s var(--ease-out) 1.2s forwards; z-index: 5; } .hero__scroll-line { width: 1px; height: 50px; background: linear-gradient(to bottom, var(--violet-2), transparent); animation: scrollLine 2s ease-in-out infinite; transform-origin: top; } @keyframes scrollLine { 0%, 100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } } /* ===== About ===== */ .about { padding: 80px 24px 120px; max-width: 1280px; margin: 0 auto; } .about__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; margin-bottom: 28px; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border: 1px solid var(--glass-border-strong); border-radius: var(--radius-pill); font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--text-dim); background: rgba(139, 92, 246, 0.08); } .eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet-2); box-shadow: 0 0 12px var(--violet-2); } .about__intro { padding: 44px; } .about__heading { margin-top: 22px; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; } .accent { background: linear-gradient(135deg, #c4b5fd, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; } .about__lede { margin-top: 20px; color: var(--text-dim); max-width: 52ch; font-size: 1.02rem; line-height: 1.7; } .about__tags { margin-top: 28px; display: flex; gap: 8px; flex-wrap: wrap; } .tag { padding: 8px 14px; font-size: 12px; letter-spacing: 0.05em; border: 1px solid var(--glass-border); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.03); color: var(--text-dim); } .about__card { padding: 36px; display: flex; flex-direction: column; gap: 24px; } .about__card-header h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; } .about__card-header p { margin-top: 10px; color: var(--text-dim); font-size: 0.95rem; line-height: 1.6; } .about__timeline { display: flex; flex-direction: column; gap: 10px; } .timeline-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 14px 18px; background: rgba(139, 92, 246, 0.1); border: 1px solid var(--glass-border); border-radius: 16px; transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .timeline-item:hover { background: rgba(139, 92, 246, 0.2); transform: translateX(4px); } .timeline-item__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--violet), var(--violet-deep)); font-size: 11px; font-weight: 600; font-family: var(--font-display); } .timeline-item__label { font-size: 0.95rem; font-weight: 500; } .timeline-item__year { font-size: 0.9rem; color: var(--text-mute); font-variant-numeric: tabular-nums; } /* Stats */ .about__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat { padding: 28px 24px; text-align: left; } .stat__num { display: block; font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; background: linear-gradient(135deg, #fff, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat__plus { color: var(--violet-2); -webkit-text-fill-color: var(--violet-2); } .stat__label { display: block; margin-top: 6px; color: var(--text-mute); font-size: 13px; text-transform: uppercase; letter-spacing: 0.15em; } /* Reveal — presentation-style slide: lift + fade + soft blur */ .reveal-up { opacity: 0; transform: translateY(90px); filter: blur(10px); transition: opacity 0.9s var(--ease-slide), transform 1.1s var(--ease-slide), filter 0.8s var(--ease-slide); will-change: opacity, transform, filter; } .reveal-up.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); } .reveal-up--delay { transition-delay: 0.15s; } /* Snap sections act like slides: everything except the hero fades/slides each time its section becomes the active one, giving a deck-like feel. */ html.has-snap .snap-section > * { opacity: 0; transform: translateY(60px) scale(0.985); filter: blur(6px); transition: opacity 0.85s var(--ease-slide), transform 1s var(--ease-slide), filter 0.7s var(--ease-slide); } html.has-snap .snap-section.is-active > * { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } html.has-snap .snap-section.is-active > *:nth-child(2) { transition-delay: 0.1s; } html.has-snap .snap-section.is-active > *:nth-child(3) { transition-delay: 0.2s; } /* Hero stays fully visible — it's the title slide */ html.has-snap .hero.snap-section > * { opacity: 1; transform: none; filter: none; } /* Stagger direct children inside a reveal container */ .services__grid .reveal-up:nth-child(1) { transition-delay: 0.05s; } .services__grid .reveal-up:nth-child(2) { transition-delay: 0.12s; } .services__grid .reveal-up:nth-child(3) { transition-delay: 0.19s; } .services__grid .reveal-up:nth-child(4) { transition-delay: 0.26s; } .work__grid .reveal-up:nth-child(1) { transition-delay: 0.05s; } .work__grid .reveal-up:nth-child(2) { transition-delay: 0.15s; } .work__grid .reveal-up:nth-child(3) { transition-delay: 0.25s; } .work__grid .reveal-up:nth-child(4) { transition-delay: 0.35s; } .work__grid .reveal-up:nth-child(5) { transition-delay: 0.45s; } .testimonials__grid .reveal-up:nth-child(1) { transition-delay: 0.05s; } .testimonials__grid .reveal-up:nth-child(2) { transition-delay: 0.17s; } .testimonials__grid .reveal-up:nth-child(3) { transition-delay: 0.29s; } /* ===== Footer ===== */ .footer { padding: 40px 24px 60px; display: flex; justify-content: center; } .footer__inner { width: min(1180px, 100%); padding: 18px 28px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--text-dim); } .footer__slogan { color: var(--text-mute); font-style: italic; } /* ===== Content pages ===== */ .page { padding: 140px 24px 80px; max-width: 1100px; margin: 0 auto; } .page__topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; } .page__topbar .page__title { margin-top: 14px; } .page__title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.03em; margin-top: 22px; line-height: 1.05; } .page__lede { margin-top: 20px; max-width: 62ch; color: var(--text-dim); font-size: 1.05rem; line-height: 1.7; } .section { margin-top: 56px; } .section__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .section__title::before { content: ""; width: 20px; height: 2px; background: linear-gradient(90deg, var(--violet-2), transparent); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .card { padding: 28px; border-radius: var(--radius); } .card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; } .card p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.65; } .card__meta { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .list { display: flex; flex-direction: column; gap: 14px; } .list-item { padding: 20px 24px; border-radius: 18px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 20px; } .list-item__title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; } .list-item__sub { color: var(--text-mute); font-size: 0.88rem; margin-top: 4px; } .list-item__right { text-align: right; color: var(--text-dim); font-size: 0.9rem; } /* ===== Cover Letter Page ===== */ .cover-stage { padding: 120px 24px 120px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 40px; perspective: 1600px; } .cover-stage__intro { text-align: center; max-width: 640px; opacity: 1; transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .cover-stage.is-open .cover-stage__intro { opacity: 0; transform: translateY(-20px); pointer-events: none; } .cover-stage__title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.02em; margin-top: 18px; line-height: 1.1; } .cover-stage__hint { margin-top: 16px; color: var(--text-dim); font-size: 0.98rem; } .envelope-area { position: relative; width: min(520px, 92vw); aspect-ratio: 520 / 320; transition: width 0.5s var(--ease-out); } .cover-stage.is-unfolded .envelope-area { aspect-ratio: auto; width: min(720px, 92vw); } .cover-stage.is-unfolded .envelope { opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease-out); } .envelope { position: absolute; inset: 0; cursor: pointer; transform-style: preserve-3d; transition: transform 0.9s var(--ease-out) 0.2s; background: none; border: none; padding: 0; } .cover-stage.is-open .envelope { transform: translateY(60px) scale(0.96); pointer-events: none; } .envelope__body, .envelope__back, .envelope__front, .envelope__flap { position: absolute; inset: 0; border-radius: 14px; } /* Back wall of envelope */ .envelope__back { background: linear-gradient(140deg, rgba(40, 28, 70, 0.85), rgba(18, 12, 36, 0.95)); border: 1px solid var(--glass-border-strong); box-shadow: inset 0 0 60px rgba(139, 92, 246, 0.12); } /* Front pocket (covers the bottom half + slopes) */ .envelope__front { background: linear-gradient(160deg, rgba(55, 38, 100, 0.92), rgba(26, 18, 52, 0.96)); border: 1px solid var(--glass-border-strong); clip-path: polygon(0 38%, 100% 38%, 100% 100%, 0 100%); z-index: 5; box-shadow: 0 30px 60px -20px rgba(91, 33, 182, 0.55); } .envelope__front::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 38%, 50% 100%, 100% 38%); background: linear-gradient(180deg, rgba(167, 139, 250, 0.1), rgba(0,0,0,0)); opacity: 0.5; } /* Flap — sits above, rotates open at the top edge */ .envelope__flap { top: 0; height: 60%; background: linear-gradient(155deg, rgba(60, 42, 110, 0.92), rgba(32, 22, 64, 0.96)); border: 1px solid var(--glass-border-strong); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transform: rotateX(0deg); transition: transform 1s var(--ease-out); z-index: 7; backface-visibility: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .cover-stage.is-open .envelope__flap { transform: rotateX(-180deg); z-index: 2; } /* Wax seal in the middle */ .envelope__seal { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #c4b5fd, #8b5cf6 45%, #4c1d95 100%); border: 2px solid rgba(255, 255, 255, 0.15); display: grid; place-items: center; z-index: 8; box-shadow: 0 6px 24px rgba(139, 92, 246, 0.55), inset 0 -4px 10px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.25); transition: opacity 0.35s var(--ease-out), transform 0.4s var(--ease-out); } .envelope__seal img { width: 42px; height: 42px; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } .cover-stage.is-open .envelope__seal { opacity: 0; transform: translate(-50%, -50%) scale(0.4); transition-duration: 0.3s; } /* Letter — hidden inside envelope-area, rises out on open. Visual style matches the source PDF: a black inset with a violet-glow outer frame and a bright highlight bar at the top of the frame. */ .letter { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -48%) scale(0.62); width: min(780px, 92vw); padding: 22px; border-radius: 6px; background: linear-gradient(180deg, rgba(167, 139, 250, 0.9) 0%, rgba(139, 92, 246, 0.55) 12%, rgba(91, 33, 182, 0.35) 50%, rgba(139, 92, 246, 0.55) 100%); box-shadow: 0 0 60px rgba(139, 92, 246, 0.35), 0 40px 100px -20px rgba(91, 33, 182, 0.55); z-index: 6; opacity: 0; pointer-events: none; transition: transform 1.2s var(--ease-out) 0.35s, opacity 0.6s var(--ease-out) 0.35s; transform-origin: center bottom; } .letter::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 10%, #ffffff 45%, #ffffff 55%, transparent 90%); filter: blur(1px); opacity: 0.95; z-index: 1; pointer-events: none; } .letter__inner { position: relative; background: #05030a; border-radius: 3px; padding: 52px 56px 46px; z-index: 2; } .cover-stage.is-open .letter { opacity: 1; transform: translate(-50%, -110%) scale(1); pointer-events: auto; } /* Move letter into its own flow once open so page can scroll */ .cover-stage.is-unfolded .letter { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; transition: none; } .letter__header { text-align: center; margin-bottom: 36px; } .letter__title { font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 400; letter-spacing: 0.01em; color: #f5f5f7; } .letter__body p { color: #e8e6f0; font-size: 0.95rem; line-height: 1.65; margin-bottom: 14px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .letter__signoff { margin-top: 24px; color: #f5f5f7; text-align: left !important; } .letter__footer { margin-top: 48px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .letter__brand { display: flex; align-items: center; gap: 14px; } .letter__brand img { height: 54px; width: auto; filter: drop-shadow(0 0 10px rgba(167,139,250,0.35)); } .letter__brand-text { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.05; letter-spacing: -0.01em; color: #f5f5f7; } .letter__brand-text span { display: block; } .letter__contact { text-align: right; color: #d5d2e4; font-size: 0.92rem; line-height: 1.7; } .letter__contact a { color: inherit; } .letter__contact a:hover { color: var(--violet-2); } /* Download button that sits with the reset button once unfolded */ .letter-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .letter__reset { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; padding: 10px 18px; background: transparent; border: 1px solid var(--glass-border-strong); border-radius: var(--radius-pill); color: var(--text-dim); font-size: 13px; cursor: pointer; transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out); font-family: inherit; } .letter__reset:hover { color: var(--text); border-color: var(--violet-2); background: rgba(139, 92, 246, 0.12); } /* Subtle hover-lift on closed envelope */ .envelope:hover { transform: translateY(-6px) rotateX(-4deg); } .cover-stage.is-open .envelope:hover { transform: translateY(60px) scale(0.96); } /* ===== Mobile Nav Toggle ===== */ .nav__toggle { display: none; background: none; border: 0; width: 36px; height: 36px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; padding: 0; } .nav__toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); } .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; } .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ===== Services ===== */ .services { padding: 40px 24px 60px; max-width: 1280px; margin: 0 auto; } .services__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 40px; flex-wrap: wrap; } .services__title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; max-width: 18ch; margin-top: 16px; } .services__sub { color: var(--text-dim); max-width: 42ch; font-size: 0.98rem; line-height: 1.7; } .services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .service { padding: 28px 26px; border-radius: var(--radius); min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; transition: transform 0.4s var(--ease-out), background 0.4s var(--ease-out); } .service:hover { transform: translateY(-6px); } .service__num { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.2em; color: var(--violet-2); } .service__icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(91, 33, 182, 0.2)); border: 1px solid var(--glass-border-strong); display: grid; place-items: center; font-size: 22px; color: #fff; } .service h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: 6px; } .service p { color: var(--text-dim); font-size: 0.88rem; line-height: 1.55; } /* ===== Work Grid ===== */ .work { padding: 80px 24px 60px; max-width: 1280px; margin: 0 auto; } .work__header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 32px; } .work__title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; margin-top: 16px; } .work__view-all { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 14px; padding: 10px 18px; border: 1px solid var(--glass-border); border-radius: var(--radius-pill); transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .work__view-all:hover { color: var(--text); border-color: var(--violet-2); } .work__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: 260px; gap: 18px; } .work__grid > *:nth-child(1) { grid-row: span 2; } .project { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--glass-border); cursor: pointer; transition: transform 0.4s var(--ease-out); } .project:hover { transform: translateY(-4px); } .project__thumb { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.8s var(--ease-out); } .project:hover .project__thumb { transform: scale(1.04); } .project__thumb--1 { background: radial-gradient(circle at 30% 30%, rgba(167, 139, 250, 0.6), transparent 50%), radial-gradient(circle at 70% 70%, rgba(91, 33, 182, 0.7), transparent 55%), linear-gradient(135deg, #1e1338, #2d1b5a); } .project__thumb--2 { background: conic-gradient(from 120deg at 60% 40%, #8b5cf6, #c4b5fd, #5b21b6, #8b5cf6), #1a1035; background-blend-mode: multiply; } .project__thumb--3 { background: repeating-linear-gradient(45deg, rgba(167, 139, 250, 0.12) 0 14px, transparent 14px 28px), linear-gradient(135deg, #0e0820, #1e1038); } .project__thumb--4 { background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(139, 92, 246, 0.6), transparent 55%), linear-gradient(180deg, #0a061a, #1a1035); } .project__thumb--5 { background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), transparent 50%), repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0 2px, transparent 2px 18px), linear-gradient(180deg, #120828, #20123f); } .project__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5, 3, 10, 0.9)); padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; z-index: 2; } .project__tag { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--violet-2); } .project__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; } .project__meta { color: var(--text-mute); font-size: 0.85rem; } /* ===== Testimonials ===== */ .testimonials { padding: 60px 24px; max-width: 1280px; margin: 0 auto; } .testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; } .quote { padding: 32px 30px; border-radius: var(--radius); display: flex; flex-direction: column; gap: 24px; } .quote__mark { font-family: var(--font-display); font-size: 64px; line-height: 0.5; color: var(--violet-2); opacity: 0.8; height: 24px; } .quote p { color: var(--text-dim); font-size: 0.98rem; line-height: 1.7; font-style: italic; } .quote__person { display: flex; align-items: center; gap: 12px; margin-top: auto; } .quote__avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #5b21b6); display: grid; place-items: center; font-weight: 600; font-family: var(--font-display); font-size: 14px; } .quote__name { font-weight: 600; font-size: 0.92rem; } .quote__role { color: var(--text-mute); font-size: 0.82rem; } /* ===== Portfolio sections (homepage outline + tab previews) ===== */ .portfolio-section { padding: 80px 24px; max-width: 1100px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: center; } .portfolio-section__inner { max-width: 780px; text-align: center; position: relative; } .portfolio-section__num { font-family: var(--font-display); font-size: clamp(4rem, 10vw, 7rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; background: linear-gradient(180deg, rgba(167, 139, 250, 0.9), rgba(91, 33, 182, 0.25)); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; margin-bottom: 6px; } .portfolio-section .eyebrow { justify-content: center; } .portfolio-section__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.08; margin: 16px 0 22px; } .portfolio-section__body { color: var(--text-dim); font-size: 1.05rem; line-height: 1.8; max-width: 62ch; margin: 0 auto 32px; } .portfolio-section__cta { display: inline-flex; align-items: center; gap: 12px; } .portfolio-outline .portfolio-section__title { font-size: clamp(2.6rem, 6vw, 4.4rem); } /* ===== CTA ===== */ .cta { padding: 60px 24px 100px; max-width: 1100px; margin: 0 auto; } .cta__inner { padding: 60px 50px; border-radius: var(--radius-lg); text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.3), transparent 60%), linear-gradient(180deg, rgba(30, 22, 55, 0.8), rgba(12, 8, 26, 0.9)); border: 1px solid var(--glass-border-strong); position: relative; overflow: hidden; } .cta__inner::after { content: ""; position: absolute; left: 50%; top: -40%; transform: translateX(-50%); width: 500px; height: 500px; background: radial-gradient(circle, rgba(167, 139, 250, 0.25), transparent 60%); filter: blur(40px); pointer-events: none; } .cta__eyebrow { display: inline-flex; } .cta__title { font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 18px 0 24px; } .cta__sub { color: var(--text-dim); max-width: 52ch; margin: 0 auto 34px; font-size: 1.02rem; line-height: 1.7; } .cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn--ghost { background: transparent; border: 1px solid var(--glass-border-strong); } .btn--ghost:hover { background: rgba(139, 92, 246, 0.1); box-shadow: none; } /* ===== Resume — CV layout matching source PDF ===== */ .cv { padding: 120px 24px 80px; max-width: 1180px; margin: 0 auto; } .cv__topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; } .cv__topbar .eyebrow { flex: 0 0 auto; } .cv__download { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; color: var(--text); background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(91, 33, 182, 0.25)); border: 1px solid var(--glass-border-strong); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s var(--ease-out); } .cv__download:hover { transform: translateY(-2px); background: linear-gradient(135deg, rgba(139, 92, 246, 0.65), rgba(91, 33, 182, 0.4)); box-shadow: 0 12px 32px -10px rgba(139, 92, 246, 0.7); } .cv__sheet { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: radial-gradient(ellipse 60% 80% at 100% 30%, rgba(91, 33, 182, 0.35), transparent 60%), radial-gradient(ellipse 50% 70% at 0% 70%, rgba(139, 92, 246, 0.18), transparent 60%), linear-gradient(180deg, #0b0718, #050309); border: 1px solid var(--glass-border-strong); box-shadow: 0 40px 100px -20px rgba(91, 33, 182, 0.35); } .cv__grid { display: grid; grid-template-columns: 0.85fr 1.5fr; gap: 48px; padding: 48px 52px; } .cv__sidebar { display: flex; flex-direction: column; gap: 40px; } .cv__main { display: flex; flex-direction: column; gap: 34px; } .cv__photo { position: relative; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 60% 40%, rgba(139, 92, 246, 0.45), transparent 55%), linear-gradient(160deg, #2d1b5a, #06030d); border: 1px solid var(--glass-border-strong); display: grid; place-items: center; } .cv__photo img { width: 100%; height: 100%; object-fit: cover; } .cv__photo-placeholder { font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; letter-spacing: 0.06em; color: #fff; text-shadow: 0 0 30px rgba(167, 139, 250, 0.45); } .cv-block__heading { font-family: var(--font-display); font-weight: 400; font-size: 2rem; letter-spacing: -0.01em; color: #fff; margin-bottom: 18px; } .cv-contact { display: flex; flex-direction: column; gap: 12px; } .cv-contact__item { display: flex; align-items: center; gap: 14px; color: var(--text-dim); font-size: 0.92rem; letter-spacing: 0.04em; } .cv-contact__icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(139, 92, 246, 0.15); border: 1px solid var(--glass-border); color: var(--violet-2); font-size: 12px; flex-shrink: 0; } .cv-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .cv-skills__col h4 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin-bottom: 12px; color: #fff; } .cv-skills__col ul { display: flex; flex-direction: column; gap: 6px; } .cv-skills__col li { color: var(--text-dim); font-size: 0.88rem; padding-left: 14px; position: relative; letter-spacing: 0.02em; } .cv-skills__col li::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; background: var(--violet-2); border-radius: 50%; } .cv-edu__item { margin-bottom: 16px; } .cv-edu__item h4 { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: #fff; margin-bottom: 4px; } .cv-edu__item p { color: var(--text-dim); font-size: 0.86rem; } .cv-header h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: 0.04em; line-height: 0.95; color: #fff; text-transform: uppercase; } .cv-header p:not(.cv-summary) { font-family: var(--font-display); font-weight: 300; font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing: 0.2em; color: #fff; margin-top: 6px; text-transform: uppercase; } .cv-summary { color: var(--text-dim); font-size: 0.82rem; line-height: 1.65; margin-top: 18px; max-width: 58ch; letter-spacing: 0.01em; text-transform: none; font-weight: 400; font-family: var(--font-body); } .cv-exp__item { margin-bottom: 26px; } .cv-exp__item h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; margin-bottom: 2px; } .cv-exp__meta { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 10px; letter-spacing: 0.02em; } .cv-exp__item ul { list-style: none; padding-left: 0; } .cv-exp__item li { color: var(--text-dim); font-size: 0.8rem; line-height: 1.6; padding-left: 18px; position: relative; margin-bottom: 6px; } .cv-exp__item li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 4px; height: 4px; background: var(--violet-2); border-radius: 50%; } /* ===== Resume enhancements ===== */ .resume-hero { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; } .resume-hero__actions { display: flex; gap: 10px; margin-top: 24px; } .tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .tool { padding: 22px 20px; border-radius: 16px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out); } .tool:hover { transform: translateY(-3px); } .tool__icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(91, 33, 182, 0.15)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 14px; } .tool__name { font-size: 0.9rem; font-weight: 500; } .tool__level { width: 100%; height: 3px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; } .tool__level-fill { height: 100%; background: linear-gradient(90deg, #8b5cf6, #c4b5fd); border-radius: 3px; } .languages { display: flex; gap: 10px; flex-wrap: wrap; } .language { padding: 12px 18px; border-radius: var(--radius-pill); background: rgba(139, 92, 246, 0.12); border: 1px solid var(--glass-border); display: flex; align-items: center; gap: 10px; } .language strong { font-family: var(--font-display); font-weight: 600; } .language span { color: var(--text-mute); font-size: 0.85rem; } .awards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .award { padding: 22px 24px; border-radius: 16px; display: flex; gap: 16px; align-items: flex-start; } .award__year { flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--violet), var(--violet-deep)); font-family: var(--font-display); font-weight: 600; font-size: 13px; } .award__name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; } .award__org { color: var(--text-mute); font-size: 0.85rem; margin-top: 2px; } /* ===== Assignments enhanced ===== */ .assignment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .assignment { border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.4s var(--ease-out); } .assignment:hover { transform: translateY(-4px); } .assignment__cover { height: 220px; position: relative; overflow: hidden; border-bottom: 1px solid var(--glass-border); background: linear-gradient(135deg, #1a1035, #0a061a); } .assignment__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out); } .assignment:hover .assignment__cover img { transform: scale(1.04); } .assignment__cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5,3,10,0.75)); z-index: 1; pointer-events: none; } .assignment__cover-label { position: absolute; left: 16px; top: 16px; z-index: 2; padding: 5px 12px; background: rgba(5, 3, 10, 0.7); backdrop-filter: blur(8px); border: 1px solid var(--glass-border-strong); border-radius: var(--radius-pill); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--violet-2); } .cover--bio { background: radial-gradient(circle at 30% 40%, rgba(196, 181, 253, 0.35), transparent 60%), linear-gradient(135deg, #2d1b5a, #0e0820); } .cover--critical { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 28px), linear-gradient(135deg, #1e1338, #0a061a); } .cover--slides { background: conic-gradient(from 60deg at 50% 50%, rgba(139, 92, 246, 0.55), rgba(91, 33, 182, 0.4), rgba(139, 92, 246, 0.55)), #0e0820; } .cover--creative { background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(167, 139, 250, 0.5), transparent 55%), linear-gradient(180deg, #0a061a, #2d1b5a); } .cover--proposal { background: linear-gradient(135deg, rgba(167, 139, 250, 0.25), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 40px), linear-gradient(180deg, #120828, #1e1338); } .cover--cover-letter { background: radial-gradient(circle at 50% 40%, rgba(196, 181, 253, 0.4), transparent 55%), linear-gradient(135deg, #1a1035, #0a061a); } .assignment__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .assignment__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; } .assignment__desc { color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; flex: 1; } .assignment__download { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: var(--radius-pill); background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(167, 139, 250, 0.35); color: var(--text); font-family: var(--font-display); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .assignment__download:hover { background: rgba(139, 92, 246, 0.22); border-color: var(--violet-2); transform: translateY(-2px); } .assignment__download .btn__arrow { transition: transform 0.3s var(--ease-out); color: var(--violet-2); } .assignment__download:hover .btn__arrow { transform: translateY(3px); } .assignment__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--glass-border); font-size: 0.82rem; color: var(--text-mute); } .status-dot { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; } .status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; } .status-dot--progress::before { background: #fbbf24; box-shadow: 0 0 10px #fbbf24; } .status-dot--draft::before { background: var(--violet-2); box-shadow: 0 0 10px var(--violet-2); } /* ===== Reflection enhanced ===== */ .reflection-feature { padding: 44px 48px; border-radius: var(--radius-lg); display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; margin-top: 32px; } .reflection-feature__mark { font-family: var(--font-display); font-size: 120px; line-height: 0.6; color: var(--violet); opacity: 0.5; } .reflection-feature blockquote { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; } .reflection-feature cite { display: block; margin-top: 16px; color: var(--text-mute); font-size: 0.88rem; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; } .entry { padding: 34px 36px; border-radius: var(--radius); display: grid; grid-template-columns: 120px 1fr; gap: 32px; align-items: flex-start; } .entry__date { font-family: var(--font-display); color: var(--violet-2); font-size: 0.82rem; letter-spacing: 0.15em; text-transform: uppercase; } .entry__num { display: block; font-size: 2.4rem; color: var(--text); letter-spacing: -0.02em; margin-top: 6px; } .entry__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin-bottom: 14px; letter-spacing: -0.01em; } .entry__body p { color: var(--text-dim); font-size: 0.98rem; line-height: 1.75; margin-bottom: 14px; } /* ===== Responsive ===== */ @media (max-width: 1024px) { .services__grid { grid-template-columns: repeat(2, 1fr); } .work__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; } .work__grid > *:nth-child(1) { grid-row: span 1; } .testimonials__grid { grid-template-columns: 1fr; } .tools-grid { grid-template-columns: repeat(3, 1fr); } .awards { grid-template-columns: 1fr; } .assignment-grid { grid-template-columns: 1fr; } } @media (max-width: 960px) { .nav { padding: 10px 14px 10px 18px; } .nav__toggle { display: flex; } .nav__links { position: absolute; top: calc(100% + 12px); left: 0; right: 0; flex-direction: column; padding: 20px; border-radius: 22px; background: var(--glass-bg-strong); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid var(--glass-border); gap: 18px; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .nav.is-open .nav__links { opacity: 1; pointer-events: auto; transform: translateY(0); } .btn--pill { display: none; } .about__grid { grid-template-columns: 1fr; } .about__stats { grid-template-columns: repeat(2, 1fr); } .about__intro, .about__card { padding: 28px; } .hero { padding-top: 140px; } .resume-hero { flex-direction: column; align-items: flex-start; } .cv__grid { grid-template-columns: 1fr; padding: 32px; gap: 32px; } .reflection-feature { grid-template-columns: 1fr; padding: 32px; gap: 16px; } .reflection-feature__mark { font-size: 80px; } .entry { grid-template-columns: 1fr; gap: 14px; padding: 28px; } .cta__inner { padding: 44px 28px; } .letter { padding: 32px 28px; } } @media (max-width: 520px) { .about__stats { grid-template-columns: 1fr 1fr; } .footer__inner { justify-content: center; text-align: center; } .services__grid { grid-template-columns: 1fr; } .work__grid { grid-template-columns: 1fr; } .tools-grid { grid-template-columns: repeat(2, 1fr); } .letter__footer { flex-direction: column; align-items: flex-start; text-align: left; } .letter__contact { text-align: left; } } /* ===== Reflection document — violet-glow framed long-form ===== */ .reflection-doc { margin-top: 32px; padding: 2px; border-radius: 26px; background: linear-gradient(180deg, rgba(167, 139, 250, 0.55), rgba(91, 33, 182, 0.35) 40%, rgba(167, 139, 250, 0.55)); box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25), 0 40px 120px -40px rgba(91, 33, 182, 0.6); position: relative; } .reflection-doc::before, .reflection-doc::after { content: ""; position: absolute; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.9), transparent); filter: blur(1px); } .reflection-doc::before { top: -1px; } .reflection-doc::after { bottom: -1px; } .reflection-doc__inner { background: #05030a; border-radius: 24px; padding: 64px clamp(28px, 6vw, 84px) 72px; } .reflection-doc__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.02em; text-align: center; margin-bottom: 36px; } .reflection-doc__body p { color: var(--text-dim); font-size: 1rem; line-height: 1.9; text-align: justify; margin-bottom: 22px; text-indent: 1.2em; } .reflection-doc__body p:last-child { margin-bottom: 0; } @media (max-width: 720px) { .page__topbar { align-items: flex-start; } .reflection-doc__inner { padding: 40px 24px 48px; } .reflection-doc__body p { text-align: left; text-indent: 0; } } /* ============================================================ Grade Me — interactive rubric modal ============================================================ */ .grade-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease-slide, ease); } .grade-modal[hidden] { display: none; } .grade-modal.is-open { opacity: 1; pointer-events: auto; } .grade-modal__backdrop { position: absolute; inset: 0; background: rgba(5, 3, 12, 0.72); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); } .grade-modal__card { position: relative; width: min(1080px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: clamp(28px, 4vw, 44px); border-radius: 24px; background: rgba(14, 10, 26, 0.96); border: 1px solid var(--glass-border-strong, rgba(167, 139, 250, 0.35)); box-shadow: 0 20px 60px -20px rgba(139, 92, 246, 0.45), 0 40px 120px -30px rgba(0, 0, 0, 0.8); transform: translateY(20px) scale(0.98); opacity: 0; transition: transform 320ms var(--ease-slide, ease), opacity 320ms var(--ease-slide, ease); } .grade-modal.is-open .grade-modal__card { transform: translateY(0) scale(1); opacity: 1; } .grade-modal__close { position: absolute; top: 16px; right: 18px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--glass-border-strong, rgba(167, 139, 250, 0.3)); background: rgba(255, 255, 255, 0.04); color: var(--text, #fff); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; } .grade-modal__close:hover { background: rgba(139, 92, 246, 0.18); border-color: var(--violet-2); transform: scale(1.05); } .grade-modal__header { margin-bottom: 24px; padding-right: 46px; } .grade-modal__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; margin: 10px 0 6px; } .grade-modal__sub { color: var(--text-dim, rgba(255, 255, 255, 0.65)); font-size: 0.98rem; margin: 0; } /* ---- Rubric grid ---- */ .grade-rubric { display: grid; grid-template-columns: 1.8fr repeat(4, 1fr) 0.7fr; gap: 6px; margin-bottom: 8px; } .grade-rubric__head { display: contents; font-family: var(--font-display); } .grade-rubric__head > div { background: rgba(139, 92, 246, 0.16); color: var(--text, #fff); padding: 14px 12px; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; text-align: center; border: 1px solid rgba(167, 139, 250, 0.22); } .grade-rubric__head > div:first-child { text-align: left; } .grade-rubric__lvl { display: block; color: var(--violet-2); font-weight: 700; } .grade-rubric__lvl-pts { display: block; font-size: 0.7rem; color: var(--text-dim, rgba(255, 255, 255, 0.55)); margin-top: 2px; letter-spacing: 0.05em; } .grade-rubric__row { display: contents; } .grade-rubric__row > * { border: 1px solid rgba(167, 139, 250, 0.14); padding: 14px 14px; background: rgba(255, 255, 255, 0.02); font-size: 0.9rem; line-height: 1.45; } .grade-rubric__criterion { color: var(--text-dim, rgba(255, 255, 255, 0.72)); text-align: left; } .grade-rubric__criterion strong { display: block; color: var(--text, #fff); font-family: var(--font-display); font-weight: 700; margin-bottom: 4px; } .grade-rubric__cell { font: inherit; color: var(--text-dim, rgba(255, 255, 255, 0.7)); cursor: pointer; text-align: center; transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease; position: relative; } .grade-rubric__cell:hover { background: rgba(139, 92, 246, 0.1); color: var(--text, #fff); border-color: rgba(167, 139, 250, 0.4); } .grade-rubric__cell.is-selected { background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(91, 33, 182, 0.3)); border-color: var(--violet-2); color: #fff; box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5); } .grade-rubric__cell.is-selected::after { content: '\2713'; position: absolute; top: 6px; right: 8px; font-size: 0.75rem; color: var(--violet-2); font-weight: 700; } .grade-rubric__score { font-family: var(--font-display); font-weight: 700; text-align: center; color: var(--violet-2); font-size: 0.95rem; display: flex; align-items: center; justify-content: center; } .grade-rubric__total { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(91, 33, 182, 0.18)); border: 1px solid rgba(167, 139, 250, 0.4); border-radius: 10px; padding: 16px 20px; margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text, #fff); } .grade-rubric__total-value { color: var(--violet-2); } /* ---- Feedback + actions ---- */ .grade-feedback { display: block; margin-top: 48px; margin-bottom: 24px; } .grade-feedback > span { display: block; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet-2); font-size: 0.82rem; margin-bottom: 10px; } .grade-feedback textarea { width: 100%; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(167, 139, 250, 0.25); border-radius: 14px; padding: 16px 18px; color: var(--text, #fff); font: inherit; font-size: 0.95rem; line-height: 1.6; resize: vertical; min-height: 120px; transition: border-color 180ms ease, background 180ms ease; } .grade-feedback textarea:focus { outline: none; border-color: var(--violet-2); background: rgba(139, 92, 246, 0.06); } .grade-modal__actions { display: flex; gap: 12px; flex-wrap: wrap; } .grade-submit[disabled] { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); } .grade-thanks { margin-top: 22px; padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(167, 139, 250, 0.35); background: rgba(139, 92, 246, 0.08); } .grade-thanks h3 { font-family: var(--font-display); font-weight: 700; margin: 0 0 6px; color: var(--violet-2); } .grade-thanks p { color: var(--text-dim, rgba(255, 255, 255, 0.7)); margin: 0; font-size: 0.95rem; } /* ---- Responsive: stack rubric on smaller screens ---- */ @media (max-width: 880px) { .grade-modal__card { padding: 28px 20px; } .grade-rubric { grid-template-columns: 1fr; gap: 14px; } .grade-rubric__head { display: none; } .grade-rubric__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border: 1px solid rgba(167, 139, 250, 0.22); border-radius: 14px; padding: 14px; background: rgba(255, 255, 255, 0.03); } .grade-rubric__row > * { border: none; background: transparent; padding: 10px; } .grade-rubric__criterion { grid-column: 1 / -1; padding: 4px 4px 8px; } .grade-rubric__cell { border: 1px solid rgba(167, 139, 250, 0.2); border-radius: 10px; padding: 10px 8px; font-size: 0.82rem; } .grade-rubric__score { grid-column: 1 / -1; text-align: right; padding: 6px 4px 0; } .grade-rubric__total { grid-column: 1 / -1; } }