/* ================================================================ GOLD STUDIO — LOGIN SKIN Shared stylesheet for index.html (the public hub) and login/index.html (the auth gate). Same green/slate "vault" language, distinct from the 4 tools' own appskin.css. Add ONE of these classes to each page's tag: body.app-hub (index.html) body.app-login (login/index.html) ================================================================ */ :root{ --bg: #0a0f0a; --bg-2: #121a10; --panel: #141b13; --panel-hi: #1a2318; --line: rgba(201,150,60,0.26); --line-soft: rgba(201,150,60,0.12); --brass: #c9963c; --brass-br: #f0c98f; --brass-dk: #8a6508; --emerald: #2f6b46; --emerald-br:#4c8f66; --paper: #f6f1e4; --ink: #171408; --text: #f2ede0; --text-soft: #9c9686; --danger: #ff9686; --danger-line: rgba(161,58,47,0.5); --danger-bg: rgba(161,58,47,0.16); --shadow: 0 26px 64px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.32); --r: 22px; --rs: 11px; } /* the hub's cards use a slightly sharper corner than the login card/dial -- kept as its own scoped override rather than forced to match, since that wasn't part of what you flagged */ body.app-hub{ --r:14px; --rs:9px; } *{box-sizing:border-box; margin:0; padding:0;} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} } html,body{height:100%;} @keyframes rise{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} } /* --------------------------------------------------------------- HUB (index.html) — page-specific layout --------------------------------------------------------------- */ body.app-hub *{box-sizing:border-box; margin:0; padding:0;} @media (prefers-reduced-motion: reduce){body.app-hub *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} }body.app-hub html, body.app-hub{height:100%;}body.app-hub{ background: radial-gradient(900px 480px at 50% -8%, var(--bg-2) 0%, var(--bg) 60%), var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1.25rem; }body.app-hub::before{ content:''; position:fixed; inset:0; pointer-events:none; opacity:.5; background-image:radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px); background-size:22px 22px; }body.app-hub .wrap{ width:100%; max-width:900px; position:relative; z-index:1; }body.app-hub .top{ text-align:center; margin-bottom:2.6rem; }body.app-hub .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; font-weight:600; letter-spacing:2.6px; text-transform:uppercase; color:var(--brass); opacity:0; animation: rise .6s ease .05s forwards; }body.app-hub h1{ font-family:'Fraunces',serif; font-weight:900; font-size:clamp(2rem, 5.2vw, 3.1rem); line-height:1.12; letter-spacing:-.5px; margin-top:.6rem; color:var(--text); opacity:0; animation: rise .6s ease .15s forwards; }body.app-hub h1 em{ font-style:italic; font-weight:600; color:var(--brass-br); }body.app-hub .sub{ margin-top:.8rem; font-size:1rem; color:var(--text-soft); opacity:0; animation: rise .6s ease .25s forwards; }body.app-hub .hub-frame{ position:relative; }body.app-hub .hub{ display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 44px 48px; perspective:1600px; }body.app-hub .hub-frame::before{ content:''; position:absolute; top:6%; bottom:6%; left:50%; width:1px; transform:translateX(-50%); background:linear-gradient(180deg, transparent, var(--line) 20%, var(--line) 80%, transparent); }body.app-hub .hub-frame::after{ content:''; position:absolute; left:4%; right:4%; top:50%; height:1px; transform:translateY(-50%); background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); }body.app-hub .medallion-wrap{ position:absolute; top:50%; left:50%; z-index:3; width:70px; height:70px; transform:translate(-50%,-50%); }body.app-hub .medallion-glow{ position:absolute; inset:-14px; border-radius:50%; background:radial-gradient(circle, rgba(240,201,143,0.5) 0%, transparent 70%); filter:blur(9px); opacity:0; pointer-events:none; animation: medallion-glow-in .6s ease .8s forwards, medallion-pulse 4.4s ease-in-out 1.5s infinite; }body.app-hub .medallion-pulse-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--brass-br); opacity:0; pointer-events:none; animation: pulse-ring 4.6s cubic-bezier(.2,.7,.3,1) 3.9s infinite; }body.app-hub .medallion-core{ position:absolute; inset:0; border-radius:50%; transform:scale(.5) rotate(-16deg); opacity:0; animation: stamp .55s cubic-bezier(.2,1.4,.4,1) .5s forwards, medallion-breathe 4.6s ease-in-out 1.6s infinite; }body.app-hub .medallion-tilt{ position:relative; width:100%; height:100%; border-radius:50%; transition:transform .5s cubic-bezier(.2,.8,.3,1); will-change:transform; }body.app-hub .medallion-face{ position:absolute; inset:0; border-radius:50%; overflow:hidden; background:radial-gradient(60% 60% at 34% 26%, #fffdf6 0%, var(--paper) 52%, #e6dbbc 100%); box-shadow: 0 0 0 1.5px var(--brass-dk), 0 0 0 3px var(--bg), 0 0 0 4px rgba(201,150,60,0.35), 0 12px 26px rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.55), inset 0 -1px 2px rgba(0,0,0,0.28); display:flex; align-items:center; justify-content:center; }body.app-hub .medallion-engrave{ position:absolute; inset:0; z-index:1; background:repeating-radial-gradient(circle at 50% 50%, rgba(138,101,8,0.18) 0px, rgba(138,101,8,0.18) 1px, transparent 1px, transparent 4px); mix-blend-mode:multiply; opacity:.6; }body.app-hub .medallion-shine{ position:absolute; top:-45%; bottom:-45%; width:24%; left:-45%; z-index:3; background:linear-gradient(100deg, transparent, rgba(255,255,255,0.8), transparent); transform:rotate(12deg); pointer-events:none; animation: shine-sweep 5.6s ease-in-out 2.3s infinite; }body.app-hub .medallion-mono{ position:relative; z-index:2; font-family:'Fraunces',serif; font-style:italic; font-weight:700; font-size:1.1rem; letter-spacing:-.5px; color:var(--ink); text-shadow:0 1px 0 rgba(255,255,255,0.55), 0 -1px 1px rgba(0,0,0,0.32); } @keyframes stamp{ 60%{opacity:1; transform:scale(1.08) rotate(0deg);} 100%{opacity:1; transform:scale(1) rotate(0deg);} } @keyframes medallion-glow-in{ to{opacity:1;} } @keyframes medallion-pulse{ 0%,100%{ opacity:.42; transform:scale(1); } 50%{ opacity:.82; transform:scale(1.16); } } @keyframes medallion-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } } @keyframes pulse-ring{ 0%{ transform:scale(1); opacity:0; } 10%{ opacity:.45; } 100%{ transform:scale(1.55); opacity:0; } } @keyframes shine-sweep{ 0%, 16%{ left:-45%; } 40%, 100%{ left:130%; } }body.app-hub .card{ --delay:.35s; --mx:50%; --my:50%; position:relative; overflow:hidden; display:block; background:linear-gradient(180deg, var(--panel-hi), var(--panel)); border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:inherit; box-shadow:var(--shadow); opacity:0; transform:translateY(16px); animation: rise .6s ease var(--delay) forwards; transition:border-color .3s ease, box-shadow .4s ease, background .3s ease; }body.app-hub .card:nth-child(1){ --delay:.35s; }body.app-hub .card:nth-child(2){ --delay:.40s; }body.app-hub .card:nth-child(3){ --delay:.45s; }body.app-hub .card:nth-child(4){ --delay:.50s; }body.app-hub .card::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle 280px at var(--mx) var(--my), rgba(240,201,143,0.16), transparent 62%); opacity:0; transition:opacity .35s ease; pointer-events:none; }body.app-hub .card:hover::before, body.app-hub .card:focus-visible::before{ opacity:1; }body.app-hub .card:hover, body.app-hub .card:focus-visible{ border-color:var(--brass); box-shadow:0 30px 70px rgba(0,0,0,0.5), 0 0 0 1px var(--line), 0 0 34px -6px rgba(201,150,60,0.35); background:linear-gradient(180deg, #1d251d, var(--panel)); }body.app-hub .card:focus-visible{ outline:2px solid var(--brass-br); outline-offset:3px; }body.app-hub .card-inner{ display:flex; flex-direction:column; gap:.9rem; padding:2.1rem 2rem 1.9rem; transition:transform .4s cubic-bezier(.2,.8,.3,1); will-change:transform; }body.app-hub .card:hover .card-inner, body.app-hub .card:focus-visible .card-inner{ transform:translateY(-4px); }body.app-hub .card .icon{ width:42px; height:42px; color:var(--brass); transition:color .25s ease; }body.app-hub .card:hover .icon{ color:var(--brass-br); }body.app-hub .tag{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; font-weight:600; letter-spacing:1.8px; text-transform:uppercase; color:var(--brass); }body.app-hub .card h2{ font-family:'Fraunces',serif; font-weight:800; font-size:1.5rem; letter-spacing:-.3px; color:var(--text); }body.app-hub .card p{ font-size:.92rem; line-height:1.55; color:var(--text-soft); }body.app-hub .cta{ margin-top:.4rem; font-family:'IBM Plex Mono',monospace; font-size:.76rem; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--brass-br); display:flex; align-items:center; gap:.4rem; }body.app-hub .cta .arr{ transition:transform .25s ease; }body.app-hub .card:hover .cta .arr{ transform:translateX(5px); }body.app-hub .card.soon{ opacity:.62; border-style:dashed; cursor:default; }body.app-hub .card.soon .tag{ color:var(--text-soft); }body.app-hub .card.soon:hover{ border-color:var(--line); box-shadow:var(--shadow); background:linear-gradient(180deg, var(--panel-hi), var(--panel)); }body.app-hub .card.soon:hover .card-inner{ transform:none; }body.app-hub .card.soon:hover .icon{ color:var(--brass); }body.app-hub .card.soon .cta{ color:var(--text-soft); }body.app-hub footer{ margin-top:2.6rem; text-align:center; opacity:0; animation: rise .6s ease .6s forwards; }body.app-hub footer .rule{ width:64px; height:1px; margin:0 auto .9rem; background:linear-gradient(90deg, transparent, var(--line), transparent); }body.app-hub footer p{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-soft); opacity:.7; } @media (max-width: 720px){body.app-hub .hub{ grid-template-columns:1fr; gap:20px; perspective:none; }body.app-hub .hub-frame::before, body.app-hub .hub-frame::after{ content:none; }body.app-hub .medallion-wrap{ position:relative; top:auto; left:auto; transform:none !important; margin:0 auto 26px; }body.app-hub .card{ padding:1.8rem 1.6rem 1.6rem; } } /* --------------------------------------------------------------- LOGIN (login/index.html) — page-specific layout --------------------------------------------------------------- */ body.app-login *{box-sizing:border-box; margin:0; padding:0;} @media (prefers-reduced-motion: reduce){body.app-login *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} }body.app-login html, body.app-login{height:100%;}body.app-login{ background: radial-gradient(1000px 520px at 50% -10%, var(--bg-2) 0%, var(--bg) 60%), var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:2.6rem 1.1rem; position:relative; overflow-x:hidden; }body.app-login::before{ content:''; position:fixed; inset:0; pointer-events:none; opacity:.5; z-index:0; background-image:radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px); background-size:22px 22px; }body.app-login .glow{ position:fixed; border-radius:50%; filter:blur(64px); pointer-events:none; z-index:0; opacity:.32; }body.app-login .glow-brass{ width:520px; height:420px; left:50%; top:38%; transform:translate(-72%,-58%); background:radial-gradient(circle, var(--brass) 0%, transparent 68%); animation: drift-a 16s ease-in-out infinite alternate; }body.app-login .glow-emerald{ width:480px; height:420px; left:50%; top:62%; transform:translate(-24%,-42%); background:radial-gradient(circle, var(--emerald-br) 0%, transparent 68%); animation: drift-b 19s ease-in-out infinite alternate; } @keyframes drift-a{ from{ transform:translate(-72%,-58%) scale(1); } to{ transform:translate(-62%,-64%) scale(1.08); } } @keyframes drift-b{ from{ transform:translate(-24%,-42%) scale(1); } to{ transform:translate(-34%,-36%) scale(1.1); } }body.app-login .wrap{ width:100%; max-width:428px; position:relative; z-index:1; }body.app-login .top{ text-align:center; margin-bottom:1.8rem; opacity:0; animation: rise .6s ease .05s forwards; }body.app-login .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:600; letter-spacing:2.6px; text-transform:uppercase; color:var(--brass); }body.app-login h1{ font-family:'Fraunces',serif; font-weight:900; font-size:clamp(1.5rem, 6.4vw, 2rem); line-height:1.22; letter-spacing:-.4px; margin-top:.65rem; color:var(--text); }body.app-login h1 .g{ font-style:italic; font-weight:600; color:var(--brass-br); }body.app-login .tilt-wrap{ perspective:1200px; margin-top:2.9rem; opacity:0; animation: rise .6s ease .18s forwards; }body.app-login .card{ position:relative; background:linear-gradient(180deg, var(--panel-hi), var(--panel)); border:1px solid var(--line); border-radius:var(--r); padding:2.6rem 2rem 2rem; box-shadow: var(--shadow), 0 46px 90px -30px rgba(201,150,60,0.22), inset 0 0 0 6px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.03); transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease; will-change:transform; }body.app-login .dial{ position:absolute; top:0; left:50%; width:92px; height:92px; transform:translate(-50%,-52%); z-index:2; }body.app-login .dial-glow{ position:absolute; inset:-16px; border-radius:50%; background:radial-gradient(circle, rgba(240,201,143,0.4) 0%, transparent 70%); filter:blur(10px); opacity:.4; pointer-events:none; z-index:-1; animation: dial-pulse 3.8s ease-in-out infinite; }body.app-login .dial-ring{ position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(var(--brass) 0deg 4deg, transparent 4deg 20deg); opacity:.85; animation: spin 70s linear infinite; }body.app-login .dial-face{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; overflow:hidden; background:radial-gradient(60% 60% at 35% 30%, #fffdf6 0%, var(--paper) 55%, #e9dfc4 100%); border:2px solid var(--brass); box-shadow:0 0 0 5px var(--bg), 0 10px 26px rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.6); display:flex; align-items:center; justify-content:center; }body.app-login .dial-face::after{ content:''; position:absolute; top:-60%; left:-70%; width:45%; height:220%; background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%); transform:rotate(20deg); opacity:0; pointer-events:none; animation: dial-shine 6.4s ease-in-out 1.6s infinite; }body.app-login .dial-face svg{ width:24px; height:24px; color:var(--ink); position:relative; z-index:1; } @keyframes spin{ to{ transform:rotate(360deg); } } @keyframes dial-pulse{ 0%,100%{ opacity:.35; transform:scale(1); } 50%{ opacity:.6; transform:scale(1.14); } } @keyframes dial-shine{ 0%, 88%, 100%{ left:-70%; opacity:0; } 4%{ opacity:.85; } 34%{ left:135%; opacity:0; } }body.app-login .target-wrap{ margin-top:1.5rem; display:flex; justify-content:center; }body.app-login .target-note{ font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.6px; color:var(--text-soft); text-align:center; }body.app-login .target-note b{ color:var(--brass-br); font-weight:600; }body.app-login .icon-btn:focus-visible, body.app-login .submit-btn:focus-visible, body.app-login .back-link:focus-visible, body.app-login input:focus-visible{ outline:2px solid var(--brass-br); outline-offset:2px; }body.app-login form{ margin-top:1.7rem; }body.app-login .fields{ display:grid; grid-template-columns:auto 1fr; row-gap:1.05rem; column-gap:.95rem; align-items:center; }body.app-login .field-label{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--brass-br); white-space:nowrap; }body.app-login .field-shell{ position:relative; display:flex; align-items:center; }body.app-login input{ width:100%; background:rgba(0,0,0,0.28); border:1.5px solid var(--line); border-radius:var(--rs); padding:.82rem 1rem; font-family:'Inter',sans-serif; font-size:.98rem; color:var(--text); transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }body.app-login input#pw-field{ padding-right:2.7rem; }body.app-login input::placeholder{ color:var(--text-soft); opacity:.55; }body.app-login input:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(201,150,60,0.16); background:rgba(0,0,0,0.4); }body.app-login .icon-btn{ position:absolute; right:.55rem; appearance:none; border:none; background:transparent; color:var(--text-soft); cursor:pointer; padding:.4rem; border-radius:8px; display:flex; transition:color .18s ease; }body.app-login .icon-btn:hover{ color:var(--brass-br); }body.app-login .icon-btn svg{ width:18px; height:18px; }body.app-login .error-msg{ margin-top:1rem; padding:.68rem .85rem; border-radius:var(--rs); background:var(--danger-bg); border:1px solid var(--danger-line); color:var(--danger); font-size:.83rem; line-height:1.4; display:flex; align-items:flex-start; gap:.5rem; opacity:0; max-height:0; overflow:hidden; transition:opacity .25s ease, max-height .25s ease, margin-top .25s ease, padding .25s ease; }body.app-login .error-msg svg{ width:15px; height:15px; flex:none; margin-top:.1rem; }body.app-login .error-msg.show{ opacity:1; max-height:80px; }body.app-login .submit-btn{ margin-top:1.55rem; width:100%; padding:.92rem 1rem; border:none; border-radius:var(--rs); background:linear-gradient(180deg, var(--brass-br), var(--brass) 55%, var(--brass-dk)); color:var(--ink); font-family:'Inter',sans-serif; font-weight:700; font-size:.98rem; letter-spacing:.2px; display:flex; align-items:center; justify-content:center; gap:.55rem; cursor:pointer; box-shadow:0 12px 28px -8px rgba(201,150,60,0.55), inset 0 1px 0 rgba(255,255,255,0.4); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease; }body.app-login .submit-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -8px rgba(201,150,60,0.62), inset 0 1px 0 rgba(255,255,255,0.5); filter:brightness(1.03); }body.app-login .submit-btn:active{ transform:translateY(0); }body.app-login .submit-btn:disabled{ opacity:.72; cursor:progress; transform:none; }body.app-login .submit-btn svg{ width:18px; height:18px; }body.app-login .spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(23,20,8,0.35); border-top-color:var(--ink); animation:spin-fast .65s linear infinite; display:none; }body.app-login .submit-btn.loading .spinner{ display:inline-block; }body.app-login .submit-btn.loading .btn-label, body.app-login .submit-btn.loading .key-icon{ display:none; } @keyframes spin-fast{ to{ transform:rotate(360deg); } }body.app-login .submit-btn.success{ background:linear-gradient(180deg, var(--emerald-br), var(--emerald)); color:#eafff0; }body.app-login .trust{ margin-top:1.05rem; display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.72rem; color:var(--text-soft); text-align:center; }body.app-login .trust svg{ width:13px; height:13px; flex:none; color:var(--brass); }body.app-login footer{ margin-top:1.9rem; text-align:center; opacity:0; animation: rise .6s ease .3s forwards; }body.app-login .back-link{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.8px; color:var(--text-soft); text-decoration:none; border-radius:6px; padding:.2rem .3rem; transition:color .2s ease; }body.app-login .back-link:hover{ color:var(--brass-br); } @media (max-width:380px){body.app-login .card{ padding:2.4rem 1.35rem 1.7rem; }body.app-login .fields{ column-gap:.6rem; }body.app-login .field-label{ font-size:.64rem; letter-spacing:1.1px; }body.app-login h1{ font-size:clamp(1.3rem, 7vw, 1.6rem); }body.app-login .dial{ width:78px; height:78px; }body.app-login .dial-face{ width:56px; height:56px; }body.app-login .dial-face svg{ width:20px; height:20px; } } @media (min-width:640px){body.app-login .wrap{ max-width:460px; }body.app-login .card{ padding:3rem 2.6rem 2.3rem; } } @media (max-height:720px){body.app-login{ padding-top:1.5rem; padding-bottom:1.5rem; }body.app-login .top{ margin-bottom:1.3rem; }body.app-login .tilt-wrap{ margin-top:1.6rem; }body.app-login .card{ padding-top:2.2rem; }body.app-login form{ margin-top:1.3rem; }body.app-login .fields{ row-gap:.85rem; }body.app-login .submit-btn{ margin-top:1.2rem; }body.app-login .trust{ margin-top:.8rem; }body.app-login footer{ margin-top:1.1rem; } } @media (max-height:600px){body.app-login .dial{ width:70px; height:70px; }body.app-login .dial-face{ width:50px; height:50px; }body.app-login .dial-face svg{ width:18px; height:18px; }body.app-login h1{ font-size:clamp(1.25rem, 6vw, 1.5rem); } }