/* ===================================================================== WorkDu Frontend — LinkedIn UI theme --------------------------------------------------------------------- Loaded at the END of in frontend/layouts/app.blade.php, i.e. after dashboard-redesign.css and the sidebar component stylesheets, which are themselves emitted from inside the body. Being last is what makes this layer win without specificity hacks. SCOPE: every rule is nested under `body.li-app`. That class is only printed by frontend/layouts/app.blade.php (the signed-in app shell), so the guest marketing homepage — which extends frontend.layouts.public — never sees any of this. Removing the class, or the , reverts the frontend completely. LinkedIn's visual language, as applied here: - One blue (#0a66c2) for every interactive / primary surface. - Warm off-white page (#f4f2ee) with pure white cards. - Cards are flat: 8px radius, 1px hairline border, NO drop shadow. - Buttons are full pills, 600 weight; secondary = blue outline. - Hairline dividers instead of heavy borders; no gradients. ===================================================================== */ /* ===================================================================== 1. TOKENS --------------------------------------------------------------------- Custom properties are declared on , not :root. A property set on body beats the same property inherited from html — even an !important one, because they are different elements — so this single block repaints every rule in dashboard-redesign.css and the layout that already reads through var(). No selector duplication needed. ===================================================================== */ body.li-app { /* --- LinkedIn palette --- */ --li-blue: #0a66c2; --li-blue-hover: #004182; --li-blue-active: #09223b; --li-blue-tint: rgba(10, 102, 194, 0.08); --li-blue-tint-strong: rgba(10, 102, 194, 0.15); --li-ring: rgba(10, 102, 194, 0.30); --li-bg: #f4f2ee; --li-surface: #ffffff; --li-ink: rgba(0, 0, 0, 0.9); --li-ink-muted: rgba(0, 0, 0, 0.6); --li-ink-faint: rgba(0, 0, 0, 0.45); --li-border: rgba(0, 0, 0, 0.08); --li-border-mid: rgba(0, 0, 0, 0.15); --li-border-strong: rgba(0, 0, 0, 0.6); --li-green: #01754f; --li-green-hover: #015c3f; --li-green-tint: rgba(1, 117, 79, 0.10); --li-red: #b24020; --li-red-tint: rgba(178, 64, 32, 0.10); --li-amber: #915907; --li-amber-tint: rgba(145, 89, 7, 0.12); --li-radius: 8px; --li-radius-sm: 4px; --li-pill: 999px; /* --- Re-point the existing WorkDu tokens at LinkedIn --- */ --workdu-primary: #0a66c2; --workdu-light: #f4f2ee; --primary-500: #0a66c2; --primary-600: #004182; --primary-200: #9cc3e9; --primary-100: #cfe3f6; --primary-50: #eaf2fb; /* Flat surfaces: neutralise the blue-tinted drop shadows. */ --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12); /* --- Dashboard shell tokens (dashboard-redesign.css) --- */ --dash-primary: #0a66c2; --dash-primary-dark: #004182; --dash-secondary: #915907; --dash-success: #01754f; --dash-danger: #b24020; --dash-purple: #6e4fa3; --dash-cyan: #0a66c2; --dash-pink: #b24020; --dash-yellow: #915907; --dash-surface: #ffffff; --dash-bg: #f4f2ee; --dash-border: rgba(0, 0, 0, 0.08); --dash-text: rgba(0, 0, 0, 0.9); --dash-muted: rgba(0, 0, 0, 0.6); --dash-sidebar-bg: #ffffff; --dash-sidebar-active: #0a66c2; --dash-sidebar-text: rgba(0, 0, 0, 0.6); --dash-sidebar-hover: rgba(0, 0, 0, 0.04); --dash-sidebar-line: rgba(0, 0, 0, 0.08); --dash-sidebar-ink: rgba(0, 0, 0, 0.9); --dash-sidebar-tint: rgba(10, 102, 194, 0.08); } /* ===================================================================== 2. PAGE CANVAS ===================================================================== */ body.li-app { background: var(--li-bg) !important; color: var(--li-ink); } body.li-app .main-page-content, body.li-app .dashboard-wrapper, body.li-app .dashboard-main { background: transparent !important; } /* ===================================================================== 3. TOP NAVBAR — white sheet, hairline rule, ink icons ===================================================================== */ body.li-app .navbar, body.li-app header .navbar, body.li-app .main-navbar, body.li-app .site-header { background: var(--li-surface) !important; border-bottom: 1px solid var(--li-border) !important; box-shadow: none !important; } body.li-app .navbar .nav-link, body.li-app .navbar-nav .nav-link { color: var(--li-ink-muted) !important; font-weight: 500; } body.li-app .navbar .nav-link:hover, body.li-app .navbar-nav .nav-link:hover, body.li-app .navbar-nav .nav-link.active { color: var(--li-ink) !important; } /* ===================================================================== 4. CARDS — flat white, hairline, 8px ===================================================================== */ body.li-app .card, body.li-app .dash-card, body.li-app .dash-stat-card, body.li-app .dash-plan-card, body.li-app .jc-card, body.li-app .job-card, body.li-app .content-card, body.li-app .panel-card { background: var(--li-surface) !important; border: 1px solid var(--li-border) !important; border-radius: var(--li-radius) !important; box-shadow: none !important; } body.li-app .card:hover, body.li-app .dash-card:hover, body.li-app .jc-card:hover, body.li-app .job-card:hover { border-color: var(--li-border-mid) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; transform: none !important; } body.li-app .card-header, body.li-app .dash-card-header { background: var(--li-surface) !important; border-bottom: 1px solid var(--li-border) !important; background-image: none !important; } body.li-app .card-footer { background: var(--li-surface) !important; border-top: 1px solid var(--li-border) !important; } /* Stat tiles read as plain numbers on white, LinkedIn-style */ body.li-app .dash-stat-number { color: var(--li-ink) !important; font-weight: 600 !important; } body.li-app .dash-stat-label { color: var(--li-ink-muted) !important; } /* ===================================================================== 5. SIDE NAV (dashboard rail) --------------------------------------------------------------------- Mostly covered by the --dash-sidebar-* tokens above; these rules add the blue leading rail LinkedIn uses to mark the current section. ===================================================================== */ body.li-app .d-sidebar, body.li-app .dashboard-sidebar { background: var(--li-surface) !important; border-right: 1px solid var(--li-border) !important; box-shadow: none !important; } body.li-app .d-sidebar a.active, body.li-app .dashboard-sidebar a.active, body.li-app .d-sidebar .nav-link.active { background: var(--li-blue-tint) !important; box-shadow: inset 3px 0 0 0 var(--li-blue) !important; color: var(--li-blue) !important; font-weight: 600 !important; } /* ===================================================================== 6. BUTTONS — full pills, 600 weight, one blue ===================================================================== */ body.li-app .btn, body.li-app .dash-view-all, body.li-app .dash-plan-upgrade { border-radius: var(--li-pill) !important; font-weight: 600 !important; letter-spacing: 0 !important; box-shadow: none !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } body.li-app .btn-primary, body.li-app .btn.bg-primary, body.li-app .dash-plan-upgrade { background: var(--li-blue) !important; background-image: none !important; border-color: var(--li-blue) !important; color: #ffffff !important; } body.li-app .btn-primary:hover, body.li-app .btn-primary:focus, body.li-app .btn.bg-primary:hover, body.li-app .dash-plan-upgrade:hover { background: var(--li-blue-hover) !important; background-image: none !important; border-color: var(--li-blue-hover) !important; color: #ffffff !important; } body.li-app .btn-primary:active { background: var(--li-blue-active) !important; border-color: var(--li-blue-active) !important; } /* Secondary / outline — LinkedIn's blue-outline ghost button */ body.li-app .btn-outline-primary, body.li-app .btn-secondary, body.li-app .btn-light, body.li-app .dash-view-all { background: transparent !important; border: 1px solid var(--li-blue) !important; box-shadow: inset 0 0 0 1px var(--li-blue) !important; color: var(--li-blue) !important; } body.li-app .btn-outline-primary:hover, body.li-app .btn-secondary:hover, body.li-app .btn-light:hover, body.li-app .dash-view-all:hover { background: var(--li-blue-tint-strong) !important; border-color: var(--li-blue-hover) !important; box-shadow: inset 0 0 0 1px var(--li-blue-hover) !important; color: var(--li-blue-hover) !important; } body.li-app .btn-success { background: var(--li-green) !important; border-color: var(--li-green) !important; color: #ffffff !important; } body.li-app .btn-success:hover { background: var(--li-green-hover) !important; border-color: var(--li-green-hover) !important; } body.li-app .btn-danger { background: var(--li-red) !important; border-color: var(--li-red) !important; color: #ffffff !important; } body.li-app .btn:focus-visible { outline: none !important; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--li-ring) !important; } /* ===================================================================== 7. JOB CARDS — flat hairline cards, blue accents ===================================================================== */ body.li-app .jc-card__title, body.li-app .job-card__title { color: var(--li-ink) !important; font-weight: 600 !important; } body.li-app .jc-card a:hover .jc-card__title, body.li-app .jc-card__title:hover { color: var(--li-blue) !important; text-decoration: underline; } body.li-app .jc-badge, body.li-app .jc-badge--type, body.li-app .jc-badge--ext, body.li-app .dash-job-badge { background: var(--li-blue-tint) !important; border: 1px solid rgba(10, 102, 194, 0.25) !important; border-radius: var(--li-pill) !important; color: var(--li-blue) !important; font-weight: 600 !important; } body.li-app .jc-bm-btn { color: var(--li-ink-muted) !important; } body.li-app .jc-bm-btn:hover, body.li-app .jc-bm-btn.is-active { color: var(--li-blue) !important; } /* ===================================================================== 8. BADGES / CHIPS — tinted pills ===================================================================== */ body.li-app .badge { border-radius: var(--li-pill) !important; font-weight: 600 !important; letter-spacing: 0 !important; } body.li-app .badge-success, body.li-app .badge-active { background: var(--li-green-tint) !important; color: var(--li-green) !important; border: 1px solid rgba(1, 117, 79, 0.25) !important; } body.li-app .badge-danger, body.li-app .badge-rejected, body.li-app .badge-expired { background: var(--li-red-tint) !important; color: var(--li-red) !important; border: 1px solid rgba(178, 64, 32, 0.25) !important; } body.li-app .badge-warning, body.li-app .badge-pending { background: var(--li-amber-tint) !important; color: var(--li-amber) !important; border: 1px solid rgba(145, 89, 7, 0.25) !important; } body.li-app .badge-primary, body.li-app .badge-info, body.li-app .badge-type, body.li-app .badge-applications { background: var(--li-blue-tint) !important; color: var(--li-blue) !important; border: 1px solid rgba(10, 102, 194, 0.25) !important; } /* ===================================================================== 9. FORMS ===================================================================== */ body.li-app .form-control, body.li-app .custom-select, body.li-app select, body.li-app textarea, body.li-app input[type="text"], body.li-app input[type="email"], body.li-app input[type="password"], body.li-app input[type="search"], body.li-app input[type="number"], body.li-app .select2-container--default .select2-selection { background: var(--li-surface) !important; border: 1px solid var(--li-border-strong) !important; border-radius: var(--li-radius-sm) !important; color: var(--li-ink) !important; box-shadow: none !important; } body.li-app .form-control:focus, body.li-app select:focus, body.li-app textarea:focus, body.li-app input[type="text"]:focus, body.li-app input[type="email"]:focus, body.li-app input[type="password"]:focus, body.li-app input[type="search"]:focus { border-color: var(--li-blue) !important; box-shadow: inset 0 0 0 1px var(--li-blue) !important; outline: none !important; } body.li-app .form-control::placeholder { color: var(--li-ink-faint) !important; } body.li-app label { color: var(--li-ink) !important; font-weight: 600 !important; } /* --------------------------------------------------------------------- Bare fields nested inside a component's own bordered wrapper. The FORMS rules above give every bare input/select/textarea `1px solid var(--li-border-strong)` — and that token is rgba(0,0,0,.6), i.e. near-black. Correct for a standalone field, since it is LinkedIn's own input style. Wrong when the field sits inside a search pill, filter chip or sort control that already draws the box: the result is a black rectangle drawn inside another rectangle. Components cannot defend themselves here. Their own `border: 0` sits at (0,1,1) while the rules above are (0,1,2)/(0,2,2) AND carry !important, so the theme wins whatever the load order — which is why this has been patched by hand on the candidates filter, the feed search and the apply modal already. This is the one place to list the wrappers instead. Border only, deliberately: neutralising `background` here would take the `background-image` with it and kill the custom chevrons some of these controls draw. A wrapper that also needs its fill back re-asserts it itself, at body.li-app-prefixed specificity. --------------------------------------------------------------------- */ body.li-app :is( .wd-search-field, .wd-search-strip, .wd-sort-wrap, .candidate-filter-field, .wd-cselect__search, .fs-box, .cs-search-bar, .sc-search, .emp-filterbar-card__input-wrap, .bp-search, .blg-hero__search, .wdu-footer__newsletter-form ) :is(input, select, textarea), body.li-app :is( .wd-search-field, .wd-search-strip, .wd-sort-wrap, .candidate-filter-field, .wd-cselect__search, .fs-box, .cs-search-bar, .sc-search, .emp-filterbar-card__input-wrap, .bp-search, .blg-hero__search, .wdu-footer__newsletter-form ) :is(input, select, textarea):focus { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; } /* ===================================================================== 10. TABLES, LINKS, PAGINATION, SHEETS ===================================================================== */ body.li-app .table, body.li-app .dash-table-modern { color: var(--li-ink) !important; } body.li-app .table thead th, body.li-app .dash-table-modern thead th { background: var(--li-surface) !important; border-bottom: 1px solid var(--li-border-mid) !important; border-top: none !important; color: var(--li-ink-muted) !important; font-size: .75rem !important; font-weight: 600 !important; letter-spacing: .04em; text-transform: uppercase; } body.li-app .table td, body.li-app .dash-table-modern td { border-top: 1px solid var(--li-border) !important; } body.li-app .table-striped tbody tr:nth-of-type(odd) { background: transparent !important; } body.li-app .table tbody tr:hover, body.li-app .dash-table-modern tbody tr:hover { background: rgba(0, 0, 0, 0.03) !important; } /* Body links go LinkedIn blue. Every exclusion below is load-bearing — this selector's :not() chain gives it specificity (0,6,2), so without them it outranks the components' own rules and reaches things that are not body copy at all: [class*="btn"] / [class*="button"] — an anchor styled as a filled button keeps its own white label. Without this, a card's `.x__btn--primary { color:#fff }` (0,1,0) lost and every "View Profile" was blue text on a blue button. [class*="nav"] — navigation is not body copy. Without this, the candidate top bar's `.wd-nav-item` labels were LinkedIn blue at rest instead of its muted #5f6b7a, and hovering added an underline plus #004182 in place of the near-black the component intends. LinkedIn's own top nav underlines nothing: muted goes to near-black and the active tab carries a bottom bar. It also covers .nav-link, .navbar-* and .wd-topnav-*. Anything this file gives a solid background is also given an explicit colour, for the same reason. */ body.li-app a:not([class*="btn"]):not([class*="button"]):not([class*="nav"]):not(.dropdown-item):not(.page-link) { color: var(--li-blue); } body.li-app a:not([class*="btn"]):not([class*="button"]):not([class*="nav"]):not(.dropdown-item):not(.page-link):hover { color: var(--li-blue-hover); text-decoration: underline; } body.li-app .pagination .page-link { background: transparent !important; border: none !important; border-radius: var(--li-pill) !important; color: var(--li-ink-muted) !important; font-weight: 600 !important; min-width: 34px; text-align: center; } body.li-app .pagination .page-item.active .page-link { background: var(--li-blue) !important; color: #ffffff !important; } body.li-app .dropdown-menu { border: 1px solid var(--li-border) !important; border-radius: var(--li-radius) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; padding: 4px !important; } body.li-app .dropdown-item { border-radius: var(--li-radius-sm) !important; color: var(--li-ink) !important; } body.li-app .dropdown-item:hover, body.li-app .dropdown-item:focus { background: rgba(0, 0, 0, 0.05) !important; color: var(--li-ink) !important; } body.li-app .modal-content { border: none !important; border-radius: var(--li-radius) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18) !important; } body.li-app .modal-header, body.li-app .modal-footer { border-color: var(--li-border) !important; } body.li-app .alert { border-radius: var(--li-radius) !important; } body.li-app .alert-success { background: var(--li-green-tint) !important; border-color: rgba(1, 117, 79, 0.25) !important; color: var(--li-green) !important; } body.li-app .alert-danger { background: var(--li-red-tint) !important; border-color: rgba(178, 64, 32, 0.25) !important; color: var(--li-red) !important; } /* ===================================================================== 11. JOB SEARCH PAGE (`wd-*`) --------------------------------------------------------------------- frontend/pages/jobs-modern.blade.php ships ~344 rules of its own in a page-level