/* * Brand colour tokens. Every brand-coloured rule on the site reads these * variables, so a palette is just a different set of values. * * --brand primary (buttons, links, highlights); white text on it must pass WCAG AA (4.5:1) * --brand-rgb same colour as "r g b" for rgb(var(--brand-rgb) / ) tints * --brand-hover darker shade for hover/pressed * --brand-soft light tint for badges and icon chips * --brand-softer near-white wash for section backgrounds * --accent secondary icon/step colour (was the second green, #28C76F); white text passes AA * * :root is the live palette (Emerald, chosen 2026-09-25). The [data-palette] blocks are * candidates kept for later review; they only apply when js/palette.js (the preview switcher, * currently not loaded by _Layout.cshtml) sets data-palette on . They are generated * (brand + accent in, every other shade derived and contrast-checked). Ratios are white * text on the colour. * * --brand-on-dark* are light variants for dark surfaces (>= 7:1 on the footer navy * #0a1322); css/footer.css builds its accent from them and falls back to emerald. * * The second half of this file is the page surface: "Mist + Glass" (cool off-white page, * soft brand-coloured light, frosted nav and cards), the site default since 2026-09-25. */ :root { /* Emerald (current). Note #059669 is 3.77:1 and #28C76F 2.21:1: both fail AA with white text. */ --brand: #059669; --brand-rgb: 5 150 105; --brand-hover: #00714e; --brand-soft: #E3F5EE; --brand-softer: #F3FBF8; --accent: #28C76F; --accent-rgb: 40 199 111; } /* Jade: emerald, but readable. White text: brand 5.48, accent 5.93. */ html[data-palette="jade"] { --brand: #047857; --brand-rgb: 4 120 87; --brand-hover: #036247; --brand-soft: #E6F2EE; --brand-softer: #F4F9F7; --accent: #0369A1; --accent-rgb: 3 105 161; --brand-on-dark: #6DB19E; --brand-on-dark-hi: #A0CCC0; --brand-on-dark-rgb: 109 177 158; --brand-on-dark-ink: #0a1322; } /* Forest: deep, calm green. White text: brand 6.39, accent 4.92. */ html[data-palette="forest"] { --brand: #2D6A4F; --brand-rgb: 45 106 79; --brand-hover: #255741; --brand-soft: #EAF0ED; --brand-softer: #F6F8F7; --accent: #A16207; --accent-rgb: 161 98 7; --brand-on-dark: #85A999; --brand-on-dark-hi: #B0C7BD; --brand-on-dark-rgb: 133 169 153; --brand-on-dark-ink: #0a1322; } /* Sage: muted, organic. White text: brand 5.41, accent 6.20. */ html[data-palette="sage"] { --brand: #4A7358; --brand-rgb: 74 115 88; --brand-hover: #3D5E48; --brand-soft: #EDF1EE; --brand-softer: #F7F9F7; --accent: #9A4A2B; --accent-rgb: 154 74 43; --brand-on-dark: #8FA897; --brand-on-dark-hi: #B6C6BB; --brand-on-dark-rgb: 143 168 151; --brand-on-dark-ink: #0a1322; } /* Deep Petrol: teal + copper. White text: brand 5.47, accent 5.00. */ html[data-palette="petrol"] { --brand: #0F766E; --brand-rgb: 15 118 110; --brand-hover: #0C615A; --brand-soft: #E7F1F1; --brand-softer: #F4F9F8; --accent: #B4531F; --accent-rgb: 180 83 31; --brand-on-dark: #6FADA8; --brand-on-dark-hi: #A1CAC6; --brand-on-dark-rgb: 111 173 168; --brand-on-dark-ink: #0a1322; } /* Ocean: blue-leaning petrol. White text: brand 6.27, accent 4.92. */ html[data-palette="ocean"] { --brand: #0E6A77; --brand-rgb: 14 106 119; --brand-hover: #0B5762; --brand-soft: #E7F0F1; --brand-softer: #F4F8F9; --accent: #A16207; --accent-rgb: 161 98 7; --brand-on-dark: #78ACB3; --brand-on-dark-hi: #A7C9CE; --brand-on-dark-rgb: 120 172 179; --brand-on-dark-ink: #0a1322; } /* Lagoon: bright, clean cyan. White text: brand 5.59, accent 5.18. */ html[data-palette="lagoon"] { --brand: #0B7285; --brand-rgb: 11 114 133; --brand-hover: #095D6D; --brand-soft: #E7F1F3; --brand-softer: #F4F9FA; --accent: #C2410C; --accent-rgb: 194 65 12; --brand-on-dark: #71ADB8; --brand-on-dark-hi: #A3CAD1; --brand-on-dark-rgb: 113 173 184; --brand-on-dark-ink: #0a1322; } /* Trust Blue: Fluent / LinkedIn. White text: brand 5.38, accent 5.36. */ html[data-palette="trust-blue"] { --brand: #0F6CBD; --brand-rgb: 15 108 189; --brand-hover: #0C599B; --brand-soft: #E7F0F8; --brand-softer: #F4F8FC; --accent: #0E7490; --accent-rgb: 14 116 144; --brand-on-dark: #6FA7D7; --brand-on-dark-hi: #A1C6E5; --brand-on-dark-rgb: 111 167 215; --brand-on-dark-ink: #0a1322; } /* Navy & Gold: most conservative. White text: brand 8.66, accent 4.92. */ html[data-palette="navy"] { --brand: #1F4E79; --brand-rgb: 31 78 121; --brand-hover: #194063; --brand-soft: #E9EDF2; --brand-softer: #F5F7F9; --accent: #A16207; --accent-rgb: 161 98 7; --brand-on-dark: #8FA7BC; --brand-on-dark-hi: #B6C6D3; --brand-on-dark-rgb: 143 167 188; --brand-on-dark-ink: #0a1322; } /* Indigo: modern SaaS. White text: brand 6.29, accent 5.93. */ html[data-palette="indigo"] { --brand: #4F46E5; --brand-rgb: 79 70 229; --brand-hover: #4139BC; --brand-soft: #EDEDFC; --brand-softer: #F7F7FE; --accent: #0369A1; --accent-rgb: 3 105 161; --brand-on-dark: #A09BF1; --brand-on-dark-hi: #C1BEF6; --brand-on-dark-rgb: 160 155 241; --brand-on-dark-ink: #0a1322; } /* Iris: soft blue-violet. White text: brand 5.37, accent 5.36. */ html[data-palette="iris"] { --brand: #5B5BD6; --brand-rgb: 91 91 214; --brand-hover: #4B4BAF; --brand-soft: #EFEFFB; --brand-softer: #F8F8FD; --accent: #0E7490; --accent-rgb: 14 116 144; --brand-on-dark: #9D9DE6; --brand-on-dark-hi: #BFBFEF; --brand-on-dark-rgb: 157 157 230; --brand-on-dark-ink: #0a1322; } /* Deep Indigo: dense, premium. White text: brand 9.93, accent 5.02. */ html[data-palette="deep-indigo"] { --brand: #3730A3; --brand-rgb: 55 48 163; --brand-hover: #2D2786; --brand-soft: #EBEAF6; --brand-softer: #F6F6FB; --accent: #B45309; --accent-rgb: 180 83 9; --brand-on-dark: #9F9CD3; --brand-on-dark-hi: #C1BFE2; --brand-on-dark-rgb: 159 156 211; --brand-on-dark-ink: #0a1322; } /* Ink & Clay: charcoal + terracotta, pairs with Sand. White text: brand 14.22, accent 4.99. */ html[data-palette="ink-clay"] { --brand: #2E2A27; --brand-rgb: 46 42 39; --brand-hover: #262220; --brand-soft: #EAEAE9; --brand-softer: #F6F5F5; --accent: #B4532A; --accent-rgb: 180 83 42; --brand-on-dark: #D1947B; --brand-on-dark-hi: #E1B9A9; --brand-on-dark-rgb: 209 148 123; --brand-on-dark-ink: #0a1322; } /* Clay: terracotta, pairs with Sand. White text: brand 5.88, accent 5.47. */ html[data-palette="clay"] { --brand: #A34A2A; --brand-rgb: 163 74 42; --brand-hover: #863D22; --brand-soft: #F6EDEA; --brand-softer: #FBF7F5; --accent: #0F766E; --accent-rgb: 15 118 110; --brand-on-dark: #CA9683; --brand-on-dark-hi: #DDBBAE; --brand-on-dark-rgb: 202 150 131; --brand-on-dark-ink: #0a1322; } /* Olive: earthy, pairs with Sand. White text: brand 6.31, accent 5.88. */ html[data-palette="olive"] { --brand: #56662A; --brand-rgb: 86 102 42; --brand-hover: #475422; --brand-soft: #EEF0EA; --brand-softer: #F7F8F5; --accent: #A34A2A; --accent-rgb: 163 74 42; --brand-on-dark: #9DA683; --brand-on-dark-hi: #BFC5AE; --brand-on-dark-rgb: 157 166 131; --brand-on-dark-ink: #0a1322; } /* Aubergine: distinctive, premium. White text: brand 9.38, accent 4.92. */ html[data-palette="plum"] { --brand: #6B2F6A; --brand-rgb: 107 47 106; --brand-hover: #582757; --brand-soft: #F0EAF0; --brand-softer: #F8F6F8; --accent: #A16207; --accent-rgb: 161 98 7; --brand-on-dark: #B89BB7; --brand-on-dark-hi: #D1BED0; --brand-on-dark-rgb: 184 155 183; --brand-on-dark-ink: #0a1322; } /* Ink & Clay: the charcoal brand is the text colour too, so highlighted words take the clay accent. */ html[data-palette="ink-clay"] :is(.newThemeColor, .newThemeShaddow) { color: var(--accent) !important; } /* ========================================================================== Page surface: Mist + Glass (site default, light theme only). A cool misty page lit by soft brand/accent glows, with frosted translucent nav, cards and section panels on top. The glows follow --brand-rgb and --accent-rgb, so they change with the palette. !important is needed while the old stylesheets still paint literal white backgrounds (often inline); these rules can move into the base CSS as the pages are rebuilt. ========================================================================== */ :root { --page-bg: #EDF1F6; /* mist */ --surface: #FFFFFF; --surface-alt: #E6ECF3; --line: #DDE4ED; --glass: 255 255 255; /* panel tint, used as rgb(var(--glass) / alpha) */ --glass-alpha: 0.46; --glass-blur: 22px; --glass-edge: rgb(255 255 255 / 0.85); --glass-shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 18px 40px -20px rgb(30 41 59 / 0.22); } /* Sand variant, kept for later review (only via the preview switcher). */ html[data-surface="sand"] { --page-bg: #F4EEE4; --surface: #FFFCF7; --surface-alt: #ECE3D5; --line: #E3D8C6; --glass: 255 252 246; } /* Page: mist with soft light from the brand and accent colours */ body.light-theme { background-color: var(--page-bg) !important; background-image: radial-gradient(1000px 620px at 6% -8%, rgb(var(--brand-rgb) / 0.16), transparent 62%), radial-gradient(820px 560px at 98% 12%, rgb(var(--accent-rgb) / 0.13), transparent 60%), radial-gradient(900px 640px at 45% 108%, rgb(var(--brand-rgb) / 0.10), transparent 66%), radial-gradient(600px 420px at 70% 55%, rgb(148 163 184 / 0.10), transparent 70%) !important; background-attachment: fixed !important; } /* The old decorative PNG glows and pastel squares clash with the mist; the page light replaces them. */ .light-theme :is(.bg-1-style, .bg-2-style) { background-image: none !important; } .light-theme img[src*="mobile-app/bg-4"] { visibility: hidden; } /* The Online Profiles section (#online_profile) keeps its original look on purpose: solid light-green panel and its soft glow (bg-6.1.png); the user preferred it (2026-09-25). */ /* Full-width sections let the page show through (the home page's section joins are handled in companies.css, "Section joins") */ .light-theme :is(.jdc-feature-section, #jdc-admin, #jdc-support, #jdc-posting, #jdc-applicants, section.jobs-main) { background-color: transparent !important; } /* Frosted nav */ .light-theme .sticky-custom { background-color: rgb(var(--glass) / 0.55) !important; -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur)); backdrop-filter: saturate(180%) blur(var(--glass-blur)); border-bottom: 1px solid var(--glass-edge); box-shadow: 0 1px 0 rgb(30 41 59 / 0.05), 0 10px 30px -20px rgb(30 41 59 / 0.3) !important; } /* Frosted cards and panels */ .light-theme :is(.jdc-cta-card, .jdc-start-step, .jdc-office-card, .jdc-who-card, .jd-job-card-new, .filters-sidebar, .hero-wrapper) { background-color: rgb(var(--glass) / var(--glass-alpha)) !important; -webkit-backdrop-filter: saturate(170%) blur(var(--glass-blur)); backdrop-filter: saturate(170%) blur(var(--glass-blur)); border: 1px solid var(--glass-edge) !important; box-shadow: var(--glass-shadow) !important; } /* Inputs stay solid so typed text keeps full contrast */ .light-theme .search-field { background-color: var(--surface) !important; border-color: var(--line) !important; } /* Browsers without backdrop-filter get solid panels instead of see-through ones */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .light-theme :is(.sticky-custom, .jdc-cta-card, .jdc-start-step, .jdc-office-card, .jdc-who-card, .jd-job-card-new, .filters-sidebar, .hero-wrapper) { background-color: rgb(var(--glass) / 0.92) !important; } } /* ========================================================================== Buttons: primary = solid brand with depth (light top edge, soft brand glow); secondary = frosted glass with brand text. On hover both lift a little and a brand-coloured mist spreads out around them. Existing button classes are mapped here; new buttons can use .wb-btn-primary / .wb-btn-glass. ========================================================================== */ :root { --btn-radius: 12px; --btn-ease: cubic-bezier(.2, .7, .2, 1); } html body :is(.wb-btn-primary, .custom-post-job, .Download-App-button, .jdc-btn-primary, #job-search-btn, .btn-apply-now) { position: relative; isolation: isolate; overflow: hidden; color: #fff !important; font-weight: 600 !important; border: 1px solid rgb(var(--brand-rgb) / 0.9) !important; border-radius: var(--btn-radius) !important; background: linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0) 55%), linear-gradient(180deg, var(--brand), var(--brand-hover)) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.30), inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(15 23 42 / 0.12), 0 8px 20px -8px rgb(var(--brand-rgb) / 0.60), 0 0 0 0 rgb(var(--brand-rgb) / 0) !important; text-shadow: 0 1px 0 rgb(0 0 0 / 0.12); transition: transform .2s var(--btn-ease), box-shadow .35s var(--btn-ease), filter .2s ease !important; } /* soft light inside the button that blooms on hover */ html body :is(.wb-btn-primary, .custom-post-job, .Download-App-button, .jdc-btn-primary, #job-search-btn, .btn-apply-now)::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: radial-gradient(120% 100% at 50% -30%, rgb(255 255 255 / 0.38), transparent 60%); opacity: .55; transform: scale(.92); transition: opacity .35s var(--btn-ease), transform .45s var(--btn-ease); pointer-events: none; } html body :is(.wb-btn-primary, .custom-post-job, .Download-App-button, .jdc-btn-primary, #job-search-btn, .btn-apply-now):hover { color: #fff !important; transform: translateY(-1px); filter: brightness(1.04) saturate(1.05); background: linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0) 55%), linear-gradient(180deg, var(--brand), var(--brand-hover)) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.34), inset 0 0 0 1px rgb(255 255 255 / 0.10), 0 2px 4px rgb(15 23 42 / 0.10), 0 16px 34px -10px rgb(var(--brand-rgb) / 0.65), 0 0 0 7px rgb(var(--brand-rgb) / 0.12) !important; } html body :is(.wb-btn-primary, .custom-post-job, .Download-App-button, .jdc-btn-primary, #job-search-btn, .btn-apply-now):hover::before { opacity: 1; transform: scale(1.12); } html body :is(.wb-btn-primary, .custom-post-job, .Download-App-button, .jdc-btn-primary, #job-search-btn, .btn-apply-now):active { transform: translateY(0) scale(.98); transition-duration: .08s !important; } html body.light-theme :is(.wb-btn-glass, #custom_login_btn, #custom-login-btn, .jdc-faq-all-btn) { position: relative; color: var(--brand-hover) !important; font-weight: 600 !important; border: 1px solid rgb(var(--brand-rgb) / 0.30) !important; border-radius: var(--btn-radius) !important; background: rgb(255 255 255 / 0.55) !important; -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), 0 1px 2px rgb(15 23 42 / 0.06), 0 6px 16px -10px rgb(var(--brand-rgb) / 0.35), 0 0 0 0 rgb(var(--brand-rgb) / 0) !important; transition: transform .2s var(--btn-ease), box-shadow .35s var(--btn-ease), background-color .25s ease, border-color .25s ease !important; } html body.light-theme :is(.wb-btn-glass, #custom_login_btn, #custom-login-btn, .jdc-faq-all-btn):hover { color: var(--brand-hover) !important; transform: translateY(-1px); border-color: rgb(var(--brand-rgb) / 0.55) !important; background: rgb(var(--brand-rgb) / 0.07) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 2px 4px rgb(15 23 42 / 0.06), 0 12px 28px -12px rgb(var(--brand-rgb) / 0.50), 0 0 0 7px rgb(var(--brand-rgb) / 0.09) !important; } html body.light-theme :is(.wb-btn-glass, #custom_login_btn, #custom-login-btn, .jdc-faq-all-btn):active { transform: translateY(0) scale(.98); } /* App store buttons (glass), sized to sit next to a primary CTA */ .wb-store-link { display: inline-flex !important; align-items: center; gap: 8px; padding: 7px 20px !important; font-size: 16px; line-height: 1.6; text-decoration: none !important; } /* Keyboard focus (the old CSS removes outlines on links with !important) */ html body :is(.wb-btn-primary, .custom-post-job, .Download-App-button, .jdc-btn-primary, #job-search-btn, .btn-apply-now, .wb-btn-glass, #custom_login_btn, #custom-login-btn, .jdc-faq-all-btn):focus-visible { outline: 2px solid rgb(var(--brand-rgb) / 0.7) !important; outline-offset: 3px !important; } @media (prefers-reduced-motion: reduce) { html body :is(.wb-btn-primary, .custom-post-job, .Download-App-button, .jdc-btn-primary, #job-search-btn, .btn-apply-now, .wb-btn-glass, #custom_login_btn, #custom-login-btn, .jdc-faq-all-btn), html body :is(.wb-btn-primary, .custom-post-job, .Download-App-button, .jdc-btn-primary, #job-search-btn, .btn-apply-now)::before { transition: none !important; transform: none !important; } } /* ========================================================================== Header: calm sentence-case nav with a soft pill on hover and on the current page; "Live jobs" carries a pulsing live dot and the open-job count (Services/LiveJobCountService). Sign In (glass) sits before the primary "Get Started Free", and the header buttons are a notch smaller than the page buttons. ========================================================================== */ .sticky-custom .wb-nav { gap: 4px; align-items: center; } .sticky-custom .wb-nav-link { display: inline-flex !important; align-items: center; gap: 9px; padding: 8px 14px !important; border-radius: 999px; font-size: 15.5px !important; font-weight: 500 !important; letter-spacing: .005em; text-transform: none !important; color: #334155 !important; transition: background-color .2s ease, color .2s ease; } .sticky-custom .wb-nav-link:hover { color: var(--brand-hover) !important; background-color: rgb(var(--brand-rgb) / 0.07); } .sticky-custom .wb-nav-link.is-active { color: var(--brand-hover) !important; background-color: rgb(var(--brand-rgb) / 0.10); } /* live dot: a solid brand dot with a ring that keeps pulsing outwards */ .wb-live-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.18); } .wb-live-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: rgb(var(--brand-rgb) / 0.35); animation: wb-live-pulse 1.9s cubic-bezier(.2, .7, .2, 1) infinite; } @keyframes wb-live-pulse { 0% { transform: scale(.45); opacity: .9; } 80%, 100% { transform: scale(1.25); opacity: 0; } } .wb-live-count { font-size: 12.5px; font-weight: 600; line-height: 1; padding: 5px 9px; border-radius: 999px; color: var(--brand-hover); background: rgb(var(--brand-rgb) / 0.10); border: 1px solid rgb(var(--brand-rgb) / 0.20); font-variant-numeric: tabular-nums; transition: background-color .2s ease, border-color .2s ease; } .sticky-custom .wb-nav-live:hover .wb-live-count { background: rgb(var(--brand-rgb) / 0.15); border-color: rgb(var(--brand-rgb) / 0.32); } /* actions: Sign In, then the primary CTA; a notch smaller in the header */ .sticky-custom .wb-nav-actions { gap: 10px; margin: 0; } html body .sticky-custom :is(.custom-post-job, #custom_login_btn) { font-size: 15px !important; padding: 9px 18px !important; margin: 0 !important; line-height: 1.4; } @media (max-width: 991px) { .sticky-custom .wb-nav { align-items: flex-start; gap: 2px; } .sticky-custom .wb-nav-actions { flex-direction: row !important; align-items: center !important; padding: 10px 0 6px; } } @media (prefers-reduced-motion: reduce) { .wb-live-dot::after { animation: none; opacity: 0; } } /* ========================================================================== Image placeholder (.wb-img-ph): where a section needs an image the site does not have yet. It says what the final image should show, so the designer can make it; every one carries data-image-brief, so the list is one grep away: grep -rn "data-image-brief" Views Set the final image's aspect ratio inline (style="aspect-ratio: 4 / 3"). ========================================================================== */ .wb-img-ph { position: relative; display: grid; place-items: center; width: 100%; min-height: 160px; padding: 28px 24px; border-radius: 20px; text-align: center; color: #475569; background: radial-gradient(420px 260px at 20% 0%, rgb(var(--brand-rgb) / 0.12), transparent 70%), radial-gradient(360px 240px at 100% 100%, rgb(var(--accent-rgb) / 0.10), transparent 70%), rgb(255 255 255 / 0.55); border: 1.5px dashed rgb(var(--brand-rgb) / 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .wb-img-ph::before { content: "Image to design"; position: absolute; top: 12px; left: 12px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-hover); background: rgb(var(--brand-rgb) / 0.10); } .wb-img-ph > span { max-width: 36ch; font-size: 14px; line-height: 1.55; }