/* ============================================================================ * parchment-overrides.css * Loaded AFTER main.css (so equal-specificity rules here win). * Goal: strip every card border, every card background, every section bg-shift, * and replace the page background with a single global parchment surface. * Used by: index_parchment.html (a parallel variant of index_en.html). * ========================================================================= */ /* ---------- 1. Variable overrides (cascades to most main.css usage) ---------- */ :root, [data-theme="academic"] { --bg-white: transparent; --bg-light: transparent; --bg-subtle: transparent; --gradient-hero: transparent; --border-light: transparent; /* NOTE: --shadow-md / --shadow-lg INTENTIONALLY NOT overridden so that hover reveals shadow naturally (cards are flat by default, lift on hover) */ /* Warm-tinted text for parchment legibility (was cool slate) */ --text-primary: oklch(0.20 0.04 30); --text-secondary: oklch(0.34 0.05 30); --text-muted: oklch(0.45 0.06 35); } /* ---------- 2. Global parchment background ---------- wm-01-parchment-classic (Wikimedia PD) covers the viewport, fixed during scroll so the texture stays put rather than tiling visibly. Cream fallback below. */ html { background: url("../res/parchment-options/wm-02-pergament-aged.jpg") center / cover no-repeat fixed, oklch(0.93 0.030 78) !important; color: var(--text-primary); } body { background: transparent !important; color: var(--text-primary); } /* ---------- 3. Strip all card / panel backgrounds + borders + shadows ---------- */ .stat-card, .timeline-card, .project-card, .pub-card, .service-card, .blog-card, .visitor-card, .personal-card, .skill-category, .contact-item, .news-row, .news-table, .news-section, .research-outline, .research-outline.section, .section, .section-alt, .about-text, .hero, .hero-content, .contact-section, .contact-info, .contact-map, .timeline-event, .timeline-content, .welcome-form-container, .award-badge, .experience-card, .award-card, .talk-card { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } /* ---------- 4. Hero — also strip the SVG-pattern overlay ---------- */ .hero::before, .hero::after { display: none !important; } /* ---------- 5. Skill tags — let them keep a faint outline so they read as chips ---------- */ .skill-tag { background: oklch(0.85 0.050 75 / 0.45) !important; border: 1px solid oklch(0.45 0.10 50 / 0.25) !important; box-shadow: none !important; color: var(--text-primary) !important; } .skill-tag.highlight { background: oklch(0.62 0.13 70 / 0.25) !important; border-color: oklch(0.45 0.12 50 / 0.45) !important; } /* ---------- 6. Navbar — fully transparent (per Linlin: 融入羊皮纸主背景) ---------- */ .navbar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px dashed oklch(0.45 0.10 50 / 0.20) !important; box-shadow: none !important; } .navbar.scrolled { /* Linlin: 滚动时颜色不要变. Stay fully transparent like initial state. */ background: transparent !important; box-shadow: none !important; border-bottom: 1px dashed oklch(0.45 0.10 50 / 0.20) !important; } /* Bigger nav-link font (was 0.8rem in main.css) */ .nav-link { font-size: 1.0rem !important; font-weight: 600 !important; color: var(--ink-deep) !important; text-shadow: -0.5px -0.5px 0 rgba(255, 240, 200, 0.4), 0.5px 0.5px 1px rgba(20, 8, 0, 0.35) !important; } .navbar-brand { font-size: 1.2rem !important; font-weight: 700 !important; } @media (min-width: 1200px) { .nav-link { font-size: 1.05rem !important; } .navbar-brand { font-size: 1.3rem !important; } } /* ---------- 7. Welcome popup — FULL alignment with index_en.html canonical ---------- Verified pixel-by-pixel against index_en.html via getComputedStyle. Restored exactly: cream gradient bg, Caveat headings, specific colors, no UA button defaults. */ /* 7.1 Overlay shell — dark backdrop + blur */ .wp-overlay { background: rgba(15, 23, 42, 0.55) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } /* 7.2 wp-card — cream gradient bg + Spectral body + warm-brown ink (#3D3528) */ .wp-card { background-image: linear-gradient(rgb(253, 251, 245) 0%, rgb(245, 239, 222) 100%) !important; background-color: rgb(253, 251, 245) !important; color: rgb(61, 53, 40) !important; font-family: 'Spectral', 'Iowan Old Style', Georgia, serif !important; font-size: 16px !important; line-height: 1.5 !important; text-shadow: none !important; letter-spacing: normal !important; } /* 7.3 ALL descendants — Spectral body, warm ink, no shadow, no my-bumps */ .wp-overlay *, .wp-card * { font-family: 'Spectral', 'Iowan Old Style', Georgia, serif !important; color: rgb(61, 53, 40) !important; text-shadow: none !important; letter-spacing: normal !important; font-size: revert !important; line-height: revert !important; font-weight: revert !important; } .wp-overlay strong, .wp-overlay b { font-weight: 700 !important; } .wp-overlay em, .wp-overlay i { font-style: italic !important; } /* 7.4 Headings — Caveat 34px italic warm-brown (canonical from main.css:934) */ .wp-overlay .wp-h2, .wp-overlay h1, .wp-overlay h2 { font-family: 'Caveat', 'Reenie Beanie', cursive !important; font-size: 34px !important; font-weight: 600 !important; font-style: italic !important; line-height: 1.1 !important; letter-spacing: 0 !important; color: rgb(91, 79, 58) !important; } html[lang="zh"] .wp-overlay .wp-h2 { font-size: 30px !important; font-style: normal !important; } /* 7.5 Sub-text + script labels — Caveat 17px lighter color (canonical from main.css:939) */ .wp-overlay .wp-sub { font-family: 'Caveat', 'Reenie Beanie', cursive !important; font-size: 17px !important; color: rgb(122, 111, 90) !important; font-style: italic !important; } .wp-overlay .wp-script, .wp-overlay .wp-script-label { font-family: 'Caveat', 'Reenie Beanie', cursive !important; color: rgb(122, 111, 90) !important; font-style: italic !important; } html[lang="zh"] .wp-overlay .wp-sub { font-size: 16px !important; font-style: normal !important; } html[lang="zh"] .wp-overlay .wp-script, html[lang="zh"] .wp-overlay .wp-script-label { font-style: normal !important; } /* 7.5b wp-line and other Caveat lines */ .wp-overlay .wp-line { font-family: 'Caveat', 'Reenie Beanie', cursive !important; font-size: 22px !important; line-height: 1.4 !important; color: rgb(63, 58, 54) !important; } /* 7.6 Submit button — Caveat 28px transparent (canonical from main.css:1060) */ .wp-overlay .wp-submit, .wp-overlay button { font-family: 'Caveat', 'Reenie Beanie', cursive !important; font-size: 28px !important; font-weight: 600 !important; font-style: italic !important; letter-spacing: 0.01em !important; color: rgb(91, 79, 58) !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; animation: none !important; border: none !important; border-bottom: 1px dashed rgba(120,113,108,0.22) !important; } html[lang="zh"] .wp-overlay .wp-submit, html[lang="zh"] .wp-overlay button { font-size: 26px !important; font-style: normal !important; } /* 7.7 wp-card animation owned by main.css (don't override animation) */ .wp-overlay.active .wp-card { opacity: 1 !important; visibility: visible !important; } /* 7.8 Inputs / textarea — Spectral body */ .wp-overlay textarea, .wp-overlay input, .wp-overlay select { font-family: 'Spectral', 'Iowan Old Style', Georgia, serif !important; color: rgb(61, 53, 40) !important; background: transparent !important; } /* ---------- 8. Image lightbox — preserve dark overlay (only for image zoom) ---------- */ .lightbox-backdrop, .modal-backdrop { background: oklch(0.10 0.04 30 / 0.78) !important; } /* ---------- 8.5 Site search modal — keep on parchment, not gray/white default ---------- */ .site-search-backdrop, body[data-theme="academic"] .site-search-backdrop { background: oklch(0.85 0.05 75 / 0.55) !important; /* warm parchment tint */ backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; } .site-search-panel { background: oklch(0.94 0.030 78) !important; /* light cream parchment */ background-image: url("../res/parchment-options/wm-02-pergament-aged.jpg") !important; background-size: cover !important; background-position: center !important; border: 1px solid oklch(0.45 0.10 50 / 0.4) !important; box-shadow: 0 24px 60px oklch(0.20 0.06 30 / 0.5) !important; color: var(--ink-deep) !important; } .site-search-panel input, .site-search-input { background: transparent !important; color: var(--ink-deep) !important; border-color: oklch(0.45 0.10 50 / 0.3) !important; } /* ---------- 8.6 Howler tip label — hide per Linlin (no need for "尖叫信" caption) ---------- */ .howl-tip { display: none !important; } /* ---------- 9. News + ticker — keep content visible without panel chrome ---------- */ .news-ticker, .news-celebration { background: transparent !important; } .news-row { border-bottom: 1px dashed oklch(0.45 0.10 50 / 0.22) !important; } .news-row:last-child { border-bottom: none !important; } /* ---------- 10. Section dividers — replace bg shift with subtle ink rule ---------- */ .section + .section, .section-alt + .section, .section + .section-alt { border-top: 1px dashed oklch(0.45 0.10 50 / 0.20); } /* ---------- 11. Footer — keep readable but no card chrome ---------- */ footer, .site-footer { background: transparent !important; border-top: 1px dashed oklch(0.45 0.10 50 / 0.30) !important; box-shadow: none !important; color: var(--text-secondary) !important; } /* ---------- 12. Buttons — keep primary buttons readable, others ghost ---------- */ .btn, button.hero-buttons-secondary, .ghost-btn { box-shadow: none !important; } .hero-buttons .btn-primary, .btn-primary { background: oklch(0.45 0.16 27) !important; color: oklch(0.96 0.04 60) !important; border: none !important; } .btn-secondary, .hero-buttons .btn-secondary { background: transparent !important; border: 1px solid oklch(0.45 0.16 27 / 0.5) !important; color: oklch(0.45 0.16 27) !important; } /* ---------- 13. Hero badge (Open to Work pulse) — keep visible ---------- */ .hero-badge { background: oklch(0.62 0.13 70 / 0.2) !important; border: 1px solid oklch(0.45 0.12 50 / 0.4) !important; color: var(--text-primary) !important; } .hero-badge:hover, .hero-badge:focus-visible { background: oklch(0.62 0.13 70 / 0.35) !important; } /* ---------- 14. Carousel controls (publications + projects) — minimal ---------- */ .carousel-controls .carousel-btn, .section-controls button { background: transparent !important; border: 1px solid oklch(0.45 0.10 50 / 0.4) !important; color: var(--text-secondary) !important; } /* ---------- 15. Search modal — keep readable surface (not transparent) ---------- */ .search-modal, .search-modal-content { background: oklch(0.92 0.06 75 / 0.96) !important; border: 1px solid oklch(0.45 0.10 50 / 0.4) !important; box-shadow: 0 30px 60px oklch(0.20 0.06 30 / 0.45) !important; } /* ---------- 16. Chatbot trigger — kept hidden by D5.J, but neutralize if shown ---------- */ .chatbot-trigger { background: oklch(0.45 0.16 27) !important; border: 1px solid oklch(0.42 0.16 27) !important; } /* ---------- 17. Reduce inline image / project-image white backgrounds ---------- */ .project-image, .pub-thumbnail { background: transparent !important; } /* ---------- 18. Images themselves — slight warm cast so they don't pop too white ---------- */ img.profile-photo, .project-image img, .pub-thumbnail img { filter: sepia(0.06) brightness(1.0); } /* Profile photo — visibly more transparent + heavier edge feathering Linlin: 还要更明显. opacity 0.92 → 0.82, mask falloff 更早开始 + 更急. */ .profile-image, img.profile-image, .hero-image img { mix-blend-mode: normal !important; opacity: 0.82 !important; /* 明显能看到背景透过来 */ filter: contrast(1.04) saturate(1.05) blur(0.3px) !important; /* 微 blur 整体让边缘也柔 */ /* 重 mask: 边缘从 40% 就开始 fade，到 92% 完全透明 */ -webkit-mask-image: radial-gradient(circle at 50% 50%, black 38%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.25) 84%, rgba(0,0,0,0.08) 92%, transparent 100%) !important; mask-image: radial-gradient(circle at 50% 50%, black 38%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.25) 84%, rgba(0,0,0,0.08) 92%, transparent 100%) !important; box-shadow: none !important; border: none !important; border-radius: 50% !important; transition: opacity 0.4s ease, filter 0.4s ease; } /* On hover — slight 'wake up'/focus effect */ .profile-image:hover, .hero-image img:hover { opacity: 0.95 !important; filter: contrast(1.06) saturate(1.10) blur(0px) !important; } .hero-image { background: transparent !important; box-shadow: none !important; } /* ---------- 19. Hover micro-feedback — flat by default, but lift + tint on hover (Linlin: don't kill the highlight) ---------- */ .stat-card, .timeline-card, .project-card, .pub-card, .service-card, .blog-card, .visitor-card, .personal-card, .skill-category, .contact-item, .news-row, .award-card, .talk-card, .thesis-highlight { transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; } .stat-card:hover, .timeline-card:hover, .project-card:hover, a.project-card:hover, div.project-card:hover, .pub-card:hover, .service-card:hover, .blog-card:hover, .visitor-card:hover, .personal-card:hover, .thesis-highlight:hover, .skill-category:hover { background: oklch(0.96 0.020 78 / 0.55) !important; box-shadow: 0 8px 22px oklch(0.20 0.06 30 / 0.18) !important; /* transform: translateY(-4px) is already set by main.css for these cards */ } .contact-item:hover, .news-row:hover { background: oklch(0.96 0.020 78 / 0.4) !important; } .award-card:hover, .talk-card:hover { background: oklch(0.96 0.020 78 / 0.55) !important; box-shadow: 0 6px 16px oklch(0.20 0.06 30 / 0.15) !important; } /* Skill tag hover restored — slightly warmer + darker outline */ .skill-tag:hover { background: oklch(0.62 0.13 70 / 0.30) !important; border-color: oklch(0.45 0.12 50 / 0.55) !important; transform: translateY(-1px); } /* outline-item / word / pub-link / project-link hover — keep main.css color shifts (untouched) */ /* ============================================================================ * §X. HANDWRITTEN FONT STACK (Linlin's picks — Round 1 + Round 2 ZH-G) * EN hero name : Reenie Beanie (№5 — Scholar note-taker) * EN body : Indie Flower (№6 — Storyteller, friendly reading) * ZH hero name : Zhi Mang Xing (№4 — Architect/draftsman) * ZH body : Ma Shan Zheng (G — same as hero, full unification) * ========================================================================= */ /* English body — apply Indie Flower to body, but keep monospace + UI fonts intact */ body, p, li, span, td, th, blockquote, .news-item, .news-content, .about-text, .stat-card, .pub-card, .project-card, .timeline-card, .skill-tag, .filter-tag, .nav-link, .dropdown-item, .hero-tagline, .hero-subtitle { font-family: 'Indie Flower', 'Spectral', Georgia, serif !important; font-weight: 400 !important; } /* Body text scaling — handwritten fonts read smaller, but Linlin: too big now. Tightened: mobile 1.05, desktop 1.15, wide 1.20. Headings scaled proportionally. */ body, p, li, .news-content, .about-text { font-size: 1.05em !important; line-height: 1.7 !important; } @media (min-width: 769px) { body, p, li, .news-content, .about-text { font-size: 1.15em !important; } .hero-tagline, .hero-subtitle { font-size: 1.08em !important; } .hero-h1 { font-size: 3.2rem !important; } .section-title { font-size: 1.85rem !important; } } @media (min-width: 1200px) { body, p, li, .news-content, .about-text { font-size: 1.20em !important; } .hero-h1 { font-size: 3.6rem !important; } .section-title { font-size: 2rem !important; } } /* English hero name — Reenie Beanie (Scholar) */ .hero-h1 .hero-h1-name, h1, h2, h3, h4, h5, .section-title, .stat-number, .pub-card h3, .project-card h3, .hero h1 { font-family: 'Reenie Beanie', 'Indie Flower', cursive !important; font-weight: 400 !important; line-height: 1.15 !important; } .hero-h1 .hero-h1-name { font-size: 1.3em !important; /* Reenie Beanie reads slightly smaller; bump up */ letter-spacing: 0.01em !important; } /* Hero role + tagline keep Indie Flower for cohesion (override main.css) */ .hero-h1 .hero-h1-role { font-family: 'Indie Flower', cursive !important; } /* Chinese — apply Ma Shan Zheng to body + Zhi Mang Xing to hero name */ html[lang="zh"] body, html[lang="zh"] p, html[lang="zh"] li, html[lang="zh"] span, html[lang="zh"] td, html[lang="zh"] th, html[lang="zh"] blockquote, html[lang="zh"] .news-item, html[lang="zh"] .news-content, html[lang="zh"] .about-text, html[lang="zh"] .skill-tag, html[lang="zh"] .filter-tag, html[lang="zh"] .nav-link, html[lang="zh"] .dropdown-item, html[lang="zh"] .hero-tagline, html[lang="zh"] .hero-subtitle, html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3, html[lang="zh"] h4, html[lang="zh"] .section-title { font-family: 'Ma Shan Zheng', 'LXGW WenKai', 'Spectral', cursive !important; font-weight: 400 !important; } /* Chinese hero name override — Zhi Mang Xing (the only place that differs from body) */ html[lang="zh"] .hero-h1 .hero-h1-name { font-family: 'Zhi Mang Xing', 'Ma Shan Zheng', cursive !important; font-size: 1.25em !important; letter-spacing: 0.04em !important; } /* Chinese mode: tightened — too big before */ html[lang="zh"] body, html[lang="zh"] p, html[lang="zh"] li { font-size: 1.08em !important; line-height: 1.8 !important; } @media (min-width: 769px) { html[lang="zh"] body, html[lang="zh"] p, html[lang="zh"] li { font-size: 1.18em !important; } html[lang="zh"] .hero-tagline, html[lang="zh"] .hero-subtitle { font-size: 1.10em !important; } html[lang="zh"] .hero-h1 { font-size: 3.4rem !important; } html[lang="zh"] .section-title { font-size: 2rem !important; } } @media (min-width: 1200px) { html[lang="zh"] body, html[lang="zh"] p, html[lang="zh"] li { font-size: 1.24em !important; } html[lang="zh"] .hero-h1 { font-size: 3.8rem !important; } } /* Keep monospace / icon-font / interactive controls in their default — don't overwrite these */ code, kbd, pre, samp, tt, .fa, .fab, .fas, .far, .fal, .fad, [class*="bi-"], /* FontAwesome / Bootstrap Icons */ input, select, textarea, button.icon-btn { font-family: revert !important; } /* ---------- 20. Tag / chip / nav hover restored (Linlin: tags weren't highlighting) ---------- */ /* filter-tag default needs visible chip outline (was using --bg-subtle = transparent) */ .filter-tag { background: oklch(0.92 0.040 75 / 0.55) !important; border: 1px solid oklch(0.45 0.10 50 / 0.30) !important; color: var(--text-secondary) !important; } .filter-tag:hover, .filter-tag.active { background: oklch(0.45 0.16 27) !important; border-color: oklch(0.45 0.16 27) !important; color: oklch(0.96 0.04 60) !important; } .filter-tag:disabled, .filter-tag[aria-disabled="true"] { opacity: 0.4 !important; } .filter-tag:disabled:hover, .filter-tag[aria-disabled="true"]:hover { background: oklch(0.92 0.040 75 / 0.55) !important; color: var(--text-secondary) !important; border-color: oklch(0.45 0.10 50 / 0.30) !important; } /* Nav links — visible underline-style hover instead of filled bg */ .nav-link:hover, .nav-link.active { background: oklch(0.62 0.13 70 / 0.18) !important; color: oklch(0.45 0.16 27) !important; } /* Dropdown items */ .dropdown-item:hover { background: oklch(0.62 0.13 70 / 0.18) !important; color: oklch(0.45 0.16 27) !important; } /* Hero links chips (PDF / CV / etc.) */ .hero-links a { background: oklch(0.92 0.040 75 / 0.45) !important; border: 1px solid oklch(0.45 0.10 50 / 0.25) !important; } .hero-links a:hover { background: oklch(0.62 0.13 70 / 0.30) !important; border-color: oklch(0.45 0.12 50 / 0.55) !important; color: oklch(0.20 0.04 30) !important; } /* Carousel / section-controls buttons hover */ .carousel-controls .carousel-btn:hover, .section-controls button:hover { background: oklch(0.45 0.16 27 / 0.15) !important; border-color: oklch(0.45 0.16 27 / 0.55) !important; color: oklch(0.45 0.16 27) !important; } /* ============================================================================ * §VITALITY. V6 (Sepia Notebook) + V4 (Ink Bleed highlight, V4-red key terms) * chosen by Linlin from vitality-picker.html * - V6 整体: warm-sepia grid bg, JetBrains Mono on numbers, embossed text, * maroon-bright accents, CTA pulse * - Highlight text (key terms / strong / em / .key / .keyword) get * V4-red color (maroon-orig, deeper) + V4 ink-bleed text-shadow (radial blur) * ========================================================================= */ :root, [data-theme="academic"] { --maroon-orig: oklch(0.45 0.16 27); /* V4's red — for highlights */ --maroon-bright: oklch(0.55 0.20 27); /* V6's red — for CTA / links / numbers */ --maroon-deep: oklch(0.34 0.16 27); --maroon-glow: oklch(0.65 0.20 27); --ink-deep: oklch(0.10 0.04 30); --ink-near-black: oklch(0.06 0.03 30); } /* V6.1 → O75: bg = lightened parchment + faint grid. Linlin: 格子也淡一点. White overlay set to 75% (picker option O75 — max opacity in white-xuan-picker, "几乎像白纸" — wm-02 parchment shows through faintly). iOS Safari fix: 'background-attachment: fixed' breaks on iOS — image gets pinned to viewport but blurred/scaled. Use 'scroll' on touch devices. */ html { background: linear-gradient(0deg, transparent 39px, rgba(110, 60, 20, 0.05) 39px, rgba(110, 60, 20, 0.05) 40px, transparent 40px), linear-gradient(90deg, transparent 39px, rgba(110, 60, 20, 0.05) 39px, rgba(110, 60, 20, 0.05) 40px, transparent 40px), linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)), url("../res/parchment-options/wm-02-pergament-aged.jpg") center / cover no-repeat fixed, oklch(0.93 0.03 78) !important; background-size: 40px 40px, 40px 40px, auto, cover, auto !important; background-attachment: fixed, fixed, fixed, fixed, fixed !important; } /* iOS Safari + iPad: fixed backgrounds cause blur. Use scroll attachment. */ @supports (-webkit-touch-callout: none) { html { background-attachment: scroll, scroll, scroll, scroll, scroll !important; } } @media (hover: none) and (pointer: coarse) { html { background-attachment: scroll, scroll, scroll, scroll, scroll !important; } } /* V6.2: body text — slightly lighter + 92% opacity for "ink-on-paper" handwritten feel (Linlin: 显得更像手写上去的). Headings/highlights stay deep (set later in §6.3+§VITALITY). */ body, p, li, .news-content, .about-text, .hero-tagline, .hero-subtitle { color: oklch(0.18 0.04 30) !important; /* 0.10 → 0.18 — softer "fresh ink" tone */ opacity: 0.92 !important; font-weight: 600 !important; text-shadow: -0.5px -0.5px 0 rgba(255, 240, 200, 0.35), 0.5px 0.5px 1px rgba(40, 20, 0, 0.30) !important; } /* V6.3: hero name + headings — emboss + bold */ .hero-h1, .hero-h1 .hero-h1-name, h1, h2, h3, h4, h5, .section-title, .pub-card h3, .project-card h3 { color: var(--ink-deep) !important; font-weight: 700 !important; text-shadow: -1px -1px 0 rgba(255, 240, 200, 0.5), 1px 1px 1px rgba(20, 8, 0, 0.55) !important; } /* V4 highlight: every "key term" / strong / em / pub-title-emphasized gets the V4-red ink-bleed treatment — radial blur halo, maroon-orig color */ strong, b, em, .news-content strong, .pub-card strong, .pub-card em, .about-text strong, .timeline-card strong, .stat-card strong, .hero-subtitle strong, .hero-tagline strong, .about-bullets strong, .news-content em, .skill-tag.highlight, .award-card strong, .talk-card strong { color: var(--maroon-orig) !important; font-weight: 800 !important; text-shadow: 0 0 2.5px rgba(120, 30, 30, 0.55), 0 1px 1px rgba(60, 10, 10, 0.5) !important; } /* V6.4: links — maroon-bright (brighter than V4 highlight) + emboss + bold */ a:not(.nav-link):not(.dropdown-item):not(.btn):not(.btn-primary):not(.btn-secondary):not(.hero-badge):not(.chatbot-trigger):not(.filter-tag):not(.skill-tag):not(.animal):not(.howl-wrap):not(.thesis-highlight):not(.outline-item):not(.word):not(.hn-opportunities):not(.hn-jump-about):not(.link-plain) { color: var(--maroon-bright) !important; font-weight: 700 !important; text-shadow: -0.5px -0.5px 0 rgba(255, 220, 200, 0.4), 0.5px 1px 1px rgba(80, 10, 10, 0.55) !important; } a:not(.nav-link):not(.dropdown-item):not(.btn):not(.btn-primary):not(.btn-secondary):not(.hero-badge):not(.chatbot-trigger):not(.filter-tag):not(.skill-tag):not(.animal):not(.howl-wrap):not(.thesis-highlight):not(.outline-item):not(.word):not(.hn-opportunities):not(.hn-jump-about):not(.link-plain):hover { color: var(--maroon-glow) !important; text-shadow: 0 0 5px rgba(180, 60, 60, 0.5) !important; } /* `.link-plain` — opt-out style for links that shouldn't get the maroon emboss * (e.g. PRG mention in About row, where the link is reference-only). */ .link-plain { color: oklch(0.32 0.05 30) !important; font-weight: 500 !important; text-shadow: none !important; text-decoration: underline dotted oklch(0.50 0.05 30 / 0.55) !important; text-underline-offset: 3px !important; text-decoration-thickness: 1px !important; } .link-plain:hover { color: oklch(0.20 0.06 30) !important; text-decoration-color: oklch(0.40 0.06 30) !important; } /* V6.5: numbers (citations / pub count / etc.) — JetBrains Mono + emboss + maroon */ .stat-number, .timeline-card .yr, .news-date, .thesis-highlight .citations, .pub-card .citations { font-family: 'JetBrains Mono', monospace !important; color: var(--maroon-bright) !important; font-weight: 700 !important; text-shadow: -1px -1px 0 rgba(255, 220, 200, 0.4), 1px 1px 1px rgba(80, 10, 10, 0.55) !important; letter-spacing: -0.02em; } /* V6.6: primary buttons (CTA: Get In Touch) — maroon-bright + inset highlight + pulse */ .btn-primary, .hero-buttons .btn-primary { background: var(--maroon-bright) !important; color: oklch(0.96 0.04 60) !important; font-weight: 700 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 10px rgba(140, 40, 40, 0.4) !important; text-shadow: 0 -1px 0 rgba(0,0,0,0.3) !important; animation: cta-pulse 2.6s ease-in-out infinite; } @keyframes cta-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 10px rgba(140, 40, 40, 0.4); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 18px rgba(180, 60, 60, 0.6); } } .btn-primary:hover, .hero-buttons .btn-primary:hover { background: var(--maroon-glow) !important; transform: translateY(-2px); animation: none; } @media (prefers-reduced-motion: reduce) { .btn-primary { animation: none !important; } } /* V6.7: secondary button (Download CV) — maroon outline */ .btn-secondary, .hero-buttons .btn-secondary { background: transparent !important; border: 2px solid var(--maroon-bright) !important; color: var(--maroon-bright) !important; font-weight: 700 !important; text-shadow: 0 1px 1px rgba(80, 10, 10, 0.45) !important; } .btn-secondary:hover, .hero-buttons .btn-secondary:hover { background: var(--maroon-bright) !important; color: oklch(0.96 0.04 60) !important; } /* Override §X (earlier font rule) — keep but ensure body color/shadow wins */ .hero-h1-role .role-primary, [data-theme="academic"] .hero-h1-role .role-primary { color: var(--ink-deep) !important; text-shadow: -1px -1px 0 rgba(255, 240, 200, 0.5), 1px 1px 1px rgba(20, 8, 0, 0.55) !important; } /* ============================================================================ * §DROP-CAP. Illuminated initials on section h2 titles ("About Me", * "Selected Publications", etc.) — engraved cinnabar-red letter with hot- * stamped gold edge (朱砂红镌刻 + 烫金), carved into parchment. * - Caveat / Reenie Beanie cursive script (EN); Ma Shan Zheng (ZH) * - Solid maroon-bright fill (manuscript red), NOT a gold gradient * - Gold edge via -webkit-text-stroke (烫金边) * - Layered text-shadow: inner gold halo + top highlight + bottom inset + * drop shadow → carved + raised + gilded reading * - FA icon BEFORE the cap is hidden so the cap leads each title * ========================================================================= */ /* Hide the FontAwesome icon that precedes the section h2 text — the * illuminated initial is the new visual lead. */ .section-title > i.fas, .section-title > i[class*="fa-"], .beyond-research h2 > i[class*="fa-"] { display: none !important; } .section-title > span[data-i18n]::first-letter, .beyond-research h2 > span[data-i18n]::first-letter, .otw-title > span[data-i18n]::first-letter { font-family: 'Caveat', 'Reenie Beanie', 'Indie Flower', cursive !important; font-style: normal !important; font-weight: 700 !important; font-size: 2.7em !important; line-height: 1 !important; /* Bottom-aligned — baselines match, large letter rises above the rest */ vertical-align: baseline !important; /* Tighter gap so the cap reads as part of the word, not standalone */ margin-right: 0.08em !important; /* Cinnabar-red base (manuscript ink) — NOT a gold gradient */ color: var(--maroon-bright) !important; /* Layered shadows behind the letter (rendered first-on-top): * 1–2 — carved depth (top highlight + bottom inset) * 3–10 — 8-direction INNER 1px gold rim (tight against red body) * 11–18 — 8-direction OUTER 2px gold rim (thicker 烫金 band, deeper tone) * 19–20 — gold halo bleed (illumination glow) * 21–22 — drop shadows (letter raised above parchment) */ text-shadow: /* Carved depth */ 0 -1px 0 rgba(255, 225, 150, 0.85), 0 1px 0 rgba( 50, 15, 3, 0.85), /* Inner gold rim — 8×1px (tight, bright) */ -1px -1px 0 oklch(0.82 0.17 82), 0 -1px 0 oklch(0.82 0.17 82), 1px -1px 0 oklch(0.82 0.17 82), -1px 0 0 oklch(0.82 0.17 82), 1px 0 0 oklch(0.82 0.17 82), -1px 1px 0 oklch(0.78 0.18 76), 0 1px 0 oklch(0.78 0.18 76), 1px 1px 0 oklch(0.78 0.18 76), /* Outer gold rim — 8×2px (thicker hot-stamp band, slightly deeper tone) */ -2px -2px 0 oklch(0.72 0.19 78), 0 -2px 0 oklch(0.72 0.19 78), 2px -2px 0 oklch(0.72 0.19 78), -2px 0 0 oklch(0.72 0.19 78), 2px 0 0 oklch(0.72 0.19 78), -2px 2px 0 oklch(0.66 0.20 72), 0 2px 0 oklch(0.66 0.20 72), 2px 2px 0 oklch(0.66 0.20 72), /* Gold halo bleed */ 0 0 5px oklch(0.75 0.20 78), 0 0 14px oklch(0.68 0.20 72 / 0.60), /* Drop shadow / engraved depth */ 2px 3px 3px rgba( 80, 25, 10, 0.60), 3px 6px 8px rgba( 50, 15, 5, 0.40) !important; letter-spacing: 0 !important; /* No background gradient / clip — base color is solid red */ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--maroon-bright) !important; } /* ZH locale: brush calligraphy for the first Chinese character, same red+gold treatment */ html[lang="zh"] .section-title > span[data-i18n]::first-letter, html[lang="zh"] .beyond-research h2 > span[data-i18n]::first-letter, html[lang="zh"] .otw-title > span[data-i18n]::first-letter { font-family: 'Ma Shan Zheng', 'Zhi Mang Xing', cursive !important; font-size: 2.2em !important; margin-right: 0.06em !important; } /* ============================================================================ * §ICON. Protect ALL icon fonts (FontAwesome 6 + Bootstrap Icons + emoji * fallbacks) from font-family / weight / shadow / color overrides. This must * be LAST so it wins any later cascade. AGGRESSIVE: catches every nested * / / regardless * of parent selectors. * ========================================================================= */ .fa, .fab, .fas, .far, .fal, .fad, .fass, .fasr, [class*="fa-"], [class^="fa-"], [class*="bi-"], [class^="bi-"], i.fa, i.fab, i.fas, i.far, .icon, .material-icons, .material-symbols-outlined, code, kbd, pre, samp, tt { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "bootstrap-icons", "Material Symbols Outlined", monospace !important; font-weight: 900 !important; text-shadow: none !important; font-style: normal !important; /* color stays inherited from parent (so accent colors still work) */ } /* FA Brands need their own family — separate */ .fab, [class*="fa-brands"], i.fab { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; } /* code / kbd / pre / samp use mono only, not icon font */ code, kbd, pre, samp, tt { font-family: 'JetBrains Mono', monospace !important; font-weight: 400 !important; } /* Form controls — let UA defaults apply */ input, select, textarea, button.icon-btn { font-family: revert !important; font-weight: revert !important; text-shadow: none !important; } /* ============================================================================ * §HEADERS-COVERAGE. Cover ALL headers / labels / metric values that the * earlier rules missed. Apply Reenie Beanie (en) / Zhi Mang Xing or Ma Shan * Zheng (zh) consistently across every text element. * ========================================================================= */ .section-title, .hero h1, .hero-h1, .stat-card .stat-label, .pub-card h3, .project-card h3, .timeline-card .place, .timeline-card .yr, .award-card h3, .award-card h4, .talk-card h3, .talk-card h4, .contact-info h3, .contact-details h4, .skill-category-title, .news-celebration, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .thesis-highlight h3, .thesis-highlight-title, .research-outline h2, .research-outline h3 { font-family: 'Reenie Beanie', 'Indie Flower', cursive !important; font-weight: 400 !important; color: var(--ink-deep) !important; text-shadow: -1px -1px 0 rgba(255, 240, 200, 0.5), 1px 1px 1px rgba(20, 8, 0, 0.55) !important; } /* Smaller headers (h4/h5/h6 inside cards) — slightly less heavy emboss */ .stat-card .stat-label, .timeline-card .yr, .news-date { text-shadow: -0.5px -0.5px 0 rgba(255, 240, 200, 0.4), 0.5px 0.5px 1px rgba(20, 8, 0, 0.4) !important; } /* ZH: same but use Zhi Mang Xing for big titles, Ma Shan Zheng for sub */ html[lang="zh"] .section-title, html[lang="zh"] .hero h1, html[lang="zh"] .hero-h1, html[lang="zh"] h1, html[lang="zh"] h2 { font-family: 'Zhi Mang Xing', 'Ma Shan Zheng', 'Reenie Beanie', cursive !important; letter-spacing: 0.04em !important; } html[lang="zh"] .pub-card h3, html[lang="zh"] .project-card h3, html[lang="zh"] .timeline-card .place, html[lang="zh"] .award-card h3, html[lang="zh"] .award-card h4, html[lang="zh"] .talk-card h3, html[lang="zh"] .talk-card h4, html[lang="zh"] .contact-info h3, html[lang="zh"] .contact-details h4, html[lang="zh"] .skill-category-title, html[lang="zh"] h3, html[lang="zh"] h4, html[lang="zh"] h5 { font-family: 'Ma Shan Zheng', 'LXGW WenKai', 'Indie Flower', cursive !important; } /* News / contact / about content — inherit body font but ensure cover */ .news-content, .news-content *, .news-row, .contact-details, .contact-details *, .about-bullets, .about-bullets *, .timeline-card *, .pub-card *, .project-card *, .award-card *, .talk-card *, .stat-card * { font-family: inherit; /* let parent take over */ } /* ============================================================================ * §V7-POLISH. Comprehensive polish per audit (2026-04-28). * Shrinks body, tightens stat-labels, hands off pub/project font, restructures * hero subtitle, drops pill UI everywhere, strips card chrome, gives images * torn-paper edges, sepias the map, adds paper-tape clips on section titles, * adds hover wobble, rebuilds news ticker as ink-bleed scatter. * ========================================================================= */ /* ----- Ph1.A — body / list / stat font sizes ----- */ body { font-size: 17.5px !important; /* was 19.84px (1.24em on a 16-base) */ line-height: 1.65 !important; } .about-bullets > li { font-size: 1.10em !important; /* was implicit 1.25em → 24.6px; now ~19.3px */ line-height: 1.75 !important; margin-bottom: 0.45em !important; } .stat-label, .stat-card .stat-label, .stats .label, .stat .label { font-size: 15.5px !important; /* was 13.6px — readable under big numbers */ color: oklch(0.42 0.05 30) !important; opacity: 0.95 !important; } /* ----- Ph1.B — pub/project cards inherit body font (kill Indie Flower fallback) ----- */ .pub-card, .pub-card *, .project-card, .project-card *, .award-card, .award-card *, .talk-card, .talk-card * { font-family: inherit !important; } /* ----- Ph1.C — hero subtitle breathing ----- */ .hero-subtitle, .hero-tagline, .hero-h1-role { line-height: 1.7 !important; margin-top: 0.25em !important; margin-bottom: 0.15em !important; } .hero-keywords, .hero-h1 .hero-h1-keywords, .hero-research-line { line-height: 1.85 !important; letter-spacing: 0.01em !important; margin-top: 0.5em !important; } /* ----- Ph2.A — strip card chrome (OTW, pubs, projects, awards, talks) ----- */ .otw-card, .otw-content, .otw-wrap, .pub-card, .project-card, .award-card, .talk-card { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Inner backgrounds that may also leak white */ .otw-card *, .pub-card > .pub-body, .pub-card .pub-meta, .project-card > *, .award-card > *, .talk-card > * { background-color: transparent !important; } /* Add gentle hand-drawn separator below each card to keep visual order */ .pub-card, .project-card, .award-card, .talk-card { padding-bottom: 1.2em !important; margin-bottom: 1.6em !important; position: relative !important; } .pub-card::after, .project-card::after, .award-card::after, .talk-card::after { content: "" !important; position: absolute !important; left: 8% !important; right: 12% !important; bottom: 0 !important; height: 1px !important; background: linear-gradient(90deg, transparent 0%, rgba(140, 30, 30, 0.18) 8%, rgba(140, 30, 30, 0.32) 50%, rgba(140, 30, 30, 0.10) 92%, transparent 100%) !important; /* Slight wave to feel hand-drawn */ transform: rotate(-0.3deg) !important; } /* Asymmetric heights — let some cards breathe taller than others (kills the * "identical card grid" cliché). Apply to every Nth card. */ .pub-card:nth-child(3n+1), .project-card:nth-child(3n+1), .award-card:nth-child(3n+1) { padding-top: 0.4em !important; } .pub-card:nth-child(3n+2), .project-card:nth-child(3n+2), .award-card:nth-child(3n+2) { padding-top: 1.2em !important; } /* OTW card — total transparency, no chrome */ .otw-card, .otw-card-wrap, .otw-wrap { padding: 1.2em 1em !important; } /* OTW pills inside the card → red-ink underline keywords */ .otw-pill, .otw-tag, .otw-chip, .otw-card .pill, .otw-card .tag, .otw-card .chip { background: transparent !important; border: none !important; border-radius: 0 !important; color: var(--maroon-bright) !important; padding: 0 0.15em !important; box-shadow: none !important; text-decoration: underline wavy rgba(140, 30, 30, 0.45) !important; text-underline-offset: 4px !important; text-decoration-thickness: 1.5px !important; font-weight: 700 !important; } /* ----- Ph2.B — paper-tape clip above each h2 section title ----- */ .section-title { position: relative !important; margin-top: 2em !important; } .section-title::before { content: "" !important; position: absolute !important; left: -8px !important; top: -22px !important; width: 78px !important; height: 22px !important; background: linear-gradient(120deg, rgba(220, 200, 100, 0.55) 0%, rgba(230, 210, 130, 0.40) 50%, rgba(210, 190, 90, 0.55) 100%) !important; border-left: 1px dashed rgba(120, 90, 30, 0.20) !important; border-right: 1px dashed rgba(120, 90, 30, 0.20) !important; transform: rotate(-2.5deg) !important; box-shadow: 0 1px 2px rgba(80, 50, 10, 0.20) !important; pointer-events: none !important; z-index: 0 !important; } /* Ensure the title itself stays above the tape */ .section-title > i, .section-title > span { position: relative !important; z-index: 1 !important; } /* ----- Ph3.A — torn-paper image edges + slight rotation ----- */ .pub-thumbnail, .pub-card img, .project-card img, .project-thumbnail, .award-card img, .award-logo { clip-path: polygon( 2% 4%, 14% 1%, 32% 4%, 56% 0%, 78% 3%, 96% 1%, 100% 12%, 98% 32%, 100% 58%, 97% 82%, 100% 96%, 84% 99%, 62% 97%, 38% 100%, 18% 96%, 4% 99%, 0% 82%, 3% 60%, 0% 38%, 2% 14% ) !important; /* Slight rotation per nth so they look hand-glued, not aligned */ box-shadow: 2px 4px 6px rgba(60, 30, 5, 0.18) !important; } .pub-card:nth-child(odd) img, .project-card:nth-child(odd) img, .award-card:nth-child(odd) img { transform: rotate(-1.2deg) !important; } .pub-card:nth-child(even) img, .project-card:nth-child(even) img, .award-card:nth-child(even) img { transform: rotate(1.4deg) !important; } /* ----- Ph1.D — News date pills → inline red-ink dates ----- */ .news-date, .news-row .date, .news-item .date, time[class*="date"] { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; color: var(--maroon-bright) !important; font-weight: 700 !important; text-decoration: underline rgba(140, 30, 30, 0.40) !important; text-underline-offset: 3px !important; } /* ----- Ph3 — Skills: kill all skill-tag pills, become red-ink underlined words ----- */ .skill, .skill-tag, .skills-tag, .tag, .skill-pill, .tech-pill, .word-cloud-tag, .wordcloud-tag, .filter-pill, .pub-filter-pill { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: var(--maroon-bright) !important; padding: 0 0.15em !important; margin: 0 0.3em 0.3em 0 !important; text-decoration: underline rgba(140, 30, 30, 0.35) !important; text-underline-offset: 4px !important; text-decoration-thickness: 1px !important; font-weight: 700 !important; } /* Skill category — handwritten section heading style */ .skill-category, .skill-category-title { background: transparent !important; border: none !important; box-shadow: none !important; padding-left: 0 !important; } /* ----- Ph3 — Filter / search controls → handwritten inline ----- */ .pub-filters, .project-filters, .filters, .pub-filter, .project-filter, .filter-chip { background: transparent !important; border: none !important; box-shadow: none !important; } .pub-filters .filter-chip, .project-filters .filter-chip, .pub-filter-tab, .project-filter-tab, button.filter, button[class*="filter"] { background: transparent !important; border: none !important; border-radius: 0 !important; color: var(--maroon-bright) !important; padding: 0 0.4em !important; text-decoration: underline rgba(140, 30, 30, 0.30) !important; text-underline-offset: 4px !important; box-shadow: none !important; } button.filter.active, button[class*="filter"].active, .filter-chip.active, .pub-filter-tab.active { color: oklch(0.40 0.22 27) !important; text-decoration-style: double !important; text-decoration-color: rgba(140, 30, 30, 0.75) !important; text-decoration-thickness: 2px !important; } /* Search input — transparent + red ink underline */ input[type="search"], input.search, .search-input, .pub-search input, .project-search input { background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; border-bottom: 1.5px solid rgba(140, 30, 30, 0.4) !important; box-shadow: none !important; color: var(--maroon-bright) !important; padding: 0.2em 0.4em !important; font-family: inherit !important; } input[type="search"]:focus, .search-input:focus { border-bottom-color: rgba(140, 30, 30, 0.85) !important; outline: none !important; } /* ----- Ph4 — Research Outline: break the 4-equal-card grid ----- */ .research-pillars, .research-outline-grid, .research-outline > .grid, .research > .grid { grid-template-columns: 1.3fr 1fr 1fr 0.85fr !important; /* uneven widths */ align-items: start !important; gap: 2.5em 1.8em !important; } .research-pillar, .research-outline-card, .research-card { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* Stagger vertical alignment so they don't sit on the same baseline */ .research-pillar:nth-child(2), .research-outline-card:nth-child(2), .research-card:nth-child(2) { margin-top: 1.4em !important; } .research-pillar:nth-child(3), .research-outline-card:nth-child(3), .research-card:nth-child(3) { margin-top: 0.6em !important; } .research-pillar:nth-child(4), .research-outline-card:nth-child(4), .research-card:nth-child(4) { margin-top: 2.2em !important; } /* Pillar icons — bigger, red ink */ .research-pillar i, .research-outline-card i, .research-card i { font-size: 1.6em !important; color: var(--maroon-bright) !important; } /* ----- Ph5.A — Map sepia + parchment overlay ----- */ iframe[src*="maps"], iframe[src*="amap"], iframe[src*="google.com/maps"] { filter: sepia(0.55) contrast(0.92) saturate(0.7) brightness(0.96) !important; border: none !important; box-shadow: 1px 2px 6px rgba(60, 30, 5, 0.25) !important; border-radius: 4px !important; } /* Wrap the map in a parchment-tinted overlay */ .map-wrap, .contact-map, .map-container { position: relative !important; } .map-wrap::after, .contact-map::after, .map-container::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient( rgba(180, 130, 60, 0.10), rgba(220, 170, 90, 0.08) ) !important; mix-blend-mode: multiply !important; border-radius: 4px !important; } /* ----- Ph5.B — Hover wobble (notebook page comes alive) ----- */ .pub-card, .project-card, .award-card, .talk-card, .research-pillar, .research-outline-card, .research-card, .timeline-card, .news-row, .news-item { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important; } .pub-card:hover, .project-card:hover, .award-card:hover, .talk-card:hover, .timeline-card:hover, .news-row:hover, .news-item:hover { transform: rotate(-0.35deg) translateY(-1px) !important; } /* ----- Ph5.C — Profile photo softer fade (if mask exists) ----- */ .hero-photo, .hero-image, .hero-avatar, .profile-photo { mask-image: radial-gradient(circle at 50% 48%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.95) 48%, rgba(0,0,0,0.78) 62%, rgba(0,0,0,0.50) 76%, rgba(0,0,0,0.22) 88%, rgba(0,0,0,0) 100%) !important; -webkit-mask-image: radial-gradient(circle at 50% 48%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.95) 48%, rgba(0,0,0,0.78) 62%, rgba(0,0,0,0.50) 76%, rgba(0,0,0,0.22) 88%, rgba(0,0,0,0) 100%) !important; } /* ----- Ph5.D — Body paper-stain overlay (subtle texture) ----- */ body::before { content: "" !important; position: fixed !important; inset: 0 !important; pointer-events: none !important; background: radial-gradient(ellipse 320px 220px at 18% 22%, rgba(160, 100, 30, 0.06), transparent 70%), radial-gradient(ellipse 260px 180px at 82% 58%, rgba(140, 80, 20, 0.05), transparent 70%), radial-gradient(ellipse 200px 240px at 35% 88%, rgba(180, 120, 40, 0.05), transparent 70%), radial-gradient(ellipse 180px 140px at 70% 12%, rgba(120, 70, 20, 0.04), transparent 70%) !important; z-index: 0 !important; } body { position: relative !important; z-index: 1 !important; } /* ----- Ph5.E — Section divider as hand-drawn line between sections ----- */ section + section, .section + .section { position: relative !important; } section + section::before { content: "" !important; position: absolute !important; top: -20px !important; left: 22% !important; right: 18% !important; height: 1px !important; background: linear-gradient(90deg, transparent 0%, rgba(140, 30, 30, 0.10) 12%, rgba(140, 30, 30, 0.30) 50%, rgba(140, 30, 30, 0.08) 88%, transparent 100%) !important; transform: rotate(-0.4deg) !important; pointer-events: none !important; } /* ============================================================================ * §INK-BLEED-TICKER. News ticker = Tom Riddle's diary effect — current text * dissolves into ink dots, scatters slightly, then a NEW headline coalesces * from scattered dots into solid text. Driven by: * - CSS @keyframes ink-disperse + ink-coalesce * - JS rotation in §INK-BLEED-TICKER block (added below) * The container marks itself .ink-bleed-ticker; the JS will read content * from data-ticker-items. * ========================================================================= */ .news-ticker, .hero-ticker, [class*="ticker"] { overflow: hidden !important; position: relative !important; } .ink-bleed-ticker { position: relative !important; min-height: 1.8em !important; padding: 0.2em 0 !important; } .ink-bleed-ticker .ibt-text { display: inline-block !important; position: relative !important; color: var(--maroon-bright) !important; font-weight: 700 !important; transform-origin: center center !important; /* Multi-step text-shadow simulates ink sitting wet on paper */ text-shadow: 0 0 0.5px rgba(140, 30, 30, 0.6), 0 0 1.5px rgba(140, 30, 30, 0.35), 1px 1px 1.5px rgba(80, 20, 5, 0.30) !important; will-change: filter, opacity, transform !important; } .ink-bleed-ticker .ibt-text.ibt-disperse { animation: ibt-disperse 1.5s cubic-bezier(0.4, 0.0, 1.0, 0.5) forwards !important; } .ink-bleed-ticker .ibt-text.ibt-coalesce { animation: ibt-coalesce 1.5s cubic-bezier(0.0, 0.5, 0.2, 1.0) forwards !important; } @keyframes ibt-disperse { 0% { filter: blur(0px); opacity: 1; letter-spacing: 0; transform: scale(1); } 35% { filter: blur(1.5px); opacity: 0.85; letter-spacing: 0.05em; transform: scale(1.04); } 65% { filter: blur(6px); opacity: 0.45; letter-spacing: 0.4em; transform: scale(1.08) translateY(-1px); } 100% { filter: blur(14px); opacity: 0; letter-spacing: 1.2em; transform: scale(1.15) translateY(-3px); } } @keyframes ibt-coalesce { 0% { filter: blur(14px); opacity: 0; letter-spacing: 1.2em; transform: scale(1.15) translateY(3px); } 35% { filter: blur(6px); opacity: 0.45; letter-spacing: 0.4em; transform: scale(1.08) translateY(1px); } 65% { filter: blur(1.5px); opacity: 0.85; letter-spacing: 0.05em; transform: scale(1.02); } 100% { filter: blur(0px); opacity: 1; letter-spacing: 0; transform: scale(1); } } /* Hijack the existing hero-ticker rotation: replace opacity+translateY with * ink disperse / coalesce. Existing JS toggles .is-active / .is-leaving on * .hero-ticker-item; we re-style those classes here. */ .hero-ticker-list .hero-ticker-item { transition: none !important; opacity: 0 !important; transform: none !important; filter: blur(14px); letter-spacing: 1.2em; color: var(--maroon-bright) !important; } .hero-ticker-list .hero-ticker-item.is-active { opacity: 1 !important; transform: none !important; animation: ibt-coalesce 1.5s cubic-bezier(0, 0.5, 0.2, 1) forwards !important; pointer-events: auto !important; } .hero-ticker-list .hero-ticker-item.is-leaving { opacity: 0 !important; animation: ibt-disperse 1.5s cubic-bezier(0.4, 0, 1, 0.5) forwards !important; } /* Wet-ink shadow on the visible item */ .hero-ticker-list .hero-ticker-item.is-active .ticker-content { text-shadow: 0 0 0.5px rgba(140, 30, 30, 0.6), 0 0 1.8px rgba(140, 30, 30, 0.35), 1px 1px 1.5px rgba(80, 20, 5, 0.30) !important; } /* ============================================================================ * §WORDCLOUD-BUBBLE. Word cloud → hand-drawn thought-bubble cluster. * Each .word becomes an inline-block "bubble": red ink word with a thin * wavy ellipse outline (drawn via box-shadow + border-radius), slight * rotation, varying sizes drive emphasis. No pill backgrounds. * ========================================================================= */ .wordcloud-container { background: transparent !important; border: none !important; box-shadow: none !important; padding: 1em 0 !important; } .wordcloud { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 0.7em 1.1em !important; padding: 1.2em 1em !important; } .wordcloud .word { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 50% / 70% !important; /* ellipse-shape via border-radius */ box-shadow: inset 0 0 0 1.2px rgba(140, 30, 30, 0.42), /* hand-drawn ink ring */ 2px 3px 4px rgba(80, 20, 5, 0.10) !important; color: var(--maroon-bright) !important; padding: 0.35em 0.95em !important; font-weight: 700 !important; text-decoration: none !important; line-height: 1 !important; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important; } /* Vary size — bigger words = more central in the cluster */ .wordcloud .word-xl { font-size: 1.7em !important; padding: 0.45em 1.2em !important; } .wordcloud .word-lg { font-size: 1.4em !important; padding: 0.40em 1.05em !important; } .wordcloud .word-md { font-size: 1.1em !important; } .wordcloud .word-sm { font-size: 0.92em !important; opacity: 0.85 !important; } /* Rotate by nth-child to look hand-drawn / pinned */ .wordcloud .word:nth-child(7n+1) { transform: rotate(-2.2deg) !important; } .wordcloud .word:nth-child(7n+2) { transform: rotate(1.6deg) !important; } .wordcloud .word:nth-child(7n+3) { transform: rotate(-0.8deg) !important; } .wordcloud .word:nth-child(7n+4) { transform: rotate(2.4deg) !important; } .wordcloud .word:nth-child(7n+5) { transform: rotate(-1.4deg) !important; } .wordcloud .word:nth-child(7n+6) { transform: rotate(0.6deg) !important; } .wordcloud .word:nth-child(7n+7) { transform: rotate(-2.6deg) !important; } .wordcloud .word:hover { transform: rotate(0deg) scale(1.08) !important; box-shadow: inset 0 0 0 1.5px rgba(140, 30, 30, 0.65), 3px 4px 6px rgba(80, 20, 5, 0.18) !important; } /* ============================================================================ * §HERO-NOTEBOOK (V8). Hero replaced with an open notebook spread: * left page = identity (name + photo + role + work-done checklist) * right page = research (today's research + bubble map + key question + * "open to opportunities" breathing badge). * Scoped under .hero-notebook so styles don't leak. CSS-only (no JS). * ========================================================================= */ /* Override the section .hero default layout — content sits directly on parchment */ .hero.hero-notebook-section { background: transparent !important; padding: 2em 0 5em !important; /* tighter top (navbar hidden by default), keep generous bottom */ min-height: auto !important; display: flex; align-items: center; justify-content: center; } .hero-notebook { width: 100%; max-width: 1100px; /* match .container width below */ margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2em; /* tight gap brings two sides close */ position: relative; /* No background, no box-shadow, no border-radius, no spine — naked on parchment */ background: transparent !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible; } .hero-notebook::before, .hero-notebook::after { display: none !important; } .hero-notebook .hn-page { padding: 0.5em 0; /* minimal padding — no card chrome */ position: relative; overflow: visible; } /* ----- LEFT PAGE — IDENTITY ----- */ .hero-notebook .hn-date { position: absolute; top: 1em; right: 2em; font-family: 'Reenie Beanie', cursive !important; color: oklch(0.42 0.05 30); font-size: 1em !important; opacity: 0.65; transform: rotate(2deg); z-index: 3; text-shadow: none !important; } /* Name — exact match to canonical .hero-h1-name (74.88px / fw 700 / ls 0.75px) */ .hero-notebook .hn-name { font-family: 'Reenie Beanie', 'Indie Flower', cursive !important; font-weight: 700 !important; font-size: 74.88px !important; line-height: 1.1 !important; letter-spacing: 0.01em !important; color: oklch(0.10 0.04 30) !important; margin: 0.1em 0 0 0 !important; text-shadow: -1px -1px 0 rgba(255, 240, 200, 0.5), 1px 1px 1px rgba(20, 8, 0, 0.55) !important; transform: rotate(-1.0deg); transform-origin: center center; /* match hover origin → no jump on hover */ text-align: left !important; display: block !important; } /* Sub-credential — Caveat handwritten cursive */ .hero-notebook .hn-credential { font-family: 'Caveat', 'Shadows Into Light', cursive !important; font-weight: 500 !important; font-size: 1.40em !important; color: oklch(0.30 0.08 30) !important; margin: 0.05em 0 0 0.6em !important; transform: rotate(-0.5deg); transform-origin: left center; letter-spacing: 0.01em; opacity: 1 !important; text-shadow: none !important; } /* Photo + side info row */ .hero-notebook .hn-photo-row { display: flex; align-items: flex-start; gap: 1.6em; margin: 1em 0 0.6em 0.4em !important; } .hero-notebook .hn-photo-wrap { width: 180px; height: 180px; flex-shrink: 0; position: relative; animation: hn-photo-wobble 14s ease-in-out infinite; transform-origin: center center; } .hero-notebook .hn-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; mask-image: radial-gradient(circle at 50% 48%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.95) 48%, rgba(0,0,0,0.78) 62%, rgba(0,0,0,0.50) 76%, rgba(0,0,0,0.22) 88%, rgba(0,0,0,0) 100%); -webkit-mask-image: radial-gradient(circle at 50% 48%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.95) 48%, rgba(0,0,0,0.78) 62%, rgba(0,0,0,0.50) 76%, rgba(0,0,0,0.22) 88%, rgba(0,0,0,0) 100%); filter: contrast(1.04) saturate(1.05); opacity: 0.88; } @keyframes hn-photo-wobble { 0% { transform: rotate(2.2deg); } 11% { transform: rotate(2.7deg); } 23% { transform: rotate(1.5deg); } 37% { transform: rotate(3.1deg); } 49% { transform: rotate(2.0deg); } 61% { transform: rotate(1.6deg); } 74% { transform: rotate(2.6deg); } 88% { transform: rotate(2.3deg); } 100% { transform: rotate(2.2deg); } } .hero-notebook .hn-photo-side { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.1em; padding-top: 0.6em; } .hero-notebook .hn-photo-label { font-family: 'Reenie Beanie', cursive !important; font-size: 1.45em !important; line-height: 1 !important; color: oklch(0.62 0.14 27) !important; transform: rotate(-3deg); transform-origin: left center; position: relative; padding-left: 32px; align-self: flex-start; text-shadow: none !important; opacity: 1 !important; } .hero-notebook .hn-photo-label::before { content: ""; position: absolute; left: -52px; top: 6px; width: 80px; height: 18px; background: url("data:image/svg+xml;utf8,") no-repeat center; } .hero-notebook .hn-role { margin: 0 !important; font-family: 'Indie Flower', cursive !important; line-height: 1.4 !important; text-shadow: none !important; opacity: 1 !important; /* Break the global "p { font-size: 1.20em }" cascade so role-1/role-2 em * calculations match the demo (base 17.5px instead of 21px). */ font-size: 17.5px !important; } .hero-notebook .hn-role-line { display: block; transform-origin: left center; } .hero-notebook .hn-role-1 { font-size: 1.45em !important; color: oklch(0.55 0.20 27) !important; font-weight: 700 !important; margin-left: 0; transform: rotate(-0.8deg); } .hero-notebook .hn-role-2 { font-size: 1.15em !important; color: oklch(0.30 0.08 30) !important; margin-left: 1.4em; margin-top: 0.15em; transform: rotate(0.5deg); font-weight: 600 !important; } /* "work done" handwritten label */ .hero-notebook .hn-work-label { margin: 0.6em 0 0.3em 0 !important; font-family: 'Reenie Beanie', cursive !important; font-size: 1.55em !important; color: oklch(0.55 0.20 27) !important; transform: rotate(-1deg); transform-origin: left center; letter-spacing: 0.015em; opacity: 1 !important; text-shadow: -1px -1px 0 rgba(255, 240, 200, 0.5), 1px 1px 1px rgba(20, 8, 0, 0.40) !important; } .hero-notebook .hn-work-label::after { content: ""; display: block; width: 110px; height: 7px; margin-top: 2px; background: url("data:image/svg+xml;utf8,") no-repeat left center; } /* Checklist — 2 rows, each row is one continuous text block (no grid). * The "·" separator visually divides two facts inside each row, but they * flow as one paragraph so long content can't force-wrap into ugly columns. */ .hero-notebook .hn-checklist { list-style: none !important; padding: 0 !important; margin: 0.4em 0 0 0 !important; font-family: 'Indie Flower', cursive !important; color: oklch(0.10 0.04 30) !important; font-size: 0.92em !important; line-height: 1.55 !important; } .hero-notebook .hn-checklist li { position: relative; padding-left: 0 !important; margin: 0 0 0.55em 0 !important; /* Break global "li { font-size: 1.20em }" cascade — inherit ul's 0.92em */ font-size: inherit !important; transform-origin: left center; background: none !important; text-shadow: none !important; opacity: 1 !important; list-style: none; } .hero-notebook .hn-checklist li:nth-child(1) { transform: rotate(-0.5deg); } .hero-notebook .hn-checklist li:nth-child(2) { transform: rotate(0.5deg); } /* Each fact gets its own hand-drawn ✓ ::before — 4 distinct check marks */ .hero-notebook .hn-fact { position: relative; padding-left: 1.7em; display: inline; /* flow inline so the row is one paragraph */ } .hero-notebook .hn-fact::before { content: ""; position: absolute; left: 0; top: 0.05em; width: 1.4em; height: 1.4em; background-repeat: no-repeat; background-position: center; background-size: contain; } .hero-notebook .hn-fact-1::before { background-image: url("data:image/svg+xml;utf8,"); transform: rotate(-4deg); } .hero-notebook .hn-fact-2::before { background-image: url("data:image/svg+xml;utf8,"); transform: rotate(6deg); } .hero-notebook .hn-fact-3::before { background-image: url("data:image/svg+xml;utf8,"); transform: rotate(-7deg); } .hero-notebook .hn-fact-4::before { background-image: url("data:image/svg+xml;utf8,"); transform: rotate(3deg); } /* Gap between two facts on the same row */ .hero-notebook .hn-fact + .hn-fact { margin-left: 1.6em; } .hero-notebook .hn-checklist a { color: oklch(0.55 0.20 27) !important; text-decoration: none !important; border-bottom: 1px dashed rgba(140, 30, 30, 0.45) !important; transition: color 0.2s ease, border-color 0.2s ease, border-bottom-style 0.2s ease; padding-bottom: 0.05em; background: none !important; } .hero-notebook .hn-checklist a:hover { color: oklch(0.40 0.22 27) !important; border-bottom: 1px solid oklch(0.55 0.20 27) !important; } .hero-notebook .hn-checklist a strong { font-weight: 700 !important; color: inherit !important; } /* Library names — Caveat cursive */ .hero-notebook .hn-checklist .hn-lib { font-family: 'Caveat', 'Shadows Into Light', cursive !important; font-style: normal !important; font-weight: 700 !important; font-size: 1.18em !important; color: oklch(0.55 0.20 27) !important; letter-spacing: 0.005em; line-height: 0.85; vertical-align: -0.05em; } /* ----- RIGHT PAGE — RESEARCH ----- */ .hero-notebook .hn-research-heading { font-family: 'Reenie Beanie', cursive !important; font-weight: 400 !important; font-size: 2.1em !important; color: oklch(0.55 0.20 27) !important; margin: 0 0 0.3em 0 !important; transform: rotate(-0.6deg); text-shadow: -1px -1px 0 rgba(255, 240, 200, 0.6), 1px 1px 1.5px rgba(20, 8, 0, 0.55) !important; } .hero-notebook .hn-research-heading::before { content: "★"; color: oklch(0.78 0.18 80); margin-right: 0.3em; -webkit-text-stroke: 0.5px oklch(0.55 0.20 27); } .hero-notebook .hn-bubble-map { width: 100%; height: 280px; position: relative; margin: 0.8em 0 1.0em 0; } .hero-notebook .hn-bubble { position: absolute; color: oklch(0.55 0.20 27) !important; font-family: 'Reenie Beanie', cursive !important; font-weight: 400 !important; text-align: center !important; background: transparent !important; border-radius: 50% / 65%; box-shadow: inset 0 0 0 1.5px rgba(140, 30, 30, 0.55), 2px 3px 5px rgba(80, 20, 5, 0.15) !important; padding: 0.5em 1em !important; line-height: 1.05 !important; white-space: nowrap !important; text-shadow: none !important; opacity: 1 !important; z-index: 1; } .hero-notebook .hn-bubble-center { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-1deg); font-size: 1.85em !important; padding: 0.55em 1.3em !important; color: oklch(0.10 0.04 30) !important; box-shadow: inset 0 0 0 2.5px rgba(140, 30, 30, 0.85), 3px 5px 8px rgba(80, 20, 5, 0.25), 0 0 18px rgba(255, 200, 100, 0.30) !important; } .hero-notebook .hn-bubble-1 { top: 0%; left: 0%; transform: rotate(-3deg); font-size: 1.30em !important; } .hero-notebook .hn-bubble-2 { top: 4%; right: 0%; transform: rotate(2.5deg); font-size: 1.30em !important; } .hero-notebook .hn-bubble-3 { bottom: 0%; left: 0%; transform: rotate(1.8deg); font-size: 1.25em !important; } .hero-notebook .hn-bubble-4 { bottom: 0%; right: 0%; transform: rotate(-2.2deg); font-size: 1.25em !important; } .hero-notebook .hn-bubble-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* Key question */ .hero-notebook .hn-key-question { font-family: 'Reenie Beanie', cursive !important; font-size: 1.10em !important; line-height: 1.3 !important; color: oklch(0.10 0.04 30) !important; text-align: right !important; margin: 0 1.6em 0 0.5em !important; padding: 0.4em 0 !important; transform: rotate(-0.3deg); white-space: nowrap; overflow: visible; opacity: 1 !important; text-shadow: none !important; } .hero-notebook .hn-key-question strong { color: oklch(0.55 0.20 27) !important; } .hero-notebook .hn-key-question em { color: oklch(0.45 0.20 35) !important; font-style: italic !important; font-weight: 700 !important; } .hero-notebook .hn-key-question::before { content: "?"; color: oklch(0.55 0.20 27); margin-right: 0.3em; font-size: 1.3em; font-weight: 700; vertical-align: -0.05em; } /* Open to opportunities — sits slightly LOWER than the left page's last line, * widens the gap between the hero and the news ticker section below. */ .hero-notebook .hn-opportunities { display: block; text-align: right; margin: 2.4em 1em 0 auto; /* push down: 2.4em top */ font-family: 'Reenie Beanie', cursive !important; font-size: 1.5em !important; color: oklch(0.55 0.20 27); /* NO !important — so :hover keyframes can animate color */ transform-origin: right center; z-index: 4; letter-spacing: 0.015em; animation: hn-opportunities-breathe 12s ease-in-out infinite; transform: rotate(-2deg) scale(1); text-decoration: none !important; border: none !important; text-shadow: none; /* NO !important — so :hover keyframes can animate text-shadow */ opacity: 1 !important; background: none !important; width: fit-content; position: relative; } /* Hover — warm hearth burn. Text + color stay STATIC (no flicker, no * brightness pulse, no transform). Only the FLAME text-shadows rise & fall * in height — flames literally lick up taller and settle shorter, like * real fire tongues slowly breathing. */ .hero-notebook .hn-opportunities:hover, .hero-notebook .hn-opportunities:focus-visible { color: oklch(0.78 0.16 70); /* warm amber — static throughout hover */ animation: hn-flame-undulate 3s ease-in-out infinite; } @keyframes hn-flame-undulate { /* Each stop changes the OFFSETS of the flame text-shadow layers AND * subtly brightens the text color to sync with peak flame intensity. * 0%/100% = flames at REST (short, darker amber). * 35% = flames at MEDIUM height (medium amber). * 65% = flames at PEAK (tallest tongue, brightest amber-gold). */ 0%, 100% { color: oklch(0.62 0.16 65); /* deep ember amber (rest) */ text-shadow: 0 0 2px rgba(255, 235, 195, 0.85), 0 0 5px rgba(255, 215, 150, 0.70), 0 -3px 6px rgba(255, 190, 110, 0.70), 0 -6px 9px rgba(245, 155, 75, 0.55), 0 -10px 13px rgba(220, 110, 45, 0.42), 0 -14px 17px rgba(200, 85, 30, 0.30), 0 -18px 21px rgba(180, 70, 25, 0.20), 0 -22px 25px rgba(140, 45, 15, 0.10); } 35% { color: oklch(0.77 0.17 70); /* medium warm amber */ text-shadow: 0 0 2px rgba(255, 235, 195, 0.95), 0 0 5px rgba(255, 215, 150, 0.85), 0 -5px 8px rgba(255, 190, 110, 0.90), 0 -10px 12px rgba(245, 155, 75, 0.78), 0 -16px 18px rgba(220, 110, 45, 0.65), 0 -22px 24px rgba(200, 85, 30, 0.48), 0 -28px 30px rgba(180, 70, 25, 0.32), 0 -34px 36px rgba(140, 45, 15, 0.18); } 65% { color: oklch(0.92 0.16 80); /* bright amber-gold at peak burn */ text-shadow: 0 0 2.5px rgba(255, 240, 200, 1.0), 0 0 6px rgba(255, 220, 155, 0.92), 0 -6px 10px rgba(255, 195, 115, 0.95), 0 -12px 15px rgba(245, 160, 80, 0.85), 0 -20px 22px rgba(220, 115, 50, 0.72), 0 -28px 30px rgba(200, 90, 35, 0.55), 0 -36px 38px rgba(180, 75, 28, 0.38), 0 -44px 46px rgba(140, 50, 18, 0.22); } } @keyframes hn-opportunities-breathe { 0%, 14% { transform: rotate(-2deg) scale(1); text-shadow: -0.5px -0.5px 0 rgba(255, 240, 200, 0.35), 0.5px 0.5px 1px rgba(40, 20, 0, 0.30), 0 0 1px rgba(255, 200, 100, 0.25); filter: drop-shadow(0 0 0 transparent); } 20% { transform: rotate(-2deg) scale(1.06); text-shadow: -0.5px -0.5px 0 rgba(255, 240, 200, 0.35), 0.5px 0.5px 1px rgba(40, 20, 0, 0.30), 0 0 3px rgba(255, 230, 150, 0.65), 0 0 9px rgba(255, 200, 100, 0.45); filter: drop-shadow(0 0 5px rgba(255, 200, 80, 0.35)); } 27%, 42% { transform: rotate(-2deg) scale(1); text-shadow: -0.5px -0.5px 0 rgba(255, 240, 200, 0.35), 0.5px 0.5px 1px rgba(40, 20, 0, 0.30), 0 0 1px rgba(255, 200, 100, 0.25); filter: drop-shadow(0 0 0 transparent); } 51% { transform: rotate(-2deg) scale(1.14); text-shadow: -0.5px -0.5px 0 rgba(255, 240, 200, 0.35), 0.5px 0.5px 1px rgba(40, 20, 0, 0.30), 0 0 5px rgba(255, 235, 160, 1.00), 0 0 14px rgba(255, 200, 100, 0.85), 0 0 30px rgba(255, 175, 60, 0.65), 0 0 56px rgba(255, 145, 30, 0.40); filter: drop-shadow(0 0 10px rgba(255, 200, 80, 0.65)); } 60%, 76% { transform: rotate(-2deg) scale(1); text-shadow: -0.5px -0.5px 0 rgba(255, 240, 200, 0.35), 0.5px 0.5px 1px rgba(40, 20, 0, 0.30), 0 0 1px rgba(255, 200, 100, 0.25); filter: drop-shadow(0 0 0 transparent); } 84% { transform: rotate(-2deg) scale(1.09); text-shadow: -0.5px -0.5px 0 rgba(255, 240, 200, 0.35), 0.5px 0.5px 1px rgba(40, 20, 0, 0.30), 0 0 4px rgba(255, 230, 150, 0.80), 0 0 11px rgba(255, 200, 100, 0.60), 0 0 22px rgba(255, 175, 60, 0.40); filter: drop-shadow(0 0 7px rgba(255, 200, 80, 0.50)); } 93%, 100% { transform: rotate(-2deg) scale(1); text-shadow: -0.5px -0.5px 0 rgba(255, 240, 200, 0.35), 0.5px 0.5px 1px rgba(40, 20, 0, 0.30), 0 0 1px rgba(255, 200, 100, 0.25); filter: drop-shadow(0 0 0 transparent); } } /* Mobile + tablet portrait (notebook stacks vertically) — md breakpoint */ @media (max-width: 768px) { .hero-notebook { aspect-ratio: auto; grid-template-columns: 1fr; border-radius: 4px; } .hero-notebook::before, .hero-notebook::after { display: none; } .hero-notebook .hn-page { padding: 2.5em 1.5em; } .hero-notebook .hn-name { font-size: 3.4em !important; } .hero-notebook .hn-credential { font-size: 1.2em !important; } /* 481-768px (mobile + tablet portrait): keep photo-row as ROW * — photo on left, photo-side (with "that's me" + role) on right. * Same idiom as desktop, just slightly smaller. */ .hero-notebook .hn-photo-row { flex-direction: row !important; align-items: flex-start !important; gap: 1em; } .hero-notebook .hn-photo-wrap { flex-shrink: 0; max-width: 45% !important; align-self: flex-start; } .hero-notebook .hn-photo-side { align-items: flex-start !important; gap: 0.55em; flex: 1; min-width: 0; } /* "that's me" — to the right of the photo, slightly above, leftward arrow */ .hero-notebook .hn-photo-label { display: inline-block !important; align-self: flex-start !important; padding-left: 38px !important; padding-top: 0 !important; margin-top: 0.4em !important; font-size: 1.25em !important; transform: rotate(-3deg) !important; transform-origin: left center !important; } .hero-notebook .hn-photo-label::before { left: -8px !important; top: 7px !important; width: 50px !important; height: 16px !important; transform: none; /* leftward-pointing curved arrow toward photo (web-style, scaled smaller) */ background: url("data:image/svg+xml;utf8,") no-repeat center !important; } .hero-notebook .hn-role { text-align: center; } .hero-notebook .hn-role-1 { font-size: 1.2em !important; margin-left: 0; } .hero-notebook .hn-role-2 { font-size: 1.0em !important; margin-left: 0; } .hero-notebook .hn-work-label { font-size: 1.35em !important; } .hero-notebook .hn-checklist { grid-template-columns: 1fr; gap: 0.55em; font-size: 0.95em !important; } .hero-notebook .hn-checklist li:nth-child(4) { margin-left: 0 !important; } /* Each fact gets its own line on mobile — no more 2-per-row */ .hero-notebook .hn-checklist .hn-fact { display: block !important; margin: 0 0 0.4em 0 !important; } .hero-notebook .hn-fact + .hn-fact { margin-left: 0 !important; } .hero-notebook .hn-opportunities { position: relative !important; right: auto; bottom: auto; margin: 1em 0 0 auto; width: fit-content; font-size: 1.25em !important; } .hero-notebook .hn-date { position: relative !important; top: auto; right: auto; text-align: right; margin-bottom: 0.4em; } .hero-notebook .hn-research-heading { font-size: 1.7em !important; } .hero-notebook .hn-bubble-map { height: 260px; margin-top: 0.5em; } .hero-notebook .hn-bubble-center { font-size: 1.4em !important; padding: 0.5em 1em !important; } .hero-notebook .hn-bubble-1, .hero-notebook .hn-bubble-2, .hero-notebook .hn-bubble-3, .hero-notebook .hn-bubble-4 { font-size: 1.0em !important; padding: 0.4em 0.7em !important; } .hero-notebook .hn-key-question { font-size: 0.95em !important; white-space: normal; margin: 0 0.5em !important; text-align: center !important; } } @media (max-width: 480px) { .hero-notebook .hn-name { font-size: 2.7em !important; } .hero-notebook .hn-photo-wrap { width: 150px; height: 150px; max-width: 150px !important; } .hero-notebook .hn-bubble-map { height: 240px; } .hero-notebook .hn-bubble-center { font-size: 1.2em !important; } .hero-notebook .hn-bubble-1, .hero-notebook .hn-bubble-2, .hero-notebook .hn-bubble-3, .hero-notebook .hn-bubble-4 { font-size: 0.85em !important; padding: 0.35em 0.55em !important; } /* Very narrow screens: stack photo + photo-side vertically, "that's me" * goes ABOVE photo with downward arrow (or below photo, here we put it * below with upward arrow as before — feels less cluttered). */ .hero-notebook .hn-photo-row { flex-direction: column !important; align-items: center !important; gap: 0.6em !important; } .hero-notebook .hn-photo-wrap { max-width: 60% !important; align-self: center !important; } .hero-notebook .hn-photo-side { align-items: center !important; } .hero-notebook .hn-photo-label { align-self: center !important; padding-left: 0 !important; padding-top: 38px !important; margin-top: 0.2em !important; transform: rotate(-2deg) !important; transform-origin: center top !important; } .hero-notebook .hn-photo-label::before { left: 50% !important; top: 2px !important; width: 22px !important; height: 34px !important; transform: translateX(-50%) rotate(2deg); background: url("data:image/svg+xml;utf8,") no-repeat center !important; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .hero-notebook .hn-photo-wrap { animation: none; transform: rotate(2.2deg); } .hero-notebook .hn-opportunities { animation: none; transform: rotate(-2deg) scale(1.05); } } /* ============================================================================ * §NAVBAR-AUTO-HIDE. At top of page (scrollY ≤ 50, no .scrolled class on * .navbar) the navbar slides off-screen. Once the user scrolls down it * slides back in. Existing JS in main.js already toggles .scrolled at 50px * threshold — we just key the visibility off that class. * ========================================================================= */ .navbar { transform: translateY(-110%) !important; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important; pointer-events: none; } .navbar.scrolled { transform: translateY(0) !important; pointer-events: auto; } /* When the mobile hamburger menu is open, force navbar visible (it lives * inside the navbar — needs to be reachable even at the top of the page). */ .navbar.menu-open { transform: translateY(0) !important; pointer-events: auto; } /* ============================================================================ * §OTW-TITLE-MATCH. OTW heading visually equals .section-title (size + drop * cap), but the gilded first letter uses Chinese-painting 青绿 (qingluse) * instead of maroon, to differentiate from About Me / Publications etc. * Briefcase icon is hidden so the cap leads the heading. * ========================================================================= */ .otw-title { font-size: 32px !important; line-height: 36.8px !important; /* Match .section-title's flex display so the box auto-grows to fit * the 86.4px ::first-letter (block display kept it at line-height) */ display: flex !important; align-items: baseline !important; } .otw-icon, .otw-header > .otw-icon { display: none !important; } /* OTW drop cap — 国画石绿白描 effect: bright malachite-green body with a * fine white-pigment outline (国画白描 / 撞粉 technique) and soft 水墨晕染 * (ink-wash) halo. NO gold — replaces the gilded edge with the white-on- * green "mineral pigment" technique seen in Tang-Song court painting. */ .otw-title > span[data-i18n]::first-letter { color: oklch(0.65 0.18 165) !important; /* bright 石绿 — malachite */ -webkit-text-fill-color: oklch(0.65 0.18 165) !important; text-shadow: /* 白描 — 8-direction fine white-pigment outline (mimics how mineral * green is built up with a thin white edge in classical paintings) */ -1px -1px 0 rgba(255, 250, 235, 0.95), 0 -1px 0 rgba(255, 250, 235, 0.95), 1px -1px 0 rgba(255, 250, 235, 0.95), -1px 0 0 rgba(255, 250, 235, 0.85), 1px 0 0 rgba(255, 250, 235, 0.85), -1px 1px 0 rgba(255, 250, 235, 0.65), 0 1px 0 rgba(255, 250, 235, 0.65), 1px 1px 0 rgba(255, 250, 235, 0.50), /* 水墨晕染 — soft green ink-wash bleed beyond the white edge */ 0 0 6px oklch(0.60 0.18 165 / 0.45), 0 0 14px oklch(0.50 0.15 170 / 0.30), /* Carved depth — green-tinted shadow under the letter (as if the * green pigment was pressed deeper into paper than surroundings) */ 2px 3px 3px rgba( 25, 55, 45, 0.55), 3px 6px 8px rgba( 15, 40, 30, 0.40) !important; } /* Hero name + photo are jump-to-About-Me anchors. Hover gestures: * NAME — shakes left-right twice (handwritten "look here" wiggle) * PHOTO — spins one full circle clockwise (playful "spin to view") */ .hero-notebook .hn-jump-about { display: block; color: inherit !important; text-decoration: none !important; border: none !important; cursor: pointer; } /* Anchor wrapping the h1 should not break the h1's own styling */ .hero-notebook .hn-jump-about > .hn-name { margin: 0; } /* NAME hover — quick 2-shake wiggle, composed with the base rotate(-1deg) */ .hero-notebook .hn-jump-about:not(.hn-photo-wrap):hover > .hn-name, .hero-notebook .hn-jump-about:not(.hn-photo-wrap):focus-visible > .hn-name { animation: hn-name-shake 0.55s ease-in-out; } @keyframes hn-name-shake { 0% { transform: rotate(-1deg); } 20% { transform: rotate( 2deg); } 40% { transform: rotate(-3deg); } 60% { transform: rotate( 1.5deg); } 80% { transform: rotate(-1.5deg); } 100% { transform: rotate(-1deg); } } /* PHOTO hover — large CW/CCW shake twice (mirrors the name shake idea but * with a wider arc, since the photo is a bigger element). */ .hero-notebook .hn-jump-about.hn-photo-wrap:hover, .hero-notebook .hn-jump-about.hn-photo-wrap:focus-visible { animation: hn-photo-shake 0.7s ease-in-out !important; } @keyframes hn-photo-shake { 0% { transform: rotate(2.2deg); } 20% { transform: rotate(20deg); } /* swing CW */ 40% { transform: rotate(-16deg); } /* swing CCW */ 60% { transform: rotate(14deg); } /* swing CW (smaller) */ 80% { transform: rotate(-9deg); } /* swing CCW (smaller) */ 100% { transform: rotate(2.2deg); } /* settle back to wobble base */ } /* ============================================================================ * §HOWL-IDLE-CALM. Welcome howl button: idle = only steam + gentle float. * Cursor-proximity-based shake (driven by inline JS that adds .howl-near * when cursor is within ~200px and .howl-very-near within ~80px): * far → float only * .howl-near → slow gentle shake * .howl-very-near / :hover → fast original shake * Steam remains independent on .howl-steam. * ========================================================================= */ .howl-wrap.idle .howl-body { animation: howl-float 2.8s ease-in-out infinite !important; } .howl-wrap.idle.howl-near .howl-body { animation: howl-shake 0.55s ease-in-out infinite, howl-float 2.8s ease-in-out infinite !important; } .howl-wrap.idle.howl-very-near .howl-body, .howl-wrap.idle:hover .howl-body, .howl-wrap.idle:focus-visible .howl-body { animation: howl-shake 0.32s ease-in-out infinite, howl-float 2.8s ease-in-out infinite !important; } /* ============================================================================ * §OTW-RESTYLE. Open-to-Work card overhaul — 国画青绿鎏金 palette: * - Whole module uses malachite green (matches OTW heading drop cap) * - Primary tags = filled green ink stamp w/ gold rim (青绿鎏金) * - Secondary tags = outlined green * - Distinct from the maroon-red of other sections * ========================================================================= */ /* Fix #5: Status — quieter so primary tags become the visual anchor, not status. * Smaller + lighter color, still handwritten Indie Flower. */ .otw-status { font-family: 'Indie Flower', cursive !important; font-size: 0.92em !important; /* down from 1.05em */ color: oklch(0.55 0.10 175) !important; /* lighter, less saturated */ margin: 0.4em 0 0.2em 0 !important; display: flex; align-items: center; gap: 0.5em; font-weight: 600 !important; /* down from 700 */ letter-spacing: 0.005em; opacity: 0.85; } .otw-status .otw-dot { width: 0.7em; height: 0.7em; border-radius: 50%; background: oklch(0.55 0.16 170) !important; box-shadow: 0 0 6px rgba(40, 130, 110, 0.65), inset 0 -1px 0 rgba(200, 255, 230, 0.45); animation: otw-dot-pulse 1.6s ease-in-out infinite; } @keyframes otw-dot-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.75; } } /* Fix #7: looser grid + block spacing for breathing rhythm */ .otw-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 2.2em 2.8em !important; /* was 1.6em 2em */ margin: 1.4em 0 2em 0 !important; } .otw-block { display: flex !important; flex-direction: column !important; gap: 0.9em; /* was 0.6em */ } /* Fix #4: Labels — switch to Reenie Beanie (still handwritten, more 草 cursive) * to break the Indie-Flower monoculture inside the OTW card. Highlighter swipe * background instead of dashed underline (avoids the "underline-everywhere" * conflict with CTA wavy underlines). */ .otw-label { font-family: 'Reenie Beanie', 'Indie Flower', cursive !important; font-size: 1.55em !important; font-weight: 400 !important; color: oklch(0.32 0.14 175) !important; /* deeper qing for contrast */ text-transform: none; /* Reenie Beanie reads better mixed-case */ letter-spacing: 0.01em; margin-bottom: 0.35em !important; padding: 0.05em 0.4em 0.05em 0.3em !important; border-bottom: none !important; width: fit-content; /* Highlighter swipe — looks like a yellow-green marker pass on parchment */ background: linear-gradient(180deg, transparent 0%, transparent 55%, oklch(0.86 0.11 160 / 0.55) 55%, oklch(0.86 0.11 160 / 0.55) 88%, transparent 88%) !important; text-shadow: -0.5px -0.5px 0 rgba(255, 250, 235, 0.40), 0.5px 0.5px 1px rgba(20, 60, 50, 0.30) !important; opacity: 1 !important; line-height: 1.0 !important; transform: rotate(-0.5deg); /* slight hand-noted tilt */ } .otw-block:nth-child(2) .otw-label { transform: rotate(0.6deg); } .otw-block:nth-child(3) .otw-label { transform: rotate(-0.3deg); } /* Tags wrapper — wrap with consistent gap */ .otw-tags { display: flex !important; flex-wrap: wrap; gap: 0.45em 0.55em !important; align-items: center; } /* SECONDARY tag — bare handwritten text wrapped in curly quotes, no chrome. * Per-tag default tilt so the row doesn't feel mechanically aligned. */ .otw-tag, .otw-card .otw-tag { display: inline-flex !important; align-items: baseline; gap: 0.25em; padding: 0.05em 0.15em !important; margin: 0 !important; font-family: 'Indie Flower', cursive !important; font-size: 0.96em !important; font-weight: 700 !important; line-height: 1.3 !important; color: oklch(0.40 0.13 175) !important; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; text-shadow: none !important; transform-origin: center; opacity: 1 !important; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease-out; } /* Default per-tag tilt — handwritten notes never align perfectly */ .otw-tag:not(.otw-tag-primary):nth-child(2n) { transform: rotate(-1.6deg); } .otw-tag:not(.otw-tag-primary):nth-child(2n+1) { transform: rotate(1.2deg); } .otw-tag:not(.otw-tag-primary):nth-child(3n) { transform: rotate(-2.4deg); } .otw-tag:not(.otw-tag-primary):nth-child(5n+1) { transform: rotate(2.0deg); } .otw-tag:not(.otw-tag-primary):nth-child(7n) { transform: rotate(-0.8deg); } /* Curly quotes around each secondary tag — handwritten quote marks (not on primary). * "ML Engineer" "Data Scientist" ... */ .otw-tag:not(.otw-tag-primary)::before { content: '\201C'; /* left double quote " */ margin-right: 0.05em; color: oklch(0.55 0.13 175); font-size: 1.3em; font-weight: 700; opacity: 0.8; line-height: 0.7; align-self: center; } .otw-tag:not(.otw-tag-primary)::after { content: '\201D'; /* right double quote " */ margin-left: 0.05em; color: oklch(0.55 0.13 175); font-size: 1.3em; font-weight: 700; opacity: 0.8; line-height: 0.7; align-self: center; } .otw-tag i { font-size: 0.85em; color: oklch(0.50 0.14 170); } .otw-tag small { font-size: 0.78em !important; font-weight: 600 !important; opacity: 0.75; margin-left: 0.15em; } /* PRIMARY (preferred) tag — true sticky-note (便利贴) in 青绿: * - light qing-green flat paper, NOT gradient ink * - deep-ink hand-written text on top * - washi tape strip on the upper edge (::before) * - peeled bottom-right corner (::after) * - soft drop-shadow like a real note stuck on parchment * - per-tag rotation for hand-stuck feel * No image asset needed — pure CSS. */ .otw-tag.otw-tag-primary, .otw-card .otw-tag.otw-tag-primary { --tilt: -1.2deg; /* per-tag tilt as variable so animations can use it */ --otw-tilt: var(--tilt); /* alias so the 5 secondary-tag keyframes also work on primary */ position: relative !important; font-size: 1.20em !important; padding: 0.55em 0.95em 0.50em !important; color: oklch(0.28 0.12 175) !important; /* Sticky-note light qing-green paper */ background: linear-gradient(135deg, oklch(0.84 0.10 165) 0%, oklch(0.79 0.11 168) 100%) !important; border: none !important; border-radius: 2px 2px 4px 4px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 2px 4px 6px rgba(20, 60, 50, 0.22), 5px 9px 14px rgba(20, 60, 50, 0.10) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) !important; transform: rotate(var(--tilt)); /* no !important so :hover animation can override */ margin: 6px 4px !important; /* Torn-paper edges on LEFT and RIGHT only — top/bottom stay straight so the * washi-tape (::before, top edge) and folded corner (::after, bottom-right) * stay intact. Inner text is unaffected. */ clip-path: polygon( /* top edge raised to -35% so the washi tape (::before, top: -7px) stays visible */ 0% -35%, 100% -35%, /* right edge zigzag — inward dips */ 97% 8%, 100% 18%, 95% 30%, 100% 44%, 96% 58%, 100% 72%, 95% 86%, 100% 100%, 0% 100%, /* left edge zigzag — inward dips */ 4% 88%, 0% 74%, 5% 60%, 1% 46%, 5% 32%, 0% 18%, 3% 6% ); transition: box-shadow 0.3s ease-out; } .otw-tag.otw-tag-primary:nth-of-type(2n) { --tilt: 1.6deg; } .otw-tag.otw-tag-primary:nth-of-type(3n) { --tilt: -0.6deg; } /* Washi-tape strip across the top — semi-transparent warm cream */ .otw-tag.otw-tag-primary::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(-2.5deg); width: 42%; height: 12px; background: linear-gradient(180deg, rgba(255, 240, 185, 0.80) 0%, rgba(255, 230, 160, 0.72) 100%); border-left: 1px solid rgba(180, 140, 60, 0.22); border-right: 1px solid rgba(180, 140, 60, 0.22); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 0 0 0.5px rgba(255, 255, 255, 0.30); z-index: 2; pointer-events: none; } /* Peeled bottom-right corner — diagonal fold */ .otw-tag.otw-tag-primary::after { content: ''; position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; background: linear-gradient(135deg, transparent 50%, rgba(20, 50, 40, 0.10) 50%, rgba(255, 255, 255, 0.55) 80%, rgba(20, 50, 40, 0.18) 100%); border-bottom-right-radius: 4px; z-index: 1; pointer-events: none; } .otw-tag.otw-tag-primary i { color: oklch(0.92 0.10 80); /* gold icon */ } .otw-tag.otw-tag-primary small { color: oklch(0.88 0.06 90); opacity: 0.95; } /* Tag hover — small lift */ /* Hover — random per-tag micro-animations. NO gold edge, NO border ever. * Each nth-child group gets a different signature wiggle. */ .otw-tag:not(.otw-tag-primary):hover { color: oklch(0.22 0.16 175) !important; box-shadow: none !important; border: none !important; } /* 5 distinct hover wiggles cycled by nth-child */ @keyframes otw-tag-bounce { 0%,100%{transform:translateY(0) rotate(var(--otw-tilt,0deg));} 50%{transform:translateY(-4px) rotate(var(--otw-tilt,0deg));} } @keyframes otw-tag-swing { 0%,100%{transform:rotate(var(--otw-tilt,0deg));} 25%{transform:rotate(calc(var(--otw-tilt,0deg) - 4deg));} 75%{transform:rotate(calc(var(--otw-tilt,0deg) + 4deg));} } @keyframes otw-tag-jitter { 0%,100%{transform:rotate(var(--otw-tilt,0deg)) translateX(0);} 25%{transform:rotate(var(--otw-tilt,0deg)) translateX(-2px);} 75%{transform:rotate(var(--otw-tilt,0deg)) translateX(2px);} } @keyframes otw-tag-pop { 0%,100%{transform:rotate(var(--otw-tilt,0deg)) scale(1);} 50%{transform:rotate(var(--otw-tilt,0deg)) scale(1.10);} } @keyframes otw-tag-tilt { 0%,100%{transform:rotate(var(--otw-tilt,0deg));} 50%{transform:rotate(calc(var(--otw-tilt,0deg) + 6deg));} } .otw-tag:not(.otw-tag-primary):nth-child(2n) { --otw-tilt: -1.6deg; } .otw-tag:not(.otw-tag-primary):nth-child(2n+1) { --otw-tilt: 1.2deg; } .otw-tag:not(.otw-tag-primary):nth-child(3n) { --otw-tilt: -2.4deg; } .otw-tag:not(.otw-tag-primary):nth-child(5n+1) { --otw-tilt: 2.0deg; } .otw-tag:not(.otw-tag-primary):nth-child(7n) { --otw-tilt: -0.8deg; } .otw-tag:not(.otw-tag-primary):nth-child(5n+1):hover { animation: otw-tag-bounce 0.55s ease-in-out; } .otw-tag:not(.otw-tag-primary):nth-child(5n+2):hover { animation: otw-tag-swing 0.60s ease-in-out; } .otw-tag:not(.otw-tag-primary):nth-child(5n+3):hover { animation: otw-tag-jitter 0.45s ease-in-out; } .otw-tag:not(.otw-tag-primary):nth-child(5n+4):hover { animation: otw-tag-pop 0.50s ease-in-out; } .otw-tag:not(.otw-tag-primary):nth-child(5n+5):hover { animation: otw-tag-tilt 0.55s ease-in-out; } /* Primary sticky-note hover — common: deeper drop-shadow (lift). Animation * varies per column so each of the 3 primaries gets a unique signature * wiggle, mirroring the secondary 5-flavour scheme. */ .otw-tag.otw-tag-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 3px 6px 10px rgba(20, 60, 50, 0.30), 7px 12px 18px rgba(20, 60, 50, 0.14) !important; } /* Distinct animation per column — Roles col → peel, Locations col → bounce, Employment col → swing */ .otw-block:nth-child(1) .otw-tag.otw-tag-primary:hover { animation: otw-sticky-peel 0.55s ease-in-out; } .otw-block:nth-child(2) .otw-tag.otw-tag-primary:hover { animation: otw-tag-bounce 0.50s ease-in-out; } .otw-block:nth-child(3) .otw-tag.otw-tag-primary:hover { animation: otw-tag-swing 0.60s ease-in-out; } /* Sticky-peel uses --tilt directly; the other two reuse the secondary keyframes * which read --otw-tilt — already aliased to --tilt on primary above. */ @keyframes otw-sticky-peel { 0%,100% { transform: rotate(var(--tilt)) translateY(0); } 50% { transform: rotate(calc(var(--tilt) * 1.8)) translateY(-3px); } } /* CTA — pure handwritten text in qing-green. NO underline, NO border, NO bg. * Just words on parchment, like a note margin. Tight margin to the tags above. */ .otw-cta { display: flex; flex-wrap: wrap; gap: 2em; margin-top: 0.4em; /* tighter to tags above */ align-items: center; } .otw-cta .btn, .otw-cta a.btn { font-family: 'Indie Flower', cursive !important; font-size: 1.05em !important; font-weight: 700 !important; padding: 0.1em 0.15em !important; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: oklch(0.40 0.13 175) !important; /* 青绿 — match the OTW palette */ text-shadow: -0.5px -0.5px 0 rgba(255, 250, 235, 0.40), 0.5px 0.5px 1px rgba(20, 60, 50, 0.25) !important; text-decoration: none !important; transition: color 0.18s ease-out, transform 0.18s ease-out; display: inline-flex; align-items: center; gap: 0.4em; } .otw-cta .btn i { font-size: 0.95em; opacity: 0.85; color: oklch(0.50 0.14 170); } .otw-cta .btn:hover { color: oklch(0.28 0.15 175) !important; animation: otw-btn-wobble 0.45s ease-in-out; } @keyframes otw-btn-wobble { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-2px) rotate(-1deg); } 50% { transform: translateX(0) rotate(0); } 75% { transform: translateX(2px) rotate(1deg); } } /* Different wobble for the second CTA so they don't move identically */ .otw-cta .btn-primary:hover ~ * { /* placeholder for selector grouping below */ } .otw-cta .btn:not(.btn-primary):hover { animation: otw-btn-bounce 0.45s ease-in-out; } @keyframes otw-btn-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .otw-cta .btn-primary, .otw-cta a.btn-primary { /* No bg, no border — just slightly heavier color emphasis */ color: oklch(0.32 0.14 175) !important; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0.1em 0.15em !important; transform: none; } .otw-cta .btn-primary:hover { color: oklch(0.22 0.16 175) !important; background: none !important; border-color: transparent !important; /* uses otw-btn-wobble defined above */ } /* Hide the global hand-drawn divider line BELOW the OTW section * (the 1px rosy gradient between #open-to-work and the next section). */ #open-to-work + section::before, #open-to-work + .section::before { display: none !important; } /* ============================================================================ * §ABOUT-NOTEBOOK. About me — hand-drawn notebook table (icon | label | value). * Outer frame + row dividers use SVG wobble paths with irregular dashes * (no mechanical CSS dashed borders). Value font: Patrick Hand for clarity. * Mobile: stats jump above the notebook + render as 4-col chip strip. * ========================================================================= */ .about-grid { display: grid !important; grid-template-columns: 2fr 1fr; grid-template-areas: "bullets stats"; gap: 2rem; align-items: start; } .about-bullets-col { grid-area: bullets; } .about-grid .stats-grid { grid-area: stats; grid-template-columns: repeat(2, 1fr); } .about-headline { font-family: 'Patrick Hand', 'Indie Flower', cursive !important; font-size: 1.30em !important; /* one notch smaller */ line-height: 1.55 !important; color: oklch(0.30 0.10 30) !important; margin-bottom: 1.0em !important; padding: 0 0.4em; font-weight: 400 !important; /* Notebook handwriting principle: slight slant + oblique = the page wasn't * written on a ruler. transform-origin top-left so the slant tilts down-right. */ font-style: italic; /* synthesized oblique on Patrick Hand */ transform: rotate(-0.5deg); transform-origin: 0% 0%; letter-spacing: 0.005em; } .about-notebook { display: flex; flex-direction: column; padding: 0.4em 0.4em 0.6em; /* tight — no outer frame, just inner row dividers */ /* No outer frame — table is implied by row dividers + label/value column rhythm. */ } .about-row { display: grid; grid-template-columns: 32px 105px 1fr; column-gap: 0.7em; align-items: center; padding: 0.55em 0; position: relative; } /* Hand-drawn wobble dashed divider between rows */ .about-row + .about-row::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat-x; background-size: 200px 5px; background-position: 0 50%; } .about-icon { width: 28px; height: 28px; color: oklch(0.42 0.13 30); /* maroon ink */ align-self: center; grid-column: 1; transform-origin: center; } .about-row:nth-child(2n) .about-icon { transform: rotate(-4deg); } .about-row:nth-child(2n+1) .about-icon { transform: rotate(3deg); } .about-row:nth-child(3n) .about-icon { transform: rotate(-6deg); } .about-row:nth-child(5n) .about-icon { transform: rotate(5deg); } .about-row-label { font-family: 'Indie Flower', cursive !important; font-weight: 700 !important; font-size: 1.05em !important; /* back down one notch — was 1.20em */ color: oklch(0.32 0.13 30) !important; text-transform: uppercase; letter-spacing: 0.04em; align-self: center; grid-column: 2; border-right: none; /* replaced by SVG wobble line below */ padding: 0.3em 0.9em 0.3em 0; line-height: 1.2; /* Hand-drawn wobble vertical divider on the right edge — repeats per row */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right center; background-size: 5px 100%; /* Letterpress hover prep — base text-shadow makes label look "raised" off the page */ cursor: pointer; text-shadow: -0.5px -0.5px 0 rgba(255, 250, 235, 0.40), 0.5px 0.5px 1px rgba(20, 60, 50, 0.30) !important; transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.18s ease-out, text-shadow 0.18s ease-out; transform-origin: center; } /* Hover = letterpress carved INTO the page. * Light from above → carved letter bottom edge gets bright highlight, top edge sits in shadow. * 1) text color very dark (sits at bottom of dent) * 2) bright cream highlight pushed DOWN (positive y) ← bottom edge of carved letter * 3) dark shadow pushed UP (negative y) ← top edge of carved letter in shadow * 4) translateY positive + scale < 1 ← physically sinks into page */ .about-row-label:hover { color: oklch(0.10 0.16 30) !important; text-shadow: 0 1.5px 0 rgba(255, 250, 240, 0.95), 0 2.5px 1.5px rgba(255, 248, 235, 0.55), 0 -0.7px 0 rgba(40, 10, 0, 0.55), 0 -1.5px 1.2px rgba(40, 10, 0, 0.30) !important; transform: translateY(2.5px) scale(0.93); } .about-row-value { font-family: 'Patrick Hand', 'Indie Flower', cursive !important; font-weight: 400 !important; font-size: 1.08em !important; /* one notch smaller (was 1.20em) */ line-height: 1.50 !important; color: oklch(0.22 0.05 30) !important; align-self: center; grid-column: 3; padding: 0.3em 0; /* Notebook handwriting: oblique + slight per-row tilt — never written on a ruler. * Per-row rotate goes via .about-row:nth-child below. */ font-style: italic; /* synthesized oblique */ letter-spacing: 0.008em; transform-origin: 0% 50%; } /* Per-row tilt — each row leans slightly differently */ .about-row:nth-child(2n) .about-row-value { transform: rotate(-0.6deg); } .about-row:nth-child(2n+1) .about-row-value { transform: rotate(0.5deg); } .about-row:nth-child(3n) .about-row-value { transform: rotate(-0.9deg); } .about-row:nth-child(5n) .about-row-value { transform: rotate(0.7deg); } .about-row-value strong { font-weight: 700 !important; } /* About row links — every gets one of 5 random handwritten hover animations * (cycled by nth-of-type), keeping the notebook "alive" feeling. */ .about-row-value a { transition: color 0.18s ease-out, text-decoration-color 0.18s ease-out; transform-origin: center; display: inline-block; /* needed so transform works on inline-level */ } @keyframes about-link-wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-4deg)} 75%{transform:rotate(4deg)} } @keyframes about-link-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } @keyframes about-link-scale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} } @keyframes about-link-jitter { 0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-2px) rotate(-2deg)} 75%{transform:translateX(2px) rotate(2deg)} } @keyframes about-link-pop { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-3px) rotate(3deg) scale(1.06)} } .about-row-value a:nth-of-type(5n+1):hover { animation: about-link-wiggle 0.45s ease-in-out; } .about-row-value a:nth-of-type(5n+2):hover { animation: about-link-bounce 0.40s ease-in-out; } .about-row-value a:nth-of-type(5n+3):hover { animation: about-link-scale 0.45s ease-in-out; } .about-row-value a:nth-of-type(5n+4):hover { animation: about-link-jitter 0.42s ease-in-out; } .about-row-value a:nth-of-type(5n+5):hover { animation: about-link-pop 0.45s ease-in-out; } /* Code spans (graphkit-learn / liulian / redoxprediction) — handwritten, NOT mono */ .about-row-value code { font-family: 'Patrick Hand', 'Indie Flower', cursive !important; font-size: 1.0em; background: rgba(255, 240, 210, 0.50); padding: 0.05em 0.32em; border-radius: 4px; } /* Stat-label readability bump — bumped to 24px for clearer scanning */ .about-grid .stats-grid .stat-label, .about-grid .stats-grid .stat-card .stat-label { font-size: 24px !important; line-height: 1.25 !important; } /* Stat-card hover — PAPER DEPRESSION (not a UI control press). * The look we want: a thumb pressed a stamp into wet paper, leaving an ink-pooled * depression with a soft halo that radiates outward + ink bled into fibers. * - No sharp box-shaped inset shadow (= UI button feel) * - Use radial-gradient bg + multiple LARGE-blur low-opacity inset shadows * - Irregular hand-cut radius shifts subtly on press * - Border vanishes on hover (no rectangle) * - Numbers darken + get ink-bleed (small offset glow) */ .about-grid .stats-grid .stat-card { cursor: pointer; /* Hover-out: quick smooth recovery. Hover-in: animation (snap + tiny overshoot) below. */ transition: transform 0.18s cubic-bezier(0.4, 0, 0.6, 1), box-shadow 0.16s ease-out, background 0.16s ease-out, border-color 0.12s ease-out, border-radius 0.16s ease-out !important; transform-origin: center; border-radius: 6px 4px 7px 5px !important; /* base hand-cut corners */ } /* Snap-press animation: punch DOWN past rest, then settle — gives a "咔嚓" feel */ @keyframes about-stat-snap { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(4.5px) scale(0.945); } /* overshoot — past rest */ 100% { transform: translateY(2.5px) scale(0.965); } /* settle */ } .about-grid .stats-grid .stat-card:hover { animation: about-stat-snap 0.18s cubic-bezier(0.4, 0, 0.6, 1) forwards; transform: translateY(2.5px) scale(0.965) !important; /* Paper-fiber depression bg — soft elliptical darkening, not a flat color */ background: radial-gradient(ellipse 105% 80% at 50% 38%, rgba(120, 60, 30, 0.11) 0%, rgba(120, 60, 30, 0.05) 55%, rgba(120, 60, 30, 0.01) 90%, transparent 100%) !important; box-shadow: /* Soft, large-blur depression halos (paper, not button) */ inset 0 6px 16px -4px rgba(80, 30, 10, 0.28), inset 0 2px 4px -1px rgba(80, 30, 10, 0.12), /* Subtle highlight inside bottom edge (light from above hits bottom of dent) */ inset 0 -3px 9px -2px rgba(255, 250, 232, 0.42), /* Tiny side darkening for 3D depression */ inset 4px 0 8px -6px rgba(80, 30, 10, 0.10), inset -4px 0 8px -6px rgba(80, 30, 10, 0.10), /* Outside: paper around depression bulges slightly outward (top highlight) */ 0 -1px 2px rgba(255, 250, 230, 0.30), 0 3px 8px -3px rgba(60, 20, 10, 0.12) !important; border-color: transparent !important; /* drop the rectangular border */ border-radius: 9px 5px 7px 6px !important; /* radius shifts under press */ } .about-grid .stats-grid .stat-card:hover .stat-number { color: oklch(0.20 0.20 25) !important; /* darker maroon ink, pooled in dent */ text-shadow: 0 0.5px 0 rgba(255, 248, 232, 0.65), /* subtle bottom highlight */ 0 -0.5px 1.5px rgba(80, 20, 5, 0.50), /* dark above */ 0 1.5px 3.5px rgba(80, 20, 5, 0.22) !important; /* ink bleed downward into fibers */ } .about-grid .stats-grid .stat-card:hover .stat-label { color: oklch(0.26 0.07 30) !important; text-shadow: 0 0.5px 0 rgba(255, 248, 232, 0.50), 0 1.5px 2.5px rgba(80, 20, 5, 0.18) !important; } /* ----- Mobile + tablet portrait (md breakpoint) — stats stack below bullets, 4-col chips ----- */ @media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; /* Mobile order: bullets first (the actual content), stats last (supporting numbers). * Previously stats was on top — moved to bottom per user feedback. */ grid-template-areas: "bullets" "stats"; gap: 1.4rem; } .about-grid .stats-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 0.5rem !important; } .about-grid .stats-grid .stat-card { padding: 0.55em 0.25em !important; text-align: center; } .about-grid .stats-grid .stat-number { font-size: 22px !important; } .about-grid .stats-grid .stat-label { font-size: 18px !important; /* mobile bump */ line-height: 1.2 !important; } .about-row { grid-template-columns: 26px 80px 1fr; column-gap: 0.5em; } .about-notebook { padding: 0.7em 0.8em; } .about-row-label { font-size: 0.92em !important; padding: 0.3em 0.5em 0.3em 0; } .about-row-value { font-size: 1.10em !important; padding: 0.3em 0; } .about-icon { width: 24px; height: 24px; } .about-headline { font-size: 1.25em !important; } } /* Small mobile (sm breakpoint) — tightest tweaks for narrow phones */ @media (max-width: 480px) { .about-grid .stats-grid { grid-template-columns: repeat(2, 1fr) !important; /* 4 cols too tight on tiny phones */ } .about-row { grid-template-columns: 22px 65px 1fr; column-gap: 0.4em; } .about-notebook { padding: 0.6em 0.7em; } .about-row-label { font-size: 0.85em !important; } .about-row-value { font-size: 1.0em !important; } } /* ============================================================================ * §CARD-SNAP-PRESS. Universal hover: every card "snap-presses" into the page * (paper depression) PLUS one of 10 random personalities. Cycled by * :nth-of-type(10n+N) so each row of cards feels alive. Overrides main.css * translateY(-4px) lift. Scope: pubs / projects / awards / talks / thesis / * timeline / skills (categories + tags) / services / research outline / word * cloud spans. * * All keyframes share: 0% rest → ~50% overshoot DOWN past final → 100% settle. * ========================================================================= */ /* ----- Original 6 personalities ----- */ @keyframes card-snap-tilt-l { 0% { transform: translateY(0) scale(1) rotate(0); } 50% { transform: translateY(4.5px) scale(0.955) rotate(-0.8deg); } 100% { transform: translateY(2px) scale(0.975) rotate(-0.4deg); } } @keyframes card-snap-tilt-r { 0% { transform: translateY(0) scale(1) rotate(0); } 50% { transform: translateY(4.5px) scale(0.955) rotate(0.8deg); } 100% { transform: translateY(2px) scale(0.975) rotate(0.4deg); } } @keyframes card-snap-bounce { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(5.5px) scale(0.945); } 70% { transform: translateY(0px) scale(1.005); } 100% { transform: translateY(2px) scale(0.975); } } @keyframes card-snap-jitter { 0% { transform: translateY(0) translateX(0) scale(1); } 25% { transform: translateY(3px) translateX(-2px) scale(0.97); } 50% { transform: translateY(4.5px) translateX(0) scale(0.955); } 75% { transform: translateY(3px) translateX(2px) scale(0.97); } 100% { transform: translateY(2px) translateX(0) scale(0.975); } } @keyframes card-snap-shake { 0% { transform: translateY(0) rotate(0); } 20% { transform: translateY(2.5px) rotate(-1.2deg); } 40% { transform: translateY(4.5px) rotate(1.2deg); } 60% { transform: translateY(3px) rotate(-0.6deg); } 100% { transform: translateY(2px) rotate(0); } } @keyframes card-snap-zoom { 0% { transform: scale(1) translateY(0); } 40% { transform: scale(0.945) translateY(4.5px); } 100% { transform: scale(0.975) translateY(2px); } } /* ----- 4 NEW personalities ----- */ /* skew: lateral squash on press (like rubber stamp tilting on impact) */ @keyframes card-snap-skew { 0% { transform: translateY(0) skewX(0) scale(1); } 50% { transform: translateY(4.5px) skewX(-2.5deg) scale(0.955); } 100% { transform: translateY(2px) skewX(-1deg) scale(0.975); } } /* twist: brief rotational spin then back to a small angle */ @keyframes card-snap-twist { 0% { transform: translateY(0) rotate(0) scale(1); } 35% { transform: translateY(4.5px) rotate(2.5deg) scale(0.95); } 70% { transform: translateY(2.5px) rotate(-1.5deg) scale(0.97); } 100% { transform: translateY(2px) rotate(0.3deg) scale(0.975); } } /* pulse: double-tap (down, briefly back, down again, settle) */ @keyframes card-snap-pulse { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(4px) scale(0.96); } 50% { transform: translateY(1px) scale(0.99); } 75% { transform: translateY(4.5px) scale(0.95); } 100% { transform: translateY(2px) scale(0.975); } } /* wobble: oscillating sway after the press */ @keyframes card-snap-wobble { 0% { transform: translateY(0) rotate(0) scale(1); } 25% { transform: translateY(4.5px) rotate(-1.5deg) scale(0.955); } 45% { transform: translateY(3px) rotate(1.2deg) scale(0.97); } 65% { transform: translateY(2.5px) rotate(-0.8deg) scale(0.975); } 85% { transform: translateY(2px) rotate(0.4deg) scale(0.975); } 100% { transform: translateY(2px) rotate(0) scale(0.975); } } /* Card selector groups — scoped to all relevant section classes */ .pub-card, .project-card, .award-card, .talk-card, .thesis-highlight, .timeline-card, .skill-category, .service-card, .outline-item { cursor: pointer; transition: background 0.16s ease-out, box-shadow 0.18s ease-out, border-color 0.16s ease-out !important; } /* 10 personality cycle — all card sections share the rule via long selector list */ .pub-card:nth-of-type(10n+1):hover, .project-card:nth-of-type(10n+1):hover, .award-card:nth-of-type(10n+1):hover, .talk-card:nth-of-type(10n+1):hover, .thesis-highlight:nth-of-type(10n+1):hover, .timeline-card:nth-of-type(10n+1):hover, .skill-category:nth-of-type(10n+1):hover, .service-card:nth-of-type(10n+1):hover, .outline-item:nth-of-type(10n+1):hover { animation: card-snap-tilt-l 0.22s cubic-bezier(0.4, 0, 0.6, 1) forwards; } .pub-card:nth-of-type(10n+2):hover, .project-card:nth-of-type(10n+2):hover, .award-card:nth-of-type(10n+2):hover, .talk-card:nth-of-type(10n+2):hover, .thesis-highlight:nth-of-type(10n+2):hover, .timeline-card:nth-of-type(10n+2):hover, .skill-category:nth-of-type(10n+2):hover, .service-card:nth-of-type(10n+2):hover, .outline-item:nth-of-type(10n+2):hover { animation: card-snap-tilt-r 0.22s cubic-bezier(0.4, 0, 0.6, 1) forwards; } .pub-card:nth-of-type(10n+3):hover, .project-card:nth-of-type(10n+3):hover, .award-card:nth-of-type(10n+3):hover, .talk-card:nth-of-type(10n+3):hover, .thesis-highlight:nth-of-type(10n+3):hover, .timeline-card:nth-of-type(10n+3):hover, .skill-category:nth-of-type(10n+3):hover, .service-card:nth-of-type(10n+3):hover, .outline-item:nth-of-type(10n+3):hover { animation: card-snap-bounce 0.26s cubic-bezier(0.4, 0, 0.6, 1) forwards; } .pub-card:nth-of-type(10n+4):hover, .project-card:nth-of-type(10n+4):hover, .award-card:nth-of-type(10n+4):hover, .talk-card:nth-of-type(10n+4):hover, .thesis-highlight:nth-of-type(10n+4):hover, .timeline-card:nth-of-type(10n+4):hover, .skill-category:nth-of-type(10n+4):hover, .service-card:nth-of-type(10n+4):hover, .outline-item:nth-of-type(10n+4):hover { animation: card-snap-jitter 0.24s cubic-bezier(0.4, 0, 0.6, 1) forwards; } .pub-card:nth-of-type(10n+5):hover, .project-card:nth-of-type(10n+5):hover, .award-card:nth-of-type(10n+5):hover, .talk-card:nth-of-type(10n+5):hover, .thesis-highlight:nth-of-type(10n+5):hover, .timeline-card:nth-of-type(10n+5):hover, .skill-category:nth-of-type(10n+5):hover, .service-card:nth-of-type(10n+5):hover, .outline-item:nth-of-type(10n+5):hover { animation: card-snap-shake 0.24s cubic-bezier(0.4, 0, 0.6, 1) forwards; } .pub-card:nth-of-type(10n+6):hover, .project-card:nth-of-type(10n+6):hover, .award-card:nth-of-type(10n+6):hover, .talk-card:nth-of-type(10n+6):hover, .thesis-highlight:nth-of-type(10n+6):hover, .timeline-card:nth-of-type(10n+6):hover, .skill-category:nth-of-type(10n+6):hover, .service-card:nth-of-type(10n+6):hover, .outline-item:nth-of-type(10n+6):hover { animation: card-snap-zoom 0.20s cubic-bezier(0.4, 0, 0.6, 1) forwards; } .pub-card:nth-of-type(10n+7):hover, .project-card:nth-of-type(10n+7):hover, .award-card:nth-of-type(10n+7):hover, .talk-card:nth-of-type(10n+7):hover, .thesis-highlight:nth-of-type(10n+7):hover, .timeline-card:nth-of-type(10n+7):hover, .skill-category:nth-of-type(10n+7):hover, .service-card:nth-of-type(10n+7):hover, .outline-item:nth-of-type(10n+7):hover { animation: card-snap-skew 0.22s cubic-bezier(0.4, 0, 0.6, 1) forwards; } .pub-card:nth-of-type(10n+8):hover, .project-card:nth-of-type(10n+8):hover, .award-card:nth-of-type(10n+8):hover, .talk-card:nth-of-type(10n+8):hover, .thesis-highlight:nth-of-type(10n+8):hover, .timeline-card:nth-of-type(10n+8):hover, .skill-category:nth-of-type(10n+8):hover, .service-card:nth-of-type(10n+8):hover, .outline-item:nth-of-type(10n+8):hover { animation: card-snap-twist 0.26s cubic-bezier(0.4, 0, 0.6, 1) forwards; } .pub-card:nth-of-type(10n+9):hover, .project-card:nth-of-type(10n+9):hover, .award-card:nth-of-type(10n+9):hover, .talk-card:nth-of-type(10n+9):hover, .thesis-highlight:nth-of-type(10n+9):hover, .timeline-card:nth-of-type(10n+9):hover, .skill-category:nth-of-type(10n+9):hover, .service-card:nth-of-type(10n+9):hover, .outline-item:nth-of-type(10n+9):hover { animation: card-snap-pulse 0.30s cubic-bezier(0.4, 0, 0.6, 1) forwards; } .pub-card:nth-of-type(10n+10):hover, .project-card:nth-of-type(10n+10):hover, .award-card:nth-of-type(10n+10):hover, .talk-card:nth-of-type(10n+10):hover, .thesis-highlight:nth-of-type(10n+10):hover, .timeline-card:nth-of-type(10n+10):hover, .skill-category:nth-of-type(10n+10):hover, .service-card:nth-of-type(10n+10):hover, .outline-item:nth-of-type(10n+10):hover { animation: card-snap-wobble 0.34s cubic-bezier(0.4, 0, 0.6, 1) forwards; } /* Pressed-card paper depression — soft inset shadow, NO sharp box. * Override existing :hover styles for all cards with !important. */ .pub-card:hover, .project-card:hover, .award-card:hover, .talk-card:hover, .thesis-highlight:hover, .timeline-card:hover, .skill-category:hover, .service-card:hover, .outline-item:hover { background: radial-gradient(ellipse 105% 80% at 50% 38%, rgba(120, 60, 30, 0.07) 0%, rgba(120, 60, 30, 0.03) 60%, transparent 100%), oklch(0.96 0.020 78 / 0.55) !important; box-shadow: inset 0 6px 16px -4px rgba(80, 30, 10, 0.22), inset 0 2px 4px -1px rgba(80, 30, 10, 0.10), inset 0 -3px 9px -2px rgba(255, 250, 232, 0.35), 0 -1px 2px rgba(255, 250, 230, 0.20), 0 3px 8px -3px rgba(60, 20, 10, 0.10) !important; border-color: transparent !important; } /* Word-cloud spans + skill-tags get a lighter snap (smaller, inline elements) */ .wordcloud .word, .skill-tag { cursor: pointer; display: inline-block; transition: color 0.16s ease-out, text-shadow 0.16s ease-out !important; } @keyframes word-snap-down { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(2.5px) scale(0.92); } 100% { transform: translateY(1px) scale(0.96); } } @keyframes word-snap-tilt { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(2.5px) rotate(-3deg); } 100% { transform: translateY(1px) rotate(-1.5deg); } } @keyframes word-snap-jitter { 0% { transform: translateY(0) translateX(0); } 25% { transform: translateY(2px) translateX(-1.5px); } 50% { transform: translateY(3px) translateX(0); } 75% { transform: translateY(2px) translateX(1.5px); } 100% { transform: translateY(1px) translateX(0); } } .wordcloud .word:nth-of-type(3n+1):hover, .skill-tag:nth-of-type(3n+1):hover { animation: word-snap-down 0.20s cubic-bezier(0.4, 0, 0.6, 1) forwards; } .wordcloud .word:nth-of-type(3n+2):hover, .skill-tag:nth-of-type(3n+2):hover { animation: word-snap-tilt 0.22s cubic-bezier(0.4, 0, 0.6, 1) forwards; } .wordcloud .word:nth-of-type(3n+3):hover, .skill-tag:nth-of-type(3n+3):hover { animation: word-snap-jitter 0.22s cubic-bezier(0.4, 0, 0.6, 1) forwards; } /* ----- Award/grant logo fix: brand wordmarks should NOT get torn-paper clip-path ----- */ .award-card img.award-icon, .award-card img.award-icon--brand, .award-card .award-icon img { clip-path: none !important; transform: none !important; box-shadow: none !important; } /* ============================================================================ * §MOBILE-OVERHAUL. Comprehensive responsive fixes for the parchment site on * phones (≤768px) and very small phones (≤480px). Targets: * - Hero notebook: 2-column open-book → 1-column stack (name+photo on top, * today's research bubbles below). Tighter padding, smaller font. * - OTW grid: 3-column (Roles | Locations | Employment) → 1-column stack * so each section gets full width and tags don't get crushed. * - Word cloud: smaller words + tighter padding; cap section height. * - Section padding: trim vertical so total page height is reasonable. * - Card paddings, font scales for various card types. * ========================================================================= */ @media (max-width: 768px) { /* ----- HERO NOTEBOOK: stack 2 pages → 1 column ----- */ .hero-notebook { grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 1.5em !important; } .hero-notebook .hn-page-left, .hero-notebook .hn-page-right { padding: 0.3em 0.6em !important; } .hero-notebook .hn-name { font-size: 2.4em !important; /* keep readable on phone */ } .hero-notebook .hn-credential { font-size: 1.0em !important; } .hero-notebook .hn-date { position: static !important; /* don't absolute-position on mobile */ text-align: right; padding-right: 0.5em; margin-bottom: 0.3em; font-size: 0.85em; } .hero-notebook .hn-photo-wrap { max-width: 200px; margin: 0 auto; } .hero-notebook .hn-photo-side { font-size: 0.9em; } .hero-notebook .hn-role-line { font-size: 1.0em; } .hero.hero-notebook-section { padding: 1em 0 2em !important; } /* ----- OTW grid: 3 cols → 1 col stack ----- */ .otw-grid { grid-template-columns: 1fr !important; gap: 1.4em !important; margin: 1em 0 1.4em 0 !important; } .otw-block { gap: 0.7em !important; } .otw-label { font-size: 1.10em !important; } .otw-tag, .otw-card .otw-tag { font-size: 0.96em !important; } .otw-tag.otw-tag-primary, .otw-card .otw-tag.otw-tag-primary { font-size: 1.15em !important; padding: 0.45em 0.85em 0.40em !important; } .otw-card { padding: 1em 0.8em !important; } .otw-cta { flex-direction: column !important; align-items: stretch !important; gap: 0.8em !important; } .otw-cta a.btn, .otw-cta .btn { text-align: center; font-size: 1em !important; } /* ----- Word cloud: smaller + tighter wrap ----- */ .wordcloud, .wordcloud-container { padding: 0.8em 0.4em !important; gap: 0.4em 0.5em !important; } .word.word-xl { font-size: 1.4em !important; } .word.word-lg { font-size: 1.15em !important; } .word.word-md { font-size: 1.0em !important; } .word.word-sm { font-size: 0.88em !important; } .word.word-xs { font-size: 0.78em !important; } /* ----- Research outline cards: tighter padding ----- */ .research-outline { padding: 0.5em !important; } .outline-item { padding: 1em 0.9em !important; margin-bottom: 0.6em !important; } .outline-item h3, .outline-item .outline-title { font-size: 1.1em !important; line-height: 1.3 !important; } .outline-item p { font-size: 0.95em !important; line-height: 1.5 !important; } /* ----- Section padding trim ----- */ .section, .section-alt { padding: 2em 0.8em !important; } .section-title { font-size: 1.7em !important; margin-bottom: 0.8em !important; } .container { padding: 0 0.6em !important; } /* ----- Publications + Projects cards: tighter ----- */ .pub-card, .project-card { padding: 1em 0.8em !important; margin-bottom: 1em !important; } .pub-card h3, .project-card h3 { font-size: 1.0em !important; line-height: 1.35 !important; } .pub-thumbnail, .project-thumbnail { max-width: 100% !important; margin: 0.4em 0 !important; } .section-controls { flex-direction: column !important; gap: 0.6em !important; align-items: stretch !important; } .section-controls .filter-tags { flex-wrap: wrap !important; justify-content: center !important; gap: 0.4em !important; } .search-box, .search-box input { width: 100% !important; box-sizing: border-box !important; } /* ----- Awards grid: 2 cols → 1 col ----- */ .awards-grid { grid-template-columns: 1fr !important; gap: 0.8em !important; } /* ----- Services grid: 2 cols → 1 col ----- */ .services-grid { grid-template-columns: 1fr !important; gap: 0.8em !important; } /* ----- Timeline: keep year column readable ----- */ .timeline-card { padding: 1em 0.8em !important; } .timeline-card .yr { font-size: 0.85em !important; } /* ----- Contact section ----- */ .contact-section { grid-template-columns: 1fr !important; gap: 1em !important; } /* ----- Skills section grid → 1 col ----- */ .skills-grid, .skill-categories { grid-template-columns: 1fr !important; gap: 0.8em !important; } } /* Tighter still on very small phones */ @media (max-width: 480px) { .hero-notebook .hn-name { font-size: 2.0em !important; } .hero-notebook .hn-credential { font-size: 0.95em !important; } .otw-tag.otw-tag-primary { font-size: 1.05em !important; } .word.word-xl { font-size: 1.2em !important; } .word.word-lg { font-size: 1.0em !important; } .word.word-md { font-size: 0.92em !important; } .section { padding: 1.5em 0.6em !important; } .section-title { font-size: 1.5em !important; } }