/* ========================================================================== Xolius 1.0 — marketplace theme Tokens → base → layout → components → sections → templates → utilities ========================================================================== */ /* Self-hosted variable fonts (SIL Open Font License — see assets/fonts/OFL-*.txt). Latin + Latin Extended. */ @font-face { font-family: "Figtree"; src: url("../fonts/figtree-var.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("../fonts/figtree-italic-var.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; } @font-face { font-family: "Sora"; src: url("../fonts/sora-var.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } :root { /* Palette */ --night: #070812; --deep: #0d0f1e; --panel: #13162a; --panel-2: #1a1e36; --line: rgba(196, 204, 255, .1); --line-strong: rgba(196, 204, 255, .2); --star: #eef0ff; --muted: #9aa1bf; --faint: #6b7294; --violet: #8b7bff; --cyan: #2fd6e6; --mint: #45e3a6; --amber: #ffb547; --red: #fe5b60; --green: #37c45b; --yellow: #ffc30c; --grad: linear-gradient(120deg, var(--violet), var(--cyan)); /* Type */ --f-display: "Sora", "Figtree", system-ui, sans-serif; --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-hero: clamp(2.6rem, 1.4rem + 4.6vw, 4.9rem); --fs-h1: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem); --fs-h2: clamp(1.8rem, 1.3rem + 1.9vw, 2.75rem); --fs-h3: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); --fs-lede: clamp(1.05rem, 1rem + .3vw, 1.2rem); /* Space + shape */ --shell: 1240px; --gutter: clamp(16px, 4vw, 32px); --section: clamp(72px, 9vw, 128px); --r-xl: 32px; --r-lg: 22px; --r-md: 14px; --r-sm: 10px; --ease: cubic-bezier(.2, .7, .2, 1); --shadow-float: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 0 1px var(--line); } /* --- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; background: var(--night); color: var(--star); font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } img, video, svg { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; margin: 0; text-wrap: balance; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } ::selection { background: rgba(139, 123, 255, .45); color: #fff; } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: #fff; color: var(--night); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700; } .skip-link:focus { top: 12px; } .shell { width: 100%; max-width: calc(var(--shell) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); padding-bottom:70px; padding-top:70px; } /* --- Type helpers ------------------------------------------------------- */ .h2 { font-size: var(--fs-h2); } .h3 { font-size: var(--fs-h3); } .lede { font-size: var(--fs-lede); color: var(--muted); max-width: 62ch; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 600; color: var(--cyan); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--grad); } .eyebrow--light { color: #c9cdf5; } /* --- Buttons, chips, tags ---------------------------------------------- */ .btn { --b-bg: var(--panel-2); --b-fg: var(--star); --b-bd: var(--line-strong); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-bd); font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--sm { min-height: 40px; padding: 0 16px; font-size: .95rem; } .btn--block { width: 100%; } .btn--light { --b-bg: #fff; --b-fg: #0b0c18; --b-bd: #fff; } .btn--light:hover { --b-bg: #e9ebff; } .btn--primary { --b-bg: var(--violet); --b-fg: #fff; --b-bd: transparent; background-image: var(--grad); background-origin: border-box; /* no repeated gradient sliver in the transparent border */ box-shadow: 0 10px 30px -10px rgba(139, 123, 255, .8); } .btn--primary:hover { box-shadow: 0 14px 36px -10px rgba(47, 214, 230, .7); } .btn--glass { --b-bg: rgba(255, 255, 255, .06); --b-bd: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); } .btn--glass:hover { --b-bg: rgba(255, 255, 255, .12); } .btn--ghost { --b-bg: transparent; --b-bd: transparent; color: var(--muted); } .btn--ghost:hover { color: var(--star); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .btn-row--center { justify-content: center; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--star); font-weight: 700; text-decoration: none; } .link-arrow .icon { transition: transform .2s var(--ease); color: var(--cyan); } .link-arrow:hover .icon { transform: translateX(3px); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .03); color: var(--star); font-size: .95rem; font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s, color .2s; } .chip:hover { border-color: rgba(255, 255, 255, .35); } .chip.is-on { background: #fff; color: #0b0c18; border-color: #fff; } .chip--ghost { background: transparent; color: var(--muted); } .chip--ghost.is-on { background: rgba(139, 123, 255, .18); color: #fff; border-color: rgba(139, 123, 255, .6); } .chip--sm { min-height: 30px; padding: 0 12px; font-size: .85rem; } .tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; background: rgba(255, 255, 255, .1); color: var(--star); } .tag--new { background: rgba(69, 227, 166, .16); color: var(--mint); } .tag--soon { background: rgba(255, 181, 71, .14); color: var(--amber); } .tag--popular { background: rgba(139, 123, 255, .2); color: #c4bbff; } .checks { list-style: none; display: grid; gap: 10px; } .checks li { display: flex; gap: 10px; align-items: flex-start; color: #d6d9f0; } .checks .icon { flex: none; margin-top: 4px; color: var(--cyan); } .price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .price__amount { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; } .price__note { color: var(--faint); font-size: .9rem; } /* --- Top bar + masthead ------------------------------------------------- */ .topbar { background: #000; border-bottom: 1px solid var(--line); } .topbar__link { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 9px var(--gutter); font-size: .9rem; font-weight: 600; text-decoration: none; color: #dfe2ff; text-align: center; } .topbar__link .icon { color: var(--cyan); flex: none; } .topbar__link:hover span { text-decoration: underline; } .masthead { position: sticky; top: 0; z-index: 90; background: rgba(7, 8, 18, .72); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid transparent; transition: border-color .25s, background .25s; } .is-scrolled .masthead { border-bottom-color: var(--line); background: rgba(7, 8, 18, .9); } .admin-bar .masthead { top: 32px; } @media (max-width: 782px) { .admin-bar .masthead { top: 0; } } .masthead__in { display: flex; align-items: center; gap: 28px; min-height: 72px; padding-block: 0; } /* .shell adds 70px top/bottom for sections, not the header row. */ .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--star); flex: none; } .brand__mark { width: 30px; height: 30px; flex: none; } .brand:hover .brand__mark { transform: rotate(90deg); } .brand__mark { transition: transform .5s var(--ease); } .brand__name { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; } .brand__labs { font-size: .8rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 6px; } .brand__logo { max-height: 40px; width: auto; } .nav { flex: 1; display: flex; align-items: center; } .nav__list { list-style: none; display: flex; align-items: center; gap: 4px; } .nav__item { position: static; } .nav__link { display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 14px; border-radius: 999px; background: none; border: 0; cursor: pointer; text-decoration: none; font-weight: 600; font-size: 1rem; color: #e3e5f7; transition: background .2s, color .2s; } .nav__link:hover, .nav__link[aria-expanded="true"] { background: rgba(255, 255, 255, .07); color: #fff; } .nav__chev { transition: transform .2s; opacity: .7; } .nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); } .nav__cta { display: none; } .masthead__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; } .icon-btn { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: none; border: 0; color: #e3e5f7; cursor: pointer; text-decoration: none; transition: background .2s; } .icon-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; } .icon-btn__count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--cyan); color: #04121a; font-size: .7rem; font-weight: 800; display: grid; place-items: center; } .masthead__cta { margin-left: 8px; } .nav-toggle { display: none; } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } .nav__close { display: none; } .nav-backdrop { display: none; } /* Mega menu (desktop): full width, a rail of sections left, text links right */ .mega { position: absolute; left: 0; right: 0; top: 100%; pointer-events: none; opacity: 0; transform: translateY(-4px); visibility: hidden; transition: opacity .18s, transform .22s var(--ease), visibility 0s .22s; } .has-mega.is-open .mega { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; } .mega__in { position: relative; display: grid; grid-template-columns: 260px minmax(0, 1fr); overflow: hidden; background: #0d0f1f; border-block: 1px solid var(--line-strong); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85); max-height: calc(100vh - 140px); } .mega__in::after { content: ""; position: absolute; right: -10%; bottom: -40%; width: 55%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 214, 230, .16), transparent); filter: blur(30px); pointer-events: none; } .mega__rail { display: grid; align-content: start; gap: 2px; padding: 22px 16px 22px max(8px, calc(clamp(16px, 3.4vw, 56px) - 14px)); border-right: 1px solid var(--line); background: rgba(255, 255, 255, .015); } .mega__tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; border-radius: var(--r-sm); background: none; color: #dfe2f7; font-weight: 700; font-size: .98rem; text-align: left; cursor: pointer; transition: background .15s, color .15s; } .mega__tab .icon { flex: none; color: var(--muted); } .mega__tab-chev { margin-left: auto; opacity: 0; transform: rotate(-90deg); transition: opacity .15s; } .mega__tab:hover { background: rgba(255, 255, 255, .05); color: #fff; } .mega__tab.is-on { background: rgba(139, 123, 255, .14); color: #fff; } .mega__tab.is-on .icon { color: var(--cyan); } .mega__tab.is-on .mega__tab-chev { opacity: .8; } .mega__panes { position: relative; z-index: 1; display: grid; min-width: 0; overflow-y: auto; } /* All panes share one cell, so the panel is always as tall as the tallest one — no jumping between tabs. */ .mega__pane { grid-area: 1 / 1; } .mega__pane[hidden] { display: block; visibility: hidden; pointer-events: none; } .mega__section { padding: 22px 36px 24px; border-bottom: 1px solid var(--line); } .mega__section:last-child { border-bottom: 0; } .mega__label { margin: 0 0 14px; color: var(--faint); font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .mega__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; margin: 0; padding: 0; max-width: 1180px; } .mega-link { display: grid; gap: 4px; padding: 10px 12px; margin-inline: -12px; border-radius: var(--r-sm); text-decoration: none; transition: background .15s; } .mega-link:hover { background: rgba(255, 255, 255, .05); } .mega-link__title { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 1rem; } .mega-link:hover .mega-link__title { color: #fff; text-decoration: underline; text-decoration-color: rgba(47, 214, 230, .6); text-underline-offset: 4px; } .mega-link__text { color: var(--muted); font-size: .86rem; line-height: 1.45; } .mega-badge { padding: 1px 8px; border-radius: 99px; font-size: .66rem; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .mega-badge--new { background: #4b5cff; color: #fff; } .mega-badge--soon { background: rgba(255, 181, 71, .16); color: var(--amber); } .mega-badge--free { background: rgba(69, 227, 166, .15); color: var(--mint); } /* Search dialog */ .search-dialog { width: min(680px, calc(100% - 32px)); margin: 12vh auto auto; padding: 0; background: #0f1124; color: var(--star); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: 0 40px 100px rgba(0, 0, 0, .7); } .search-dialog::backdrop { background: rgba(3, 4, 10, .7); backdrop-filter: blur(6px); } .search-dialog__form { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--line); } .search-dialog__form > .icon { color: var(--muted); flex: none; } .search-dialog__form input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 1.2rem; padding: 8px 0; } .search-dialog__quick { padding: 18px 20px 22px; } /* --- Hero --------------------------------------------------------------- */ .hero { padding: clamp(12px, 2vw, 24px) 0 0; } .hero__card { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); min-height: clamp(560px, 74vh, 760px); background: radial-gradient(140% 120% at 80% 40%, #0f1340 0%, #080a1c 45%, #05060d 100%); border: 1px solid var(--line); display: flex; align-items: center; } .hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__sky--video .hero__glow, .hero__sky--video .orbit { display: none; } .hero__sky--video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 6, 13, .85) 0%, rgba(5, 6, 13, .35) 55%, transparent 100%); } .hero__glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .85; } .hero__glow--a { width: 52%; height: 70%; right: -4%; top: 10%; background: radial-gradient(closest-side, rgba(70, 90, 255, .9), transparent); animation: breathe 9s ease-in-out infinite; } .hero__glow--b { width: 38%; height: 55%; right: 4%; top: 30%; background: radial-gradient(closest-side, rgba(47, 214, 230, .75), transparent); animation: breathe 11s ease-in-out infinite reverse; } .hero__glow--c { width: 30%; height: 40%; right: 30%; bottom: -10%; background: radial-gradient(closest-side, rgba(139, 123, 255, .6), transparent); } .hero__stars { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 72%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 44% 34%, #cfd4ff 50%, transparent 51%), radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 86%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 90% 24%, #bff6ff 50%, transparent 51%), radial-gradient(1px 1px at 6% 90%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 52% 92%, #fff 50%, transparent 51%); } /* The X: two light beams crossing behind the hero, a pulse where they meet, a spark riding one beam */ .hero__x { position: absolute; left: 72%; top: 50%; width: 0; height: 0; } .hero__x i { position: absolute; left: -45vmax; top: -1px; width: 90vmax; height: 2px; border-radius: 2px; transform: rotate(38deg); background: linear-gradient(90deg, transparent, rgba(139, 123, 255, .5) 30%, rgba(47, 214, 230, .95) 50%, rgba(139, 123, 255, .5) 70%, transparent); box-shadow: 0 0 24px 1px rgba(47, 214, 230, .35); } .hero__x i + i { transform: rotate(-38deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28) 30%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, .28) 70%, transparent); box-shadow: 0 0 24px 1px rgba(255, 255, 255, .18); } .hero__x i::after { content: ""; position: absolute; top: -4px; left: 20%; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px 5px rgba(47, 214, 230, .7); animation: x-ride 9s var(--ease) infinite; } .hero__x i + i::after { display: none; } .hero__x b { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), 0 0 40px 12px rgba(139, 123, 255, .6); animation: x-pulse 4s ease-in-out infinite; } @keyframes x-ride { 0% { left: 18%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 82%; opacity: 0; } } @keyframes x-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } } .hero__sky--video .hero__x { display: none; } /* Sub-page heroes: a big, thick, soft X on the right — the brand mark as light. */ .page-hero__sky::before, .page-hero__sky::after { content: ""; position: absolute; right: clamp(-120px, -4vw, -40px); top: 50%; width: clamp(340px, 52vw, 820px); height: clamp(46px, 6.5vw, 104px); margin-top: calc(clamp(46px, 6.5vw, 104px) / -2); border-radius: 999px; transform: rotate(-42deg); background: linear-gradient(90deg, rgba(139, 123, 255, .9), rgba(47, 214, 230, .9)); filter: blur(clamp(18px, 2.6vw, 38px)); opacity: .5; pointer-events: none; } .page-hero__sky::after { transform: rotate(42deg); background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(196, 204, 255, .8)); opacity: .32; } @media (max-width: 760px) { .page-hero__sky::before, .page-hero__sky::after { right: -38%; opacity: .32; } .page-hero__sky::after { opacity: .2; } } @media (prefers-reduced-motion: reduce) { .hero__x i::after, .hero__x b { animation: none; } } /* Orbits: ellipses with satellites riding the rim */ .orbit { position: absolute; left: 72%; top: 50%; border-radius: 50%; border: 1.5px solid rgba(160, 170, 255, .28); transform: translate(-50%, -50%) rotate(-28deg); } .orbit--1 { width: 34vmax; height: 13vmax; border-color: rgba(47, 214, 230, .35); } .orbit--2 { width: 50vmax; height: 20vmax; } .orbit--3 { width: 68vmax; height: 28vmax; border-color: rgba(139, 123, 255, .2); } .orbit i { position: absolute; inset: -1px; border-radius: 50%; animation: spin 26s linear infinite; } .orbit--3 i { animation-duration: 40s; animation-direction: reverse; } .orbit i::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px 4px rgba(47, 214, 230, .7); } .orbit--3 i::before { background: var(--violet); box-shadow: 0 0 18px 4px rgba(139, 123, 255, .7); } .hero__grid { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: clamp(40px, 6vw, 88px); } .hero__title { font-size: var(--fs-hero); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; max-width: 12ch; } .hero__text { margin-top: 22px; font-size: var(--fs-lede); color: #c3c8e6; max-width: 46ch; } .hero-search { display: flex; align-items: center; gap: 10px; margin-top: 32px; max-width: 520px; padding: 6px 6px 6px 18px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(14px); transition: border-color .2s, background .2s; } .hero-search:focus-within { border-color: rgba(47, 214, 230, .7); background: rgba(255, 255, 255, .11); } .hero-search > .icon { color: #c3c8e6; flex: none; } .hero-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 1.05rem; padding: 10px 0; color: #fff; } .hero-search input::placeholder { color: #9aa1bf; } .hero-search .btn { min-height: 44px; } .hero-search--compact { margin-top: 28px; } .hero__popular { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; font-size: .95rem; color: var(--muted); } .hero__popular a { color: #dfe2ff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); } .hero__popular a:hover { border-color: var(--cyan); } .hero__from { margin-top: 26px; font-weight: 700; color: #fff; } .hero__visual { position: relative; height: 480px; } .float { position: absolute; margin: 0; } .float--shot { width: 74%; border-radius: 14px; overflow: hidden; background: #0e1020; box-shadow: var(--shadow-float); } .float--shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; } .float--shot figcaption { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(7, 8, 18, .8); backdrop-filter: blur(10px); font-size: .85rem; font-weight: 700; border: 1px solid var(--line-strong); } .float--a { right: 0; top: 0; transform: rotate(1.5deg); } .float--b { left: 0; bottom: 20px; width: 66%; transform: rotate(-2deg); } .float--glass { display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 18px; background: rgba(17, 20, 44, .62); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(16px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); } .float--glass small { display: block; font-size: .8rem; color: var(--muted); } .float--glass strong { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; } .float--c { right: -12px; bottom: 120px; animation: bob 7s ease-in-out infinite; } .float--d { left: 12%; top: -18px; animation: bob 8s ease-in-out infinite 1s; } .float__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(69, 227, 166, .16); color: var(--mint); } .ring { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; background: conic-gradient(var(--cyan) calc(var(--p) * 360deg), rgba(255, 255, 255, .12) 0); -webkit-mask: radial-gradient(circle, #000 0 15px, transparent 15.5px 18px, #000 18.5px); mask: radial-gradient(circle, #000 0 15px, transparent 15.5px 18px, #000 18.5px); } .browser { display: flex; gap: 6px; padding: 10px 12px; background: #161a33; border-bottom: 1px solid var(--line); } .browser i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .2); } .browser i.red { background: var(--red); } .browser i.green { background: var(--green); } .browser i.yellow { background: var(--yellow); } .stats { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--deep); } .stats li { display: flex; align-items: baseline; gap: 10px; padding: 22px 28px; } .stats li + li { border-left: 1px solid var(--line); } .stats strong { font-family: var(--f-display); font-size: 2rem; font-weight: 600; } .stats span { color: var(--muted); } @keyframes spin { to { transform: rotate(360deg); } } @keyframes breathe { 50% { opacity: .55; transform: scale(1.06); } } @keyframes bob { 50% { transform: translateY(-10px); } } /* --- Sections ---------------------------------------------------------- */ /* --- .section needs edits here: TO DO ---------------------------------------------------------- */ .section { padding-block: var(--section); } .section--tight { padding-block: clamp(10px, 1vw, 10px); } .section--sunken { background: linear-gradient(180deg, var(--deep), var(--night)); border-block: 1px solid var(--line); padding:0px 0px 0px 0px!important; } .section-head { margin-bottom: clamp(32px, 4vw, 56px); } .section-head .lede { margin-top: 16px; } .section-head--center { text-align: center; } .section-head--center .lede { margin-inline: auto; } .section-head--split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; } .section-foot { margin-top: 40px; text-align: center; } /* Bundles Section - Scale & Border Radius */ .section.bundles { transform: scale(0.92); border-radius: 32px; overflow: hidden; will-change: transform, border-radius; transform-origin: center top; transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1), border-radius 0.1s cubic-bezier(0, 0, 0.2, 1); } /* Bundles Section Header - Scroll Fade In */ #bundles .section-head { opacity: 0.15; /* Initial low opacity before scrolling into view */ will-change: opacity, transform; transition: opacity 0.1s ease-out, transform 0.1s ease-out; } .grid { display: grid; gap: 20px; } .grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 24px; } .grid--plans { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; } @media (max-width: 1240px) { .grid--plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .grid--features { grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .grid--posts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px; } /* Benefits */ /* Benefits Section Layout */ .benefits__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .benefits__media { position: relative; height: 100%; } /* Safari Browser Window Frame */ .benefits__frame { position: sticky; top: 280px; border-radius: 12px; overflow: hidden; background: #1e1e2e; /* Dark browser background */ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); /* Maintains browser proportions including the top bar */ aspect-ratio: 16 / 9; width: 100%; /* Creates space at the top for the Safari bar */ padding-top: 38px; box-sizing: border-box; } /* 1. Safari Window Bar Top Background */ .benefits__frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 38px; background: rgba(255, 255, 255, 0.05); /* Translucent Safari header bar */ border-bottom: 1px solid rgba(255, 255, 255, 0.08); z-index: 10; } /* 2. Safari Red, Yellow, Green Traffic Light Dots */ .benefits__frame::after { content: ""; position: absolute; top: 14px; left: 16px; width: 10px; height: 10px; border-radius: 50%; /* Red dot */ background: #ff5f56; /* Yellow and Green dots generated using box-shadow offset */ box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #27c93f; z-index: 11; } /* Image fills space below the Safari bar */ .benefits__img { position: absolute; top: 38px; /* Starts right below the Safari top bar */ left: 0; width: 100%; height: calc(100% - 38px); object-fit: cover; object-position: center top; opacity: 0; transform: scale(1.02); transition: opacity .6s, transform .9s var(--ease); } .benefits__img.is-on { opacity: 1; transform: scale(1); } /* Scroll List Fixes */ .benefits__list { display: flex; flex-direction: column; padding-bottom: 20vh; /* Extra scroll depth for smooth exit */ } .benefit { min-height: 65vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; opacity: .35; transition: opacity .4s ease; } .benefit.is-on { opacity: 1; } .benefit__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--grad); color: #fff; } .benefit__img { display: none; } /* Mobile Fallback */ @media (max-width: 991px) { .benefits__grid { grid-template-columns: 1fr; } .benefits__media { display: none; } .benefit { min-height: auto; padding: 40px 0; opacity: 1; } .benefit__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); } } /* Tabs */ .tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--deep); border: 1px solid var(--line); } .tabs__btn { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: none; color: var(--muted); font-weight: 700; cursor: pointer; transition: background .2s, color .2s; } .tabs__btn:hover { color: #fff; } .tabs__btn.is-on { background: #fff; color: #0b0c18; } /* Logo Slider */ .logo-slider-container { position: relative; width: 100%; overflow: hidden; background: transparent; padding: 20px 0; /* Left and right gradient fade */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, transparent 100%); } .logo-track { display: flex; width: max-content; list-style: none; gap: 60px; /* Adjust spacing between logos */ align-items: center; padding: 0; margin: 0; will-change: transform; } .logo-item { display: flex; align-items: center; justify-content: center; cursor: pointer; white-space: nowrap; opacity: 1; transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } .logo-item img { height: 48px; /* Set your desired consistent height here */ width: auto; /* Maintains correct aspect ratio so logos don't stretch */ object-fit: contain; } /* Hover state: full color and opacity */ .logo-item:hover { opacity: 0.90; transform: translateY(-2px); } /* Product card */ .pcard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--deep); border: 1px solid var(--line); transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; } .pcard:hover { border-color: rgba(139, 123, 255, .45); transform: translateY(-3px); box-shadow: 0 30px 60px -30px rgba(70, 90, 255, .5); } .pcard[hidden] { display: none; } .pcard__media { position: relative; display: block; } .cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel); } .cover img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .6s var(--ease); } .pcard:hover .cover img { transform: scale(1.03); } .cover--ph { position: relative; display: grid; place-items: center; background: radial-gradient(80% 90% at 85% 10%, hsla(var(--h), 90%, 65%, .45), transparent 60%), radial-gradient(70% 80% at 10% 100%, hsla(calc(var(--h) + 60), 90%, 60%, .35), transparent 60%), #101329; } .cover__orb { position: absolute; width: 60%; aspect-ratio: 5 / 2; border: 1.5px solid rgba(255, 255, 255, .25); border-radius: 50%; transform: rotate(-28deg); } .cover__initial { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.4rem); color: #fff; position: relative; } .cover__icon { position: absolute; right: 14px; bottom: 14px; color: rgba(255, 255, 255, .7); } .pcard__badge { position: absolute; left: 14px; top: 14px; backdrop-filter: blur(8px); background-color: rgba(7, 8, 18, .7); } .pcard__body { padding: 20px 22px 8px; flex: 1; } .pcard__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .pcard__meta span { font-size: .8rem; font-weight: 600; color: var(--muted); padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .05); } .pcard__title { font-size: 1.3rem; } .pcard__title a { text-decoration: none; } .pcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .pcard__lead { margin-top: 8px; color: var(--muted); font-size: .98rem; } .pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 20px; } .pcard__demo { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 700; color: #c9cdf5; text-decoration: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); } .pcard__demo:hover { color: #fff; border-color: var(--cyan); } .pcard.is-soon .cover { filter: saturate(.6); } /* Plans */ .plan { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 30px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); } .plan--popular { background: radial-gradient(120% 60% at 50% 0%, rgba(139, 123, 255, .25), transparent 70%), var(--panel); border-color: rgba(139, 123, 255, .6); box-shadow: 0 40px 80px -40px rgba(139, 123, 255, .6); } .plan__flag { position: absolute; top: -13px; left: 30px; padding: 4px 12px; border-radius: 999px; background: var(--grad); color: #fff; font-size: .8rem; font-weight: 800; } .plan__head { display: grid; gap: 6px; } .plan__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .07); margin-bottom: 8px; color: var(--cyan); } .plan h3 { font-size: 1.45rem; } .plan__for { color: var(--muted); } .plan__price { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .plan__price s { color: var(--faint); font-size: 1.05rem; } /* The old price sits above "per year", next to the amount, so every price row is equally tall. */ .plan__per { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 4px; line-height: 1.25; } .plan__price strong { font-family: var(--f-display); font-size: 3rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; } .plan__price span { color: var(--muted); } .plan .checks { padding-top: 22px; border-top: 1px solid var(--line); } .plan__more { justify-self: center; align-self: start; margin-top: -10px; font-size: .92rem; } .plan > .plan__more { align-self: center; } /* Same rows in every card (head, price, button, link, list), so the buttons line up. */ @supports (grid-template-rows: subgrid) { .grid--plans .plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 22px; align-content: start; } .grid--plans .plan__head { align-content: start; } .grid--plans .plan__price { align-self: end; } .grid--plans .plan__more { margin-top: -10px; } } /* Spotlight */ .spotlights { perspective: 1200px; } .spotlights .section-head { margin-bottom: 24px; } .spotlight { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 88px); align-items: center; padding-block: clamp(40px, 5vw, 72px); perspective: 1200px; } .spotlight + .spotlight { border-top: 1px solid var(--line); } .spotlight--flip .spotlight__copy { order: 2; } .spotlight__copy { display: grid; gap: 18px; align-content: start; will-change: transform; transition: transform 0.08s cubic-bezier(0, 0, 0.2, 1); } .spotlight__copy .eyebrow { margin-bottom: -4px; } .spotlight__copy .h3 { font-size: var(--fs-h2); } .spotlight__copy .btn-row { margin-top: 8px; } .spotlight__addons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: .95rem; } .spotlight__media { transform-style: preserve-3d; } .shot { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--deep); box-shadow: var(--shadow-float); will-change: transform, box-shadow; transform-origin: center center; transition: transform 0.08s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.08s cubic-bezier(0, 0, 0.2, 1); } /* Updated to 16:9 to match 1920x1080 native resolution */ .shot .cover { aspect-ratio: 16 / 9; border-radius: 0; overflow: hidden; } .shot .cover img { width: 100%; height: 100%; object-fit: contain; /* Prevents 1920x1080 assets from getting cropped */ display: block; will-change: transform; transform-origin: center center; transition: transform 0.08s cubic-bezier(0, 0, 0.2, 1); } /* Features */ .feature { padding: 30px 26px; background: var(--night); display: grid; gap: 10px; align-content: start; } .feature__icon { color: var(--cyan); margin-bottom: 8px; } .feature h3 { font-size: 1.1rem; font-family: var(--f-body); font-weight: 700; letter-spacing: 0; } .feature p { color: var(--muted); font-size: .98rem; } /* FAQ */ .faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .faq__head { position: sticky; top: 120px; } .faq__head .lede { margin-top: 14px; } .faq__list { border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 4px; cursor: pointer; font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; } .faq__item summary::-webkit-details-marker { display: none; } .faq__plus { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); } .faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .25s var(--ease); } .faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); } .faq__item[open] .faq__plus::after { transform: translate(-50%, -50%) rotate(0); } .faq__a { padding: 0 48px 24px 4px; color: var(--muted); max-width: 64ch; } /* CTA */ .section--cta { padding-top: 0; padding-bottom: 0px; } .section--cta > .shell { padding-bottom: 0; } .cta { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); padding: clamp(48px, 7vw, 96px); min-height: 380px; display: flex; align-items: center; background: radial-gradient(90% 120% at 100% 50%, rgba(70, 90, 255, .55), transparent 60%), radial-gradient(60% 80% at 80% 80%, rgba(47, 214, 230, .45), transparent 60%), #080a1c; border: 1px solid var(--line); } .cta__art { position: absolute; inset: 0; z-index: -1; } .cta__art .orbit { left: 82%; } .cta__planet { position: absolute; left: 82%; top: 50%; width: 70px; height: 70px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, #fff, #b9c2ff 45%, #5a4fd6); box-shadow: 0 0 60px 10px rgba(139, 123, 255, .5); } .cta__copy { max-width: 560px; } .cta--video { background: #05060d; } .cta__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: scale-down; object-position: right center; } .cta--video .cta__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 6, 13, .92) 0%, rgba(5, 6, 13, .6) 45%, transparent 75%); } @media (max-width: 760px) { .cta--video .cta__art::after { background: rgba(5, 6, 13, .7); } } .cta__copy .lede { margin-top: 16px; color: #c3c8e6; } /* --- Page hero (inner pages) ------------------------------------------- */ .page-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--line); } .page-hero__sky { position: absolute; inset: 0; z-index: -1; } .page-hero__sky .hero__glow--a { width: 50%; height: 140%; right: -10%; top: -40%; opacity: .55; } .page-hero__sky .hero__glow--b { width: 30%; height: 120%; right: 10%; top: -30%; opacity: .45; } .page-hero__sky .orbit { left: 78%; } .page-hero__title { font-size: var(--fs-h1); max-width: 18ch; letter-spacing: -.03em; } .page-hero__text { margin-top: 18px; font-size: var(--fs-lede); color: #c3c8e6; max-width: 56ch; } .page-hero--center { text-align: center; } .page-hero--center .page-hero__title, .page-hero--center .page-hero__text { margin-inline: auto; } .page-hero--center .hero-search { margin-inline: auto; } .page-hero--tall { min-height: 70vh; display: flex; align-items: center; } .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .92rem; color: var(--faint); margin-bottom: 22px; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: #fff; } .crumbs [aria-current] { color: #dfe2ff; } /* Sub-page heroes with a top bar: breadcrumb left and tags right on one line just under the header, title centred below. */ .page-hero--bar { padding-top: clamp(16px, 2vw, 24px); } .page-hero__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; min-height: 32px; margin-bottom: clamp(28px, 4.5vw, 56px); } .page-hero__bar .crumbs { margin: 0; } .page-hero__bar .product-head__tags { justify-content: flex-end; margin: 0 0 0 auto; } .page-hero--bar .page-hero__title, .page-hero--bar .page-hero__text { margin-inline: auto; text-align: center; } .page-hero--bar .product-head, .page-hero--bar .product-head__copy { text-align: center; } .page-hero--bar .product-head__parent { justify-content: center; } .page-hero--bar .hero-search { margin-inline: auto; } @media (max-width: 640px) { .page-hero__bar .product-head__tags { margin-left: 0; justify-content: flex-start; } } /* Catalogue toolbar */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .toolbar__group { display: flex; flex-wrap: wrap; gap: 8px; } .toolbar__sort { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); } .toolbar__sort select { min-height: 40px; padding: 0 36px 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239aa1bf' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; font-weight: 600; cursor: pointer; } .results-count { margin: 20px 0 24px; color: var(--muted); } .empty { text-align: center; padding: 72px 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); display: grid; gap: 12px; justify-items: center; } .empty__icon { color: var(--cyan); } .empty p { color: var(--muted); } .pagination, .nav-links { display: flex; justify-content: center; gap: 8px; margin-top: 40px; } .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); text-decoration: none; font-weight: 700; } .page-numbers.current { background: #fff; color: #0b0c18; } /* --- Product page ------------------------------------------------------- */ .page-hero--product { padding-bottom: clamp(32px, 4vw, 48px); } .product-head__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; } .product-head__parent { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); } .product-head__parent a { color: #fff; font-weight: 700; } .product-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 4vw, 56px); padding-block: clamp(32px, 4vw, 56px) var(--section); align-items: start; } .product-layout__side { position: sticky; top: 100px; display: grid; gap: 16px; } .product-layout > * { min-width: 0; } .gallery { display: grid; gap: 12px; } .gallery__stage { position: relative; overflow: hidden; } .gallery__stage img { width: 100%; aspect-ratio: 16 / 9; /* Exact 1920x1080 ratio */ object-fit: cover; object-position: center top; /* Centers the UI horizontally and pins it to the top */ display: block; } .gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } .gallery__thumb { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--deep); cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s; } .gallery__thumb img { width: 100%; aspect-ratio: 16 / 9; /* Matched to 16:9 for consistent thumb ratios */ object-fit: cover; object-position: center top; display: block; } .gallery__thumb:hover { opacity: 1; } .gallery__thumb.is-on { opacity: 1; border-color: var(--cyan); } .subnav { position: sticky; top: 72px; z-index: 5; display: flex; gap: 4px; overflow-x: auto; margin-top: 32px; padding: 6px; background: rgba(13, 15, 30, .85); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 999px; scrollbar-width: none; } .admin-bar .subnav { top: 104px; } .subnav a { flex: none; padding: 8px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--muted); } .subnav a:hover, .subnav a.is-on { background: rgba(255, 255, 255, .08); color: #fff; } .product-section { padding-top: 35px; } .product-section > .h3 { margin-bottom: 18px; } .product-section > .lede { margin-bottom: 18px; color: #c9cdea; } .product-section .faq { grid-template-columns: 1fr; gap: 20px; } .product-section .faq__head { position: static; } .product-section .faq__head .eyebrow { display: none; } .product-section .faq__head .h2 { font-size: var(--fs-h3); } .feature-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .feature-list li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-md); background: var(--deep); border: 1px solid var(--line); } .feature-list__icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(47, 214, 230, .14); color: var(--cyan); } .addon-list { display: grid; gap: 10px; } .addon { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px 20px; border-radius: var(--r-md); background: var(--deep); border: 1px solid var(--line); text-decoration: none; transition: border-color .2s; } .addon:hover { border-color: rgba(139, 123, 255, .5); } .addon__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(139, 123, 255, .16); color: #c4bbff; } .addon__body { display: grid; } .addon__body span { color: var(--muted); font-size: .95rem; } .addon__price { font-weight: 700; } .changelog { list-style: none; border-left: 2px solid var(--line-strong); padding-left: 24px; display: grid; gap: 22px; } .changelog li { position: relative; } .changelog li::before { content: ""; position: absolute; left: -31px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--night); border: 2px solid var(--cyan); } .changelog__head { display: flex; gap: 12px; align-items: baseline; } .changelog time { color: var(--faint); font-size: .9rem; } .changelog p:last-child { color: var(--muted); } .buybox { padding: 26px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-strong); display: grid; gap: 16px; } .buybox__label { color: var(--muted); font-size: .9rem; } .buybox__price { margin-top: -10px; } .buybox__price .price__amount { font-size: 2.6rem; letter-spacing: -.03em; } .buybox__price.price--included .price__amount { font-size: 1.6rem; line-height: 1.2; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .buybox__lead { color: var(--muted); font-size: .98rem; } .buybox__actions { display: grid; gap: 10px; } .buybox__perks { list-style: none; display: grid; gap: 8px; font-size: .95rem; color: #d0d3ea; } .buybox__perks li { display: flex; gap: 10px; align-items: center; } .buybox__perks .icon { color: var(--mint); } .facts { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: .95rem; } .facts div { display: flex; justify-content: space-between; gap: 16px; } .facts dt { color: var(--muted); } .facts dd { margin: 0; font-weight: 600; text-align: right; } .bundle-nudge { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 20px; border-radius: var(--r-lg); text-decoration: none; background: radial-gradient(100% 140% at 100% 0%, rgba(139, 123, 255, .3), transparent 60%), var(--deep); border: 1px solid var(--line); } .bundle-nudge span:nth-child(2) { display: grid; color: var(--muted); font-size: .92rem; } .bundle-nudge strong { color: #fff; font-size: 1rem; } .bundle-nudge__icon { color: var(--cyan); } /* --- Pricing compare --------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); } .compare { width: 100%; border-collapse: collapse; min-width: 720px; } .compare th, .compare td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--line); } .compare thead th { font-family: var(--f-display); font-weight: 600; background: var(--deep); } .compare th[scope="row"] { text-align: left; font-weight: 600; } .compare th[scope="row"] a { text-decoration: none; } .compare th[scope="row"] small { display: block; color: var(--faint); font-weight: 500; font-size: .85rem; } .compare .is-popular { background: rgba(139, 123, 255, .08); } .compare .yes { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(47, 214, 230, .15); color: var(--cyan); } .compare .no { color: var(--faint); } .compare tfoot th, .compare tfoot td { border-bottom: 0; font-size: 1.1rem; } /* --- Prose ------------------------------------------------------------- */ .prose { max-width: 72ch; color: #d0d3ea; } .prose--wide { max-width: none; } .prose > * + * { margin-top: 1.1em; } .prose h2 { font-size: 1.8rem; margin-top: 1.8em; color: #fff; } .prose h3 { font-size: 1.35rem; margin-top: 1.5em; color: #fff; } .prose a { color: var(--cyan); } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: .4em; } .prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--violet); color: #fff; font-size: 1.15rem; } .prose img { border-radius: var(--r-md); } .prose code { background: var(--panel); padding: 2px 6px; border-radius: 6px; font-size: .92em; } .prose pre { background: var(--panel); padding: 18px; border-radius: var(--r-md); overflow-x: auto; } .prose .wp-block-button__link { background: #fff; color: #0b0c18; border-radius: 999px; padding: 12px 22px; font-weight: 700; text-decoration: none; } .post-meta { color: var(--faint); font-size: .92rem; } .post-cover { border-radius: var(--r-lg); width: 100%; } .post-card { display: grid; gap: 10px; align-content: start; } .post-card__media img { border-radius: var(--r-md); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; } .post-card .h3 a { text-decoration: none; } .post-card p { color: var(--muted); } /* --- Footer ------------------------------------------------------------ */ .site-footer { position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); padding-top: clamp(56px, 7vw, 96px); background: #04050b; } .site-footer__glow { position: absolute; z-index: -1; left: 50%; bottom: -260px; width: 900px; height: 400px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(70, 90, 255, .28), transparent); } .site-footer > .shell { padding-block: 0; } /* The footer sets its own spacing; no .shell section padding here. */ .site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-bottom: 56px; } .site-footer__brand { display: grid; gap: 16px; align-content: start; max-width: 360px; } .site-footer__brand p { color: var(--muted); } .site-footer__title { font-weight: 700; margin-bottom: 14px; } .site-footer__col ul { list-style: none; display: grid; gap: 10px; } .site-footer__col a { color: var(--muted); text-decoration: none; } .site-footer__col a:hover { color: #fff; } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 24px 0 32px; border-top: 1px solid var(--line); color: var(--faint); font-size: .92rem; } .site-footer__legal { list-style: none; display: flex; gap: 20px; } .site-footer__legal a { color: var(--faint); text-decoration: none; } .site-footer__legal a:hover { color: #fff; } /* --- Reveal (only when JS is on) --------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js [data-reveal].is-in { opacity: 1; transform: none; } /* --- Responsive -------------------------------------------------------- */ @media (max-width: 1180px) { .masthead__cta { display: none; } .grid--features { grid-template-columns: repeat(2, 1fr); } .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero__visual { height: 420px; max-width: 640px; } .orbit { left: 70%; top: 70%; } } @media (max-width: 1020px) { .nav-toggle { display: inline-grid; } .masthead, .is-scrolled .masthead { backdrop-filter: none; -webkit-backdrop-filter: none; background: #070812; } /* Tools sat above the drawer and ate clicks on the close X — keep them under the overlay. */ .nav-open .masthead__tools { pointer-events: none; } .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 120; background: rgba(4, 5, 12, .55); border: 0; padding: 0; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s var(--ease), visibility 0s .3s; } .nav-open .nav-backdrop:not([hidden]) { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 130; width: min(340px, 86vw); flex-direction: column; align-items: stretch; gap: 20px; padding: 20px 16px 24px; background: #0b0d1c; border-left: 1px solid var(--line); overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; pointer-events: none; } .nav__close { display: inline-grid; align-self: flex-end; position: relative; z-index: 2; flex: none; margin: 0 0 8px; pointer-events: auto; } .nav-open .nav { transform: none; visibility: visible; transition-delay: 0s; pointer-events: auto; } .nav-open .topbar { display: none; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__item { border-bottom: 1px solid var(--line); } .nav__link { width: 100%; justify-content: space-between; height: 56px; padding: 0 8px; border-radius: 0; font-size: 1.1rem; } .nav__link:hover, .nav__link[aria-expanded="true"] { background: none; } .nav__cta { display: inline-flex; } .mega { position: static; opacity: 1; transform: none; visibility: visible; pointer-events: auto; display: none; transition: none; } .has-mega.is-open .mega { display: block; } .mega__in { grid-template-columns: 1fr; max-height: none; min-height: 0; margin: 0 0 12px; background: none; border: 0; box-shadow: none; } .mega__in::after { display: none; } .mega__rail { display: flex; gap: 6px; padding: 4px 0 10px; overflow-x: auto; border: 0; background: none; } .mega__tab { width: auto; flex: none; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .9rem; } .mega__tab-chev { display: none; } .mega__section { padding: 12px 4px; } .mega__grid { grid-template-columns: 1fr; } .mega-link { margin-inline: 0; } .mega__panes { display: block; } .mega__pane[hidden] { display: none; } .benefits__grid { grid-template-columns: 1fr; } .benefits__media { display: none; } .benefit { min-height: 0; opacity: 1; padding-bottom: 56px; } .benefit__img { display: block; border-radius: var(--r-md); margin-top: 8px; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; box-shadow: var(--shadow-float); } .grid--plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; gap: 28px; } .spotlight { grid-template-columns: 1fr; } .spotlight--flip .spotlight__copy { order: 0; } .faq { grid-template-columns: 1fr; gap: 24px; } .faq__head { position: static; } .product-layout { grid-template-columns: minmax(0, 1fr); } /* minmax(0, …): the scrolling subnav and gallery may not widen the page */ .product-layout__side { position: static; order: -1; } .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 680px) { body { font-size: 1rem; } .hero__card { min-height: 0; border-radius: var(--r-lg); } .hero__grid { padding: 40px 22px 32px; gap: 24px; } .hero__visual { height: 300px; } .float--glass { padding: 10px 14px 10px 10px; } .float--c { right: 4px; bottom: 40px; } .float--c strong { font-size: .95rem; } .float--d { display: none; } .hero-search { padding-left: 14px; } .hero-search .btn { padding: 0 16px; } .stats { grid-template-columns: repeat(2, 1fr); } .stats li { padding: 18px 20px; } .stats li:nth-child(3) { border-left: 0; } .stats li:nth-child(n+3) { border-top: 1px solid var(--line); } .section-head--split { align-items: flex-start; } .tabs { width: 100%; overflow-x: auto; } .tabs__btn { flex: 1; padding: 0 12px; } .toolbar__sort { margin-left: 0; } .feature-list { grid-template-columns: 1fr; } .grid--features { grid-template-columns: 1fr; } .faq__a { padding-right: 4px; } .site-footer__grid { grid-template-columns: 1fr; } .orbit--3 { display: none; } .masthead__in { gap: 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } } .pcard__media, .cover { text-decoration: none; } .compare thead th:first-child { text-align: left; } /* Hero with background video: the glowing panel in the video is the visual, so the screenshots step aside and only the glass cards float over it. */ .hero__card--video { background: #05060d; } .hero__card--video .float--shot { display: none; } .hero__card--video .float--d { left: -2%; top: 18%; } .hero__card--video .float--c { right: 4%; bottom: 12%; } @media (max-width: 1180px) { .hero__sky--video::after { background: linear-gradient(180deg, rgba(5, 6, 13, .88) 0%, rgba(5, 6, 13, .55) 55%, rgba(5, 6, 13, .1) 100%); } .hero__card--video .hero__visual { height: 240px; } .hero__card--video .float--d { display: flex; left: 0; top: auto; bottom: 100px; } .hero__card--video .float--c { right: auto; left: 0; bottom: 10px; } .hero__video { object-position: 75% center; } } @media (max-width: 680px) { .hero__card--video .hero__visual { height: 96px; } .hero__card--video .float--d { display: none; } .hero__card--video .float--c { position: relative; left: 0; right: auto; bottom: auto; display: inline-flex; } } /* Full-width header + hero */ .shell--wide { max-width: none; padding-inline: clamp(16px, 3.4vw, 56px); } .hero { padding: 0; } .hero__wrap { padding: 0; } .hero__card { min-height: clamp(580px, calc(100vh - 150px), 860px); border-radius: 0; border: 0; border-bottom: 1px solid var(--line); } .hero__grid { padding-block: clamp(48px, 7vw, 104px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hero__copy { max-width: 640px; } .hero .stats { margin-top: 24px; } @media (max-width: 1180px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 680px) { .hero__wrap { padding: 0; } .hero__grid { padding: 40px 20px 32px; } } /* Centered hero + badge row */ .hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(40px, 6vw, 72px); } .hero__copy { width: 100%; max-width: 820px; min-width: 0; display: flex; flex-direction: column; align-items: center; } .hero__title { max-width: 14ch; margin-inline: auto; } .hero__text { margin-inline: auto; max-width: 56ch; } .hero-search { width: 100%; max-width: 600px; margin-inline: auto; text-align: left; } .hero__popular { justify-content: center; } .hero__from { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; } .hero__from .link-arrow { font-weight: 600; color: #c9cdf5; } .hero__sky--video::after { background: radial-gradient(70% 80% at 50% 45%, rgba(5, 6, 13, .78) 0%, rgba(5, 6, 13, .5) 55%, rgba(5, 6, 13, .25) 100%); } .hero__video { object-position: center; } .hero .orbit { left: 50%; } .hero__badges { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 1080px; } .badge-glass { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; text-align: left; background: rgba(17, 20, 44, .55); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .8); } .badge-glass small { display: block; font-size: .8rem; color: var(--muted); } .badge-glass strong { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1rem; white-space: nowrap; } .badge-glass__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; } .badge-glass__icon--mint { background: rgba(69, 227, 166, .16); color: var(--mint); } .badge-glass__icon--violet { background: rgba(139, 123, 255, .2); color: #c4bbff; } .badge-glass__icon--cyan { background: rgba(47, 214, 230, .16); color: var(--cyan); } .badge-glass .ring { flex: none; } @media (max-width: 1180px) { .hero__sky--video::after { background: rgba(5, 6, 13, .6); } } @media (max-width: 900px) { .hero__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .hero__badges { gap: 10px; } .badge-glass { padding: 10px 12px; gap: 10px; } .badge-glass__icon, .badge-glass .ring { width: 36px; height: 36px; } .badge-glass .ring { -webkit-mask: radial-gradient(circle, #000 0 11px, transparent 11.5px 14px, #000 14.5px); mask: radial-gradient(circle, #000 0 11px, transparent 11.5px 14px, #000 14.5px); } .badge-glass strong { font-size: .9rem; white-space: normal; } } /* Noticeable Hero Entrance Animation on Load */ .hero__copy > * { opacity: 0; transform: translateY(30px); animation: heroEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero__copy > *:nth-child(1) { animation-delay: 0.1s; } .hero__copy > *:nth-child(2) { animation-delay: 0.2s; } .hero__copy > *:nth-child(3) { animation-delay: 0.3s; } .hero__copy > *:nth-child(4) { animation-delay: 0.4s; } .hero__badges { opacity: 0; transform: translateY(40px); animation: heroEntrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; } @keyframes heroEntrance { to { opacity: 1; transform: translateY(0); } } /* Demos overview */ .nav__link.is-current { color: #fff; background: rgba(255, 255, 255, .07); } .grid--demos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 40px 28px; } .demo { display: grid; gap: 18px; align-content: start; } .demo__media { position: relative; display: block; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; } .demo__media .cover { aspect-ratio: 16 / 9; border-radius: 0; } .demo__hover { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%) scale(.96); opacity: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: rgba(7, 8, 18, .85); border: 1px solid var(--line-strong); font-weight: 700; color: #fff; transition: opacity .2s, transform .25s var(--ease); } .demo__media:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -30px rgba(70, 90, 255, .55), 0 0 0 1px rgba(139, 123, 255, .45); } .demo__media:hover .demo__hover { opacity: 1; transform: translate(-50%, -50%); } .demo__body { display: grid; gap: 8px; justify-items: start; } .demo__body .pcard__meta { margin-bottom: 0; } .demo__title { font-size: 1.4rem; } .demo__text { color: var(--muted); } .demo__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } /* Official WordPress mark */ .wp-logo { display: block; flex: none; } .badge-glass__icon--wp { background: #3858e9; } .buybox__wp { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(56, 88, 233, .14); border: 1px solid rgba(56, 88, 233, .35); font-size: .9rem; color: var(--muted); } .buybox__wp span { display: grid; } .buybox__wp strong { color: #fff; font-size: .95rem; } .site-footer__wp { display: flex; align-items: center; gap: 10px; } .site-footer__wp .wp-logo { opacity: .75; } /* Intro under the hero (replaces the stats strip) */ .intro { padding-top: clamp(72px, 9vw, 120px); } .intro .section-head { margin-bottom: 0; } .home .benefits { padding-top: clamp(24px, 4vw, 48px); } .built-for { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; color: var(--muted); font-weight: 600; } .wp-logotype { display: block; height: auto; opacity: .92; } .site-footer__wp .wp-logotype { opacity: .7; } /* --- Forms (WordPress, WooCommerce classic + blocks) on the dark theme --- */ .prose input[type="text"], .prose input[type="email"], .prose input[type="tel"], .prose input[type="password"], .prose input[type="number"], .prose input[type="search"], .prose input[type="url"], .prose select, .prose textarea, .woocommerce form .input-text, .woocommerce form select, .wc-block-components-text-input input, .wc-block-components-textarea, .wc-block-components-select select, .wc-blocks-components-select__select, .wc-block-components-combobox .components-form-token-field__input, .wc-block-components-combobox .components-combobox-control__input { background: var(--deep) !important; color: var(--star) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--r-sm) !important; min-height: 48px; padding: 12px 14px; font: inherit; box-shadow: none !important; } .wc-block-components-text-input input { padding-top: 22px !important; } .prose input:focus, .prose select:focus, .prose textarea:focus, .wc-block-components-text-input input:focus, .wc-blocks-components-select__select:focus { border-color: var(--cyan) !important; outline: 0; } .wc-block-components-text-input label, .wc-blocks-components-select__label, .wc-block-components-combobox label { color: var(--muted) !important; } .wc-blocks-components-select__container, .wc-block-components-select .components-custom-select-control__button { background: var(--deep) !important; color: var(--star) !important; } .shop-page { color: #d6d9f0; } .shop-page h1, .shop-page h2, .shop-page h3, .shop-page .wc-block-components-title, .shop-page .wc-block-components-checkout-step__title { color: #fff; font-family: var(--f-display); } .shop-page a { color: var(--cyan); } .shop-page .wc-block-components-sidebar-layout { gap: 0; } .shop-page .wc-block-components-sidebar { padding: 26px 28px !important; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); align-self: flex-start; box-sizing: border-box; } .shop-page .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block, .shop-page .wc-block-components-sidebar .wc-block-components-order-summary, .shop-page .wc-block-components-sidebar .wc-block-components-panel { background: none; border: 0 !important; padding: 0; margin: 0; box-shadow: none; } .shop-page .wc-block-components-sidebar .wc-block-components-totals-wrapper { padding-left: 0; padding-right: 0; } .shop-page .wc-block-cart__totals-title { padding: 0 !important; margin: 0 0 6px !important; color: var(--muted) !important; } .shop-page .wc-block-cart__submit-container { padding: 0 !important; } .shop-page .wp-block-woocommerce-checkout-order-summary-cart-items-block, .shop-page .wc-block-components-order-summary { padding: 0 !important; } .shop-page .wc-block-components-checkout-order-summary__title { padding: 0 0 12px !important; margin: 0 !important; border: 0 !important; } .shop-page .wc-block-cart-item__image img, .shop-page .wc-block-components-order-summary-item__image img { border-radius: 10px; object-fit: cover; object-position: left top; aspect-ratio: 1; } .shop-page .wc-block-cart-items .wc-block-cart-items__row { padding-block: 20px; } @media (max-width: 700px) { .shop-page .wc-block-components-sidebar { padding: 20px !important; margin-top: 24px; } } .shop-page .wc-block-components-totals-wrapper, .shop-page .wc-block-components-order-summary-item, .shop-page .wc-block-cart-items, .shop-page .wc-block-cart-items td, .shop-page .wc-block-cart-items th { border-color: var(--line) !important; } .shop-page .wc-block-components-order-summary-item__quantity { background: var(--night); color: #fff; border-color: var(--line-strong); box-shadow: none; } .shop-page .wc-block-components-product-metadata, .shop-page .wc-block-components-order-summary-item__description p { color: var(--muted); } .shop-page .wc-block-components-radio-control__option, .shop-page .wc-block-components-radio-control-accordion-option { border-color: var(--line-strong) !important; } .shop-page .wc-block-components-radio-control__input, .shop-page .wc-block-components-checkbox__input { background: var(--deep); border-color: var(--line-strong) !important; } .shop-page .wc-block-components-button:not(.is-link), .shop-page .wc-block-cart__submit-button, .shop-page .wc-block-components-checkout-place-order-button, .woocommerce .button, .woocommerce button.button.alt, .woocommerce a.button.alt { background: var(--violet) !important; background-image: var(--grad) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; min-height: 52px; font-weight: 700 !important; box-shadow: 0 10px 30px -10px rgba(139, 123, 255, .8); } .shop-page .wc-block-components-notice-banner { border-radius: var(--r-md); } .shop-page .wc-block-components-quantity-selector { display: none; } /* licences are sold one per order line */ .woocommerce table.shop_table { border-color: var(--line); border-radius: var(--r-md); } .woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--line); } /* Live search dropdown */ .hero-search.has-live { position: relative; } .live-results { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 40; text-align: left; max-height: min(70vh, 560px); overflow-y: auto; padding: 8px; background: #0f1124; border: 1px solid var(--line-strong); border-radius: 20px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .85); animation: live-in .18s var(--ease); } .live-results[hidden] { display: none; } .live-results--inline { position: static; max-height: 60vh; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; animation: none; } .live-results--inline + .search-dialog__quick { display: none; } .search-dialog:has(.live-results--inline:not([hidden])) .search-dialog__quick { display: none; } @keyframes live-in { from { opacity: 0; transform: translateY(-6px); } } .live-results__list { display: grid; gap: 2px; } .live-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border-radius: 14px; text-decoration: none; color: var(--star); } .live-item:hover, .live-item[aria-selected="true"] { background: rgba(255, 255, 255, .07); } .live-item[aria-selected="true"] { box-shadow: inset 0 0 0 1px rgba(47, 214, 230, .5); } .live-item__thumb { width: 72px; height: 48px; border-radius: 9px; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; } .live-item__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: left top; } .live-item__body { display: grid; gap: 1px; min-width: 0; } .live-item__title { display: flex; align-items: center; gap: 8px; font-weight: 700; } .live-item__text { color: var(--muted); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-item__meta { color: var(--faint); font-size: .8rem; } .live-item__price { font-weight: 700; font-size: .92rem; color: #c9cdf5; white-space: nowrap; } .live-item mark { background: none; color: var(--cyan); } .live-results__all { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 12px 14px; border-top: 1px solid var(--line); text-decoration: none; font-weight: 700; color: #fff; } .live-results__all:hover { color: var(--cyan); } .live-results__count { color: var(--faint); font-weight: 600; } .live-results__empty { padding: 18px 14px; color: var(--muted); } .hero-search.is-searching > .icon { animation: pulse-icon .8s ease-in-out infinite; } @keyframes pulse-icon { 50% { opacity: .35; } } @media (max-width: 680px) { .live-item { grid-template-columns: 52px minmax(0, 1fr); } .live-item__thumb { width: 52px; height: 38px; } .live-item__price { display: none; } } .hero__copy { position: relative; z-index: 5; } .page-hero .hero-search.has-live { z-index: 5; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } /* --- Cart drawer ------------------------------------------------------- */ .cart-open, .cart-open body { overflow: hidden; } .cart-drawer { position: fixed; inset: 0; z-index: 200; } .cart-drawer[hidden] { display: none; } .cart-drawer__scrim { position: absolute; inset: 0; background: rgba(3, 4, 10, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; } .cart-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: #0d0f1e; border-left: 1px solid var(--line-strong); box-shadow: -40px 0 80px -20px rgba(0, 0, 0, .7); transform: translateX(100%); transition: transform .35s var(--ease); } .cart-drawer.is-open .cart-drawer__scrim { opacity: 1; } .cart-drawer.is-open .cart-drawer__panel { transform: none; } .admin-bar .cart-drawer__panel { top: 32px; } @media (max-width: 782px) { .admin-bar .cart-drawer__panel { top: 46px; } } .cart-drawer__head { display: flex; align-items: center; gap: 10px; padding: 18px 16px 16px 24px; border-bottom: 1px solid var(--line); } .cart-drawer__head h2 { font-size: 1.25rem; } .cart-drawer__count { color: var(--muted); font-size: .9rem; } .cart-drawer__head .icon-btn { margin-left: auto; } .cart-drawer__notice { margin: 12px 24px 0; padding: 10px 14px; border-radius: var(--r-sm); background: rgba(255, 181, 71, .12); color: var(--amber); font-size: .92rem; } .cart-drawer__body { flex: 1; overflow-y: auto; padding: 8px 24px; } .cart-drawer__loading { height: 120px; margin: 16px 0; border-radius: var(--r-md); background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } .cart-drawer__empty { display: grid; gap: 16px; justify-items: start; padding: 32px 0; color: var(--muted); } .cart-lines { list-style: none; } .cart-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); } .cart-line__thumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; font-size: 1.4rem; } .cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: left top; } .cart-line__body { display: grid; gap: 4px; min-width: 0; } .cart-line__name { font-weight: 700; text-decoration: none; } .cart-line__name:hover { color: var(--cyan); } .cart-line__body small { color: var(--muted); font-size: .85rem; line-height: 1.4; } .cart-line__side { display: grid; justify-items: end; gap: 8px; } .cart-line__remove { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .03); color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s, background .2s; } .cart-line__remove:hover, .cart-line__remove:focus-visible { color: #ff8a8a; border-color: rgba(255, 120, 120, .45); background: rgba(255, 99, 99, .1); } .cart-line__remove:disabled { opacity: .4; } .cart-line__price { font-weight: 700; white-space: nowrap; } .cart-drawer__extras { padding: 16px 24px 4px; border-top: 1px solid var(--line); background: rgba(139, 123, 255, .06); } .cart-drawer__extras h3 { font-size: 1rem; font-family: var(--f-body); font-weight: 700; margin-bottom: 10px; } .cart-extra { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--deep); } .cart-extra__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(47, 214, 230, .14); color: var(--cyan); grid-row: span 2; } .cart-extra__body { display: grid; min-width: 0; } .cart-extra__body strong { font-size: .95rem; } .cart-extra__body small { color: var(--muted); font-size: .82rem; line-height: 1.4; } .cart-extra .btn { grid-column: 2; justify-self: start; margin-top: 6px; } .btn.is-busy { opacity: .6; pointer-events: none; } .cart-drawer__foot { padding: 18px 24px 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; } .cart-drawer__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; } .cart-drawer__total strong { font-family: var(--f-display); font-size: 1.5rem; } .cart-drawer__fine { color: var(--faint); font-size: .82rem; } .cart-drawer__view { text-align: center; color: var(--muted); font-size: .92rem; } .btn.is-disabled { opacity: .45; pointer-events: none; } .icon-btn__count[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .cart-drawer__panel, .cart-drawer__scrim { transition: none; } } .cart-line__icon { display: grid; place-items: center; width: 100%; height: 100%; background: rgba(47, 214, 230, .14); color: var(--cyan); } .cart-drawer__head h2 { display: flex; align-items: center; gap: 10px; } .cart-drawer__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(139, 123, 255, .18); color: #c4bbff; } /* Cart page suggestions */ .cart-suggest { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line); } .cart-suggest__head h2 { margin: 0; font-size: 1.5rem; } .cart-suggest__head p { margin: 6px 0 18px; color: var(--muted); } .cart-suggest__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; } .cart-extra--page { grid-template-columns: 48px minmax(0, 1fr); padding: 18px; margin: 0; border-radius: var(--r-lg); background: var(--panel); } .cart-extra--page .cart-extra__icon { width: 48px; height: 48px; border-radius: 14px; } .cart-extra--page .cart-extra__body strong { font-size: 1.05rem; color: #fff; } .cart-extra--page .cart-extra__body small { font-size: .9rem; } .shop-page .cart-extra--page .btn { color: #fff; text-decoration: none; margin-top: 10px; } /* ========================================================================== Customer account (WooCommerce My Account) — layout of the WP Job Core account: sticky sidebar (user card + menu), head, cards, stats, tiles, rows, gate. ========================================================================== */ .acc-page { position: relative; isolation: isolate; padding: 28px 0 clamp(64px, 8vw, 110px); min-height: 70vh; } .acc-page__sky { position: absolute; inset: 0 0 auto; height: 420px; z-index: -1; overflow: hidden; pointer-events: none; } .acc-page__sky .hero__glow--a { width: 46%; height: 120%; right: -8%; top: -60%; opacity: .35; } .acc-page .woocommerce { color: #d6d9f0; } .acc { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px; align-items: start; } .acc__main { min-width: 0; } /* Sidebar */ .acc-side { position: sticky; top: 96px; padding: 14px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); } .admin-bar .acc-side { top: 128px; } .acc-toggle { display: none; } .acc-side__user { display: flex; align-items: center; gap: 12px; padding: 8px 10px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .acc-side__avatar { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 14px; background: var(--grad); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 1rem; } .acc-side__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .acc-side__who { min-width: 0; } .acc-side__name { display: block; color: #fff; font-weight: 700; line-height: 1.2; } .acc-side__email { display: block; overflow: hidden; color: var(--muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; } .acc-nav { display: flex; flex-direction: column; gap: 2px; list-style: none; } .acc-nav a, .acc-nav__link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; color: #c9cde8; font-size: .95rem; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; } .acc-nav a .icon, .acc-nav__link .icon { flex: none; color: var(--faint); transition: color .15s; } .acc-nav a:hover, .acc-nav__link:hover { background: rgba(255, 255, 255, .05); color: #fff; } .acc-nav a:hover .icon, .acc-nav__link:hover .icon { color: var(--muted); } .acc-nav a.is-active, .acc-nav__link.is-active { background: rgba(139, 123, 255, .16); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(139, 123, 255, .3); } .acc-nav a.is-active .icon, .acc-nav__link.is-active .icon { color: var(--violet); } .acc-nav__count { margin-left: auto; min-width: 24px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--muted); font-size: .76rem; font-weight: 700; text-align: center; } .acc-nav a.is-active .acc-nav__count { background: var(--violet); color: #fff; } .acc-nav__foot { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .acc-nav__link--out, .acc-nav__link--out .icon { color: #ff8a8a !important; } .acc-nav__link--out:hover { background: rgba(255, 99, 99, .1); } /* Head */ .acc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--faint); font-size: .88rem; } .acc-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; } .acc-crumbs a:hover { color: #fff; } .acc-crumbs [aria-current] { color: #dfe2ff; } .acc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .acc-head__title { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); letter-spacing: -.03em; } .acc-head__dek { max-width: 62ch; margin-top: 8px; color: var(--muted); } .acc-head .btn { flex: none; } /* Cards */ .acc-subtitle { margin: 28px 0 12px; font-size: 1.05rem; } .acc-card { min-width: 0; margin: 0 0 18px; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); } .acc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .acc-card h2 { color: #fff; font-size: 1.15rem; } .acc-muted { margin-top: 10px; color: var(--muted); font-size: .95rem; } .acc-muted a { color: var(--cyan); } .acc-welcome { display: flex; align-items: center; gap: 16px; background: linear-gradient(110deg, rgba(139, 123, 255, .2), rgba(47, 214, 230, .06) 55%, transparent), var(--panel); } .acc-welcome__who { flex: 1; min-width: 0; } .acc-welcome__greet { color: #fff; font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); font-weight: 600; letter-spacing: -.02em; } .acc-welcome__mail { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; } /* Stats + tiles */ .acc-stats, .acc-tiles { display: grid; gap: 14px; margin: 0 0 18px; list-style: none; } .acc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .acc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .acc-stat, .acc-tile { display: grid; gap: 4px; align-content: start; height: 100%; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s var(--ease), background .2s; } .acc-stat:hover, .acc-tile:hover { border-color: rgba(139, 123, 255, .45); background: var(--panel-2); transform: translateY(-2px); } .acc-stat__icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 12px; background: rgba(139, 123, 255, .16); color: var(--violet); } .acc-stat__num { color: #fff; font-family: var(--f-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; } .acc-stat__label { color: #e3e6ff; font-size: .92rem; font-weight: 700; } .acc-stat__hint { color: var(--faint); font-size: .8rem; } .acc-tile__icon { color: var(--cyan); margin-bottom: 6px; } .acc-tile__title { color: #fff; font-weight: 700; } .acc-tile__dek { color: var(--muted); font-size: .88rem; line-height: 1.45; } /* Callout */ .acc-callout { margin: 0 0 18px; padding: 18px 20px; border: 1px solid rgba(255, 181, 71, .35); border-radius: var(--r-md); background: rgba(255, 181, 71, .08); color: #ffe2b5; } .acc-callout__title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--amber); font-weight: 700; } .acc-callout__list { display: grid; gap: 10px; list-style: none; } .acc-callout__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .acc-callout__list strong { color: #fff; margin-right: 6px; } /* Rows */ .acc-list { list-style: none; } .acc-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); } .acc-row:first-child { padding-top: 6px; } .acc-row:last-child { padding-bottom: 2px; border-bottom: 0; } .acc-row.is-off .acc-row__title, .acc-row.is-off .acc-file__thumb { opacity: .55; } .acc-row__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(139, 123, 255, .14); color: var(--violet); } .acc-row__icon.is-dev { background: rgba(255, 255, 255, .06); color: var(--muted); } .acc-row__body { flex: 1; min-width: 0; } .acc-row__title { display: block; color: #fff; font-weight: 600; line-height: 1.3; text-decoration: none; } a.acc-row__title:hover, .acc-row__title a:hover { color: var(--cyan); } .acc-row__title a { color: inherit; text-decoration: none; } .acc-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; color: var(--muted); font-size: .85rem; } .acc-row__meta a { color: var(--cyan); } .acc-row__price { color: #fff; font-weight: 700; white-space: nowrap; } .acc-row__actions { display: flex; gap: 4px; margin: 0; flex: none; } .acc-iconbtn { appearance: none; flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .acc-iconbtn:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .05); color: #fff; } .acc-iconbtn[aria-pressed="true"], .acc-iconbtn.is-done { color: var(--mint); } .acc-iconbtn--danger:hover { border-color: rgba(255, 99, 99, .4); background: rgba(255, 99, 99, .1); color: #ff8a8a; } .acc-badge { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--muted); font-size: .76rem; font-weight: 700; white-space: nowrap; } .acc-badge--active, .acc-badge--completed { background: rgba(69, 227, 166, .14); color: var(--mint); } .acc-badge--ending, .acc-badge--processing, .acc-badge--on-hold, .acc-badge--pending { background: rgba(255, 181, 71, .14); color: var(--amber); } .acc-badge--ended, .acc-badge--revoked, .acc-badge--refunded, .acc-badge--cancelled, .acc-badge--failed { background: rgba(255, 99, 99, .14); color: #ff8a8a; } .acc-tag { display: inline-flex; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; vertical-align: 2px; } .acc-tag--live { background: rgba(47, 214, 230, .14); color: var(--cyan); } .acc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; list-style: none; } .acc-chip { padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: 999px; color: #d6d9f0; font-size: .82rem; } .acc-chip a { color: inherit; text-decoration: none; } .acc-chip a:hover { color: var(--cyan); } .acc-link { display: inline-flex; align-items: center; gap: 6px; color: var(--cyan); font-weight: 700; font-size: .92rem; text-decoration: none; } .acc-link:hover { text-decoration: underline; } .acc-note { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: .88rem; } .acc-note svg { flex: none; margin-top: 3px; color: var(--faint); } /* Empty */ .acc-empty { padding: 52px 24px; text-align: center; } .acc-empty__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%; background: rgba(139, 123, 255, .14); color: var(--violet); } .acc-card .acc-empty__title { margin-bottom: 8px; } .acc-empty__text { max-width: 48ch; margin: 0 auto 20px; color: var(--muted); } /* Licence card */ .acc-lic { padding: 0; overflow: hidden; scroll-margin-top: 110px; } .acc-lic > * { padding-inline: 24px; } .acc-lic__head { display: flex; align-items: center; gap: 14px; padding-top: 22px; } .acc-lic__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--grad); color: #fff; box-shadow: 0 10px 26px -10px rgba(139, 123, 255, .8); } .acc-lic--ended .acc-lic__icon, .acc-lic--revoked .acc-lic__icon { background: var(--panel-2); color: var(--muted); box-shadow: none; } .acc-lic__who { flex: 1; min-width: 0; } .acc-lic__who p { margin-top: 2px; color: var(--muted); font-size: .88rem; } .acc-lic__who a { color: var(--cyan); text-decoration: none; } .acc-key { display: flex; align-items: center; gap: 4px; margin: 18px 24px 0; padding: 8px 8px 8px 16px !important; background: var(--deep); border: 1px dashed var(--line-strong); border-radius: 12px; } .acc-key__label { margin-right: 10px; color: var(--faint); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .acc-key__code { flex: 1; min-width: 0; overflow: hidden; color: #fff; font: 600 .98rem/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; transition: filter .2s; } .js .acc-key:not(.is-shown) .acc-key__code { filter: blur(6px); user-select: none; } .acc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 6px; } .acc-facts > div { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); } .acc-facts dt { color: var(--faint); font-size: .78rem; font-weight: 600; } .acc-facts dd { margin: 2px 0 0; color: #fff; font-weight: 700; } .acc-meter { display: block; height: 4px; margin-top: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; } .acc-meter span { display: block; height: 100%; border-radius: inherit; background: var(--grad); } .acc-lic__sites { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); } .acc-lic h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: #e3e6ff; font-family: var(--f-body); font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .acc-lic__sites .acc-row__icon { width: 38px; height: 38px; border-radius: 10px; } .acc-upgrades { margin-top: 14px; padding-block: 16px; background: linear-gradient(110deg, rgba(139, 123, 255, .12), rgba(47, 214, 230, .05)); border-top: 1px solid rgba(139, 123, 255, .25); } .acc-upgrades h3 { color: #c9c2ff; } .acc-upgrades h3 svg { color: var(--violet); } .acc-upgrades__list { display: grid; gap: 10px; margin-top: 8px; list-style: none; } .acc-upgrade { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(7, 8, 18, .45); border: 1px solid var(--line); } .acc-upgrade__body { flex: 1; min-width: 0; } .acc-upgrade__body strong { display: block; color: #fff; } .acc-upgrade__body small { color: var(--muted); } .acc-upgrade__price { color: #fff; font-weight: 800; font-size: 1.05rem; white-space: nowrap; } .acc-upgrade__price s { margin-right: 4px; color: var(--faint); font-size: .85rem; font-weight: 500; } .acc-lic__foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 18px; margin-top: 14px; padding-block: 14px; background: rgba(7, 8, 18, .35); border-top: 1px solid var(--line); } .acc-lic__foot .acc-link { margin-right: auto; } .acc .btn svg { flex: none; } /* Downloads */ .acc-file__thumb { flex: none; display: grid; place-items: center; width: 58px; height: 44px; overflow: hidden; border-radius: 10px; background: var(--panel-2); color: #fff; font-family: var(--f-display); font-weight: 700; } .acc-file__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: left top; } .acc-file__locked { display: flex; align-items: center; gap: 12px; flex: none; } /* Sign in / register */ .acc-gate { display: grid; max-width: 460px; margin: 24px auto 0; gap: 22px; } .acc-gate--two { max-width: 940px; grid-template-columns: 1.1fr 1fr; align-items: start; } .acc-gate__card { padding: 34px 30px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-float); } .acc-gate__card--soft { background: linear-gradient(160deg, rgba(139, 123, 255, .12), transparent 60%), var(--deep); box-shadow: none; } .acc-gate__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: rgba(139, 123, 255, .16); color: var(--violet); } .acc-gate h2 { color: #fff; font-size: 1.5rem; } .acc-gate__lead { margin: 8px 0 22px; color: var(--muted); } .acc-gate__list { display: grid; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); list-style: none; } .acc-gate__list li { display: flex; align-items: center; gap: 10px; color: #c9cde8; font-size: .94rem; } .acc-gate__list .icon { flex: none; color: var(--cyan); } .acc-form { display: grid; gap: 16px; } .acc-form .btn { margin-top: 4px; } .acc-field { margin: 0; } .acc-field > label { display: flex; justify-content: space-between; margin-bottom: 7px; color: #e3e6ff; font-size: .9rem; font-weight: 600; } .acc-field__aside { color: var(--cyan); font-weight: 500; text-decoration: none; } .acc-field input.input-text, .acc-card--wc input.input-text, .acc-card--wc select, .acc-card--wc textarea, .acc-page .select2-container .select2-selection--single { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--deep) !important; color: var(--star) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--r-sm) !important; font: inherit; box-shadow: none; } .acc-field input:focus, .acc-card--wc input:focus, .acc-card--wc select:focus { border-color: var(--cyan) !important; outline: 0; box-shadow: 0 0 0 3px rgba(47, 214, 230, .15); } .acc-field--check label { display: flex; align-items: center; gap: 10px; color: #c9cde8; font-weight: 500; cursor: pointer; } .acc-field--check input { width: 18px; height: 18px; accent-color: var(--violet); } .acc-page .woocommerce-privacy-policy-text { color: var(--faint); font-size: .84rem; } .acc-page .woocommerce-privacy-policy-text a { color: var(--muted); } /* WooCommerce's own screens inside a card */ .acc-card--wc { color: #d6d9f0; } .acc-card--wc h2, .acc-card--wc h3, .acc-card--wc legend { color: #fff; font-family: var(--f-display); font-size: 1.15rem; margin-bottom: 12px; } .acc-card--wc a { color: var(--cyan); } .acc-card--wc p { margin-bottom: 14px; } .acc-card--wc fieldset { margin: 22px 0 8px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); } .acc-card--wc .form-row { margin: 0 0 16px; padding: 0; } .acc-card--wc .form-row label { display: block; margin-bottom: 7px; color: #e3e6ff; font-size: .9rem; font-weight: 600; } .acc-card--wc .form-row em { display: block; margin-top: 6px; color: var(--faint); font-size: .82rem; } .acc-card--wc .woocommerce-address-fields__field-wrapper, .acc-card--wc .woocommerce-EditAccountForm { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .acc-card--wc .woocommerce-EditAccountForm > *, .acc-card--wc .form-row-wide, .acc-card--wc .woocommerce-address-fields__field-wrapper > .form-row-wide { grid-column: 1 / -1; } .acc-card--wc .form-row-first { grid-column: 1; } .acc-card--wc .form-row-last { grid-column: 2; } .acc-card--wc .woocommerce-EditAccountForm .form-row-first, .acc-card--wc .woocommerce-EditAccountForm .form-row-last { grid-column: auto; } .acc-card--wc .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .acc-card--wc .woocommerce-Address { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); } .acc-card--wc .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .acc-card--wc .woocommerce-Address-title h2 { margin: 0; font-size: 1rem; } .acc-card--wc address { color: var(--muted); font-style: normal; line-height: 1.7; } .acc-card--wc table.shop_table, .acc-card--wc table.woocommerce-table { width: 100%; border: 0 !important; border-collapse: collapse; margin: 0 0 18px; } .acc-card--wc table th { padding: 10px 12px; color: var(--faint); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; border: 0; border-bottom: 1px solid var(--line); } .acc-card--wc table td { padding: 14px 12px; border: 0 !important; border-bottom: 1px solid var(--line) !important; color: #d6d9f0; vertical-align: middle; } .acc-card--wc table tr:last-child td { border-bottom: 0 !important; } .acc-card--wc table tfoot th, .acc-card--wc table tfoot td { border-top: 1px solid var(--line) !important; font-size: .95rem; text-transform: none; letter-spacing: 0; color: #fff; } .acc-card--wc .woocommerce-orders-table__cell-order-number a { color: #fff; font-weight: 700; text-decoration: none; } .acc-card--wc .woocommerce-orders-table__cell-order-actions { text-align: right; } .acc-card--wc .button, .acc-card--wc button.button, .acc-card--wc .woocommerce-Button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 40px !important; padding: 0 18px !important; font-size: .9rem !important; text-decoration: none; box-shadow: none !important; } .acc-card--wc table .button, .acc-card--wc .woocommerce-Address-title .edit { background: rgba(255, 255, 255, .06) !important; background-image: none !important; border: 1px solid var(--line-strong) !important; color: #fff !important; border-radius: 999px; padding: 6px 14px; text-decoration: none; font-size: .85rem; font-weight: 700; } .acc-card--wc .woocommerce-pagination { display: flex; gap: 10px; justify-content: space-between; } .acc-card--wc mark { padding: 1px 6px; border-radius: 6px; background: rgba(139, 123, 255, .18); color: #fff; } .acc-card--wc .woocommerce-order-details, .acc-card--wc .woocommerce-customer-details { margin-top: 18px; } .acc-card--wc .apo-lic-keys { border-color: var(--line-strong) !important; background: var(--deep); } .acc-card--wc .apo-lic-keys code { color: #fff; } .acc-page .woocommerce-message, .acc-page .woocommerce-info, .acc-page .woocommerce-error, .acc-page .wc-block-components-notice-banner { list-style: none; margin: 0 0 18px; padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--panel-2); color: #e3e6ff; } .acc-page .woocommerce-message { border-color: rgba(69, 227, 166, .4); background: rgba(69, 227, 166, .08); } .acc-page .woocommerce-error { border-color: rgba(255, 99, 99, .45); background: rgba(255, 99, 99, .08); } .acc-page .woocommerce-message .button, .acc-page .woocommerce-info .button { float: right; min-height: 0; padding: 4px 14px; font-size: .85rem; } /* Lost / reset password (guest screens without the gate) */ .acc-page--guest .woocommerce > form.lost_reset_password, .acc-page--guest .woocommerce > .woocommerce-ResetPassword { max-width: 520px; margin: 24px auto 0; padding: 30px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); } .acc-page--guest .lost_reset_password input.input-text { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--deep); color: var(--star); border: 1px solid var(--line-strong); border-radius: var(--r-sm); } .acc-page--guest .lost_reset_password label { display: block; margin: 14px 0 7px; font-weight: 600; } @media (max-width: 1100px) { .acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acc-gate--two { grid-template-columns: 1fr; max-width: 520px; } } @media (max-width: 900px) { .acc { grid-template-columns: 1fr; gap: 16px; } .acc-side { position: relative; top: 0 !important; padding: 0; overflow: hidden; } .acc-toggle { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 15px 18px; border: 0; background: transparent; color: #fff; cursor: pointer; text-align: left; } .acc-toggle__meta { color: var(--faint); font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .acc-toggle__current { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; } .acc-toggle .icon { transition: transform .2s; } .acc-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); } .js .acc-side__panel { display: none; padding: 0 12px 12px; } .js .acc-side__panel.is-open { display: block; } .acc-tiles, .acc-facts { grid-template-columns: 1fr; } .acc-head { flex-direction: column; } } @media (max-width: 600px) { .acc-card { padding: 18px; } .acc-lic > * { padding-inline: 18px; } .acc-key { margin-inline: 18px; } .acc-key__label { display: none; } .acc-row { flex-wrap: wrap; } .acc-row__body { flex-basis: calc(100% - 60px); } .acc-row > .acc-badge, .acc-row > .acc-row__price { margin-left: 58px; } .acc-files .acc-row > .btn, .acc-file__locked { margin-left: 72px; } .acc-upgrade { flex-wrap: wrap; } .acc-upgrade__body { flex-basis: 100%; } .acc-welcome { flex-wrap: wrap; } .acc-card--wc .woocommerce-address-fields__field-wrapper, .acc-card--wc .woocommerce-EditAccountForm { grid-template-columns: 1fr; } .acc-card--wc .form-row-first, .acc-card--wc .form-row-last { grid-column: 1; } .acc-card--wc table.shop_table_responsive thead { display: none; } .acc-card--wc table.shop_table_responsive tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); } .acc-card--wc table.shop_table_responsive td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0 !important; text-align: right !important; } .acc-card--wc table.shop_table_responsive td::before { content: attr(data-title); color: var(--faint); font-weight: 600; text-align: left; } .acc-gate__card { padding: 26px 20px; } } /* ========================================================================== Coupons — cart drawer, cart + checkout blocks, classic forms ========================================================================== */ .cart-coupon { margin: 0 0 14px; } .cart-coupon summary { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .92rem; font-weight: 600; cursor: pointer; list-style: none; } .cart-coupon summary::-webkit-details-marker { display: none; } .cart-coupon summary .icon { color: var(--violet); } .cart-coupon summary:hover { color: #fff; } .cart-coupon[open] summary { margin-bottom: 10px; } .cart-coupon__form { display: flex; gap: 8px; } .cart-coupon__form input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; background: var(--deep); color: #fff; border: 1px dashed var(--line-strong); border-radius: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .cart-coupon__form input::placeholder { color: var(--faint); font-weight: 500; letter-spacing: 0; text-transform: none; } .cart-coupon__form input:focus { border-style: solid; border-color: var(--violet); outline: 0; box-shadow: 0 0 0 3px rgba(139, 123, 255, .2); } .cart-coupon__form .btn { min-height: 46px; } .cart-drawer__discounts { display: grid; gap: 6px; margin: 0 0 10px; list-style: none; } .cart-drawer__discounts li { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--mint); font-size: .92rem; } .coupon-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border: 1px dashed rgba(69, 227, 166, .55); border-radius: 8px; background: rgba(69, 227, 166, .08); color: var(--mint); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .coupon-chip button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: inherit; cursor: pointer; } .coupon-chip button:hover { background: rgba(69, 227, 166, .2); } /* Block cart + checkout coupon panel */ .shop-page .wc-block-components-totals-coupon .wc-block-components-panel__button, .shop-page .wc-block-components-totals-coupon-link { color: var(--muted) !important; font-weight: 600; } .shop-page .wc-block-components-totals-coupon .wc-block-components-panel__button:hover { color: #fff !important; } .shop-page .wc-block-components-totals-coupon__form { display: flex; gap: 8px; align-items: stretch; } .shop-page .wc-block-components-totals-coupon__form .wc-block-components-text-input input { border-style: dashed !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .shop-page .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button { min-height: 50px !important; padding: 0 20px !important; background: rgba(255, 255, 255, .08) !important; background-image: none !important; border: 1px solid var(--line-strong) !important; box-shadow: none !important; } .shop-page .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button:hover { border-color: var(--violet) !important; } .shop-page .wc-block-components-totals-discount .wc-block-components-totals-item__value { color: var(--mint); font-weight: 700; } .shop-page .wc-block-components-chip, .shop-page .wc-block-components-totals-discount__coupon-list-item { background: rgba(69, 227, 166, .08) !important; color: var(--mint) !important; border: 1px dashed rgba(69, 227, 166, .55) !important; border-radius: 8px !important; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .shop-page .wc-block-components-chip .wc-block-components-chip__remove { fill: currentColor; color: inherit; background: transparent; } .woocommerce form.checkout_coupon, .woocommerce .coupon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .woocommerce form.checkout_coupon { padding: 18px; border: 1px dashed var(--line-strong) !important; border-radius: var(--r-md); background: var(--panel); } .woocommerce .coupon .input-text, .woocommerce form.checkout_coupon .input-text { min-width: 200px; border-style: dashed !important; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } /* WooCommerce's float layout (30% / 68%) off inside our grid. */ .woocommerce-account .acc .woocommerce-MyAccount-navigation, .woocommerce-account .acc .woocommerce-MyAccount-content { float: none; width: auto; margin: 0; } .woocommerce-account .acc::before, .woocommerce-account .acc::after { display: none; } .woocommerce .acc-gate form.login, .woocommerce .acc-gate form.register { margin: 0; padding: 0; border: 0; border-radius: 0; text-align: left; } .acc-field--check > label { justify-content: flex-start; } @media (max-width: 600px) { .acc-card.acc-lic { padding: 0; } .acc-lic__sites .acc-row { flex-wrap: nowrap; } .acc-lic__sites .acc-row__body { flex-basis: auto; } .acc-lic__foot .btn { width: 100%; } } .cart-drawer__panel { overflow-y: auto; overscroll-behavior: contain; } .cart-drawer__body { flex: 1 0 auto; min-height: 104px; overflow: visible; } .cart-drawer__foot { position: sticky; bottom: 0; z-index: 2; background: #0d0f1e; } .cart-drawer__head { position: sticky; top: 0; z-index: 2; background: #0d0f1e; } .cart-drawer__notice.is-ok { background: rgba(69, 227, 166, .1); border-color: rgba(69, 227, 166, .35); color: var(--mint); } /* ========================================================================== Docs ========================================================================== */ .docs-hero .hero-search { margin-top: 28px; } .docs-hero--guide .page-hero__title { font-size: var(--fs-h2); max-width: none; } .docs-hero__row { display: flex; align-items: center; gap: 18px; } .docs-hero--guide .hero-search { margin-inline: 0; max-width: 640px; } .hero-search--compact { max-width: 520px; } .docs-guides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } /* Four guides in a row. */ @media (max-width: 1180px) { .docs-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .docs-guides { grid-template-columns: minmax(0, 1fr); } } .docs-guide { display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .2s, transform .2s var(--ease); } .docs-guide:hover { border-color: rgba(139, 123, 255, .4); transform: translateY(-2px); } .docs-guide__head { display: flex; align-items: center; gap: 14px; } .docs-guide__head h2 { font-size: 1.35rem; } .docs-guide__head h2 a { color: #fff; text-decoration: none; } .docs-guide__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--grad); color: #fff; box-shadow: 0 10px 26px -10px rgba(139, 123, 255, .8); } .docs-guide__icon--lg { width: 64px; height: 64px; border-radius: 18px; } .docs-guide__meta { margin-top: 4px; color: var(--faint); font-size: .88rem; } .docs-guide__meta a { color: var(--cyan); } .docs-guide__text { color: var(--muted); } .docs-guide__list { display: grid; gap: 2px; list-style: none; margin: 0 0 4px; padding: 12px 0 0; border-top: 1px solid var(--line); } .docs-guide__list a { display: block; padding: 6px 0; color: #d6d9f0; text-decoration: none; } .docs-guide__list a:hover { color: var(--cyan); } .docs-guide .link-arrow { margin-top: auto; } .docs-results { margin-bottom: 48px; } .docs-results__count { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: var(--muted); } .docs-results__count a { color: var(--cyan); } .docs-hits { display: grid; gap: 10px; list-style: none; } .docs-hit { display: grid; gap: 4px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); color: inherit; text-decoration: none; } .docs-hit:hover { border-color: rgba(139, 123, 255, .45); } .docs-hit__crumb { color: var(--faint); font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .docs-hit__title { color: #fff; font-family: var(--f-display); font-size: 1.15rem; } .docs-hit__text { color: var(--muted); font-size: .95rem; } .docs-empty { padding: 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--muted); } .docs-intro { max-width: 72ch; margin-bottom: 36px; } .docs-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; } .docs-group { padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); } .docs-group h2 { margin-bottom: 10px; color: var(--faint); font-family: var(--f-body); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .docs-group ul { list-style: none; } .docs-group a { display: grid; gap: 2px; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; color: inherit; text-decoration: none; } .docs-group a:hover { background: rgba(255, 255, 255, .04); } .docs-group__title { color: #fff; font-weight: 600; } .docs-group__text { color: var(--muted); font-size: .9rem; line-height: 1.45; } .doc-help { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(110deg, rgba(139, 123, 255, .14), transparent 60%), var(--panel); } .doc-help__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(47, 214, 230, .14); color: var(--cyan); } .doc-help > div { flex: 1; color: var(--muted); } .doc-help__title { color: #fff; font-weight: 700; } /* Article layout */ .doc-page { padding: 32px 0 var(--section); } .doc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: clamp(28px, 3vw, 48px); align-items: start; max-width: calc(1380px + var(--gutter) * 2); } .doc-side, .doc-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; } .admin-bar .doc-side, .admin-bar .doc-toc { top: 128px; } .doc-side__toggle { display: none; } .doc-nav__guide { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: #fff; font-weight: 700; text-decoration: none; } .doc-nav__guide .docs-guide__icon { width: 36px; height: 36px; border-radius: 10px; box-shadow: none; } .doc-nav__guide small { display: block; color: var(--faint); font-size: .76rem; font-weight: 500; } .doc-nav__group { margin: 16px 0 6px; color: var(--faint); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .doc-nav ul { list-style: none; border-left: 1px solid var(--line); } .doc-nav li a { display: block; margin-left: -1px; padding: 6px 12px; border-left: 2px solid transparent; color: var(--muted); font-size: .92rem; line-height: 1.35; text-decoration: none; } .doc-nav li a:hover { color: #fff; } .doc-nav li a.is-active { border-left-color: var(--violet); color: #fff; font-weight: 600; } .doc-nav__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--cyan); font-size: .9rem; font-weight: 600; text-decoration: none; } .doc-main { min-width: 0; } .doc-main .crumbs { margin-bottom: 14px; } .doc-main__title { font-size: var(--fs-h2); letter-spacing: -.03em; } .doc-main__lede { margin-top: 14px; color: #c3c8e6; font-size: var(--fs-lede); max-width: 64ch; } .doc-main__meta { margin: 14px 0 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: .88rem; } .doc-prose { max-width: 76ch; } .doc-prose h3 { position: relative; scroll-margin-top: 110px; padding-top: .4em; } .doc-anchor { margin-left: 10px; color: var(--faint) !important; text-decoration: none; opacity: 0; transition: opacity .15s; } .doc-prose h3:hover .doc-anchor, .doc-anchor:focus { opacity: 1; } .doc-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; } .doc-prose th, .doc-prose td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; } .doc-prose th { background: var(--panel); color: #fff; font-weight: 700; } .doc-prose td:first-child { color: #e9ebff; } .doc-prose .note { padding: 14px 18px; border-left: 3px solid var(--cyan); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: rgba(47, 214, 230, .07); color: #dfe8f0; } .doc-prose .path { padding: 1px 7px; border-radius: 6px; background: rgba(139, 123, 255, .14); color: #e3e0ff; font-weight: 600; white-space: nowrap; } .doc-prose kbd { padding: 1px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; font-size: .85em; } .doc-prose pre code { padding: 0; background: none; } .doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; } .doc-pager__link { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); color: #fff; font-weight: 600; text-decoration: none; transition: border-color .2s; } .doc-pager__link:hover { border-color: rgba(139, 123, 255, .45); } .doc-pager__link small { color: var(--faint); font-weight: 500; } .doc-pager__link--next { text-align: right; grid-column: 2; } .doc-toc__title { margin-bottom: 10px; color: var(--faint); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .doc-toc ul { list-style: none; border-left: 1px solid var(--line); } .doc-toc a { display: block; margin-left: -1px; padding: 5px 12px; border-left: 2px solid transparent; color: var(--muted); font-size: .86rem; line-height: 1.35; text-decoration: none; } .doc-toc a:hover { color: #fff; } .doc-toc a.is-active { border-left-color: var(--cyan); color: #fff; } @media (max-width: 1180px) { .doc-layout { grid-template-columns: 240px minmax(0, 1fr); } .doc-toc { display: none; } } @media (max-width: 860px) { .doc-layout { grid-template-columns: 1fr; gap: 18px; } .doc-side { position: relative; top: 0 !important; max-height: none; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); } .doc-side__toggle { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: 0; background: none; color: #fff; font-weight: 700; cursor: pointer; text-align: left; } .doc-side__toggle span { flex: 1; } .doc-side__toggle[aria-expanded="true"] .icon--chevron { transform: rotate(180deg); } .js .doc-nav { display: none; padding: 0 16px 16px; } .js .doc-nav.is-open { display: block; } .doc-help { flex-wrap: wrap; } .docs-hero__row { align-items: flex-start; } .doc-pager { grid-template-columns: 1fr; } .doc-pager__link--next { grid-column: 1; } } .docs-hero { overflow: visible; z-index: 10; } .docs-hero .page-hero__sky, .sup-hero .page-hero__sky { overflow: hidden; } .live-item__thumb .icon { color: var(--violet); } @media (max-width: 860px) { .doc-help > div { flex: 1 1 calc(100% - 62px); } } mark.legal-todo { padding: 1px 6px; border-radius: 6px; background: rgba(255, 181, 71, .16); color: var(--amber); } .legal-page .prose h2 { font-size: 1.35rem; } /* Social login (Nextend Social Login) on the sign-in / register cards */ .acc-gate .nsl-container { display: block !important; margin: 18px 0 0 !important; padding-top: 16px; border-top: 1px solid var(--line); } .acc-gate .nsl-container-buttons { display: grid !important; gap: 10px; } .acc-gate .nsl-container-buttons a { display: block; margin: 0 !important; text-decoration: none !important; } .acc-gate .nsl-button { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100% !important; min-height: 48px; border-radius: 999px !important; box-shadow: none !important; border: 1px solid var(--line-strong) !important; background: rgba(255, 255, 255, .06) !important; color: #fff !important; font-weight: 700; transition: background .15s, border-color .15s; } .acc-gate .nsl-button:hover { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .3) !important; } .acc-gate .nsl-button-svg-container { display: grid; place-items: center; padding: 0 !important; } .acc-gate .nsl-button-svg-container svg { width: 20px; height: 20px; } .acc-gate .nsl-button-label-container { margin: 0 !important; padding: 0 !important; font-size: .95rem !important; line-height: 1.2 !important; } .acc-gate .nsl-button-google .nsl-button-svg-container { background: #fff; border-radius: 50%; width: 26px; height: 26px; } /* --- Support: questions board + ticket desk (Xolius Support) --------- */ .sup-hero { overflow: visible; z-index: 10; } .sup-hero .hero-search { margin-top: 28px; } .sup-hero--slim { padding-block: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 40px); } .sup-quick { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 920px; margin: 28px auto 0; padding: 0; text-align: left; } .sup-quick a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: rgba(255, 255, 255, .04); color: var(--star); text-decoration: none; transition: border-color .2s, background .2s, transform .2s var(--ease); } .sup-quick a:hover { border-color: rgba(47, 214, 230, .5); background: rgba(255, 255, 255, .08); transform: translateY(-2px); } .sup-quick .icon { flex: none; color: var(--cyan); } .sup-quick b { display: block; font-size: .95rem; } .sup-quick small { display: block; color: var(--muted); font-size: .82rem; } .sup-section + .sup-section { padding-top: 0; } .sup-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 28px; } .sup-head__title { margin: 0 0 8px; font-family: var(--f-display); font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.02em; } .sup-head__text { max-width: 56ch; margin: 0; color: var(--muted); } /* Topics */ .sup-topics { display: flex; flex-wrap: wrap; gap: 6px; } .sup-topic { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--muted); font-weight: 600; font-size: .92rem; cursor: pointer; transition: color .2s, background .2s, border-color .2s; } .sup-topic span { padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, .08); font-size: .75rem; } .sup-topic:hover { color: var(--star); border-color: rgba(255, 255, 255, .3); } .sup-topic.is-on { border-color: transparent; background: #fff; color: #0b0c18; } .sup-topic.is-on span { background: rgba(11, 12, 24, .1); } /* Question cards */ .sup-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; margin: 0; padding: 0; } .sup-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--panel) 0%, var(--deep) 100%); transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); } .sup-card:hover { border-color: var(--line-strong); transform: translateY(-2px); } .sup-card[hidden] { display: none; } .sup-card.is-open { grid-column: 1 / -1; border-color: rgba(139, 123, 255, .45); box-shadow: 0 30px 70px -40px rgba(139, 123, 255, .7); transform: none; } .sup-card.is-flash { animation: sup-flash 1.6s var(--ease); } @keyframes sup-flash { 0%, 40% { box-shadow: 0 0 0 3px rgba(47, 214, 230, .7); } 100% { box-shadow: 0 30px 70px -40px rgba(139, 123, 255, .7); } } .sup-card__toggle { display: flex; flex-direction: column; gap: 10px; flex: 1; width: 100%; padding: 22px 22px 18px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; } .sup-card__toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; border-radius: var(--r-lg); } .sup-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sup-chip { padding: 3px 10px; border-radius: 99px; background: rgba(139, 123, 255, .14); color: #c4bbff; font-size: .75rem; font-weight: 700; letter-spacing: .02em; } .sup-card__views { color: var(--faint); font-size: .78rem; } .sup-card__title { font-family: var(--f-display); font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--star); } .sup-card__excerpt { color: var(--muted); font-size: .93rem; line-height: 1.5; } .sup-card.is-open .sup-card__excerpt { display: none; } .sup-card__foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; } .sup-card__more { color: var(--cyan); font-size: .88rem; font-weight: 700; } .sup-card.is-open .sup-card__more { color: var(--muted); } .sup-card__helpful { color: var(--mint); font-size: .8rem; } .sup-card__plus { position: relative; width: 28px; height: 28px; margin-left: auto; border: 1px solid var(--line-strong); border-radius: 50%; transition: transform .3s var(--ease), background .2s; } .sup-card__plus::before, .sup-card__plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 2px; background: currentColor; } .sup-card__plus::after { transform: rotate(90deg); transition: transform .3s var(--ease); } .sup-card.is-open .sup-card__plus { background: #fff; color: #0b0c18; } .sup-card.is-open .sup-card__plus::after { transform: rotate(0); } .sup-card__answer { padding: 0 22px 22px; } .sup-card__prose { max-width: 78ch; padding-top: 16px; border-top: 1px solid var(--line); color: #d0d3ea; line-height: 1.7; } .sup-card__prose p { margin: 0 0 12px; } .sup-card__prose a { color: var(--cyan); } .sup-card__prose code { padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); font-size: .9em; } .sup-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); } .sup-link { color: var(--cyan); font-weight: 700; text-decoration: none; } .sup-link:hover { text-decoration: underline; } .sup-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; } .sup-vote__btn { min-height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--star); font-weight: 600; cursor: pointer; } .sup-vote__btn:hover { background: rgba(255, 255, 255, .08); } .sup-vote__thanks { color: var(--mint); } .sup-vote__ticket { color: var(--cyan); font-weight: 700; text-decoration: none; } .sup-board__none { padding: 28px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--muted); text-align: center; } .sup-board__more { margin: 20px 0 0; text-align: center; } .sup-board__more:has(button[hidden]) { display: none; } /* Desk */ .sup-desk { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(120% 80% at 100% 0%, rgba(139, 123, 255, .1), transparent 60%), var(--deep); } .sup-flow { list-style: none; display: flex; margin: 0; padding: 0; counter-reset: s; } .sup-flow__step { position: relative; display: flex; flex-direction: column; min-width: 112px; padding: 0 14px 0 0; counter-increment: s; } .sup-flow__step b { display: flex; align-items: center; gap: 8px; color: var(--star); font-size: .85rem; } .sup-flow__step b::before { content: counter(s); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line-strong); font-size: .72rem; } .sup-flow__step small { padding-left: 30px; color: var(--faint); font-size: .75rem; } .sup-flow__step--closed b::before { content: "✓"; background: rgba(69, 227, 166, .15); color: var(--mint); border-color: transparent; } .sup-notice { margin: 0 0 20px; padding: 12px 16px; border-radius: var(--r-md); border: 1px solid; font-weight: 600; } .sup-notice--ok { border-color: rgba(69, 227, 166, .35); background: rgba(69, 227, 166, .08); color: #9df3cf; } .sup-notice--error { border-color: rgba(255, 120, 120, .35); background: rgba(255, 120, 120, .08); color: #ffb3b3; } .sup-desk__grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; } .sup-inbox, .sup-compose > .sup-form, .sup-compose > .sup-empty { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); } .sup-inbox { padding: 18px; } .sup-inbox__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .sup-inbox__head h3, .sup-form__head h3 { margin: 0; font-family: var(--f-display); font-size: 1.1rem; } .sup-count { padding: 2px 10px; border-radius: 99px; background: rgba(255, 181, 71, .14); color: var(--amber); font-size: .78rem; font-weight: 700; } .sup-tickets { list-style: none; display: grid; gap: 8px; max-height: 560px; margin: 0; padding: 0; overflow: auto; } .sup-ticket { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 255, 255, .02); color: var(--star); text-decoration: none; transition: border-color .2s, background .2s; } .sup-ticket:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .05); } .sup-ticket.is-unread { border-color: rgba(47, 214, 230, .45); } .sup-ticket__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sup-ticket__top small { color: var(--faint); font-size: .75rem; } .sup-ticket__title { font-weight: 700; line-height: 1.35; } .sup-ticket__last { overflow: hidden; color: var(--muted); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; } .sup-ticket__new { align-self: flex-start; padding: 1px 8px; border-radius: 99px; background: var(--cyan); color: #04121a; font-size: .7rem; font-weight: 800; } .sup-tickets--wide .sup-ticket__last { white-space: normal; } .sup-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: .75rem; font-weight: 700; white-space: nowrap; } .sup-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .sup-status--open { background: rgba(139, 123, 255, .16); color: #c4bbff; } .sup-status--answered { background: rgba(69, 227, 166, .14); color: var(--mint); } .sup-status--waiting { background: rgba(255, 181, 71, .14); color: var(--amber); } .sup-status--closed { background: rgba(255, 255, 255, .07); color: var(--muted); } .sup-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 18px; text-align: center; color: var(--muted); } .sup-empty p { margin: 0 0 6px; } .sup-empty b { color: var(--star); } .sup-empty .btn { margin-top: 6px; } .sup-empty__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 14px; background: rgba(139, 123, 255, .14); color: #c4bbff; } .sup-empty__small { margin-top: 12px !important; font-size: .85rem; } /* Forms */ .sup-form { padding: clamp(18px, 2.5vw, 28px); } .sup-form__head { margin-bottom: 18px; } .sup-form__head p { margin: 4px 0 0; color: var(--muted); font-size: .92rem; } .sup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .sup-field { margin: 0 0 14px; } .sup-field label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .85rem; font-weight: 600; } .sup-field label em { color: var(--cyan); font-style: normal; } .sup-field label small { color: var(--faint); font-weight: 400; } .sup-field input, .sup-field select, .sup-field textarea, .sup-form--reply textarea { display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--deep); color: var(--star); transition: border-color .2s, box-shadow .2s; } .sup-field textarea, .sup-form--reply textarea { min-height: 140px; line-height: 1.55; resize: vertical; } .sup-field input:focus, .sup-field select:focus, .sup-field textarea:focus, .sup-form--reply textarea:focus { border-color: var(--cyan); outline: 0; box-shadow: 0 0 0 3px rgba(47, 214, 230, .15); } .sup-field select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%239aa1bf' stroke-width='2'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } .sup-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sup-drop { margin: 0 0 16px; } .sup-drop__zone { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--muted); font-size: .9rem; cursor: pointer; transition: border-color .2s, background .2s; } .sup-drop__zone b { color: var(--star); } .sup-drop__zone:hover, .sup-drop.is-over .sup-drop__zone { border-color: var(--cyan); background: rgba(47, 214, 230, .05); } .sup-drop__zone input, .sup-attach input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .sup-drop__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(47, 214, 230, .1); color: var(--cyan); } .sup-drop__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; } .sup-drop__list:empty { display: none; } .sup-drop__list li { position: relative; width: 84px; height: 64px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; } .sup-drop__list img { width: 100%; height: 100%; object-fit: cover; } .sup-drop__list button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(7, 8, 18, .8); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; } .sup-drop__list .is-bad { border-color: rgba(255, 120, 120, .6); } .sup-drop--inline { margin: 8px 0 0; } .sup-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .sup-form__privacy { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--faint); font-size: .82rem; } .sup-form__privacy .icon { color: var(--mint); flex: none; } .sup-form__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; } /* Conversation */ .sup-back { margin: 0 0 16px; } .sup-back a { color: var(--muted); font-weight: 600; text-decoration: none; } .sup-back a:hover { color: var(--star); } .sup-convo { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; } .sup-convo__main { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); } .sup-convo__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 0; } .sup-convo__num { margin: 0 0 4px; color: var(--faint); font-size: .82rem; font-weight: 600; } .sup-convo__title { margin: 0; font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1.25; } .sup-track { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 18px 24px 0; padding: 0; } .sup-track__step { position: relative; padding-top: 12px; color: var(--faint); font-size: .78rem; font-weight: 600; } .sup-track__step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); } .sup-track__step.is-done::before { background: rgba(139, 123, 255, .55); } .sup-track__step.is-now { color: var(--star); } .sup-track__step.is-now::before { background: var(--grad); } .sup-convo .apo-sup-thread { list-style: none; display: flex; flex-direction: column; gap: 18px; max-height: 70vh; margin: 20px 0 0; padding: 22px 24px; overflow: auto; border-block: 1px solid var(--line); background: rgba(7, 8, 18, .35); } .apo-sup-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 84%; animation: sup-in .35s var(--ease) both; } @keyframes sup-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .apo-sup-msg.is-mine { flex-direction: row-reverse; align-self: flex-end; } .apo-sup-ava { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--star); font-size: .78rem; font-weight: 700; } .apo-sup-ava.is-staff { border: 0; background: var(--grad); color: #fff; } .apo-sup-ava .dashicons { display: none; } .apo-sup-ava.is-staff::before { content: "A"; font-family: var(--f-display); font-weight: 800; } .apo-sup-msg__body { min-width: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 18px 18px 18px 6px; background: var(--panel-2); } .apo-sup-msg.is-mine .apo-sup-msg__body { border-color: transparent; border-radius: 18px 18px 6px 18px; background: linear-gradient(135deg, rgba(139, 123, 255, .3), rgba(47, 214, 230, .18)); } .apo-sup-msg__who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font-size: .8rem; } .apo-sup-msg__who time { color: var(--faint); } .apo-sup-badge { padding: 1px 7px; border-radius: 99px; background: rgba(47, 214, 230, .15); color: var(--cyan); font-size: .68rem; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .apo-sup-msg__text { color: #e4e6f7; line-height: 1.6; overflow-wrap: anywhere; } .apo-sup-msg__text p { margin: 0 0 8px; } .apo-sup-msg__text p:last-child { margin: 0; } .apo-sup-msg__text a { color: var(--cyan); } .apo-sup-files { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; } .apo-sup-files img { display: block; width: 132px; height: 88px; border: 1px solid var(--line-strong); border-radius: 10px; object-fit: cover; transition: transform .2s var(--ease); } .apo-sup-files a:hover img { transform: scale(1.03); } .sup-typing { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 24px 0; color: var(--faint); font-size: .85rem; } .sup-typing__dots { display: inline-flex; gap: 4px; padding: 8px 10px; border-radius: 99px; background: var(--panel-2); } .sup-typing__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: sup-dot 1.2s infinite ease-in-out; } .sup-typing__dots i:nth-child(2) { animation-delay: .15s; } .sup-typing__dots i:nth-child(3) { animation-delay: .3s; } @keyframes sup-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } } .sup-form--reply { padding: 18px 24px 22px; } .sup-form--reply textarea { min-height: 110px; margin-bottom: 12px; } .sup-attach { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: .9rem; font-weight: 600; cursor: pointer; } .sup-attach:hover { color: var(--star); } .sup-convo__side { position: sticky; top: 100px; display: grid; gap: 14px; } .sup-facts { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); } .sup-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .88rem; } .sup-facts div:last-child { border-bottom: 0; } .sup-facts dt { color: var(--faint); } .sup-facts dd { margin: 0; overflow-wrap: anywhere; text-align: right; color: var(--star); } .sup-side__note { display: flex; gap: 8px; margin: 0; padding: 14px 16px; border-radius: var(--r-md); background: rgba(69, 227, 166, .06); color: var(--muted); font-size: .84rem; line-height: 1.5; } .sup-side__note .icon { flex: none; margin-top: 2px; color: var(--mint); } /* My Account → Support */ .sup-account__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .sup-account__head h2 { margin: 0 0 4px; font-family: var(--f-display); font-size: 1.4rem; } .sup-account__head p { margin: 0; color: var(--muted); } .sup-account .sup-empty { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); } @media (max-width: 1080px) { .sup-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sup-convo { grid-template-columns: 1fr; } .sup-convo__side { position: static; } } @media (max-width: 860px) { .sup-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sup-desk__grid { grid-template-columns: 1fr; } .sup-desk__grid.is-form .sup-compose { order: -1; } .sup-flow { display: none; } } @media (max-width: 640px) { .sup-cards { grid-template-columns: 1fr; } .sup-row { grid-template-columns: 1fr; } .sup-desk { padding: 14px; border-radius: var(--r-lg); } .sup-track { margin-inline: 16px; } .sup-track__step span { font-size: .7rem; } .sup-convo__head, .sup-typing { padding-inline: 16px; } .sup-convo .apo-sup-thread { padding: 16px; } .sup-form--reply { padding: 16px; } .apo-sup-msg { max-width: 100%; } .sup-form__btns { width: 100%; } .sup-form__btns .btn { flex: 1; } } @media (prefers-reduced-motion: reduce) { .apo-sup-msg, .sup-typing__dots i, .sup-card.is-flash { animation: none; } } /* --- Home: soft colour glows behind the sections (teal and violet, very low contrast) --- */ .home .catalogue, .home .bundles, .home .spotlights, .home .features, .home .benefits { position: relative; isolation: isolate; } .home .catalogue::before, .home .bundles::before, .home .spotlights::before, .home .features::before, .home .benefits::before { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(40px); opacity: .9; } /* ---below is new section#catalogue --- */ section#catalogue { background: #000000; } /* Scroll-scaled sections base setup */ .section.catalogue, .section.bundles { will-change: transform, border-radius; transform-origin: center top; transition: transform 0.05s linear, border-radius 0.05s linear; overflow: hidden; background:#1e1e2e; } /* Bundles header opacity setup */ #bundles .section-head { will-change: opacity; transition: opacity 0.05s linear; } .home .benefits::before { left: 50%; top: 0; width: 60%; height: 80%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(139, 123, 255, .2), transparent); } .home .benefits::after { left: 50%; top: 0; width: 70%; height: 90%; transform: translateX(-80%); background: radial-gradient(closest-side, rgba(139, 123, 255, .2), transparent); } /* .home .catalogue::before { left: 4%; top: 22%; width: 62%; height: 70%; background: radial-gradient(closest-side, rgba(47, 214, 230, .36), rgba(47, 214, 230, .12) 55%, transparent); } */ .home .catalogue::before{ left: 50%; top: 0; width: 70%; height: 90%; transform: translateX(-80%); background: radial-gradient(closest-side, rgba(139, 123, 255, .2), transparent); } .home .catalogue::after { content: ""; position: absolute; z-index: -1; pointer-events: none; right: 4%; top: 40%; width: 42%; height: 55%; border-radius: 50%; filter: blur(40px); background: radial-gradient(closest-side, rgba(139, 123, 255, .3), transparent); } .home .bundles::before { left: 50%; top: 18%; width: 78%; height: 78%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(47, 214, 230, .3), rgba(139, 123, 255, .14) 55%, transparent); } .home .spotlights::before { right: 0; top: 10%; width: 55%; height: 80%; background: radial-gradient(closest-side, rgba(47, 214, 230, .26), transparent); } .home .features::before { left: 0; top: 15%; width: 55%; height: 75%; background: radial-gradient(closest-side, rgba(139, 123, 255, .28), transparent); } @media (max-width: 760px) { .home .catalogue::before, .home .bundles::before { width: 100%; left: 0; transform: none; } .home .catalogue::after { display: none; } } /* --- Landing pages: article + sticky sidebar ------------------------------ */ .landing-hero__cta { justify-content: center; margin-top: 28px; } .landing-hero__title { max-width: 22ch; } .landing__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 4vw, 64px); align-items: start; } .landing__body { max-width: 760px; } .landing__body > :first-child { margin-top: 0; } .landing__body h2 { scroll-margin-top: 110px; padding-top: .2em; font-family: var(--f-display); letter-spacing: -.02em; } .landing__body ul li::marker { color: var(--cyan); } .landing__body table, .doc-prose table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); font-size: .95rem; } .landing__body th, .landing__body td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .landing__body thead th { background: var(--panel); color: #fff; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; } .landing__body tbody tr:last-child td { border-bottom: 0; } .landing__body tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .015); } .landing__body td:first-child { color: #fff; font-weight: 600; } .landing__body .note { padding: 14px 18px; border-left: 3px solid var(--cyan); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: rgba(47, 214, 230, .07); color: #c9d3e0; font-size: .9rem; } .landing__side { position: sticky; top: 100px; display: grid; gap: 14px; } .side-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--panel), var(--deep)); } .side-card__title { margin: 0 0 12px; color: var(--faint); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .side-card--product { display: grid; gap: 8px; } .side-card__cover { display: block; margin: -8px -8px 6px; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 16 / 9; background: var(--deep); } .side-card__cover img, .side-card__cover .cover { width: 100%; height: 100%; object-fit: cover; } .side-card__kicker { margin: 0; color: var(--cyan); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .side-card__name { margin: 0; font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; } .side-card__name a { color: #fff; text-decoration: none; } .side-card__price { margin: 0 0 6px; } .side-card .btn--block + .btn--block { margin-top: 2px; } .side-links { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; } .side-links a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-inline: -10px; border-radius: var(--r-sm); color: #dfe2ff; font-size: .94rem; text-decoration: none; transition: background .2s, color .2s; } .side-links a .icon { flex: none; color: var(--muted); transition: color .2s; } .side-links a:hover { background: rgba(255, 255, 255, .05); color: #fff; } .side-links a:hover .icon { color: var(--cyan); } .side-toc ol { list-style: none; counter-reset: toc; display: grid; gap: 2px; margin: 0; padding: 0; } .side-toc li { counter-increment: toc; } .side-toc a { display: flex; gap: 10px; padding: 7px 10px; margin-inline: -10px; border-radius: var(--r-sm); color: var(--muted); font-size: .92rem; text-decoration: none; border-left: 2px solid transparent; } .side-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--faint); font-size: .78rem; font-variant-numeric: tabular-nums; padding-top: 2px; } .side-toc a:hover, .side-toc a.is-on { color: #fff; background: rgba(255, 255, 255, .04); } .side-toc a.is-on { border-left-color: var(--cyan); } .side-card--guides { margin-top: 0; } /* Footer with a Solutions column */ .site-footer__grid--5 { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; } @media (max-width: 1080px) { .landing__grid { grid-template-columns: minmax(0, 1fr); } .landing__side { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .side-toc { display: none; } } @media (max-width: 1200px) { .site-footer__grid--5 { grid-template-columns: 1fr 1fr 1fr; } .site-footer__grid--5 .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 760px) { .site-footer__grid--5 { grid-template-columns: 1fr 1fr; } .landing__body table { display: block; overflow-x: auto; } .landing__body th, .landing__body td { min-width: 140px; padding: 10px 12px; } } .product-guides { margin: 35px 0px 0px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(120deg, rgba(139, 123, 255, .08), rgba(47, 214, 230, .05)); } .product-guides__title { margin: 0 0 10px; color: var(--faint); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .product-guides ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0; padding: 0; } .product-guides a { display: flex; align-items: center; gap: 10px; height: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 255, 255, .02); color: #e4e7ff; font-weight: 600; font-size: .94rem; text-decoration: none; transition: border-color .2s, background .2s; } .product-guides a span { flex: 1; } .product-guides a .icon { flex: none; color: var(--cyan); } .product-guides a .icon:last-child { color: var(--faint); } .product-guides a:hover { border-color: rgba(47, 214, 230, .45); background: rgba(255, 255, 255, .05); } /* Header: logo left, menu centred on the page, tools right (desktop). */ @media (min-width: 1021px) { .masthead__in { display: grid; grid-template-columns: 1fr auto 1fr; } .masthead__in > .brand { justify-self: start; } .masthead__in > .nav { flex: none; justify-self: center; } .masthead__in > .masthead__tools { justify-self: end; margin-left: 0; } } .landing__body td.is-yes { color: var(--mint); font-weight: 600; } .landing__body td.is-yes::before { content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: rgba(69, 227, 166, .16); font-size: .7rem; vertical-align: 1px; } .landing__body td.is-no { color: var(--faint); } .section--intro, .benefits { padding-block: 0; background: #1e1e2e; } .section--intro { border-top-left-radius: 50px; border-top-right-radius: 50px; } /* The wrapper only scales and rounds while scrolling (main.js); its own background showed as a second corner behind the card. */ .intro-benefits-group.section--sunken { background: none; border-block: 0; overflow: clip; } /* ---------- Screenshot lightbox (product gallery) ---------- */ .gallery__stage img[data-gallery-stage] { cursor: zoom-in; } .gallery__enlarge { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(13, 15, 30, .72); backdrop-filter: blur(10px); color: var(--star); cursor: pointer; opacity: .85; transform: translateY(0); transition: opacity .2s, transform .2s var(--ease), background .2s; } .gallery__stage:hover .gallery__enlarge, .gallery__enlarge:focus-visible { opacity: 1; transform: translateY(-2px); background: rgba(139, 123, 255, .35); } html.has-lightbox { overflow: hidden; } .lightbox { position: fixed; inset: 0; z-index: 100000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: var(--star); background: rgba(5, 6, 14, .9); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); opacity: 0; transition: opacity .22s var(--ease); } .lightbox[hidden] { display: none; } .lightbox.is-open { opacity: 1; } .lightbox__bar { display: flex; align-items: center; gap: 8px; padding: 14px clamp(14px, 3vw, 28px); } .lightbox__count { margin-right: auto; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; } .lightbox__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(255, 255, 255, .06); color: var(--star); cursor: pointer; transition: background .2s, border-color .2s, transform .2s var(--ease); } .lightbox__btn:hover { background: rgba(139, 123, 255, .25); border-color: rgba(139, 123, 255, .6); } .lightbox__btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .lightbox__btn[aria-pressed="true"] { background: rgba(47, 214, 230, .18); border-color: rgba(47, 214, 230, .6); } .lightbox__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 clamp(12px, 7vw, 96px); overflow: hidden; touch-action: none; } .lightbox__frame { position: relative; max-width: 100%; max-height: 100%; overflow: hidden; border-radius: var(--r-md); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px var(--line); } .lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); width: auto; height: auto; cursor: zoom-in; user-select: none; -webkit-user-drag: none; transform-origin: 50% 50%; transform: scale(1); transition: transform .3s var(--ease), opacity .2s; } .lightbox.is-zoomed .lightbox__img { cursor: zoom-out; } .lightbox.is-panning .lightbox__img { transition: opacity .2s; cursor: grabbing; } .lightbox__img.is-loading { opacity: .35; } .lightbox__nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); } .lightbox__nav--prev { left: clamp(10px, 2vw, 28px); } .lightbox__nav--next { right: clamp(10px, 2vw, 28px); } .lightbox__nav[hidden] { display: none; } .lightbox.is-zoomed .lightbox__nav { opacity: 0; pointer-events: none; } .lightbox__foot { display: grid; justify-items: center; gap: 10px; padding: 12px clamp(14px, 3vw, 28px) 18px; } .lightbox__hint { margin: 0; color: var(--faint); font-size: .82rem; transition: opacity .3s; } .lightbox.is-zoomed .lightbox__hint { opacity: 0; } .lightbox__thumbs { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 2px; scrollbar-width: none; } .lightbox__thumbs::-webkit-scrollbar { display: none; } .lightbox__thumb { flex: none; width: 84px; padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden; background: var(--deep); opacity: .5; cursor: pointer; transition: opacity .2s, border-color .2s; } .lightbox__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center top; } .lightbox__thumb:hover { opacity: .85; } .lightbox__thumb.is-on { opacity: 1; border-color: var(--cyan); } @media (max-width: 680px) { .lightbox__stage { padding: 0 8px; } .lightbox__nav { display: none; } .lightbox__img { max-height: calc(100dvh - 190px); } .lightbox__thumb { width: 64px; } } @media (prefers-reduced-motion: reduce) { .lightbox, .lightbox__img { transition: none; } }