/* entry.css — splash + sign-in for the 3D-leaf entry flow (see entry.js). Full-screen dark-glass splash: the interactive three.js leaf (leaf3d.js) is the hero; tapping it shrinks + lifts the leaf and slides a glass sign-in card in beneath it. Brand palette: plasma green #2BE8A0 / teal #2FD9D9 / bronze #E0A73E on deep green-black #060F0B (matches gf/brand.css + the leaf hues). */ .gf-entry-root { position: fixed; inset: 0; z-index: 99999; } .gf-entry { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; /* `safe center`: center the group when it fits, but fall back to top-aligned when it's taller than the viewport so the top is never clipped/unreachable. Paired with overflow-y:auto, the card can always be scrolled to in full — on a short laptop or a small phone nothing gets cut off. */ justify-content: safe center; gap: 0; padding: 20px 16px; /* When the leaf+card group is taller than the viewport (e.g. a browser that doesn't shrink the WebGL canvas on reveal), centering would split the overflow top+bottom and the bottom (the demo button) becomes unreachable by scroll. entry.js's ensureCardInView() adds .gf-overflow to top-align the group so ALL overflow falls below and can be scrolled into view. */ box-sizing: border-box; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* Backdrop follows the showcased skin (entry.js applies a random dark skin to ): the skin's own dark surface/bg tokens tint the stage. Hardcoded plasma-green values remain as fallbacks. */ background: radial-gradient(120% 80% at 20% 0%, var(--surface-2, #17402f) 0%, var(--bg, #0e2519) 50%, var(--mw-void, #0a1b13) 100%); font-family: var(--font, system-ui, sans-serif); -webkit-tap-highlight-color: transparent; } /* Set by ensureCardInView() only when the group overflows the viewport: top- align so the full card (incl. the demo button) is reachable by scrolling. */ .gf-entry.gf-overflow { justify-content: flex-start; } /* The normal reveal shrinks the leaf with transform: scale() + a -150px bottom margin — a visual trick whose layout box stays full-size, so the flex container's scrollHeight never grows and the overflow can't be scrolled to. When the group genuinely overflows a short viewport we instead reformat the leaf into a REAL compact box (layout == paint): the whole leaf is fitted into a small square and the card flows directly beneath it, so scrollHeight is honest and the demo button is always reachable. */ .gf-entry.gf-overflow .gf-stage { transform: none !important; margin: 0 auto 4px !important; height: 132px !important; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .gf-entry.gf-overflow .gf-stage canvas, .gf-entry.gf-overflow .gf-stage .leaf-stage, .gf-entry.gf-overflow .gf-stage > * { max-height: 132px !important; max-width: 132px !important; height: auto !important; width: auto !important; } .gf-entry.gf-overflow .gf-shadow { display: none !important; } /* Ambient glows behind the leaf — tinted to the skin's accent (--accent-rgb). */ .gf-atmos { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(38% 30% at 50% 40%, rgba(var(--accent-rgb, 43,232,160),.18), transparent 70%), radial-gradient(46% 40% at 78% 84%, rgba(var(--accent-rgb,47,217,217),.10), transparent 72%), radial-gradient(40% 34% at 16% 88%, rgba(var(--accent-rgb,224,167,62),.05), transparent 72%); animation: gf-atmos-drift 14s ease-in-out infinite; } @keyframes gf-atmos-drift { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } /* Leaf mount — leaf3d.js sizes it and appends the canvas. The reveal shrinks and lifts it so the sign-in card can sit beneath it, still in view. */ .gf-stage { position: relative; z-index: 2; transform-origin: center top; transition: transform .5s var(--ease-out), margin .5s var(--ease-out); will-change: transform; } /* Entered: shrink the leaf AND reclaim the layout space it frees (scale is only visual), so the sign-in card sits right below it and leaf+card+back center as one compact group that always fits the viewport — no scrolling. */ .gf-entry.entered .gf-stage { transform: scale(.5); margin: 2px -70px -150px; } /* CSS-leaf fallback keeps the same footprint so the layout doesn't jump. */ .gf-stage.gf-stage--css { display: flex; align-items: center; justify-content: center; width: 200px; height: 234px; } .gf-shadow { position: relative; z-index: 1; margin: 2px auto 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(var(--accent-rgb, 43,232,160),.32), transparent 70%); filter: blur(6px); pointer-events: none; transition: opacity .5s var(--ease-out); } .gf-entry.entered .gf-shadow { opacity: 0; height: 0 !important; margin: 0 !important; } /* Brand lockup — fades out on enter. */ .gf-lockup { position: relative; z-index: 2; margin-top: 14px; text-align: center; max-height: 260px; overflow: hidden; transition: opacity .4s var(--ease-out), max-height .5s var(--ease-out), margin .5s var(--ease-out), transform .5s var(--ease-out); } .gf-entry.entered .gf-lockup { opacity: 0; max-height: 0; margin: 0; transform: translateY(-12px); pointer-events: none; } .gf-name { font-family: var(--font, system-ui, sans-serif); font-weight: 800; font-size: 34px; letter-spacing: -.01em; color: var(--ink, #DDF3E9); line-height: 1; } .gf-name .gf-flow { background: linear-gradient(135deg, var(--primary, #2BE8A0) 0%, var(--blue, #2FD9D9) 55%, var(--orange, #E0A73E) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .gf-wordmark { width: 150px; height: 22px; margin: 10px auto 0; background: url('../assets/pp-wordmark.png') center / contain no-repeat; filter: brightness(0) invert(1) opacity(.72); } .gf-tagline { margin-top: 9px; font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2, #8FB6A6); } .gf-enter { margin-top: 18px; font-size: 12.5px; color: var(--ink-2, #8FB6A6); opacity: .9; animation: gf-enter-pulse 2.6s ease-in-out infinite; } .gf-enter b { color: rgba(var(--accent-rgb, 43,232,160),.85); } @keyframes gf-enter-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } /* Sign-in area — lower half, no dim backdrop so the shrunk leaf stays visible. Hidden until .show (added ~540 ms after the leaf is tapped). */ /* Sign-in card — IN FLOW (not absolute) so it sits directly under the shrunk leaf and the whole group stays centered; collapsed until .show. */ .gf-lw { position: relative; z-index: 3; width: 100%; display: flex; flex-direction: column; align-items: center; opacity: 0; max-height: 0; overflow: hidden; pointer-events: none; transition: opacity .5s var(--ease-out), max-height .5s var(--ease-out); } .gf-lw.show { opacity: 1; max-height: 660px; /* room for the card + demo button; container scrolls if taller */ pointer-events: auto; } .gf-card { width: 340px; max-width: calc(100vw - 40px); box-sizing: border-box; padding: 26px 26px 22px; border-radius: 18px; background: var(--glass-bg, rgba(22, 48, 37, .9)); border: 1px solid rgba(var(--accent-rgb, 43,232,160), .22); box-shadow: 0 24px 70px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(var(--accent-rgb, 43,232,160), .10); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateY(22px); transition: transform .5s var(--ease-out); } .gf-lw.show .gf-card { transform: none; } .gf-card-title { font-size: 17px; font-weight: 700; color: var(--ink, #DDF3E9); } .gf-card-sub { font-size: 12.5px; color: var(--ink-2, #8FB6A6); margin: 4px 0 16px; } .gf-in { width: 100%; box-sizing: border-box; padding: 11px 13px; margin-bottom: 10px; border: 1px solid rgba(var(--accent-rgb, 43,232,160), .22); border-radius: 10px; background: rgba(14, 31, 23, .55); color: #E9F6EF; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; } .gf-in::placeholder { color: #5f8574; } .gf-in:focus { border-color: rgba(var(--accent-rgb, 43,232,160), .55); box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 43,232,160), .14); } .gf-btn { width: 100%; margin-top: 4px; padding: 12px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--primary, #2BE8A0), var(--primary-hover, #24cf9a)); color: var(--text-on-primary, #03130C); font-weight: 700; font-size: 14px; cursor: pointer; transition: filter .15s, transform .05s; } .gf-btn:hover { filter: brightness(1.06); } .gf-btn:active { transform: translateY(1px); } .gf-msg { color: #FF6B78; font-size: 12px; margin-top: 10px; min-height: 16px; } /* Back link — in flow BELOW the card (no more overlapping the Sign-in button). */ .gf-back { position: relative; z-index: 4; margin-top: 14px; font-size: 12.5px; color: var(--ink-2, #8FB6A6); cursor: pointer; opacity: 0; max-height: 0; overflow: hidden; pointer-events: none; transition: opacity .4s var(--ease-out), max-height .4s var(--ease-out); } .gf-back:hover { color: var(--ink, #DDF3E9); } .gf-entry.entered .gf-back { opacity: .75; max-height: 36px; pointer-events: auto; } @media (max-width: 480px) { .gf-name { font-size: 28px; } .gf-entry.entered .gf-stage { transform: scale(.46); margin: 2px -76px -152px; } } @media (prefers-reduced-motion: reduce) { .gf-atmos, .gf-enter { animation: none; } .gf-stage, .gf-lockup, .gf-shadow, .gf-lw, .gf-card, .gf-back { transition-duration: .01ms; } } /* "Try the demo" — a fixed pill pinned to the top-right of the splash, OUTSIDE the sign-in card so it is always visible from the first frame and can never be buried by the leaf/card layout on any viewport. Keeps its own bronze accent so it stays distinct from the skin-tinted primary Sign-in button. */ .gf-demo-float { position: fixed; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); z-index: 100001; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--orange, rgba(224, 167, 62, .55)); background: var(--orange-soft, rgba(224, 167, 62, .14)); color: var(--orange, #E0A73E); font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: filter .15s, transform .05s; } .gf-demo-float:hover { filter: brightness(1.12); } .gf-demo-float:active { transform: translateY(1px); } /* On narrow phones drop the label to a compact leaf-only pill so it never crowds the corner or wraps — the leaf glyph stays a legible size. */ @media (max-width: 480px) { .gf-demo-float { padding: 8px 10px; font-size: 15px; gap: 0; } .gf-demo-float span { display: none; } } /* ══════════════════════════════════════════════════════════════════════ SECURE ACCESS login (design/mass-weed-mockup/login.html), rendered by entry.js's loginCardHTML/changePwCardHTML. The reveal machinery above (gf-lw / gf-card show/hide, the shrunk 3D leaf, back-to-leaf) is reused untouched; only the CONTENT of the revealed card changed — so when that content is the two-column Secure Access, the green glass card frame is neutralised and the panel provides its own HUD frame. ══════════════════════════════════════════════════════════════════════ */ .gf-card:has(.mw-secacc) { width: min(880px, 94vw); max-width: 94vw; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* The two-column Secure Access is taller than the old card — give the reveal container room, and let it scroll if the viewport is short. */ .gf-lw:has(.mw-secacc).show { max-height: 82vh; overflow-y: auto; } .mw-secacc { display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; align-items: stretch; text-align: left; } .mw-secacc--single { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } /* left column — boot-log terminal */ .mw-secacc__log { display: flex; flex-direction: column; justify-content: center; padding: 8px 24px 8px 6px; border-right: 1px solid rgba(58,159,212,.15); } .mw-secacc__brand { margin-bottom: 26px; } .mw-secacc__name { font-family: 'Saira Condensed', var(--mw-font-cond, sans-serif); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: 34px; line-height: 1; color: var(--mw-cyan-bright, #8fe3ff); text-shadow: 0 0 22px rgba(94,200,240,.55); } .mw-secacc__node { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--mw-text-dim, #7fa3bd); margin-top: 9px; } .mw-secacc__boot { font-family: 'Saira Condensed', ui-monospace, monospace; font-size: 12.5px; line-height: 1.95; letter-spacing: .02em; color: var(--mw-text-dim, #7fa3bd); } .mw-secacc__boot .hd { color: var(--mw-cyan-bright, #8fe3ff); } .mw-secacc__boot .ok { color: var(--mw-digit, #6cf05a); } .mw-secacc__boot > div { opacity: 0; transform: translateX(-8px); } .mw-secacc__boot > div.in { opacity: 1; transform: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); } .mw-secacc__boot .cursor::after { content: "▌"; color: var(--mw-cyan, #5ec8f0); animation: mw-cursor-blink 1.1s steps(1) infinite; } @keyframes mw-cursor-blink { 0%,50%{opacity:1} 51%,100%{opacity:0} } /* right column — the access panel (already .mw-panel) */ .mw-secacc__panel { padding: 22px 24px 24px; align-self: center; width: 100%; box-sizing: border-box; } .mw-secacc__panel .mw-field { margin-bottom: 14px; } .mw-secacc__panel .mw-field > label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--mw-text-faint, #4d6d87); margin-bottom: 6px; } .mw-secacc__hint { font-size: 12px; color: var(--mw-text-dim, #7fa3bd); margin: -2px 0 14px; line-height: 1.5; } .mw-secacc__panel .gf-msg { text-align: center; } /* stack to one column on narrow screens — boot-log above the panel */ @media (max-width: 640px) { .mw-secacc { grid-template-columns: 1fr; gap: 18px; } .mw-secacc__log { border-right: none; border-bottom: 1px solid rgba(58,159,212,.15); padding: 0 0 16px; } .mw-secacc__name { font-size: 27px; } .gf-card:has(.mw-secacc) { width: min(420px, 94vw); } }