/* ═══════════════════════════════════════════════════════════════════════════ * Workback Marketing — shared stylesheet * ─────────────────────────────────────────────────────────────────────────── * Linked in on every page. Holds: * 1. Design-system tokens (mirrors workback-app/lib/theme-tokens.ts): * colors, calendar palettes, typography, spacing/radii/shadows/motion. * 2. Base reset. * 3. Shared chrome + component classes (nav, footer, buttons, cards, FAQ, * product-mock fit harness) — these carry the :hover and responsive * behavior that the design's inline styles can't express. * * Fonts (Geist + Geist Mono) are loaded via a Google Fonts in each * page (with preconnect) rather than @import here, for performance. * * Workback — the production calendar for advertising. * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tokens · color (light) ──────────────────────────────────────────────── */ :root { --wb-paper:#FAFAF7; --wb-paper-2:#F2F1EC; --wb-paper-3:#EFEEE9; --wb-surface:#FFFFFF; --wb-surface-hover:#F6F5F0; --wb-ink:#1A1A1C; --wb-ink-2:#3D3D42; --wb-muted:#6A6A70; --wb-muted-2:#86868B; --wb-line:#E8E7E2; --wb-line-2:#F0EFEA; --wb-blue:#1F4FD9; --wb-blue-light:#E8EEFB; --wb-blue-press:#1A43BC; --wb-orange:#E8704A; --wb-orange-light:#FBE8DF; --wb-green:#2F8F5E; --wb-green-light:#E5F1EA; --wb-pink:#D94F8C; --wb-purple:#8E5BD9; --wb-blue-lift:#5C8AFF; --wb-orange-lift:#FF8A6A; --wb-green-lift:#5BBE89; --wb-pink-lift:#FF7BAF; --wb-purple-lift:#C58BFF; --t-bg:var(--wb-paper); --t-paper:var(--wb-paper); --t-paper2:var(--wb-paper-2); --t-paper3:var(--wb-paper-3); --t-surface:var(--wb-surface); --t-surfaceHover:var(--wb-surface-hover); --t-headerBg:var(--wb-surface); --t-weekendBg:#F2F1EC; --t-holidayBg:#E8704A12; --t-text:var(--wb-ink); --t-ink:var(--wb-ink); --t-ink2:var(--wb-ink-2); --t-muted:var(--wb-muted); --t-muted2:var(--wb-muted-2); --t-textOnDark:var(--wb-paper); --t-line:var(--wb-line); --t-line2:var(--wb-line-2); --t-border:var(--wb-line); --t-blue:var(--wb-blue); --t-blueLight:var(--wb-blue-light); --t-orange:var(--wb-orange); --t-orangeLight:var(--wb-orange-light); --t-green:var(--wb-green); --t-greenLight:var(--wb-green-light); --t-pink:var(--wb-pink); --t-purple:var(--wb-purple); --t-today:var(--wb-blue); --t-primary:var(--wb-blue); --t-primaryFg:#FFFFFF; --t-primaryHover:var(--wb-blue-press); --t-todayA12:#1F4FD912; --t-todayA15:#1F4FD926; --t-todayA30:#1F4FD930; --t-todayA40:#1F4FD940; --t-todayA60:#1F4FD960; --t-orangeA10:#E8704A1A; --t-orangeA30:#E8704A4D; --t-greenA15:#2F8F5E26; /* calendar / production palettes (theme-agnostic) */ --stage-creative:#8E5BD9; --stage-prepro:#5C8AFF; --stage-casting:#E8704A; --stage-locations:#E8A24A; --stage-art:#D9518C; --stage-shoot:#1F4FD9; --stage-editorial:#5BBE89; --stage-finishing:#2F8F5E; --stage-delivery:#1A1A1C; --proj-1:#1F4FD9; --proj-2:#E8704A; --proj-3:#2F8F5E; --proj-4:#D94F8C; --proj-5:#8E5BD9; --proj-6:#3B82F6; --proj-7:#EF4444; --proj-8:#22C55E; --proj-9:#F59E0B; --proj-10:#E8A24A; /* typography */ --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --font-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,Monaco,Consolas,monospace; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fs-display:64px; --fs-title:42px; --fs-h2:30px; --fs-h3:22px; --fs-lead:19px; --fs-body-lg:17px; --fs-body:14.5px; --fs-sm:13px; --fs-xs:11.5px; --fs-eyebrow:10.5px; --fs-eyebrow-sm:9px; --lh-display:1.05; --lh-tight:1.1; --lh-snug:1.35; --lh-body:1.55; --ls-display:-0.035em; --ls-title:-0.025em; --ls-tight:-0.012em; --ls-snug:-0.005em; --ls-eyebrow:0.1em; --ls-eyebrow-wide:0.14em; /* radii / spacing / shadows / motion */ --radius-sm:4px; --radius:7px; --radius-md:8px; --radius-lg:12px; --radius-xl:14px; --radius-2xl:16px; --radius-pill:999px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px; --space-26:104px; --shadow-hairline:0 0 0 1px rgba(0,0,0,0.04); --shadow-sm:0 0 0 1px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04); --shadow-card-hover:0 4px 14px rgba(0,0,0,0.06); --shadow-product:0 4px 8px rgba(0,0,0,0.04),0 16px 48px rgba(0,0,0,0.08); --shadow-lg:0 0 0 1px rgba(0,0,0,0.06),0 28px 70px -22px rgba(0,0,0,0.20); --brand-band:linear-gradient(90deg,#1F4FD9,#E8704A,#2F8F5E,#1F4FD9); --ease-standard:cubic-bezier(0.4,0,0.2,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1); --dur-fast:0.12s; --dur-base:0.15s; --dur-slow:0.5s; } /* ── Tokens · color (dark) — included for completeness; marketing ships light ─ */ .dark { --t-bg:#0E0E10; --t-paper:#0E0E10; --t-paper2:#16171A; --t-paper3:#1B1C20; --t-surface:#1A1B1F; --t-surfaceHover:#22232A; --t-headerBg:#1A1B1F; --t-weekendBg:#16171A; --t-holidayBg:#FF8A6A14; --t-text:#FAFAF7; --t-ink:#FAFAF7; --t-ink2:#D6D5CF; --t-muted:#9B9A95; --t-muted2:#727178; --t-textOnDark:#FAFAF7; --t-line:#2A2B30; --t-line2:#222328; --t-border:#2A2B30; --t-blue:var(--wb-blue-lift); --t-blueLight:#1B254A; --t-orange:var(--wb-orange-lift); --t-orangeLight:#3A1E16; --t-green:var(--wb-green-lift); --t-greenLight:#13301F; --t-pink:var(--wb-pink-lift); --t-purple:var(--wb-purple-lift); --t-today:var(--wb-blue-lift); --t-primary:var(--wb-blue-lift); --t-primaryFg:#0E0E10; --t-primaryHover:#7AA0FF; --t-todayA12:#5C8AFF12; --t-todayA15:#5C8AFF26; --t-todayA30:#5C8AFF30; --t-todayA40:#5C8AFF40; --t-todayA60:#5C8AFF60; --t-orangeA10:#FF8A6A1A; --t-orangeA30:#FF8A6A4D; --t-greenA15:#5BBE8926; --shadow-hairline:0 0 0 1px rgba(0,0,0,0.3); --shadow-sm:0 0 0 1px rgba(0,0,0,0.3),0 2px 8px rgba(0,0,0,0.3); --shadow-card-hover:0 4px 14px rgba(0,0,0,0.4); --shadow-product:0 4px 8px rgba(0,0,0,0.35),0 16px 48px rgba(0,0,0,0.45); --shadow-lg:0 0 0 1px rgba(0,0,0,0.4),0 8px 32px rgba(0,0,0,0.4); } /* ── Base reset ──────────────────────────────────────────────────────────── */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; padding:0; background:var(--t-paper); color:var(--t-ink); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit; text-decoration:none;} img{display:block; max-width:100%;} button{font-family:inherit;} :focus-visible{outline:2px solid var(--t-blue); outline-offset:2px; border-radius:2px;} .wb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* ── Layout container ────────────────────────────────────────────────────── */ .wb-wrap{max-width:1200px; margin:0 auto; padding:0 28px;} /* ── Nav ─────────────────────────────────────────────────────────────────── */ .wb-nav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--t-paper) 86%, transparent); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border-bottom:1px solid var(--t-line); } .wb-nav-inner{ max-width:1200px; margin:0 auto; height:64px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; } .wb-nav-logo{display:flex; align-items:center; flex-shrink:0;} .wb-nav-logo img{height:23px;} .wb-nav-links{display:flex; gap:30px; align-items:center;} .wb-nav-link{ font-size:13.5px; font-weight:500; color:var(--t-ink2); background:none; border:none; padding:0; cursor:pointer; transition:color var(--dur-base); } .wb-nav-link:hover{color:var(--t-ink);} .wb-nav-link.is-active{font-weight:600; color:var(--t-ink);} .wb-nav-cta{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--t-ink); border-bottom:2px solid var(--t-blue); padding:4px 0 2px; } .wb-nav-cta span{color:var(--t-blue);} .wb-nav-cta:hover{color:var(--t-blue);} /* Solutions dropdown */ .wb-nav-drop{position:relative; display:flex; align-items:center;} .wb-nav-dropbtn{display:flex; align-items:center; gap:5px;} .wb-nav-dropbtn svg{transition:transform .18s;} .wb-nav-drop.open .wb-nav-dropbtn{color:var(--t-ink);} .wb-nav-drop.open .wb-nav-dropbtn svg{transform:rotate(180deg);} .wb-nav-panel{ position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%); width:340px; background:var(--t-surface); border:1px solid var(--t-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:7px; opacity:0; visibility:hidden; transition:opacity .16s ease, visibility .16s; z-index:60; } .wb-nav-drop.open .wb-nav-panel{opacity:1; visibility:visible;} .wb-nav-panel-label{ font-family:var(--font-mono); font-size:9.5px; color:var(--t-muted2); letter-spacing:0.14em; text-transform:uppercase; padding:8px 12px 6px; } .wb-drop-item{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:9px; transition:background .14s; } .wb-drop-item:hover{background:var(--t-paper2);} .wb-drop-item .t{display:block; font-size:13.5px; font-weight:600; color:var(--t-ink); letter-spacing:-0.01em;} .wb-drop-item .d{display:block; font-size:12px; color:var(--t-muted); line-height:1.4; margin-top:2px;} .wb-drop-item .arr{color:var(--t-muted2); font-size:14px;} .wb-nav-toggle{display:none;} /* ── Buttons ─────────────────────────────────────────────────────────────── */ .wb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; border-radius:var(--radius-md); padding:14px 24px; transition:background var(--dur-base), opacity var(--dur-base); border:1px solid transparent; } .wb-btn-dark{background:var(--t-ink); color:var(--t-paper);} .wb-btn-dark:hover{opacity:0.88;} .wb-btn-primary{background:var(--t-blue); color:#fff; border-color:var(--t-blue);} .wb-btn-primary:hover{background:var(--t-primaryHover); border-color:var(--t-primaryHover);} .wb-btn-ghost{background:var(--t-surface); color:var(--t-ink); border-color:var(--t-line);} .wb-btn-ghost:hover{background:var(--t-surfaceHover);} /* ── Hover utilities (replace the design's style-hover) ──────────────────── */ .wb-foot-link{font-size:13.5px; color:var(--t-ink2); transition:color var(--dur-base);} .wb-foot-link:hover{color:var(--t-blue);} .wb-card-lift{transition:border-color var(--dur-base), box-shadow var(--dur-base);} .wb-card-lift:hover{border-color:var(--t-ink); box-shadow:var(--shadow-sm);} /* button hover utilities for elements that keep their own inline base styles */ .wb-hover-surface{transition:background var(--dur-base);} .wb-hover-surface:hover{background:var(--t-surfaceHover)!important;} .wb-hover-primary{transition:background var(--dur-base);} .wb-hover-primary:hover{background:var(--t-primaryHover)!important;} .wb-hover-dim{transition:opacity var(--dur-base);} .wb-hover-dim:hover{opacity:0.88;} .wb-hover-blue{transition:color var(--dur-base);} .wb-hover-blue:hover{color:var(--t-blue)!important;} /* ── FAQ / accordion ─────────────────────────────────────────────────────── */ .wb-acc-q{ width:100%; display:flex; align-items:center; gap:16px; background:none; border:none; cursor:pointer; text-align:left; } .wb-acc-icon{display:inline-block; transition:transform .2s;} .wb-acc.open .wb-acc-icon{transform:rotate(45deg);} .wb-acc-body{max-height:0; overflow:hidden; transition:max-height .26s ease;} /* ── Product-mock fit harness ────────────────────────────────────────────── */ /* Mock renders at a fixed design width and is transform-scaled to its column. * site.js sets the inner transform + outer height; this is the static frame. */ .wb-mock{position:relative; width:100%; overflow:hidden;} .wb-mock-inner{transform-origin:top left;} /* A mock renders at a fixed design width; on narrow viewports its flex/grid * ancestors must be allowed to shrink below that width. The default * min-width:auto sizes the track to the mock's native width and clips it, so * neutralize it on the panel tracks (explicit, for broad support) and on every * ancestor of a mock (:has, belt-and-suspenders). site.js then scales the mock * down to the now-correct container width, preserving aspect ratio. */ .wb-panel, .wb-panel > * { min-width: 0; } :has(.wb-mock) { min-width: 0; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .wb-band{height:3px; background:var(--brand-band);} .wb-foot{padding:56px 24px 40px; background:var(--t-paper);} .wb-foot-inner{max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between;} .wb-foot-cols{display:flex; gap:56px; flex-wrap:wrap;} .wb-foot-col{display:flex; flex-direction:column; gap:11px;} .wb-foot-h{font-family:var(--font-mono); font-size:10px; color:var(--t-muted); letter-spacing:0.14em; text-transform:uppercase; margin:0 0 4px;} .wb-foot-bottom{max-width:1100px; margin:32px auto 0; padding-top:24px; border-top:1px solid var(--t-line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;} .wb-foot-bottom span{font-size:12.5px; color:var(--t-muted2);} /* ── Sales chat launcher (Featurebase, lazy-loaded by chat.js) ───────────── */ .wb-chat-launcher{ position:fixed; right:22px; bottom:22px; z-index:880; display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 18px; background:var(--t-ink); color:var(--t-paper); border:none; border-radius:var(--radius-pill); cursor:pointer; font-family:var(--font-sans); font-size:14px; font-weight:600; letter-spacing:-0.01em; box-shadow:0 6px 20px rgba(0,0,0,0.18); transition:transform var(--dur-base), box-shadow var(--dur-base), bottom .3s ease; } .wb-chat-launcher:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,0.24); } .wb-chat-launcher svg{ flex-shrink:0; } .wb-chat-ic{ display:inline-flex; } .wb-chat-spin{ display:none; width:16px; height:16px; flex-shrink:0; border-radius:50%; border:2px solid rgba(255,255,255,0.35); border-top-color:#fff; animation:wb-chat-spin .7s linear infinite; } @keyframes wb-chat-spin{ to{ transform:rotate(360deg); } } .wb-chat-launcher.wb-chat--loading{ cursor:progress; } .wb-chat-launcher.wb-chat--loading .wb-chat-ic{ display:none; } .wb-chat-launcher.wb-chat--loading .wb-chat-spin{ display:inline-block; } /* While the messenger panel is open the button becomes the Close control — the SDK's own launcher (the usual close toggle) is hidden below, so this is the only way to dismiss the panel. The panel wrapper's z-index is 2147483000, so the open-state button must sit above it (on short viewports the panel slides down over the bottom corner). bottom is !important to beat the consent-banner lift's inline style: the panel covers the banner anyway, and its own bottom offset (84px) leaves exactly this gap for the button. */ .wb-chat-x{ display:none; } .wb-chat-launcher.wb-chat--open{ z-index:2147483001; bottom:22px !important; } .wb-chat-launcher.wb-chat--open .wb-chat-ic{ display:none; } .wb-chat-launcher.wb-chat--open .wb-chat-x{ display:inline-flex; } /* Hide Featurebase's own launcher bubble — our custom "Questions?" button is the launcher. We can't use the SDK's `hideDefaultLauncher` boot option (in this build it also suppresses the messenger panel, so programmatic show() stops opening). We also avoid display:none / visibility:hidden, which the SDK appears to treat the same way; opacity + pointer-events keeps the launcher fully rendered and in layout (so show() still opens the panel) while making it invisible and letting clicks fall through to our button beneath it. */ #featurebase-messenger-launcher-frame-wrapper{ opacity:0 !important; pointer-events:none !important; } #featurebase-notification-wrapper{ display:none !important; } @media (max-width:520px){ .wb-chat-launcher{ width:48px; height:48px; padding:0; justify-content:center; right:16px; } .wb-chat-launcher .wb-chat-lbl{ display:none; } } /* ── Responsive ──────────────────────────────────────────────────────────── */ /* Grid utilities applied to the design's inline grids so they collapse cleanly. * !important overrides the inline grid-template-columns. */ @media (max-width:980px){ .wb-grid-4{grid-template-columns:repeat(2,1fr)!important;} .wb-panel{grid-template-columns:1fr!important;} .wb-grid-2{grid-template-columns:1fr!important;} .wb-pricing{grid-template-columns:repeat(2,1fr)!important;} } @media (max-width:760px){ .wb-wrap{padding:0 20px;} .wb-nav-inner{padding:0 20px;} /* collapse nav to a toggle menu */ .wb-nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--t-line); border-radius:var(--radius); background:var(--t-surface); color:var(--t-ink); cursor:pointer; } .wb-nav-links{ position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--t-surface); border-bottom:1px solid var(--t-line); box-shadow:var(--shadow-sm); padding:8px; display:none; } .wb-nav-links.open{display:flex;} .wb-nav-link, .wb-nav-cta{padding:12px 10px; border-bottom:none;} .wb-nav-cta{justify-content:flex-start;} .wb-nav-drop{flex-direction:column; align-items:stretch;} .wb-nav-panel{ position:static; transform:none; width:auto; box-shadow:none; border:none; opacity:1; visibility:visible; padding:0 0 6px 10px; display:none; } .wb-nav-drop.open .wb-nav-panel{display:block;} .wb-grid-4, .wb-pricing{grid-template-columns:1fr!important;} .wb-faq{grid-template-columns:1fr!important;} .wb-foot-cols{gap:32px;} } @media (max-width:520px){ .wb-grid-4, .wb-pricing{grid-template-columns:1fr!important;} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms!important; transition-duration:0.001ms!important;} }