/* ========================================================================== CocoaChain — Login (Neomorphism) Scoped to . Loads AFTER components.css/art.css so the neomorphic surface treatment wins over the default flat/glass styling. Neumorphism rule of thumb used throughout: raised -> light from top-left, shadow to bottom-right pressed -> the same pair, inverted and inset Both shadows always derive from --neo-hi / --neo-sh so a single surface colour change re-tunes the whole page. ========================================================================== */ .neo-login { /* soft sage surface sampled from bg_login.png */ --neo-bg: #e5eadd; --neo-bg-2: #dde3d4; --neo-hi: #fbfef6; --neo-sh: #b0b9a2; --neo-dist: 9px; --neo-blur: 20px; --neo-raised: var(--neo-dist) var(--neo-dist) var(--neo-blur) var(--neo-sh), calc(var(--neo-dist) * -1) calc(var(--neo-dist) * -1) var(--neo-blur) var(--neo-hi); --neo-raised-sm: 5px 5px 11px var(--neo-sh), -5px -5px 11px var(--neo-hi); --neo-raised-xs: 3px 3px 7px var(--neo-sh), -3px -3px 7px var(--neo-hi); --neo-pressed: inset 5px 5px 11px var(--neo-sh), inset -5px -5px 11px var(--neo-hi); --neo-pressed-sm: inset 3px 3px 6px var(--neo-sh), inset -3px -3px 6px var(--neo-hi); --neo-lift: 14px 14px 30px var(--neo-sh), -12px -12px 26px var(--neo-hi); /* readable ink on the sage surface */ --neo-ink-1: #24301f; --neo-ink-2: #45523e; --neo-ink-3: #55614e; /* ~5.2:1 on --neo-bg — #6b7862 only made 3.7:1 */ --neo-ink-4: #79866e; --neo-accent: #2f6b2e; background: #12210f; } [data-theme="dark"] .neo-login, .neo-login[data-theme="dark"] { --neo-bg: #1e2620; --neo-bg-2: #19201b; --neo-hi: #2b352d; --neo-sh: #0e1310; --neo-ink-1: #e8efe4; --neo-ink-2: #a9b6a4; --neo-ink-3: #8b9886; --neo-ink-4: #6e7a6a; --neo-accent: #86cc79; } /* ========================================================================== BACKGROUND PHOTO ========================================================================== */ .bg-photo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("../images/bg_login.png"); background-size: cover; background-position: center left; background-repeat: no-repeat; } /* the left third of the photo is the busiest (bright pods + backlit leaves), so the scrim is weighted there to keep the white headline legible */ .bg-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 62% at 20% 62%, rgba(6, 18, 8, .55), transparent 72%), radial-gradient(70% 90% at 78% 50%, rgba(20, 38, 18, .26), transparent 72%), linear-gradient(100deg, rgba(10, 24, 11, .52) 0%, rgba(10, 24, 11, .22) 38%, rgba(10, 24, 11, .10) 58%, rgba(10, 24, 11, .26) 100%); } [data-theme="dark"] .bg-photo::after { background: radial-gradient(70% 90% at 78% 50%, rgba(6, 14, 8, .55), transparent 72%), linear-gradient(100deg, rgba(5, 12, 6, .66) 0%, rgba(5, 12, 6, .42) 42%, rgba(5, 12, 6, .60) 100%); } /* ========================================================================== LAYOUT ========================================================================== */ .neo-login .auth { grid-template-columns: 1.1fr .9fr; } .neo-login .auth-art { background: none; padding: var(--s-10) var(--s-9); gap: var(--s-8); justify-content: space-between; text-shadow: 0 2px 6px rgba(6, 16, 8, .5), 0 6px 28px rgba(6, 16, 8, .6); } .neo-login .auth-art::before { display: none; } /* extra padding so the card's large outer shadow never clips against the edges of this scroll container */ .neo-login .auth-form { background: none; padding: var(--s-8) var(--s-9); } /* frosted plates over the photo — the only glass on the page, used so the left-hand copy stays legible without fighting the neomorphic card */ .neo-plate { display: inline-flex; align-items: center; gap: var(--s-3); padding: 12px 18px; border-radius: var(--r-2xl); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 18px 40px rgba(6, 16, 8, .30), inset 0 1px 0 rgba(255, 255, 255, .28); } /* base.css gives every h1 `color: var(--text-1)` (dark ink), which overrode the white inherited from .auth-art and left the headline unreadable on the photo */ .neo-login .auth-quote { font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 700; line-height: 1.18; max-width: 15ch; letter-spacing: var(--tracking-tight); color: #fff; } .neo-login .auth-quote em { font-style: normal; background: linear-gradient(100deg, #ffe7a8, #f4c76a); -webkit-background-clip: text; background-clip: text; color: transparent; } .neo-login .auth-sub { margin-top: var(--s-4); max-width: 34ch; font-size: var(--text-base); line-height: 1.65; color: rgba(255, 255, 255, .82); } /* ========================================================================== THE NEOMORPHIC CARD ========================================================================== */ .neo-login .auth-card { width: min(540px, 100%); padding: var(--s-8) var(--s-8) var(--s-7); border-radius: 34px; background: linear-gradient(145deg, var(--neo-bg), var(--neo-bg-2)); box-shadow: var(--neo-lift); color: var(--neo-ink-1); animation: neo-rise var(--dur-4) var(--ease-out) both; /* re-point the shared design tokens at the card's own surface so every inherited component (labels, badges, dividers) reads correctly on it */ --text-1: var(--neo-ink-1); --text-2: var(--neo-ink-2); --text-3: var(--neo-ink-3); --text-4: var(--neo-ink-4); --accent-fg: var(--neo-accent); } @keyframes neo-rise { from { opacity: 0; transform: translateY(18px) scale(.985); } } .neo-login .auth-card h2 { color: var(--neo-ink-1); } .neo-login .auth-card .muted, .neo-login .auth-card .dim { color: var(--neo-ink-3); } /* ---- top bar controls -------------------------------------------------- */ .neo-login .icon-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--neo-bg); color: var(--neo-ink-2); box-shadow: var(--neo-raised-sm); transition: box-shadow var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } .neo-login .icon-btn:hover { background: var(--neo-bg); color: var(--neo-accent); } .neo-login .icon-btn:active { transform: none; box-shadow: var(--neo-pressed-sm); } .neo-login .segmented { background: var(--neo-bg); border: none; padding: 5px; border-radius: var(--r-full); box-shadow: var(--neo-pressed-sm); } .neo-login .segmented button { border-radius: var(--r-full); color: var(--neo-ink-3); padding: 0 14px; height: 30px; } .neo-login .segmented button[aria-selected="true"] { background: var(--neo-bg); color: var(--neo-accent); box-shadow: var(--neo-raised-xs); } /* ---- inputs: pressed into the surface ---------------------------------- */ .neo-login .label { color: var(--neo-ink-2); font-size: var(--text-sm); } .neo-login .input { height: 50px; padding: 0 var(--s-4); border: none; border-radius: var(--r-full); background: var(--neo-bg); box-shadow: var(--neo-pressed); color: var(--neo-ink-1); transition: box-shadow var(--dur-2) var(--ease); } .neo-login .input::placeholder { color: var(--neo-ink-4); } .neo-login .input:hover { box-shadow: var(--neo-pressed); } .neo-login .input:focus { outline: none; border: none; box-shadow: var(--neo-pressed), 0 0 0 2px rgba(93, 170, 82, .45); } .neo-login .input:-webkit-autofill { -webkit-text-fill-color: var(--neo-ink-1); -webkit-box-shadow: var(--neo-pressed), inset 0 0 0 100px var(--neo-bg); } .neo-login .input-group .input { padding-left: 46px; } .neo-login .input-group > svg { left: 18px; color: var(--neo-ink-4); } .neo-login .input-group:focus-within > svg { color: var(--neo-accent); } /* ---- checkbox ---------------------------------------------------------- */ .neo-login .checkbox { width: 22px; height: 22px; border: none; border-radius: 8px; background: var(--neo-bg); box-shadow: var(--neo-pressed-sm); } .neo-login .checkbox svg { color: var(--neo-accent); } /* the raised state alone read as a floating tick — an inner ring keeps the box itself visible whether checked or not */ .neo-login .checkbox[aria-checked="true"] { background: var(--neo-bg); box-shadow: var(--neo-raised-xs), inset 0 0 0 1.5px rgba(47, 107, 46, .38); } /* ---- primary CTA: raised, presses in on click -------------------------- */ .neo-login .btn-primary { height: 54px; border-radius: var(--r-full); background: linear-gradient(145deg, var(--brand-400), var(--brand-600)); box-shadow: var(--neo-raised-sm), 0 10px 24px rgba(47, 107, 46, .32); transition: box-shadow var(--dur-2) var(--ease), filter var(--dur-2) var(--ease); } .neo-login .btn-primary:hover { filter: brightness(1.05); box-shadow: 7px 7px 16px var(--neo-sh), -7px -7px 16px var(--neo-hi), 0 14px 30px rgba(47, 107, 46, .38); } .neo-login .btn-primary:active { transform: none; box-shadow: inset 4px 4px 9px rgba(0, 0, 0, .28), inset -3px -3px 8px rgba(255, 255, 255, .18); } /* ---- divider ----------------------------------------------------------- */ .neo-login .or { color: var(--neo-ink-4); } .neo-login .or::before, .neo-login .or::after { height: 2px; border-radius: 2px; background: none; box-shadow: inset 0 1px 1px var(--neo-sh), inset 0 -1px 1px var(--neo-hi); } /* ---- role simulator: trigger button on the card ------------------------ */ .neo-login .btn-role-open { height: 48px; border: none; border-radius: var(--r-full); background: var(--neo-bg); color: var(--neo-ink-2); font-size: var(--text-md); font-weight: 600; box-shadow: var(--neo-raised-sm); transition: box-shadow var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } .neo-login .btn-role-open svg { color: var(--neo-accent); } .neo-login .btn-role-open:hover { color: var(--neo-ink-1); box-shadow: var(--neo-raised); } .neo-login .btn-role-open:active { transform: none; box-shadow: var(--neo-pressed-sm); } .neo-login .btn-role-open .ripple { background: rgba(59, 125, 58, .18); } /* ---- role simulator: modal --------------------------------------------- */ .neo-login .modal-backdrop { background: rgba(8, 16, 10, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .neo-modal { width: min(560px, 100%); border: none; border-radius: 30px; background: linear-gradient(145deg, var(--neo-bg), var(--neo-bg-2)); box-shadow: var(--neo-lift), 0 40px 90px rgba(6, 14, 8, .45); color: var(--neo-ink-1); --text-1: var(--neo-ink-1); --text-2: var(--neo-ink-2); --text-3: var(--neo-ink-3); --text-4: var(--neo-ink-4); --accent-fg: var(--neo-accent); } .neo-modal:focus-visible { outline: none; } .neo-modal .modal-head { padding: var(--s-7) var(--s-7) var(--s-5); } .neo-modal .modal-body { padding: 0 var(--s-7) var(--s-7); } .neo-modal h3 { color: var(--neo-ink-1); } .neo-modal .muted { color: var(--neo-ink-3); } .neo-modal .role-grid { gap: var(--s-4); } @media (max-width: 560px) { .neo-modal { border-radius: 24px; } .neo-modal .role-grid { grid-template-columns: 1fr; } .neo-modal .modal-head { padding: var(--s-6) var(--s-5) var(--s-4); } .neo-modal .modal-body { padding: 0 var(--s-5) var(--s-6); } } /* ---- role simulator cards ---------------------------------------------- */ .neo-login .role-card { border: none; border-radius: var(--r-lg); background: var(--neo-bg); padding: 12px 13px; box-shadow: var(--neo-raised-xs); transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .neo-login .role-card:hover { background: var(--neo-bg); transform: translateY(-2px); box-shadow: var(--neo-raised-sm); } .neo-login .role-card:active { transform: translateY(0); box-shadow: var(--neo-pressed-sm); } .neo-login .role-card .ic { width: 32px; height: 32px; border-radius: 11px; background: var(--neo-bg); color: var(--neo-accent); box-shadow: var(--neo-pressed-sm); } .neo-login .role-card .t { color: var(--neo-ink-1); } .neo-login .role-card .s { color: var(--neo-ink-3); } /* ---- social buttons: round pucks --------------------------------------- */ .neo-login .social-btn { height: 52px; border: none; border-radius: var(--r-full); background: var(--neo-bg); color: var(--neo-ink-2); box-shadow: var(--neo-raised-xs); transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .neo-login .social-btn:hover { background: var(--neo-bg); transform: translateY(-2px); box-shadow: var(--neo-raised-sm); } .neo-login .social-btn:active { transform: translateY(0); box-shadow: var(--neo-pressed-sm); } /* ---- badges inside the card -------------------------------------------- */ .neo-login .auth-card .badge-brand { background: var(--neo-bg); color: var(--neo-accent); padding: 6px 12px; box-shadow: var(--neo-raised-xs); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 940px) { .neo-login .auth { grid-template-columns: 1fr; } .neo-login .auth-form { padding: var(--s-7) var(--s-5); } .bg-photo { background-position: 32% center; } } @media (max-width: 480px) { .neo-login .auth-card { padding: var(--s-6) var(--s-5); border-radius: 26px; } .neo-login { --neo-dist: 7px; --neo-blur: 15px; } } /* short viewports: tighten the card so it stays a single, unscrolled object. 900px covers a 1080p screen at 125% Windows scaling (~840 CSS px tall) */ @media (max-height: 900px) { .neo-login .auth-form { padding: var(--s-6) var(--s-9); } .neo-login .auth-card { padding: var(--s-6) var(--s-7); } .neo-login .input { height: 46px; } .neo-login .btn-primary { height: 50px; } .neo-login .btn-role-open { height: 44px; } .neo-login .social-btn { height: 46px; } } @media (prefers-reduced-motion: reduce) { .neo-login .auth-card { animation: none; } }