:root { --red: #C0392B; --red-d: #8B1A13; --red-l: #E74C3C; --navy: #1A1A2E; --navy-mid: #16213E; --navy-l: #0F3460; --gold: #C9A84C; --gold-d: #9A7A2E; --washi: #F5F0E8; --washi-d: #EDE8DF; --cyan: #00B4D8; --cyan-d: #0883A0; --white: #FFFFFF; --g100: #F8F9FA; --g200: #E9ECEF; --g300: #DEE2E6; --g400: #ADB5BD; --g600: #6C757D; --g800: #343A40; --font-sans: 'Inter', system-ui, sans-serif; --font-serif: 'Noto Serif JP', Georgia, serif; --font-mono: 'JetBrains Mono', monospace; --ease: cubic-bezier(0.4,0,0.2,1); --shadow-sm: 0 2px 8px rgba(0,0,0,0.07); --shadow-md: 0 4px 24px rgba(0,0,0,0.10); --shadow-lg: 0 8px 48px rgba(0,0,0,0.15); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; /* Stop horizontal scrolling at the real scroll root. `clip` (unlike `hidden`) does NOT create a scroll container, so smooth anchor scrolling and the fixed navbar keep working. This is the key fix: overflow-x on alone does not stop the element from panning sideways on narrow phones, which is what cut off the menu button and revealed the bare background strip. */ overflow-x: hidden; /* fallback for older browsers */ overflow-x: clip; } body { font-family: var(--font-sans); background: var(--washi); color: var(--g800); line-height: 1.6; max-width: 100%; overflow-x: hidden; /* fallback for older browsers */ overflow-x: clip; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--navy); } ::-webkit-scrollbar-thumb { background: var(--red); } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .section { padding: 6rem 0; } .tag { display: inline-block; padding: .22rem .7rem; border-radius: 999px; font-size: .7rem; font-weight: 600; font-family: var(--font-mono); letter-spacing: .05em; } .tag-red { background: rgba(192,57,43,.10); color: var(--red); border: 1px solid rgba(192,57,43,.2); } .tag-cyan { background: rgba(0,180,216,.10); color: #0096B7; border: 1px solid rgba(0,180,216,.2); } .tag-gold { background: rgba(201,168,76,.12); color: var(--gold-d); border: 1px solid rgba(201,168,76,.25); } .tag-navy { background: rgba(26,26,46,.07); color: var(--navy); border: 1px solid rgba(26,26,46,.15); } .tag-red-d { background: rgba(192,57,43,.2); color: var(--red-l); border: 1px solid rgba(192,57,43,.35); } .tag-cyan-d{ background: rgba(0,180,216,.15); color: var(--cyan); border: 1px solid rgba(0,180,216,.3); } .tag-gold-d{ background: rgba(201,168,76,.15); color: var(--gold); border: 1px solid rgba(201,168,76,.3); } .tag-nav-d { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.15); } .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.75rem; font-family: var(--font-sans); font-size: .9rem; font-weight: 700; cursor: pointer; border: 2px solid transparent; transition: transform .1s var(--ease), box-shadow .1s var(--ease), background .15s; text-decoration: none; } .btn-primary { background: var(--red); color: var(--white); border-color: var(--red); box-shadow: 4px 4px 0 var(--red-d); position: relative; overflow: hidden; } .btn-primary::before { content: ''; position: absolute; top: 0; left: 0; width: 55%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.13), transparent); transform: translateX(-220%) skewX(-18deg); pointer-events: none; } .btn-primary:hover::before { animation: btn-sheen 1.2s ease-out forwards; } @keyframes btn-sheen { from { transform: translateX(-220%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } } .btn-disabled::before { display: none; } .btn-primary:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--red-d); } .btn-primary:active { transform: translate(4px,4px); box-shadow: none; } .btn-outline-dark { background: transparent; color: var(--navy); border-color: var(--navy); box-shadow: 4px 4px 0 rgba(26,26,46,.2); } .btn-outline-dark:hover { background: var(--navy); color: var(--white); transform: translate(2px,2px); box-shadow: 2px 2px 0 rgba(26,26,46,.2); } .btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); box-shadow: 4px 4px 0 rgba(255,255,255,.08); } .btn-outline-light:hover { border-color: var(--white); transform: translate(2px,2px); } .btn-disabled { position: relative; overflow: visible; cursor: not-allowed !important; pointer-events: none; flex-direction: column; align-items: center; gap: .1rem; width: max-content; padding: .25rem 1.25rem !important; background: rgba(192,57,43,.10); border-color: rgba(192,57,43,.30); color: rgba(139,26,19,.72); box-shadow: none; } .btn-disabled:hover, .btn-disabled:active { transform: none !important; } /* dark backgrounds (e.g. registration footer): blend with a faint light tint */ .sec-dark .btn-disabled, .reg-section .btn-disabled, .aka-section .btn-disabled { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.62); } .btn-disabled::after { content: ""; position: absolute; top: -13px; right: -12px; width: 30px; height: 30px; background: url("icons/lock.png") no-repeat center / contain; transform: rotate(14deg); filter: drop-shadow(1px 2px 2.5px rgba(0,0,0,.3)); pointer-events: none; } .btn-opens { font-size: .58rem; font-weight: 400; letter-spacing: .05em; } .pdf-ico { display: inline-block; width: 1em; height: 1em; vertical-align: middle; background-color: currentColor; -webkit-mask: url("icons/pdf.svg") no-repeat center / contain; mask: url("icons/pdf.svg") no-repeat center / contain; } .section-label { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--red); margin-bottom: .6rem; } .section-label-light { color: var(--red-l); } .section-title { font-family: var(--font-serif); font-size: clamp(1.7rem,3.5vw,2.6rem); font-weight: 700; line-height: 1.2; color: var(--navy); margin-bottom: .85rem; } .section-title-light { color: var(--white); } .section-sub { font-size: 1rem; color: var(--g600); max-width: 560px; line-height: 1.7; } .section-sub-light { color: rgba(255,255,255,.55); } .fade-in { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .fade-in.visible { opacity: 1; transform: translateY(0); } .bar { height: 8px; background: rgba(0,0,0,.08); overflow: hidden; } .bar-fill { height: 100%; background: var(--red); } .bar-fill.gold { background: var(--gold); } .bar-fill.cyan { background: var(--cyan); } @keyframes blink-fast { 0%,100%{opacity:1} 50%{opacity:0} } .px-rule { height: 4px; background: repeating-linear-gradient(90deg, var(--red) 0px, var(--red) 10px, transparent 10px, transparent 18px); position: relative; z-index: 2; } .dark-stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .star { position: absolute; border-radius: 0; background: var(--white); animation: star-fade var(--d,8s) ease-in-out infinite var(--delay,0s); opacity: 0; } @keyframes star-fade { 0%,100% { opacity: 0; } 50% { opacity: var(--peak, 0.55); } } .aka-scene { position: relative; display: inline-block; } .aka-body-w { position: relative; animation: breathe 3s ease-in-out infinite; transform-origin: bottom center; } @keyframes breathe { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} } .aka-head-w { position: absolute; transform-origin: 100% 15%; animation: nod 2s ease-in-out infinite; } @keyframes nod { 0%{transform:rotate(0deg)} 20%{transform:rotate(18deg)} 38%{transform:rotate(4deg)} 55%{transform:rotate(15deg)} 70%{transform:rotate(0deg)} 100%{transform:rotate(0deg)} } .top-strip { height: 4px; background: repeating-linear-gradient(90deg,var(--red) 0,var(--red) 12px,transparent 12px,transparent 22px); position: relative; z-index: 1001; } /* ── NAVBAR ── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1rem 0; transition: background .3s, padding .3s, box-shadow .3s; } .navbar.scrolled { background: rgba(26,26,46,.97); backdrop-filter: blur(12px); padding: .55rem 0; box-shadow: 0 4px 32px rgba(0,0,0,.35); border-bottom: 1px solid rgba(255,255,255,.06); } .navbar.menu-open, .navbar:has(.nav-links.open) { background: rgba(26,26,46,.97); backdrop-filter: blur(12px); } .navbar .container { display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: 10px; } .site-logo-img { display: block; width: 125px; height: auto; } .nav-logo-img { transition: width .3s var(--ease); } .navbar.scrolled .nav-logo-img { width: 160px; } .nav-logo-text { display: flex; flex-direction: column; } .nav-logo-main { font-family: var(--font-sans); font-weight: 900; font-size: 1rem; color: var(--white); line-height: 1; letter-spacing: -.3px; } .nav-logo-main span { color: var(--red); } .nav-logo-sub { font-family: var(--font-mono); font-size: .56em; color: rgba(255,255,255,.6); letter-spacing: .1em; margin-top: 2px; } .nav-links { display: flex; align-items: center; gap: .2rem; list-style: none; } .nav-links a { font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.75); padding: .45rem .75rem; transition: color .2s, background .2s; } .nav-links a:hover { color: var(--white); background: rgba(255,255,255,.08); } .nav-links a.active { color: var(--gold) !important; border-bottom: 2px solid var(--gold); padding-bottom: calc(.45rem - 2px); } .nav-cta { background: var(--red) !important; color: var(--white) !important; font-weight: 700 !important; box-shadow: 3px 3px 0 var(--red-d) !important; } .nav-cta:hover { transform: translate(1px,1px) !important; box-shadow: 2px 2px 0 var(--red-d) !important; } /* ── Mobile hamburger: framed pixel button with bars that morph to an X ── */ .hamburger { display: none; align-items: center; justify-content: center; width: 46px; height: 40px; padding: 0; cursor: pointer; z-index: 1003; background: rgba(255,255,255,.05); border: 2px solid var(--red); box-shadow: 3px 3px 0 var(--red-d); transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .25s var(--ease); -webkit-tap-highlight-color: transparent; } .hamburger:hover { background: rgba(192,57,43,.18); } .hamburger:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--red-d); } .hamburger:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .hamburger-box { position: relative; display: block; width: 24px; height: 16px; } .hamburger-bar { position: absolute; left: 0; width: 24px; height: 4px; background: var(--red); transition: top .26s var(--ease), transform .26s var(--ease), background .25s var(--ease), opacity .15s var(--ease); } .hamburger-bar:nth-child(1) { top: 0; } .hamburger-bar:nth-child(2) { top: 6px; } .hamburger-bar:nth-child(3) { top: 12px; } /* Open state: button fills solid red, bars snap into a white X */ .hamburger.is-open { background: var(--red); border-color: var(--red); } .hamburger.is-open .hamburger-bar { background: var(--white); } .hamburger.is-open .hamburger-bar:nth-child(1) { top: 6px; transform: rotate(45deg); } .hamburger.is-open .hamburger-bar:nth-child(2) { opacity: 0; } .hamburger.is-open .hamburger-bar:nth-child(3) { top: 6px; transform: rotate(-45deg); } /* Dimmed backdrop behind the mobile drawer */ .nav-overlay { position: fixed; inset: 0; z-index: 1001; background: rgba(6,6,12,.82); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } .nav-overlay.open { opacity: 1; pointer-events: auto; } /* ── HERO ── */ .hero { position: relative; min-height: 100vh; background: var(--navy); display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,180,216,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(0,180,216,.055) 1px,transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse 85% 85% at 50% 50%,black 30%,transparent 100%); } .hero-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; } .hero-orb-1 { width: 600px; height: 600px; background: rgba(192,57,43,.18); top: -200px; right: -100px; } .hero-orb-2 { width: 400px; height: 400px; background: rgba(0,180,216,.10); bottom: 50px; left: -100px; } .hero-content { position: relative; z-index: 2; padding: 9rem 0 5rem; } .hero-inner { padding-left: 3rem; max-width: 700px; } .hero-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(192,57,43,.18); border: 1px solid rgba(192,57,43,.4); padding: .35rem 1rem; margin-bottom: 2rem; } .hero-badge-dot { width: 6px; height: 6px; background: var(--red-l); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} } .hero-badge-text { font-family: var(--font-mono); font-size: .7rem; color: var(--red-l); letter-spacing: .12em; } .hero-eyebrow { font-family: var(--font-mono); font-size: .78rem; color: var(--cyan); letter-spacing: .22em; text-transform: uppercase; margin-bottom: .75rem; } .hero-title { font-family: var(--font-serif); font-size: clamp(3.5rem,8vw,6.5rem); font-weight: 700; color: var(--white); line-height: 1; margin-bottom: .5rem; -webkit-font-smoothing: none; } .hero-title-accent { color: var(--red-l); } .hero-sub { font-family: var(--font-serif); font-size: clamp(1.1rem,2vw,1.5rem); color: var(--gold); font-style: italic; margin-bottom: 1rem; } .hero-jp { font-family:var(--font-serif);font-size:.92rem;color:var(--gold);letter-spacing:.22em;margin-bottom:.35rem; } .hero-location { font-family:var(--font-mono);font-size:.8rem;color:var(--gold);letter-spacing:.12em;margin-bottom:2rem;opacity:.75; } .hero-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2.25rem; } .hero-meta-item { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: rgba(255,255,255,.6); } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 4rem; } .hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; max-width: 360px; } .hero-stat { border-top: 2px solid rgba(255,255,255,.15); padding-top: .85rem; } .hero-stat-num { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 700; color: var(--white); line-height: 1; } .hero-stat-num span { color: var(--red-l); } .hero-stat-label { font-size: .67rem; color: rgba(255,255,255,.4); margin-top: .2rem; } .hero-countdown { position: absolute; top: 50%; right: 5%; transform: translateY(-50%); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); padding: 1.75rem; text-align: center; min-width: 210px; backdrop-filter: blur(8px); } .countdown-label { font-family: var(--font-mono); font-size: .72rem; color: var(--gold); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; text-align: left; } .countdown-label img.emoji-icon { width: 2.8em; height: 2.8em; vertical-align: -1em; margin-right: .2em; } .countdown-stack { display: flex; flex-direction: column; gap: .85rem; } .countdown-block { padding-left: .5rem; } .countdown-block + .countdown-block { border-top: 1px solid rgba(255,255,255,.08); padding-top: .75rem; } .countdown-name { font-size: .82rem; color: rgba(255,255,255,.82); text-align: left; line-height: 1.35; margin-bottom: .45rem; } .countdown-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .6rem; } .countdown-item { background: rgba(0,0,0,.25); padding: .75rem .4rem; } .countdown-num { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 700; color: var(--white); line-height: 1; } .countdown-unit { font-size: .58rem; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .1em; margin-top: .2rem; } /* ── SECTION BACKGROUNDS ── */ .sec-light { background: var(--washi); } .sec-light-alt { background: var(--washi-d); } .sec-white { background: var(--white); border-top: 1px solid var(--g200); border-bottom: 1px solid var(--g200); } .sec-dark { background: var(--navy); color: var(--white); position: relative; overflow: hidden; } /* ── ABOUT ── */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .about-card-stack { position: relative; height: 400px; } .acard { position: absolute; background: var(--white); border: 1px solid var(--g200); border-radius: 4px; padding: 1.5rem; box-shadow: var(--shadow-md); } .acard-1 { width: 270px; top: 0; left: 0; border-top: 4px solid var(--red); } .acard-2 { width: 255px; top: 95px; right: 0; border-top: 4px solid var(--cyan); } .acard-3 { width: 245px; bottom: 20px; left: 40px; border-top: 4px solid var(--gold); } .acard-icon { font-size: 1.75rem; margin-bottom: .6rem; } .acard-title { font-weight: 700; font-size: .9rem; color: var(--navy); margin-bottom: .35rem; } .acard-text { font-size: .75rem; color: var(--g600); line-height: 1.55; } .about-features { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.75rem; } .about-feature { display: flex; gap: .85rem; align-items: flex-start; } .about-feat-icon { width: 40px; height: 40px; flex-shrink: 0; background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.15); display: flex; align-items: center; justify-content: center; font-size: 1rem; border-radius: 4px; } .about-feat-title { font-weight: 600; font-size: .9rem; color: var(--navy); margin-bottom: .15rem; } .about-feat-text { font-size: .8rem; color: var(--g600); line-height: 1.55; } /* ── ABOUT SUBSCRIBE BAND ── */ .about-subscribe { margin-top: 4.5rem; padding-top: 3.25rem; border-top: 1px solid var(--g300); display: flex; flex-direction: column; align-items: center; text-align: center; } .subscribe-icon { width: 44px; height: 44px; object-fit: contain; margin-bottom: 1.1rem; } .about-subscribe .section-label { color: var(--gold-d); margin-bottom: .5rem; } .subscribe-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; line-height: 1.25; color: var(--navy); margin-bottom: .55rem; } .subscribe-sub { font-size: .92rem; color: var(--g600); line-height: 1.65; max-width: 560px; margin-bottom: 1.75rem; } /* ── DATES ── */ .dates-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1.5rem; } .timeline { position: relative; display: flex; flex-direction: column; } .timeline::before { content: ''; position: absolute; left: 148px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom,var(--red),var(--cyan),var(--gold)); opacity: .12; } /* scroll-drawn progress line — height driven by JS via --tl-line */ .timeline::after { content: ''; position: absolute; left: 148px; top: 0; width: 2px; height: var(--tl-line, 0px); background: linear-gradient(to bottom,var(--red),var(--cyan),var(--gold)); background-size: 100% var(--tl-h, 100%); opacity: .8; } .tl-item { display: grid; grid-template-columns: 148px 36px 1fr; gap: 0 1.25rem; align-items: center; padding: .9rem 0; transition: opacity .45s ease; } .tl-item:not(.tl-lit) { opacity: .45; } .tl-item:not(.tl-lit) .tl-dot { filter: grayscale(.7); } .tl-item.tl-lit .tl-dot { animation: tl-pop .45s var(--ease); } @keyframes tl-pop { 50% { transform: scale(1.22); } } /* pulsing glow on the nearest upcoming deadline */ .tl-item.tl-next .tl-dot { --glow: 231,76,60; animation: tl-glow 2.2s ease-in-out infinite; } .tl-item.tl-next .tl-dot.c { --glow: 0,180,216; } .tl-item.tl-next .tl-dot.g { --glow: 201,168,76; } .tl-item.tl-next.tl-lit .tl-dot { animation: tl-pop .45s var(--ease), tl-glow 2.2s ease-in-out .45s infinite; } @keyframes tl-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(var(--glow), .22), 0 0 12px 2px rgba(var(--glow), .30); } 50% { box-shadow: 0 0 0 9px rgba(var(--glow), .10), 0 0 24px 7px rgba(var(--glow), .55); } } .tl-date { text-align: right; font-family: var(--font-mono); font-size: .7rem; color: rgba(255,255,255,.4); line-height: 1.4; } .tl-date strong { display: block; font-size: .8rem; color: var(--gold); } .tl-dot { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--red); background: var(--navy); display: flex; align-items: center; justify-content: center; font-size: .8rem; position: relative; z-index: 1; flex-shrink: 0; } .tl-dot.active { background: var(--red); box-shadow: 0 0 0 6px rgba(192,57,43,.2); } .tl-dot.c { border-color: var(--cyan); } .tl-dot.c.active { background: var(--cyan); box-shadow: 0 0 0 6px rgba(0,180,216,.2); } .tl-dot.g { border-color: var(--gold); } .tl-dot.g.active { background: var(--gold); box-shadow: 0 0 0 6px rgba(201,168,76,.2); } .tl-content { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); padding: .9rem 1.1rem; transition: background .2s; } .tl-content:hover { background: rgba(255,255,255,.07); } .tl-title { font-weight: 600; font-size: .88rem; margin-bottom: .15rem; } .tl-desc { font-size: .75rem; color: rgba(255,255,255,.45); } /* ── ADD TO CALENDAR BUTTONS ── */ .cal-all-btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-sans); font-size: .78rem; font-weight: 700; cursor: pointer; color: var(--white); background: var(--red); border: 2px solid var(--red); padding: .55rem 1.15rem; box-shadow: 4px 4px 0 var(--red-d); transition: transform .1s var(--ease), box-shadow .1s var(--ease); } .cal-all-btn:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--red-d); } .cal-all-btn:active { transform: translate(4px,4px); box-shadow: none; } .cal-all-btn .cal-ico { width: 18px; height: 18px; object-fit: contain; } /* Per-event button: on the right of the bar on desktop, vertically centered. */ .tl-content { position: relative; padding-right: 11rem; } .cal-item-btn { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .03em; color: var(--red-l); white-space: nowrap; background: rgba(231,76,60,.08); border: 1px solid rgba(231,76,60,.3); padding: .35rem .65rem; transition: background .15s, color .15s; } .cal-item-btn:hover { background: rgba(231,76,60,.24); color: var(--red-l); border-color: rgba(231,76,60,.7); } .cal-item-btn img { width: 13px; height: 13px; object-fit: contain; } /* Mobile: stack the button below the text. */ @media (max-width: 640px) { .tl-content { padding-right: 1.1rem; } .cal-item-btn { position: static; transform: none; margin-top: .6rem; } } /* ── CFP (CALL FOR PAPERS) ── */ .submit-header { text-align: center; max-width: 760px; margin: 0 auto 3rem; } .submit-header .section-label { color: var(--red); } .submit-header .section-sub { margin-left: auto; margin-right: auto; max-width: 640px; } .submit-header-cue { margin-top: .9rem; font-family: var(--font-mono); font-size: .78rem !important; color: var(--g600); letter-spacing: .04em; } .submit-tracks-new { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 1080px; margin: 0 auto; } .submit-track-new { position: relative; background: var(--white); border: 1px solid var(--g200); border-top: 4px solid var(--red); border-radius: 4px; padding: 1.25rem 1.65rem 1.5rem; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); display: flex; flex-direction: column; overflow: hidden; } /* Dot lattice + accent glow background layer */ .submit-track-art { position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: 3px; } /* Lift text content above the watermark */ .submit-track-head, .submit-track-head-text, .submit-track-title-new, .submit-track-text-new { position: relative; z-index: 1; } /* Per-card: accent-tinted dot lattice + soft corner glow */ .submit-track-new:nth-child(1) .submit-track-art { background-image: radial-gradient(ellipse 70% 60% at 88% 92%, rgba(192,57,43,0.11) 0%, transparent 70%), radial-gradient(circle, rgba(192,57,43,0.07) 1px, transparent 1px); background-size: auto, 20px 20px; } .submit-track-new:nth-child(2) .submit-track-art { background-image: radial-gradient(ellipse 70% 60% at 12% 88%, rgba(0,180,216,0.11) 0%, transparent 70%), radial-gradient(circle, rgba(0,180,216,0.07) 1px, transparent 1px); background-size: auto, 20px 20px; } .submit-track-new:nth-child(3) .submit-track-art { background-image: radial-gradient(ellipse 70% 60% at 88% 92%, rgba(201,168,76,0.13) 0%, transparent 70%), radial-gradient(circle, rgba(201,168,76,0.07) 1px, transparent 1px); background-size: auto, 20px 20px; } .submit-track-new:nth-child(4) .submit-track-art { background-image: radial-gradient(ellipse 70% 60% at 12% 88%, rgba(26,26,46,0.09) 0%, transparent 70%), radial-gradient(circle, rgba(26,26,46,0.06) 1px, transparent 1px); background-size: auto, 20px 20px; } .submit-track-new:nth-child(5) .submit-track-art { background-image: radial-gradient(ellipse 70% 60% at 88% 92%, rgba(192,57,43,0.11) 0%, transparent 70%), radial-gradient(circle, rgba(192,57,43,0.07) 1px, transparent 1px); background-size: auto, 20px 20px; } .submit-track-new:nth-child(6) .submit-track-art { background-image: radial-gradient(ellipse 70% 60% at 12% 88%, rgba(201,168,76,0.13) 0%, transparent 70%), radial-gradient(circle, rgba(201,168,76,0.07) 1px, transparent 1px); background-size: auto, 20px 20px; } .submit-track-new::before { content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-top: 4px solid var(--red); border-left: 4px solid var(--red); pointer-events: none; } .submit-track-new:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } /* Color cycle: red → cyan → gold → navy → red → gold */ .submit-track-new:nth-child(1) { border-top-color: var(--red); } .submit-track-new:nth-child(2) { border-top-color: var(--cyan); } .submit-track-new:nth-child(2)::before { border-top-color: var(--cyan); border-left-color: var(--cyan); } .submit-track-new:nth-child(3) { border-top-color: var(--gold); } .submit-track-new:nth-child(3)::before { border-top-color: var(--gold); border-left-color: var(--gold); } .submit-track-new:nth-child(4) { border-top-color: var(--navy); } .submit-track-new:nth-child(4)::before { border-top-color: var(--navy); border-left-color: var(--navy); } .submit-track-new:nth-child(5) { border-top-color: var(--red); } .submit-track-new:nth-child(6) { border-top-color: var(--gold); } .submit-track-new:nth-child(6)::before { border-top-color: var(--gold); border-left-color: var(--gold); } .submit-track-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; } .submit-track-head-text { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; min-width: 0; flex: 1; } .submit-track-num { font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--red); background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.18); padding: .28rem .6rem; border-radius: 2px; line-height: 1; } .submit-track-new:nth-child(2) .submit-track-num { color: #0096B7; background: rgba(0,180,216,.10); border-color: rgba(0,180,216,.22); } .submit-track-new:nth-child(3) .submit-track-num { color: var(--gold-d); background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.25); } .submit-track-new:nth-child(4) .submit-track-num { color: var(--navy); background: rgba(26,26,46,.07); border-color: rgba(26,26,46,.18); } .submit-track-new:nth-child(5) .submit-track-num { color: var(--red); background: rgba(192,57,43,.08); border-color: rgba(192,57,43,.18); } .submit-track-new:nth-child(6) .submit-track-num { color: var(--gold-d); background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.25); } .submit-track-icon-new { height: 70px; width: auto; display: block; flex-shrink: 0; filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.18)); } .submit-track-title-new { font-family: var(--font-serif); font-weight: 700; font-size: 1.22rem; color: var(--navy); line-height: 1.25; margin: 0; } .submit-track-text-new { font-size: .9rem; color: var(--g600); line-height: 1.65; flex: 1; } .submit-actions { margin-top: 3rem; display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; } /* Submission guidelines footer band — dark anchor */ .submit-meta { max-width: 1080px; margin: 3rem auto 0; padding: 1.6rem 1.75rem 1.4rem; background: var(--navy); border: 1px solid var(--navy); border-radius: 4px; border-top: 2px solid var(--red); box-shadow: var(--shadow-md); position: relative; color: rgba(255,255,255,.85); } .submit-meta::before { content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); pointer-events: none; } .submit-meta-title { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red-l); margin-bottom: 1.1rem; } .submit-meta-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px dashed rgba(255,255,255,.18); } .submit-meta-item { display: flex; flex-direction: column; gap: .3rem; padding-right: 1rem; border-right: 1px solid rgba(255,255,255,.12); } .submit-meta-item:last-child { border-right: none; padding-right: 0; } .submit-meta-label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); line-height: 1.4; } .submit-meta-value { font-family: var(--font-sans); font-size: .85rem; color: var(--white); line-height: 1.35; font-weight: 500; } .submit-meta-value strong { font-family: var(--font-mono); font-size: .95rem; color: var(--red-l); font-weight: 700; letter-spacing: .02em; } .submit-meta-note { margin-top: 1rem; font-size: .75rem; color: rgba(255,255,255,.6); font-style: italic; line-height: 1.5; } .submit-meta-award { margin-top: .55rem; font-family: var(--font-serif); font-size: .85rem; color: var(--gold); font-weight: 700; line-height: 1.4; } /* ════════════════════════════════════════════════════ KEYNOTE SPEAKERS - Light washi background - 1:1 square photo with red pixel frame + brackets - Click to expand biography + talk description ════════════════════════════════════════════════════ */ .keynote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .k-card { background: var(--white); border: 1px solid var(--g200); border-radius: 4px; box-shadow: var(--shadow-sm); transition: box-shadow .25s, transform .25s; overflow: visible; position: relative; } .k-card { cursor: pointer; } .k-card:hover:not(.expanded) { box-shadow: var(--shadow-md); transform: translateY(-3px); } .k-card.expanded { box-shadow: var(--shadow-lg); } /* Photo wrap + frame */ .k-photo-wrap { position: relative; padding: 10px; background: var(--white); } .k-photo-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; /* SQUARE everywhere */ overflow: hidden; outline: 3px solid var(--red); clip-path: polygon( 0 8px,8px 8px,8px 0, calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px, 100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px), 0 calc(100% - 8px) ); } .k-photo-img { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } /* real person photo inside k-photo-frame or org-photo-frame */ .person-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* corner brackets */ .k-bracket { position: absolute; width: 14px; height: 14px; z-index: 2; } .k-bracket-tl { top: 4px; left: 4px; border-top: 3px solid var(--red); border-left: 3px solid var(--red); } .k-bracket-tr { top: 4px; right: 4px; border-top: 3px solid var(--red); border-right: 3px solid var(--red); } .k-bracket-bl { bottom: 4px; left: 4px; border-bottom: 3px solid var(--red); border-left: 3px solid var(--red); } .k-bracket-br { bottom: 4px; right: 4px; border-bottom: 3px solid var(--red); border-right: 3px solid var(--red); } /* info */ .k-info { padding: 1rem 1.1rem .85rem; } .k-tag { margin-bottom: .55rem; } .k-name { font-family: var(--font-serif); font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: .15rem; line-height: 1.3; } .k-affil { font-size: .72rem; color: var(--g600); margin-bottom: .15rem; } .k-topic { font-size: .75rem; color: var(--red); font-weight: 600; font-style: italic; margin-bottom: .75rem; line-height: 1.4; } /* expand button */ .k-expand-btn { display: flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .62rem; font-weight: 700; color: var(--red); cursor: pointer; border: none; background: none; padding: .35rem 0; letter-spacing: .08em; text-transform: uppercase; transition: color .2s; } .k-expand-btn:hover { color: var(--red-d); } .k-expand-icon { font-size: .7rem; transition: transform .3s; display: inline-block; } .k-card.expanded .k-expand-icon { transform: rotate(180deg); } /* bio panel */ .k-bio-panel { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(0.4,0,0.2,1), opacity .3s; opacity: 0; } .k-card.expanded .k-bio-panel { max-height: 700px; opacity: 1; border-top: 1px solid var(--g200); } .k-bio-inner { padding: 1.1rem; } .k-bio-section-label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: .4rem; } .k-bio-text { font-size: .8rem; color: var(--g600); line-height: 1.7; margin-bottom: 1rem; } .k-talk-title { font-weight: 700; font-size: .85rem; color: var(--navy); margin-bottom: .35rem; line-height: 1.4; } .k-talk-abstract { font-size: .78rem; color: var(--g600); line-height: 1.65; } .k-bio-divider { height: 1px; background: var(--g200); margin: .85rem 0; } /* TBA card */ .k-tba { grid-column: 1 / -1; background: var(--white); border: 2px dashed var(--g300); border-radius: 4px; text-align: center; padding: 2.5rem; } .k-tba p { color: var(--g600); font-size: .88rem; margin-bottom: 1rem; } /* photo gradients */ .photo-1 { background: linear-gradient(165deg,#2C3E50 0%,#3B6FA0 60%,#1A1A2E 100%); } .photo-2 { background: linear-gradient(165deg,#6B2737 0%,#B83232 60%,#2A1A1A 100%); } .photo-3 { background: linear-gradient(165deg,#1A3A4A 0%,#0096B7 60%,#0F2030 100%); } .photo-4 { background: linear-gradient(165deg,#3D2B1F 0%,#A07830 60%,#2A1A0A 100%); } .photo-5 { background: linear-gradient(165deg,#1F3D2B 0%,#28A060 60%,#0A1F14 100%); } .photo-6 { background: linear-gradient(165deg,#3D1F3D 0%,#8030A0 60%,#1A0A2A 100%); } /* silhouette placeholder */ .sil { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; } .sil-h { border-radius: 50%; background: rgba(255,255,255,.25); } .sil-b { background: rgba(255,255,255,.15); border-radius: 3px 3px 0 0; } /* ════════════════════════════════════════════════════ ORGANIZERS - White background - Same 1:1 square photo + red frame - Grouped by role ════════════════════════════════════════════════════ */ .role-header { display: flex; align-items: center; gap: .85rem; margin: 2rem 0 1rem; } .role-header-label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g600); white-space: nowrap; flex-shrink: 0; } .role-header-line { flex: 1; height: 1px; background: var(--g200); } .org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1rem; } .org-grid-chairs { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); } .org-card { background: var(--white); border: 1px solid var(--g200); border-radius: 4px; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; } .org-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* Photo: same red frame, same 1:1 ratio */ .org-photo-wrap { position: relative; padding: 8px; background: var(--white); } .org-photo-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; /* SQUARE */ overflow: hidden; outline: 2px solid var(--red); clip-path: polygon( 0 6px,6px 6px,6px 0, calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px, 100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px), 0 calc(100% - 6px) ); } .org-bracket { position: absolute; width: 10px; height: 10px; z-index: 2; } .org-bracket-tl { top: 2px; left: 2px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); } .org-bracket-tr { top: 2px; right: 2px; border-top: 2px solid var(--red); border-right: 2px solid var(--red); } .org-bracket-bl { bottom: 2px; left: 2px; border-bottom: 2px solid var(--red); border-left: 2px solid var(--red); } .org-bracket-br { bottom: 2px; right: 2px; border-bottom: 2px solid var(--red); border-right: 2px solid var(--red); } .org-info { padding: .65rem .75rem .75rem; } .org-name { font-weight: 700; font-size: .78rem; color: var(--navy); line-height: 1.3; margin-bottom: .15rem; } .org-role { font-family: var(--font-mono); font-size: .58rem; color: var(--red); margin-bottom: .12rem; line-height: 1.3; } .org-affil { font-size: .65rem; color: var(--g400); } /* ── VENUE ── */ .venue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .venue-map { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; height: 420px; position: relative; padding: 12px; overflow: hidden; } .venue-map iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: 2px; } .venue-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,180,216,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,216,.04) 1px,transparent 1px); background-size: 28px 28px; } .venue-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; text-align: center; } .venue-pin-dot { width: 18px; height: 18px; background: var(--red); border-radius: 50%; border: 3px solid var(--white); margin: 0 auto; animation: pinpulse 2s ease-in-out infinite; } @keyframes pinpulse { 0%,100%{box-shadow:0 0 0 8px rgba(192,57,43,.25)} 50%{box-shadow:0 0 0 18px rgba(192,57,43,.08)} } .venue-pin-label { position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); background: var(--white); color: var(--navy); font-size: .68rem; font-weight: 700; font-family: var(--font-mono); padding: .3rem .75rem; white-space: nowrap; } .venue-coord { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); padding: .75rem 1rem; } .venue-highlights { display: flex; flex-direction: column; gap: 1rem; } .venue-hl { display: flex; gap: .85rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: 1.1rem; transition: border-color .2s; } .venue-hl:hover { border-color: rgba(192,57,43,.4); } .venue-hl-icon { width: 44px; height: 44px; flex-shrink: 0; background: rgba(192,57,43,.15); border: 1px solid rgba(192,57,43,.25); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .venue-hl-title { font-weight: 600; font-size: .9rem; margin-bottom: .15rem; } .venue-hl-text { font-size: .78rem; color: rgba(255,255,255,.5); line-height: 1.55; } .venue-mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.25rem; } .venue-mini { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: .9rem; text-align: center; } .venue-mini span { font-size: 1.3rem; display: block; margin-bottom: .35rem; } .venue-mini strong { display: block; font-size: .75rem; font-weight: 700; margin-bottom: .1rem; } .venue-mini p { font-size: .68rem; color: rgba(255,255,255,.4); } /* ── VENUE: Collapsible highlight cards ── */ .venue-hl-expandable { cursor: pointer; flex-direction: row; align-items: flex-start; transition: border-color .2s, background .2s, box-shadow .2s; } .venue-hl-expandable:hover { border-color: rgba(192,57,43,.5); background: rgba(255,255,255,.07); } .venue-hl-expandable.open { border-color: rgba(192,57,43,.55); background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px rgba(192,57,43,.15); } .venue-hl-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .2rem; } /* Chevron indicator — highlight cards */ .venue-hl-chevron { font-size: .55rem; color: rgba(255,255,255,.35); flex-shrink: 0; transition: transform .3s var(--ease), color .2s; line-height: 1; user-select: none; } .venue-hl-expandable:hover .venue-hl-chevron { color: var(--red-l); } .venue-hl-expandable.open .venue-hl-chevron { transform: rotate(180deg); color: var(--red-l); } /* Highlight panel */ .venue-hl-panel { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s cubic-bezier(0.4,0,0.2,1), opacity .3s; } .venue-hl-expandable.open .venue-hl-panel { max-height: 800px; opacity: 1; } .venue-hl-panel-inner { padding: .85rem 0 .25rem; border-top: 1px solid rgba(192,57,43,.25); margin-top: .6rem; } .venue-hl-panel-inner p { font-size: .8rem; color: rgba(255,255,255,.65); line-height: 1.7; } /* ── VENUE: Collapsible mini cards ── */ .venue-mini-expandable { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; } .venue-mini-expandable:hover { border-color: rgba(192,57,43,.5); background: rgba(255,255,255,.07); } .venue-mini-expandable.open { border-color: rgba(192,57,43,.55); background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px rgba(192,57,43,.15); } .venue-mini-top { width: 100%; text-align: center; } /* Chevron indicator — mini cards */ .venue-mini-chevron { font-size: .5rem; color: rgba(255,255,255,.3); margin-top: .4rem; transition: transform .3s var(--ease), color .2s; line-height: 1; user-select: none; } .venue-mini-expandable:hover .venue-mini-chevron { color: var(--red-l); } .venue-mini-expandable.open .venue-mini-chevron { transform: rotate(180deg); color: var(--red-l); } /* Mini panel */ .venue-mini-panel { max-height: 0; overflow: hidden; opacity: 0; width: 100%; transition: max-height .45s cubic-bezier(0.4,0,0.2,1), opacity .3s; } .venue-mini-expandable.open .venue-mini-panel { max-height: 600px; opacity: 1; } .venue-mini-panel-inner { padding: .75rem 0 .1rem; border-top: 1px solid rgba(192,57,43,.25); margin-top: .6rem; text-align: left; } .venue-mini-panel-inner p { font-size: .75rem; color: rgba(255,255,255,.6); line-height: 1.65; } /* ── VENUE: Shared panel elements (links & photos) ── */ .venue-panel-links { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; } .venue-panel-link { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: .65rem; color: var(--cyan); border: 1px solid rgba(0,180,216,.3); padding: .2rem .6rem; text-decoration: none; transition: background .2s, border-color .2s, color .2s; } .venue-panel-link:hover { background: rgba(0,180,216,.12); border-color: var(--cyan); color: var(--white); } .venue-panel-photos { display: grid; grid-template-columns: 1fr; gap: .75rem; margin: .75rem 0 1.1rem; } .venue-panel-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; cursor: default; transition: border-color .2s, filter .2s, transform .2s; } .venue-panel-photo:hover, .venue-panel-photo:focus-visible { border-color: rgba(0,180,216,.75); filter: brightness(1.08); outline: none; } /* ── VENUE: Full-size photo lightbox ── Disabled for now: venue photos should not enlarge when clicked. To restore the feature, uncomment this CSS block, the function in js/ui.js, and the initVenuePhotoLightbox() call in js/includes.js. .venue-photo-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(5,5,12,.9); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); } .venue-photo-lightbox.open { opacity: 1; pointer-events: auto; } .venue-photo-lightbox-inner { position: relative; max-width: min(1100px, 94vw); max-height: 90vh; } .venue-photo-lightbox-img { display: block; max-width: 100%; max-height: 82vh; object-fit: contain; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 24px 80px rgba(0,0,0,.55); } .venue-photo-lightbox-caption { margin-top: .65rem; color: rgba(255,255,255,.72); font-size: .78rem; font-family: var(--font-mono); text-align: center; } .venue-photo-lightbox-close { position: absolute; top: -.9rem; right: -.9rem; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.25); background: var(--red); color: var(--white); font-size: 1.45rem; line-height: 1; cursor: pointer; box-shadow: 3px 3px 0 var(--red-d); } .venue-photo-lightbox-close:hover, .venue-photo-lightbox-close:focus-visible { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--red-d); outline: none; } */ /* ── PROGRAM ── */ .program-tabs-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; } .program-tabs { display: flex; gap: .4rem; flex-wrap: wrap; } .prog-tab { padding: .45rem 1.1rem; font-family: var(--font-mono); font-size: .78rem; font-weight: 600; cursor: pointer; border: 1px solid var(--g300); color: var(--g600); background: var(--white); transition: background .2s, color .2s, border-color .2s; border-radius: 0; } .prog-tab.active, .prog-tab:hover { background: var(--red); border-color: var(--red); color: var(--white); } .prog-pdf-btn { font-family: var(--font-mono); font-size: .95rem; padding: .5rem 1rem; white-space: nowrap; } /* On a very narrow phone the fixed Time/Room/Type columns can make the table wider than the screen. Let the day panel scroll the table internally instead of pushing the whole page wide. */ .prog-day { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sched { width: 100%; border-collapse: collapse; font-size: .85rem; background: var(--white); box-shadow: var(--shadow-sm); } .sched th { text-align: left; padding: .7rem 1rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--g400); border-bottom: 2px solid var(--g200); background: var(--g100); } .sched td { padding: .9rem 1rem; border-bottom: 1px solid var(--g200); vertical-align: top; } .sched tr:last-child td { border-bottom: none; } .sched tr:hover td { background: rgba(192,57,43,.03); } .sched-time { font-family: var(--font-mono); font-size: .75rem; color: var(--gold-d); white-space: nowrap; width: 110px; font-weight: 600; } .sched-title { font-weight: 600; color: var(--navy); margin-bottom: .15rem; } .sched-detail { font-size: .73rem; color: var(--g600); margin-bottom: .2rem; } .sched-speaker-info { display: none; margin-top: .35rem; padding: .3rem .6rem; background: rgba(192,57,43,.05); border-left: 2px solid var(--red); border-radius: 2px; } .sched-spk-name { display: block; font-weight: 700; font-size: .78rem; color: var(--navy); line-height: 1.3; } .sched-spk-affil { display: block; font-size: .7rem; color: var(--g600); font-style: italic; margin-top: .1rem; } .sched-venue-th { width: 80px; } .sched-venue { font-family: var(--font-mono); font-size: .73rem; color: var(--g600); white-space: nowrap; width: 80px; } /* Keep Room and Type columns tight against the right edge */ .sched th:last-child, .sched td:last-child { width: 1%; white-space: nowrap; } /* Expandable schedule rows */ .sched-expandable { cursor: pointer; } .sched-expandable:hover td { background: rgba(192,57,43,.06) !important; } .sched-chevron { display: inline-block; font-size: .6rem; color: var(--red); margin-right: .35rem; transition: transform .25s var(--ease); vertical-align: middle; } .sched-expandable.open .sched-chevron { transform: rotate(90deg); } .sched-subrow { display: none; } .sched-subrow.open { display: table-row; } .sched-subrow td { padding: 0; border-bottom: 1px solid var(--g200); } .sched-subrow-inner { overflow: hidden; max-height: 0; transition: max-height .35s var(--ease), padding .35s var(--ease); padding: 0 1rem; background: var(--g100); border-left: 3px solid var(--cyan); } .sched-subrow.open .sched-subrow-inner { max-height: 600px; padding: .75rem 1rem; } .sched-sublist { list-style: none; display: flex; flex-direction: column; gap: .4rem; } .sched-sublist li { font-size: .78rem; color: var(--g800); line-height: 1.5; display: flex; align-items: baseline; gap: .6rem; } .sched-sub-time { font-family: var(--font-mono); font-size: .68rem; color: var(--gold-d); white-space: nowrap; flex-shrink: 0; min-width: 2.8rem; } /* ── SPONSORS ── */ .sponsor-header { text-align: center; } .sponsor-header .section-sub { margin-left: auto; margin-right: auto; } .sponsor-tier-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g400); display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; } .sponsor-tier-label img.medal-icon { width: 42px; height: 42px; } .sponsor-tier-label.tier-gold, .sponsor-tier-label.tier-silv, .sponsor-tier-label.tier-brnz { font-size: .78rem; font-weight: 700; } .sponsor-tier-label.tier-gold { font-size: .95rem; } .sponsor-tier-label.tier-gold span.tier-name { position: relative; background: linear-gradient(100deg, #A5823B 0%, #A5823B 42%, #C9A84C 46%, #F7E7B0 50%, #C9A84C 54%, #A5823B 58%, #A5823B 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: var(--gold-d); -webkit-text-fill-color: transparent; animation: gold-shimmer 4s linear infinite; } /* one-way flare sweep (~3.2s), short rest, repeat */ @keyframes gold-shimmer { 0% { background-position: 100% 0; } 80% { background-position: 0% 0; } 100% { background-position: 0% 0; } } /* sparkles popping as the flare reaches the end of the text */ .sponsor-tier-label.tier-gold span.tier-name::before, .sponsor-tier-label.tier-gold span.tier-name::after { content: '\2726'; position: absolute; background: none; color: #FFD966; -webkit-text-fill-color: #FFD966; opacity: 0; pointer-events: none; text-shadow: 0 0 6px rgba(255,220,120,.8); } .sponsor-tier-label.tier-gold span.tier-name::before { font-size: .85em; right: -1.15em; top: -.55em; animation: gold-sparkle-a 4s linear infinite; } .sponsor-tier-label.tier-gold span.tier-name::after { font-size: .6em; right: -2.5em; bottom: -.35em; color: #FFF3C2; -webkit-text-fill-color: #FFF3C2; animation: gold-sparkle-b 4s linear infinite; } @keyframes gold-sparkle-a { 0%, 72% { opacity: 0; transform: scale(.2) rotate(0deg); } 81% { opacity: 1; transform: scale(1.3) rotate(25deg); } 92%, 100% { opacity: 0; transform: scale(.25) rotate(50deg); } } @keyframes gold-sparkle-b { 0%, 78% { opacity: 0; transform: scale(.2) rotate(0deg); } 87% { opacity: 1; transform: scale(1.2) rotate(-20deg); } 97%, 100% { opacity: 0; transform: scale(.2) rotate(-40deg); } } .sponsor-tier-label.tier-gold::before { background: linear-gradient(90deg, transparent, var(--gold)); } .sponsor-tier-label.tier-gold::after { background: linear-gradient(90deg, var(--gold), transparent); } .sponsor-tier-label.tier-silv { color: #97A3B4; } .sponsor-tier-label.tier-silv::before { background: linear-gradient(90deg, transparent, #B9C2CE); } .sponsor-tier-label.tier-silv::after { background: linear-gradient(90deg, #B9C2CE, transparent); } .sponsor-tier-label.tier-brnz { color: #B4703A; } .sponsor-tier-label.tier-brnz::before { background: linear-gradient(90deg, transparent, #C98F5E); } .sponsor-tier-label.tier-brnz::after { background: linear-gradient(90deg, #C98F5E, transparent); } .sponsor-tier-label::before, .sponsor-tier-label::after { content: ''; flex: 1; height: 1px; background: var(--g200); } .sponsor-row { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-bottom: 2.5rem; } .sponsor-slot { background: var(--g100); border: 2px dashed var(--g300); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: .68rem; color: var(--g400); transition: border-color .2s, color .2s; cursor: pointer; border-radius: 4px; } .sponsor-slot:hover { border-color: var(--red); color: var(--red); } .slot-gold { width: 260px; height: 90px; border-color: #DFC98A; background: #FCF8EE; box-shadow: 0 0 0 5px rgba(201,168,76,.10), 0 4px 14px rgba(201,168,76,.16); } .slot-gold:hover { border-color: var(--gold-d); color: var(--gold-d); } .slot-silv { width: 190px; height: 72px; } .slot-brnz { width: 150px; height: 58px; } /* ── REGISTRATION ── */ .reg-section { position: relative; overflow: hidden; text-align: center; padding: 6rem 0; background: linear-gradient(135deg,var(--navy) 0%,var(--navy-l) 100%); } .reg-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 100%,rgba(192,57,43,.25),transparent); } .reg-content { position: relative; z-index: 1; } .reg-title { font-family: var(--font-serif); font-size: clamp(1.7rem,3.5vw,2.8rem); font-weight: 700; color: var(--white); margin-bottom: .85rem; } .reg-sub { color: rgba(255,255,255,.55); font-size: .95rem; max-width: 480px; margin: 0 auto 2.5rem; } .reg-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; max-width: 1100px; margin: 0 auto 1.5rem; } .reg-card { flex: 0 1 320px; width: 100%; text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 1.25rem; transition: transform .2s, background .2s, border-color .2s; clip-path: polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px)); cursor: pointer; appearance: none; -webkit-appearance: none; } .reg-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); } .reg-card.featured { border-color: var(--red); background: rgba(192,57,43,.15); } .reg-type { font-family: var(--font-mono); font-size: .62rem; color: var(--gold); letter-spacing: .15em; margin-bottom: .85rem; } .reg-prices { display: grid; grid-template-columns: repeat(2,1fr); gap: .8rem; } .reg-price-block { background: rgba(0,0,0,.14); border: 1px solid rgba(255,255,255,.08); padding: .75rem .8rem; } .reg-price-label { font-family: var(--font-mono); font-size: .58rem; color: rgba(255,255,255,.45); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .35rem; } .reg-price { font-family: var(--font-mono); font-size: 1.55rem; font-weight: 700; color: var(--white); line-height: 1.1; } .reg-note { font-size: .72rem; color: rgba(255,255,255,.4); margin-top: .9rem; } .reg-selected-line { font-family: var(--font-mono); font-size: .78rem; color: rgba(255,255,255,.65); margin: 0 auto 1.75rem; } .reg-selected-line span { color: var(--gold); font-weight: 700; } .reg-card.selected { border-color: var(--red); background: rgba(192,57,43,.15); } .reg-card.selected .reg-type, .reg-card.selected .reg-price-label, .reg-card.selected .reg-note { color: var(--white); } .reg-card.selected .reg-price { color: var(--white); } /* ── AKABEKO ── */ .aka-section { background: var(--navy); padding: 5rem 0 0; text-align: center; position: relative; overflow: hidden; } .aka-inner { position: relative; z-index: 1; } .aka-title-label { font-family: var(--font-mono); font-size: .68rem; color: var(--red-l); letter-spacing: .22em; text-transform: uppercase; margin-bottom: .5rem; } .aka-subtitle { font-size: .82rem; color: rgba(255,255,255,.35); font-family: var(--font-mono); margin-bottom: 2.5rem; } .dialogue { display: inline-block; text-align: left; background: var(--navy); border: 3px solid rgba(255,255,255,.2); padding: 1rem 1.25rem; max-width: 440px; margin: 0 auto 1.5rem; font-family: var(--font-mono); font-size: .82rem; line-height: 1.7; color: var(--white); clip-path: polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px)); } .dlg-cursor { display: inline-block; width: 7px; height: 13px; background: var(--white); animation: blink-fast .8s step-end infinite; vertical-align: middle; margin-left: 2px; } .dlg-btn { font-family: var(--font-mono); font-size: .75rem; font-weight: 700; padding: .5rem 1.2rem; border: none; cursor: pointer; transition: transform .1s, box-shadow .1s; } .dlg-btn-r { background: var(--red); color: white; box-shadow: 3px 3px 0 var(--red-d); } .dlg-btn-r:hover { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--red-d); } .dlg-btn-g { background: transparent; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.2); box-shadow: none; } .dlg-btn-g:hover { color: white; } /* ── FOOTER ── */ .footer { background: #0D0D1A; padding: 4rem 0 0; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.07); } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: .85rem; } .footer-logo-img { width: 135px; } .footer-partner-logos { display: flex; align-items: flex-start; gap: 1.5rem; margin: 1.2rem 0 1.5rem; } .footer-partner-logo-column { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; } .footer-partner-logo { width: 185px; max-height: 76px; object-fit: contain; object-position: left center; } .footer-partner-logo-wide { width: 210px; } .footer-partner-logo-cis { width: 135px; } .footer-desc { font-size: .8rem; color: rgba(255,255,255,.4); line-height: 1.7; margin-bottom: 1.5rem; } .footer-social { display: flex; gap: .6rem; } .footer-social a { width: 34px; height: 34px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: .85rem; color: rgba(255,255,255,.45); transition: background .2s, color .2s, border-color .2s; } .footer-social a:hover { background: var(--red); color: var(--white); border-color: var(--red); } .footer-col-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--white); margin-bottom: 1.1rem; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: .55rem; } .footer-links a { font-size: .78rem; color: rgba(255,255,255,.4); transition: color .2s; } .footer-links a:hover { color: var(--white); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; flex-wrap: wrap; gap: 1rem; } .footer-bottom-text { font-size: .72rem; color: rgba(255,255,255,.25); } .scroll-top { position: fixed; bottom: 1.75rem; right: 1.75rem; width: 44px; height: 44px; background: var(--red); border: none; cursor: pointer; font-size: 1rem; color: var(--white); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; box-shadow: 3px 3px 0 var(--red-d); z-index: 999; } .scroll-top.show { opacity: 1; transform: translateY(0); } .scroll-top:hover { transform: translateY(-2px); } .ach-toast { display: flex; align-items: center; gap: .75rem; background: rgba(13,13,26,.97); border: 2px solid var(--gold); padding: .75rem 1rem; font-family: var(--font-mono); animation: slideIn .35s ease; } @keyframes slideIn { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} } .ach-icon { font-size: 1.35rem; } .ach-label { font-size: .58rem; color: var(--gold); letter-spacing: .15em; } .ach-name { font-size: .78rem; font-weight: 700; color: var(--white); } /* ── Footer achievements bar (compact, single line) ── */ .ach-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; padding: 1rem 0 .25rem; border-top: 1px solid rgba(255,255,255,.07); } .ach-bar-label { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); } .ach-bar-track { width: 120px; height: 3px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; } .ach-bar-fill { display: block; height: 100%; width: 0; background: var(--gold); transition: width .45s var(--ease); } .ach-bar-count { font-family: var(--font-mono); font-size: .68rem; color: rgba(255,255,255,.5); } .ach-bar-icons { display: flex; align-items: center; gap: .35rem; font-size: 1.1rem; } .ach-mini { display: inline-flex; line-height: 0; transition: transform .2s var(--ease); } .ach-mini:hover { transform: translateY(-2px) scale(1.12); } .ach-mini img.emoji-icon { width: 1.25em; height: 1.25em; vertical-align: middle; } /* Final (Veteran) slot: revealed after all 6 base, dimmed + pulsing until earned */ .ach-mini-locked { opacity: .6; animation: achPulse 1.7s var(--ease) infinite; } .ach-mini-locked img.emoji-icon { filter: grayscale(1) brightness(1.4); } @keyframes achPulse { 0%,100% { opacity: .4; transform: translateY(0); } 50% { opacity: .95; transform: translateY(-1px); } } /* ═══════════════════════════════════════════════ AKABEKO RELIC — hidden Slay the Spire Easter egg ═══════════════════════════════════════════════ */ .relic-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(13,13,26,.74); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); } .relic-overlay.is-open { opacity: 1; pointer-events: auto; } .relic-card { position: relative; width: min(340px, 92vw); text-align: center; background: linear-gradient(180deg, var(--washi) 0%, var(--washi-d) 100%); border: 2px solid var(--gold); padding: 1.6rem 1.5rem 1.5rem; box-shadow: var(--shadow-lg), 0 0 0 6px rgba(201,168,76,.15); transform: translateY(14px) scale(.94); opacity: 0; transition: transform .32s var(--ease), opacity .32s var(--ease); clip-path: polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px)); } .relic-overlay.is-open .relic-card { transform: translateY(0) scale(1); opacity: 1; } .relic-label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: .5rem; } .relic-name { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700; color: var(--navy); line-height: 1.1; margin: 0; } .relic-rarity { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); margin: .25rem 0 1.1rem; } .relic-frame { position: relative; margin: 0 auto 1.15rem; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 42%, var(--navy-mid) 0%, var(--navy) 75%); border: 3px solid var(--gold); box-shadow: inset 0 0 0 3px rgba(13,13,26,.6), inset 0 0 26px rgba(0,0,0,.55); } .relic-frame::before, .relic-frame::after { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--gold-d); } .relic-frame::before { top: 5px; left: 5px; border-right: none; border-bottom: none; } .relic-frame::after { bottom: 5px; right: 5px; border-left: none; border-top: none; } .relic-art { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); animation: breathe 3.2s ease-in-out infinite; } .relic-desc { font-family: var(--font-sans); font-size: .9rem; line-height: 1.55; color: var(--g800); margin: 0 auto .95rem; max-width: 260px; } .relic-num { color: var(--cyan-d); font-weight: 800; } .relic-rule { display: block; width: 46px; height: 1.5px; margin: 0 auto .8rem; background: var(--gold-d); opacity: .7; } .relic-flavor { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--gold-d); margin: 0 0 1.1rem; } .relic-hint { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em; color: var(--g600); margin: 0 0 1.25rem; } .relic-hint em { color: var(--red); font-style: normal; } .relic-close { font-family: var(--font-mono); font-size: .74rem; font-weight: 700; letter-spacing: .06em; cursor: pointer; padding: .55rem 1.5rem; border: none; color: var(--white); background: var(--red); box-shadow: 3px 3px 0 var(--red-d); transition: transform .1s, box-shadow .1s; } .relic-close:hover { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--red-d); } /* Cow is only interactive on the final "Click me for a surprise!" line. Off that line it sits still; on it, a soft gold glow invites the click. */ #aka-main { transition: transform .18s var(--ease); } #aka-main.aka-clickable:hover { transform: scale(1.04); } /* Backlight only glows before the relic is collected (aka-glow toggled in JS). */ #aka-main.aka-glow { animation: akaHint 1.9s ease-in-out infinite; } @keyframes akaHint { 0%,100% { filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); } 50% { filter: drop-shadow(0 7px 16px rgba(201,168,76,.55)); } } @media (prefers-reduced-motion: reduce) { #aka-main.aka-glow { animation: none; } } /* Footer relic shelf badge (distinct from the achievement icons) */ .ach-relic-sep { width: 1px; height: 20px; background: rgba(201,168,76,.35); margin: 0 .3rem; } /* Footer relic: a small square plaque — straight edges, a bit larger than the achievement icons, with a slight pale-gold shadow to match the site. */ .ach-relic { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 3px 5px; border: 1px solid var(--gold); border-radius: 0; background: rgba(201,168,76,.10); box-shadow: 0 2px 9px rgba(214,187,116,.45); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .ach-relic img.emoji-icon { width: 1.55em; height: 1.55em; } .ach-relic:hover { transform: translateY(-2px) scale(1.08); border-color: var(--gold); box-shadow: 0 3px 13px rgba(214,187,116,.62); } /* Gold-star salute */ .relic-stars { position: fixed; inset: 0; z-index: 10001; pointer-events: none; } .relic-star { position: fixed; color: var(--gold); text-shadow: 0 0 6px rgba(201,168,76,.8); transform: translate(-50%,-50%); animation: relicStar 1.3s var(--ease) forwards; } @keyframes relicStar { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.05) rotate(var(--rot)); } } @media (prefers-reduced-motion: reduce) { .relic-art { animation: none; } .relic-star { animation-duration: .6s; } .relic-card { transition: opacity .2s; transform: none; } } @media (max-width: 1024px) { .hero-countdown { position: static; transform: none; max-width: 520px; margin-top: 2.5rem; } .about-grid, .submit-grid, .venue-grid { grid-template-columns: 1fr; gap: 2.5rem; } .about-card-stack { display: none; } .about-subscribe { margin-top: 3rem; padding-top: 2.5rem; } .keynote-grid { grid-template-columns: repeat(2,1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } /* Collapsible panels: on narrower screens the text wraps to many more lines, so the desktop open-state max-heights clip the bottom content (e.g. the Visa info in Transport & Accommodation). Raise the open-state caps well above any realistic content height so nothing is cut off. */ .venue-hl-expandable.open .venue-hl-panel { max-height: 3000px; } .venue-mini-expandable.open .venue-mini-panel { max-height: 2200px; } .k-card.expanded .k-bio-panel { max-height: 2200px; } .sched-subrow.open .sched-subrow-inner { max-height: 1800px; } } @media (max-width: 768px) { .section { padding: 4rem 0; } /* Stack the venue attraction cards one per row on phones */ .venue-mini-cards { grid-template-columns: 1fr; } .hero-inner { padding-left: 1rem; } .hero-countdown { margin: 4rem 1rem 0; padding-left: 1rem; } /* ════════ Mobile side-drawer menu ════════ */ /* When the drawer is open, neutralise the navbar's blur so the fixed drawer isn't trapped inside the navbar's box, and lift it above the dim overlay. */ .navbar.menu-open { z-index: 1003; -webkit-backdrop-filter: none; backdrop-filter: none; } /* ════════ Mobile menu — "STAGE SELECT" full-screen pixel grid ════════ A whole-viewport takeover laid out as a 2-column grid. The grid rows are sized with fr units / minmax(0,1fr), so the eight section tiles plus the full-width Register tile always shrink to fit exactly one screen — no scrolling, ever, on any phone. The navbar (logo + hamburger-X) stays on top as the close bar. */ .nav-links { display: grid; position: fixed; inset: 0; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)) auto; gap: clamp(.55rem, 2.4vw, .95rem); z-index: 1002; width: 100%; height: 100vh; height: 100dvh; padding: calc(env(safe-area-inset-top, 0px) + 6.4rem) clamp(1rem, 5vw, 1.6rem) calc(env(safe-area-inset-bottom, 0px) + 1.35rem); list-style: none; overflow: hidden; overscroll-behavior: contain; counter-reset: navnum; background: #0D0D1A; background-image: radial-gradient(circle at 88% 7%, rgba(192,57,43,.17), transparent 45%), radial-gradient(circle at 10% 95%, rgba(0,180,216,.10), transparent 47%), repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0, rgba(255,255,255,.022) 1px, transparent 1px, transparent 42px), repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0, rgba(255,255,255,.022) 1px, transparent 1px, transparent 42px); opacity: 0; visibility: hidden; transform: scale(1.015); transition: opacity .26s var(--ease), transform .3s var(--ease), visibility .3s var(--ease); } .nav-links.open { opacity: 1; visibility: visible; transform: none; } /* "SELECT" eyebrow + pixel rule, sitting just under the navbar top-bar */ .nav-links::before { content: "SELECT"; position: absolute; left: clamp(1rem, 5vw, 1.6rem); right: clamp(1rem, 5vw, 1.6rem); top: calc(env(safe-area-inset-top, 0px) + 4.7rem); padding-bottom: .55rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .42em; color: var(--gold); background-image: repeating-linear-gradient(90deg, var(--red) 0, var(--red) 10px, transparent 10px, transparent 18px); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 3px; } .nav-links li { display: flex; min-width: 0; } .nav-links li > a { width: 100%; } .nav-links a:not(.nav-cta) { counter-increment: navnum; } /* Section tiles — framed pixel buttons with a number above, label below */ .nav-links a:not(.nav-cta) { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: .8rem .85rem .75rem; background: rgba(255,255,255,.035); border: 1.5px solid rgba(201,168,76,.30); box-shadow: 4px 4px 0 rgba(0,0,0,.45); color: rgba(255,255,255,.92); font-size: clamp(1.02rem, 4.6vw, 1.22rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .18s, border-color .18s, color .18s; } .nav-links a:not(.nav-cta)::before { content: counter(navnum, decimal-leading-zero); font-family: var(--font-mono); font-size: .82rem; font-weight: 500; color: var(--gold); opacity: .85; } /* tiny corner pixel — a quiet game-tile accent that lights up on touch */ .nav-links a:not(.nav-cta)::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; background: rgba(201,168,76,.45); transition: background .18s; } .nav-links a:not(.nav-cta):hover, .nav-links a:not(.nav-cta):active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0,0,0,.45); background: rgba(192,57,43,.15); border-color: var(--red); color: var(--white); } .nav-links a:not(.nav-cta):hover::after, .nav-links a:not(.nav-cta):active::after { background: var(--red-l); } /* Active section: gold frame, lit number + corner pixel */ .nav-links a:not(.nav-cta).active { color: var(--gold) !important; background: rgba(192,57,43,.18); border-color: var(--gold); box-shadow: 4px 4px 0 var(--red-d); } .nav-links a:not(.nav-cta).active::before { opacity: 1; color: var(--gold); } .nav-links a:not(.nav-cta).active::after { background: var(--red); } /* Register CTA — full-width pixel button anchoring the grid */ .nav-links li:last-child { grid-column: 1 / -1; } .nav-links .nav-cta { display: flex; align-items: center; justify-content: center; gap: .6rem; height: 100%; min-height: 3rem; padding: .9rem 1.5rem !important; font-size: clamp(1rem, 4.6vw, 1.12rem) !important; letter-spacing: .06em; text-transform: uppercase; border: 2px solid var(--red) !important; box-shadow: 4px 4px 0 var(--red-d) !important; } .nav-links .nav-cta::after { content: "\25B8"; font-weight: 700; } .hamburger { display: flex; } /* Search button is styled in the canonical SITE SEARCH block below, with mobile size twinned to the hamburger in the trailing @media. */ .hero-title { font-size: 3rem; } .timeline::before, .timeline::after { display: none; } .tl-item { grid-template-columns: 1fr; gap: .4rem; } .tl-date { text-align: left; } .tl-dot { display: none; } .submit-tracks-new { grid-template-columns: 1fr; max-width: 100%; } .submit-track-new { padding: 1.35rem 1.4rem 1.3rem; } .submit-actions { margin-top: 2rem; } .submit-meta { padding: 1.25rem 1.25rem 1.1rem; margin-top: 2.25rem; } .submit-meta-grid { grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; } .submit-meta-item { border-right: none; padding-right: 0; } .submit-meta-item:last-child { grid-column: 1 / -1; } .keynote-grid { grid-template-columns: 1fr; } .reg-cards { grid-template-columns: 1fr; max-width: 340px; } .footer-grid { grid-template-columns: 1fr; } .footer-partner-logos { flex-wrap: wrap; align-items: flex-start; } .footer-bottom { flex-direction: column; text-align: center; } } /* ── Emoji icon images ── */ .emoji-icon { width: 1.75em; height: 1.75em; vertical-align: -0.35em; display: inline-block; object-fit: contain; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.22)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.14)); } /* ═══════════════════════════════════════════════ SITE SEARCH — expanding magnifier in the navbar ═══════════════════════════════════════════════ */ .nav-right { display: flex; align-items: center; gap: .5rem; } .nav-search { position: relative; display: flex; align-items: center; } /* Framed pixel button — twins the hamburger's footprint, accented in the search's own cyan so menu (red) + search (cyan) read as a matched pair. */ /* Desktop: a light, compact icon button that sits at text height. The chunky gold pixel frame is added back only on mobile (to twin the hamburger). */ .nav-search-btn { width: 34px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; z-index: 2; background: transparent; border: none; border-radius: 0; box-shadow: none; transition: transform .12s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); -webkit-tap-highlight-color: transparent; } .nav-search-btn:hover { background: rgba(255,255,255,.08); } .nav-search-btn:active { transform: translate(1px,1px); } .nav-search-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Smooth flat-icon magnifier (replaces the old pixel glyph): soft ivory forms on the dark navbar, a translucent muted-blue lens and warm gold ferrule — a quieter, warmer reading that sits with the site's flat-icon family. */ .nav-search-icon { display: block; } .nav-search-icon .ns-frame { fill: #ede7d7; } /* ivory ring */ .nav-search-icon .ns-handle { stroke: #d7c8ab; } /* warm ivory handle */ .nav-search-icon .ns-ferrule { stroke: #ba9551; } /* muted gold band */ .nav-search-icon .ns-glass { fill: rgba(81, 84, 120, 0.813); transition: fill .2s; } /* translucent lens */ .nav-search-icon .ns-shine { stroke: rgba(246,242,232,.70); } /* soft warm highlight */ .nav-search-btn:hover .ns-glass { fill: rgba(55, 111, 144, 0.95); } /* lens warms slightly on hover */ .nav-search.open .nav-search-icon .ns-glass { fill: rgba(0, 180, 216, 0.836); } /* lens clears when search is open */ /* Open / active search: cyan ring + glow around the button, lit magnifier. box-shadow (not border) so the compact desktop button doesn't shift size. */ .nav-search.open .nav-search-btn { background: rgba(0,180,216,.12); box-shadow: 0 0 0 2px var(--cyan), 0 0 14px rgba(0,180,216,.4); } .nav-search.open .nav-search-btn .ns-lens rect { fill: var(--cyan); } .nav-search.open .nav-search-btn .ns-handle rect { fill: var(--cyan); } /* Input expands leftward from the button so it never pushes the nav links. Square pixel field on dark navy; the neon backlight is now structural. */ .nav-search-input { position: absolute; right: 100%; margin-right: .5rem; top: 50%; transform: translateY(-50%); width: 0; opacity: 0; pointer-events: none; background: #0D0D1A; border: 2px solid #0A4E5E; border-radius: 0; /* significantly darker cyan frame */ color: #DFF7FB; font-family: var(--font-sans); font-size: .85rem; padding: .55rem 0; box-sizing: border-box; transition: width .35s var(--ease), opacity .25s, padding .35s var(--ease), box-shadow .25s; } .nav-search.open .nav-search-input { width: 240px; opacity: 1; pointer-events: auto; padding: .55rem .8rem; box-shadow: 0 0 14px rgba(0,180,216,.30); /* soft cyan glow, no hard shadow */ } .nav-search-input:focus { outline: none; box-shadow: 0 0 16px rgba(0,180,216,.45); } .nav-search-input::placeholder { color: rgba(120,210,228,.65); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; } /* Results — a framed pixel panel with a chunky offset shadow + cyan glow */ .nav-search-results { position: absolute; top: calc(100% + .6rem); right: 0; width: 340px; max-width: 80vw; max-height: 62vh; overflow-y: auto; background: #0D0D1A; border: 1px solid #0A4E5E; border-radius: 0; /* thin dark cyan frame, matches the bar */ box-shadow: 5px 5px 0 rgba(6,58,72,.5), /* cooler offset shadow */ 0 0 18px rgba(0,180,216,.10), /* faint outer cyan glow */ inset 0 0 24px rgba(0,180,216,.05); /* small, very transparent cyan highlight */ padding: .4rem; z-index: 1002; } .nav-search-results[hidden] { display: none; } .ns-result { display: block; width: 100%; text-align: left; background: none; cursor: pointer; padding: .55rem .65rem .55rem .6rem; border-radius: 0; border: none; border-left: 3px solid transparent; transition: background .15s, border-color .15s, padding-left .15s var(--ease); } .ns-result:hover, .ns-result.active { background: rgba(192,57,43,.1); border-left-color: var(--red); padding-left: .85rem; } .ns-result-label { display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); margin-bottom: .2rem; } .ns-result-text { font-size: .82rem; line-height: 1.35; color: rgba(255,255,255,.82); } .ns-result-text mark { background: rgba(201,168,76,.4); color: #fff; border-radius: 0; padding: 0 2px; } .ns-empty { padding: .75rem .65rem; color: rgba(255,255,255,.5); font-size: .82rem; } /* Flash the matched element when a result is opened */ .search-hit { animation: searchHit 2.2s var(--ease); border-radius: 4px; } @keyframes searchHit { 0%, 45% { background: rgba(201,168,76,.32); box-shadow: 0 0 0 5px rgba(201,168,76,.22); } 100% { background: transparent; box-shadow: 0 0 0 0 rgba(201,168,76,0); } } @media (max-width: 768px) { /* Mobile: framed white pixel button, sized to twin the hamburger (matches "Learn More") */ .nav-search-btn { width: 46px; height: 40px; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.45); box-shadow: 3px 3px 0 rgba(255,255,255,.10); } .nav-search-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(255,255,255,.10); } /* Open / pressed: cyan frame, with a more transparent cyan shadow */ .nav-search.open .nav-search-btn { background: rgba(0,180,216,.14); border-color: var(--cyan); box-shadow: 3px 3px 0 rgba(8,131,160,.45); } .nav-search.open .nav-search-input { width: 56vw; } .nav-search-results { width: min(340px, 84vw); top: calc(100% + .7rem); } } /* ── Animated track icons (inline SVG) ─────────────── */ svg.submit-track-icon-new { width: 70px; height: 70px; } .submit-track-icon-new.shake { animation: icon-shake .5s ease-in-out; transform-origin: 50% 70%; } @keyframes icon-shake { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-2.5deg); } 50% { transform: rotate(2deg); } 75% { transform: rotate(-1deg); } } @media (prefers-reduced-motion: reduce) { .submit-track-icon-new.shake { animation: none; } }