/* ============================================================ NUCLEUS THEME — portable core stylesheet Extracted verbatim from Nucleus Booking (public/app.css). Drop this into any project (Accounting / POS / Inventory) to get the identical login look: square-grid background, centered card, cal.com-style tokens, light + dark. Contains ONLY the shared foundation + auth screen: 1. Design tokens (light) 5. Buttons 2. Design tokens (dark) 6. Fields / inputs 3. Reset + base 7. Status text 4. Auth page + grid bg 8. Theme toggle Requires: Inter from Google Fonts + the inline theme bootstrap script in (see login-template.html). ============================================================ */ /* ── 1. Design tokens — LIGHT (the default) ── */ :root { /* Backgrounds */ --cal-bg: hsla(0, 0%, 100%, 1); /* #ffffff */ --cal-bg-subtle: hsla(220, 14%, 94%, 1); --cal-bg-muted: hsla(210, 20%, 97%, 1); --cal-bg-emphasis: hsla(220, 13%, 91%, 1); --cal-bg-inverted: hsla(210, 30%, 4%, 1); /* Borders */ --cal-border: hsla(216, 12%, 84%, 1); /* ~gray-300 */ --cal-border-subtle: hsla(220, 13%, 91%, 1); /* ~gray-200 */ --cal-border-muted: hsla(220, 14%, 94%, 1); --cal-border-emphasis: hsla(218, 11%, 65%, 1); /* Text */ --cal-text-emphasis: hsla(210, 30%, 4%, 1); /* near-black */ --cal-text: hsla(220, 6%, 25%, 1); /* ~gray-700 */ --cal-text-subtle: hsla(220, 9%, 46%, 1); /* ~gray-500 */ --cal-text-muted: hsla(218, 11%, 65%, 1); /* ~gray-400 */ --cal-text-inverted: hsla(0, 0%, 100%, 1); /* Brand (the black primary button) */ --cal-brand: hsla(221, 39%, 11%, 1); /* ≈ #111827 */ --cal-brand-emphasis: hsla(0, 0%, 6%, 1); /* hover */ --cal-brand-text: hsla(0, 0%, 100%, 1); /* Semantic */ --cal-error: hsla(0, 63%, 31%, 1); /* Grid squares (login background) */ --grid-fill: #f6f7f8; --grid-stroke: rgba(34, 42, 53, 0.06); /* Radius / shadow / font */ --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-btn: 6px; /* squared-off buttons */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.04); --shadow-brand: 0 1px 2px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.14); --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color-scheme: light; } /* ── 2. Design tokens — DARK (applied via data-theme="dark" on ) ── */ :root[data-theme="dark"] { --cal-bg: hsla(0, 0%, 6%, 1); /* ≈ #0f0f0f */ --cal-bg-subtle: hsla(0, 0%, 15%, 1); --cal-bg-muted: hsla(0, 0%, 9%, 1); --cal-bg-emphasis: hsla(0, 0%, 25%, 1); --cal-bg-inverted: hsla(0, 0%, 98%, 1); --cal-border: hsla(0, 0%, 30%, 1); --cal-border-subtle: hsla(0, 0%, 15%, 1); --cal-border-muted: hsla(0, 0%, 9%, 1); --cal-border-emphasis: hsla(0, 0%, 45%, 1); --cal-text-emphasis: hsla(0, 0%, 98%, 1); --cal-text: hsla(0, 0%, 83%, 1); --cal-text-subtle: hsla(0, 0%, 64%, 1); --cal-text-muted: hsla(0, 0%, 64%, 1); --cal-text-inverted: hsla(0, 0%, 0%, 1); --cal-brand: hsla(0, 0%, 100%, 1); /* white button in dark */ --cal-brand-emphasis: hsla(0, 0%, 90%, 1); --cal-brand-text: hsla(0, 0%, 0%, 1); --cal-error: hsla(0, 84%, 70%, 1); --grid-fill: #151515; --grid-stroke: rgba(255, 255, 255, 0.05); --shadow-brand: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); color-scheme: dark; } /* ── 3. Reset / base ── */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--cal-bg); color: var(--cal-text); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; } .muted { color: var(--cal-text-subtle); } .emphasis { color: var(--cal-text-emphasis); } /* ── 4. Auth page — centered card over the square-box grid ── */ .auth-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 16px; position: relative; overflow: hidden; } /* Signature background: a field of rounded squares that fades out from behind the card via a radial mask. NOTE: the square colors are baked into the inline SVG data URL — CSS variables cannot be read inside url(). To recolor, edit the hex INSIDE the two url() strings below (see the kit README). */ .bg-grid { position: fixed; inset: -20px; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68'%3E%3Crect x='4' y='4' width='60' height='60' rx='8' fill='%23f6f7f8' stroke='%23e3e6ea'/%3E%3C/svg%3E"); background-size: 68px 68px; background-position: center; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 44%, #000 0%, transparent 74%); mask-image: radial-gradient(ellipse 62% 58% at 50% 44%, #000 0%, transparent 74%); } :root[data-theme="dark"] .bg-grid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68'%3E%3Crect x='4' y='4' width='60' height='60' rx='8' fill='%23151515' stroke='%23222222'/%3E%3C/svg%3E"); } .auth-col { position: relative; z-index: 1; width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; } .auth-card { width: 100%; background: var(--cal-bg); border: 1px solid var(--cal-border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 40px; text-align: center; } .auth-logo { display: flex; justify-content: center; margin-bottom: 18px; } .auth-logo svg { width: 52px; height: 52px; border-radius: 12px; } .auth-title { margin: 0 0 4px; font-size: 1.4rem; font-weight: 700; color: var(--cal-text-emphasis); letter-spacing: -0.01em; } .auth-subtitle { margin: 0 0 28px; font-size: .9rem; color: var(--cal-text-subtle); } .auth-footer { margin-top: 22px; font-size: .8rem; color: var(--cal-text-muted); } /* Divider with centered label */ .divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--cal-border-subtle); } .divider span { font-size: .8rem; color: var(--cal-text-muted); } /* ── 5. Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-btn); background: var(--cal-bg); color: var(--cal-text); font-family: inherit; font-size: .875rem; font-weight: 500; line-height: 1; cursor: pointer; transition: background .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .12s ease; text-decoration: none; white-space: nowrap; } .btn:disabled { opacity: .4; cursor: default; } .btn-block { width: 100%; } .btn-brand { background: var(--cal-brand); color: var(--cal-brand-text); border-color: var(--cal-brand); box-shadow: var(--shadow-brand); } .btn-brand:not(:disabled):hover { background: var(--cal-brand-emphasis); } .btn-outline { background: var(--cal-bg); color: var(--cal-text); border-color: var(--cal-border); box-shadow: var(--shadow-sm); } .btn-outline:not(:disabled):hover { background: var(--cal-bg-muted); color: var(--cal-text-emphasis); } .btn-ghost { background: transparent; border-color: transparent; color: var(--cal-text-subtle); box-shadow: none; } .btn-ghost:hover { background: var(--cal-bg-subtle); color: var(--cal-text-emphasis); } .btn .gicon { width: 18px; height: 18px; flex: none; } /* The colored Google G stays full-color on the brand button. */ /* ── 6. Fields / inputs ── */ .field { display: block; text-align: left; margin-bottom: 14px; } .field > span { display: block; font-size: .82rem; font-weight: 500; color: var(--cal-text-emphasis); margin-bottom: 6px; } .field input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--cal-border); border-radius: var(--radius-md); /* match the squared buttons */ background: var(--cal-bg); color: var(--cal-text-emphasis); font-family: inherit; font-size: .9rem; transition: border-color .12s ease, box-shadow .12s ease; } .field input::placeholder { color: var(--cal-text-muted); } .field input:focus { outline: none; border-color: var(--cal-border-emphasis); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-border-emphasis) 30%, transparent); } /* Password field with show/hide toggle */ .field-pw { position: relative; } .field-pw input { padding-right: 42px; } .pw-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; background: none; border: none; border-radius: var(--radius-md); color: var(--cal-text-muted); cursor: pointer; } .pw-toggle:hover { color: var(--cal-text-emphasis); } .pw-toggle svg { width: 17px; height: 17px; } /* Show one eye at a time via a class on the button (robust — not the hidden attr). */ .pw-toggle .eye-hide { display: none; } .pw-toggle.revealed .eye-show { display: none; } .pw-toggle.revealed .eye-hide { display: block; } /* Label row with a trailing action (e.g. Password … Forgot?) */ .field-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .field-label-row label { font-size: .82rem; font-weight: 500; color: var(--cal-text-emphasis); } .field-label-row .link-inline { font-size: .8rem; font-weight: 500; color: var(--cal-text-subtle); } .field-label-row .link-inline:hover { color: var(--cal-text-emphasis); } /* "New here? Create an account" switch line */ .auth-switch { margin: 16px 0 0; font-size: .82rem; color: var(--cal-text-subtle); text-align: center; } .link-inline { background: none; border: none; padding: 0; font: inherit; font-weight: 500; color: var(--cal-text-emphasis); cursor: pointer; text-decoration: none; } .link-inline:hover { text-decoration: underline; } /* ── 7. Status / error line ── */ .status { margin-top: 16px; min-height: 1.2em; font-size: .85rem; color: var(--cal-text-subtle); } .status.error { color: var(--cal-error); } /* ── 8. Floating theme toggle (top-right) ── */ .theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 60; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--cal-border-subtle); border-radius: 999px; background: var(--cal-bg); color: var(--cal-text-subtle); cursor: pointer; box-shadow: var(--shadow-sm); } .theme-toggle:hover { color: var(--cal-text-emphasis); border-color: var(--cal-border); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }