/* ============================================================ Recursivitum_DS — Neumorphism (Soft UI) layer (v1.1.0) Method faithful to neumorphism.io (github.com/adamgiebl/neumorphism): each shadow color = channel × (1 + lum), clamped 0–255. dark shadow → lum −0.15 light shadow → lum +0.15 convex/concave gradient (145deg) → lum +0.07 / −0.10 Palette is UNCHANGED — two brand colors act as the soft-UI canvas: light theme canvas = #E4E9F4 (sky-100) dark theme canvas = #242A56 (ink) Load AFTER tokens.css. Put `class="neu"` on (or any wrapper). ============================================================ */ :root { /* —— Light canvas (default) —— */ --neu-bg: #E4E9F4; /* the surface everything is extruded from */ --neu-shadow-dark: #C2C6CF; /* lum −0.15 */ --neu-shadow-light: #FFFFFF; /* lum +0.15 */ --neu-convex: linear-gradient(145deg, #F4F9FF, #CDD2DC); --neu-concave: linear-gradient(145deg, #CDD2DC, #F4F9FF); --neu-text: #242A56; /* navy on light canvas */ --neu-text-2: #4A5578; --neu-text-3: #6B7699; /* accent (sky) — colored raised elements carry their own shadow pair */ --neu-accent: #69ABC1; --neu-accent-dark: #5991A4; /* lum −0.15 */ --neu-accent-light: #79C5DE; /* lum +0.15 */ --neu-accent-text: #FFFFFF; /* feedback stays from the core palette */ --neu-danger: #A8323E; --neu-success: #2E7D5B; /* —— Shadow recipe (distance / blur ≈ 1 : 2) —— */ --neu-raised-sm: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light); --neu-raised-md: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light); --neu-raised-lg: 9px 9px 20px var(--neu-shadow-dark), -9px -9px 20px var(--neu-shadow-light); --neu-raised-xl: 14px 14px 30px var(--neu-shadow-dark), -14px -14px 30px var(--neu-shadow-light); --neu-pressed-sm: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light); --neu-pressed-md: inset 5px 5px 10px var(--neu-shadow-dark), inset -5px -5px 10px var(--neu-shadow-light); --neu-pressed-lg: inset 8px 8px 16px var(--neu-shadow-dark), inset -8px -8px 16px var(--neu-shadow-light); --neu-accent-raised: 6px 6px 12px var(--neu-accent-dark), -6px -6px 12px var(--neu-accent-light); --neu-accent-pressed: inset 5px 5px 10px var(--neu-accent-dark), inset -5px -5px 10px var(--neu-accent-light); --neu-radius: 18px; /* soft UI wants generous corners */ --neu-radius-lg: 26px; --neu-radius-pill: 999px; } /* Dark theme canvas = brand navy. Toggle wins in both directions. Navy has little headroom at ±0.15, so the extrusion read flat — the dark pair is boosted (dark −0.30, light +0.28) and dark cards get a lit sheen. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --neu-bg: #242A56; --neu-shadow-dark: #191D3C; /* boosted for contrast on navy */ --neu-shadow-light: #2E366E; --neu-convex: linear-gradient(145deg, #2B3268, #1E2447); --neu-concave: linear-gradient(145deg, #1E2447, #2B3268); --neu-sheen: linear-gradient(145deg, #272E5E, #21274C); --neu-text: #FFFFFF; --neu-text-2: #C9D2EA; --neu-text-3: #8FA0CC; --neu-accent: #69ABC1; --neu-accent-dark: #4E8598; --neu-accent-light: #84D0E9; } } :root[data-theme="dark"] { --neu-bg: #242A56; --neu-shadow-dark: #191D3C; --neu-shadow-light: #2E366E; --neu-convex: linear-gradient(145deg, #2B3268, #1E2447); --neu-concave: linear-gradient(145deg, #1E2447, #2B3268); --neu-sheen: linear-gradient(145deg, #272E5E, #21274C); --neu-text: #FFFFFF; --neu-text-2: #C9D2EA; --neu-text-3: #8FA0CC; --neu-accent-dark: #4E8598; --neu-accent-light: #84D0E9; } /* Dark cards/buttons get a subtle lit top edge so they read as soft-UI, not flat rectangles. --neu-sheen is only defined in dark themes. */ :root[data-theme="dark"] .neu-card, :root[data-theme="dark"] .neu-raised, :root[data-theme="dark"] .neu-raised-lg, :root[data-theme="dark"] .neu-btn:not(.neu-btn--accent) { background-image: var(--neu-sheen); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .neu-card, :root:not([data-theme="light"]) .neu-raised, :root:not([data-theme="light"]) .neu-raised-lg, :root:not([data-theme="light"]) .neu-btn:not(.neu-btn--accent) { background-image: var(--neu-sheen); } } /* ============================================================ Canvas ============================================================ */ .neu { background: var(--neu-bg); color: var(--neu-text); } /* ============================================================ Surfaces — raised / pressed / concave / convex ============================================================ */ .neu-flat, .neu-card { background: var(--neu-bg); border-radius: var(--neu-radius); box-shadow: var(--neu-raised-lg); } .neu-card { padding: clamp(22px, 3vw, 34px); } .neu-raised { box-shadow: var(--neu-raised-md); border-radius: var(--neu-radius); background: var(--neu-bg); } .neu-raised-lg{ box-shadow: var(--neu-raised-lg); border-radius: var(--neu-radius-lg); background: var(--neu-bg); } .neu-pressed { box-shadow: var(--neu-pressed-md); border-radius: var(--neu-radius); background: var(--neu-bg); } .neu-convex { background: var(--neu-convex); box-shadow: var(--neu-raised-lg); border-radius: var(--neu-radius); } .neu-concave { background: var(--neu-concave); box-shadow: var(--neu-raised-lg); border-radius: var(--neu-radius); } /* ============================================================ Buttons — raised at rest, pressed on click ============================================================ */ .neu-btn { font-family: inherit; font-weight: 700; font-size: 15px; color: var(--neu-text); background: var(--neu-bg); border: none; border-radius: var(--neu-radius-pill); padding: 14px 30px; cursor: pointer; box-shadow: var(--neu-raised-md); transition: box-shadow var(--rx-dur, 220ms) var(--rx-ease, ease), transform var(--rx-dur, 220ms) var(--rx-ease, ease), color var(--rx-dur, 220ms) var(--rx-ease, ease); } .neu-btn:hover { color: var(--neu-accent); } .neu-btn:active { box-shadow: var(--neu-pressed-md); transform: translateY(1px); } /* Accent CTA — sky surface with its own colored shadow pair */ .neu-btn--accent { color: var(--neu-accent-text); background: var(--neu-accent); box-shadow: var(--neu-accent-raised); } .neu-btn--accent:hover { color: #FFFFFF; } .neu-btn--accent:active { box-shadow: var(--neu-accent-pressed); } /* Toggle-style "selected" state = pressed in */ .neu-btn.is-active, .neu-btn[aria-pressed="true"] { box-shadow: var(--neu-pressed-md); color: var(--neu-accent); } /* ============================================================ Inputs — carved in (inset), no borders ============================================================ */ .neu-input { font-family: inherit; font-size: 15px; color: var(--neu-text); background: var(--neu-bg); border: none; border-radius: 14px; padding: 14px 16px; box-shadow: var(--neu-pressed-sm); outline: none; width: 100%; box-sizing: border-box; } .neu-input::placeholder { color: var(--neu-text-3); } .neu-input:focus-visible { box-shadow: var(--neu-pressed-md); } /* ============================================================ Pills / tags / icon chips ============================================================ */ .neu-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neu-text-2); background: var(--neu-bg); border-radius: var(--neu-radius-pill); padding: 8px 16px; box-shadow: var(--neu-raised-sm); } .neu-chip { /* round icon well */ display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--neu-bg); box-shadow: var(--neu-raised-md); color: var(--neu-accent); font-weight: 800; } .neu-chip--pressed { box-shadow: var(--neu-pressed-md); } /* ============================================================ Accessibility — soft UI is low-affordance; keep focus loud ============================================================ */ .neu :where(a, button, input, [tabindex]):focus-visible, .neu-btn:focus-visible { outline: 2px solid var(--neu-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .neu-btn, .rx-glow-card, .rx-glow-card__inner { transition: none; } } /* ============================================================ Glass top bar — frosted, NOT extruded. Logo sits on it clean. Deliberately light-frosted in both themes so the color logo and nav always read (there is no white logo asset). Floats over any canvas. ============================================================ */ .rx-topbar { position: sticky; top: 0; z-index: 50; background: rgba(244, 247, 255, 0.72); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 1px 0 rgba(36, 42, 86, 0.05), 0 10px 30px rgba(36, 42, 86, 0.06); } .rx-topbar__inner { max-width: var(--rx-container, 1160px); margin-inline: auto; padding: 14px var(--rx-gutter, clamp(20px, 5vw, 48px)); display: flex; align-items: center; gap: 20px; } .rx-topbar a { color: #242A56; font-weight: 600; } .rx-topbar a:hover { color: #69ABC1; } .rx-topbar__logo { height: 32px; width: auto; display: block; } /* compact glass button for the bar (e.g. theme toggle) */ .rx-topbar .rx-glass-btn { font-family: inherit; font-weight: 700; font-size: 13px; color: #242A56; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; padding: 9px 16px; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background var(--rx-dur, 220ms) var(--rx-ease, ease); } .rx-topbar .rx-glass-btn:hover { background: rgba(255, 255, 255, 0.85); } /* ============================================================ Accent glow card — adapted from Uiverse.io by Tiagoadag. Recolored to the brand: sky→steel gradient rim + sky glow on hover. Use SPARINGLY, for a single featured / standout element. Markup:

…

============================================================ */ .rx-glow-card { border: 1px solid var(--rx-border-on-dark, #3E4A7E); border-radius: 22px; padding: 0; transition: box-shadow .3s ease, transform .3s ease; } .rx-glow-card:hover { box-shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.35); } .rx-glow-card__inner { background: var(--neu-bg); border-radius: 22px; height: 100%; padding: clamp(20px, 3vw, 32px); transition: transform .2s ease, background .2s ease; } .rx-glow-card:hover .rx-glow-card__inner { background: #1B2046; } /* On the light canvas the inner reads better as pure navy so the sky rim pops */ :root:not([data-theme="dark"]) .rx-glow-card__inner { background: #242A56; color: #FFFFFF; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rx-glow-card__inner { background: #1B2046; } } :root[data-theme="dark"] .rx-glow-card__inner { background: #1B2046; }