/** * GF Job Board - Frontend Styles * * Brand palette mirrors admin.css variables so themes inherit consistently. * * @package GF_Job_Board * @since 1.0.0 */ /* ========================================================================== CSS Variables ========================================================================== */ :root { /* Palette — inherits from the Universal theme's --universal-* variables when the theme is active (set on by the palette switcher or Customizer). The second argument of each var() is the plugin's own fallback colour so the plugin looks correct on any theme that does not define these variables. */ --gf-primary: var(--universal-primary, #6366f1); --gf-primary-hover: var(--universal-secondary, #4f46e5); --gf-primary-light: var(--universal-bg-alt, #eef2ff); --gf-accent: var(--universal-accent, #f59e0b); --gf-secondary: var(--universal-text-light, #4b5563); --gf-light: var(--universal-bg-alt, #f8f7ff); --gf-dark: var(--universal-text, #1e1b4b); --gf-border: var(--universal-border, #c7d2fe); --gf-border-light: var(--universal-border, #e0e7ff); --gf-text: var(--universal-text, #374151); --gf-text-muted: var(--universal-text-light, #6b7280); --gf-radius: var(--universal-radius, 6px); --gf-radius-lg: var(--universal-radius-lg, 10px); /* Semantic / fixed colours — not part of the brand palette */ --gf-accent-dark: #d97706; --gf-pink: #ec4899; --gf-success: #10b981; --gf-warning: #f59e0b; --gf-danger: #ef4444; /* Shadows tinted with the active primary colour */ --gf-shadow: 0 1px 4px color-mix(in srgb, var(--gf-primary) 10%, transparent); --gf-shadow-lg: 0 6px 20px color-mix(in srgb, var(--gf-primary) 18%, transparent); /* Gradient auto-updates because it uses the palette vars above */ --gf-gradient: linear-gradient(135deg, var(--gf-primary) 0%, var(--gf-primary-hover) 100%); /* Set by PHP when gf_sticky_header_offset > 0 */ --gf-header-offset: 0px; } /* Anchor links land below fixed headers. */ :root { scroll-padding-top: calc(var(--universal-header-h, 0px) + var(--gf-header-offset, 0px) + 8px); } /* ========================================================================== Base Styles ========================================================================== */ .gf-jobs-wrapper, .gf-featured-jobs, .gf-single-job-meta { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; color: var(--gf-text); line-height: 1.6; } /* Keep plugin templates aligned with the active theme content width. */ .gf-archive-jobs-wrapper, .gf-single-job-wrapper { width: 90%; max-width: var(--wp--style--global--wide-size, 1600px); margin-left: auto; margin-right: auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } /* Clear fixed/sticky theme header on archive and single job pages. */ .gf-archive-jobs-wrapper, .gf-single-job-wrapper { padding-top: calc(var(--universal-header-h, 0px) + var(--gf-header-offset, 0px) + 48px); scroll-margin-top: calc(var(--universal-header-h, 0px) + var(--gf-header-offset, 0px)); } /* ========================================================================== Search Form ========================================================================== */ .gf-search-form-wrapper { background: var(--gf-light); padding: 26px; border-radius: var(--gf-radius-lg); margin-bottom: 32px; border: 1px solid var(--gf-border-light); box-shadow: var(--gf-shadow); } .gf-search-form { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; } .gf-form-field { flex: 1; min-width: 180px; padding-right: 5px; padding-left: 5px; } .gf-form-field:first-child { padding-left: 0; } .gf-form-field:last-child, .gf-field-submit { padding-right: 0; } .gf-form-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; color: var(--gf-dark); } .gf-form-field input[type="text"], .gf-form-field select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--gf-border); border-radius: var(--gf-radius); font-size: 14px; background: #fff; color: var(--gf-text); transition: border-color 0.2s, box-shadow 0.2s; } .gf-form-field input[type="text"]:focus, .gf-form-field select:focus { border-color: var(--gf-primary); box-shadow: 0 0 0 3px var(--gf-primary-light); outline: none; } .gf-field-remote { flex: 0 0 auto; } .gf-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 0; font-size: 14px; color: var(--gf-text); } .gf-checkbox-label input[type="checkbox"] { accent-color: var(--gf-primary); width: 16px; height: 16px; } .gf-field-submit { flex: 0 0 auto; } .gf-search-submit { background: var(--gf-gradient); color: #fff; border: none; padding: 11px 26px; border-radius: var(--gf-radius); font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s, transform 0.1s; box-shadow: 0 3px 10px color-mix(in srgb, var(--gf-primary) 35%, transparent); } /* Direct palette reference, same as the theme's own buttons. */ .gf-search-form .gf-search-submit { background: var(--universal-primary, #6366f1); color: var(--universal-white, #ffffff); } .gf-search-submit:hover { opacity: 0.9; transform: translateY(-1px); } .gf-search-submit:active { transform: translateY(0); } .gf-job-alert-panel { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--gf-border-light); display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: space-between; } .gf-job-alert-panel--single { margin: 0; padding: 20px 22px; border: 1px solid #e5e7eb; border-radius: var(--gf-radius-lg); background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); } .gf-job-alert-copy h4 { margin: 0 0 4px; font-size: 15px; color: var(--gf-dark); } .gf-job-alert-copy p { margin: 0; font-size: 13px; color: var(--gf-text-muted); } .gf-job-alert-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: 1 1 360px; justify-content: flex-end; } .gf-job-alert-email { min-width: 220px; flex: 1 1 220px; padding: 10px 12px; border: 1.5px solid var(--gf-border); border-radius: var(--gf-radius); font-size: 14px; } .gf-job-alert-frequency { min-width: 120px; flex: 0 0 120px; padding: 10px 12px; border: 1.5px solid var(--gf-border); border-radius: var(--gf-radius); font-size: 14px; background: #fff; color: var(--gf-text); } .gf-job-alert-submit { border: 1px solid var(--gf-dark); background: #fff; color: var(--gf-dark); padding: 11px 18px; border-radius: var(--gf-radius); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .gf-job-alert-submit:hover, .gf-job-alert-submit:focus { background: var(--gf-dark); color: #fff; } .gf-job-alert-email:focus { border-color: var(--gf-primary); box-shadow: 0 0 0 3px var(--gf-primary-light); outline: none; } .gf-job-alert-frequency:focus { border-color: var(--gf-primary); box-shadow: 0 0 0 3px var(--gf-primary-light); outline: none; } .gf-job-alert-message { flex: 1 0 100%; min-height: 20px; font-size: 13px; } .gf-job-alert-message.is-success { color: var(--gf-success); } .gf-job-alert-message.is-error { color: var(--gf-danger); } /* ========================================================================== Results Header ========================================================================== */ .gf-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--gf-border-light); } .gf-results-count { font-size: 14px; color: var(--gf-text-muted); font-weight: 500; } /* ========================================================================== Job Cards ========================================================================== */ .gf-jobs-grid { display: grid; gap: 20px; } .gf-jobs-wrapper[data-columns="2"] .gf-jobs-grid { grid-template-columns: repeat(2, 1fr); } .gf-jobs-wrapper[data-columns="3"] .gf-jobs-grid { grid-template-columns: repeat(3, 1fr); } .gf-jobs-wrapper[data-columns="4"] .gf-jobs-grid, .gf-featured-jobs[data-columns="4"] .gf-jobs-grid { grid-template-columns: repeat(4, 1fr); } .gf-jobs-wrapper[data-columns="5"] .gf-jobs-grid, .gf-featured-jobs[data-columns="5"] .gf-jobs-grid { grid-template-columns: repeat(5, 1fr); } .gf-jobs-wrapper[data-columns="6"] .gf-jobs-grid, .gf-featured-jobs[data-columns="6"] .gf-jobs-grid { grid-template-columns: repeat(6, 1fr); } .gf-featured-jobs[data-columns="2"] .gf-jobs-grid { grid-template-columns: repeat(2, 1fr); } .gf-featured-jobs[data-columns="3"] .gf-jobs-grid { grid-template-columns: repeat(3, 1fr); } .gf-job-card { background: #fff; border: 1.5px solid var(--gf-border-light); border-radius: var(--gf-radius-lg); padding: 22px; transition: box-shadow 0.25s, transform 0.2s, border-color 0.2s; position: relative; } .gf-job-card:hover { box-shadow: var(--gf-shadow-lg); transform: translateY(-3px); border-color: var(--gf-border); } .gf-job-card.gf-featured { border-color: var(--gf-accent); border-width: 2px; background: linear-gradient(180deg, #fffbeb 0%, #fff 60%); } .gf-featured-badge { position: absolute; top: 12px; right: 12px; background: var(--gf-accent); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4); } .gf-new-visit-badge { position: absolute; top: 12px; left: 12px; background: var(--gf-success); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35); } .gf-job-card.gf-new-since-visit { border-color: #34d399; box-shadow: 0 6px 18px rgba(16, 185, 129, 0.15); } .gf-job-card.gf-featured .gf-new-visit-badge { top: 42px; } .gf-similar-jobs { margin-top: 28px; } .gf-similar-jobs h3 { margin: 0 0 14px; font-size: 1.25rem; color: var(--gf-dark); } /* ---- Similar Jobs Carousel -------------------------------------------- */ .gf-similar-jobs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .gf-similar-jobs-header h3 { margin: 0; } .gf-carousel-nav { display: flex; gap: 6px; flex-shrink: 0; } .gf-carousel-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--gf-border-light, #e5e7eb); border-radius: 6px; background: #fff; color: var(--gf-text, #374151); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .gf-carousel-btn:hover:not(:disabled) { background: var(--gf-primary-light, #eef2ff); border-color: var(--gf-primary, #6366f1); color: var(--gf-primary, #6366f1); } .gf-carousel-btn:disabled { opacity: 0.35; cursor: default; } .gf-carousel-btn svg { width: 16px; height: 16px; display: block; } .gf-carousel-viewport { overflow: hidden; } .gf-carousel-track { display: flex; gap: 16px; transition: transform 0.35s ease; will-change: transform; } /* Non-JS fallback: wrap into a readable grid. */ .gf-similar-carousel .gf-carousel-track { flex-wrap: wrap; } /* JS removes the wrap class once initialized. */ .gf-similar-carousel.gf-carousel-ready .gf-carousel-track { flex-wrap: nowrap; } .gf-similar-carousel .gf-carousel-track .gf-job-card { min-width: 0; } .gf-carousel-dots { display: flex; gap: 7px; justify-content: center; margin-top: 16px; } .gf-carousel-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--gf-border-light, #e5e7eb); cursor: pointer; transition: background 0.2s, transform 0.2s; } .gf-carousel-dot.is-active { background: var(--gf-primary, #6366f1); transform: scale(1.35); } .gf-job-card-header { display: flex; gap: 15px; margin-bottom: 14px; } .gf-company-logo { flex-shrink: 0; width: 58px; height: 58px; border-radius: var(--gf-radius); overflow: hidden; background: var(--gf-light); border: 1px solid var(--gf-border-light); display: flex; align-items: center; justify-content: center; } .gf-company-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .gf-job-card-title { flex: 1; min-width: 0; } .gf-job-card-title h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.3; } .gf-job-card-title h3 a { color: var(--gf-dark); text-decoration: none; transition: color 0.15s; } .gf-job-card-title h3 a:hover { color: var(--gf-primary); } .gf-job-card .gf-company-name { font-size: 13px; color: var(--gf-text-muted); font-weight: 500; } .gf-job-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .gf-job-card-meta span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--gf-primary); background: var(--gf-primary-light); padding: 4px 10px; border-radius: 20px; border: 1px solid var(--gf-border-light); } .gf-meta-remote { background: #d1fae5 !important; color: var(--gf-success) !important; border-color: #a7f3d0 !important; } .gf-meta-noc { background: #fef3c7 !important; color: #92400e !important; border-color: #fcd34d !important; } .gf-job-card-salary { font-size: 15px; font-weight: 700; color: var(--gf-success); margin-bottom: 12px; letter-spacing: -0.3px; } .gf-job-card-excerpt { font-size: 13px; color: var(--gf-text-muted); margin-bottom: 14px; line-height: 1.5; } .gf-job-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--gf-border-light); } .gf-job-date { font-size: 12px; color: var(--gf-text-muted); } .gf-view-job { font-size: 13px; font-weight: 600; color: #ffffff; background: var(--gf-primary); text-decoration: none; display: inline-block; padding: 8px 16px; border-radius: var(--gf-radius); transition: background 0.2s, transform 0.15s; } .gf-view-job:hover { background: var(--gf-primary-hover); color: #ffffff; transform: translateY(-1px); } /* Direct reference to the theme's palette variables — same method the theme uses for its own buttons. Two-class specificity (0,2,0) also beats any stale single-class PHP-generated override that may exist in a cached page. */ .gf-job-card .gf-view-job { background: var(--universal-primary, #6366f1); color: var(--universal-white, #ffffff); } .gf-job-card .gf-view-job:hover { background: var(--universal-secondary, #4f46e5); color: var(--universal-white, #ffffff); } /* ========================================================================== Single Job Page ========================================================================== */ .gf-single-job-meta { background: var(--gf-light); padding: 26px; border-radius: var(--gf-radius-lg); margin-bottom: 32px; border: 1px solid var(--gf-border-light); } .gf-single-job-overview-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 360px); gap: 24px; align-items: start; } .gf-single-job-overview-main, .gf-single-job-overview-aside { min-width: 0; } .gf-single-job-overview-aside { justify-self: end; width: 100%; } .gf-single-job-support-panels { display: grid; grid-template-columns: 1fr; gap: 18px; width: 100%; max-width: 360px; } /* Below-content variant: panels sit side-by-side when space allows */ .gf-single-job-support-panels--below { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 100%; margin-top: 24px; } .gf-company-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--gf-border-light); } .gf-company-header .gf-company-logo { width: 80px; height: 80px; } .gf-company-info .gf-company-name { font-size: 18px; font-weight: 700; color: var(--gf-dark); } .gf-company-info .gf-company-name a { color: var(--gf-dark); text-decoration: none; } .gf-company-info .gf-company-name a:hover { color: var(--gf-primary); } .gf-job-utility-panel { padding: 20px 22px; border: 1px solid #e5e7eb; border-radius: var(--gf-radius-lg); background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); } .gf-job-utility-copy h4 { margin: 0 0 4px; font-size: 15px; color: var(--gf-dark); } .gf-job-utility-copy p { margin: 0; font-size: 13px; color: var(--gf-text-muted); } .gf-job-utility-actions { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 16px; } .gf-job-utility-action { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--gf-border); background: #fff; color: var(--gf-dark); padding: 0; border-radius: var(--gf-radius); cursor: pointer; transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s; } .gf-job-utility-action:hover, .gf-job-utility-action:focus { border-color: var(--gf-primary); color: var(--gf-primary); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10); } .gf-job-utility-action.is-active { background: var(--gf-dark); border-color: var(--gf-dark); color: #fff; } .gf-job-utility-icon { display: inline-flex; width: 18px; height: 18px; } .gf-job-utility-icon svg { width: 100%; height: 100%; fill: currentColor; } .gf-job-utility-tooltip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); white-space: nowrap; padding: 6px 9px; border-radius: 999px; background: #111827; color: #fff; font-size: 12px; font-weight: 600; line-height: 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 5; } .gf-job-utility-tooltip::after { content: ''; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; background: #111827; transform: translateX(-50%) rotate(45deg); } .gf-job-utility-action:hover .gf-job-utility-tooltip, .gf-job-utility-action:focus .gf-job-utility-tooltip, .gf-job-utility-action:focus-visible .gf-job-utility-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .gf-job-utility-status { min-height: 20px; margin-top: 12px; font-size: 13px; color: var(--gf-text-muted); } .gf-single-job.gf-readable-mode .gf-job-description, .gf-single-job.gf-readable-mode .gf-single-job-meta, .gf-single-job.gf-readable-mode .gf-apply-section, .gf-single-job.gf-readable-mode .gf-job-footer, .gf-single-job-shell.gf-readable-mode .gf-job-description, .gf-single-job-shell.gf-readable-mode .gf-single-job-meta, .gf-single-job-shell.gf-readable-mode .gf-apply-section, .gf-single-job-shell.gf-readable-mode .gf-job-footer { font-size: 1.04em; line-height: 1.8; } .gf-single-job.gf-readable-mode .gf-job-description p, .gf-single-job.gf-readable-mode .gf-job-description li, .gf-single-job-shell.gf-readable-mode .gf-job-description p, .gf-single-job-shell.gf-readable-mode .gf-job-description li { font-size: 1.05rem; line-height: 1.85; } body.gf-high-contrast-mode { background: #fff !important; color: #111827 !important; } body.gf-high-contrast-mode h1, body.gf-high-contrast-mode h2, body.gf-high-contrast-mode h3, body.gf-high-contrast-mode h4, body.gf-high-contrast-mode h5, body.gf-high-contrast-mode h6, body.gf-high-contrast-mode p, body.gf-high-contrast-mode li, body.gf-high-contrast-mode dt, body.gf-high-contrast-mode dd, body.gf-high-contrast-mode figcaption, body.gf-high-contrast-mode blockquote, body.gf-high-contrast-mode label, body.gf-high-contrast-mode span, body.gf-high-contrast-mode strong, body.gf-high-contrast-mode em { color: #111827 !important; } body.gf-high-contrast-mode a { color: #0f172a !important; text-decoration: underline; } body.gf-high-contrast-mode svg, body.gf-high-contrast-mode svg path, body.gf-high-contrast-mode svg circle, body.gf-high-contrast-mode svg rect, body.gf-high-contrast-mode svg line, body.gf-high-contrast-mode svg polyline, body.gf-high-contrast-mode svg polygon { fill: currentColor; stroke: currentColor; } body.gf-high-contrast-mode input, body.gf-high-contrast-mode input[type="submit"], body.gf-high-contrast-mode input[type="button"], body.gf-high-contrast-mode input[type="reset"], body.gf-high-contrast-mode select, body.gf-high-contrast-mode textarea, body.gf-high-contrast-mode button, body.gf-high-contrast-mode .button, body.gf-high-contrast-mode [role="button"], body.gf-high-contrast-mode .gf-search-submit, body.gf-high-contrast-mode .gf-apply-button, body.gf-high-contrast-mode .gf-job-alert-submit, body.gf-high-contrast-mode .gf-job-utility-action, body.gf-high-contrast-mode a[class*="button"], body.gf-high-contrast-mode a.gf-apply-button, body.gf-high-contrast-mode .wp-block-button__link { background: #fff !important; color: #111827 !important; border-color: #111827 !important; box-shadow: none !important; text-decoration: none; } body.gf-high-contrast-mode button:hover, body.gf-high-contrast-mode button:focus, body.gf-high-contrast-mode button:active, body.gf-high-contrast-mode input[type="submit"]:hover, body.gf-high-contrast-mode input[type="submit"]:focus, body.gf-high-contrast-mode input[type="button"]:hover, body.gf-high-contrast-mode input[type="button"]:focus, body.gf-high-contrast-mode input[type="reset"]:hover, body.gf-high-contrast-mode input[type="reset"]:focus, body.gf-high-contrast-mode .button:hover, body.gf-high-contrast-mode .button:focus, body.gf-high-contrast-mode [role="button"]:hover, body.gf-high-contrast-mode [role="button"]:focus, body.gf-high-contrast-mode .gf-search-submit:hover, body.gf-high-contrast-mode .gf-search-submit:focus, body.gf-high-contrast-mode .gf-apply-button:hover, body.gf-high-contrast-mode .gf-apply-button:focus, body.gf-high-contrast-mode .gf-job-alert-submit:hover, body.gf-high-contrast-mode .gf-job-alert-submit:focus, body.gf-high-contrast-mode .gf-job-utility-action:hover, body.gf-high-contrast-mode .gf-job-utility-action:focus, body.gf-high-contrast-mode .gf-job-utility-action.is-active, body.gf-high-contrast-mode a[class*="button"]:hover, body.gf-high-contrast-mode a[class*="button"]:focus, body.gf-high-contrast-mode a.gf-apply-button:hover, body.gf-high-contrast-mode a.gf-apply-button:focus, body.gf-high-contrast-mode .wp-block-button__link:hover, body.gf-high-contrast-mode .wp-block-button__link:focus { background: #111827 !important; color: #fff !important; } body.gf-high-contrast-mode button:hover svg, body.gf-high-contrast-mode button:focus svg, body.gf-high-contrast-mode button:active svg, body.gf-high-contrast-mode .button:hover svg, body.gf-high-contrast-mode .button:focus svg, body.gf-high-contrast-mode [role="button"]:hover svg, body.gf-high-contrast-mode [role="button"]:focus svg, body.gf-high-contrast-mode .gf-search-submit:hover svg, body.gf-high-contrast-mode .gf-search-submit:focus svg, body.gf-high-contrast-mode .gf-apply-button:hover svg, body.gf-high-contrast-mode .gf-apply-button:focus svg, body.gf-high-contrast-mode .gf-job-alert-submit:hover svg, body.gf-high-contrast-mode .gf-job-alert-submit:focus svg, body.gf-high-contrast-mode .gf-job-utility-action:hover svg, body.gf-high-contrast-mode .gf-job-utility-action:focus svg, body.gf-high-contrast-mode .gf-job-utility-action.is-active svg, body.gf-high-contrast-mode a[class*="button"]:hover svg, body.gf-high-contrast-mode a[class*="button"]:focus svg, body.gf-high-contrast-mode a.gf-apply-button:hover svg, body.gf-high-contrast-mode a.gf-apply-button:focus svg, body.gf-high-contrast-mode .wp-block-button__link:hover svg, body.gf-high-contrast-mode .wp-block-button__link:focus svg { fill: currentColor; stroke: currentColor; } body.gf-high-contrast-mode .gf-job-utility-action:hover, body.gf-high-contrast-mode .gf-job-utility-action:focus, body.gf-high-contrast-mode .gf-job-utility-action.is-active, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action:hover, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action:focus, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action.is-active, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action:hover, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action:focus, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action.is-active { color: #fff !important; } body.gf-high-contrast-mode .gf-job-utility-action:hover .gf-job-utility-icon, body.gf-high-contrast-mode .gf-job-utility-action:focus .gf-job-utility-icon, body.gf-high-contrast-mode .gf-job-utility-action.is-active .gf-job-utility-icon, body.gf-high-contrast-mode .gf-job-utility-action:hover .gf-job-utility-icon svg, body.gf-high-contrast-mode .gf-job-utility-action:focus .gf-job-utility-icon svg, body.gf-high-contrast-mode .gf-job-utility-action.is-active .gf-job-utility-icon svg, body.gf-high-contrast-mode .gf-job-utility-action:hover .gf-job-utility-icon svg *, body.gf-high-contrast-mode .gf-job-utility-action:focus .gf-job-utility-icon svg *, body.gf-high-contrast-mode .gf-job-utility-action.is-active .gf-job-utility-icon svg *, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action:hover .gf-job-utility-icon, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action:focus .gf-job-utility-icon, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action.is-active .gf-job-utility-icon, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action:hover .gf-job-utility-icon svg, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action:focus .gf-job-utility-icon svg, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action.is-active .gf-job-utility-icon svg, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action:hover .gf-job-utility-icon svg *, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action:focus .gf-job-utility-icon svg *, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action.is-active .gf-job-utility-icon svg *, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action:hover .gf-job-utility-icon, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action:focus .gf-job-utility-icon, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action.is-active .gf-job-utility-icon, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action:hover .gf-job-utility-icon svg, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action:focus .gf-job-utility-icon svg, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action.is-active .gf-job-utility-icon svg, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action:hover .gf-job-utility-icon svg *, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action:focus .gf-job-utility-icon svg *, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action.is-active .gf-job-utility-icon svg * { color: #fff !important; fill: #fff !important; stroke: #fff !important; } body.gf-high-contrast-mode .gf-job-utility-action:hover .gf-job-utility-tooltip, body.gf-high-contrast-mode .gf-job-utility-action:focus .gf-job-utility-tooltip, body.gf-high-contrast-mode .gf-job-utility-action.is-active .gf-job-utility-tooltip { color: #fff !important; } body.gf-high-contrast-mode [class*="dark"], body.gf-high-contrast-mode [class*="dark"] *, body.gf-high-contrast-mode [class*="black"], body.gf-high-contrast-mode [class*="black"] * { color: #fff; } body.gf-high-contrast-mode main, body.gf-high-contrast-mode article, body.gf-high-contrast-mode section, body.gf-high-contrast-mode aside, body.gf-high-contrast-mode header, body.gf-high-contrast-mode footer, body.gf-high-contrast-mode nav { color: #111827; } .gf-single-job.gf-high-contrast-mode, .gf-high-contrast-mode .gf-single-job, .gf-single-job.gf-high-contrast-mode .gf-job-description, .gf-high-contrast-mode .gf-single-job .gf-job-description, .gf-single-job.gf-high-contrast-mode .gf-job-description h3, .gf-high-contrast-mode .gf-single-job .gf-job-description h3, .gf-single-job-shell.gf-high-contrast-mode, .gf-single-job-shell.gf-high-contrast-mode .gf-job-description, .gf-single-job-shell.gf-high-contrast-mode .gf-job-description h3 { color: #111827; } .gf-single-job.gf-high-contrast-mode .gf-single-job-meta, .gf-high-contrast-mode .gf-single-job .gf-single-job-meta, .gf-single-job.gf-high-contrast-mode .gf-apply-section, .gf-high-contrast-mode .gf-single-job .gf-apply-section, .gf-single-job.gf-high-contrast-mode .gf-job-footer, .gf-high-contrast-mode .gf-single-job .gf-job-footer, .gf-single-job.gf-high-contrast-mode .gf-job-alert-panel--single, .gf-high-contrast-mode .gf-single-job .gf-job-alert-panel--single, .gf-single-job.gf-high-contrast-mode .gf-job-utility-panel, .gf-high-contrast-mode .gf-single-job .gf-job-utility-panel, .gf-single-job-shell.gf-high-contrast-mode .gf-single-job-meta, .gf-single-job-shell.gf-high-contrast-mode .gf-apply-section, .gf-single-job-shell.gf-high-contrast-mode .gf-job-footer, .gf-single-job-shell.gf-high-contrast-mode .gf-job-alert-panel--single, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-panel { background: #fff; border-color: #111827; box-shadow: none; } .gf-single-job.gf-high-contrast-mode .gf-detail-item, .gf-high-contrast-mode .gf-single-job .gf-detail-item, .gf-single-job.gf-high-contrast-mode .gf-company-header, .gf-high-contrast-mode .gf-single-job .gf-company-header, .gf-single-job.gf-high-contrast-mode .gf-job-description h3, .gf-high-contrast-mode .gf-single-job .gf-job-description h3, .gf-single-job-shell.gf-high-contrast-mode .gf-detail-item, .gf-single-job-shell.gf-high-contrast-mode .gf-company-header, .gf-single-job-shell.gf-high-contrast-mode .gf-job-description h3 { border-color: #111827; } .gf-single-job.gf-high-contrast-mode .gf-job-alert-submit, .gf-high-contrast-mode .gf-single-job .gf-job-alert-submit, .gf-single-job.gf-high-contrast-mode .gf-job-utility-action, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action, .gf-single-job-shell.gf-high-contrast-mode .gf-job-alert-submit, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action { border-color: #111827; color: #111827; } .gf-single-job.gf-high-contrast-mode .gf-job-alert-submit:hover, .gf-high-contrast-mode .gf-single-job .gf-job-alert-submit:hover, .gf-single-job.gf-high-contrast-mode .gf-job-alert-submit:focus, .gf-high-contrast-mode .gf-single-job .gf-job-alert-submit:focus, .gf-single-job.gf-high-contrast-mode .gf-job-utility-action:hover, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action:hover, .gf-single-job.gf-high-contrast-mode .gf-job-utility-action:focus, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action:focus, .gf-single-job.gf-high-contrast-mode .gf-job-utility-action.is-active, .gf-high-contrast-mode .gf-single-job .gf-job-utility-action.is-active, .gf-single-job-shell.gf-high-contrast-mode .gf-job-alert-submit:hover, .gf-single-job-shell.gf-high-contrast-mode .gf-job-alert-submit:focus, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action:hover, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action:focus, .gf-single-job-shell.gf-high-contrast-mode .gf-job-utility-action.is-active { background: #111827; color: #fff; } .gf-job-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } .gf-detail-item { display: flex; flex-direction: column; gap: 4px; } .gf-detail-item .gf-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--gf-text-muted); } .gf-detail-item .gf-value { font-size: 15px; font-weight: 600; color: var(--gf-dark); } .gf-detail-item .gf-value.gf-expired { color: var(--gf-danger); } .gf-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; } .gf-badge-remote { background: #d1fae5; color: var(--gf-success); } /* Job Description */ .gf-job-description { background: #ffffff; border: 1px solid #e5e7eb; border-radius: var(--gf-radius-lg); padding: 30px; margin-bottom: 32px; } .gf-single-job-overview-layout .gf-job-description { margin-bottom: 0; } .gf-job-description h3 { margin-bottom: 14px; font-size: 20px; color: var(--gf-dark); padding-bottom: 8px; border-bottom: 2px solid var(--gf-border-light); } /* Apply Section */ .gf-apply-section { background: #f9fafb; border: 1px solid #e5e7eb; padding: 30px; border-radius: var(--gf-radius-lg); text-align: center; margin-bottom: 48px; } .gf-apply-section--alert { background: #fff7ed; border: 1px solid #fdba74; } /* Job listing footer */ .gf-job-footer { background: #f9fafb; border: 1px solid #e5e7eb; padding: 24px 30px; border-radius: var(--gf-radius-lg); margin-top: 32px; margin-bottom: 24px; color: var(--gf-text); line-height: 1.7; } .gf-apply-section h3 { margin-top: 0; margin-bottom: 16px; color: var(--gf-dark); font-size: 20px; } .gf-apply-button { display: inline-block; background: var(--gf-primary); border: 2px solid var(--gf-primary); color: #fff; padding: 13px 34px; border-radius: var(--gf-radius); font-size: 16px; font-weight: 700; text-decoration: none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.24); letter-spacing: 0.2px; } .gf-apply-button--alert { background: #c2410c; border-color: #c2410c; box-shadow: 0 4px 14px rgba(194, 65, 12, 0.28); } .gf-apply-button:hover { background: #fff; border-color: var(--gf-primary); color: var(--gf-primary); transform: translateY(-2px); } .gf-apply-button--alert:hover, .gf-apply-button--alert:focus { background: #fff; border-color: #c2410c; color: #c2410c; } /* Apply button as button element */ button.gf-apply-button { cursor: pointer; } /* ========================================================================== Apply Confirmation Modal ========================================================================== */ body.gf-modal-open { overflow: hidden; } .gf-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; } .gf-modal[hidden] { display: none; } .gf-modal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); } .gf-modal-content { position: relative; background: #fff; border-radius: var(--gf-radius-lg); max-width: 520px; width: 100%; padding: 32px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: gfModalSlideIn 0.25s ease-out; outline: none; } @keyframes gfModalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .gf-modal-content h2 { margin: 0 0 20px; font-size: 22px; font-weight: 700; color: var(--gf-dark); } .gf-modal-body { color: var(--gf-text); line-height: 1.7; margin-bottom: 28px; } .gf-modal-body p { margin: 0 0 14px; } .gf-modal-body p:last-child { margin-bottom: 0; } .gf-modal-checklist { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .gf-modal-checklist li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: var(--gf-radius); background: #f8fafc; border: 1px solid #dbe5f0; color: var(--gf-text); } .gf-modal-checklist-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .gf-modal-checklist-icon svg { width: 20px; height: 20px; } .gf-modal-checklist-icon--profile { background: var(--gf-primary-light); color: var(--gf-primary); } .gf-modal-checklist-icon--info { background: #fef3c7; color: #d97706; } .gf-modal-checklist-icon--volume { background: #fce7f3; color: #db2777; } .gf-modal-checklist-text { flex: 1; min-width: 0; } .gf-modal-checklist li strong { display: block; font-weight: 700; color: var(--gf-dark); margin-bottom: 4px; } .gf-modal-checklist-detail { display: block; font-size: 13px; color: var(--gf-text-muted); line-height: 1.55; } .gf-alert-confirmation-summary { font-size: 15px; } .gf-alert-confirmation-modal .gf-modal-content { max-width: 460px; padding: 24px; } .gf-alert-confirmation-modal .gf-modal-content h2 { margin-bottom: 14px; font-size: 18px; } .gf-alert-confirmation-modal .gf-modal-body { margin-bottom: 18px; } .gf-alert-confirmation-modal .gf-alert-confirmation-summary { font-size: 14px; line-height: 1.65; margin-bottom: 12px; } .gf-alert-confirmation-body { padding: 12px 14px; border-radius: var(--gf-radius); background: #f8fafc; border: 1px solid #dbe5f0; font-size: 14px; line-height: 1.55; } .gf-alert-confirmation-modal .gf-modal-actions { gap: 8px; } .gf-alert-confirmation-modal .gf-modal-btn { min-width: 0; padding: 11px 18px; font-size: 14px; } .gf-modal-emphasis { background: var(--gf-primary-light); padding: 14px 18px; border-radius: var(--gf-radius); font-weight: 600; color: var(--gf-dark); } .gf-modal-actions { display: flex; gap: 12px; flex-wrap: wrap; } .gf-modal-btn { display: inline-block; padding: 14px 28px; border-radius: var(--gf-radius); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; border: none; transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; text-align: center; flex: 1; min-width: 140px; } .gf-modal-btn:focus { outline: 3px solid var(--gf-primary); outline-offset: 2px; } .gf-modal-btn-confirm { background: #10b981; color: #fff; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); } .gf-modal-btn-confirm:hover { background: #059669; color: #fff; transform: translateY(-2px); } .gf-modal-btn-cancel { background: #ef4444; color: #fff; box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35); } .gf-modal-btn-cancel:hover { background: #dc2626; color: #fff; transform: translateY(-2px); } /* Modal responsive */ @media screen and (max-width: 480px) { .gf-modal-content { padding: 24px; } .gf-modal-content h2 { font-size: 18px; } .gf-modal-actions { flex-direction: column; } .gf-modal-btn { width: 100%; } } /* ========================================================================== Pagination ========================================================================== */ .gf-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 32px; } .gf-pagination a, .gf-pagination span { padding: 8px 14px; border: 1.5px solid var(--gf-border); border-radius: var(--gf-radius); text-decoration: none; color: var(--gf-text); font-size: 14px; font-weight: 500; transition: all 0.2s; } .gf-pagination a:hover { background: var(--gf-primary); border-color: var(--gf-primary); color: #fff; } .gf-pagination .current { background: var(--gf-primary); border-color: var(--gf-primary); color: #fff; font-weight: 700; } /* Load More */ .gf-load-more-wrapper { text-align: center; margin-top: 30px; } .gf-load-more { background: transparent; border: 2px solid var(--gf-primary); color: var(--gf-primary); padding: 12px 32px; border-radius: var(--gf-radius); font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; letter-spacing: 0.2px; } .gf-load-more:hover { background: var(--gf-primary); color: #fff; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.30); } .gf-load-more:disabled { opacity: 0.45; cursor: not-allowed; } /* ========================================================================== No Results ========================================================================== */ .gf-no-jobs { text-align: center; padding: 48px 20px; background: var(--gf-light); border: 1px dashed var(--gf-border); border-radius: var(--gf-radius-lg); color: var(--gf-text-muted); font-size: 16px; } /* ========================================================================== Category Lists ========================================================================== */ .gf-categories-list { list-style: none; padding: 0; margin: 0; } .gf-categories-grid .gf-categories-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .gf-category-item { padding: 0; margin: 0; } .gf-categories-list .gf-category-item { padding: 8px 0; border-bottom: 1px solid var(--gf-border-light); } .gf-categories-grid .gf-category-item { background: var(--gf-primary-light); border: 1px solid var(--gf-border-light); padding: 12px 15px; border-radius: var(--gf-radius); transition: border-color 0.15s, box-shadow 0.15s; } .gf-categories-grid .gf-category-item:hover { border-color: var(--gf-primary); box-shadow: var(--gf-shadow); } .gf-category-item a { color: var(--gf-text); text-decoration: none; display: flex; justify-content: space-between; font-weight: 500; } .gf-category-item a:hover { color: var(--gf-primary); } .gf-category-count { color: var(--gf-text-muted); font-size: 13px; } /* ========================================================================== Featured Jobs Section ========================================================================== */ .gf-featured-title { margin-bottom: 20px; font-size: 22px; color: var(--gf-dark); display: flex; align-items: center; gap: 10px; } .gf-featured-title::after { content: ''; flex: 1; height: 2px; background: var(--gf-gradient); border-radius: 2px; } /* ========================================================================== Loading State ========================================================================== */ .gf-loading { text-align: center; padding: 48px; opacity: 0.6; } .gf-loading::after { content: ""; display: inline-block; width: 32px; height: 32px; border: 3px solid var(--gf-border); border-top-color: var(--gf-primary); border-radius: 50%; animation: gf-spin 0.7s linear infinite; } @keyframes gf-spin { to { transform: rotate(360deg); } } /* ========================================================================== Responsive ========================================================================== */ @media screen and (max-width: 782px) { .gf-single-job-overview-layout { grid-template-columns: 1fr; } .gf-single-job-overview-aside { justify-self: stretch; } .gf-single-job-support-panels { grid-template-columns: 1fr; max-width: none; } .gf-single-job-support-panels--below { grid-template-columns: 1fr; } .gf-carousel-nav { display: none; } .gf-job-utility-actions { flex-wrap: wrap; gap: 10px; } .gf-search-form { flex-direction: column; } .gf-job-alert-panel, .gf-job-alert-form { flex-direction: column; align-items: stretch; } .gf-job-alert-form { justify-content: flex-start; } .gf-job-utility-action { width: 42px; height: 42px; flex-basis: 42px; } .gf-form-field { min-width: 100%; } .gf-jobs-wrapper[data-columns="2"] .gf-jobs-grid, .gf-jobs-wrapper[data-columns="3"] .gf-jobs-grid, .gf-jobs-wrapper[data-columns="4"] .gf-jobs-grid, .gf-jobs-wrapper[data-columns="5"] .gf-jobs-grid, .gf-jobs-wrapper[data-columns="6"] .gf-jobs-grid, .gf-featured-jobs[data-columns="2"] .gf-jobs-grid, .gf-featured-jobs[data-columns="3"] .gf-jobs-grid, .gf-featured-jobs[data-columns="4"] .gf-jobs-grid, .gf-featured-jobs[data-columns="5"] .gf-jobs-grid, .gf-featured-jobs[data-columns="6"] .gf-jobs-grid { grid-template-columns: 1fr; } .gf-job-card-header { flex-direction: column; text-align: center; } .gf-company-logo { margin: 0 auto; } .gf-job-card-meta { justify-content: center; } .gf-company-header { flex-direction: column; text-align: center; } .gf-job-details { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 480px) { .gf-search-form-wrapper { padding: 16px; } .gf-job-alert-email, .gf-job-alert-submit { width: 100%; } .gf-job-card { padding: 16px; } .gf-job-card-footer { flex-direction: column; gap: 10px; text-align: center; } .gf-job-details { grid-template-columns: 1fr; } } @media print { .gf-job-alert-panel--single, .gf-job-utility-panel, .gf-apply-section, .gf-job-footer { display: none !important; } .gf-single-job-meta, .gf-job-description { box-shadow: none; border-color: #d1d5db; } } /* ========================================================================== Palette-Aware Element Colour Rules Every rule below uses --gf-* vars so any active palette cascades through automatically with no extra PHP — just override :root from PHP. ========================================================================== */ /* ---- Page title & header ---- */ .gf-job-header { border-left: 4px solid var(--gf-primary); padding-left: 16px; margin-bottom: 48px; } .gf-job-title { color: var(--gf-dark); font-size: clamp(22px, 4vw, 32px); line-height: 1.25; margin: 0 0 8px; } /* ---- Metadata labels ---- */ .gf-detail-item .gf-label { color: var(--gf-primary); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; } /* ---- Inline content links ---- */ .gf-content a { color: var(--gf-primary); text-decoration: underline; text-underline-offset: 2px; } .gf-content a:hover { color: var(--gf-primary-hover); } /* ---- Similar jobs section heading ---- */ .gf-similar-jobs-header h3 { color: var(--gf-dark); } /* ---- Previous / next navigation ---- */ .gf-job-navigation a { color: var(--gf-primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gf-border); padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; } .gf-job-navigation a:hover { color: var(--gf-primary-hover); border-color: var(--gf-primary-hover); } /* ---- Search / View buttons (palette fallback when not using Custom palette) ---- */ .gf-search-submit, .gf-view-job { background: var(--gf-primary); color: #fff; border-color: var(--gf-primary); } .gf-search-submit:hover, .gf-view-job:hover { background: var(--gf-primary-hover); border-color: var(--gf-primary-hover); color: #fff; } /* ---- Load More button ---- */ .gf-load-more { border-color: var(--gf-primary); color: var(--gf-primary); } .gf-load-more:hover { background: var(--gf-primary); border-color: var(--gf-primary); color: #fff; box-shadow: var(--gf-shadow-lg); } /* ---- Taxonomy badges / tags ---- */ .gf-badge { background: var(--gf-primary-light); color: var(--gf-primary); border: 1px solid var(--gf-border); } .gf-job-card-meta .gf-badge { background: var(--gf-primary-light); color: var(--gf-primary); } /* ---- Featured card border accent ---- */ .gf-job-card.gf-job-card--featured { border-color: var(--gf-primary); } /* ---- Support panel headers ---- */ .gf-support-panels .gf-panel-title, .gf-support-panel__title { color: var(--gf-primary); } /* ---- Alert subscribe button ---- */ .gf-alert-subscribe-btn { background: var(--gf-primary); border-color: var(--gf-primary); color: #fff; } .gf-alert-subscribe-btn:hover { background: var(--gf-primary-hover); border-color: var(--gf-primary-hover); }