/* ========================================================================== OwnCoWorker — design system Dark "AI Command" (default) and light "Intelligent Clarity". ========================================================================== */ /* 1. Tokens ---------------------------------------------------------------- */ :root { --navy: #031C39; --coral: #FF5168; --mint: #3FDEB3; --obsidian: #131315; --inkblack: #0E0F19; --granite: #466060; --teal: #91C195; --amber: #F5B84B; --font: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wide: 1200px; --gutter: clamp(16px, 4vw, 40px); --radius-s: 10px; --radius: 16px; --radius-l: 24px; --ease: cubic-bezier(.2, .7, .2, 1); --header-h: 72px; --sec-y: clamp(56px, 7.5vw, 108px); } :root, [data-theme="dark"] { color-scheme: dark; --bg: #0E0F19; --bg-2: #131315; --bg-3: #0A1628; --surface: rgba(255, 255, 255, .035); --surface-2: rgba(255, 255, 255, .06); --surface-solid: #141725; --glass: rgba(18, 22, 36, .62); --border: rgba(145, 193, 149, .13); --border-2: rgba(145, 193, 149, .24); --text: #EEF2F7; --text-2: #C3CBD8; --muted: #8E9AAE; --heading: #FFFFFF; --accent: #FF5168; /* coral used for text/links */ --accent-ink: #0E0F19; /* text on coral buttons */ --ai: #3FDEB3; /* mint: AI activity */ --ai-text: #3FDEB3; --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 60px -24px rgba(0, 0, 0, .7); --shadow-l: 0 40px 120px -40px rgba(0, 0, 0, .9); --mark-ink: #FFFFFF; --mark-accent: #FF5168; --mark-gap: var(--bg); --grid-line: rgba(145, 193, 149, .06); --hero-wash: radial-gradient(60% 50% at 75% 40%, rgba(63, 222, 179, .13), transparent 70%), radial-gradient(40% 40% at 85% 70%, rgba(255, 81, 104, .12), transparent 70%), radial-gradient(70% 60% at 10% 0%, rgba(3, 28, 57, .9), transparent 70%); } [data-theme="light"] { color-scheme: light; --bg: #FFFFFF; --bg-2: #F5F7FA; --bg-3: #EEF3F8; --surface: #FFFFFF; --surface-2: #F3F6FA; --surface-solid: #FFFFFF; --glass: rgba(255, 255, 255, .72); --border: #E3E8F2; --border-2: #D3DBE8; --text: #22324A; --text-2: #3A4A62; --muted: #5A6680; --heading: #031C39; --accent: #D6304B; /* AA-safe coral for small text */ --accent-ink: #031C39; --ai: #3FDEB3; --ai-text: #0B7F61; /* AA-safe mint for text */ --shadow: 0 1px 2px rgba(3, 28, 57, .04), 0 12px 32px -16px rgba(3, 28, 57, .14); --shadow-l: 0 30px 80px -30px rgba(3, 28, 57, .25); --mark-ink: #031C39; --mark-accent: #FF5168; --mark-gap: var(--bg); --grid-line: rgba(3, 28, 57, .045); --hero-wash: radial-gradient(55% 50% at 78% 38%, rgba(63, 222, 179, .16), transparent 70%), radial-gradient(40% 40% at 88% 72%, rgba(255, 81, 104, .10), transparent 70%), linear-gradient(180deg, #F6F9FC 0%, #FFFFFF 70%); } /* 2. Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; font-weight: 450; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; transition: background-color .3s var(--ease), color .3s var(--ease); } img, svg, video, canvas { max-width: 100%; height: auto; } img { display: block; } a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } h1, h2, h3, h4, h5, h6 { color: var(--heading); font-family: var(--font); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 .5em; font-weight: 800; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 6.2vw, 4.75rem); letter-spacing: -.04em; line-height: 1.02; } h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -.035em; line-height: 1.06; } h3 { font-size: 1.25rem; letter-spacing: -.015em; font-weight: 700; } h4 { font-size: 1.0625rem; font-weight: 700; } p { margin: 0 0 1em; text-wrap: pretty; } strong, b { font-weight: 700; } ::selection { background: var(--coral); color: #0E0F19; } :focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; border-radius: 6px; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .occ-skip { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--coral); color: #0E0F19; padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; } .occ-skip:focus { top: 12px; } hr, .wp-block-separator { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; } /* 3. Layout ---------------------------------------------------------------- */ .occ-main { display: block; min-height: 60vh; } .occ-container { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .occ-section { position: relative; padding-block: var(--sec-y); padding-inline: max(var(--gutter), calc((100% - var(--wide)) / 2)); } .occ-section--tight { padding-block: clamp(48px, 6vw, 80px); } .occ-section--alt { background: var(--bg-2); } [data-theme="dark"] .occ-section--alt { background: linear-gradient(180deg, var(--bg) 0%, #0B1220 18%, #0B1220 82%, var(--bg) 100%); } .occ-section--line { border-top: 1px solid var(--border); } .occ-section > .wp-block-group, .occ-section > * { margin-block-start: 0; } .occ-section > * + * { margin-top: clamp(32px, 4vw, 56px) !important; margin-block-start: clamp(32px, 4vw, 56px) !important; } .occ-section--center { text-align: center; } .occ-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); } .occ-head > :last-child { margin-bottom: 0; } .occ-head--center, .occ-section--center .occ-head { margin-inline: auto; text-align: center; } .occ-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ai-text); margin-bottom: 18px; text-decoration: none; } .occ-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; } .occ-head--center .occ-eyebrow::after, .occ-section--center .occ-head .occ-eyebrow::after { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; } .occ-lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--text-2); line-height: 1.6; max-width: 680px; } .occ-head--center .occ-lead, .occ-section--center .occ-lead { margin-inline: auto; } .occ-h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); } .occ-h3 { font-size: 1.375rem; } .has-coral-text, .occ-hl { color: var(--coral); } .occ-hl-mint { color: var(--ai-text); } .occ-grad-text { background: linear-gradient(100deg, var(--heading) 10%, var(--ai) 55%, var(--coral) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Core columns as split layouts */ .wp-block-columns { display: flex; gap: clamp(28px, 4vw, 64px); flex-wrap: wrap; margin: 0; } .wp-block-column { flex: 1 1 0; min-width: 0; } .occ-split { align-items: center !important; } @media (max-width: 860px) { .wp-block-columns { flex-direction: column; } .wp-block-column { flex-basis: 100% !important; width: 100%; } .occ-split--reverse { flex-direction: column-reverse; } } /* 4. Buttons --------------------------------------------------------------- */ .occ-btn, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; font: 700 1rem/1.2 var(--font); letter-spacing: -.005em; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s, border-color .25s; white-space: nowrap; } .occ-btn--sm { min-height: 40px; padding: 8px 16px; font-size: .9375rem; } .occ-btn--primary, .wp-block-button.is-style-primary .wp-block-button__link, .wp-block-button:not([class*="is-style-"]) .wp-block-button__link { background: var(--coral); color: #0E0F19; box-shadow: 0 10px 30px -10px rgba(255, 81, 104, .65), inset 0 1px 0 rgba(255, 255, 255, .35); } .occ-btn--primary:hover, .wp-block-button.is-style-primary .wp-block-button__link:hover, .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(255, 81, 104, .8), inset 0 1px 0 rgba(255, 255, 255, .35); color: #0E0F19; } .occ-btn--ghost, .wp-block-button.is-style-ghost .wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link { background: var(--surface); color: var(--heading); border-color: var(--border-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .occ-btn--ghost:hover, .wp-block-button.is-style-ghost .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--ai); color: var(--heading); transform: translateY(-2px); } .wp-block-button.is-style-link .wp-block-button__link { background: none; padding: 0; min-height: 0; color: var(--accent); border: 0; } .wp-block-button.is-style-link .wp-block-button__link::after { content: "→"; transition: transform .2s; } .wp-block-button.is-style-link .wp-block-button__link:hover::after { transform: translateX(4px); } .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 28px 0 0; } .occ-head--center .wp-block-buttons, .occ-section--center .wp-block-buttons, .wp-block-buttons.is-content-justification-center { justify-content: center; } .occ-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .occ-actions--center { justify-content: center; } .occ-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; color: var(--accent); } .occ-link svg { transition: transform .2s var(--ease); } .occ-link:hover svg { transform: translateX(4px); } /* 5. Header & navigation --------------------------------------------------- */ .occ-header { position: sticky; top: 0; z-index: 100; padding: 12px var(--gutter) 0; transition: padding .3s var(--ease); } .admin-bar .occ-header { top: 32px; } @media (max-width: 782px) { .admin-bar .occ-header { top: 0; } } .occ-header__inner { max-width: calc(var(--wide) + 48px); margin: 0 auto; display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 10px 0 18px; border-radius: 18px; border: 1px solid transparent; transition: background-color .3s, border-color .3s, box-shadow .3s, backdrop-filter .3s; } .occ-header.is-scrolled .occ-header__inner, .occ-header.is-open .occ-header__inner { background: var(--glass); border-color: var(--border); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); box-shadow: var(--shadow); } .occ-header.is-scrolled .occ-header__inner { --mark-gap: var(--surface-solid); } .occ-header__brand { display: inline-flex; text-decoration: none; flex: none; } .occ-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--heading); } .occ-wordmark { font-weight: 800; font-size: 1.25rem; letter-spacing: -.03em; color: var(--heading); line-height: 1; } .occ-wordmark span { color: var(--coral); } .occ-mark { display: block; flex: none; } .occ-nav { flex: 1; display: flex; justify-content: center; } .occ-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .occ-nav__item { position: static; } .occ-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 10px; border: 0; background: none; cursor: pointer; color: var(--text-2); font: 600 .9375rem/1.2 var(--font); text-decoration: none; white-space: nowrap; transition: color .2s, background-color .2s; } .occ-nav__link:hover, .occ-nav__trigger[aria-expanded="true"], .occ-nav__item.is-current > .occ-nav__link { color: var(--heading); background: var(--surface-2); } .occ-nav__trigger svg { transition: transform .25s var(--ease); opacity: .7; } .occ-nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); } .occ-mega { position: absolute; left: 50%; top: calc(100% + 4px); width: min(760px, calc(100vw - 2 * var(--gutter))); transform: translate(-50%, 8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; } .occ-nav__item.is-open .occ-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; } .occ-mega__inner { background: var(--glass); border: 1px solid var(--border); border-radius: 20px; padding: 14px; backdrop-filter: saturate(170%) blur(24px); -webkit-backdrop-filter: saturate(170%) blur(24px); box-shadow: var(--shadow-l); } .occ-mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; list-style: none; margin: 0; padding: 0; } .occ-mega__link { display: block; padding: 14px 16px; border-radius: 12px; text-decoration: none; transition: background-color .2s; position: relative; } .occ-mega__link:hover { background: var(--surface-2); } .occ-mega__title { display: block; color: var(--heading); font-weight: 700; font-size: .9375rem; } .occ-mega__desc { display: block; color: var(--muted); font-size: .8125rem; margin-top: 2px; line-height: 1.4; } .occ-mega__link::before { content: ""; position: absolute; left: 4px; top: 18px; width: 3px; height: 14px; border-radius: 3px; background: var(--ai); opacity: 0; transition: opacity .2s; } .occ-mega__link:hover::before { opacity: 1; } .occ-header__actions { display: flex; align-items: center; gap: 8px; flex: none; } .occ-header__login { color: var(--text-2); font-weight: 600; font-size: .9375rem; text-decoration: none; padding: 8px 10px; } .occ-header__login:hover { color: var(--heading); } .occ-theme-toggle { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--heading); display: grid; place-items: center; cursor: pointer; transition: border-color .2s, transform .2s; } .occ-theme-toggle:hover { border-color: var(--ai); } .occ-theme-toggle svg { grid-area: 1 / 1; transition: opacity .3s, transform .4s var(--ease); } [data-theme="dark"] .occ-theme-toggle__moon, [data-theme="light"] .occ-theme-toggle__sun { opacity: 0; transform: rotate(-60deg) scale(.6); } .occ-burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; position: relative; } .occ-burger i { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--heading); transition: transform .3s var(--ease), top .3s var(--ease); } .occ-burger i:first-of-type { top: 17px; } .occ-burger i:last-of-type { top: 25px; } .occ-burger[aria-expanded="true"] i:first-of-type { top: 21px; transform: rotate(45deg); } .occ-burger[aria-expanded="true"] i:last-of-type { top: 21px; transform: rotate(-45deg); } .occ-nav__mobile-cta { display: none; } @media (max-width: 1180px) { .occ-header__login { display: none; } .occ-nav__link { padding: 8px 9px; } } @media (max-width: 1140px) { .occ-header__demo { display: none; } } @media (max-width: 960px) { .occ-burger { display: block; } .occ-header__start { display: none; } .occ-nav { position: fixed; inset: calc(var(--header-h) + 4px) 12px auto 12px; z-index: 99; max-height: calc(100dvh - var(--header-h) - 20px); overflow-y: auto; overscroll-behavior: contain; display: block; padding: 10px; border-radius: 20px; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-l); backdrop-filter: saturate(170%) blur(24px); -webkit-backdrop-filter: saturate(170%) blur(24px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; } .admin-bar .occ-nav { top: calc(var(--header-h) + 50px); } .occ-header.is-open .occ-nav { opacity: 1; visibility: visible; transform: none; } .occ-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .occ-nav__link { width: 100%; justify-content: space-between; padding: 14px 14px; font-size: 1.0625rem; color: var(--heading); } .occ-mega { position: static; width: auto; transform: none; opacity: 1; visibility: visible; pointer-events: auto; display: none; } .occ-nav__item.is-open .occ-mega { display: block; transform: none; } .occ-mega__inner { background: none; border: 0; box-shadow: none; padding: 0 0 8px; backdrop-filter: none; -webkit-backdrop-filter: none; } .occ-mega__grid { grid-template-columns: 1fr; } .occ-mega__link { padding: 10px 14px 10px 22px; } .occ-mega__desc { display: none; } .occ-nav__mobile-cta { display: grid; gap: 10px; padding: 12px 6px 6px; border-top: 1px solid var(--border); margin-top: 8px; } .occ-nav__login-m { text-align: center; color: var(--text-2); font-weight: 600; padding: 8px; text-decoration: none; } body.occ-nav-open { overflow: hidden; } .occ-header.is-open .occ-header__inner { background: var(--surface-solid); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (max-width: 420px) { .occ-wordmark { font-size: 1.125rem; } .occ-header__inner { padding-left: 12px; gap: 8px; } } /* Breadcrumbs */ .occ-breadcrumbs, .occ-main--landing > .occ-breadcrumbs { font-size: .8125rem; color: var(--muted); } .occ-main--landing > .occ-breadcrumbs { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 20px var(--gutter) 0; position: relative; z-index: 2; } .occ-breadcrumbs a, .rank-math-breadcrumb a { color: var(--muted); text-decoration: none; } .occ-breadcrumbs a:hover { color: var(--heading); } .rank-math-breadcrumb p { margin: 0; } .occ-section .occ-breadcrumbs { padding: 0; margin-bottom: 20px; } /* 6. Hero ------------------------------------------------------------------ */ .occ-hero { padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(64px, 8vw, 112px); overflow: hidden; isolation: isolate; } .occ-main--home .occ-hero { margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + clamp(32px, 6vw, 72px)); } .occ-hero::before, .occ-pagehero::before, .occ-pagehead::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--hero-wash); } .occ-hero::after, .occ-pagehero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 60% at 60% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 60% 40%, #000 20%, transparent 75%); } .occ-hero__grid { align-items: center !important; min-height: min(78vh, 760px); } .occ-hero__grid > .wp-block-column:first-child { flex: 1.05 1 0; position: relative; z-index: 2; } .occ-hero__grid > .wp-block-column:last-child { flex: 1 1 0; } .occ-hero h1 { margin-bottom: 24px; } .occ-hero h1 em, .occ-pagehero h1 em { font-style: normal; color: var(--coral); } .occ-hero .occ-lead { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); } .occ-kicker { display: inline-flex !important; align-items: center; gap: 10px; margin-bottom: 26px; padding: 6px 14px 6px 8px; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); } .occ-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(63, 222, 179, .18); animation: occ-pulse 2.4s infinite; margin-left: 4px; } .occ-trust { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--muted); font-size: .9375rem; } .occ-trust::before { content: ""; width: 34px; height: 1px; background: var(--border-2); } /* Inner page hero */ .occ-pagehero, .occ-pagehead { overflow: hidden; isolation: isolate; padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); } .occ-pagehead { padding-bottom: clamp(40px, 5vw, 64px); } .occ-pagehead h1, .occ-pagehero h1 { font-size: clamp(2.25rem, 5vw, 4rem); max-width: 16ch; } .occ-pagehero.occ-section--center h1, .occ-pagehead.occ-section--center h1 { margin-inline: auto; } .occ-pagehero .occ-split { min-height: 0; } .occ-split h2 { font-size: clamp(2rem, 3.4vw, 2.875rem); } /* 7. Orb + hero visual ----------------------------------------------------- */ .occ-hv { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 620px; margin-inline: auto; } .occ-hv--cta { max-width: 360px; } .occ-hv--orb-only { max-width: 440px; } .occ-orb { position: absolute; inset: 6%; } .occ-orb__canvas { position: absolute; inset: -12%; width: 124% !important; height: 124% !important; max-width: none; opacity: 0; transition: opacity 1.2s var(--ease); } .occ-orb.is-gl .occ-orb__canvas { opacity: 1; } .occ-orb.is-gl .occ-orb__fallback { opacity: 0; } .occ-orb__fallback { position: absolute; inset: 8%; border-radius: 50%; transition: opacity 1s; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55), transparent 18%), radial-gradient(circle at 62% 66%, rgba(255, 81, 104, .75), transparent 45%), radial-gradient(circle at 38% 46%, rgba(63, 222, 179, .85), transparent 52%), radial-gradient(circle at 50% 50%, #0B2A4A 0%, #061428 70%); box-shadow: inset 0 0 60px rgba(255, 255, 255, .15), inset -20px -30px 80px rgba(3, 28, 57, .8), 0 0 120px -10px rgba(63, 222, 179, .35); animation: occ-float 9s ease-in-out infinite; } .occ-orb__fallback span { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(63, 222, 179, .35), transparent 30%, rgba(255, 81, 104, .3), transparent 60%); mix-blend-mode: screen; animation: occ-spin 14s linear infinite; filter: blur(14px); } [data-theme="light"] .occ-orb__fallback { box-shadow: inset 0 0 60px rgba(255, 255, 255, .5), 0 40px 80px -30px rgba(3, 28, 57, .45), 0 0 120px -20px rgba(63, 222, 179, .5); } .occ-orb__ring { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); width: 62%; height: 12%; display: flex; align-items: center; justify-content: center; pointer-events: none; } .occ-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--border-2); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); box-shadow: var(--shadow-l); font-size: .875rem; color: var(--heading); animation: occ-float 7s ease-in-out infinite; } .occ-float strong { display: block; font-weight: 700; line-height: 1.2; } .occ-float small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.3; } .occ-float--a { top: 6%; left: -2%; } .occ-float--b { top: 22%; right: -4%; animation-delay: -3s; color: var(--heading); } .occ-float--b > svg { color: var(--ai-text); } .occ-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; } .occ-dot--live { background: var(--mint); box-shadow: 0 0 0 4px rgba(63, 222, 179, .2); animation: occ-pulse 2s infinite; } .occ-chat { position: absolute; z-index: 4; left: -2%; width: min(360px, 66%); bottom: 2%; margin: 0; padding: 14px; border-radius: 20px; background: var(--glass); border: 1px solid var(--border-2); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--shadow-l); } .occ-chat__head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .875rem; color: var(--heading); margin-bottom: 10px; } .occ-chat__head small { display: block; font-weight: 500; color: var(--muted); font-size: .75rem; } .occ-chat__avatar { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); } .occ-chat__list, .occ-call__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .occ-chat__list { min-height: 150px; justify-content: flex-end; } .occ-bubble { max-width: 86%; padding: 9px 13px; border-radius: 14px; font-size: .875rem; line-height: 1.45; margin: 0; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .occ-bubble.is-user { align-self: flex-end; border-bottom-right-radius: 4px; } .occ-bubble.is-ai { align-self: flex-start; border-bottom-left-radius: 4px; background: linear-gradient(135deg, rgba(63, 222, 179, .16), rgba(63, 222, 179, .06)); border-color: rgba(63, 222, 179, .3); color: var(--heading); } [data-theme="light"] .occ-bubble.is-ai { background: linear-gradient(135deg, #E3FAF3, #F2FDF9); border-color: #BDEFE0; } .js .occ-chat .occ-bubble:not(.is-in):not(.occ-typing), .js .occ-call .occ-bubble:not(.is-in), .js .occ-call__note:not(.is-in) { display: none; } .js .occ-chat .occ-bubble.is-in, .js .occ-call .occ-bubble.is-in, .js .occ-call__note.is-in, .occ-typing { animation: occ-in .45s var(--ease) both; } .js .occ-chat .occ-bubble.is-gone { display: none; } .occ-typing { display: inline-flex; gap: 4px; padding: 12px 14px !important; } .occ-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-text); animation: occ-typing 1.2s infinite; } .occ-typing i:nth-child(2) { animation-delay: .15s; } .occ-typing i:nth-child(3) { animation-delay: .3s; } @media (max-width: 860px) { .occ-hero__grid { min-height: 0; } .occ-hv--hero { max-width: 460px; margin-top: 8px; } .occ-float--a { left: 0; top: 2%; } .occ-float--b { right: 0; top: 46%; } .occ-chat { left: 0; right: 0; bottom: -6%; } } @media (max-width: 520px) { .occ-hv--hero { aspect-ratio: 4 / 5; } .occ-hv--hero .occ-orb { inset: 0 6% 22% 6%; } .occ-float { padding: 9px 12px; font-size: .8125rem; } .occ-float--b { top: 38%; } .occ-chat__list { min-height: 112px; } } /* Waveform */ .occ-wave { display: inline-flex; align-items: center; gap: 3px; height: 28px; } .occ-wave i { display: block; width: 3px; height: var(--h, 50%); border-radius: 3px; background: linear-gradient(180deg, var(--mint), var(--coral)); animation: occ-wave 1.4s ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: center; } .occ-wave--mini { height: 20px; gap: 2px; } .occ-wave--mini i { width: 2px; } .occ-wave--ring { height: 100%; gap: 4px; opacity: .9; } .occ-wave--ring i { width: 3px; } .occ-wave--lg { height: 120px; gap: 5px; width: 100%; justify-content: center; } .occ-wave--lg i { width: 5px; } .occ-wave--call { height: 56px; gap: 3px; width: 100%; justify-content: center; } .occ-wave--agent { height: 40px; gap: 3px; } .occ-wave-block { padding: 24px 0; text-align: center; } .occ-wave-block__label { margin-top: 12px; color: var(--muted); font-size: .875rem; } /* 8. Cards & grids --------------------------------------------------------- */ .occ-grid { display: grid; gap: clamp(14px, 1.6vw, 20px); } .occ-grid > * { margin: 0 !important; } .occ-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .occ-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .occ-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1024px) { .occ-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .occ-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .occ-grid--2, .occ-grid--3, .occ-grid--4 { grid-template-columns: 1fr; } } .occ-card { position: relative; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; } [data-theme="dark"] .occ-card { background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); } .occ-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, -20%), rgba(63, 222, 179, .09), transparent 40%); opacity: 0; transition: opacity .3s; } .occ-card:hover::after { opacity: 1; } .occ-card:hover { border-color: var(--border-2); transform: translateY(-3px); } .occ-card h3 { margin-bottom: 10px; } .occ-card p { color: var(--text-2); font-size: .975rem; margin-bottom: 0; } .occ-card p + p { margin-top: 12px; } .occ-card > :last-child { margin-bottom: 0; } .occ-card--link h3 a { color: inherit; text-decoration: none; } .occ-card--link h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; } .occ-card--link h3::after { content: " →"; color: var(--accent); opacity: 0; transition: opacity .25s, margin .25s; margin-left: -4px; } .occ-card--link:hover h3::after { opacity: 1; margin-left: 2px; } .occ-card--link:focus-within { outline: 2px solid var(--ai); outline-offset: 3px; } .occ-card--feature { padding: clamp(26px, 3vw, 40px); } .occ-card--flat { box-shadow: none; } /* Icon tokens: add "ico-*" class to a card */ .editor-styles-wrapper .occ-card[class*="ico-"]::before { content: ""; display: block; width: 48px; height: 48px; margin-bottom: 22px; border-radius: 14px; background-color: var(--surface-2); border: 1px solid var(--border); background-image: var(--ico); background-repeat: no-repeat; background-position: center; background-size: 24px; } .editor-styles-wrapper .occ-card[class*="ico-"]::before { background-color: rgba(63, 222, 179, .08); border-color: rgba(63, 222, 179, .2); } .occ-card.ico-agents { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6.5 6.5 0 0 1 3.5 6'/%3E%3C/svg%3E"); } .occ-card.ico-voice { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 10v4M7 7v10M11 4v16M15 8v8M19 6v12M23 11v2'/%3E%3C/svg%3E"); } .occ-card.ico-route { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='4' cy='12' r='2'/%3E%3Ccircle cx='20' cy='5' r='2'/%3E%3Ccircle cx='20' cy='12' r='2'/%3E%3Ccircle cx='20' cy='19' r='2'/%3E%3Cpath d='M6 12h4m0 0c3 0 3-7 8-7m-8 7h8m-8 0c3 0 3 7 8 7'/%3E%3C/svg%3E"); } .occ-card.ico-book { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 21a2 2 0 0 1 2-2h13v2M9 8h6M9 12h4'/%3E%3C/svg%3E"); } .occ-card.ico-chart { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 20V11M10 20V5M16 20v-6M22 20H2'/%3E%3C/svg%3E"); } .occ-card.ico-auto { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); } .occ-card.ico-ws { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='2'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2'/%3E%3C/svg%3E"); } .occ-card.ico-phone { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); } .occ-card.ico-lang { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E"); } .occ-card.ico-handoff { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3Cpath d='M10 7h4a3 3 0 0 1 3 3v4M14 17h-4a3 3 0 0 1-3-3v-4'/%3E%3C/svg%3E"); } .occ-card.ico-calendar { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M8 15h3'/%3E%3C/svg%3E"); } .occ-card.ico-shield { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } .occ-card.ico-chat { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M8 12h.01M12 12h.01M16 12h.01'/%3E%3C/svg%3E"); } .occ-card.ico-sales { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5168' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E"); } .occ-card.ico-feedback { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E"); } .occ-card.ico-plug { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M9 2v5M15 2v5M6 7h12v4a6 6 0 0 1-12 0zM12 17v5'/%3E%3C/svg%3E"); } .occ-card.ico-health { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-5 4 10 2-5h6'/%3E%3C/svg%3E"); } .occ-card.ico-home { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); } .occ-card.ico-edu { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 9 10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c3 2.5 9 2.5 12 0v-5M22 9v6'/%3E%3C/svg%3E"); } .occ-card.ico-retail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); } .occ-card.ico-car { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16H3v-4l2-5h14l2 5v4h-2'/%3E%3Ccircle cx='7.5' cy='16.5' r='2'/%3E%3Ccircle cx='16.5' cy='16.5' r='2'/%3E%3Cpath d='M9.5 16.5h5M4 12h16'/%3E%3C/svg%3E"); } .occ-card.ico-hotel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18h18M5 18v-5a7 7 0 0 1 14 0v5M12 6V4M10 4h4'/%3E%3C/svg%3E"); } .occ-card.ico-truck { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2zM13 9h4l4 4v3h-8'/%3E%3Ccircle cx='6' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); } .occ-card.ico-brief { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E"); } .occ-card.ico-support { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='3' y='14' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='14' width='4' height='6' rx='1.5'/%3E%3C/svg%3E"); } .occ-card.ico-test { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L4 19a1.5 1.5 0 0 0 1.3 2h13.4a1.5 1.5 0 0 0 1.3-2L14 9V3M7 14h10'/%3E%3C/svg%3E"); } /* Badges / chips */ .occ-badge, .occ-chip { display: inline-flex !important; align-items: center; gap: 6px; width: auto; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); margin: 0 0 14px; } .occ-badge--live, .occ-chip--mint { color: var(--ai-text); border-color: rgba(63, 222, 179, .35); background: rgba(63, 222, 179, .09); } .occ-badge--roadmap { color: var(--accent); border-color: rgba(255, 81, 104, .35); background: rgba(255, 81, 104, .08); } .occ-badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); } .occ-badge--roadmap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; } /* Check lists */ .occ-checks, .wp-block-list.occ-checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .occ-checks li { position: relative; padding-left: 30px; color: var(--text-2); font-size: .975rem; line-height: 1.5; display: block; } .occ-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(63, 222, 179, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; } [data-theme="light"] .occ-checks li::before { background-color: #DDF7EF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7F61' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E"); } .occ-checks li > svg { display: none; } .occ-checks--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; } @media (max-width: 640px) { .occ-checks--grid { grid-template-columns: 1fr; } } .occ-checks--muted li::before { background-color: var(--surface-2); background-image: none; } .occ-checks--muted li::after { content: ""; position: absolute; left: 6px; top: 11px; width: 8px; height: 2px; background: var(--muted); border-radius: 2px; } /* Steps (block groups "occ-steps-blk" > "occ-step", or theme "occ-steps") */ .occ-steps-blk, .occ-steps { counter-reset: occstep; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; position: relative; } .occ-steps-blk::before, .occ-steps::before { content: ""; position: absolute; left: 4%; right: 4%; top: 27px; height: 2px; background: linear-gradient(90deg, var(--mint), var(--coral)); opacity: .35; border-radius: 2px; } .occ-steps-blk::after, .occ-steps::after { content: ""; position: absolute; left: 4%; top: 27px; height: 2px; width: 0; background: linear-gradient(90deg, var(--mint), var(--coral)); border-radius: 2px; transition: width 1.6s var(--ease) .2s; } .occ-steps-blk.is-in::after, .occ-steps.is-in::after { width: 92%; } .occ-step, .occ-steps > li { counter-increment: occstep; position: relative; margin: 0 !important; padding: 76px 22px 24px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } .occ-step::before, .occ-steps > li::before { content: "0" counter(occstep); position: absolute; top: 8px; left: 22px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: .875rem; color: #0E0F19; background: linear-gradient(135deg, var(--mint), #8BEFD3); box-shadow: 0 0 0 6px var(--bg), 0 8px 24px -6px rgba(63, 222, 179, .6); z-index: 1; } .occ-step:nth-child(2n)::before, .occ-steps > li:nth-child(2n)::before { background: linear-gradient(135deg, var(--coral), #FF8B9A); box-shadow: 0 0 0 6px var(--bg), 0 8px 24px -6px rgba(255, 81, 104, .6); } .occ-step, .occ-steps > li { text-align: left; } .occ-step h3, .occ-steps h3 { font-size: 1.125rem; margin-bottom: 8px; } .occ-step p, .occ-steps p { color: var(--text-2); font-size: .9375rem; margin: 0; } .occ-section--alt .occ-step::before, .occ-section--alt .occ-steps > li::before { box-shadow: 0 0 0 6px var(--bg-2); } @media (max-width: 960px) { .occ-steps-blk, .occ-steps { grid-template-columns: 1fr 1fr; } .occ-steps-blk::before, .occ-steps-blk::after, .occ-steps::before, .occ-steps::after { display: none; } } @media (max-width: 560px) { .occ-steps-blk, .occ-steps { grid-template-columns: 1fr; } } /* Stat-free "pillars" row (text only) */ .occ-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; } .occ-pillars > * { margin: 0 !important; padding: 28px; border-right: 1px solid var(--border); } .occ-pillars > *:last-child { border-right: 0; } .occ-pillars h3 { font-size: 1.0625rem; } .occ-pillars p { color: var(--text-2); font-size: .9375rem; margin: 0; } @media (max-width: 760px) { .occ-pillars { grid-template-columns: 1fr; } .occ-pillars > * { border-right: 0; border-bottom: 1px solid var(--border); } } /* 9. Platform map ---------------------------------------------------------- */ .occ-pm { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: center; } .occ-pm__stage { position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; margin-inline: auto; } .occ-pm__stage::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed var(--border-2); animation: occ-spin 80s linear infinite; } .occ-pm__stage::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(63, 222, 179, .18), transparent 70%); filter: blur(10px); } .occ-pm__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .occ-pm__lines line { stroke: var(--border-2); stroke-width: .35; stroke-dasharray: 1.2 1.2; vector-effect: non-scaling-stroke; transition: stroke .3s; } .occ-pm__lines line { stroke-width: 1.5; } .occ-pm__lines line.is-active { stroke: var(--mint); stroke-dasharray: 6 6; animation: occ-dash 1s linear infinite; } .occ-pm__hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 34%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; background: var(--surface-solid); border: 1px solid var(--border-2); box-shadow: 0 0 0 10px rgba(63, 222, 179, .05), 0 0 80px -10px rgba(63, 222, 179, .4); --mark-gap: var(--surface-solid); } .occ-pm__hub span { font-weight: 800; font-size: .8125rem; color: var(--heading); letter-spacing: -.01em; } .occ-pm__nodes { list-style: none; margin: 0; padding: 0; } .occ-pm__nodes li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 3; } .occ-pm__node { display: flex; flex-direction: column; align-items: center; gap: 2px; width: max-content; max-width: 150px; padding: 10px 14px; border-radius: 14px; cursor: pointer; text-align: center; background: var(--glass); border: 1px solid var(--border-2); color: var(--heading); font: 700 .8125rem/1.25 var(--font); box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .25s, transform .25s var(--ease), box-shadow .25s, background-color .25s; } .occ-pm__num { font-size: .6875rem; color: var(--muted); font-weight: 700; letter-spacing: .08em; } .occ-pm__node:hover { transform: scale(1.05); } .occ-pm__node[aria-pressed="true"] { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(63, 222, 179, .14), 0 10px 30px -10px rgba(63, 222, 179, .6); } .occ-pm__node[aria-pressed="true"] .occ-pm__num { color: var(--ai-text); } .occ-pm__panels { position: relative; min-height: 220px; } .occ-pm__panel { display: none; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); animation: occ-in .45s var(--ease); } .occ-pm__panel.is-active { display: block; } .occ-pm__panel h3 { font-size: 1.5rem; } .occ-pm__panel p { color: var(--text-2); } html:not(.js) .occ-pm__panel { display: block; margin-bottom: 12px; } @media (max-width: 900px) { .occ-pm { grid-template-columns: 1fr; } .occ-pm__node { max-width: 110px; padding: 8px 10px; font-size: .75rem; } } @media (max-width: 520px) { .occ-pm__stage { aspect-ratio: auto; display: grid; gap: 12px; } .occ-pm__stage::before, .occ-pm__stage::after, .occ-pm__lines { display: none; } .occ-pm__hub { position: static; transform: none; width: auto; aspect-ratio: auto; border-radius: 18px; padding: 16px; grid-auto-flow: column; justify-content: center; } .occ-pm__nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .occ-pm__nodes li { position: static; transform: none; } .occ-pm__node { width: 100%; max-width: none; min-height: 64px; justify-content: center; } } /* 10. Live call ------------------------------------------------------------ */ .occ-call { margin: 0; padding: 18px; border-radius: 26px; background: var(--glass); border: 1px solid var(--border-2); box-shadow: var(--shadow-l); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); max-width: 520px; margin-inline: auto; width: 100%; position: relative; } [data-theme="dark"] .occ-call { background: linear-gradient(180deg, rgba(20, 26, 44, .9), rgba(14, 15, 25, .85)); } .occ-call::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(63, 222, 179, .6), transparent 35%, transparent 65%, rgba(255, 81, 104, .55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .occ-call__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .occ-call__who { display: flex; align-items: center; gap: 12px; } .occ-call__who strong { display: block; color: var(--heading); font-size: .975rem; } .occ-call__who small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; } .occ-call__avatar { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); } .occ-call__top .occ-chip { margin: 0; } .occ-call__wave { margin: 18px 0 14px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); } .occ-call__list { min-height: 270px; justify-content: flex-end; } .occ-call__note { align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: var(--ai-text); padding: 4px 10px; border-radius: 999px; border: 1px dashed rgba(63, 222, 179, .45); } .occ-call__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .occ-call__foot .occ-chip { margin: 0; } /* 11. Routing diagram ------------------------------------------------------ */ .occ-route { position: relative; display: grid; grid-template-columns: 1fr .9fr 1.15fr; grid-template-rows: auto auto; gap: 28px clamp(32px, 6vw, 96px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 28px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; } [data-theme="dark"] .occ-route { background: radial-gradient(60% 80% at 50% 50%, rgba(63, 222, 179, .06), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); } .occ-route__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .occ-route__svg path { fill: none; stroke: var(--border-2); stroke-width: 1.5; stroke-dasharray: 4 6; transition: stroke .35s, opacity .35s; } .occ-route__svg path.is-active { stroke: url(#occ-route-grad); stroke-width: 2.5; stroke-dasharray: 8 8; animation: occ-dash .9s linear infinite; } .occ-route__svg circle { fill: var(--mint); filter: drop-shadow(0 0 6px var(--mint)); } .occ-route__col { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; } .occ-route__col--agents { display: grid; gap: 12px; grid-row: 1 / span 2; grid-column: 3; } .occ-route__col--in { grid-column: 1; grid-row: 1; } .occ-route__col--hub { grid-column: 2; grid-row: 1 / span 2; display: flex; justify-content: center; } .occ-route__col--out { grid-column: 1; grid-row: 2; } .occ-route__node { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow); transition: border-color .35s, box-shadow .35s, transform .35s var(--ease), opacity .35s; } .occ-route__node strong { display: block; color: var(--heading); font-size: .9375rem; line-height: 1.25; } .occ-route__node small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.35; } .occ-route__icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--ai-text); background: rgba(63, 222, 179, .1); border: 1px solid rgba(63, 222, 179, .25); } .occ-route__out .occ-route__icon { color: var(--accent); background: rgba(255, 81, 104, .08); border-color: rgba(255, 81, 104, .25); } .occ-route__hub { flex-direction: column; text-align: center; padding: 26px 20px; border-radius: 24px; --mark-gap: var(--surface-solid); box-shadow: 0 0 0 8px rgba(63, 222, 179, .05), 0 0 60px -12px rgba(63, 222, 179, .5); } .occ-route__hub.is-thinking { animation: occ-hub 1.2s var(--ease); } .occ-route__badge { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; font-weight: 800; color: var(--heading); background: var(--surface-2); border: 1px solid var(--border); transition: background-color .35s, color .35s; } .occ-route__agent.is-active { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(63, 222, 179, .12), 0 16px 40px -16px rgba(63, 222, 179, .55); transform: translateX(-4px); } .occ-route__agent.is-active .occ-route__badge { background: var(--mint); color: #0E0F19; border-color: transparent; } .occ-route.is-routing .occ-route__agent:not(.is-active) { opacity: .55; } .occ-route__quote { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; border-bottom-left-radius: 4px; font-size: .9375rem; color: var(--heading); background: var(--surface-2); border: 1px solid var(--border); min-height: 3.2em; transition: opacity .3s; } .occ-route__outcome { transition: opacity .3s; } .occ-route__controls { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; position: relative; z-index: 1; } .occ-route__pick, .occ-tab { padding: 8px 14px; border-radius: 999px; cursor: pointer; font: 600 .8125rem/1.2 var(--font); color: var(--text-2); background: var(--surface); border: 1px solid var(--border); transition: all .2s; } .occ-route__pick:hover, .occ-tab:hover { border-color: var(--border-2); color: var(--heading); } .occ-route__pick[aria-pressed="true"], .occ-tab[aria-pressed="true"] { background: var(--heading); color: var(--bg); border-color: var(--heading); } @media (max-width: 900px) { .occ-route { grid-template-columns: 1fr; grid-template-rows: none; gap: 18px; } .occ-route__col--in, .occ-route__col--hub, .occ-route__col--agents, .occ-route__col--out, .occ-route__controls { grid-column: 1; grid-row: auto; } .occ-route__col--hub { justify-content: stretch; } .occ-route__hub { flex-direction: row; text-align: left; width: 100%; padding: 16px; } .occ-route__col--agents { grid-template-columns: 1fr 1fr; } .occ-route__col + .occ-route__col::before { content: ""; display: block; width: 2px; height: 18px; margin: -18px auto 0; background: linear-gradient(var(--mint), transparent); } .occ-route__col--agents::before { grid-column: 1 / -1; } .occ-route__svg { display: none; } .occ-route__agent.is-active { transform: none; } } @media (max-width: 480px) { .occ-route__col--agents { grid-template-columns: 1fr; } } /* 12. Knowledge flow ------------------------------------------------------- */ .occ-kf-c { container-type: inline-size; } .occ-kf { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; } .occ-kf__agent { grid-column: 1 / -1; } .occ-kf .occ-kf__pipe { display: none; } @container (min-width: 880px) { .occ-kf { grid-template-columns: 1fr 70px 1fr 70px 1.2fr; gap: 0; align-items: center; } .occ-kf__agent { grid-column: auto; } .occ-kf .occ-kf__pipe { display: block; } } .occ-kf__col { padding: 24px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); height: 100%; } .occ-kf__docs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .occ-kf__docs li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: .875rem; font-weight: 600; color: var(--heading); animation: occ-doc 6s var(--ease) infinite; animation-delay: calc(var(--i) * .5s); } .occ-kf__docs li svg { color: var(--coral); flex: none; } .occ-kf__kb { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .occ-kf__kb .occ-eyebrow { align-self: center; } .occ-kf__kb p { color: var(--muted); font-size: .8125rem; margin: 14px 0 0; } .occ-kf__core { position: relative; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; color: var(--ai-text); background: radial-gradient(circle, rgba(63, 222, 179, .2), transparent 70%); border: 1px solid rgba(63, 222, 179, .3); } .occ-kf__chunks { position: absolute; inset: 0; animation: occ-spin 20s linear infinite; } .occ-kf__chunks i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 3px; background: var(--mint); opacity: .7; transform: rotate(calc(var(--i) * 30deg)) translateY(-64px); } .occ-kf__chunks i:nth-child(3n) { background: var(--coral); } .occ-kf__chunks i:nth-child(4n) { background: var(--teal); } .occ-kf__pipe { position: relative; height: 2px; background: linear-gradient(90deg, var(--border-2), var(--border-2)); margin: 0 6px; } .occ-kf__pipe i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: occ-travel 2.4s linear infinite; } .occ-kf__pipe i:nth-child(2) { animation-delay: .8s; background: var(--coral); box-shadow: 0 0 10px var(--coral); } .occ-kf__pipe i:nth-child(3) { animation-delay: 1.6s; } .occ-kf__qa { display: flex; flex-direction: column; gap: 10px; } .occ-kf__qa .occ-chip { align-self: flex-start; margin: 4px 0 0; } @media (max-width: 520px) { .occ-kf { grid-template-columns: 1fr; } } .occ-kf__col { padding: 20px; } .occ-kf__core { width: 128px; height: 128px; } .occ-kf__chunks i { transform: rotate(calc(var(--i) * 30deg)) translateY(-56px); } /* 13. Dashboard mockup ----------------------------------------------------- */ .occ-dash { margin: 0; perspective: 1800px; } .occ-dash__frame { border-radius: 20px; overflow: hidden; background: var(--surface-solid); border: 1px solid var(--border-2); box-shadow: var(--shadow-l), 0 0 0 1px rgba(255, 255, 255, .02); transform: rotateX(8deg) scale(.98); transform-origin: 50% 100%; transition: transform 1s var(--ease); font-size: .8125rem; } .occ-dash.is-in .occ-dash__frame { transform: none; } [data-theme="dark"] .occ-dash__frame { background: #10131F; } .occ-dash__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .occ-dash__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-2); } .occ-dash__bar i:first-child { background: #FF5F57; } .occ-dash__bar i:nth-child(2) { background: #FEBC2E; } .occ-dash__bar i:nth-child(3) { background: #28C840; } .occ-dash__bar span { margin-left: 12px; padding: 3px 12px; border-radius: 8px; background: var(--surface); color: var(--muted); font-size: .75rem; } .occ-dash__body { display: grid; grid-template-columns: 170px 1fr 260px; min-height: 440px; } .occ-dash__side { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; border-right: 1px solid var(--border); --mark-gap: var(--surface-solid); } [data-theme="dark"] .occ-dash__side { --mark-gap: #10131F; } .occ-dash__side .occ-mark { margin: 0 0 14px 6px; } .occ-dash__side span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: var(--muted); font-weight: 600; } .occ-dash__side span.is-on { background: var(--surface-2); color: var(--heading); } .occ-dash__side span.is-on svg { color: var(--ai-text); } .occ-dash__main { padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; } .occ-dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .occ-dash__kpi, .occ-dash__card { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); min-width: 0; } .occ-dash__kpi small, .occ-dash__card > small, .occ-dash__detail small { display: block; color: var(--muted); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .occ-dash__kpi strong { display: block; font-size: 1.375rem; color: var(--heading); letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; } .occ-dash__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; } .occ-dash__bars { display: flex; align-items: flex-end; gap: 6px; height: 92px; margin-top: 10px; } .occ-dash__bars i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--mint), rgba(63, 222, 179, .25)); transform-origin: bottom; transform: scaleY(.1); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 50ms); } .occ-dash__bars i:last-child { background: linear-gradient(180deg, var(--coral), rgba(255, 81, 104, .25)); } .occ-dash.is-in .occ-dash__bars i { transform: none; } .occ-dash__intent { display: grid; grid-template-columns: 70px 1fr 32px; align-items: center; gap: 8px; margin-top: 9px; color: var(--text-2); font-weight: 600; } .occ-dash__intent b { height: 6px; border-radius: 6px; width: 0; transition: width 1s var(--ease) .2s; } .occ-dash.is-in .occ-dash__intent b { width: var(--w); } .occ-dash__intent em { font-style: normal; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } .is-mint { --tone: var(--mint); } .is-coral { --tone: var(--coral); } .is-teal { --tone: var(--teal); } .is-amber { --tone: var(--amber); } .occ-dash__intent b { background: var(--tone, var(--mint)); } .occ-dash__table { padding: 6px 0; } .occ-dash__row { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr .5fr; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border); color: var(--text-2); align-items: center; white-space: nowrap; } .occ-dash__row span { overflow: hidden; text-overflow: ellipsis; } .occ-dash__row--head { border-top: 0; color: var(--muted); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .occ-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 700; color: var(--tone, var(--muted)); background: color-mix(in srgb, var(--tone, var(--muted)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tone, var(--muted)) 30%, transparent); } [data-theme="light"] .occ-tag.is-mint { color: #0B7F61; } [data-theme="light"] .occ-tag.is-amber { color: #9A6100; } [data-theme="light"] .occ-tag.is-coral { color: #C42640; } [data-theme="light"] .occ-tag.is-teal { color: #3F7A44; } .occ-dash__detail { padding: 16px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .occ-dash__detail p { color: var(--text-2); margin: 0 0 8px; line-height: 1.5; } .occ-dash__tx { padding: 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); } .occ-dash__tx p { font-size: .75rem; margin-bottom: 6px; } .occ-dash__tx b { display: block; color: var(--heading); font-size: .6875rem; } .occ-dash__tags { display: flex; flex-wrap: wrap; gap: 6px; } .occ-dash__caption { text-align: center; color: var(--muted); font-size: .8125rem; margin-top: 16px; } .occ-dash { container-type: inline-size; } @container (max-width: 1000px) { .occ-dash__body { grid-template-columns: 150px 1fr; } .occ-dash__detail { display: none; } } @container (max-width: 720px) { .occ-dash__body { grid-template-columns: 1fr; min-height: 0; } .occ-dash__side { display: none; } .occ-dash__kpis { grid-template-columns: 1fr 1fr; } .occ-dash__grid { grid-template-columns: 1fr; } .occ-dash__row { grid-template-columns: 1.2fr 1fr; } .occ-dash__row span:nth-child(1), .occ-dash__row span:nth-child(4) { display: none; } .occ-dash__frame { transform: none; } } /* 14. Workspaces ----------------------------------------------------------- */ .occ-ws { display: grid; justify-items: center; } .occ-ws__tenant { text-align: center; padding: 20px 32px; border-radius: 20px; background: var(--surface-solid); border: 1px solid var(--coral); box-shadow: 0 0 0 6px rgba(255, 81, 104, .08), var(--shadow); } .occ-ws__tenant .occ-eyebrow { color: var(--accent); margin-bottom: 6px; } .occ-ws__tenant strong { display: block; font-size: 1.25rem; color: var(--heading); } .occ-ws__tenant small, .occ-ws__item small { display: block; color: var(--muted); font-size: .8125rem; } .occ-ws__branches { width: 70%; height: 44px; border: 2px solid var(--border-2); border-bottom: 0; border-radius: 16px 16px 0 0; margin-top: 22px; position: relative; } .occ-ws__branches::before { content: ""; position: absolute; left: 50%; top: -24px; width: 2px; height: 24px; background: var(--border-2); } .occ-ws__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; } .occ-ws__item { padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); text-align: center; } .occ-ws__item .occ-eyebrow { margin-bottom: 6px; letter-spacing: .1em; } .occ-ws__item .occ-eyebrow::before, .occ-ws__tenant .occ-eyebrow::before { display: none; } .occ-ws__item strong { display: block; font-size: 1.0625rem; color: var(--heading); } .occ-ws__users { display: flex; justify-content: center; margin-top: 14px; } .occ-ws__users i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .6875rem; font-weight: 800; color: #0E0F19; background: var(--mint); border: 2px solid var(--surface-solid); margin-left: -8px; } .occ-ws__users i:first-child { margin-left: 0; } .occ-ws__users i:nth-child(2) { background: var(--coral); } .occ-ws__users i:nth-child(3) { background: var(--teal); } @media (max-width: 760px) { .occ-ws__list { grid-template-columns: 1fr; } .occ-ws__branches { width: 2px; border: 0; background: var(--border-2); height: 28px; border-radius: 0; } .occ-ws__branches::before { display: none; } } /* 15. Agent marketplace ---------------------------------------------------- */ .occ-agents__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-bottom: 28px; } .occ-agents__tabs { display: flex; flex-wrap: wrap; gap: 8px; } .occ-agents__filters { display: flex; flex-wrap: wrap; gap: 10px; } .occ-search, .occ-select { position: relative; display: flex; align-items: center; } .occ-search svg { position: absolute; left: 14px; color: var(--muted); pointer-events: none; } .occ-search input, .occ-select select { height: 44px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--heading); font: 500 .9375rem var(--font); padding: 0 18px 0 42px; min-width: 240px; } .occ-select select { padding-left: 18px; min-width: 190px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%238E9AAE' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 10px; padding-right: 36px; } .occ-search input:focus, .occ-select select:focus { outline: none; border-color: var(--ai); box-shadow: 0 0 0 3px rgba(63, 222, 179, .2); } .occ-agents__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } @media (max-width: 920px) { .occ-agents__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .occ-agents__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .occ-agents__grid { grid-template-columns: 1fr; } .occ-search input, .occ-select select { min-width: 0; width: 100%; } .occ-agents__filters, .occ-search, .occ-select { width: 100%; } } .occ-agent { position: relative; display: flex; flex-direction: column; padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s, opacity .3s; --tone: var(--mint); } .occ-agent.is-coral { --tone: var(--coral); } .occ-agent.is-teal { --tone: var(--teal); } .occ-agent.is-mix { --tone: var(--mint); } .occ-agent:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tone) 55%, transparent); box-shadow: var(--shadow), 0 24px 50px -28px color-mix(in srgb, var(--tone) 70%, transparent); } .occ-agent:focus-within { outline: 2px solid var(--ai); outline-offset: 3px; } .occ-agent[hidden] { display: none; } .occ-agent__art { position: relative; height: 112px; border-radius: 16px; margin-bottom: 16px; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; padding: 14px; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--tone) 32%, transparent), transparent 60%), var(--surface-2); border: 1px solid var(--border); } .occ-agent.is-mix .occ-agent__art { background: radial-gradient(90% 90% at 100% 0%, rgba(255, 81, 104, .3), transparent 60%), radial-gradient(90% 90% at 0% 100%, rgba(63, 222, 179, .25), transparent 60%), var(--surface-2); } .occ-agent__glyph { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 1rem; color: #0E0F19; background: var(--tone); box-shadow: 0 8px 24px -8px var(--tone); } .occ-agent__art .occ-wave i { background: var(--tone); opacity: .8; animation-play-state: paused; } .occ-agent:hover .occ-agent__art .occ-wave i { animation-play-state: running; } .occ-agent__cat { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: block; } .occ-agent__title { font-size: 1.0625rem; margin-bottom: 6px; } .occ-agent__title a { color: var(--heading); text-decoration: none; } .occ-agent__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; } .occ-agent__desc { color: var(--text-2); font-size: .875rem; line-height: 1.5; margin-bottom: 16px; flex: 1; } .occ-agent__cta { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--accent); } .occ-agent__cta svg { transition: transform .2s; } .occ-agent:hover .occ-agent__cta svg { transform: translateX(4px); } .occ-agents__none { text-align: center; color: var(--muted); padding: 32px; } .occ-empty { color: var(--muted); } /* Agent single */ .occ-agent-hero { padding-top: clamp(28px, 4vw, 48px); overflow: hidden; isolation: isolate; } .occ-agent-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-wash); } .occ-agent-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .occ-agent-hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); } @media (max-width: 860px) { .occ-agent-hero__grid { grid-template-columns: 1fr; } } /* Pills */ .occ-pills { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .occ-pill { display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); text-decoration: none; } a.occ-pill:hover { border-color: var(--border-2); color: var(--heading); } .occ-pill.is-active { background: var(--heading); color: var(--bg); border-color: var(--heading); } .occ-pills--static { margin-top: 20px; } /* 16. Pricing -------------------------------------------------------------- */ .occ-pricing { align-items: stretch; } .occ-plan { display: flex; flex-direction: column; } .occ-plan .wp-block-buttons { margin-top: auto; padding-top: 24px; } .occ-plan .wp-block-button, .occ-plan .wp-block-button__link { width: 100%; } .occ-card .occ-plan__name, .occ-plan__name { font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ai-text) !important; margin-bottom: 8px !important; } .occ-card .occ-plan__price, .occ-plan__price { font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 800; color: var(--heading) !important; letter-spacing: -.035em; line-height: 1.1; margin: 4px 0 6px !important; } .occ-card .occ-plan__note, .occ-plan__price small, .occ-plan__note { font-size: .875rem; font-weight: 600; color: var(--muted) !important; letter-spacing: 0; } .occ-plan.is-featured { border-color: rgba(255, 81, 104, .55); box-shadow: 0 0 0 1px rgba(255, 81, 104, .25), 0 30px 80px -40px rgba(255, 81, 104, .55); } [data-theme="dark"] .occ-plan.is-featured { background: radial-gradient(120% 60% at 50% 0%, rgba(255, 81, 104, .12), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); } .occ-plan.is-featured .occ-card .occ-plan__name, .occ-plan__name { color: var(--accent) !important; } /* Tables */ .wp-block-table { margin: 0; overflow-x: auto; } .wp-block-table table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 0; } .wp-block-table thead, .wp-block-table tfoot { border: 0 !important; } .wp-block-table th, .wp-block-table td { padding: 14px 16px; text-align: left; border: 0 !important; border-bottom: 1px solid var(--border) !important; vertical-align: top; word-break: normal; } .wp-block-table thead th { border-bottom-color: var(--border-2) !important; } @media (max-width: 480px) { .wp-block-table th, .wp-block-table td { padding: 12px 10px; font-size: .875rem; } } .wp-block-table thead th { color: var(--heading); font-weight: 800; border-bottom: 1px solid var(--border-2); background: var(--surface-2); } .wp-block-table td:first-child { color: var(--heading); font-weight: 600; } .wp-block-table td { color: var(--text-2); } .occ-compare { border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); } .occ-compare thead th:first-child { border-top-left-radius: var(--radius-l); } .occ-compare thead th:last-child { border-top-right-radius: var(--radius-l); } .occ-compare tbody tr:last-child td { border-bottom: 0 !important; } .wp-block-table figcaption { padding: 0 16px 14px; } .wp-block-table figcaption { color: var(--muted); font-size: .8125rem; margin-top: 10px; } /* 17. FAQ (core details) --------------------------------------------------- */ .occ-faq { max-width: 860px; margin-inline: auto; display: grid; gap: 10px; } .occ-faq > * { margin: 0 !important; } .wp-block-details { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); padding: 0; transition: border-color .25s, background-color .25s; } .wp-block-details[open] { border-color: var(--border-2); } .wp-block-details summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-weight: 700; color: var(--heading); position: relative; font-size: 1.0625rem; line-height: 1.4; } .wp-block-details summary::-webkit-details-marker { display: none; } .wp-block-details summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FDEB3' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .3s var(--ease); } .wp-block-details[open] summary::after { transform: rotate(45deg); } .wp-block-details > :not(summary) { padding: 0 22px; color: var(--text-2); } .wp-block-details > :last-child { padding-bottom: 20px; margin-bottom: 0; } /* 18. CTA ------------------------------------------------------------------ */ .occ-cta { padding-block: clamp(56px, 8vw, 112px); } .occ-cta-box { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(40px, 7vw, 88px) clamp(20px, 5vw, 64px); border-radius: 32px; background: radial-gradient(60% 80% at 50% 0%, rgba(63, 222, 179, .18), transparent 65%), radial-gradient(50% 70% at 100% 100%, rgba(255, 81, 104, .2), transparent 60%), var(--navy); border: 1px solid rgba(145, 193, 149, .2); --heading: #FFFFFF; --text-2: #C9D3E3; --muted: #9FB0CC; --ai-text: #3FDEB3; --mark-gap: var(--navy); --surface: rgba(255, 255, 255, .06); --border-2: rgba(255, 255, 255, .22); --glass: rgba(10, 26, 50, .6); color: #E6ECF5; } .occ-cta-box > * { position: relative; z-index: 2; } .occ-cta-box h2 { color: #fff; font-size: clamp(2.25rem, 5vw, 4rem); margin-inline: auto; max-width: 14ch; } .occ-cta-box .occ-lead { margin-inline: auto; color: #C9D3E3; } .occ-cta-box .wp-block-buttons { justify-content: center; } .occ-cta-box .wp-block-button.is-style-ghost .wp-block-button__link { color: #fff; } .occ-cta-box .occ-hv { margin: -20px auto 4px; width: min(300px, 70%); } .occ-cta-box::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(60% 60% at 50% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(60% 60% at 50% 30%, #000, transparent 75%); } .occ-cta-band { padding-block: clamp(48px, 6vw, 88px); } .occ-cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: radial-gradient(60% 120% at 100% 0%, rgba(255, 81, 104, .2), transparent 60%), radial-gradient(50% 120% at 0% 100%, rgba(63, 222, 179, .16), transparent 60%), var(--navy); border: 1px solid rgba(145, 193, 149, .2); } .occ-cta-band__inner h2 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 6px; } .occ-cta-band__inner p { color: #C9D3E3; margin: 0; } .occ-cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; } .occ-cta-band .occ-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); } /* 19. Footer --------------------------------------------------------------- */ .occ-footer { position: relative; overflow: hidden; border-top: 1px solid var(--border); background: var(--bg-2); padding-top: clamp(56px, 7vw, 96px); font-size: .9375rem; } [data-theme="dark"] .occ-footer { background: #0A0B13; } .occ-footer { --mark-gap: var(--bg-2); } [data-theme="dark"] .occ-footer { --mark-gap: #0A0B13; } .occ-footer__glow { position: absolute; left: 50%; bottom: -380px; width: 900px; height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(63, 222, 179, .12), transparent), radial-gradient(closest-side at 70% 60%, rgba(255, 81, 104, .1), transparent); pointer-events: none; } .occ-footer__top { display: grid; grid-template-columns: minmax(220px, .8fr) 2.6fr; gap: clamp(32px, 6vw, 96px); position: relative; } .occ-footer__brand > a { text-decoration: none; display: inline-flex; } .occ-footer__brand p { color: var(--muted); max-width: 340px; margin-top: 18px; } .occ-footer__email { color: var(--heading); font-weight: 600; } .occ-footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } .occ-footer__title { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--heading); margin-bottom: 16px; } .occ-footer__col ul, .occ-footer__legal, .occ-social { list-style: none; margin: 0; padding: 0; } .occ-footer__col li { margin-bottom: 10px; } .occ-footer a { color: var(--muted); text-decoration: none; transition: color .2s; } .occ-footer a:hover { color: var(--heading); } .occ-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(40px, 6vw, 72px); padding-block: 24px; border-top: 1px solid var(--border); position: relative; color: var(--muted); font-size: .875rem; } .occ-footer__bottom p { margin: 0; } .occ-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; } .occ-social { display: flex; gap: 8px; margin-top: 20px; } .occ-social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--text-2); } .occ-social a:hover { border-color: var(--ai); color: var(--heading); } @media (max-width: 1024px) { .occ-footer__top { grid-template-columns: 1fr; } .occ-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .occ-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 20. Forms ---------------------------------------------------------------- */ .occ-form-wrap { padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-l); } [data-theme="dark"] .occ-form-wrap { background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); } .occ-form fieldset { border: 0; padding: 0; margin: 0 0 22px; } .occ-form legend { font-weight: 800; color: var(--heading); margin-bottom: 12px; font-size: 1.0625rem; } .occ-form__topics { display: flex; flex-wrap: wrap; gap: 8px; } .occ-form__topics legend { width: 100%; } .occ-radio input { position: absolute; opacity: 0; pointer-events: none; } .occ-radio span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .875rem; font-weight: 600; cursor: pointer; transition: all .2s; } .occ-radio input:checked + span { background: var(--heading); color: var(--bg); border-color: var(--heading); } .occ-radio input:focus-visible + span { outline: 2px solid var(--ai); outline-offset: 2px; } .occ-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .occ-field { margin: 0; display: flex; flex-direction: column; gap: 6px; } .occ-field--full { grid-column: 1 / -1; } .occ-field label { font-size: .875rem; font-weight: 700; color: var(--heading); } .occ-field label span { color: var(--accent); } .occ-field input, .occ-field select, .occ-field textarea, .search-form .search-field { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--bg); color: var(--heading); font: 500 1rem/1.4 var(--font); transition: border-color .2s, box-shadow .2s; } .occ-field textarea { resize: vertical; min-height: 120px; } .occ-field input:focus, .occ-field select:focus, .occ-field textarea:focus, .search-form .search-field:focus { outline: none; border-color: var(--ai); box-shadow: 0 0 0 3px rgba(63, 222, 179, .2); } .occ-field input::placeholder, .occ-field textarea::placeholder { color: var(--muted); } .occ-form__legal { font-size: .8125rem; color: var(--muted); margin: 18px 0; } .occ-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .occ-notice { display: flex; gap: 12px; padding: 16px 18px; border-radius: 16px; margin-bottom: 22px; border: 1px solid; } .occ-notice p { margin: 2px 0 0; font-size: .9375rem; } .occ-notice strong { color: var(--heading); } .occ-notice--ok { border-color: rgba(63, 222, 179, .4); background: rgba(63, 222, 179, .08); color: var(--ai-text); } .occ-notice--err { border-color: rgba(255, 81, 104, .4); background: rgba(255, 81, 104, .08); color: var(--accent); } @media (max-width: 560px) { .occ-form__grid { grid-template-columns: 1fr; } } .search-form { display: flex; gap: 8px; max-width: 480px; margin-inline: auto; } .search-form label { flex: 1; } .search-form .search-submit { min-height: 48px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--coral); color: #0E0F19; font: 700 1rem var(--font); cursor: pointer; } /* Contact page info list */ .occ-info { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; } .occ-info li { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); } /* 21. Prose (legal, docs, blog) ------------------------------------------- */ .occ-prose { max-width: 760px; margin-inline: auto; font-size: 1.0625rem; color: var(--text-2); } .occ-prose > * + * { margin-top: 1.1em; } .occ-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2em; } .occ-prose h3 { font-size: 1.25rem; margin-top: 1.6em; } .occ-prose ul, .occ-prose ol { padding-left: 1.3em; } .occ-prose li + li { margin-top: .4em; } .occ-prose li::marker { color: var(--ai-text); } .occ-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--coral); color: var(--heading); font-size: 1.1875rem; } .occ-prose code { font-size: .9em; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); } .occ-prose img { border-radius: var(--radius); } .occ-prose .wp-block-image figcaption { color: var(--muted); font-size: .8125rem; text-align: center; } .occ-notebox { padding: 18px 20px; border-radius: 16px; border: 1px dashed var(--border-2); background: var(--surface); font-size: .9375rem; } /* 22. Blog cards ----------------------------------------------------------- */ .occ-posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } @media (max-width: 960px) { .occ-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .occ-posts { grid-template-columns: 1fr; } } .occ-post-card { position: relative; padding: 14px 14px 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .3s var(--ease), border-color .3s; } .occ-post-card:hover { transform: translateY(-3px); border-color: var(--border-2); } .occ-post-card__media { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; margin-bottom: 16px; background: var(--surface-2); } .occ-post-card__media img { width: 100%; height: 100%; object-fit: cover; } .occ-post-card__art { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(80% 80% at 100% 0%, rgba(255, 81, 104, .22), transparent 60%), radial-gradient(80% 80% at 0% 100%, rgba(63, 222, 179, .22), transparent 60%); } .occ-post-card > :not(.occ-post-card__media) { padding-inline: 8px; } .occ-post-card__title { font-size: 1.1875rem; margin-bottom: 8px; } .occ-post-card__title a { color: var(--heading); text-decoration: none; } .occ-post-card__title a::after { content: ""; position: absolute; inset: 0; } .occ-post-card p { color: var(--text-2); font-size: .9375rem; margin-bottom: 12px; } .occ-post-card__meta { color: var(--muted); font-size: .8125rem; } .nav-links { display: flex; justify-content: center; gap: 8px; margin-top: 40px; } .nav-links .page-numbers { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); text-decoration: none; color: var(--text-2); } .nav-links .page-numbers.current { background: var(--heading); color: var(--bg); } .occ-article__meta { color: var(--muted); font-size: .9375rem; } .occ-article__head h1 { max-width: 22ch; font-size: clamp(2.125rem, 4.4vw, 3.5rem); } .occ-article__media { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); } .occ-article__media img { border-radius: var(--radius-l); width: 100%; } .occ-empty-state { text-align: center; max-width: 560px; margin: 0 auto; padding: 48px 0; } .occ-empty-state .occ-mark { margin: 0 auto 18px; } .occ-404 { text-align: center; } .occ-404 .occ-mark { margin: 0 auto 24px; } .occ-404 h1 { margin-inline: auto; } .occ-404 .occ-lead { margin-inline: auto; } .occ-404__search { margin-top: 32px; } /* Resource tiles */ .occ-logo-block { display: flex; justify-content: center; } /* 23. Motion --------------------------------------------------------------- */ .js .occ-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--rd, 0s); } .js .occ-reveal.is-in { opacity: 1; transform: none; } @keyframes occ-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 222, 179, .45); } 70% { box-shadow: 0 0 0 8px rgba(63, 222, 179, 0); } } @keyframes occ-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes occ-spin { to { transform: rotate(360deg); } } @keyframes occ-wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } } @keyframes occ-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } } @keyframes occ-dash { to { stroke-dashoffset: -16; } } @keyframes occ-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes occ-hub { 0% { box-shadow: 0 0 0 0 rgba(63, 222, 179, .5); } 100% { box-shadow: 0 0 0 24px rgba(63, 222, 179, 0); } } @keyframes occ-travel { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } } @keyframes occ-travel-y { from { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 8px); opacity: 0; } } @keyframes occ-doc { 0%, 70%, 100% { transform: none; border-color: var(--border); } 80% { transform: translateX(6px); border-color: rgba(63, 222, 179, .5); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js .occ-reveal { opacity: 1; transform: none; } .occ-wave i { transform: scaleY(.8); } .occ-dash__frame { transform: none; } } /* 24. Core block niceties -------------------------------------------------- */ .wp-block-image img { border-radius: var(--radius); } .wp-block-quote { border-left: 3px solid var(--coral); padding-left: 20px; margin-left: 0; } .has-text-align-center { text-align: center; } .aligncenter { margin-inline: auto; } .wp-block-group.is-layout-flex { display: flex; flex-wrap: wrap; gap: 16px; } /* Page-specific */ .page-contact .occ-split { align-items: flex-start !important; } .page-contact .occ-pagehero h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); } /* ========================================================================== v2 — visual-first components ========================================================================== */ /* Animated icon tiles (injected into any group with ico-*) */ .occ-ico-tile { position: relative; display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 20px; border-radius: 18px; color: var(--ai-text); isolation: isolate; background: linear-gradient(145deg, rgba(63, 222, 179, .2), rgba(63, 222, 179, .04)); border: 1px solid rgba(63, 222, 179, .3); box-shadow: 0 10px 30px -12px rgba(63, 222, 179, .55); transition: transform .4s var(--ease), box-shadow .4s; } .occ-ico-tile::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid currentColor; opacity: 0; z-index: -1; animation: occ-tile-ping 3.2s var(--ease) infinite; animation-delay: calc(var(--rd, 0s) * 4); } .occ-ico { display: block; } .occ-ico * { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) .15s; } .js .occ-reveal:not(.is-in) .occ-ico * { stroke-dashoffset: 1; } .occ-grid > :nth-child(3n+2) .occ-ico-tile, .occ-steps-blk > :nth-child(even) .occ-ico-tile { color: var(--accent); background: linear-gradient(145deg, rgba(255, 81, 104, .2), rgba(255, 81, 104, .04)); border-color: rgba(255, 81, 104, .3); box-shadow: 0 10px 30px -12px rgba(255, 81, 104, .55); } .occ-grid > :nth-child(3n) .occ-ico-tile { color: #7FB884; background: linear-gradient(145deg, rgba(145, 193, 149, .22), rgba(145, 193, 149, .04)); border-color: rgba(145, 193, 149, .32); box-shadow: 0 10px 30px -12px rgba(145, 193, 149, .5); } [data-theme="light"] .occ-grid > :nth-child(3n) .occ-ico-tile { color: #3F7A44; } .occ-card:hover .occ-ico-tile { transform: translateY(-3px) rotate(-6deg) scale(1.06); } .occ-card:hover .occ-ico * { animation: occ-redraw 1s var(--ease); } .occ-step .occ-ico-tile { position: absolute; top: 4px; right: 18px; width: 46px; height: 46px; border-radius: 14px; margin: 0; } .occ-step .occ-ico-tile svg { width: 22px; height: 22px; } /* Mini tiles (industries etc.) */ .occ-card--mini { text-align: center; padding: 26px 18px; } .occ-card--mini .occ-ico-tile { margin-inline: auto; } .occ-card--mini h3 { font-size: 1.0625rem; margin: 0; } .occ-card--mini p { display: none; } /* Hero headline shimmer */ .occ-hero h1 em, .occ-pagehero h1 em { background: linear-gradient(100deg, var(--coral) 0%, var(--coral) 35%, #FF9AA8 45%, var(--mint) 55%, var(--coral) 65%, var(--coral) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: occ-shimmer 6s ease-in-out infinite; } /* Icon pills */ .occ-pills2 { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .occ-pills2--center { justify-content: center; } .occ-pills2--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; } .occ-pills2 li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--heading); font-weight: 600; font-size: .9375rem; animation: occ-in .6s var(--ease) both; animation-delay: calc(.35s + var(--i) * .12s); } .occ-pills2--grid li { border-radius: 16px; padding: 12px 14px 12px 12px; } .occ-pills2__ico { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ai-text); background: rgba(63, 222, 179, .14); } .occ-pills2 li:nth-child(3n+2) .occ-pills2__ico { color: var(--accent); background: rgba(255, 81, 104, .12); } .occ-pills2 .occ-ico * { animation: occ-draw 1.4s var(--ease) both; animation-delay: calc(.5s + var(--i) * .12s); } @media (max-width: 560px) { .occ-pills2--grid { grid-template-columns: 1fr; } } /* Marquee */ .occ-marquee { display: flex; overflow: hidden; gap: 14px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .occ-marquee__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex: none; animation: occ-marquee 45s linear infinite; } .occ-marquee:hover .occ-marquee__track { animation-play-state: paused; } .occ-marquee li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; white-space: nowrap; font-weight: 700; color: var(--heading); background: var(--surface); border: 1px solid var(--border); } .occ-marquee li svg { color: var(--ai-text); } .occ-marquee li:nth-child(even) svg { color: var(--accent); } .occ-section--marquee { padding-block: 28px; } /* Value tiles */ .occ-vt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .occ-vt__item { position: relative; padding: 26px 22px 26px; border-radius: 26px; text-align: center; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; transition: transform .4s var(--ease), border-color .4s; } [data-theme="dark"] .occ-vt__item { background: radial-gradient(120% 80% at 50% 0%, rgba(63, 222, 179, .08), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); } .occ-vt__item:nth-child(even) { --tint: var(--coral); } .occ-vt__item:hover { transform: translateY(-6px); border-color: var(--border-2); } .occ-vt__item h3 { font-size: 1.1875rem; margin: 6px 0 6px; } .occ-vt__item p { color: var(--text-2); font-size: .9375rem; margin: 0; } .occ-vt__art { width: 132px; height: 132px; margin: 0 auto 8px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(63, 222, 179, .16), transparent 68%); } .occ-vt__item:nth-child(even) .occ-vt__art { background: radial-gradient(circle, rgba(255, 81, 104, .16), transparent 68%); } .occ-art { width: 110px; height: 110px; fill: none; stroke: var(--ai-text); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } .occ-vt__item:nth-child(even) .occ-art { stroke: var(--accent); } .occ-art--icon { display: grid; place-items: center; color: var(--ai-text); } @media (max-width: 1024px) { .occ-vt { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .occ-vt { grid-template-columns: 1fr 1fr; gap: 12px; } .occ-vt__item { padding: 18px 12px; } .occ-vt__art { width: 96px; height: 96px; } .occ-art { width: 80px; height: 80px; } .occ-vt__item h3 { font-size: 1rem; } .occ-vt__item p { font-size: .8125rem; } } /* simple: toggle switching on with a click */ .occ-art--simple .a-track { stroke-width: 3; animation: occ-a-track 3.2s var(--ease) infinite; } .occ-art--simple .a-knob { fill: currentColor; stroke: none; color: var(--ai-text); fill: var(--ai-text); animation: occ-a-knob 3.2s var(--ease) infinite; } .occ-art--simple .a-cursor { fill: var(--heading); stroke: var(--bg); stroke-width: 2; animation: occ-a-cursor 3.2s var(--ease) infinite; } .occ-art--simple .a-ripple { stroke-width: 2; opacity: 0; transform-origin: 80px 72px; animation: occ-a-ripple 3.2s var(--ease) infinite; } /* plug: two halves connect, spark */ .occ-art--plug .a-left { animation: occ-a-left 3s var(--ease) infinite; } .occ-art--plug .a-right { animation: occ-a-right 3s var(--ease) infinite; } .occ-art--plug .a-spark { stroke: var(--mint); opacity: 0; animation: occ-a-spark 3s var(--ease) infinite; } .occ-vt__item:nth-child(even) .occ-art--plug .a-spark { stroke: var(--mint); } /* coins: big cost shrinks, coin bounces */ .occ-art--coins .a-big { stroke: var(--coral); fill: rgba(255, 81, 104, .14); transform-origin: 37px 100px; animation: occ-a-big 3.6s var(--ease) infinite; } .occ-art--coins .a-small { stroke: var(--mint); fill: rgba(63, 222, 179, .25); } .occ-art--coins .a-coin { stroke: var(--mint); animation: occ-a-coin 1.8s var(--ease) infinite; } /* clock */ .occ-art--clock .a-ring { stroke-dasharray: 6 8; stroke-width: 3; transform-origin: 60px 60px; animation: occ-spin 18s linear infinite; } .occ-art--clock .a-face { stroke-width: 3; opacity: .5; } .occ-art--clock .a-hand { transform-origin: 60px 60px; } .occ-art--clock .a-hand--m { animation: occ-spin 4s linear infinite; } .occ-art--clock .a-hand--h { animation: occ-spin 48s linear infinite; stroke: var(--coral); } .occ-art--clock .a-dot { fill: var(--heading); stroke: none; } /* Cost comparison */ .occ-cost { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: stretch; } .occ-cost__main { padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } .occ-cost__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .occ-cost__tabs .occ-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: .9375rem; } .occ-cost__row { display: grid; gap: 12px; padding: 18px 0; } .occ-cost__row + .occ-cost__row { border-top: 1px dashed var(--border-2); } .occ-cost__who { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .occ-cost__who strong { color: var(--heading); font-size: 1.0625rem; } .occ-cost__people { display: inline-flex; } .occ-cost__people i { width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--surface-solid); border: 1.5px solid rgba(255, 81, 104, .45); transform: scale(0); } .occ-cost__people i:first-child { margin-left: 0; } .is-play .occ-cost__people i { animation: occ-pop .45s var(--ease) both; animation-delay: calc(var(--i) * .1s); } .occ-cost__mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1.5px solid rgba(63, 222, 179, .5); box-shadow: 0 0 24px -4px rgba(63, 222, 179, .6); --mark-gap: var(--surface-2); } .occ-cost__bar { height: 16px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .occ-cost__bar b { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 1.4s var(--ease) .3s; } .occ-cost__row--team .occ-cost__bar b { background: linear-gradient(90deg, #FF8B9A, var(--coral)); } .occ-cost__row--ai .occ-cost__bar b { background: linear-gradient(90deg, var(--mint), #8BEFD3); box-shadow: 0 0 16px rgba(63, 222, 179, .6); } .is-play .occ-cost__bar b { width: var(--w); } .occ-cost__chips { display: flex; flex-wrap: wrap; gap: 6px; } .occ-cost__chip { padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--accent); background: rgba(255, 81, 104, .08); border: 1px solid rgba(255, 81, 104, .25); } .occ-cost__chip.is-mint { color: var(--ai-text); background: rgba(63, 222, 179, .08); border-color: rgba(63, 222, 179, .3); } .occ-cost__badge { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; border-radius: 28px; color: #fff; background: radial-gradient(80% 70% at 50% 0%, rgba(63, 222, 179, .35), transparent 70%), radial-gradient(70% 60% at 100% 100%, rgba(255, 81, 104, .4), transparent 70%), var(--navy); border: 1px solid rgba(145, 193, 149, .25); } .occ-cost__badge::before { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .18); animation: occ-spin 30s linear infinite; } .occ-cost__num, .occ-cost__x { font-size: clamp(4.5rem, 9vw, 7rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff, #9FF0D8); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; } .occ-cost__badge > .occ-cost__num { display: inline; } .occ-cost__badge { flex-flow: row wrap; align-content: center; } .occ-cost__tag { flex-basis: 100%; margin-top: 12px; font-weight: 700; font-size: 1.0625rem; color: #DCE5F2; position: relative; } .occ-cost__note { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--muted); font-size: .8125rem; } @media (max-width: 900px) { .occ-cost { grid-template-columns: 1fr; } .occ-cost__badge { order: -1; padding: 22px; } } /* Integration */ .occ-int { display: grid; grid-template-columns: 1fr 70px auto 70px 1fr; align-items: center; gap: 0; } .occ-int__col { padding: 22px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } .occ-int__label { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .occ-int__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .occ-int__col li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 700; color: var(--heading); font-size: .9375rem; } .js .occ-int.occ-reveal:not(.is-in) li { opacity: 0; transform: translateX(-10px); } .occ-int li { transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * .12s); } .occ-int__col li em { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: .6875rem; font-weight: 700; color: var(--accent); border: 1px solid rgba(255, 81, 104, .35); vertical-align: middle; } .occ-int__ico { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--ai-text); background: rgba(63, 222, 179, .12); } .occ-int__col--out .occ-int__ico { color: var(--accent); background: rgba(255, 81, 104, .1); } .occ-int__pipe { position: relative; height: 2px; margin: 0 4px; background: var(--border-2); } .occ-int__pipe i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: occ-travel 2.2s linear infinite; } .occ-int__pipe i:nth-child(2) { animation-delay: .73s; background: var(--coral); box-shadow: 0 0 10px var(--coral); } .occ-int__pipe i:nth-child(3) { animation-delay: 1.46s; } .occ-int__hub { position: relative; width: 190px; height: 190px; display: grid; place-items: center; } .occ-int__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(63, 222, 179, .4); animation: occ-ring 3s var(--ease) infinite; } .occ-int__ring + .occ-int__ring { animation-delay: 1.5s; border-color: rgba(255, 81, 104, .4); } .occ-int__core { position: relative; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; background: var(--surface-solid); border: 1px solid var(--border-2); box-shadow: 0 0 60px -10px rgba(63, 222, 179, .55); --mark-gap: var(--surface-solid); } .occ-int__core b { color: var(--heading); font-size: .9375rem; } .occ-int__core small { color: var(--muted); font-size: .75rem; } @media (max-width: 960px) { .occ-int { grid-template-columns: 1fr; justify-items: stretch; } .occ-int__hub { margin: 0 auto; width: 170px; height: 170px; } .occ-int__core { width: 132px; height: 132px; } .occ-int__pipe { width: 2px; height: 40px; margin: 0 auto; } .occ-int__pipe i { left: -3px; animation-name: occ-travel-y; } } /* Decorative glow sections */ .occ-section--glow { overflow: hidden; isolation: isolate; } .occ-section--glow::before { content: ""; position: absolute; z-index: -1; width: 640px; height: 640px; left: -160px; top: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(63, 222, 179, .14), transparent); animation: occ-blob 18s ease-in-out infinite alternate; pointer-events: none; } .occ-section--glow::after { content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; right: -160px; bottom: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 81, 104, .12), transparent); animation: occ-blob 22s ease-in-out infinite alternate-reverse; pointer-events: none; } @keyframes occ-tile-ping { 0%, 60% { transform: scale(1); opacity: 0; } 70% { opacity: .5; } 100% { transform: scale(1.45); opacity: 0; } } @keyframes occ-redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes occ-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes occ-shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } } @keyframes occ-marquee { to { transform: translateX(calc(-100% - 14px)); } } @keyframes occ-pop { from { transform: scale(0); } 70% { transform: scale(1.15); } to { transform: scale(1); } } @keyframes occ-ring { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.25); opacity: 0; } } @keyframes occ-blob { from { transform: translate(0, 0) scale(1); } to { transform: translate(120px, 60px) scale(1.2); } } @keyframes occ-a-knob { 0%, 30% { transform: translateX(0); } 45%, 85% { transform: translateX(40px); } 100% { transform: translateX(0); } } @keyframes occ-a-track { 0%, 30% { fill: transparent; } 45%, 85% { fill: rgba(63, 222, 179, .22); } 100% { fill: transparent; } } @keyframes occ-a-cursor { 0% { transform: translate(14px, 16px); opacity: 0; } 15% { opacity: 1; } 28% { transform: translate(0, 0); } 34% { transform: translate(0, 0) scale(.9); } 40%, 80% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(14px, 16px); opacity: 0; } } @keyframes occ-a-ripple { 0%, 32% { transform: scale(.4); opacity: 0; } 36% { opacity: .9; } 55%, 100% { transform: scale(3); opacity: 0; } } @keyframes occ-a-left { 0%, 10% { transform: translateX(-10px); } 40%, 75% { transform: translateX(10px); } 100% { transform: translateX(-10px); } } @keyframes occ-a-right { 0%, 10% { transform: translateX(10px); } 40%, 75% { transform: translateX(-10px); } 100% { transform: translateX(10px); } } @keyframes occ-a-spark { 0%, 38% { opacity: 0; } 45%, 70% { opacity: 1; } 80%, 100% { opacity: 0; } } @keyframes occ-a-big { 0%, 15% { transform: scaleY(1); } 50%, 80% { transform: scaleY(.15); } 100% { transform: scaleY(1); } } @keyframes occ-a-coin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .occ-marquee { flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; } .occ-marquee__track { flex-wrap: wrap; justify-content: center; } .occ-marquee__track[aria-hidden] { display: none; } .occ-cost__people i { transform: none; } .occ-cost__bar b { width: var(--w); } } .occ-section--marquee + .occ-section { padding-top: clamp(40px, 5vw, 72px); } .occ-head { margin-bottom: clamp(28px, 4vw, 48px); } /* Split with a tall dashboard: top-align and keep the text in view */ @media (min-width: 861px) { .occ-split:has(.occ-dash) { align-items: flex-start !important; } .occ-split:has(.occ-dash) > .wp-block-column:first-child { position: sticky; top: 120px; } } /* Steps inside a half-width column: adapt to the space they actually have */ .wp-block-column { container-type: inline-size; } @container (max-width: 720px) { .occ-steps-blk, .occ-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .occ-steps-blk::before, .occ-steps-blk::after, .occ-steps::before, .occ-steps::after { display: none; } .occ-step, .occ-steps > li { padding: 70px 20px 22px; } } @container (max-width: 380px) { .occ-steps-blk, .occ-steps { grid-template-columns: 1fr; } } /* Steps: staggered entrance, running progress line and a step-by-step highlight loop */ .js .occ-steps-blk.occ-reveal .occ-step { opacity: 0; transform: translateY(28px) scale(.97); transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .4s, box-shadow .4s; } .js .occ-steps-blk.occ-reveal .occ-step:nth-child(2) { transition-delay: .15s; } .js .occ-steps-blk.occ-reveal .occ-step:nth-child(3) { transition-delay: .3s; } .js .occ-steps-blk.occ-reveal .occ-step:nth-child(4) { transition-delay: .45s; } .js .occ-steps-blk.occ-reveal.is-in .occ-step { opacity: 1; transform: none; } .occ-steps-blk.is-in::after { width: 0; box-shadow: 0 0 14px rgba(63, 222, 179, .9); animation: occ-steps-run 6s linear 1s infinite; transition: none; } .occ-steps-blk.is-in .occ-step { animation: occ-step-active 6s var(--ease) 1s infinite; } .occ-steps-blk.is-in .occ-step:nth-child(2) { animation-delay: 2.5s; } .occ-steps-blk.is-in .occ-step:nth-child(3) { animation-delay: 4s; } .occ-steps-blk.is-in .occ-step:nth-child(4) { animation-delay: 5.5s; } .occ-steps-blk.is-in .occ-step::before { animation: occ-step-badge 6s var(--ease) infinite; animation-delay: inherit; } .occ-steps-blk.is-in .occ-step .occ-ico-tile { animation: occ-step-ico 6s var(--ease) infinite; animation-delay: inherit; } .occ-steps-blk.is-in .occ-step .occ-ico * { animation: occ-step-draw 6s var(--ease) infinite; animation-delay: inherit; } @keyframes occ-steps-run { 0% { width: 0; opacity: 1; } 85% { width: 92%; opacity: 1; } 100% { width: 92%; opacity: 0; } } @keyframes occ-step-active { 0%, 30%, 100% { border-color: var(--border); box-shadow: var(--shadow); transform: none; } 6%, 22% { border-color: rgba(63, 222, 179, .6); box-shadow: 0 0 0 4px rgba(63, 222, 179, .1), 0 24px 50px -24px rgba(63, 222, 179, .6); transform: translateY(-6px); } } @keyframes occ-step-badge { 0%, 30%, 100% { transform: scale(1); } 8% { transform: scale(1.18) rotate(-6deg); } 16% { transform: scale(1); } } @keyframes occ-step-ico { 0%, 30%, 100% { transform: none; } 8% { transform: translateY(-4px) rotate(-10deg) scale(1.1); } 16% { transform: none; } } @keyframes occ-step-draw { 0%, 2% { stroke-dashoffset: 1; } 14%, 100% { stroke-dashoffset: 0; } } .occ-steps-blk::before, .occ-steps-blk::after { z-index: 0; } .occ-steps-blk > .occ-step { z-index: 1; } .occ-agent-hero__grid > * { min-width: 0; } /* Contact details */ .occ-contact-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; } .occ-contact-list li { display: flex; align-items: center; gap: 12px; } .occ-contact-list a { color: var(--heading); font-weight: 700; text-decoration: none; } .occ-contact-list a:hover { color: var(--accent); } .occ-contact-list__ico { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--ai-text); background: rgba(63, 222, 179, .12); border: 1px solid rgba(63, 222, 179, .25); } .occ-contact-list li + li .occ-contact-list__ico { color: var(--accent); background: rgba(255, 81, 104, .1); border-color: rgba(255, 81, 104, .25); } .occ-contact-list--footer { margin-top: 20px; } .occ-contact-list--footer a { font-weight: 600; font-size: .9375rem; } .occ-contact-card { margin-top: 28px; padding: 20px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } .occ-contact-card__title { margin: 0; font-weight: 800; color: var(--heading); } .occ-contact-card .occ-contact-list a { font-size: 1.0625rem; } /* Mobile header: always fits on one line */ .occ-nav__theme-m { display: none; } @media (max-width: 960px) { .occ-header__inner { justify-content: space-between; padding: 0 8px 0 14px; gap: 10px; } .occ-header__brand { min-width: 0; flex: 0 1 auto; } .occ-header__actions { gap: 6px; margin-left: auto; } .occ-nav__theme-m { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 600 .9375rem var(--font); cursor: pointer; } .occ-nav__theme-m svg { flex: none; } [data-theme="dark"] .occ-nav__theme-m .occ-theme-toggle__moon, [data-theme="light"] .occ-nav__theme-m .occ-theme-toggle__sun { display: none; } .occ-nav__theme-m svg { opacity: 1 !important; transform: none !important; } } @media (max-width: 480px) { .occ-header { padding: 10px 12px 0; } .occ-header__inner { height: 56px; padding: 0 6px 0 12px; border-radius: 16px; } .occ-logo { gap: 8px; } .occ-logo .occ-mark { width: 28px; height: 28px; } .occ-wordmark { font-size: 1.0625rem; } .occ-theme-toggle { width: 38px; height: 38px; border-radius: 11px; } .occ-burger { width: 42px; height: 42px; } .occ-burger i { left: 12px; right: 12px; } .occ-burger i:first-of-type { top: 16px; } .occ-burger i:last-of-type { top: 24px; } .occ-burger[aria-expanded="true"] i:first-of-type, .occ-burger[aria-expanded="true"] i:last-of-type { top: 20px; } .occ-nav { inset: calc(56px + 18px) 12px auto 12px; } } @media (max-width: 380px) { .occ-header__actions .occ-theme-toggle { display: none; } } @media (max-width: 300px) { .occ-wordmark { display: none; } }