/* Clerk's account UI, in QuoteChecker's own material. Clerk renders its account modal and its avatar popover into the page's real DOM — not a shadow root — so every bare-element rule this product ships lands inside it. Three of ours did, and together they are why the settings panel arrived unreadable: - `style.css` `h1 { color: var(--accent); text-shadow: 0 0 10px #0ff3 }` painted "Account" and "Profile details" cyan with a glow, on Clerk's own white card. Light cyan on white is not a heading, it is a smudge. - `style.css` `p { max-width: 40rem; margin: 1rem auto; text-align: center }` centred Clerk's left-aligned helper text. - `design-system.css` `.pro-app button` gave every Clerk control the Pro glass treatment — a grey-blue gradient with a luminous cyan edge — which is right for a Pro control and wrong for a Clerk one, and at (0,1,1) it beat Clerk's own styling. So this sheet does two things, in this order: 1. Takes our element styling back OUT of Clerk's subtree, so Clerk's components look like themselves again. 2. Dresses those components in the site's palette, so they look like they belong here. The colours come from the same tokens the rest of the product reads (`--accent-aaa`, `--surface-aaa`, `--pro-text-*`), with literals as fallbacks because Clerk's modal is portalled to `` and must not depend on being inside a themed subtree. Loaded LAST on the Pro shell, after design-system.css, because several of the rules it has to beat are (0,1,1) — the same specificity — and source order is what decides those. It touches only `.cl-*` subtrees, so nothing else in the shell is affected by where it sits. The colour half of the theme is set twice on purpose: here, and through Clerk's own `appearance.variables` in pro/core/session.js. The variables are the supported contract and drive the parts of the widget that have no stable class to select; these rules cover what our own sheets would otherwise override anyway. See that file for the variable names and where they were verified. */ /* ── 1. Give Clerk its own components back ───────────────────────────────── */ /* (0,1,1), matching the rules being undone rather than escalating past them: `h1` is (0,0,1) and `.pro-app button` is (0,1,1), and this sheet loads later. `!important` is deliberately NOT used — Clerk's `appearance` prop needs to stay able to override anything here, or the supported customisation path stops working. */ .cl-card h1, .cl-card h2, .cl-card h3, .cl-card h4, .cl-userButtonPopoverCard h1, .cl-userButtonPopoverCard h2, .cl-userButtonPopoverCard h3, .cl-userButtonPopoverCard h4 { margin: 0; color: inherit; font-size: inherit; text-shadow: none; } .cl-card p, .cl-userButtonPopoverCard p { max-width: none; margin: 0; text-align: left; } /* Clerk styles its own controls, and it styles them per role — primary, ghost, destructive. Ours painted them all the same. Everything below is a reset to "whatever Clerk asked for", not a restyle. */ .cl-card button, .cl-userButtonPopoverCard button { padding: revert; border: revert; border-radius: revert; background: revert; box-shadow: none; color: revert; font-family: inherit; font-weight: revert; min-height: revert; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; } .cl-card input, .cl-card select, .cl-card textarea, .cl-userButtonPopoverCard input { padding: revert; border: revert; border-radius: revert; background: revert; color: revert; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* ── 2. Dress them in the product's material ─────────────────────────────── */ /* The backdrop matches the Pro shell's own dialog backdrop (app.css `.pro-dialog::backdrop`), so raising Clerk's modal over the workspace reads as the same act as raising one of ours. */ .cl-modalBackdrop { background: rgba(0, 4, 8, 0.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* The card is opaque, like every other modal in the product: a settings panel that lets the animated canvas through its own form reads as a rendering fault, and the one opaque plane is the plane a takeover gets. */ .cl-card, .cl-userButtonPopoverCard, .cl-userProfile-root .cl-navbar { border: 1px solid rgba(var(--accent-aaa-rgb, 47 233 255) / 0.28); background: var(--surface-aaa, #05131a); color: var(--pro-text-primary, #eef8fb); box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72); } /* The nav column reads as one surface with the card it sits in, not a pane stacked on it — the same rule the Pro shell's own rails follow. */ .cl-userProfile-root .cl-navbar { border: 0; border-right: 1px solid rgba(var(--accent-aaa-rgb, 47 233 255) / 0.18); box-shadow: none; } .cl-headerTitle, .cl-profileSectionTitleText, .cl-navbarButtonText, .cl-userPreviewMainIdentifier, .cl-accordionTriggerButton { color: var(--pro-text-primary, #eef8fb); } .cl-headerSubtitle, .cl-profileSectionPrimaryButton, .cl-formFieldLabel, .cl-userPreviewSecondaryIdentifier, .cl-profileSectionContent, .cl-badge { color: var(--pro-text-secondary, #b3ccd6); } .cl-dividerLine, .cl-profileSection { border-color: rgba(var(--accent-aaa-rgb, 47 233 255) / 0.18); background: transparent; } /* Every rule below is prefixed with the card, and that is load-bearing: the reset above is `.cl-card button` at (0,1,1), so a bare `.cl-formButtonPrimary` at (0,1,0) LOSES to it and the primary action renders in the reset's reverted grey. Caught by rendering the real widget — the sign-in button came out grey on a dark card, which is not "quiet", it is broken. Two classes, (0,2,0), and the role styling wins as it must. One filled control per view, the rest quiet — the rule the rest of the product holds to, applied to the widget so it does not arrive with four equally loud buttons. */ .cl-card .cl-formButtonPrimary, .cl-userButtonPopoverCard .cl-formButtonPrimary { border: 1px solid transparent; border-radius: 10px; background: var(--accent-aaa, #2fe9ff); color: #02080e; font-weight: 650; } .cl-card .cl-formButtonPrimary:hover:not(:disabled), .cl-userButtonPopoverCard .cl-formButtonPrimary:hover:not(:disabled) { background: var(--accent-hover, #8af6ff); } .cl-card .cl-formButtonReset, .cl-card .cl-profileSectionPrimaryButton, .cl-card .cl-navbarButton, .cl-userButtonPopoverCard .cl-userButtonPopoverActionButton, .cl-userButtonPopoverCard .cl-userButtonPopoverAction { border-radius: 10px; background: transparent; color: var(--pro-text-secondary, #b3ccd6); } .cl-card .cl-profileSectionPrimaryButton:hover, .cl-card .cl-navbarButton:hover, .cl-userButtonPopoverCard .cl-userButtonPopoverActionButton:hover, .cl-userButtonPopoverCard .cl-userButtonPopoverAction:hover { background: rgba(var(--accent-aaa-rgb, 47 233 255) / 0.12); color: var(--pro-text-primary, #eef8fb); } .cl-card .cl-navbarButton[data-active="true"], .cl-card .cl-navbarButton.cl-active { background: rgba(var(--accent-aaa-rgb, 47 233 255) / 0.16); color: var(--accent-aaa, #2fe9ff); } .cl-card .cl-formFieldInput, .cl-card .cl-input, .cl-userButtonPopoverCard .cl-formFieldInput { border: 1px solid rgba(var(--accent-aaa-rgb, 47 233 255) / 0.3); border-radius: 10px; background: rgba(4, 18, 28, 0.9); color: var(--pro-text-primary, #eef8fb); } .cl-card .cl-formFieldInput:focus-visible, .cl-card .cl-input:focus-visible, .cl-userButtonPopoverCard .cl-formFieldInput:focus-visible { outline: 2px solid var(--accent-aaa, #2fe9ff); outline-offset: 2px; } /* Clerk's close control sits over the card, so it takes the card's own ink rather than the near-black it assumes on a white surface. */ .cl-modalCloseButton { color: var(--pro-text-secondary, #b3ccd6); } .cl-modalCloseButton:hover { color: var(--pro-text-primary, #eef8fb); background: rgba(var(--accent-aaa-rgb, 47 233 255) / 0.14); }