/* ============================================================ MYAPPICS® — CLIENT PORTAL · SIGN IN · v2 "Atelier" A private gallery sign-in. Dark = recommended. Light variant via . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap'); :root{ --magenta:#FF007A; --magenta-deep:#D9005E; --magenta-press:#B8004F; --white:#FFFFFF; --display:'Sora',sans-serif; --serif:'Instrument Serif',serif; /* DARK THEME — a considered near-black with faint warmth, not flat #000 */ --bg:#101012; --bg-stage:#0B0B0D; --bg-panel:#15151A; --fg:#F2F1EF; --fg-muted:#9A9A9E; --fg-faint:#5E5E64; --rule:rgba(255,255,255,.10); --rule-strong:rgba(255,255,255,.20); --field-line:rgba(255,255,255,.24); --mat:rgba(255,255,255,.14); --shadow:rgba(0,0,0,.55); } body.theme-light{ --bg:#F3F1EC; --bg-stage:#ECE9E2; --bg-panel:#FBFAF8; --fg:#14141A; --fg-muted:#5E5E64; --fg-faint:#9A9A9E; --rule:rgba(0,0,0,.10); --rule-strong:rgba(0,0,0,.18); --field-line:rgba(0,0,0,.26); --mat:rgba(0,0,0,.16); --shadow:rgba(0,0,0,.14); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--display); background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; } /* ============================================================ GALLERY MAT — inset hairline frame with corner ticks ============================================================ */ .mat{ position:fixed; inset:18px; border:1px solid var(--mat); pointer-events:none; z-index:30; } .mat span{ position:absolute;width:12px;height:12px; border:1.5px solid var(--magenta); } .mat .tl{top:-1px;left:-1px;border-right:0;border-bottom:0} .mat .tr{top:-1px;right:-1px;border-left:0;border-bottom:0} .mat .bl{bottom:-1px;left:-1px;border-right:0;border-top:0} .mat .br{bottom:-1px;right:-1px;border-left:0;border-top:0} /* ============================================================ LAYOUT ============================================================ */ .portal{ display:grid; grid-template-columns:1.08fr .92fr; width:100%; min-height:100vh; } /* ---------- LEFT · the gallery stage ---------- */ .stage{ position:relative; background:var(--bg-stage); padding:72px 76px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; isolation:isolate; } /* living aurora — two slow-drifting magenta fields */ .stage__aura{ position:absolute;inset:-30%;z-index:0;pointer-events:none; background: radial-gradient(32% 40% at 26% 26%, rgba(255,0,122,.16), transparent 70%), radial-gradient(30% 36% at 80% 78%, rgba(255,0,122,.09), transparent 72%), radial-gradient(50% 50% at 60% 20%, rgba(120,40,90,.10), transparent 75%); animation:aura 30s ease-in-out infinite alternate; } @keyframes aura{ 0%{transform:translate3d(-2%,-2%,0) scale(1.05) rotate(0deg)} 100%{transform:translate3d(3%,2%,0) scale(1.16) rotate(4deg)} } /* film grain */ .stage__grain{ position:absolute;inset:0;z-index:1;opacity:.05;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* vignette for depth */ .stage::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(120% 100% at 50% 40%, transparent 55%, var(--shadow) 130%); } /* oversized watermark isotipo, parallax target */ .stage__watermark{ position:absolute;right:-10%;bottom:-12%;width:64%; opacity:.045;z-index:0;pointer-events:none;user-select:none; transition:transform .6s cubic-bezier(.16,.84,.44,1); will-change:transform; } /* vertical masthead running up the left edge */ .stage__spine{ position:absolute; left:30px;top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; z-index:2; font-family:var(--display); font-size:10px;font-weight:700; letter-spacing:.42em; text-transform:uppercase; color:var(--fg-faint); display:flex;align-items:center;gap:18px; } .stage__spine .dot{width:4px;height:4px;border-radius:50%;background:var(--magenta)} .stage__top{ position:relative;z-index:2; display:flex;align-items:center;justify-content:space-between; padding-left:42px; } .stage__wordmark{height:26px;width:auto;display:block} .stage__issue{ font-family:var(--display); font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase; color:var(--fg-faint); } .stage__center{position:relative;z-index:2;padding-left:42px;max-width:22ch} .stage__greeting{ font-family:var(--serif); font-style:italic;font-size:26px; color:var(--magenta); margin-bottom:18px; letter-spacing:-.01em; } .stage__headline{ font-family:var(--display); font-weight:800; font-size:clamp(46px,4.8vw,80px); line-height:.94; letter-spacing:-.038em; } .stage__headline em{ display:block; font-family:var(--serif); font-style:italic;font-weight:400; color:var(--fg); font-size:1.02em; line-height:1.08; padding-bottom:.08em; letter-spacing:-.01em; opacity:.62; } .stage__accent{ display:block; font-family:var(--serif); font-style:italic;font-weight:400; color:var(--magenta); font-size:1.34em; line-height:.92; letter-spacing:-.022em; margin-top:.02em; } .stage__sub{ margin-top:34px; font-family:var(--display); font-size:15px;font-weight:400;line-height:1.6; color:var(--fg-muted); max-width:34ch; } .stage__foot{ position:relative;z-index:2;padding-left:42px; display:flex;align-items:center;gap:14px; font-family:var(--display); font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--fg-faint); } .stage__foot .dot{width:4px;height:4px;border-radius:50%;background:var(--magenta)} /* ---------- RIGHT · form panel ---------- */ .panel{ position:relative; background:var(--bg-panel); padding:72px 76px; display:flex;flex-direction:column;justify-content:center; } .panel__inner{width:100%;max-width:388px;margin:0 auto} .panel__eyebrow{ display:flex;align-items:center;gap:12px; font-family:var(--display); font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--fg-faint); margin-bottom:26px; } .panel__eyebrow::before{content:"";width:24px;height:1.5px;background:var(--magenta)} .panel__headline{ font-family:var(--display); font-weight:700;font-size:42px;line-height:1;letter-spacing:-.032em; margin-bottom:14px; } .panel__headline em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--magenta)} .panel__sub{ font-family:var(--display); font-size:14px;font-weight:400;line-height:1.55; color:var(--fg-muted); margin-bottom:48px;max-width:34ch; } /* ---------- floating-label fields ---------- */ .field{position:relative;margin-bottom:34px} .field__input{ width:100%;appearance:none; background:transparent;border:0; border-bottom:1.5px solid var(--field-line); padding:22px 2px 12px; font-family:var(--display); font-size:18px;font-weight:500;letter-spacing:-.01em; color:var(--fg); transition:border-color .2s ease; } .field__input:focus{outline:none;border-bottom-color:var(--magenta)} .field__label{ position:absolute;left:2px;top:22px; font-family:var(--display); font-size:16px;font-weight:500; color:var(--fg-faint); pointer-events:none; transform-origin:left top; transition:transform .22s cubic-bezier(.16,.84,.44,1), color .22s ease; } /* float up when focused or filled */ .field__input:focus ~ .field__label, .field__input:not(:placeholder-shown) ~ .field__label{ transform:translateY(-22px) scale(.62); color:var(--fg-muted); letter-spacing:.18em; text-transform:uppercase; font-weight:700; } .field__input:focus ~ .field__label{color:var(--magenta)} /* animated underline */ .field__underline{ position:absolute;left:0;bottom:0;height:1.5px;width:100%; background:var(--magenta); transform:scaleX(0);transform-origin:left; transition:transform .3s cubic-bezier(.16,.84,.44,1); pointer-events:none; } .field__input:focus ~ .field__underline{transform:scaleX(1)} .field__toggle{ position:absolute;right:0;top:24px; background:none;border:0;cursor:pointer; font-family:var(--display); font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--fg-faint);transition:color .18s ease;padding:4px; } .field__toggle:hover,.field__toggle:focus-visible{color:var(--magenta);outline:none} .capslock{ display:none;margin-top:12px; font-family:var(--display); font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--magenta);align-items:center;gap:8px; } .capslock.is-visible{display:flex} .capslock::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--magenta);flex-shrink:0} /* ---------- error ---------- */ .error{ display:none;align-items:flex-start;gap:10px; margin:-14px 0 30px; font-family:var(--display); font-size:13px;font-weight:500;line-height:1.45;color:var(--magenta); } .error.is-visible{display:flex;animation:errIn .3s ease} @keyframes errIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .error::before{content:"";flex-shrink:0;width:6px;height:6px;margin-top:6px;border-radius:50%;background:var(--magenta)} /* ---------- submit ---------- */ .submit{ position:relative;width:100%; display:flex;align-items:center;justify-content:center;gap:14px; background:var(--magenta-deep);color:var(--white);border:0; padding:21px 28px; font-family:var(--display); font-size:13px;font-weight:800;letter-spacing:.22em;text-transform:uppercase; white-space:nowrap; cursor:pointer;overflow:hidden; transition:background .18s ease, transform .12s ease; } .submit::before{ content:"";position:absolute;inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%); transform:translateX(-120%);transition:transform .6s ease; } .submit:hover{background:var(--magenta-press)} .submit:hover::before{transform:translateX(120%)} .submit:active{transform:translateY(1px)} .submit:focus-visible{outline:2px solid var(--fg);outline-offset:3px} .submit__arrow{font-size:15px;font-weight:400;letter-spacing:0;transition:transform .2s ease;position:relative} .submit:hover .submit__arrow{transform:translateX(4px)} .submit__spinner{ display:none;width:16px;height:16px; border:2px solid rgba(255,255,255,.35);border-top-color:var(--white); border-radius:50%;animation:spin .7s linear infinite; } .submit.is-loading{cursor:default;opacity:.94} .submit.is-loading .submit__arrow{display:none} .submit.is-loading .submit__spinner{display:block} @keyframes spin{to{transform:rotate(360deg)}} .help{margin-top:30px;font-family:var(--display);font-size:13px;font-weight:400;color:var(--fg-muted)} .help a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--magenta);padding-bottom:1px;transition:color .18s ease} .help a:hover{color:var(--magenta)} .credit{ margin-top:60px;padding-top:24px;border-top:1px solid var(--rule); font-family:var(--display); font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint); } /* ============================================================ THANK-YOU / CONFIRMATION ============================================================ */ /* wax-seal style mark with a drawn check */ .seal{ position:relative; width:64px;height:64px;border-radius:50%; display:flex;align-items:center;justify-content:center; border:1.5px solid var(--magenta); margin-bottom:34px; } .seal::before{ content:"";position:absolute;inset:-7px;border-radius:50%; border:1px solid var(--rule-strong); } .seal svg{width:30px;height:30px;display:block} .seal svg path{ fill:none;stroke:var(--magenta);stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:36;stroke-dashoffset:0; /* visible by default */ } /* draw-in is pure enhancement: only hide+animate when JS is present */ body.js .seal svg path{stroke-dashoffset:36} body.js.is-ready .seal svg path{ stroke-dashoffset:0; /* declared visible end-state, not gated on animation */ animation:drawCheck .7s cubic-bezier(.16,.84,.44,1) .5s both; } @keyframes drawCheck{to{stroke-dashoffset:0}} /* "what happens next" steps */ .steps{ list-style:none;margin:8px 0 0;padding:0; border-top:1px solid var(--rule); } .steps li{ display:flex;align-items:flex-start;gap:16px; padding:20px 2px; border-bottom:1px solid var(--rule); } .steps__num{ flex-shrink:0; font-family:var(--serif);font-style:italic; font-size:20px;line-height:1;color:var(--magenta); width:22px; } .steps__text{ font-family:var(--display); font-size:14px;font-weight:400;line-height:1.5;color:var(--fg-muted); } .steps__text b{color:var(--fg);font-weight:600} /* secondary ghost button (return to portal) */ .ghost{ display:inline-flex;align-items:center;gap:12px; margin-top:38px; background:none;border:0;cursor:pointer;text-decoration:none; font-family:var(--display); font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--fg-muted);transition:color .18s ease; } .ghost:hover{color:var(--magenta)} .ghost__arrow{font-size:14px;font-weight:400;letter-spacing:0;transition:transform .2s ease} .ghost:hover .ghost__arrow{transform:translateX(-4px)} /* ---------- theme toggle ---------- */ .theme-toggle{ position:fixed;top:34px;right:36px;z-index:40; display:flex;align-items:center;gap:8px; background:none;border:1px solid var(--rule-strong);border-radius:99px; padding:8px 14px;cursor:pointer; font-family:var(--display); font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--fg-muted); transition:border-color .18s ease,color .18s ease; } .theme-toggle:hover{border-color:var(--magenta);color:var(--fg)} /* ============================================================ ENTRANCE CHOREOGRAPHY Final state is a DECLARED visible style; motion via transition. If the transition is throttled/frozen, computed opacity is still 1 (no animation-end-state gating = never stuck invisible). ============================================================ */ @keyframes drawLine{from{transform:scaleY(0)}to{transform:scaleY(1)}} /* base hidden state only applies when JS is present */ body.js .anim{ opacity:0; transform:translateY(16px); transition:transform .9s cubic-bezier(.16,.84,.44,1); } body.js.is-ready .anim{opacity:1;transform:none} body.js.is-ready .d1{transition-delay:.05s} body.js.is-ready .d2{transition-delay:.16s} body.js.is-ready .d3{transition-delay:.27s} body.js.is-ready .d4{transition-delay:.38s} body.js.is-ready .d5{transition-delay:.49s} body.js.is-ready .d6{transition-delay:.60s} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:920px){ .portal{grid-template-columns:1fr} .stage{min-height:auto;padding:60px 44px 64px} .stage__spine{display:none} .stage__issue{display:none} /* avoid collision with fixed theme toggle when stacked */ .stage__top,.stage__center,.stage__foot{padding-left:0} .stage__center{margin:52px 0;max-width:none} .stage__watermark{width:110%;right:-24%;bottom:-26%} .panel{padding:60px 44px} .panel__inner{max-width:460px} } @media (max-width:480px){ .mat{inset:10px} .stage{padding:44px 22px 48px} .panel{padding:48px 22px 40px} .panel__headline{font-size:36px} .stage__greeting{font-size:22px} .stage__accent{font-size:1.22em} .steps__text{font-size:13px} .theme-toggle{top:18px;right:18px} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} body.js .anim{opacity:1!important;transform:none!important} .stage__watermark{transition:none!important} }