/* ========================================================================= Opal Help Centre V4 — overrides on top of the vendored Webflow stylesheet. Loaded AFTER /webflow/opal.css so these rules win on equal specificity. ========================================================================= */ /* ---- Responsive root font-size (ported from the V3 Webflow page ) ---- */ html { font-size: 1rem; } @media screen and (max-width: 1728px) { html { font-size: calc(0.7073170731707317rem + 0.27100271002710025vw); } } @media screen and (max-width: 990px) { html { font-size: 0.875rem; } } @media screen and (max-width: 767px) { html { font-size: calc(0.7085503472222222rem + 0.3472222222222222vw); } } @media screen and (max-width: 479px) { html { font-size: calc(0.7498692468619247rem + 0.20920502092050208vw); } } /* ---- Utility top bar: "Back to opalapp.com" + V3/V4 docs switch ---- */ .v4-topbar { position: fixed; inset: 0 0 auto 0; z-index: 1000; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 14px; background: rgba(4, 4, 4, 0.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .v4-topbar__back { color: rgba(255, 255, 255, 0.82); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; } .v4-topbar__back:hover { color: #fff; } .v4-docs-switch { display: inline-flex; align-items: center; gap: 2px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 3px; } .v4-docs-switch__opt { color: rgba(255, 255, 255, 0.7); text-decoration: none; padding: 3px 13px; border-radius: 999px; font-weight: 600; font-size: 13px; line-height: 18px; } .v4-docs-switch__opt:hover { color: #fff; } .v4-docs-switch__opt.is-active { background: #fff; color: #0b0b15; cursor: default; } /* push the floating pill nav just below the top bar */ .c-nav-container { top: 56px !important; } @media (max-width: 767px) { .c-nav-container { top: 48px !important; } } /* Nav: logo flush-left, menu flush-right (match the V3 space-between layout). Without Webflow's JS the menu container otherwise centres as a cluster. */ .c-nav__menu-container { margin-left: auto; } /* ---- Nav: enable our own mobile dropdown (no Webflow JS) ---- */ .c-nav { position: relative; } .c-nav__menu-button { display: none; } @media (max-width: 990px) { .c-nav__menu-button { display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 8px; } .c-nav .c-nav__menu { display: none; } .c-nav .c-nav__menu-container { position: static; } .c-nav.v4-nav-open .c-nav__menu { display: block; position: absolute; top: calc(100% + 12px); left: 0; right: 0; background: rgba(16, 16, 22, 0.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: 18px; } .c-nav.v4-nav-open .c-nav__menu-content-cta-container { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .c-nav.v4-nav-open .c-nav__menu-inner-content { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } } /* ---- Help content: sit the hero just below the floating top bar + nav, matching the V3 page (which uses ~10px here and lets the fixed nav float over the hero's empty top). The fixed top bar + pill nav clear the viewport top, so only a small offset is needed. ---- */ .div-block-286 { padding-top: 16px; padding-bottom: 96px; } @media (max-width: 990px) { .div-block-286 { padding-top: 24px; } } @media (max-width: 479px) { .div-block-286 { padding-top: 40px; } } /* ---- Cards: replace the JS line-clamp (wfu-truncate) with CSS ---- */ .help__label { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .paragraph__small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--color--text--paragraph); } .press__grid__item__link { height: 100%; } .help__item__grid { height: 100%; } .help__item__grid:hover { background-color: #ffffff14; transition: background-color 0.2s ease; } .v4-no-results { margin-top: 6rem; opacity: 0.8; } /* ---- Article page ---- */ /* Article pages share .div-block-286 with the home hero, but they have content (back link + title) at the top, so they need clearance below the floating nav. */ .v4-article-wrap { padding-top: 150px; padding-bottom: 120px; } @media (max-width: 990px) { .v4-article-wrap { padding-top: 120px; } } @media (max-width: 479px) { .v4-article-wrap { padding-top: 110px; } } .v4-article { width: 100%; max-width: 820px; margin: 0 auto; } .v4-article__back { display: inline-block; color: rgba(255, 255, 255, 0.72); text-decoration: none; font-weight: 600; margin-bottom: 28px; } .v4-article__back:hover { color: #fff; } .v4-article__cat { text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.5); margin-bottom: 14px; } .v4-article__title { font-size: 2.5rem; font-weight: 600; line-height: 1.2; margin: 0 0 36px; } .v4-article__emoji { -webkit-text-fill-color: initial; background: none; } .v4-article__body { color: rgba(255, 255, 255, 0.86); font-size: 1.0625rem; line-height: 1.7; } .v4-article__body > :first-child { margin-top: 0; } .v4-article__body h2 { font-size: 1.6rem; font-weight: 600; margin: 40px 0 14px; color: #fff; } .v4-article__body h3 { font-size: 1.3rem; font-weight: 600; margin: 30px 0 12px; color: #fff; } .v4-article__body p { margin: 0 0 18px; } .v4-article__body ul, .v4-article__body ol { margin: 0 0 18px; padding-left: 26px; } .v4-article__body li { margin: 8px 0; } .v4-article__body a { color: #9db8ff; text-decoration: underline; } .v4-article__body a:hover { color: #c3d2ff; } .v4-article__body img { max-width: 100%; height: auto; border-radius: 16px; margin: 22px 0; border: 1px solid rgba(255, 255, 255, 0.08); } .v4-article__body hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 32px 0; } .v4-article__body blockquote { border-left: 3px solid rgba(255, 255, 255, 0.22); margin: 18px 0; padding: 8px 18px; color: rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.04); border-radius: 8px; } .v4-article__body code { background: rgba(255, 255, 255, 0.1); padding: 2px 6px; border-radius: 6px; font-size: 0.9em; } .v4-article__body pre { background: rgba(255, 255, 255, 0.06); padding: 16px; border-radius: 12px; overflow: auto; } .v4-article__body pre code { background: none; padding: 0; } .v4-article__body table { width: 100%; border-collapse: collapse; margin: 18px 0; } .v4-article__body th, .v4-article__body td { border: 1px solid rgba(255, 255, 255, 0.12); padding: 8px 12px; text-align: left; } /* ---- Footer spacing ---- */ .c-footer { margin-top: 64px; }