/* ========================================================================== Ayse Inal — portfolio styles Palette: rose #e11d48 · violet #7c3aed · orange #f97316 on white Type: Poppins (headings 600/700) · Inter (body 400) ========================================================================== */ :root { /* color-scheme is how the browser (and extensions like Dark Reader) know which theme is active — keep it in sync with the palette */ color-scheme: light; --ink: #1c1524; --muted: #615a6b; --faint: #756e82; --hairline: #efecf4; --hairline-soft: #f2eff6; --chipline: #ece9f1; --bg-soft: #fbfaff; --seg-bg: #f4f1fa; --rose: #e11d48; --violet: #7c3aed; --orange: #f97316; --teal: #0d9488; --bg: #fff; --card: #fff; --nav-bg: rgba(255, 255, 255, .82); --line-strong: #e6e2ee; --tint-violet: #f5efff; --tint-rose: #ffeef2; --tint-orange: #fff1e6; --band: #1c1524; /* the deliberately-dark surfaces (statement, badges) */ --on-ink: #fff; /* text placed on an --ink background */ --grad: linear-gradient(120deg, #e11d48, #7c3aed 60%, #f97316); --grad-logo: linear-gradient(135deg, #e11d48, #7c3aed 55%, #f97316); --font-head: Poppins, Inter, system-ui, sans-serif; --font-body: Inter, system-ui, -apple-system, sans-serif; --font-mono: 'Courier New', monospace; } /* Dark theme — set via data-theme on (see the inline script in each page's and the toggle in js/main.js). The rose/violet/orange accents are lifted a step so small text keeps contrast on the dark ground; the gradient buttons keep their original colours (white text still passes). */ [data-theme="dark"] { color-scheme: dark; --ink: #ece7f3; --muted: #a79ebb; --faint: #9d94b0; --hairline: #2b2338; --hairline-soft: #261f31; --chipline: #322a41; --bg-soft: #1a1424; --seg-bg: #251d33; --rose: #fb7185; --violet: #a78bfa; --orange: #fb923c; --teal: #2dd4bf; --bg: #120d1b; --card: #1c1627; --nav-bg: rgba(18, 13, 27, .82); --line-strong: #372e48; --tint-violet: #2b2144; --tint-rose: #3a1b28; --tint-orange: #3a2517; --band: #1f1729; --on-ink: #171021; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } ::selection { background: #f5d6df; color: #1c1524; } [data-theme="dark"] ::selection { background: #46306e; color: #f2edf9; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-head); } a { color: inherit; } button { font: inherit; } :focus-visible { outline: 3px solid #7c3aed66; outline-offset: 2px; border-radius: 6px; } input:focus, textarea:focus { outline: none; border-color: var(--violet) !important; box-shadow: 0 0 0 3px #7c3aed22 !important; } body.no-scroll { overflow: hidden; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } } @keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- layout helpers ---------- */ .container { max-width: 1160px; margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 10px 18px; border-radius: 0 0 12px 0; font-weight: 600; font-size: 14px; text-decoration: none; } .skip-link:focus { left: 0; } .eyebrow { font-size: 14px; font-weight: 600; color: var(--violet); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .grad-text-warm { background: linear-gradient(120deg, #f97316, #e11d48, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; } .grad-text-rv { background: linear-gradient(120deg, #e11d48, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; } /* brighter gradient stops for text clipped on a dark ground */ [data-theme="dark"] .grad-text { background-image: linear-gradient(120deg, #fb7185, #a78bfa 60%, #fb923c); } [data-theme="dark"] .grad-text-warm { background-image: linear-gradient(120deg, #fb923c, #fb7185, #a78bfa); } [data-theme="dark"] .grad-text-rv { background-image: linear-gradient(120deg, #fb7185, #a78bfa); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; border-radius: 13px; padding: 15px 28px; cursor: pointer; text-decoration: none; border: none; transition: transform .18s, box-shadow .18s, border-color .18s, background .18s; } .btn-grad { color: #fff; background: var(--grad); box-shadow: 0 10px 24px -10px #7c3aed88; } .btn-grad:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px #7c3aedaa; } .btn-outline { color: var(--ink); background: var(--card); border: 1.5px solid var(--line-strong); padding: 15px 26px; } .btn-outline:hover { border-color: var(--ink); transform: translateY(-2px); } .btn-light { /* sits on the always-dark statement band, so fixed colours in both themes */ color: #1c1524; background: #fff; padding: 16px 30px; } .btn-light:hover { transform: translateY(-2px); } .btn-dark { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--on-ink); background: var(--ink); border-radius: 11px; padding: 11px 20px; text-decoration: none; border: none; cursor: pointer; transition: background .18s; } .btn-dark:hover { background: var(--violet); } /* ---------- nav ---------- */ .site-nav { position: sticky; top: 0; z-index: 40; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } .nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 28px; height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--grad-logo); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 15px; } .brand-name { font-family: var(--font-head); font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; } .nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; } .nav-links a { position: relative; display: inline-block; font-size: 15px; font-weight: 500; color: var(--faint); text-decoration: none; padding: 6px 2px; transition: color .15s; } .nav-links a:hover { color: var(--ink); } .nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; } .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, #e11d48, #7c3aed, #f97316); } .theme-toggle { width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--hairline); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); transition: color .15s, border-color .15s; } .theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); } .theme-toggle svg { display: block; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (max-width: 480px) { .brand-name { display: none; } .nav-links { gap: 12px; } .nav-links a { font-size: 14px; } .nav-inner { padding: 0 16px; gap: 14px; } .theme-toggle { width: 32px; height: 32px; } } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--hairline); margin-top: 20px; } .footer-inner { max-width: 1160px; margin: 0 auto; padding: 34px 28px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: space-between; } .footer-brand { display: flex; align-items: center; gap: 11px; } .footer-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; } .footer-brand span:last-child { font-size: 14px; color: var(--muted); } .footer-links { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; } .footer-links a { font-size: 14px; color: var(--faint); text-decoration: none; transition: color .15s; } .footer-links a:hover { color: var(--ink); } /* ---------- thumbnails (shared) ---------- */ .thumb { position: relative; overflow: hidden; } .thumb-fill { position: absolute; inset: 0; } .thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== HOME ========================================================================== */ .hero { max-width: 1160px; margin: 0 auto; padding: 76px 28px 60px; display: flex; gap: 56px; align-items: center; flex-wrap: wrap; } .hero-copy { flex: 1 1 460px; min-width: 320px; } .hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; background: var(--tint-violet); border: 1px solid var(--chipline); font-size: 13px; font-weight: 600; color: var(--violet); margin-bottom: 26px; } .hero-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); } .hero h1 { font-weight: 700; font-size: clamp(36px, 6.2vw, 56px); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 22px; } .hero-sub { font-size: 18.5px; line-height: 1.62; color: var(--muted); max-width: 540px; margin: 0 0 34px; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; } .hero-stats { display: flex; gap: 34px; flex-wrap: wrap; } .hero-stats .divider { width: 1px; background: var(--hairline); } .stat-value { font-family: var(--font-head); font-weight: 700; font-size: 26px; } .stat-label { font-size: 13.5px; color: var(--faint); margin-top: 2px; } /* hero visual */ .hero-visual { flex: 1 1 360px; min-width: 300px; position: relative; display: flex; justify-content: center; padding: 20px 0; } .hero-card-wrap { position: relative; width: 340px; } .feature-card { border-radius: 22px; border: 1px solid var(--hairline); background: var(--card); box-shadow: 0 30px 60px -28px rgba(28, 21, 36, .28); overflow: hidden; transform: rotate(-2.5deg); } .feature-thumb { height: 186px; } .feature-body { padding: 18px 20px; } .feature-tags { display: flex; gap: 7px; margin-bottom: 10px; } .tag { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px; color: var(--violet); background: var(--tint-violet); } .tag-rose { color: var(--rose); background: var(--tint-rose); } .feature-title { font-family: var(--font-head); font-weight: 600; font-size: 16px; } .feature-meta { font-size: 12.5px; color: var(--faint); margin-top: 4px; font-family: var(--font-mono); } .float-badge { position: absolute; border-radius: 14px; padding: 11px 15px; animation: floaty 5s ease-in-out infinite; } .float-badge .badge-label { font-size: 11px; font-weight: 600; } .float-badge .badge-value { font-family: var(--font-head); font-weight: 700; font-size: 19px; } .float-a { top: -16px; right: -14px; background: var(--card); border: 1px solid var(--hairline); box-shadow: 0 16px 30px -14px rgba(28, 21, 36, .3); } .float-a .badge-label { color: var(--faint); } .float-a .badge-value { color: #9a92a8; text-decoration: line-through; } .float-b { bottom: -18px; left: -20px; background: var(--band); color: #fff; box-shadow: 0 16px 34px -12px rgba(28, 21, 36, .5); animation-duration: 6.5s; animation-delay: .6s; } .float-b .badge-label { color: #b6aec6; } .float-b .badge-value { background: linear-gradient(120deg, #f97316, #e11d48); -webkit-background-clip: text; background-clip: text; color: transparent; } /* marquee strip */ .marquee-section { padding: 22px 0 46px; border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); background: var(--bg-soft); overflow: hidden; } .marquee-head { margin-bottom: 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .marquee-label { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--faint); letter-spacing: .02em; text-transform: uppercase; } .link-accent { color: var(--violet); font-weight: 600; font-size: 14px; text-decoration: none; } .link-accent:hover { text-decoration: underline; } .marquee-mask { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .marquee-track { display: flex; gap: 20px; width: max-content; animation: marquee 34s linear infinite; } .marquee-mask:hover .marquee-track, .marquee-mask:focus-within .marquee-track { animation-play-state: paused; } .marquee-card { width: 230px; flex: none; background: var(--card); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 20px -16px rgba(28, 21, 36, .3); } .marquee-thumb { height: 112px; } .marquee-body { padding: 12px 14px; } .marquee-title { font-family: var(--font-head); font-weight: 600; font-size: 14px; margin-top: 8px; line-height: 1.3; } /* statement band */ .statement-wrap { padding-top: 74px; padding-bottom: 74px; } .statement { border-radius: 26px; background: var(--band); color: #fff; padding: clamp(36px, 5vw, 58px) clamp(28px, 4.5vw, 52px); display: flex; gap: 44px; flex-wrap: wrap; align-items: center; justify-content: space-between; position: relative; overflow: hidden; } .statement::before, .statement::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .statement::before { top: -60px; right: -40px; width: 240px; height: 240px; background: radial-gradient(circle, #7c3aed55, transparent 70%); } .statement::after { bottom: -80px; left: 30%; width: 220px; height: 220px; background: radial-gradient(circle, #e11d4844, transparent 70%); } .statement-copy { flex: 1 1 460px; min-width: 300px; position: relative; z-index: 1; } .statement h2 { font-weight: 700; font-size: clamp(28px, 4.5vw, 36px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px; } .statement p { font-size: 16.5px; line-height: 1.6; color: #c3bccf; max-width: 520px; margin: 0; } .statement-cta { position: relative; z-index: 1; } /* ========================================================================== PAGE HEADERS (About / Showcase / Contact) ========================================================================== */ .page-head { padding-top: 70px; padding-bottom: 30px; } .page-head h1 { font-weight: 700; font-size: clamp(32px, 5.5vw, 44px); line-height: 1.08; letter-spacing: -.025em; margin: 0 0 16px; } .page-head .lede { font-size: 17.5px; line-height: 1.6; color: var(--muted); max-width: 600px; margin: 0; } /* ========================================================================== ABOUT ========================================================================== */ .about-head { padding-top: 70px; padding-bottom: 40px; } .about-head h1 { max-width: 760px; margin-bottom: 0; } .about-head .dim { color: #9a92a8; } .about-layout { padding-top: 24px; padding-bottom: 20px; display: flex; gap: 56px; flex-wrap: wrap; align-items: flex-start; } .about-side { flex: 0 0 340px; position: sticky; top: 96px; } @media (max-width: 900px) { .about-side { position: static; flex: 1 1 100%; max-width: 420px; } } .photo-slot { border-radius: 22px; overflow: hidden; border: 1px solid var(--hairline); box-shadow: 0 30px 60px -30px rgba(28, 21, 36, .3); aspect-ratio: 4 / 5; background: repeating-linear-gradient(135deg, #7c3aed14 0 12px, #e11d480d 12px 24px); display: flex; align-items: center; justify-content: center; } .photo-slot-note { text-align: center; color: var(--faint); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; } .photo-slot-note .glyph { font-size: 30px; margin-bottom: 6px; } .about-side-links { display: flex; gap: 10px; margin-top: 16px; } .side-link { flex: 1; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: 14px; border-radius: 11px; padding: 11px; text-decoration: none; transition: border-color .18s; } .side-link.linkedin { color: var(--ink); background: var(--card); border: 1.5px solid var(--line-strong); } .side-link.linkedin:hover { border-color: var(--ink); } .side-link.email { color: var(--on-ink); background: var(--ink); border: 1.5px solid var(--ink); } .about-main { flex: 1 1 460px; min-width: 320px; } .about-main .lead { font-size: 18px; line-height: 1.7; color: #3c3648; margin: 0 0 20px; } [data-theme="dark"] .about-main .lead { color: #d4cde0; } .about-main .lead strong { color: var(--ink); font-weight: 600; } .about-main .body-para { font-size: 17px; line-height: 1.72; color: var(--muted); margin: 0 0 20px; } .about-main .body-para.last { margin-bottom: 30px; } .tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 40px; } .tool-card { border: 1px solid var(--hairline); border-radius: 16px; padding: 18px 20px; background: var(--bg-soft); } .tool-card h3 { font-weight: 600; font-size: 14px; margin: 0 0 12px; } .tool-card.c-violet h3 { color: var(--violet); } .tool-card.c-orange h3 { color: var(--orange); } .tool-card.c-rose h3 { color: var(--rose); } .tool-chips { display: flex; flex-wrap: wrap; gap: 8px; } .tool-chips span { font-size: 13px; font-weight: 500; background: var(--card); border: 1px solid var(--chipline); padding: 6px 11px; border-radius: 8px; } .section-title { font-weight: 600; font-size: 20px; margin: 0 0 20px; } .timeline { margin-bottom: 40px; } .timeline-item { display: flex; gap: 18px; align-items: stretch; } .timeline-rail { flex: none; display: flex; flex-direction: column; align-items: center; } .timeline-dot { width: 13px; height: 13px; border-radius: 50%; margin-top: 5px; flex: none; } .timeline-line { width: 2px; flex: 1; background: var(--hairline); } .timeline-item:last-child .timeline-line { background: transparent; } .timeline-body { padding-bottom: 22px; } .timeline-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .timeline-role { font-family: var(--font-head); font-weight: 600; font-size: 16px; } .timeline-org { font-size: 13.5px; color: var(--faint); } .timeline-period { font-size: 12.5px; color: var(--faint); font-weight: 500; margin: 3px 0 8px; font-family: var(--font-mono); } .timeline-note { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 520px; } .recognition { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .recognition span { font-size: 13.5px; font-weight: 500; color: var(--ink); background: var(--card); border: 1px solid var(--chipline); padding: 9px 14px; border-radius: 10px; } .approach { display: flex; flex-direction: column; gap: 14px; padding-bottom: 40px; } .approach-step { display: flex; gap: 16px; align-items: flex-start; } .step-num { flex: none; width: 30px; height: 30px; border-radius: 9px; font-family: var(--font-head); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; } .step-num.n1 { background: var(--tint-rose); color: var(--rose); } .step-num.n2 { background: var(--tint-violet); color: var(--violet); } .step-num.n3 { background: var(--tint-orange); color: var(--orange); } .approach-step p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); } .approach-step strong { color: var(--ink); font-weight: 600; } /* ========================================================================== SHOWCASE ========================================================================== */ .filter-bar { padding-top: 14px; padding-bottom: 8px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: space-between; } .filter-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .filter-label { font-size: 14px; font-weight: 600; color: var(--faint); } .seg { display: inline-flex; background: var(--seg-bg); border-radius: 11px; padding: 4px; } .seg-btn { font-family: var(--font-head); font-weight: 600; font-size: 13.5px; padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; background: transparent; color: var(--faint); transition: all .15s; } .seg-btn[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px -2px rgba(28, 21, 36, .25); } [data-theme="dark"] .seg-btn[aria-pressed="true"] { background: #382e4c; } .result-count { font-size: 14px; color: var(--faint); } .chip-row { padding-top: 6px; padding-bottom: 4px; display: flex; gap: 10px; flex-wrap: wrap; } .chip { font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: all .15s; background: var(--card); color: var(--muted); border: 1px solid var(--chipline); } .chip:hover { border-color: #c9c2d6; color: var(--ink); } [data-theme="dark"] .chip:hover { border-color: #4a4060; } .chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } .grid-wrap { padding-top: 26px; padding-bottom: 40px; } .course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; } .course-card { border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; box-shadow: 0 10px 26px -20px rgba(28, 21, 36, .4); } .course-card:hover, .course-card:focus-within { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(28, 21, 36, .4); } .card-thumb { height: 168px; } .card-badge { position: absolute; top: 12px; left: 12px; font-size: 11.5px; font-weight: 600; color: #1c1524; background: rgba(255, 255, 255, .92); padding: 4px 10px; border-radius: 7px; } .card-duration { position: absolute; bottom: 12px; right: 12px; font-size: 11.5px; font-weight: 500; color: #1c1524; background: rgba(255, 255, 255, .92); padding: 4px 10px; border-radius: 7px; font-family: var(--font-mono); } .card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; } .card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; } .card-tags .tag { font-size: 11.5px; } .card-title { font-weight: 600; font-size: 19px; line-height: 1.25; margin: 0 0 9px; } .card-desc { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; flex: 1; } .btn-launch { align-self: flex-start; } .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); } .empty-state p { font-size: 16px; margin: 0 0 18px; } .footnote { margin: 34px 0 0; font-size: 13px; color: var(--faint); font-family: var(--font-mono); text-align: center; } .footnote .mono-accent { color: var(--violet); } /* ---------- lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeup .2s ease; } .lightbox[hidden] { display: none; } .lightbox-backdrop { position: absolute; inset: 0; background: rgba(20, 15, 26, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: none; cursor: default; padding: 0; } .lightbox-panel { position: relative; width: 100%; max-width: 920px; max-height: 90vh; background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 90px -30px rgba(20, 15, 26, .7); } /* Embedded courses are authored against a light page, so the viewer panel keeps the light palette in both themes — the course always sits on white. */ [data-theme="dark"] .lightbox-panel { color-scheme: light; color: #1c1524; --ink: #1c1524; --muted: #615a6b; --faint: #756e82; --hairline: #efecf4; --bg-soft: #fbfaff; --seg-bg: #f4f1fa; --violet: #7c3aed; --orange: #f97316; --on-ink: #fff; } .lb-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--hairline); } .lb-title { font-family: var(--font-head); font-weight: 600; font-size: 17px; } .lb-src { font-size: 12.5px; color: var(--faint); margin-top: 2px; font-family: var(--font-mono); word-break: break-all; } .lb-close { flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--hairline); background: #fff; cursor: pointer; font-size: 18px; color: var(--muted); transition: background .15s; } .lb-close:hover { background: var(--seg-bg); } .lb-body { /* flex-basis: auto so the explicit height wins; shrink 1 lets a short viewport compress the viewer instead of cropping the footer */ flex: 0 1 auto; height: min(62vh, 560px); position: relative; background: var(--bg-soft); } .lb-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .lb-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff; } .lb-loading[hidden] { display: none; } .lb-loading-fill { position: absolute; inset: 0; } .lb-loading-card { position: relative; text-align: center; color: var(--muted); background: rgba(255, 255, 255, .92); border-radius: 16px; padding: 26px 32px; max-width: 420px; font-family: var(--font-head); font-weight: 600; font-size: 15px; } .lb-spinner { width: 30px; height: 30px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid var(--hairline); border-top-color: var(--violet); animation: spin .8s linear infinite; } .lb-hint { margin: 10px 0 0; font-family: var(--font-body); font-weight: 400; font-size: 13.5px; color: var(--faint); } .lb-hint a { color: var(--violet); font-weight: 600; } .lb-hint[hidden] { display: none; } .lb-foot { padding: 16px 22px; border-top: 1px solid var(--hairline); display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .lb-source-note { font-size: 12.5px; color: var(--faint); } .lb-source-note .src-local { color: var(--violet); font-weight: 600; } .lb-source-note .src-external { color: var(--orange); font-weight: 600; } @media (max-width: 640px) { .lightbox { padding: 12px; } .lb-body { height: min(58vh, 480px); } } /* ========================================================================== CONTACT ========================================================================== */ .contact-layout { padding-top: 70px; padding-bottom: 60px; display: flex; gap: 56px; flex-wrap: wrap; align-items: flex-start; } .contact-intro { flex: 1 1 380px; min-width: 300px; } .contact-intro h1 { font-weight: 700; font-size: clamp(32px, 5.5vw, 44px); line-height: 1.08; letter-spacing: -.025em; margin: 0 0 18px; } .contact-intro .lede { font-size: 17.5px; line-height: 1.62; color: var(--muted); max-width: 440px; margin: 0 0 32px; } .contact-cards { display: flex; flex-direction: column; gap: 14px; } .contact-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px; transition: border-color .18s, transform .18s; } .contact-card.email-card:hover { border-color: var(--rose); transform: translateX(3px); } .contact-card.linkedin-card:hover { border-color: var(--violet); transform: translateX(3px); } .contact-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .email-card .contact-card-icon { background: var(--tint-rose); color: var(--rose); } .linkedin-card .contact-card-icon { background: var(--tint-violet); color: var(--violet); font-family: var(--font-head); font-weight: 700; font-size: 15px; } .contact-card-label { display: block; font-size: 12.5px; color: var(--faint); } .contact-card-value { font-family: var(--font-head); font-weight: 600; font-size: 15px; } .contact-form-wrap { flex: 1 1 380px; min-width: 300px; } .contact-form { border: 1px solid var(--hairline); border-radius: 20px; padding: 30px 28px; background: var(--bg-soft); box-shadow: 0 24px 50px -34px rgba(28, 21, 36, .4); } .form-field { margin-bottom: 18px; } .form-field.last { margin-bottom: 22px; } .form-field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; } .form-field input, .form-field textarea { width: 100%; font-family: var(--font-body); font-size: 15px; padding: 13px 15px; border: 1.5px solid var(--line-strong); border-radius: 11px; background: var(--card); color: var(--ink); } .form-field textarea { resize: vertical; } .btn-submit { width: 100%; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; color: #fff; background: var(--grad); border: none; border-radius: 12px; padding: 15px; cursor: pointer; transition: transform .18s, opacity .18s; } .btn-submit:hover { transform: translateY(-2px); } .btn-submit:disabled { opacity: .6; cursor: wait; transform: none; } .form-status { margin: 14px 0 0; font-size: 14px; line-height: 1.55; text-align: center; border-radius: 10px; padding: 11px 14px; } .form-status[hidden] { display: none; } .form-status.ok { background: #ecfdf5; color: #047857; font-weight: 500; } .form-status.error { background: #fff1f2; color: #be123c; font-weight: 500; } [data-theme="dark"] .form-status.ok { background: #0d2b21; color: #34d399; } [data-theme="dark"] .form-status.error { background: #391722; color: #fb7185; } .form-status a { color: inherit; font-weight: 600; } .form-note { margin: 14px 0 0; font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.5; } .form-note a { color: var(--violet); font-weight: 600; text-decoration: none; } .form-note a:hover { text-decoration: underline; } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee-track { animation: none; } .float-badge { animation: none; } .lightbox { animation: none; } .btn-grad:hover, .btn-outline:hover, .btn-light:hover, .btn-submit:hover, .contact-card:hover, .course-card:hover { transform: none; } }