/* ============================================================ WORLDS.CSS | v4 Seven fully distinct visual universes | one per app. ============================================================ work -> editorial (NYT-style magazine, cream + ink) about -> shinkai (cinematic dusk sky, particles) skills -> blueprint (engineering CAD, teal + grid) recognition -> gold (award stage, maroon + foil) experience -> vapor (80s synthwave horizon) contact -> yinyang (monochrome, bold serif) trash -> grunge (torn paper, hand-marker) ============================================================ */ /* ════════════════════════════════════════════════════════════ WORLD 1 ✦ EDITORIAL (Work) ════════════════════════════════════════════════════════════ */ .win[data-world="editorial"] { --w-bg: #f4ecd8; --w-bg-2: #ebe3cf; --w-ink: #1a1611; --w-ink-2: #3a342a; --w-soft: #6e6552; --w-faint: #a89c82; --w-accent: #a83838; --w-rule: #d8cdb2; background: var(--w-bg); border: 1px solid rgba(26,22,17,.18); box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, 0 30px 70px -16px rgba(40,28,15,.55), 0 12px 30px -10px rgba(40,28,15,.35); } .win[data-world="editorial"] .win-titlebar { background: var(--w-bg-2); border-bottom: 1px solid var(--w-rule); } .win[data-world="editorial"] .win-title { color: var(--w-ink-2); font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: .85rem; letter-spacing: .02em; } .win[data-world="editorial"] .win-body { background: var(--w-bg); color: var(--w-ink); background-image: radial-gradient(circle at 12% 18%, rgba(168,56,56,.04), transparent 40%), repeating-linear-gradient(0deg, rgba(26,22,17,.012) 0 2px, transparent 2px 4px), radial-gradient(circle, rgba(26,22,17,.018) 1px, transparent 1px); background-size: auto, auto, 4px 4px; } .win[data-world="editorial"] .win-body::-webkit-scrollbar-thumb { background: rgba(26,22,17,.25); } .win[data-world="editorial"] .win-body::before { content: "THE PORTFOLIO TIMES · BUILDS & FIELD NOTES · EST. 2024"; display: block; font-family: 'JetBrains Mono', monospace; font-size: .58rem; letter-spacing: .35em; color: var(--w-faint); text-align: center; padding-bottom: var(--s2); margin-bottom: var(--s4); border-bottom: 3px double var(--w-rule); } .win[data-world="editorial"] .app-kicker { color: var(--w-accent); } .win[data-world="editorial"] .app-h { color: var(--w-ink); font-family: 'Instrument Serif', Georgia, serif; } .win[data-world="editorial"] .app-h em { color: var(--w-accent); } .win[data-world="editorial"] .app-sub { color: var(--w-soft); } .win[data-world="editorial"] .work-section-label { color: var(--w-accent); font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: .95rem; letter-spacing: .04em; text-transform: none; border-bottom: 1px solid var(--w-rule); padding-bottom: 6px; margin-bottom: 4px; } .win[data-world="editorial"] .work-row { border-bottom: 1px solid var(--w-rule); } .win[data-world="editorial"] .work-name { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.55rem; color: var(--w-ink); font-weight: 400; letter-spacing: 0; } .win[data-world="editorial"] .work-summary:hover .work-name { color: var(--w-accent); } .win[data-world="editorial"] .work-year { color: var(--w-soft); font-family: 'JetBrains Mono', monospace; } .win[data-world="editorial"] .work-cat { background: var(--w-ink); color: var(--w-bg); border: none; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; } .win[data-world="editorial"] .work-arrow { color: var(--w-accent); } .win[data-world="editorial"] .work-detail { border-color: var(--w-rule); } .win[data-world="editorial"] .work-caption { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--w-accent); font-size: 1.1rem; border-left: 3px solid var(--w-accent); padding-left: var(--s3); } .win[data-world="editorial"] .work-desc { color: var(--w-ink-2); font-size: .96rem; line-height: 1.75; } .win[data-world="editorial"] .work-proj-links a { background: transparent; color: var(--w-ink); border: 1px solid var(--w-ink); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; } .win[data-world="editorial"] .work-proj-links a:hover { background: var(--w-ink); color: var(--w-bg); } .win[data-world="editorial"] .work-tags span { background: transparent; color: var(--w-soft); border: 1px solid var(--w-rule); } .win[data-world="editorial"] .project-card { background: linear-gradient(160deg, rgba(255,255,255,.74), rgba(255,255,255,.22)), #efe5ca; border-color: var(--w-rule); box-shadow: 0 18px 36px -28px rgba(40,28,15,.7); } .win[data-world="editorial"] .project-card-featured { background: radial-gradient(circle at 78% 18%, rgba(168,56,56,.13), transparent 32%), linear-gradient(145deg, #fff8e8 0%, #eadbb8 100%); } .win[data-world="editorial"] .project-card-top { color: var(--w-soft); } .win[data-world="editorial"] .project-card h3 { color: var(--w-ink); } .win[data-world="editorial"] .project-card p { color: var(--w-ink-2); } .win[data-world="editorial"] .project-card .project-caption { color: var(--w-accent); } .win[data-world="editorial"] .project-tags span { color: var(--w-soft); background: rgba(26,22,17,.04); border-color: var(--w-rule); } .win[data-world="editorial"] .project-links a { color: var(--w-bg); background: var(--w-ink); } /* ════════════════════════════════════════════════════════════ WORLD 2 ✦ SHINKAI (About) ════════════════════════════════════════════════════════════ */ .win[data-world="shinkai"] { --w-ink: #fff7e0; --w-ink-2: #e7dcc3; --w-soft: #a79c86; --w-accent: #f7e6b8; background: radial-gradient(circle at 16% 18%, rgba(95,230,192,.12), transparent 34%), radial-gradient(circle at 80% 10%, rgba(247,230,184,.12), transparent 36%), linear-gradient(145deg, #07090d 0%, #121822 62%, #07090d 100%); border: 1px solid rgba(247,230,184,.20); box-shadow: 0 30px 70px -16px rgba(0,0,0,.7), 0 12px 30px -10px rgba(0,0,0,.5); } .win[data-world="shinkai"] .win-titlebar { background: rgba(7,9,13,.86); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(247,230,184,.16); } .win[data-world="shinkai"] .win-title { color: rgba(255,247,224,.92); font-family: 'Instrument Serif', Georgia, serif; font-style: italic; letter-spacing: .04em; } .win[data-world="shinkai"] .win-body { background: transparent; color: var(--w-ink); position: relative; } .win[data-world="shinkai"] .win-body::-webkit-scrollbar-thumb { background: rgba(247,230,184,.35); } .win[data-world="shinkai"] .win-body::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(rgba(247,230,184,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(247,230,184,.025) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(145deg, black, transparent 72%); opacity: .8; } .win[data-world="shinkai"] .win-body::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; pointer-events: none; z-index: 0; background: linear-gradient(to top, rgba(7,9,13,.55), transparent); } .win[data-world="shinkai"] .win-body > * { position: relative; z-index: 1; } .win[data-world="shinkai"] .app-kicker { color: rgba(95,230,192,.85); } .win[data-world="shinkai"] .app-h { color: #fff7e0; text-shadow: 0 2px 20px rgba(0,0,0,.5); } .win[data-world="shinkai"] .app-sub { color: rgba(255,247,224,.80); font-style: normal; font-family: 'Space Grotesk', sans-serif; font-size: 1rem; } .win[data-world="shinkai"] .about-body p { color: rgba(255,247,224,.90); line-height: 1.7; font-size: 1rem; } .win[data-world="shinkai"] .about-body strong { color: var(--w-accent); font-weight: 500; } .win[data-world="shinkai"] .about-body a { color: #5fe6c0; border-bottom: 1px solid rgba(95,230,192,.45); } .win[data-world="shinkai"] .about-body a:hover { color: #fff; border-color: #fff; } .win[data-world="shinkai"] .about-photo { border: 1px solid rgba(247,230,184,.22); background: rgba(7,9,13,.4); box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); } .win[data-world="shinkai"] .about-photo figcaption { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: .68rem; color: rgba(255,247,224,.72); background: rgba(7,9,13,.72); } /* ════════════════════════════════════════════════════════════ WORLD 3 ✦ BLUEPRINT (Skills) ════════════════════════════════════════════════════════════ */ .win[data-world="blueprint"] { --w-bg: #0a2030; --w-bg-2: #061826; --w-ink: #c8e8f0; --w-line: rgba(120,210,230,.30); --w-line-2: rgba(120,210,230,.12); --w-accent: #5fe6c0; background: var(--w-bg); border: 1px solid var(--w-line); box-shadow: 0 0 0 1px rgba(95,230,192,.10), 0 30px 70px -16px rgba(0,0,0,.7), 0 12px 30px -10px rgba(0,0,0,.5); } .win[data-world="blueprint"] .win-titlebar { background: var(--w-bg-2); border-bottom: 1px solid var(--w-line); } .win[data-world="blueprint"] .win-title { color: var(--w-accent); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .25em; font-size: .68rem; font-style: normal; } .win[data-world="blueprint"] .win-body { background: var(--w-bg); color: var(--w-ink); position: relative; background-image: linear-gradient(0deg, var(--w-line-2) 0 1px, transparent 1px 24px), linear-gradient(90deg, var(--w-line-2) 0 1px, transparent 1px 24px), linear-gradient(0deg, var(--w-line) 0 1px, transparent 1px 120px), linear-gradient(90deg, var(--w-line) 0 1px, transparent 1px 120px); } .win[data-world="blueprint"] .win-body::-webkit-scrollbar-thumb { background: var(--w-accent); } .win[data-world="blueprint"] .win-body::before { content: ''; position: absolute; inset: 14px; pointer-events: none; z-index: 0; background-image: linear-gradient(0deg, var(--w-accent) 0 2px, transparent 2px), linear-gradient(90deg, var(--w-accent) 0 2px, transparent 2px), linear-gradient(180deg,var(--w-accent) 0 2px, transparent 2px), linear-gradient(270deg,var(--w-accent) 0 2px, transparent 2px), linear-gradient(0deg, var(--w-accent) 0 2px, transparent 2px), linear-gradient(90deg, var(--w-accent) 0 2px, transparent 2px), linear-gradient(180deg,var(--w-accent) 0 2px, transparent 2px), linear-gradient(270deg,var(--w-accent) 0 2px, transparent 2px); background-size: 22px 22px; background-repeat: no-repeat; background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right; opacity: .55; } .win[data-world="blueprint"] .win-body::after { content: "DWG · EK-SKILLS-001 · SCALE 1:1 · REV 4.0"; position: absolute; bottom: 18px; right: 26px; font-family: 'JetBrains Mono', monospace; font-size: .58rem; color: var(--w-accent); letter-spacing: .2em; opacity: .55; pointer-events: none; z-index: 0; } .win[data-world="blueprint"] .win-body > * { position: relative; z-index: 1; } .win[data-world="blueprint"] .app-kicker { color: var(--w-accent); } .win[data-world="blueprint"] .app-h { color: var(--w-ink); font-family: 'JetBrains Mono', monospace; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .04em; } .win[data-world="blueprint"] .app-sub { color: rgba(200,232,240,.7); font-family: 'JetBrains Mono', monospace; font-size: .85rem; } .win[data-world="blueprint"] .skill-row { border-color: var(--w-line); } .win[data-world="blueprint"] .skill-row:last-child { border-color: var(--w-line); } .win[data-world="blueprint"] .skill-dt { color: var(--w-accent); font-family: 'JetBrains Mono', monospace; letter-spacing: .14em; } .win[data-world="blueprint"] .skill-dt::before { content: "◢ "; opacity: .65; } .win[data-world="blueprint"] .skill-dd { color: var(--w-ink); font-family: 'JetBrains Mono', monospace; font-size: .78rem; line-height: 1.75; overflow-wrap: anywhere; } .win[data-world="blueprint"] .skill-now { background: rgba(95,230,192,.08); border: 1px solid var(--w-accent); border-radius: 0; position: relative; } .win[data-world="blueprint"] .skill-now::before { content: "// CURRENTLY UNDER CONSTRUCTION"; position: absolute; top: -8px; left: 16px; background: var(--w-bg); padding: 0 8px; font-family: 'JetBrains Mono', monospace; font-size: .58rem; letter-spacing: .2em; color: var(--w-accent); } .win[data-world="blueprint"] .skill-now p { color: var(--w-ink); } .win[data-world="blueprint"] .skill-now strong { color: var(--w-accent); } /* ════════════════════════════════════════════════════════════ WORLD 4 ✦ GOLD (Recognition) ════════════════════════════════════════════════════════════ */ .win[data-world="gold"] { --w-ink: #fff0d4; --w-ink-2: #ffe2a8; --w-soft: #d9b878; --w-accent: #ffd97a; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,217,122,.40), transparent 60%), radial-gradient(ellipse 90% 80% at 50% 90%, rgba(70,12,12,.5), transparent 60%), linear-gradient(168deg, #3a1010 0%, #6a1f18 30%, #94401e 55%, #c6781e 80%, #ffd97a 100%); border: 1px solid rgba(255,217,122,.35); box-shadow: 0 0 80px -10px rgba(255,170,60,.30), 0 30px 70px -16px rgba(0,0,0,.75), 0 12px 30px -10px rgba(0,0,0,.55); } .win[data-world="gold"] .win-titlebar { background: rgba(30,8,8,.7); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,217,122,.35); } .win[data-world="gold"] .win-title { color: #ffe2a8; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; letter-spacing: .08em; } .win[data-world="gold"] .win-body { background: transparent; color: var(--w-ink); position: relative; } .win[data-world="gold"] .win-body::-webkit-scrollbar-thumb { background: rgba(255,217,122,.55); } .win[data-world="gold"] .win-body::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 30% 90% at 20% -5%, rgba(255,235,180,.18), transparent 65%), radial-gradient(ellipse 30% 90% at 80% -5%, rgba(255,235,180,.15), transparent 65%); } .win[data-world="gold"] .win-body::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(2px 2px at 12% 18%, #fff7e0, transparent), radial-gradient(1.5px 1.5px at 38% 62%, #fff, transparent), radial-gradient(2px 2px at 65% 28%, #ffe9b8, transparent), radial-gradient(1.5px 1.5px at 88% 72%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 82%, #ffe9b8, transparent), radial-gradient(2px 2px at 78% 12%, #fff7e0, transparent), radial-gradient(1.5px 1.5px at 50% 48%, #fff, transparent); opacity: .9; animation: goldShimmer 5s ease-in-out infinite alternate; } @keyframes goldShimmer { from { opacity: .55; } to { opacity: .95; } } .win[data-world="gold"] .win-body > * { position: relative; z-index: 1; } .win[data-world="gold"] .app-kicker { color: var(--w-accent); font-family: 'Instrument Serif', Georgia, serif; font-style: italic; text-transform: none; font-size: 1.1rem; letter-spacing: .02em; } .win[data-world="gold"] .app-h { color: #fff7e0; font-family: 'Instrument Serif', Georgia, serif; font-size: 2.6rem; text-shadow: 0 2px 20px rgba(255,170,60,.3); } .win[data-world="gold"] .app-sub { color: rgba(255,240,212,.8); font-style: italic; } .win[data-world="gold"] .achieve-row { border-color: rgba(255,217,122,.25); } .win[data-world="gold"] .achieve-row:last-of-type { border-color: rgba(255,217,122,.25); } .win[data-world="gold"] .achieve-badge { color: #2a0a0a; background: linear-gradient(160deg, #fff0c8, #d9a040); border: 1px solid #fff0c8; font-family: 'JetBrains Mono', monospace; box-shadow: 0 4px 12px -4px rgba(255,170,60,.55); } .win[data-world="gold"] .achieve-title { font-family: 'Instrument Serif', Georgia, serif; color: #fff7e0; font-size: 1.65rem; text-shadow: 0 2px 18px rgba(255,170,60,.35); } .win[data-world="gold"] .achieve-org { color: var(--w-accent); } .win[data-world="gold"] .achieve-desc { color: rgba(255,240,212,.85); font-size: .94rem; } .win[data-world="gold"] .achieve-cert { color: var(--w-accent); border-color: rgba(255,217,122,.55); } .win[data-world="gold"] .achieve-cert:hover { color: #fff; border-color: #fff; } .win[data-world="gold"] .achieve-photo { border: 2px solid var(--w-accent); box-shadow: 0 0 0 1px rgba(255,217,122,.45), 0 16px 40px -12px rgba(0,0,0,.7); border-radius: 4px; } .win[data-world="gold"] .certs-grid { border: none; gap: 8px; } .win[data-world="gold"] .cert-pill { background: rgba(20,4,4,.4); border: 1px solid rgba(255,217,122,.30); backdrop-filter: blur(6px); } .win[data-world="gold"] .cert-pill:hover { background: rgba(255,217,122,.15); border-color: var(--w-accent); } .win[data-world="gold"] .cert-name { color: var(--w-ink); } .win[data-world="gold"] .cert-org { color: var(--w-soft); } /* ════════════════════════════════════════════════════════════ WORLD 5 ✦ VAPOR (Experience) ════════════════════════════════════════════════════════════ */ .win[data-world="vapor"] { --w-ink: #fff7e0; --w-ink-2: #eadfc7; --w-soft: #a99e8d; --w-accent: #f7e6b8; --w-cyan: #5fe6c0; background: radial-gradient(ellipse 70% 65% at 50% 0%, rgba(247,230,184,.18), transparent 58%), linear-gradient(155deg, #050507 0%, #11151d 48%, #050507 100%); border: 1px solid rgba(247,230,184,.22); box-shadow: 0 30px 70px -16px rgba(0,0,0,.82), 0 12px 30px -10px rgba(0,0,0,.62); } .win[data-world="vapor"] .win-titlebar { background: rgba(5,5,7,.86); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(247,230,184,.18); } .win[data-world="vapor"] .win-title { color: var(--w-accent); font-family: 'Instrument Serif', Georgia, serif; letter-spacing: .04em; font-size: .88rem; font-style: italic; text-shadow: none; } .win[data-world="vapor"] .win-body { background: radial-gradient(circle at 15% 12%, rgba(95,230,192,.10), transparent 34%), radial-gradient(circle at 86% 18%, rgba(247,230,184,.08), transparent 38%), transparent; color: var(--w-ink); position: relative; } .win[data-world="vapor"] .win-body::-webkit-scrollbar-thumb { background: rgba(247,230,184,.38); } .win[data-world="vapor"] .win-body > * { position: relative; z-index: 1; } .win[data-world="vapor"] .app-kicker { color: var(--w-cyan); font-family: 'JetBrains Mono', monospace; text-shadow: none; } .win[data-world="vapor"] .app-h { color: var(--w-ink); font-family: 'Instrument Serif', Georgia, serif; font-size: 2.4rem; text-transform: none; letter-spacing: 0; text-shadow: 0 12px 34px rgba(0,0,0,.72); } .win[data-world="vapor"] .app-sub { color: rgba(234,223,199,.88); font-family: 'Space Grotesk', sans-serif; font-size: .98rem; } .win[data-world="vapor"] .exp-entry { border-color: rgba(247,230,184,.20); } .win[data-world="vapor"] .exp-entry:last-of-type { border-color: rgba(247,230,184,.20); } .win[data-world="vapor"] .exp-dates { color: var(--w-cyan); font-family: 'JetBrains Mono', monospace; text-shadow: none; } .win[data-world="vapor"] .exp-org { color: var(--w-soft); } .win[data-world="vapor"] .exp-role { font-family: 'Instrument Serif', Georgia, serif; text-transform: none; letter-spacing: 0; font-size: 1.55rem; font-weight: 400; color: var(--w-accent); text-shadow: none; } .win[data-world="vapor"] .exp-bullets li { color: rgba(255,247,224,.88); font-size: .92rem; } .win[data-world="vapor"] .exp-bullets li::before { background: var(--w-cyan); box-shadow: 0 0 6px rgba(95,230,192,.65); } .win[data-world="vapor"] .exp-cert { background: rgba(247,230,184,.10); border: 1px solid rgba(247,230,184,.36); color: var(--w-accent); text-shadow: none; } .win[data-world="vapor"] .exp-cert:hover { background: var(--w-accent); color: #050507; box-shadow: none; } .win[data-world="vapor"] .exp-photo { border: 2px solid var(--w-accent); box-shadow: 0 0 0 1px var(--w-cyan), 0 0 24px -4px rgba(255,110,196,.55); border-radius: 4px; } .win[data-world="vapor"] .exp-photo figcaption { background: rgba(26,10,58,.75); color: var(--w-cyan); font-family: 'JetBrains Mono', monospace; text-shadow: 0 0 4px rgba(93,213,255,.45); } .win[data-world="vapor"] .story-card { border-color: rgba(255,255,255,.34); box-shadow: 0 0 0 1px rgba(247,230,184,.16), 0 22px 48px -26px rgba(0,0,0,.9); } .win[data-world="vapor"] .story-caption h3 { color: #fff7e0; text-shadow: 0 2px 24px rgba(0,0,0,.9); } .win[data-world="vapor"] .story-caption p { color: rgba(255,247,224,.92); } .win[data-world="vapor"] .exp-mini-kicker { color: var(--w-cyan); } /* ════════════════════════════════════════════════════════════ WORLD 6 ✦ YINYANG (Contact) ════════════════════════════════════════════════════════════ */ .win[data-world="yinyang"] { --w-ink: #0a0a0f; --w-pap: #fbf6e9; --w-accent: #0a0a0f; background: linear-gradient(135deg, var(--w-pap) 50%, var(--w-ink) 50%); border: 1px solid #000; box-shadow: 0 0 0 4px var(--w-pap), 0 0 0 6px #000, 0 30px 70px -16px rgba(0,0,0,.65); } .win[data-world="yinyang"] .win-titlebar { background: #000; border-bottom: none; } .win[data-world="yinyang"] .win-title { color: var(--w-pap); font-family: 'Instrument Serif', Georgia, serif; font-style: italic; letter-spacing: .08em; font-size: .85rem; } .win[data-world="yinyang"] .win-close { background: var(--w-pap); } .win[data-world="yinyang"] .win-min { background: #888; } .win[data-world="yinyang"] .win-max-btn { background: #444; } .win[data-world="yinyang"] .win-body { background: transparent; color: var(--w-ink); position: relative; } .win[data-world="yinyang"] .win-body::-webkit-scrollbar-thumb { background: #000; } .win[data-world="yinyang"] .win-body::after { content: '&'; position: absolute; right: -30px; bottom: -80px; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 380px; line-height: 1; color: rgba(255,250,235,.18); pointer-events: none; z-index: 0; } .win[data-world="yinyang"] .win-body > * { position: relative; z-index: 1; } .win[data-world="yinyang"] .contact-app-head h3 { font-family: 'Instrument Serif', Georgia, serif; font-size: 3.4rem; font-weight: 400; color: var(--w-ink); letter-spacing: 0; line-height: .95; } .win[data-world="yinyang"] .contact-app-head h3 em { color: var(--w-pap); font-style: italic; background: var(--w-ink); padding: 0 .15em; } .win[data-world="yinyang"] .contact-app-head p { color: rgba(10,10,15,.7); font-size: .96rem; max-width: 30ch; } .win[data-world="yinyang"] .contact-row { background: var(--w-pap); border: 2px solid #000; border-radius: 0; } .win[data-world="yinyang"] .contact-row:hover { background: #000; } .win[data-world="yinyang"] .contact-row:hover a { color: var(--w-pap); } .win[data-world="yinyang"] .contact-row:hover svg { color: var(--w-pap); } .win[data-world="yinyang"] .contact-row a { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.1rem; color: #000; font-style: italic; font-weight: 400; } .win[data-world="yinyang"] .contact-row svg { color: #000; } .win[data-world="yinyang"] .copy-btn { border: 1.5px solid #000; border-radius: 0; color: #000; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; } .win[data-world="yinyang"] .copy-btn:hover { background: #000; color: var(--w-pap); border-color: #000; } .win[data-world="yinyang"] .copy-btn.copied { background: #000; color: var(--w-pap); } /* ════════════════════════════════════════════════════════════ WORLD 7 ✦ GRUNGE (Trash) ════════════════════════════════════════════════════════════ */ .win[data-world="grunge"] { --w-bg: #d9d2bf; --w-ink: #1a1611; --w-soft: #5e5544; --w-accent: #b53030; background: var(--w-bg); border: 1px solid rgba(26,22,17,.25); box-shadow: 0 30px 70px -16px rgba(40,28,15,.55), 0 12px 30px -10px rgba(40,28,15,.35); transform: rotate(-.25deg); } .win[data-world="grunge"]:hover { transform: rotate(0deg); } .win[data-world="grunge"] .win-titlebar { background: #b8b09c; border-bottom: 1px solid var(--w-ink); } .win[data-world="grunge"] .win-title { color: var(--w-ink); font-family: 'Caveat', cursive; font-size: 1rem; font-style: normal; letter-spacing: .02em; text-transform: none; } .win[data-world="grunge"] .win-body { background: var(--w-bg); color: var(--w-ink); position: relative; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 1.5px, transparent 1.5px 14px), repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 1.5px, transparent 1.5px 14px), radial-gradient(circle, rgba(0,0,0,.04) 1px, transparent 1px); background-size: auto, auto, 6px 6px; } .win[data-world="grunge"] .win-body::-webkit-scrollbar-thumb { background: rgba(26,22,17,.4); } .win[data-world="grunge"] .win-body::before { content: 'DISCARDED'; position: absolute; top: 18%; left: 50%; transform: translate(-50%,-50%) rotate(-12deg); font-family: 'Caveat', cursive; font-size: 7rem; color: rgba(181,48,48,.18); font-weight: 700; pointer-events: none; z-index: 0; letter-spacing: .04em; white-space: nowrap; } .win[data-world="grunge"] .win-body > * { position: relative; z-index: 1; } .win[data-world="grunge"] .trash-note { font-family: 'Caveat', cursive; font-size: 1.25rem; line-height: 1.45; color: var(--w-ink); border-bottom: 2px dashed var(--w-accent); } .win[data-world="grunge"] .trash-list a { font-family: 'JetBrains Mono', monospace; font-size: .88rem; color: var(--w-ink); text-decoration: line-through; text-decoration-color: var(--w-accent); text-decoration-thickness: 1.5px; border-bottom: 1px solid rgba(26,22,17,.12); border-radius: 0; } .win[data-world="grunge"] .trash-list a:hover { color: var(--w-accent); background: rgba(181,48,48,.08); text-decoration-thickness: 2.5px; } .win[data-world="grunge"] .trash-list span.arr { color: var(--w-accent); } /* ════════════════════════════════════════════════════════════ MOBILE + REDUCED-MOTION ════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { .win[data-world] { box-shadow: none; transform: none; border-radius: 0; } .win[data-world="yinyang"] { box-shadow: 0 0 0 3px #000; } .win[data-world="shinkai"] .win-body::before, .win[data-world="gold"] .win-body::after { animation: none; } } @media (prefers-reduced-motion: reduce) { .win[data-world="shinkai"] .win-body::before, .win[data-world="gold"] .win-body::after { animation: none; } }