PINK BOX ☆ an au ung project/title> <meta name="description" content="Projekt Pink Box je majhna javna digitalna galerija, ki povezuje globalno spletno ustvarjalnost z lokalnim fizičnim prostorom." /> <style> :root { --sky-top: #7fd0ff; --sky-mid: #bfe8ff; --sky-low: #eefcff; --horizon: #dff7d8; --grass-1: #83d46c; --grass-2: #5bb855; --grass-3: #2e8f4d; --sun: #ffe6a6; --cloud: rgba(255,255,255,0.75); --text: #4d2142; --muted: #8d6281; --pink: #ff68b8; --pink-2: #ff8ccc; --pink-3: #ffb9df; --pink-deep: #db3f92; --panel-line: rgba(255,255,255,0.85); --shadow: 0 18px 40px rgba(219, 63, 146, 0.16); --max: 1180px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--text); line-height: 1.6; overflow-x: hidden; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 38%, var(--sky-low) 72%, var(--horizon) 100%); transition: background 2s ease; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 12% 18%, rgba(255,255,255,0.55) 0 2px, transparent 3px), radial-gradient(circle at 82% 12%, rgba(255,255,255,0.45) 0 2px, transparent 3px), radial-gradient(circle at 70% 35%, rgba(255,255,255,0.35) 0 1.5px, transparent 2.5px); opacity: 0.7; z-index: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; } .sun { position: absolute; width: 150px; height: 150px; border-radius: 2px; right: 10%; top: 10%; background: radial-gradient(circle, rgba(255,246,204,0.95) 0%, rgba(255,230,166,0.9) 48%, rgba(255,230,166,0) 72%); filter: blur(1px); transition: all 2s ease; } .cloud-layer, .birds, .butterflies, .grass-layer, .flowers { position: absolute; inset: 0; } .cloud { position: absolute; background: var(--cloud); border-radius: 2px; filter: blur(1px); box-shadow: 22px 8px 0 6px var(--cloud), 52px -2px 0 10px var(--cloud), 84px 8px 0 4px var(--cloud); opacity: 0.9; } .cloud.c1 { width: 110px; height: 34px; top: 12%; left: -15%; animation: drift1 80s linear infinite; } .cloud.c2 { width: 140px; height: 40px; top: 24%; left: -18%; animation: drift1 110s linear infinite -20s; } .cloud.c3 { width: 95px; height: 30px; top: 32%; left: -12%; animation: drift2 58s linear infinite -12s; } .cloud.c4 { width: 170px; height: 48px; top: 8%; left: -20%; animation: drift2 95s linear infinite -35s; } .cloud.c5 { width: 130px; height: 38px; top: 18%; left: -18%; animation: drift3 125s linear infinite -10s; } @keyframes drift1 { from { transform: translateX(0); } to { transform: translateX(140vw); } } @keyframes drift2 { from { transform: translateX(0); } to { transform: translateX(150vw); } } @keyframes drift3 { from { transform: translateX(0); } to { transform: translateX(160vw); } } .bird { position: absolute; width: 18px; height: 10px; border-top: 2px solid rgba(77,33,66,0.45); border-radius: 50% 50% 0 0; transform: rotate(8deg); opacity: 0.6; } .bird::after { content: ""; position: absolute; left: 10px; top: -2px; width: 18px; height: 10px; border-top: 2px solid rgba(77,33,66,0.45); border-radius: 50% 50% 0 0; transform: rotate(-16deg); } .bird.b1 { top: 20%; left: -8%; animation: birdsFly 42s linear infinite; } .bird.b2 { top: 14%; left: -10%; transform: scale(0.8); animation: birdsFly 54s linear infinite -8s; } .bird.b3 { top: 28%; left: -12%; transform: scale(0.6); animation: birdsFly 60s linear infinite -22s; } @keyframes birdsFly { from { transform: translateX(0) translateY(0); } 50% { transform: translateX(60vw) translateY(-14px); } to { transform: translateX(130vw) translateY(8px); } } .butterfly { position: absolute; width: 18px; height: 18px; border-radius: 50% 40% 50% 40%; background: linear-gradient(135deg, #ff8ccc, #ffd4ef); box-shadow: 12px 0 0 0 rgba(255,140,204,0.95); opacity: 0.8; } .butterfly::after { content: ""; position: absolute; left: 8px; top: 1px; width: 2px; height: 16px; background: rgba(77,33,66,0.35); } .bf1 { left: 6%; top: 56%; animation: flutter1 18s ease-in-out infinite; } .bf2 { left: 80%; top: 64%; transform: scale(0.8); animation: flutter2 23s ease-in-out infinite -6s; } .bf3 { left: 28%; top: 70%; transform: scale(0.7); animation: flutter1 21s ease-in-out infinite -12s; } @keyframes flutter1 { 0%,100%{ transform: translate(0,0) rotate(0deg);} 25%{ transform: translate(24px,-30px) rotate(10deg);} 50%{ transform: translate(55px,-8px) rotate(-8deg);} 75%{ transform: translate(30px,18px) rotate(12deg);} } @keyframes flutter2 { 0%,100%{ transform: translate(0,0) rotate(0deg) scale(0.8);} 35%{ transform: translate(-34px,-24px) rotate(-12deg) scale(0.9);} 65%{ transform: translate(-12px,20px) rotate(8deg) scale(0.75);} } .horizon { position: fixed; left: 0; right: 0; bottom: 0; height: 36vh; pointer-events: none; z-index: -1; background: radial-gradient(circle at 20% 90%, rgba(140,217,120,0.9) 0 18%, transparent 19%), radial-gradient(circle at 65% 100%, rgba(126,209,112,0.85) 0 20%, transparent 21%), linear-gradient(180deg, rgba(230,255,240,0) 0%, rgba(170,232,160,0.5) 25%, rgba(131,212,108,0.75) 55%, rgba(91,184,85,0.95) 100%); } .grass-layer.back { bottom: 0; top: auto; height: 24vh; background: radial-gradient(circle at 8% 100%, var(--grass-1) 0 22%, transparent 23%), radial-gradient(circle at 20% 100%, var(--grass-1) 0 20%, transparent 21%), radial-gradient(circle at 34% 100%, var(--grass-2) 0 22%, transparent 23%), radial-gradient(circle at 52% 100%, var(--grass-1) 0 20%, transparent 21%), radial-gradient(circle at 70% 100%, var(--grass-2) 0 23%, transparent 24%), radial-gradient(circle at 88% 100%, var(--grass-1) 0 21%, transparent 22%); opacity: 0.75; animation: swaySlow 10s ease-in-out infinite; } .grass-layer.front { bottom: 0; top: auto; height: 18vh; background: linear-gradient(180deg, transparent 0%, rgba(46,143,77,0.2) 30%, rgba(46,143,77,0.92) 100%); } .grass-blades { position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; background-image: linear-gradient(70deg, transparent 47%, rgba(28,115,60,0.9) 48%, rgba(28,115,60,0.9) 50%, transparent 51%), linear-gradient(110deg, transparent 47%, rgba(35,128,68,0.85) 48%, rgba(35,128,68,0.85) 50%, transparent 51%), linear-gradient(90deg, transparent 47%, rgba(67,170,87,0.9) 48%, rgba(67,170,87,0.9) 50%, transparent 51%); background-size: 28px 100%, 34px 100%, 22px 100%; animation: swayFast 6s ease-in-out infinite; opacity: 0.88; } .flowers { bottom: 6vh; top: auto; height: 10vh; } .flower { position: absolute; width: 10px; height: 10px; background: #fff9b5; border-radius: 2px; box-shadow: 8px 0 0 #ffd0ea, -8px 0 0 #ffd0ea, 0 8px 0 #ffd0ea, 0 -8px 0 #ffd0ea; opacity: 0.7; animation: bob 5s ease-in-out infinite; } .flower::after { content: ""; position: absolute; left: 4px; top: 10px; width: 2px; height: 22px; background: rgba(55,145,74,0.8); } .f1 { left: 8%; bottom: 0; } .f2 { left: 22%; bottom: 1vh; transform: scale(0.85); animation-delay: 1s; } .f3 { left: 39%; bottom: 0.5vh; transform: scale(0.75); animation-delay: 2s; } .f4 { left: 68%; bottom: 1vh; transform: scale(0.9); animation-delay: 0.5s; } .f5 { left: 84%; bottom: 0; transform: scale(0.8); animation-delay: 1.5s; } @keyframes swaySlow { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(10px);} } @keyframes swayFast { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(-8px);} } @keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} } .wrap { width: min(calc(100% - 28px), var(--max)); margin: 0 auto; position: relative; z-index: 2; } .topbar { position: relative; z-index: 4; padding: 8px 0; font-size: 0.82rem; color: #ffd6ef; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 6px), linear-gradient(180deg, rgba(28,8,23,0.9), rgba(57,17,44,0.8)); backdrop-filter: blur(8px); border-bottom: 2px solid rgba(255,255,255,0.18); box-shadow: 0 0 18px rgba(219,63,146,0.18); font-family: "Courier New", monospace; text-transform: lowercase; } .topbar-inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .blink { animation: blink 1s steps(2, start) infinite; } @keyframes blink { to { visibility: hidden; } } .marquee-old { position: relative; z-index: 4; overflow: hidden; white-space: nowrap; background: linear-gradient(90deg, rgba(255,105,180,0.2), rgba(255,255,255,0.08), rgba(255,105,180,0.2)); border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); font-family: "Courier New", monospace; color: #fff0fa; font-size: 0.82rem; } .marquee-old-track { display: inline-block; min-width: 200%; padding: 7px 0; animation: oldMarquee 18s linear infinite; } @keyframes oldMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .nav { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(44,12,35,0.86), rgba(69,18,53,0.72)); border-bottom: 2px solid rgba(255,255,255,0.15); box-shadow: 0 8px 26px rgba(76, 8, 50, 0.24); } .nav-inner { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 74px; } .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: 0.06em; color: #fff2fa; text-shadow: 0 0 10px rgba(255,255,255,0.15); } .brand-box-mini { width: 42px; height: 42px; border-radius: 0; background: linear-gradient(180deg, #ff9ad6, #ff68b8 58%, #db3f92 100%); border: 2px solid rgba(255,255,255,0.95); box-shadow: 4px 4px 0 rgba(34,7,25,0.75), 0 0 18px rgba(255,104,184,0.24); position: relative; flex: 0 0 auto; } .brand-box-mini::before, .brand-box-mini::after { content: ""; position: absolute; background: rgba(255,255,255,0.92); border-radius: 2px; } .brand-box-mini::before { width: 18px; height: 4px; left: 11px; top: 10px; } .brand-box-mini::after { width: 4px; height: 18px; left: 18px; top: 3px; } .nav-links { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.92rem; color: #ffcae9; font-family: "Courier New", monospace; } .nav-links a { padding: 8px 12px; background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.24); border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); } .nav-links a:hover { color: #ffffff; background: rgba(255,255,255,0.14); } .hero { padding: 20px 0 18px; } .hero-stage { min-height: 64vh; position: relative; display: flex; align-items: center; justify-content: center; padding: 20px 0 10px; } .pink-box-shell { width: min(100%, 1040px); position: relative; margin: 0 auto; } .pink-box-figure { width: min(100%, 860px); margin: 0 auto 26px; min-height: 420px; border-radius: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 12px), linear-gradient(180deg, #ff9ad6 0%, var(--pink) 42%, var(--pink-deep) 100%); border: 4px solid rgba(255,255,255,0.95); box-shadow: 0 28px 70px rgba(219, 63, 146, 0.3), 8px 8px 0 rgba(32,7,23,0.82); position: relative; overflow: hidden; } .pink-box-figure::before { content: ""; position: absolute; inset: 16px; border: 2px dashed rgba(255,255,255,0.46); border-radius: 0; pointer-events: none; } .pink-box-grid { position: absolute; inset: 30px 26px 26px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); gap: 7px; opacity: 0.45; } .pink-box-grid span { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); border-radius: 6px; } .floating-tag { position: absolute; padding: 8px 12px; border-radius: 2px; background: rgba(33,10,26,0.74); border: 1px solid rgba(255,255,255,0.24); box-shadow: 0 0 18px rgba(219,63,146,0.2); color: #ffd2ec; font-size: 0.82rem; font-weight: 700; font-family: "Courier New", monospace; text-transform: lowercase; } .ft1 { left: 2%; top: 8%; transform: rotate(-5deg); } .ft2 { right: 4%; top: 18%; transform: rotate(4deg); } .ft3 { left: 10%; bottom: 10%; transform: rotate(-3deg); } .hero-chaos { position: absolute; inset: 0; pointer-events: none; z-index: 2; } /* spaces where you can drop old internet gifs */ .gif-slot { position: absolute; width: 90px; height: 90px; border: 1px dashed rgba(255,255,255,0.6); background: rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; font: 10px "Courier New", monospace; color: #ffd2ec; text-align: center; pointer-events: auto; } .gif1 { left: -60px; top: 40px; transform: rotate(-6deg); } .gif2 { right: -60px; top: 120px; transform: rotate(6deg); } .gif3 { left: 10%; bottom: -40px; transform: rotate(-4deg); } .gif4 { right: 12%; bottom: -50px; transform: rotate(5deg); } .sticker-chaos { position: absolute; padding: 8px 10px; background: rgba(255,255,255,0.85); color: #db3f92; border: 1px solid rgba(255,255,255,0.95); border-radius: 0; font: 700 0.75rem "Courier New", monospace; box-shadow: 4px 4px 0 rgba(37,11,29,0.45); white-space: nowrap; } .sc1 { left: -2%; top: 4%; transform: rotate(-12deg); } .sc2 { right: 1%; top: 7%; transform: rotate(11deg); } .sc3 { left: 1%; bottom: 28%; transform: rotate(-8deg); } .sc4 { right: -1%; bottom: 22%; transform: rotate(8deg); } .sc5 { left: 14%; top: -2%; transform: rotate(-6deg); } .sc6 { right: 16%; bottom: 4%; transform: rotate(6deg); } .hero-panel { width: min(100%, 820px); margin: -250px auto 0; position: relative; z-index: 3; } .pink-card, .pink-section { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 10px), linear-gradient(180deg, rgba(37,11,29,0.9), rgba(62,17,47,0.82)); backdrop-filter: blur(12px); border-radius: 0; border: 2px solid rgba(255,255,255,0.18); box-shadow: 0 18px 32px rgba(48,10,36,0.28), inset 0 1px 0 rgba(255,255,255,0.08), 6px 6px 0 rgba(36,8,26,0.58); overflow: hidden; position: relative; color: #fff2fa; } .pink-card::before, .pink-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 18%), repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 2px, transparent 4px); } .pink-card::after, .pink-section::after { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(255,255,255,0.12); pointer-events: none; border-radius: 8px; } .window-bar { display: flex; gap: 8px; align-items: center; padding: 14px 16px 0; } .dot { width: 11px; height: 11px; border-radius: 2px; background: #ff7fbb; border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 0 8px rgba(255,127,187,0.4); } .dot:nth-child(2) { background: #ffd36e; box-shadow: 0 0 8px rgba(255,211,110,0.35); } .dot:nth-child(3) { background: #7ef1a8; box-shadow: 0 0 8px rgba(126,241,168,0.35); } .pink-card-inner, .pink-section-inner { padding: 10px 24px 24px; } .eyebrow { display: inline-block; padding: 6px 10px; border-radius: 2px; background: rgba(255,255,255,0.1); color: #ffbde1; font-size: 0.8rem; font-weight: 700; margin-bottom: 14px; border: 1px solid rgba(255,255,255,0.18); font-family: "Courier New", monospace; text-transform: lowercase; } h1, h2, h3 { line-height: 1.06; margin: 0 0 12px; } h1 { font-size: clamp(2.4rem, 5vw, 4.8rem); letter-spacing: -0.05em; } h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -0.04em; } h3 { font-size: 1.08rem; } .lead { color: #ffd3eb; font-size: 1.02rem; max-width: 58ch; } .small { color: #efbadb; font-size: 0.94rem; } .btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 2px; background: linear-gradient(180deg, #ff9ad6, #ff68b8 60%, #db3f92 100%); color: white; border: 1px solid rgba(255,255,255,0.9); font-weight: 700; box-shadow: 4px 4px 0 rgba(36,8,26,0.72), 0 0 18px rgba(255,104,184,0.2); cursor: pointer; transition: transform 0.16s ease; font-family: "Courier New", monospace; text-transform: lowercase; } .btn:hover { transform: translateY(-2px); } .btn.ghost { background: rgba(255,255,255,0.12); color: #ffd1eb; } main { padding-bottom: 32px; } section { padding: 12px 0; } .section-grid { display: grid; gap: 14px; } .section-head { display: flex; justify-content: space-between; gap: 14px; align-items: end; margin-bottom: 14px; } .section-head p { margin: 0; color: var(--muted); max-width: 58ch; } .exhibition-grid, .archive-grid, .about-grid, .contact-grid { display: grid; gap: 14px; } .exhibition-grid { grid-template-columns: 1.05fr 0.95fr; } .archive-grid { grid-template-columns: repeat(3, 1fr); } .about-grid { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr 1fr; } .placeholder-block { min-height: 230px; border-radius: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 12px, rgba(255,255,255,0.04) 12px 24px), linear-gradient(135deg, rgba(255,185,223,0.55), rgba(191,232,255,0.44)); border: 1px dashed rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; text-align: center; color: rgba(77,33,66,0.7); padding: 20px; font-weight: 700; font-family: "Courier New", monospace; text-transform: uppercase; } .meta-list, .pointer-list { display: grid; gap: 10px; margin-top: 12px; } .meta-item, .pointer-item { padding: 12px 14px; border-radius: 0; background: rgba(255,255,255,0.42); border: 1px solid rgba(255,255,255,0.86); box-shadow: 3px 3px 0 rgba(37,11,29,0.16); } .archive-card { min-height: 220px; display: flex; flex-direction: column; justify-content: end; border-radius: 0; padding: 18px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 10px), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.64)), linear-gradient(135deg, rgba(255,185,223,0.75), rgba(223,247,255,0.75), rgba(231,255,233,0.7)); border: 1px solid rgba(255,255,255,0.88); box-shadow: 4px 4px 0 rgba(37,11,29,0.15); } .terminal-box { background: rgba(33, 13, 28, 0.92); color: #ffc5e8; border-radius: 22px; border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); overflow: hidden; } .terminal-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: #ffd8ee; font-weight: 700; } .terminal-body { padding: 16px; font-family: "Courier New", monospace; font-size: 0.92rem; line-height: 1.7; } .terminal-line { color: #ffb9df; } .terminal-line strong { color: #fff0f7; } .terminal-note { margin-top: 12px; padding: 12px 14px; border-radius: 0; background: rgba(255,255,255,0.05); color: #ffd8ee; } .form { display: grid; gap: 10px; margin-top: 12px; } .form input, .form textarea { width: 100%; font: inherit; color: var(--text); background: rgba(255,255,255,0.76); border: 1px solid rgba(255,255,255,0.94); border-radius: 0; padding: 14px 16px; outline: none; } .form textarea { min-height: 150px; resize: vertical; } .note-box { margin-top: 12px; padding: 14px 16px; border-radius: 0; background: rgba(255,255,255,0.48); border: 1px dashed rgba(255,255,255,0.92); color: var(--muted); } .footer { padding: 20px 0 44px; color: rgba(77,33,66,0.72); position: relative; } .footer-inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.8); padding-top: 16px; font-family: "Courier New", monospace; } .side-chaos { position: fixed; right: 12px; top: 150px; width: 120px; z-index: 6; display: grid; gap: 10px; } .chaos-widget { background: linear-gradient(180deg, rgba(37,11,29,0.9), rgba(62,17,47,0.84)); color: #ffd8ee; border: 1px solid rgba(255,255,255,0.18); border-radius: 0; padding: 10px; font: 0.74rem "Courier New", monospace; box-shadow: 4px 4px 0 rgba(36,8,26,0.5); } .chaos-widget strong { color: #fff4fb; display: block; margin-bottom: 5px; } .stamp-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .stamp { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.82); color: #db3f92; border: 1px solid rgba(255,255,255,0.96); font: 700 0.72rem "Courier New", monospace; box-shadow: 3px 3px 0 rgba(37,11,29,0.15); transform: rotate(-2deg); } .stamp:nth-child(2n) { transform: rotate(2deg); } .glitter-divider { margin: 12px 0 2px; font: 0.8rem "Courier New", monospace; color: #ffbde1; letter-spacing: 0.08em; text-align: center; } @media (max-width: 1100px) { .side-chaos { display: none; } } .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } @media (max-width: 980px) { .hero-panel { margin-top: -180px; } .exhibition-grid, .archive-grid, .about-grid, .contact-grid { grid-template-columns: 1fr 1fr; } .archive-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .nav-inner, .topbar-inner { align-items: flex-start; } .hero-stage { min-height: 54vh; } .pink-box-figure { min-height: 340px; } .hero-panel { margin-top: -120px; } .exhibition-grid, .archive-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; } .pink-card-inner, .pink-section-inner { padding-left: 16px; padding-right: 16px; } h1 { font-size: 2.4rem; } .floating-tag { font-size: 0.78rem; padding: 8px 10px; } } </style> </head> <body> <div class="sky" aria-hidden="true"> <div class="sun"></div> <div class="cloud-layer far"> <div class="cloud c1"></div> <div class="cloud c2"></div> </div> <div class="cloud-layer near"> <div class="cloud c3"></div> <div class="cloud c4"></div> <div class="cloud c5"></div> </div> <div class="birds"> <div class="bird b1"></div> <div class="bird b2"></div> <div class="bird b3"></div> </div> <div class="butterflies"> <div class="butterfly bf1"></div> <div class="butterfly bf2"></div> <div class="butterfly bf3"></div> </div> <div class="horizon"></div> <div class="grass-layer back"></div> <div class="flowers"> <div class="flower f1"></div> <div class="flower f2"></div> <div class="flower f3"></div> <div class="flower f4"></div> <div class="flower f5"></div> </div> <div class="grass-layer front"> <div class="grass-blades"></div> </div> </div> <div class="topbar"> <div class="wrap topbar-inner"> <div>pink box // myspace-ish landing // old internet mood // visitor no. <span id="visitorCount">000417</span></div> <div id="timeStatus">časovni način: nalaganje...</div> </div> </div> <div class="marquee-old" aria-hidden="true"> <div class="marquee-old-track">*** welcome 2 pink box dot html *** Pink Box – skupnostna digitalna mikrogalerija *** under construction but make it iconic *** pink signal detected *** upload your art *** digital garden meets public gallery *** under construction but make it iconic *** pink signal detected ***</div> </div> <div class="side-chaos" aria-hidden="true"> <div class="chaos-widget"><strong>status</strong>online<br>roza mode: active<br><span class="blink">█</span> loading dreamscape</div> <div class="chaos-widget"><strong>currently</strong>watching sky.exe<br>curating pixels<br>touching grass</div> <div class="chaos-widget"><strong>mood</strong>myspace + hacker + meadow</div> </div> <nav class="nav"> <div class="wrap nav-inner"> <a class="brand" href="#vrh" aria-label="Pink Box domov"> <span class="brand-box-mini" aria-hidden="true"></span> <span>PINK BOX</span> </a> <div class="nav-links"> <a href="#trenutna">trenutna razstava</a> <a href="#arhiv">arhiv</a> <a href="#o-projektu">o projektu</a> <a href="#kontakt">kontakt</a> </div> </div> </nav> <header id="vrh" class="hero"> <div class="wrap hero-stage"> <div class="pink-box-shell reveal"> <div class="pink-box-figure"> <div class="hero-chaos" aria-hidden="true"> <div class="gif-slot gif1">GIF<br>HERE</div> <div class="gif-slot gif2">GIF<br>HERE</div> <div class="gif-slot gif3">GIF<br>HERE</div> <div class="gif-slot gif4">GIF<br>HERE</div> <div class="sticker-chaos sc1">under construction ♡</div> <div class="sticker-chaos sc2">best of nova gorica</div> <div class="sticker-chaos sc3">pinkbox_v6 final FINAL real</div> <div class="sticker-chaos sc4">visitor approved ★★★</div> <div class="sticker-chaos sc5">your first solo exhibition</div> <div class="sticker-chaos sc6">click everything!!</div> </div> <div class="pink-box-grid"> <span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> </div> <div class="floating-tag ft1">internet → mesto</div> <div class="floating-tag ft2">živa digitalna galerija</div> <div class="floating-tag ft3">narava + roza signal</div> </div> <div class="hero-panel pink-card"> <div class="window-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div> <div class="pink-card-inner"> <div class="glitter-divider">✦✦✦✦✦✦✦✦✦✦✦✦</div> <span class="eyebrow">vse sekcije so zdaj zamišljene kot roza box-i</span> <div class="small" style="font-family:'Courier New',monospace;color:#ffbde1;margin-bottom:10px;">> welcome to pink box web node_2006.exe</div> <h1 style="text-shadow:0 0 14px rgba(255,153,212,0.18);">PINK BOX</h1> <p class="lead"> Ozadje je narava in neskončno nebo, vsebina strani pa živi znotraj roza box sekcij. Sprednji del pa lahko ostane bolj old internet, malo hacker, malo myspace, malo osebna spletna stran. </p> <div class="stamp-row" aria-hidden="true"> <span class="stamp">html queen</span> <span class="stamp">pink box zone</span> <span class="stamp">naturecore.exe</span> </div> <div class="btn-row"> <a class="btn" href="#trenutna">odpri trenutno razstavo.exe</a> <a class="btn ghost" href="#kontakt">kontakt.sys</a> </div> </div> </div> </div> </div> </header> <main> <section id="trenutna"> <div class="wrap"> <div class="pink-section reveal"> <div class="window-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div> <div class="pink-section-inner"> <div class="section-head"> <div> <span class="eyebrow">01 / trenutna razstava</span> <h2>tukaj gre trenutna razstava</h2> </div> <p>Ta sekcija naj bo glavna. Najprej obiskovalec vidi, kaj se trenutno prikazuje v Pink Boxu.</p> </div> <div class="exhibition-grid"> <div> <div class="placeholder-block"> FOTOGRAFIJa ALI VIDEO PREVIEW TRENUTNE RAZSTAVE</div> <div class="meta-list"> <div class="meta-item"><strong>naslov razstave:</strong> marta solo exhibition</div> <div class="meta-item"><strong>avtor / avtorji:</strong> marta margetic</div> <div class="meta-item"><strong>obdobje:</strong> 16.3-17.3.</div> </div> </div> <div> <div class="pointer-list"> <div class="pointer-item"><strong>opis:</strong> animiran film iz zagreba</div> <div class="pointer-item"><strong>medij:</strong> 2d animacija </div> <div class="pointer-item"><strong>lokacija:</strong> vipavska 13.</div> <div class="pointer-item"><strong>link:</strong> insta @martaidk</div> </div> <div class="note-box">Po želji lahko tu dodaš tudi mini galerijo 3–5 slik, credits, kuratorski tekst ali QR kodo.</div> </div> </div> </div> </div> </div> </section> <section id="arhiv"> <div class="wrap"> <div class="pink-section reveal"> <div class="window-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div> <div class="pink-section-inner"> <div class="section-head"> <div> <span class="eyebrow">02 / arhiv prejšnjih razstav</span> <h2>prejšnje razstave</h2> </div> <p>Tukaj naj bo arhiv vseh prejšnjih Pink Box predstavitev. Vsaka kartica je ena prejšnja razstava.</p> </div> <div class="archive-grid"> <article class="archive-card"> <span class="eyebrow">arhiv 01</span> <h3>[naslov prejšnje razstave]</h3> <p class="small">sem dodaš eno sliko / thumbnail + kratek opis + datum</p> </article> <article class="archive-card"> <span class="eyebrow">arhiv 02</span> <h3>[naslov prejšnje razstave]</h3> <p class="small">sem dodaš eno sliko / thumbnail + kratek opis + datum</p> </article> <article class="archive-card"> <span class="eyebrow">arhiv 03</span> <h3>[naslov prejšnje razstave]</h3> <p class="small">sem dodaš eno sliko / thumbnail + kratek opis + datum</p> </article> </div> </div> </div> </div> </section> <section id="o-projektu"> <div class="wrap"> <div class="pink-section reveal"> <div class="window-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div> <div class="pink-section-inner"> <div class="section-head"> <div> <span class="eyebrow">03 / o projektu + koncept</span> <h2>o Pink Box projektu</h2> </div> <p>Ta del je namenjen samo osnovni razlagi. Ni treba, da je dolg. Lahko ostane zelo čist in jedrnat.</p> </div> <div class="about-grid"> <div class="pointer-list"> <div class="pointer-item"><strong>kaj je Pink Box:</strong> sem napišeš 2–4 stavke o projektu.</div> <div class="pointer-item"><strong>zakaj obstaja:</strong> sem napišeš idejo ali namen projekta.</div> <div class="pointer-item"><strong>kako deluje:</strong> sem napišeš na kratko, kako se vsebine menjavajo ali prikazujejo.</div> </div> <div class="pointer-list"> <div class="pointer-item"><strong>vizualna identiteta:</strong> sem napišeš nekaj o roza boxu, prostoru, internetu, javnosti.</div> <div class="pointer-item"><strong>sodelovanja:</strong> sem napišeš partnerje, občino, šolo, umetnike ali skupnosti.</div> <div class="pointer-item"><strong>dodatno:</strong> sem lahko dodaš manifest, statement ali en krajši citat.</div> </div> </div> </div> </div> </div> </section> <section id="kontakt"> <div class="wrap"> <div class="pink-section reveal"> <div class="window-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div> <div class="pink-section-inner"> <div class="section-head"> <div> <span class="eyebrow">04 / kontakt</span> <h2>kontakt in Pink Box terminal</h2> </div> <p>Tukaj imaš kontakt del in zraven še vizualni terminal za oddajo vsebin ali sporočil.</p> </div> <div class="contact-grid"> <div> <div class="pointer-list"> <div class="pointer-item"><strong>kontakt ime:</strong> [sem napišeš ime]</div> <div class="pointer-item"><strong>e-pošta:</strong> [sem napišeš e-pošto]</div> <div class="pointer-item"><strong>instagram / splet:</strong> [sem dodaš linke]</div> <div class="pointer-item"><strong>lokacija:</strong> [sem napišeš mesto ali regijo]</div> </div> <form class="form" onsubmit="sendMail(event)"> <input type="text" id="name" placeholder="ime" required /> <input type="email" id="email" placeholder="e-pošta" required /> <textarea id="message" placeholder="sporočilo / vprašanje / predlog" required></textarea> <button class="btn" type="submit">odpri e-pošto</button> </form> <div class="note-box">To trenutno odpre uporabnikovo e-poštno aplikacijo. To deluje na Neocities brez backenda.</div> </div> <div> <div class="terminal-box"> <div class="terminal-head"> <span class="dot"></span><span class="dot"></span><span class="dot"></span> <span>PINK BOX TERMINAL</span> </div> <div class="terminal-body"> <div class="terminal-line">> status: <strong>vizualni terminal pripravljen</strong></div> <div class="terminal-line">> funkcija: zbiranje prijav / predlogov / oddaj</div> <div class="terminal-line">> tip: statična Neocities stran</div> <div class="terminal-line">> backend: <strong>ni vključen</strong></div> <div class="terminal-note"> Sem lahko kasneje povežeš pravi obrazec za zbiranje podatkov. Na primer prek zunanje storitve za forme ali prek svojega lastnega backenda. Čisto znotraj same statične Neocities strani shramba oddaj sama po sebi ne deluje. </div> </div> </div> <div class="note-box">Lahko pa narediš dve dobri rešitvi: 1) zunanji form backend, ki zbira oddaje, 2) Google Form / Airtable / Notion submit flow, skrit za lepim Pink Box vmesnikom.</div> </div> </div> </div> </div> </div> </section> </main> <footer class="footer"> <div class="wrap footer-inner"> <div>© <span id="year"></span> PINK BOX</div> <div>enojna html datoteka // pripravljena za neocities // best viewed with internet nostalgia</div> </div> </footer> <script> document.getElementById('year').textContent = new Date().getFullYear(); const visitorEl = document.getElementById('visitorCount'); if (visitorEl) { const stored = Number(localStorage.getItem('pinkbox_fake_counter') || '417'); const next = stored + 1; localStorage.setItem('pinkbox_fake_counter', String(next)); visitorEl.textContent = String(next).padStart(6, '0'); } const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) entry.target.classList.add('visible'); }); }, { threshold: 0.12 }); document.querySelectorAll('.reveal').forEach((el) => observer.observe(el)); function sendMail(event) { event.preventDefault(); const name = document.getElementById('name').value.trim(); const email = document.getElementById('email').value.trim(); const message = document.getElementById('message').value.trim(); const subject = encodeURIComponent('Pink Box kontakt od ' + name); const body = encodeURIComponent('Ime: ' + name + '\nE-pošta: ' + email + '\n\n' + message); window.location.href = 'mailto:tvoj@email.com?subject=' + subject + '&body=' + body; } function updateTimeTheme() { const now = new Date(); const formatter = new Intl.DateTimeFormat('sl-SI', { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Belgrade', hour12: false }); const parts = formatter.formatToParts(now); const hour = Number(parts.find(p => p.type === 'hour').value); const minute = parts.find(p => p.type === 'minute').value; const timeStatus = document.getElementById('timeStatus'); let mode = ''; let background = ''; let textColor = '#4d2142'; if (hour >= 5 && hour < 8) { mode = 'zora'; background = 'linear-gradient(180deg, #ffd3b5 0%, #ffc4df 25%, #b9e7ff 62%, #e9fff1 100%)'; } else if (hour >= 8 && hour < 17) { mode = 'dan'; background = 'linear-gradient(180deg, #7fd0ff 0%, #bfe8ff 38%, #eefcff 72%, #dff7d8 100%)'; } else if (hour >= 17 && hour < 20) { mode = 'sončni zahod'; background = 'linear-gradient(180deg, #ffb67e 0%, #ff9ac6 34%, #a2d8ff 68%, #dff7d8 100%)'; } else { mode = 'noč'; background = 'linear-gradient(180deg, #12203f 0%, #26305d 34%, #3d4a7a 62%, #182436 100%)'; textColor = '#f8edf8'; } document.body.style.background = background; document.body.style.color = textColor; timeStatus.textContent = 'časovni način: ' + mode + ' / Beograd ' + parts.find(p => p.type === 'hour').value + ':' + minute; const sun = document.querySelector('.sun'); if (mode === 'noč') { sun.style.opacity = '0.15'; sun.style.transform = 'scale(0.7)'; } else if (mode === 'sončni zahod') { sun.style.opacity = '0.8'; sun.style.transform = 'translateY(22px) scale(0.95)'; } else if (mode === 'zora') { sun.style.opacity = '0.72'; sun.style.transform = 'translateY(18px) scale(0.9)'; } else { sun.style.opacity = '0.95'; sun.style.transform = 'translateY(0) scale(1)'; } } updateTimeTheme(); setInterval(updateTimeTheme, 60000); </script> </body> </html>