/* ========================================================================== Dragon Booster — landing page Self-contained stylesheet. Loaded only on /booster. Colour logic (deliberate, not decorative): accent (gold) = Dragon's own colour — leads the page: CTAs, active states, the optimised route, every "good" readout heat (ember) = secondary warmth only — live indicators, glow tails, the tail of the fire gradient. Never carries a CTA. ash = the un-optimised "before" state: drained, colourless Two themes. Dark is the default; `[data-theme="light"]` on flips the surface tokens only — the accent stays Dragon gold in both, with a darkened `--accent-txt` for light backgrounds where gold-on-white would fail contrast. The app and phone mockups are deliberately NOT themed: they are pictures of a dark desktop application and must look the same either way. ========================================================================== */ /* --------------------------------------------------------------- fonts --- */ @font-face { font-family: "peyda"; font-style: normal; font-weight: 400; font-display: swap; src: url("/homepage/fonts/peyda/Peyda-Regular.woff2") format("woff2"), url("/homepage/fonts/peyda/Peyda-Regular.woff") format("woff"); } @font-face { font-family: "peyda"; font-style: normal; font-weight: 600; font-display: swap; src: url("/homepage/fonts/peyda/Peyda-Medium.woff2") format("woff2"), url("/homepage/fonts/peyda/Peyda-Medium.woff") format("woff"); } @font-face { font-family: "peyda"; font-style: normal; font-weight: 700; font-display: swap; src: url("/homepage/fonts/peyda/Peyda-Bold.woff2") format("woff2"), url("/homepage/fonts/peyda/Peyda-Bold.woff") format("woff"); } @font-face { font-family: "peyda"; font-style: normal; font-weight: 800; font-display: swap; src: url("/homepage/fonts/peyda/Peyda-ExtraBold.woff2") format("woff2"), url("/homepage/fonts/peyda/Peyda-ExtraBold.woff") format("woff"); } /* Dragon's parent-brand display face — used only on the Dragon lockup. */ @font-face { font-family: "kalameh"; font-style: normal; font-weight: 700; font-display: swap; src: url("/homepage/fonts/kalameh/Kalameh-Bold.woff") format("woff"); } /* ------------------------------------------------------- tokens: dark --- */ .bst { --void: #0B0A09; --soot: #121110; --panel: #1A1715; --line: rgba(242, 237, 230, .09); --line-2: rgba(242, 237, 230, .16); --bone: #F2EDE6; --ash: #8E867D; /* 5.4:1 on --void — body-safe */ --ash-deep: #7A736C; /* 4.1:1 — micro-labels only */ /* primary — Dragon gold */ --accent: #F0AE2C; --accent-hot: #FFC24F; --accent-txt: #F0AE2C; /* gold as text/icon colour */ --accent-ink: #241E12; /* text sitting on gold */ --accent-dim: rgba(240, 174, 44, .13); --accent-line: rgba(240, 174, 44, .34); --accent-glow: rgba(240, 174, 44, .40); /* secondary — ember heat */ --heat: #E01E2B; --heat-hot: #FF3B4E; --heat-glow: rgba(224, 30, 43, .22); --fire: linear-gradient(115deg, #FFC24F 0%, #F0AE2C 46%, #E01E2B 128%); /* surfaces */ --fill: rgba(242, 237, 230, .03); --fill-2: rgba(242, 237, 230, .05); --surface-1: rgba(18, 17, 16, .70); --surface-2: rgba(26, 23, 21, .80); --surface-3: rgba(18, 17, 16, .55); --card-top: rgba(26, 23, 21, .85); --card-bot: rgba(18, 17, 16, .60); --track: rgba(242, 237, 230, .07); --dot: rgba(242, 237, 230, .13); --nav-bg: rgba(11, 10, 9, .82); --old-path: #4A443E; --shadow: 0 26px 60px -30px rgba(0, 0, 0, .9); --glow-a: rgba(240, 174, 44, .26); --glow-b: rgba(224, 30, 43, .22); --final-bg: radial-gradient(ellipse at 50% 130%, rgba(240, 174, 44, .30), transparent 62%), radial-gradient(ellipse at 50% -20%, rgba(224, 30, 43, .16), transparent 55%), linear-gradient(180deg, #171413, #0E0C0B); --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Consolas, monospace; --radius: 16px; --radius-lg: 24px; --wrap: 1180px; --ease: cubic-bezier(.22, .68, .36, 1); } /* ------------------------------------------------------ tokens: light --- */ [data-theme="light"] .bst { --void: #FAF7F1; --soot: #F3EDE3; --panel: #FFFFFF; --line: rgba(58, 52, 44, .14); --line-2: rgba(58, 52, 44, .26); --bone: #26221D; --ash: #625B53; /* 5.9:1 on --void */ --ash-deep: #857D74; /* 3.6:1 — micro-labels only */ --accent-txt: #9A6B06; /* 4.6:1 — gold itself is unreadable on white */ --accent-hot: #E0A226; --accent-dim: rgba(240, 174, 44, .17); --accent-line: rgba(184, 128, 18, .42); --accent-glow: rgba(240, 174, 44, .45); --heat: #C4141F; --heat-hot: #E01E2B; --heat-glow: rgba(224, 30, 43, .13); --fire: linear-gradient(115deg, #D99512 0%, #B8800F 46%, #C4141F 128%); --fill: rgba(58, 52, 44, .035); --fill-2: rgba(58, 52, 44, .07); --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #FFFFFF; --card-top: #FFFFFF; --card-bot: #FBF7F0; --track: rgba(58, 52, 44, .10); --dot: rgba(58, 52, 44, .16); --nav-bg: rgba(250, 247, 241, .86); --old-path: #B7B0A6; --shadow: 0 22px 48px -28px rgba(58, 52, 44, .35); --glow-a: rgba(240, 174, 44, .30); --glow-b: rgba(224, 30, 43, .10); --final-bg: radial-gradient(ellipse at 50% 130%, rgba(240, 174, 44, .32), transparent 62%), radial-gradient(ellipse at 50% -20%, rgba(224, 30, 43, .10), transparent 55%), linear-gradient(180deg, #FFFDF9, #F6EFE3); } /* ---------------------------------------------------------------- base --- */ /* This stylesheet only ever loads on the Booster page, so plain `html` is safe. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .bst { background: var(--void); color: var(--bone); font-family: "peyda", "vazir", system-ui, sans-serif; font-size: 16px; line-height: 1.85; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .bst *, .bst *::before, .bst *::after { box-sizing: border-box; } .bst h1, .bst h2, .bst h3, .bst h4, .bst p, .bst ul, .bst ol, .bst figure { margin: 0; padding: 0; } .bst ul, .bst ol { list-style: none; } .bst img, .bst svg { display: block; max-width: 100%; } .bst a { color: inherit; text-decoration: none; } .bst button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .bst :focus-visible { outline: 2px solid var(--accent-txt); outline-offset: 3px; border-radius: 6px; } .bst-skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200; padding: 12px 20px; background: var(--accent); color: var(--accent-ink); font-weight: 700; } .bst-skip:focus { inset-inline-start: 12px; top: 12px; } /* -------------------------------------------------------------- layout --- */ .bst-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; } .bst-section { position: relative; padding-block: clamp(64px, 9vw, 120px); /* clears the fixed nav when an in-page anchor is followed */ scroll-margin-top: 88px; } .bst-section--tight { padding-block: clamp(48px, 6vw, 80px); } /* ---------------------------------------------------------------- type --- */ .bst-display { font-size: clamp(2.1rem, 5.4vw, 3.9rem); font-weight: 800; line-height: 1.26; letter-spacing: -.015em; text-wrap: balance; } .bst-h2 { font-size: clamp(1.55rem, 3.4vw, 2.45rem); font-weight: 800; line-height: 1.4; letter-spacing: -.01em; text-wrap: balance; } .bst-h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.6; } .bst-lead { font-size: clamp(.95rem, 1.35vw, 1.08rem); line-height: 2.05; color: var(--ash); max-width: 56ch; } .bst-fire { background: var(--fire); -webkit-background-clip: text; background-clip: text; color: transparent; } .bst-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } /* Section eyebrow — a hairline rule plus a small label. */ .bst-eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-txt); margin-bottom: 18px; } .bst-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent-txt); flex: none; } .bst-head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 60px); } .bst-head .bst-lead { margin-top: 16px; } .bst-head--center { margin-inline: auto; text-align: center; } .bst-head--center .bst-eyebrow { justify-content: center; } .bst-head--center .bst-lead { margin-inline: auto; } /* ------------------------------------------------------------- surfaces --- */ .bst-panel { position: relative; background: linear-gradient(180deg, var(--card-top) 0%, var(--card-bot) 100%); border: 1px solid var(--line); border-radius: var(--radius-lg); } /* 1px top light-catch, the only "material" trick used site-wide */ .bst-panel::before { content: ""; position: absolute; inset-inline: 18%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); pointer-events: none; } .bst-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; } /* ------------------------------------------------------------- buttons --- */ .bst-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: 12px; font-weight: 700; font-size: .98rem; line-height: 1.4; border: 1px solid transparent; transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .25s var(--ease); white-space: nowrap; } .bst-btn:hover { transform: translateY(-2px); } .bst-btn:active { transform: translateY(0); } .bst-btn svg { width: 19px; height: 19px; flex: none; } /* Primary is gold — it carries every conversion action on the page. */ .bst-btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 34px -12px var(--accent-glow); } .bst-btn--primary:hover { background: var(--accent-hot); box-shadow: 0 16px 46px -12px var(--accent-glow); } .bst-btn--ghost { border-color: var(--line-2); color: var(--bone); background: var(--fill); } .bst-btn--ghost:hover { border-color: var(--accent-line); color: var(--accent-txt); background: var(--accent-dim); } /* Ember variant — reserved, not used by any default CTA. */ .bst-btn--ember { background: var(--heat); color: #fff; box-shadow: 0 10px 34px -14px rgba(224, 30, 43, .8); } .bst-btn--ember:hover { background: var(--heat-hot); } .bst-btn--sm { padding: 10px 18px; font-size: .875rem; } .bst-btn--block { width: 100%; } .bst-btn--disabled, .bst-btn[aria-disabled="true"] { background: var(--fill-2); color: var(--ash-deep); border-color: var(--line); box-shadow: none; cursor: not-allowed; pointer-events: none; } .bst-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* ----------------------------------------------------------------- nav --- */ .bst-nav { position: fixed; inset-inline: 0; top: 0; z-index: 90; transition: background .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid transparent; } .bst-nav.is-stuck { background: var(--nav-bg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--line); } .bst-nav__bar { display: flex; align-items: center; gap: 14px; height: 82px; transition: height .3s var(--ease); } .bst-nav.is-stuck .bst-nav__bar { height: 64px; } .bst-lockup { display: flex; align-items: center; gap: 11px; flex: none; } .bst-lockup__coin { width: 38px; height: 38px; -o-object-fit: contain; object-fit: contain; transition: width .3s var(--ease), height .3s var(--ease); } .bst-nav.is-stuck .bst-lockup__coin { width: 32px; height: 32px; } .bst-lockup__txt { line-height: 1.15; } .bst-lockup__parent { display: block; font-family: "kalameh", "peyda", sans-serif; font-size: .72rem; color: var(--accent-txt); letter-spacing: .04em; } .bst-lockup__name { display: block; font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; direction: ltr; } .bst-nav__links { display: none; align-items: center; gap: 2px; /* No auto-margin here — the links sit right next to the logo (RTL start side), and only .bst-nav__tools pushes itself to the far end. */ } .bst-nav__link { padding: 8px 12px; border-radius: 10px; font-size: .92rem; font-weight: 600; color: var(--ash); transition: color .18s var(--ease), background .18s var(--ease); } .bst-nav__link:hover { color: var(--bone); background: var(--fill-2); } .bst-nav__cta, .bst-nav__alt, .bst-nav__login { display: none; } .bst-drawer .bst-btn + .bst-btn { margin-top: 10px; } /* Icon-only account/login button — visible at every width so there is always a way into the panel, even before the labelled version fits. */ .bst-nav__account { color: var(--bone); } .bst-nav__account:hover { color: var(--accent-txt); border-color: var(--accent-line); background: var(--accent-dim); } .bst-nav__account svg { width: 18px; height: 18px; } .bst-drawer__link--account { display: flex; align-items: center; gap: 9px; color: var(--accent-txt); font-weight: 700; border-bottom-color: var(--accent-line); } .bst-drawer__link--account svg { width: 17px; height: 17px; } /* theme switch */ .bst-theme { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border: 1px solid var(--line-2); border-radius: 12px; color: var(--bone); transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); } .bst-theme:hover { color: var(--accent-txt); border-color: var(--accent-line); background: var(--accent-dim); } /* Two-class selectors so these beat the `.bst svg { display: block }` base rule. */ .bst-theme svg { width: 19px; height: 19px; } .bst-theme .bst-theme__sun { display: none; } [data-theme="light"] .bst-theme .bst-theme__sun { display: block; } [data-theme="light"] .bst-theme .bst-theme__moon { display: none; } .bst-nav__burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border: 1px solid var(--line-2); border-radius: 12px; color: var(--bone); } .bst-nav__burger svg { width: 20px; height: 20px; } .bst-nav__tools { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; } .bst-drawer { display: none; padding: 8px 0 22px; border-top: 1px solid var(--line); background: var(--void); } .bst-drawer.is-open { display: block; } .bst-drawer__link { display: block; padding: 13px 4px; font-weight: 600; color: var(--ash); border-bottom: 1px solid var(--line); } .bst-drawer__link:hover { color: var(--bone); } .bst-drawer .bst-btn { margin-top: 18px; } /* ---------------------------------------------------------------- hero --- */ .bst-hero { position: relative; padding-top: clamp(118px, 15vw, 168px); padding-bottom: clamp(56px, 7vw, 96px); isolation: isolate; } .bst-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; } /* faint dot grid — hero only, so it reads as "signal field" not wallpaper */ .bst-hero__grid { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 60% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 80% 60% at 60% 0%, #000 0%, transparent 72%); opacity: .5; } .bst-hero__glow-a { width: 660px; height: 660px; top: -230px; inset-inline-end: -190px; background: var(--glow-a); } .bst-hero__glow-b { width: 460px; height: 460px; bottom: -240px; inset-inline-start: -150px; background: var(--glow-b); } .bst-hero__inner { display: grid; gap: clamp(40px, 6vw, 60px); align-items: center; } .bst-tag { display: inline-flex; align-items: center; gap: 9px; padding: 6px 16px 6px 7px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-dim); font-size: .8rem; font-weight: 600; color: var(--ash); margin-bottom: 24px; } .bst-tag img { width: 22px; height: 22px; -o-object-fit: contain; object-fit: contain; } .bst-tag b { color: var(--accent-txt); font-weight: 700; } /* Product-launch hero: the name leads, the promise sits under it. */ .bst-hero__title { margin-bottom: 22px; } .bst-hero__name { display: block; font-size: clamp(2.35rem, 6vw, 4.3rem); line-height: 1.14; letter-spacing: -.025em; } .bst-hero__latin { display: block; font-family: var(--mono); font-size: clamp(.68rem, 1.1vw, .82rem); font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--accent-txt); direction: ltr; margin: 10px 0 12px; } .bst-hero__claim { display: block; font-size: clamp(1.3rem, 3vw, 2.15rem); line-height: 1.45; letter-spacing: -.01em; } .bst-hero__lead { margin-bottom: 32px; } .bst-hero .bst-actions { margin-bottom: 26px; } .bst-plats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .bst-plat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: .82rem; font-weight: 600; color: var(--ash); background: var(--fill); } .bst-plat svg { width: 16px; height: 16px; color: var(--bone); } .bst-plat img { width: 17px; height: 17px; -o-object-fit: contain; object-fit: contain; border-radius: 4px; } /* ---------------------------------------------------- telemetry strip --- */ .bst-telemetry { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); overflow: hidden; } .bst-telemetry__cell { padding: 18px 20px; border-inline-start: 1px solid var(--line); border-top: 1px solid var(--line); } .bst-telemetry__cell:nth-child(-n + 2) { border-top: 0; } .bst-telemetry__cell:nth-child(odd) { border-inline-start: 0; } .bst-telemetry__k { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ash-deep); display: block; margin-bottom: 6px; } .bst-telemetry__v { font-family: var(--mono); font-size: 1.3rem; font-weight: 600; color: var(--bone); direction: ltr; font-variant-numeric: tabular-nums; } .bst-telemetry__v small { font-size: .62em; color: var(--ash); margin-inline-start: 2px; } .bst-telemetry__v--gold { color: var(--accent-txt); } /* ========================================================================== App + phone mockups — intentionally NOT themed. These are pictures of a dark desktop application, so every colour here is a literal. ========================================================================== */ .bst-stage { position: relative; } .bst-stage::after { content: ""; position: absolute; inset: 12% 8% -6%; background: radial-gradient(ellipse at center, rgba(240, 174, 44, .30), transparent 68%); filter: blur(58px); z-index: -1; } /* The real client screenshot, framed like the product-mockup language used elsewhere on the page (same border/shadow as the WoW gallery figures). */ .bst-shot { border: 1px solid rgba(242, 237, 230, .16); border-radius: 14px; overflow: hidden; background: #0C0908; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95); } .bst-shot img { display: block; width: 100%; height: auto; } .bst-phone { width: 236px; margin-inline: auto; border: 8px solid #1F1B18; border-radius: 34px; background: #0D0B0A; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .95); overflow: hidden; position: relative; } .bst-phone__notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 60px; height: 5px; border-radius: 99px; background: #221E1B; z-index: 1; } .bst-phone img { display: block; width: 100%; height: auto; } /* ------------------------------------------------------- route diagram --- */ /* The page's signature: the same two endpoints, two routes, drawn to scale. */ .bst-route { position: relative; } .bst-route svg { width: 100%; height: auto; overflow: visible; } .bst-route__legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; } .bst-route__key { display: inline-flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--ash); } .bst-route__key i { width: 22px; height: 2px; border-radius: 2px; flex: none; } .bst-route__key--old i { background: var(--old-path); } .bst-route__key--new i { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .bst-path-old { stroke: var(--old-path); stroke-width: 2; fill: none; stroke-dasharray: 6 7; } /* Stroke is set inline on the element — each instance owns a unique gradient id. */ .bst-path-new { stroke-width: 2.5; fill: none; stroke-linecap: round; } .bst-node { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1.5; } .bst-node--hot { stroke: var(--accent); stroke-width: 2; } .bst-node-core { fill: var(--bone); } .bst-node-hot { fill: var(--accent); } .bst-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; fill: var(--ash); } .bst-lbl--hot { fill: var(--accent-txt); } .bst-lbl--bone { fill: var(--bone); } .bst-packet { fill: #FFC24F; filter: drop-shadow(0 0 5px #F0AE2C); } /* --------------------------------------------------------------- steps --- */ .bst-steps { display: grid; gap: 20px; counter-reset: bst-hop; } .bst-step { position: relative; padding: 28px 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--card-top), var(--card-bot)); transition: border-color .25s var(--ease), transform .25s var(--ease); } .bst-step:hover { border-color: var(--accent-line); transform: translateY(-3px); } /* Numbering earns its place here: a route is an ordered list of hops. */ .bst-step__n { counter-increment: bst-hop; font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; color: var(--accent-txt); display: block; margin-bottom: 14px; } .bst-step__n::before { content: "HOP 0" counter(bst-hop); } .bst-step h3 { margin-bottom: 10px; } .bst-step p { font-size: .92rem; color: var(--ash); line-height: 1.95; } /* ------------------------------------------------------ before / after --- */ .bst-compare { display: grid; gap: 18px; } .bst-col { padding: 30px 26px; border-radius: var(--radius-lg); border: 1px solid var(--line); } .bst-col--before { background: var(--surface-1); } .bst-col--after { background: radial-gradient(ellipse at 80% 0%, var(--accent-dim), transparent 62%), var(--surface-2); border-color: var(--accent-line); } /* Persian label — stays in the body face; the mono stack has no Persian. */ .bst-col__k { font-size: .88rem; font-weight: 700; margin-bottom: 18px; color: var(--ash); } .bst-col--after .bst-col__k { color: var(--accent-txt); } .bst-col li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: .95rem; border-top: 1px solid var(--line); } .bst-col li:first-child { border-top: 0; } .bst-col--before li { color: var(--ash); } .bst-col--after li { color: var(--bone); } .bst-col li svg { width: 17px; height: 17px; flex: none; margin-top: 7px; } .bst-col--before li svg { color: var(--ash-deep); } .bst-col--after li svg { color: var(--accent-txt); } /* ----------------------------------------------------- featured: WoW --- */ .bst-wow { display: grid; gap: clamp(28px, 4vw, 44px); padding: clamp(30px, 4vw, 46px); align-items: center; overflow: hidden; } .bst-wow__art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 190px; } .bst-wow__art::after { content: ""; position: absolute; inset: 12%; background: radial-gradient(circle, var(--accent-glow), transparent 68%); filter: blur(46px); z-index: 0; } .bst-wow__crest { position: relative; z-index: 1; width: clamp(150px, 20vw, 224px); height: auto; border-radius: 30px; } .bst-wow__title { margin-bottom: 14px; } .bst-wow p { font-size: .95rem; color: var(--ash); line-height: 2; } .bst-wow__points { display: grid; gap: 10px; margin-top: 22px; } .bst-wow__points li { display: flex; align-items: flex-start; gap: 11px; font-size: .92rem; color: var(--bone); } .bst-wow__points svg { width: 16px; height: 16px; flex: none; margin-top: 7px; color: var(--accent-txt); } .bst-wow__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .bst-wow__stat { padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--fill); min-width: 96px; } .bst-wow__stat span { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; color: var(--ash-deep); } .bst-wow__stat b { font-family: var(--mono); font-size: .95rem; font-weight: 600; color: var(--accent-txt); direction: ltr; display: block; } /* --------------------------------------------------------------- games --- */ .bst-marquee { position: relative; /* Required: the track is `width: max-content`. A mask clips paint but not layout, so without this the document grows several thousand px wide and RTL centring pushes every container off-screen. */ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .bst-marquee + .bst-marquee { margin-top: 14px; } .bst-marquee__track { display: flex; direction: ltr; gap: 14px; width: -moz-max-content; width: max-content; animation: bst-slide 46s linear infinite; } .bst-marquee--rev .bst-marquee__track { animation-direction: reverse; animation-duration: 58s; } .bst-marquee:hover .bst-marquee__track { animation-play-state: paused; } .bst-chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: .9rem; font-weight: 600; color: var(--ash); white-space: nowrap; transition: color .2s var(--ease), border-color .2s var(--ease); } .bst-chip:hover { color: var(--bone); border-color: var(--accent-line); } .bst-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } .bst-chip--lead { border-color: var(--accent-line); background: var(--accent-dim); color: var(--bone); font-weight: 700; } /* --------------------------------------------------------------- plans --- */ .bst-plans { display: grid; gap: 20px; align-items: start; } .bst-plan { position: relative; display: flex; flex-direction: column; padding: 32px 26px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card-top), var(--card-bot)); transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease); } .bst-plan:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: var(--shadow); } .bst-plan--featured { border-color: var(--accent-line); background: radial-gradient(ellipse at 50% 0%, var(--accent-dim), transparent 60%), linear-gradient(180deg, var(--card-top), var(--card-bot)); box-shadow: 0 26px 70px -34px var(--accent-glow); } .bst-plan__badge { position: absolute; top: -13px; inset-inline-start: 50%; transform: translateX(50%); padding: 5px 16px; border-radius: 999px; background: var(--fire); color: #FFF7E6; font-size: .74rem; font-weight: 700; white-space: nowrap; } .bst-plan__name { font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; direction: ltr; text-align: start; } .bst-plan__fa { font-size: .84rem; color: var(--ash); margin-top: 2px; } .bst-plan__tag { font-size: .88rem; color: var(--ash); margin-top: 10px; } .bst-plan__price { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 6px; padding-top: 20px; border-top: 1px solid var(--line); } /* Body face, not mono: a monospace comma sits in its own wide cell and reads as "449 , 000". Tabular figures still keep the three cards aligned. */ .bst-plan__num { font-size: 2.05rem; font-weight: 800; color: var(--bone); letter-spacing: -.02em; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .bst-plan--featured .bst-plan__num { color: var(--accent-txt); } .bst-plan__cur { font-size: .88rem; color: var(--ash); } .bst-plan__per { font-size: .8rem; color: var(--ash-deep); margin-bottom: 24px; } .bst-plan__feats { display: grid; gap: 11px; margin-bottom: 26px; } .bst-plan__feats li { display: flex; align-items: flex-start; gap: 11px; font-size: .9rem; color: var(--ash); line-height: 1.7; } .bst-plan__feats svg { width: 16px; height: 16px; flex: none; margin-top: 6px; color: var(--accent-txt); } .bst-plan--featured .bst-plan__feats li { color: var(--bone); } .bst-plan__foot { margin-top: auto; display: grid; gap: 10px; } .bst-plan__try { text-align: center; font-size: .82rem; color: var(--ash); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ash-deep); padding: 4px; } .bst-plan__try:hover { color: var(--accent-txt); text-decoration-color: var(--accent-txt); } /* Disclaimers live in here — they must stay comfortably readable. */ .bst-note { margin-top: 26px; font-size: .85rem; color: var(--ash); line-height: 1.95; max-width: 72ch; } /* ----------------------------------------------------------- platforms --- */ .bst-plats-grid { display: grid; gap: 20px; } .bst-plat-card { display: flex; flex-direction: column; gap: 24px; padding: 34px 28px; overflow: hidden; } .bst-plat-card__head { display: flex; align-items: center; gap: 14px; } .bst-plat-card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; border: 1px solid var(--accent-line); background: var(--accent-dim); flex: none; } .bst-plat-card__icon svg { width: 24px; height: 24px; color: var(--accent-txt); } .bst-plat-card h3 { font-size: 1.2rem; } .bst-plat-card__req { font-size: .82rem; color: var(--ash); margin-top: 2px; } .bst-plat-card p { font-size: .93rem; color: var(--ash); } .bst-plat-card__art { position: relative; margin-top: auto; padding-top: 10px; display: flex; justify-content: center; align-items: flex-end; } /* ============================================================== download === The app is the product, so this section is deliberately the heaviest block on the page: its own glow, full-width band, oversized cards and mockups. ========================================================================== */ .bst-dl { position: relative; isolation: isolate; border-block: 1px solid var(--line); background: radial-gradient(ellipse 70% 90% at 50% 0%, var(--accent-dim), transparent 70%), var(--soot); } .bst-dl__glow { position: absolute; inset-inline: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); z-index: 1; } .bst-dl__cards { display: grid; gap: 20px; margin-bottom: 26px; } .bst-dl__card { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3.4vw, 38px); border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card-top), var(--card-bot)); overflow: hidden; transition: border-color .28s var(--ease), box-shadow .28s var(--ease); } .bst-dl__card:hover { border-color: var(--accent-line); box-shadow: 0 30px 70px -36px var(--accent-glow); } .bst-dl__head { display: flex; align-items: center; gap: 15px; margin-bottom: 16px; } .bst-dl__icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; border: 1px solid var(--accent-line); background: var(--accent-dim); color: var(--accent-txt); flex: none; } .bst-dl__icon svg { width: 27px; height: 27px; } .bst-dl__card h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 800; } .bst-dl__req { font-size: .82rem; color: var(--ash); margin-top: 3px; } .bst-dl__blurb { font-size: .93rem; color: var(--ash); line-height: 1.95; margin-bottom: 22px; } .bst-dl__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .bst-dl__pill { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--fill); color: var(--ash); direction: ltr; } .bst-dl__art { margin-top: auto; padding-top: 30px; display: flex; justify-content: center; align-items: flex-end; } /* install steps */ .bst-dl__how { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; counter-reset: bst-inst; } .bst-dl__step { background: var(--surface-3); padding: 22px 24px; display: flex; gap: 15px; align-items: flex-start; } .bst-dl__step::before { counter-increment: bst-inst; content: counter(bst-inst); flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: .8rem; font-weight: 700; margin-top: 3px; } .bst-dl__step h4 { font-size: .98rem; font-weight: 700; margin-bottom: 3px; } .bst-dl__step p { font-size: .86rem; color: var(--ash); line-height: 1.8; } /* ======================================================= split tunneling === Two lanes leaving one device: the games you pick go through Dragon, the rest stays on your own connection. The whole point is the fork, so the layout is literally a fork. ========================================================================== */ .bst-split { display: grid; gap: 20px; } .bst-lane { position: relative; padding: 28px 26px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-1); } .bst-lane--routed { border-color: var(--accent-line); background: radial-gradient(ellipse at 80% 0%, var(--accent-dim), transparent 62%), var(--surface-2); } .bst-lane__k { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 700; color: var(--ash); margin-bottom: 18px; } .bst-lane--routed .bst-lane__k { color: var(--accent-txt); } .bst-lane__k i { width: 26px; height: 3px; border-radius: 3px; flex: none; background: var(--old-path); } .bst-lane--routed .bst-lane__k i { background: var(--fire); box-shadow: 0 0 12px var(--accent-glow); } .bst-lane li { display: flex; align-items: center; gap: 11px; padding: 9px 0; font-size: .93rem; color: var(--ash); border-top: 1px solid var(--line); } .bst-lane li:first-child { border-top: 0; } .bst-lane--routed li { color: var(--bone); } .bst-lane li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ash-deep); } .bst-lane--routed li::before { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } .bst-split__points { display: grid; gap: 18px; margin-top: 20px; } .bst-split__point { display: flex; gap: 14px; align-items: flex-start; padding: 22px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--card-top), var(--card-bot)); } .bst-split__ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--accent-dim); color: var(--accent-txt); } .bst-split__ico svg { width: 19px; height: 19px; } .bst-split__point h3 { font-size: 1rem; font-weight: 700; margin-bottom: 5px; } .bst-split__point p { font-size: .88rem; color: var(--ash); line-height: 1.9; } /* the fork figure */ .bst-fork { margin-top: clamp(30px, 4vw, 46px); } .bst-fork svg { width: 100%; height: auto; overflow: visible; } .bst-fork__direct { stroke: var(--old-path); stroke-width: 2; fill: none; stroke-dasharray: 6 7; } .bst-fork__routed { stroke-width: 3; fill: none; stroke-linecap: round; } /* ------------------------------------------------ WoW: play-better block --- */ .bst-scen { display: grid; gap: 18px; margin-top: clamp(34px, 4vw, 52px); } .bst-scen__item { padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--card-top), var(--card-bot)); transition: border-color .25s var(--ease), transform .25s var(--ease); } .bst-scen__item:hover { border-color: var(--accent-line); transform: translateY(-3px); } .bst-scen__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-dim); color: var(--accent-txt); margin-bottom: 16px; } .bst-scen__icon svg { width: 20px; height: 20px; } .bst-scen__item h3 { margin-bottom: 9px; } .bst-scen__item p { font-size: .9rem; color: var(--ash); line-height: 1.95; } .bst-scen__metric { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); font-size: .85rem; font-weight: 600; color: var(--accent-txt); } .bst-scen__metric svg { width: 15px; height: 15px; flex: none; } /* Cast-response strip: what world lag actually feels like in WoW. */ .bst-cast { margin-top: clamp(34px, 4vw, 52px); padding: clamp(26px, 3.4vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); } .bst-cast__k { font-size: .9rem; font-weight: 700; margin-bottom: 6px; } .bst-cast__row { display: grid; gap: 26px; } .bst-cast__lane + .bst-cast__lane { padding-top: 24px; border-top: 1px solid var(--line); } .bst-cast__bar { position: relative; height: 34px; margin-top: 14px; border-radius: 10px; background: var(--track); overflow: hidden; } /* No `direction: ltr` here — logical inset properties resolve against the element's own direction, which would anchor the fill to the wrong edge. The bar has to grow from the RTL start (the right). */ .bst-cast__fill { position: absolute; inset-block: 0; inset-inline-start: 0; display: flex; align-items: center; justify-content: flex-end; padding-inline: 12px; border-radius: 10px; font-family: var(--mono); font-size: .72rem; font-weight: 600; } .bst-cast__fill--slow { background: var(--old-path); color: var(--void); } .bst-cast__fill--fast { background: var(--fire); color: var(--accent-ink); } .bst-cast__sub { font-size: .84rem; color: var(--ash); margin-top: 9px; } /* original in-game overlay artwork — stands in until real captures exist */ .bst-overlay { margin: clamp(34px, 4vw, 52px) 0 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #0C0908; } /* Every label inside these figures is Latin. Without this the page's RTL direction reorders the glyphs and pushes text-anchor:start off the left. */ .bst-overlay svg, .bst-route svg, .bst-fork svg { direction: ltr; } .bst-overlay svg { width: 100%; height: auto; display: block; } .bst-overlay__cap { padding: 13px 18px; font-size: .84rem; color: var(--ash); border-top: 1px solid var(--line); background: var(--surface-2); } /* HUD type — literal fills, the artwork is not themed */ .bst-ov-k { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; fill: #F0AE2C; } .bst-ov-n { font-family: var(--mono); font-size: 44px; font-weight: 600; fill: #F0AE2C; letter-spacing: -.02em; } .bst-ov-u { font-family: var(--mono); font-size: 15px; fill: #8E867D; } .bst-ov-s { font-family: var(--mono); font-size: 12px; fill: #F2EDE6; } /* gallery of the studio's own screenshots */ .bst-gal { display: grid; gap: 14px; margin-top: clamp(34px, 4vw, 52px); } .bst-gal__fig { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); } /* Screenshots arrive at whatever size the capture tool produced — crop them all to one ratio so the grid stays even. 16:9 matches how games render, so almost nothing of the in-game UI gets cut off. */ .bst-gal__fig img { display: block; width: 100%; aspect-ratio: 16 / 9; -o-object-fit: cover; object-fit: cover; } .bst-gal__cap { padding: 11px 14px; font-size: .82rem; color: var(--ash); border-top: 1px solid var(--line); } /* ---------------------------------------------------------- performance --- */ .bst-perf { display: grid; gap: 18px; align-items: stretch; } .bst-gauge { padding: 30px 26px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-1); } .bst-gauge--after { border-color: var(--accent-line); background: radial-gradient(ellipse at 50% 120%, var(--accent-dim), transparent 65%), var(--surface-2); } .bst-gauge__k { font-size: .9rem; font-weight: 700; color: var(--ash); } .bst-gauge--after .bst-gauge__k { color: var(--accent-txt); } .bst-gauge__n { font-family: var(--mono); font-size: clamp(2.6rem, 7vw, 3.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; color: var(--ash); margin: 10px 0 4px; direction: ltr; } .bst-gauge--after .bst-gauge__n { color: var(--accent-txt); } .bst-gauge__n sub { font-size: .3em; color: var(--ash-deep); vertical-align: baseline; } .bst-gauge__sub { font-size: .88rem; color: var(--ash); } .bst-gauge__bar { margin-top: 20px; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; } .bst-gauge__fill { height: 100%; border-radius: 99px; background: var(--old-path); } .bst-gauge--after .bst-gauge__fill { background: var(--fire); } /* ---------------------------------------------------------------- tech --- */ .bst-tech { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .bst-tech__item { background: var(--surface-3); padding: 30px 26px; transition: background .25s var(--ease); } .bst-tech__item:hover { background: var(--accent-dim); } .bst-tech__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-dim); color: var(--accent-txt); margin-bottom: 16px; } .bst-tech__icon svg { width: 20px; height: 20px; } .bst-tech__item h3 { margin-bottom: 8px; } .bst-tech__item p { font-size: .88rem; color: var(--ash); line-height: 1.9; } /* ----------------------------------------------------------------- faq --- */ .bst-faq { display: grid; gap: 10px; max-width: 900px; margin-inline: auto; } .bst-faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-3); overflow: hidden; transition: border-color .22s var(--ease); } .bst-faq__item[open] { border-color: var(--accent-line); } .bst-faq__q { display: flex; align-items: center; gap: 14px; padding: 19px 22px; font-weight: 700; font-size: 1rem; cursor: pointer; list-style: none; } .bst-faq__q::-webkit-details-marker { display: none; } .bst-faq__q::after { content: ""; margin-inline-start: auto; width: 10px; height: 10px; border-inline-end: 2px solid var(--ash); border-bottom: 2px solid var(--ash); transform: rotate(45deg); transition: transform .25s var(--ease), border-color .25s var(--ease); flex: none; } .bst-faq__item[open] .bst-faq__q::after { transform: rotate(225deg); border-color: var(--accent-txt); } .bst-faq__a { padding: 0 22px 22px; font-size: .93rem; color: var(--ash); line-height: 2; } /* ----------------------------------------------------------- final cta --- */ .bst-final { position: relative; text-align: center; padding: clamp(56px, 8vw, 92px) clamp(22px, 5vw, 64px); border-radius: 28px; border: 1px solid var(--accent-line); background: var(--final-bg); overflow: hidden; } .bst-final__thread { position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), var(--heat-hot), transparent); opacity: .85; } .bst-final .bst-h2 { margin-bottom: 16px; } .bst-final .bst-lead { margin-inline: auto; margin-bottom: 32px; } .bst-final .bst-actions { justify-content: center; } /* -------------------------------------------------------------- footer --- */ .bst-footer { border-top: 1px solid var(--line); background: var(--soot); padding-top: clamp(44px, 6vw, 68px); } .bst-footer__grid { display: grid; gap: 34px; } .bst-footer__about { font-size: .89rem; color: var(--ash); margin-top: 16px; max-width: 40ch; } .bst-footer h4 { font-size: .84rem; font-weight: 700; letter-spacing: .03em; color: var(--bone); margin: 0 0 16px; } .bst-footer li + li { margin-top: 11px; } .bst-footer a { font-size: .9rem; color: var(--ash); transition: color .18s var(--ease); } .bst-footer a:hover { color: var(--accent-txt); } .bst-social { display: flex; gap: 10px; margin-top: 18px; } .bst-social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--ash); } .bst-social a:hover { color: var(--accent-txt); border-color: var(--accent-line); } .bst-social svg { width: 18px; height: 18px; } .bst-footer__bar { margin-top: 40px; padding-block: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: .82rem; color: var(--ash); } .bst-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; } /* Clear the mobile sticky CTA bar so it never covers footer content. */ @media (max-width: 1023px) { .bst-footer { padding-bottom: 78px; } } /* --------------------------------------------------- mobile sticky bar --- */ .bst-sticky { position: fixed; inset-inline: 0; bottom: 0; z-index: 80; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(120%); transition: transform .3s var(--ease); } .bst-sticky.is-on { transform: translateY(0); } .bst-sticky .bst-btn { flex: 1; padding-inline: 12px; font-size: .86rem; gap: 7px; } /* ------------------------------------------------------------ keyframes --- */ @keyframes bst-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } } @keyframes bst-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* -------------------------------------------------------------- reveal --- */ /* Scoped to `.js` (set synchronously in ) so that with scripting off the content is simply visible instead of stuck at opacity 0. */ .js .bst-rise { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; } .js .bst-rise.is-in { opacity: 1; transform: none; } /* ========================================================================== Service detail / checkout page (/booster/servers/{id}) A redesign of the existing preInvoice + ServicePurchasePicker flow for the Booster theme. Kept fully self-contained under .bst-inv / .bst-cart so it never collides with the landing page classes above. ========================================================================== */ .bst-inv { padding-top: clamp(104px, 13vw, 140px); } .bst-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .84rem; color: var(--ash); margin-bottom: 28px; } .bst-crumb a:hover { color: var(--accent-txt); } .bst-crumb span[aria-hidden] { color: var(--ash-deep); } .bst-crumb strong { color: var(--bone); font-weight: 700; } .bst-inv__grid { display: grid; gap: 24px; align-items: start; } .bst-inv__main { display: grid; gap: 20px; min-width: 0; } .bst-inv__head { padding: clamp(26px, 3.4vw, 36px); } .bst-inv__head-top { display: flex; align-items: center; gap: 18px; } .bst-inv__icon { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 16px; border: 1px solid var(--accent-line); background: var(--accent-dim); color: var(--accent-txt); } .bst-inv__icon svg { width: 30px; height: 30px; } .bst-inv__eyebrow { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--accent-dim); color: var(--accent-txt); font-size: .72rem; font-weight: 700; margin-bottom: 8px; } .bst-inv__title { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; letter-spacing: -.01em; } .bst-inv__tagline { font-size: .92rem; color: var(--ash); margin-top: 6px; line-height: 1.9; } .bst-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; font-size: .8rem; font-weight: 600; } .bst-pill svg { width: 14px; height: 14px; } .bst-pill--ok { background: var(--accent-dim); color: var(--accent-txt); border: 1px solid var(--accent-line); } .bst-pill--warn { background: rgba(224,30,43,.12); color: var(--heat-hot); border: 1px solid rgba(224,30,43,.3); } .bst-pill--off { background: var(--fill-2); color: var(--ash); border: 1px solid var(--line); } .bst-inv__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; } .bst-inv__status span.bst-note-inline { font-size: .84rem; color: var(--ash); } .bst-inv__section-k { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 700; color: var(--bone); margin-bottom: 14px; } .bst-inv__section-k svg { width: 17px; height: 17px; color: var(--accent-txt); } /* tier picker */ .bst-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .bst-tier { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--fill); color: var(--bone); cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); } .bst-tier:hover { border-color: var(--accent-line); transform: translateY(-2px); } .bst-tier.is-active { border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent) inset; } .bst-tier__k { font-size: .72rem; color: var(--ash); } .bst-tier__v { font-size: 1.02rem; font-weight: 800; } .bst-tier__p { font-size: .74rem; color: var(--accent-txt); font-weight: 700; direction: ltr; } .bst-inv__plats { display: flex; gap: 10px; flex-wrap: wrap; } /* trust strip */ .bst-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; } .bst-trust__item { display: flex; align-items: center; gap: 12px; } .bst-trust__ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--accent-dim); color: var(--accent-txt); } .bst-trust__ico svg { width: 20px; height: 20px; } .bst-trust__item h4 { font-size: .88rem; font-weight: 700; } .bst-trust__item p { font-size: .78rem; color: var(--ash); margin-top: 2px; } /* live app preview */ .bst-inv__preview { padding: clamp(24px, 3vw, 32px); } .bst-inv__preview-cap { font-size: .84rem; color: var(--ash); margin-top: 16px; line-height: 1.9; } /* sidebar checkout card */ .bst-cart { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--accent-line); background: radial-gradient(ellipse at 50% 0%, var(--accent-dim), transparent 65%), linear-gradient(180deg, var(--card-top), var(--card-bot)); padding: clamp(24px, 3vw, 30px); overflow: hidden; } .bst-cart__k { display: flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 800; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); } .bst-cart__k svg { width: 18px; height: 18px; color: var(--accent-txt); } .bst-cart__row { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; padding: 8px 0; color: var(--ash); } .bst-cart__row b { color: var(--bone); font-weight: 700; } .bst-cart__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); } .bst-cart__total-k { font-size: .84rem; color: var(--ash); } .bst-cart__total-v { display: flex; align-items: baseline; gap: 6px; } .bst-cart__total-v b { font-size: 1.9rem; font-weight: 800; color: var(--accent-txt); direction: ltr; unicode-bidi: isolate; } .bst-cart__total-v span { font-size: .82rem; color: var(--ash); } .bst-cart .bst-btn { margin-top: 20px; } .bst-cart__legal { font-size: .74rem; color: var(--ash-deep); text-align: center; margin-top: 14px; line-height: 1.8; } .bst-cart__legal a { color: var(--accent-txt); text-decoration: underline; text-underline-offset: 3px; } /* mobile sticky checkout bar (page-specific: carries live price) */ .bst-inv-sticky { position: fixed; inset-inline: 0; bottom: 0; z-index: 80; display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); } .bst-inv-sticky__price { display: flex; flex-direction: column; line-height: 1.3; } .bst-inv-sticky__price b { font-size: 1.1rem; font-weight: 800; color: var(--bone); direction: ltr; unicode-bidi: isolate; } .bst-inv-sticky__price span { font-size: .72rem; color: var(--ash); } .bst-inv-sticky .bst-btn { flex: 1; } @media (min-width: 640px) { .bst-tiers { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .bst-inv__grid { grid-template-columns: 1fr 360px; } .bst-inv-sticky { display: none; } } /* --------------------------------------------------------- breakpoints --- */ @media (min-width: 640px) { .bst-telemetry { grid-template-columns: repeat(4, 1fr); } .bst-telemetry__cell { border-top: 0; } .bst-telemetry__cell:nth-child(odd) { border-inline-start: 1px solid var(--line); } .bst-telemetry__cell:first-child { border-inline-start: 0; } .bst-compare { grid-template-columns: 1fr 1fr; } .bst-perf { grid-template-columns: 1fr 1fr; } .bst-steps { grid-template-columns: repeat(3, 1fr); } .bst-tech { grid-template-columns: 1fr 1fr; } .bst-footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .bst-plans { grid-template-columns: repeat(3, 1fr); } .bst-plan--featured { transform: scale(1.035); z-index: 1; } .bst-plan--featured:hover { transform: scale(1.035) translateY(-5px); } .bst-plats-grid { grid-template-columns: 1fr 1fr; } .bst-tech { grid-template-columns: repeat(3, 1fr); } .bst-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .bst-wow { grid-template-columns: minmax(0, 310px) 1fr; } .bst-dl__cards { grid-template-columns: 1.25fr 1fr; } .bst-dl__how { grid-template-columns: repeat(3, 1fr); } .bst-scen { grid-template-columns: repeat(3, 1fr); } .bst-split { grid-template-columns: 1fr 1fr; } .bst-split__points { grid-template-columns: repeat(3, 1fr); } .bst-gal { grid-template-columns: repeat(3, 1fr); } .bst-cast__row { grid-template-columns: 1fr 1fr; } .bst-cast__lane + .bst-cast__lane { padding-top: 0; border-top: 0; padding-inline-start: 26px; border-inline-start: 1px solid var(--line); } } @media (min-width: 1024px) { .bst-nav__links { display: flex; } .bst-nav__cta { display: inline-flex; } .bst-nav__burger { display: none; } .bst-nav__link { padding-inline: 10px; font-size: .89rem; } .bst-drawer { display: none !important; } .bst-sticky { display: none; } .bst-hero__inner { grid-template-columns: 1.12fr 1fr; } .bst-hero__copy { grid-column: 1; grid-row: 1; } .bst-stage { grid-column: 2; grid-row: 1; } } /* Only wide enough for the secondary nav action above this width. */ @media (min-width: 1240px) { .bst-nav__alt, .bst-nav__login { display: inline-flex; } /* the labelled login link takes over from the icon-only one */ .bst-nav__account { display: none; } .bst-nav__link { padding-inline: 12px; font-size: .92rem; } } @media (max-width: 639px) { .bst-plan--featured { order: -1; } } /* ------------------------------------------------------- reduced motion --- */ @media (prefers-reduced-motion: reduce) { .bst *, .bst *::before, .bst *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js .bst-rise { opacity: 1; transform: none; } .bst-marquee__track { animation: none; } .bst-packet { display: none; } }