/* ========================================================================== PKRM Labs — frontend service stylesheet. Premium SaaS UI on top of Bootstrap 5. Designed for both the public marketing site and the authenticated tenant + platform admin shells. ========================================================================== */ :root { --fe-bg: #f6f7fb; --fe-surface: #ffffff; --fe-surface-alt: #fafbff; --fe-border: #e5e7eb; --fe-border-strong: #d4d8e0; --fe-text: #0f172a; --fe-text-muted: #6b7280; --fe-primary: #4f46e5; --fe-primary-soft: #eef2ff; --fe-primary-strong: #3730a3; --fe-accent: #06b6d4; --fe-success: #16a34a; --fe-warning: #f59e0b; --fe-danger: #dc2626; --fe-radius: 14px; --fe-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04); --fe-shadow: 0 4px 24px rgba(15, 23, 42, .08); --fe-shadow-lg: 0 16px 48px rgba(15, 23, 42, .12); --fe-platform-bg: #0e1525; --fe-platform-border: #1f2a44; --fe-platform-accent: #fbbf24; } [data-bs-theme="light"] { --bs-primary: var(--fe-primary); --bs-primary-rgb: 79, 70, 229; --bs-link-color: var(--fe-primary); --bs-link-hover-color: var(--fe-primary-strong); } html, body { height: 100%; } html, body { /* ``overflow-x: clip`` (preferred over ``hidden`` because it does NOT create a scroll container on the document and therefore doesn't break ``position: sticky`` on descendants) prevents the whole page from rocking left/right on mobile + iPad when an HTMX swap brings in content that's slightly wider than the viewport (e.g. a long UA string, a long IP, a wide button row). Without this guard the browser silently grows the document width to fit the offending element and the user feels it as a horizontal jiggle every time a fragment is replaced. Older Safari that lacks ``clip`` falls through to the cheaper ``hidden`` form below. */ overflow-x: hidden; overflow-x: clip; max-width: 100%; } body { background: var(--fe-bg); color: var(--fe-text); font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .fe-public-main { min-height: calc(100vh - 64px); display: flex; flex-direction: column; } /* -------------------------------------------------------------------------- Brand mark (used in navbar / sidebar / auth aside) -------------------------------------------------------------------------- */ .fe-brand-mark { display: inline-flex; align-items: center; gap: .65rem; font-weight: 700; letter-spacing: .2px; color: var(--fe-text); } .fe-brand-mark:hover { color: var(--fe-primary); } .fe-brand-dot { width: 26px; height: 26px; border-radius: 9px; background: linear-gradient(135deg, var(--fe-primary), var(--fe-accent)); box-shadow: 0 6px 18px rgba(79, 70, 229, .35); position: relative; } .fe-brand-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 6px; background: rgba(255, 255, 255, .25); } .fe-brand-dot--admin { background: linear-gradient(135deg, var(--fe-platform-accent), #f97316); box-shadow: 0 6px 18px rgba(251, 191, 36, .45); } .fe-brand-text { font-size: 1.05rem; } /* -------------------------------------------------------------------------- Public marketing nav + footer -------------------------------------------------------------------------- */ .fe-public-nav { background: rgba(255, 255, 255, .85); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(15, 23, 42, .06); } .fe-public-nav .nav-link { font-weight: 500; color: var(--fe-text-muted); } .fe-public-nav .nav-link.active, .fe-public-nav .nav-link:hover { color: var(--fe-text); } /* -------------------------------------------------------------------------- Footer — dark-context theme -------------------------------------------------------------------------- The footer sits on ``#0e1525`` (very dark slate-blue). Bootstrap 5.3's light-theme CSS variables resolve ``--bs-body-color`` / ``--bs-secondary-color`` to dark grays, which made every ``text-body-secondary`` / ``text-muted`` / ```` / ```` inside the footer effectively invisible (visible only when the user dragged a selection over it, which inverted the colors). Rather than patch every template that drops a utility class into the footer, we re-bind Bootstrap's variables inside ``.fe-public-footer`` so all of these resolve to contrast-correct values on the dark background. WCAG AA targets: * Body text #cbd5e1 on #0e1525 → ~12:1 (AAA) * Muted text #94a3b8 on #0e1525 → ~7:1 (AAA normal, AA large) * Heading label #cbd5e1 (kept bright) * Hover link #ffffff (max contrast) This single block fixes the footer globally on every breakpoint and for any new partial that lives under ``.fe-public-footer``. -------------------------------------------------------------------------- */ .fe-public-footer { background: #0e1525; color: #cbd5e1; /* Bootstrap variable overrides — every utility class derived from these (.text-body, .text-body-secondary, .text-muted, .small, headings, links) automatically picks up the dark-context palette. */ --bs-body-color: #cbd5e1; --bs-body-color-rgb: 203, 213, 225; --bs-secondary-color: #94a3b8; --bs-secondary-color-rgb: 148, 163, 184; --bs-tertiary-color: #64748b; --bs-tertiary-color-rgb: 100, 116, 139; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-heading-color: #ffffff; --bs-link-color: #cbd5e1; --bs-link-color-rgb: 203, 213, 225; --bs-link-hover-color: #ffffff; --bs-link-hover-color-rgb: 255, 255, 255; --bs-border-color: #1f2a44; --bs-border-color-translucent: rgba(255, 255, 255, .12); } /* Headings + the small "PLATFORM / SERVICES / TALK TO US" labels. Headings tags themselves inherit ``--bs-heading-color`` (bright white). The eyebrow class stays in slate-300 so it reads as a label, not a primary heading, while still passing AA on the dark background. */ .fe-public-footer h1, .fe-public-footer h2, .fe-public-footer h3, .fe-public-footer h4, .fe-public-footer h5, .fe-public-footer h6 { color: #ffffff; } .fe-footer-heading { font-size: .75rem; letter-spacing: .12em; color: #cbd5e1; margin-bottom: .85rem; } /* Links — set every interaction state explicitly so the browser default purple-on-visited and the inherited ``text-body-secondary`` colour can never make a link invisible. */ .fe-public-footer a, .fe-public-footer a:link, .fe-public-footer a:visited { color: #cbd5e1; text-decoration: none; } .fe-public-footer a:hover, .fe-public-footer a:focus, .fe-public-footer a:focus-visible { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; } .fe-public-footer a:focus-visible { outline: 2px solid #fbbf24; outline-offset: 3px; border-radius: 2px; } /* Force-fix any remnant utility class that ignores the variable re-binding (older Bootstrap builds, custom utility shims, etc.). Targeted with explicit selectors so they only apply *inside* the footer — the rest of the site keeps Bootstrap's defaults. */ .fe-public-footer .text-body-secondary, .fe-public-footer .text-muted, .fe-public-footer small, .fe-public-footer .small { color: #94a3b8 !important; opacity: 1; } .fe-public-footer p, .fe-public-footer li, .fe-public-footer .text-body { color: #cbd5e1; } .fe-footer-links { margin-bottom: 0; } .fe-footer-links li { margin-bottom: .45rem; } .fe-footer-rule { border-color: #1f2a44; border-top-width: 1px; opacity: 1; margin: 2.25rem 0 1.5rem; } /* "Start a conversation" call-to-action button on the dark footer — make sure ``.btn-outline-light`` keeps full visibility on hover (BS default already does this; we restate it so a future BS upgrade can't regress the contrast). */ .fe-public-footer .btn-outline-light { color: #ffffff; border-color: rgba(255, 255, 255, .55); } .fe-public-footer .btn-outline-light:hover, .fe-public-footer .btn-outline-light:focus-visible { color: #0e1525; background: #ffffff; border-color: #ffffff; } /* -------------------------------------------------------------------------- Marketing hero + section primitives -------------------------------------------------------------------------- */ .fe-hero { background: radial-gradient(1200px 600px at 80% -10%, rgba(79, 70, 229, .18), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(6, 182, 212, .14), transparent 60%), linear-gradient(180deg, #f9fafc 0%, #f6f7fb 100%); border-bottom: 1px solid rgba(15, 23, 42, .04); } .fe-eyebrow { display: inline-flex; align-items: center; gap: .4rem; background: var(--fe-primary-soft); color: var(--fe-primary-strong); font-weight: 600; font-size: .8rem; letter-spacing: .04em; padding: .35rem .75rem; border-radius: 999px; } .fe-section { padding: 5rem 0; } .fe-section + .fe-section { padding-top: 0; } .fe-section-title { font-weight: 700; letter-spacing: -0.01em; } .fe-feature-card { background: var(--fe-surface); border: 1px solid var(--fe-border); border-radius: var(--fe-radius); padding: 1.75rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; height: 100%; } .fe-feature-card:hover { transform: translateY(-2px); box-shadow: var(--fe-shadow); border-color: var(--fe-border-strong); } .fe-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--fe-primary-soft); color: var(--fe-primary-strong); font-size: 1.25rem; margin-bottom: 1rem; } .fe-cta { background: linear-gradient(135deg, #4f46e5, #06b6d4); border-radius: 24px; color: #fff; padding: 4rem; } .fe-cta .btn-light { color: var(--fe-primary-strong); font-weight: 600; } /* -------------------------------------------------------------------------- Auth shell (login/register/forgot/reset) -------------------------------------------------------------------------- */ .fe-auth-shell { min-height: 100vh; display: flex; } .fe-auth-aside { width: 42%; background: linear-gradient(160deg, #4f46e5 0%, #06b6d4 50%, #1d4ed8 100%); color: #fff; padding: 3rem; position: relative; overflow: hidden; } .fe-auth-aside::before { content: ""; position: absolute; inset: -50% -10% auto auto; width: 480px; height: 480px; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%); } .fe-auth-aside-body { margin-top: auto; max-width: 460px; } .fe-auth-aside-list { font-size: 1rem; } .fe-auth-aside-list li { display: flex; align-items: center; gap: .65rem; margin-bottom: .65rem; color: #e0e7ff; } .fe-auth-aside-list i { color: #fff; } .fe-auth-aside-footer { margin-top: auto; font-size: .8rem; } .fe-auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; background: #fff; } .fe-auth-card { width: 100%; max-width: 440px; } .fe-auth-card h1 { font-weight: 700; } /* -------------------------------------------------------------------------- App shell (tenant + platform variants) -------------------------------------------------------------------------- */ .fe-app-shell { display: flex; min-height: 100vh; max-width: 100%; } .fe-app-main { /* ``min-width: 0`` is required on every flex item that can hold long unbroken content (URLs, UA strings, IPs). Without it a single wide child (e.g. a session row whose UA string doesn't break at any space) forces the column to grow past the viewport and the whole app shell scrolls horizontally on mobile. */ flex: 1; min-width: 0; max-width: 100%; display: flex; flex-direction: column; } .fe-app-content { padding: 1.75rem 2rem; flex: 1; min-width: 0; } @media (max-width: 991.98px) { .fe-app-content { padding: 1.25rem 1rem; } } /* Long-text safety net inside the app shell. Anything inside the main content (UA strings, device labels, IP addresses, error tracebacks) wraps even when it has no natural break opportunity. */ .fe-app-content { overflow-wrap: anywhere; word-break: break-word; } /* Tiny utility classes Bootstrap's default build does not ship. ``min-w-0`` is the canonical "let me shrink inside a flex parent" helper; ``w-md-auto`` reverts a ``w-100`` to natural width on >= md screens which is the standard "full-width on phones, inline on desktop" recipe. */ .min-w-0 { min-width: 0 !important; } @media (min-width: 768px) { .w-md-auto { width: auto !important; } } /* Sidebar */ .fe-sidebar { width: 264px; background: var(--fe-surface); border-right: 1px solid var(--fe-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 1040; } .fe-sidebar--platform { background: var(--fe-platform-bg); border-right-color: var(--fe-platform-border); color: #cbd5e1; } .fe-sidebar--platform .fe-brand-mark { color: #fff; } .fe-sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--fe-border); } .fe-sidebar--platform .fe-sidebar-brand { border-bottom-color: var(--fe-platform-border); } .fe-sidebar-nav { padding: 1rem .75rem; flex: 1; overflow-y: auto; } .fe-sidebar-link { display: flex; align-items: center; gap: .7rem; padding: .55rem .85rem; border-radius: 10px; color: var(--fe-text-muted); text-decoration: none; font-weight: 500; margin-bottom: .15rem; } .fe-sidebar-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; } .fe-sidebar-link:hover { background: var(--fe-primary-soft); color: var(--fe-primary-strong); } .fe-sidebar-link.active { background: var(--fe-primary-soft); color: var(--fe-primary-strong); font-weight: 600; } .fe-sidebar--platform .fe-sidebar-link { color: #94a3b8; } .fe-sidebar--platform .fe-sidebar-link:hover { background: rgba(251, 191, 36, .08); color: #fde68a; } .fe-sidebar--platform .fe-sidebar-link.active { background: rgba(251, 191, 36, .12); color: var(--fe-platform-accent); border-left: 3px solid var(--fe-platform-accent); } .fe-sidebar-link--platform { color: var(--fe-warning) !important; font-weight: 600; } .fe-sidebar-section { padding: 1.25rem .85rem .35rem; font-size: .68rem; letter-spacing: .12em; color: var(--fe-text-muted); text-transform: uppercase; } .fe-sidebar--platform .fe-sidebar-section { color: #64748b; } .fe-sidebar-footer { padding: .75rem; border-top: 1px solid var(--fe-border); } .fe-sidebar--platform .fe-sidebar-footer { border-top-color: var(--fe-platform-border); } @media (max-width: 991.98px) { .fe-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .25s ease; } .fe-sidebar--open { transform: translateX(0); box-shadow: var(--fe-shadow-lg); } } .fe-sidebar-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .42); z-index: 1039; display: none; } @media (max-width: 991.98px) { .fe-sidebar-backdrop[style*="display: block"], .fe-sidebar-backdrop[x-show] { display: block; } } /* Topbar */ .fe-topbar { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.5rem; border-bottom: 1px solid var(--fe-border); background: var(--fe-surface); position: sticky; top: 0; z-index: 1030; } .fe-topbar--platform { background: var(--fe-platform-bg); border-bottom-color: var(--fe-platform-border); color: #cbd5e1; } .fe-topbar-toggle { font-size: 1.5rem; color: var(--fe-text); } .fe-topbar--platform .fe-topbar-toggle { color: #fff; } .fe-topbar-search { position: relative; /* Was a hard ``min-width: 320px`` which forced the topbar wider than the viewport on iPad portrait (768px) once the bell + user button were laid out alongside it, producing a horizontal scrollbar that made the page jitter left/right on every HTMX swap. Letting it shrink (and only growing when there's room) keeps the topbar in viewport on every breakpoint. */ flex: 1 1 240px; min-width: 0; max-width: 480px; } .fe-topbar-search .form-control { padding: .55rem 3rem .55rem 2.25rem; background: var(--fe-surface-alt); border-color: var(--fe-border); } .fe-topbar-search-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--fe-text-muted); } .fe-topbar-search-kbd { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: #fff; color: var(--fe-text-muted); border: 1px solid var(--fe-border); font-size: .7rem; padding: .15rem .4rem; border-radius: 6px; } .fe-topbar-platform-title { display: inline-flex; align-items: center; gap: .55rem; color: #fde68a; font-weight: 600; } .fe-topbar-user-btn { display: inline-flex; align-items: center; gap: .65rem; background: transparent; border: 1px solid var(--fe-border); border-radius: 999px; padding: .25rem .85rem .25rem .25rem; color: var(--fe-text); cursor: pointer; } .fe-topbar-user-btn:hover { background: var(--fe-surface-alt); } .fe-topbar--platform .fe-topbar-user-btn { border-color: var(--fe-platform-border); color: #fff; } .fe-topbar--platform .fe-topbar-user-btn:hover { background: rgba(255,255,255,.06); } .fe-topbar-user-text { display: flex; flex-direction: column; line-height: 1.1; } .fe-avatar { width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg, var(--fe-primary), var(--fe-accent)); color: #fff; font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; } .fe-avatar--admin { background: linear-gradient(135deg, var(--fe-platform-accent), #f97316); color: #1f2937; } /* Bell */ .fe-bell-btn { color: var(--fe-text); font-size: 1.15rem; } .fe-topbar--platform .fe-bell-btn { color: #fff; } .fe-bell-badge { font-size: .65rem; padding: .25rem .35rem; } /* Cap the dropdown at the viewport so it never causes horizontal scroll on phones (a hard 360px would clip on a 320px-wide iPhone SE and the global ``overflow-x: clip`` would visually swallow the right edge). */ .fe-bell-menu { width: min(360px, calc(100vw - 1rem)); max-height: min(480px, calc(100vh - 6rem)); overflow-y: auto; } .fe-bell-list { max-height: 320px; overflow-y: auto; } .fe-bell-item { display: flex; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--fe-border); } .fe-bell-item--unread { background: var(--fe-primary-soft); } .fe-bell-item-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--fe-surface-alt); display: inline-flex; align-items: center; justify-content: center; } .fe-bell-item-title { font-weight: 600; font-size: .9rem; } .fe-bell-item-text { font-size: .85rem; color: var(--fe-text-muted); } .fe-bell-item-time { font-size: .75rem; color: var(--fe-text-muted); margin-top: .15rem; } /* KPI cards */ .fe-kpi-card { border-radius: var(--fe-radius); } .fe-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; } .fe-kpi-icon--primary { background: var(--fe-primary-soft); color: var(--fe-primary-strong); } .fe-kpi-icon--success { background: #dcfce7; color: #166534; } .fe-kpi-icon--warning { background: #fef3c7; color: #92400e; } .fe-kpi-icon--danger { background: #fee2e2; color: #991b1b; } .fe-kpi-icon--info { background: #cffafe; color: #155e75; } .fe-kpi-value { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; } /* Table card */ .fe-table-card { background: var(--fe-surface); border: 1px solid var(--fe-border); border-radius: var(--fe-radius); overflow: hidden; } .fe-table-card thead th { background: var(--fe-surface-alt); font-size: .75rem; letter-spacing: .04em; color: var(--fe-text-muted); text-transform: uppercase; border-bottom: 1px solid var(--fe-border); } .fe-table-card tbody td { vertical-align: middle; } .fe-table-card tbody tr:hover { background: var(--fe-surface-alt); } /* Skeleton fade-in for HTMX swaps */ .htmx-swapping { opacity: 0; transition: opacity .2s ease; } .htmx-settling { opacity: 1; } .htmx-request { cursor: progress; } .htmx-indicator { display: none; } .htmx-request .htmx-indicator { display: inline-flex; } /* Empty / error / skeleton */ .fe-empty-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--fe-primary-soft); color: var(--fe-primary-strong); font-size: 1.7rem; display: inline-flex; align-items: center; justify-content: center; } /* Flash stack */ .fe-flash-stack { position: fixed; top: 1rem; right: 1rem; max-width: min(520px, 90vw); z-index: 1080; display: flex; flex-direction: column; gap: .5rem; } /* Form polish */ .form-control:focus, .form-select:focus { border-color: var(--fe-primary); box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .12); } .btn-primary { --bs-btn-bg: var(--fe-primary); --bs-btn-border-color: var(--fe-primary); --bs-btn-hover-bg: var(--fe-primary-strong); --bs-btn-hover-border-color: var(--fe-primary-strong); --bs-btn-active-bg: var(--fe-primary-strong); --bs-btn-active-border-color: var(--fe-primary-strong); font-weight: 600; } .btn-outline-primary { --bs-btn-color: var(--fe-primary-strong); --bs-btn-border-color: var(--fe-primary); --bs-btn-hover-bg: var(--fe-primary-soft); --bs-btn-hover-color: var(--fe-primary-strong); --bs-btn-hover-border-color: var(--fe-primary); } /* Responsive helpers */ @media (max-width: 575.98px) { .fe-cta { padding: 2rem; border-radius: 18px; } } /* -------------------------------------------------------------------------- Security center (sessions / devices / change-password) — mobile + iPad guards. Without these the long ``user_agent`` / ``device_label`` strings overflow the viewport on phones, the body widens to accommodate them, and every HTMX swap causes the page to jiggle left/right as the layout re-stabilises. The rules below clamp every long-text node to the card width and let the actions stack underneath the description on narrow screens instead of fighting for room next to it. -------------------------------------------------------------------------- */ .fe-device-row { /* row-level container so we can reach descendants without polluting the global ``.list-unstyled`` selector. */ } .fe-device-row > .d-flex { min-width: 0; } .fe-device-row .fe-device-text { /* The text column inside each row must be allowed to shrink below its content's intrinsic min-width. ``min-width: 0`` lets ``overflow-wrap`` actually take effect inside a flex parent. */ min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; word-break: break-word; } .fe-device-row .fe-device-icon { /* Fixed footprint so the icon column never affects the available room for text — prevents the row layout from "breathing" after each swap. */ width: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; } .fe-device-row .fe-device-actions { /* On phones the action button sits below the text instead of being squeezed next to it; on >= md it returns to the right side. */ flex: 0 0 auto; } @media (max-width: 767.98px) { .fe-device-row .fe-device-actions { align-self: flex-end; } .fe-device-row .btn-group { /* Sign-out + Sign-out-everywhere split into two rows on phones so neither button is ever clipped or pushes the card past viewport. */ display: flex; flex-wrap: wrap; gap: .35rem; } .fe-device-row .btn-group > .btn { flex: 1 1 auto; } } /* ========================================================================= Plan cards (shared across onboarding, /plans, marketplace product detail) Tier-keyed accent via data-tier attribute keeps a single stylesheet instead of forking per-tier markup. :has() promotes the chosen card in the onboarding picker without any JS. Activate-form cards (marketplace / /plans) skip the radio and the :has() hover collapses to the default border-color transition. ========================================================================= */ .fe-plan-grid { --fe-plan-radius: 1rem; } .fe-plan-card { --tier-color: #6366f1; --tier-color-strong: #4f46e5; display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: var(--fe-plan-radius); padding: 2rem 1.5rem 1.75rem; position: relative; overflow: hidden; height: 100%; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .fe-plan-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--tier-color), var(--tier-color-strong)); } .fe-plan-card[data-tier="starter"] { --tier-color: #14b8a6; --tier-color-strong: #0d9488; } .fe-plan-card[data-tier="growth"] { --tier-color: #0ea5e9; --tier-color-strong: #0284c7; } .fe-plan-card[data-tier="professional"] { --tier-color: #6366f1; --tier-color-strong: #4f46e5; } .fe-plan-card[data-tier="premium"] { --tier-color: #8b5cf6; --tier-color-strong: #6d28d9; } .fe-plan-card[data-tier="enterprise"] { --tier-color: #a855f7; --tier-color-strong: #7e22ce; } .fe-plan-card[data-tier="ultimate"] { --tier-color: #f59e0b; --tier-color-strong: #b45309; } /* -- Per-tier visual uniqueness ------------------------------------------- The grid still uses the same .fe-plan-card base so layout/typography stays consistent, but each tier picks up its own personality so the user can tell tiers apart at a glance without reading the labels. Variations are intentionally small (scale, shadow, background tint, accent thickness) so the grid still feels like ONE family of cards rather than five disconnected designs. */ /* Starter — calm, flat icon disc; minimal shadow; "entry tier" feel. */ .fe-plan-card[data-tier="starter"] .fe-plan-icon { background: color-mix(in srgb, var(--tier-color) 14%, #fff); color: var(--tier-color-strong); border: 1px solid color-mix(in srgb, var(--tier-color) 35%, transparent); box-shadow: none; } /* Growth — keeps the default gradient icon but warms the card with a subtle right-edge wash so it reads slightly bolder than Starter. */ .fe-plan-card[data-tier="growth"] { background: linear-gradient(135deg, #fff 60%, color-mix(in srgb, var(--tier-color) 6%, #fff)); } /* Professional — the "recommended" tier. Slightly larger, deeper shadow, thicker top accent stripe, larger icon disc; reads as the default-good-choice without needing to lean on the ribbon alone. */ .fe-plan-card[data-tier="professional"] { transform: scale(1.02); background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--tier-color) 7%, #fff) 100%); box-shadow: 0 26px 44px -22px color-mix(in srgb, var(--tier-color) 55%, transparent); border-color: color-mix(in srgb, var(--tier-color) 28%, transparent); } .fe-plan-card[data-tier="professional"]::before { height: 6px; } .fe-plan-card[data-tier="professional"] .fe-plan-icon { width: 3.5rem; height: 3.5rem; font-size: 1.55rem; } .fe-plan-card[data-tier="professional"]:hover { transform: scale(1.02) translateY(-2px); } /* Premium — sits between Professional and Enterprise; mid-purple gradient sash on the corner to signal "step up from pro" without competing with the recommended ribbon. */ .fe-plan-card[data-tier="premium"] { background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--tier-color) 7%, #fff) 100%); border-color: color-mix(in srgb, var(--tier-color) 24%, transparent); } .fe-plan-card[data-tier="premium"]::before { height: 5px; } /* Enterprise — violet luxury wash; thicker bottom border to feel weighty and "for serious teams". */ .fe-plan-card[data-tier="enterprise"] { background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--tier-color) 8%, #fff) 100%); border-bottom: 3px solid color-mix(in srgb, var(--tier-color) 35%, transparent); } /* Ultimate — gold "founders' club" treatment: warm cream background + gold accent stripe (overrides the default gradient stripe). */ .fe-plan-card[data-tier="ultimate"] { background: linear-gradient(180deg, #fff 0%, #fffbeb 100%); } .fe-plan-card[data-tier="ultimate"]::before { background: linear-gradient(90deg, #fbbf24, #d97706); height: 5px; } .fe-plan-card[data-tier="ultimate"] .fe-plan-icon { background: linear-gradient(135deg, #fde68a, #d97706); } .fe-plan-card:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.35); border-color: var(--tier-color); } /* :has() lights up the onboarding picker's selected card. Browsers that don't support :has() simply fall back to the hover state. */ .fe-plan-card:has(input[type="radio"]:checked) { border-color: var(--tier-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier-color) 18%, transparent), 0 18px 32px -22px rgba(15, 23, 42, 0.35); } .fe-plan-card .fe-plan-radio { /* The radio is visually hidden but still keyboard-accessible — the parent