/* ============================================================ GATE — private-preview password splash (black & gold) Blocks the whole page until unlocked. Loaded in . ============================================================ */ /* When locked, hide everything except the gate (set by gate.js before paint) */ html.tf-locked { overflow: hidden; } html.tf-locked body > *:not(#tf-gate) { display: none !important; } #tf-gate { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center; padding: 28px; cursor: auto; color: #F2F3F5; font-family: 'Roboto', system-ui, -apple-system, sans-serif; background: radial-gradient(1100px 700px at 50% -10%, rgba(217,164,65,.16), transparent 60%), radial-gradient(800px 600px at 80% 110%, rgba(217,164,65,.08), transparent 60%), linear-gradient(180deg, #0B0B0E 0%, #050506 100%); animation: tfGateIn .6s cubic-bezier(.2,.7,.2,1) both; } #tf-gate, #tf-gate * { cursor: auto; } /* faint honeycomb texture, like the shop ceiling */ #tf-gate::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cg fill='none' stroke='%23D9A441' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M28 1L54 16v32L28 63 2 48V16z'/%3E%3Cpath d='M28 49l26 15v32L28 111 2 96V64z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 56px 96px; mask-image: radial-gradient(120% 100% at 50% 30%, #000 35%, transparent 80%); -webkit-mask-image: radial-gradient(120% 100% at 50% 30%, #000 35%, transparent 80%); } /* film grain */ #tf-gate::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .14; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .tf-gate-card { position: relative; z-index: 2; width: min(440px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; animation: tfCardIn .7s cubic-bezier(.2,.7,.2,1) .08s both; } .tf-gate-mark { font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .02em; line-height: .92; font-size: clamp(34px, 9vw, 52px); background: linear-gradient(180deg, #F6DD8E 0%, #E7B84D 38%, #B5821F 72%, #8A5E12 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 1px 0 rgba(0,0,0,.4); } .tf-gate-mark small { display: block; font-family: 'Montserrat', sans-serif; font-weight: 600; letter-spacing: .42em; font-size: clamp(11px, 2.6vw, 14px); -webkit-text-fill-color: initial; color: #C99A3B; margin-top: 8px; padding-left: .42em; } .tf-gate-eyebrow { font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: rgba(242,243,245,.5); } .tf-gate-tag { font-size: 14.5px; line-height: 1.6; color: rgba(242,243,245,.66); max-width: 34ch; margin: -6px auto 4px; } .tf-gate-form { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 6px; } .tf-gate-field { position: relative; display: flex; align-items: center; border: 1px solid rgba(217,164,65,.32); border-radius: 999px; background: rgba(255,255,255,.03); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .tf-gate-field:focus-within { border-color: #D9A441; background: rgba(217,164,65,.06); box-shadow: 0 0 0 4px rgba(217,164,65,.12); } .tf-gate-field input { flex: 1; width: 100%; background: none; border: 0; outline: 0; color: #F2F3F5; font-family: 'Roboto', sans-serif; font-size: 15px; letter-spacing: .04em; padding: 16px 8px 16px 22px; } .tf-gate-field input::placeholder { color: rgba(242,243,245,.4); letter-spacing: .02em; } .tf-gate-field button { flex-shrink: 0; margin: 5px; padding: 11px 24px; border: 0; border-radius: 999px; cursor: pointer; font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .06em; color: #0A0A0C; background: linear-gradient(180deg, #F1C863 0%, #D9A441 100%); box-shadow: 0 8px 22px -8px rgba(217,164,65,.7); transition: transform .18s ease, filter .18s ease; } .tf-gate-field button:hover { transform: translateY(-1px); filter: brightness(1.06); } .tf-gate-field button:active { transform: translateY(0); } .tf-gate-err { min-height: 16px; font-family: 'Roboto Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #E8845A; opacity: 0; transition: opacity .2s ease; } /* Locations strip — the shops are open even while the site is gated */ .tf-gate-locs { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 2px; } .tf-gate-open { font-size: 12.5px; line-height: 1.7; color: rgba(242,243,245,.55); } .tf-gate-open strong { color: #F1C863; font-weight: 600; } .tf-gate-loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tf-gate-loc { display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; border: 1px solid rgba(217,164,65,.22); border-radius: 14px; background: rgba(255,255,255,.025); text-align: left; } .tf-gate-loc-name { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; color: #F2F3F5; } .tf-gate-loc-addr { font-size: 11.5px; line-height: 1.45; color: rgba(242,243,245,.5); } .tf-gate-loc-links { display: flex; gap: 14px; margin-top: 5px; flex-wrap: wrap; } .tf-gate-loc-links a { font-family: 'Roboto Mono', monospace; font-size: 11px; letter-spacing: .04em; color: #D9A441; text-decoration: none; border-bottom: 1px solid rgba(217,164,65,.35); padding-bottom: 1px; transition: color .18s ease, border-color .18s ease; } .tf-gate-loc-links a:hover { color: #F1C863; border-color: #F1C863; } @media (max-width: 520px) { .tf-gate-loc-grid { grid-template-columns: 1fr; } .tf-gate-card { gap: 18px; } } .tf-gate-foot { margin-top: 8px; font-family: 'Roboto Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,243,245,.32); } #tf-gate.tf-shake .tf-gate-card { animation: tfShake .42s cubic-bezier(.36,.07,.19,.97) both; } #tf-gate.tf-gate-out { animation: tfGateOut .45s cubic-bezier(.65,.05,.36,1) both; } @keyframes tfGateIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tfGateOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } @keyframes tfCardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes tfShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } } @media (prefers-reduced-motion: reduce) { #tf-gate, .tf-gate-card { animation: none !important; } } .tf-gate-logo { width: min(300px, 76vw); height: auto; filter: drop-shadow(0 8px 26px rgba(0,0,0,.55)); }