/* ========================================================================== DXV Frame Doctor — marketing site Design tokens derived from the GTO brand book's WEB-среда section: dark theme, black base, cool "Electric" accent for UI, warm "Scarlet" accent reserved for the highest-priority calls to action. ========================================================================== */ :root { /* base */ --bg: #101013; --bg-panel: #18181d; --bg-panel-2: #1c1c22; --border: #26262d; --border-soft: #33333c; /* text */ --text: #eceaea; --text-muted: #97969f; /* Ash, desaturated */ --text-faint: #67666f; /* accents — cool (rational, default for site), muted/desaturated indigo */ --electric: #363a67; --electric-2: #474c8a; --electric-3: #9095c9; /* soft periwinkle, for text accents */ /* accents — warm (used sparingly for CTAs), muted terracotta instead of neon orange */ --scarlet: #b8532f; --aperol: #a3462a; --joy: #c98a52; --radius: 14px; --radius-sm: 8px; --maxw: 1160px; --font-head: "Unbounded", "Benzin", sans-serif; --font-body: "Montserrat", "Calibri", sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Safety net for mobile rubber-band overscroll: without this, scrolling past the top/bottom edge reveals whatever's behind -- which defaults to white if only body has a background. Matches body's own base tone so an overscroll bounce reads as "dark", not a visible white flash. */ background: var(--bg); } body { margin: 0; background: radial-gradient(circle at 15% -10%, rgba(71, 76, 138, .10), transparent 55%), radial-gradient(circle at 90% 10%, rgba(184, 83, 47, .05), transparent 45%), linear-gradient(180deg, #121216 0%, #0f0f12 45%, #131317 100%); background-attachment: fixed; color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; } h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); } h3 { font-size: 1.15rem; } p { color: var(--text-muted); margin: 0 0 1em; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--electric-3); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--scarlet); display: inline-block; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: .92rem; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--aperol); color: #fff; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .5); } .btn-primary:hover { background: var(--scarlet); } .btn-secondary { background: var(--electric-2); color: #fff; } .btn-secondary:hover { background: var(--electric-3); } .btn-ghost { background: transparent; border-color: var(--border-soft); color: var(--text); } .btn-ghost:hover { border-color: var(--electric-3); color: var(--electric-3); } .btn-block { width: 100%; } .btn[disabled] { opacity: .55; cursor: not-allowed; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(17, 17, 21, .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav .container { display: flex; align-items: center; justify-content: space-between; height: 92px; } .brand { display: flex; align-items: center; gap: 14px; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; letter-spacing: .01em; } .brand-mark { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex: none; } /* Mobile dropdown menu content -- hidden by default, shown inline via JS toggle only below the .side-dock breakpoint (see nav-toggle below). */ .nav-links { display: none; list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: .92rem; color: var(--text-muted); transition: color .15s ease; } .nav-links a:hover { color: var(--text); } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-toggle { display: none; background: none; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text); width: 42px; height: 42px; font-size: 1.2rem; cursor: pointer; } /* ---------- floating section dock ---------- */ .side-dock { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 150; } .dock-item { width: 148px; text-align: center; padding: 11px 14px; border-radius: 999px; background: rgba(24, 24, 29, .78); border: 1px solid var(--border-soft); backdrop-filter: blur(8px); font-family: var(--font-head); font-size: .72rem; color: var(--text-muted); transition: padding .25s ease, font-size .25s ease, background .25s ease, color .25s ease, border-color .25s ease; } .dock-item:hover { color: var(--text); border-color: var(--electric-3); } .dock-item.active { color: #fff; background: var(--electric-2); border-color: var(--electric-2); padding: 15px 14px; font-size: .78rem; font-weight: 600; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6); } /* (hover: none) and (pointer: coarse) targets touch-primary devices directly, regardless of viewport width -- needed alongside the width check because several modern phones exceed 900px in landscape orientation (e.g. iPhone Pro Max ~932px), where the plain width breakpoint alone would leave the desktop floating dock visible on what's still a phone. */ @media (max-width: 900px), (hover: none) and (pointer: coarse) { .side-dock { display: none; } .nav-toggle { display: block; } } /* ---------- hero ---------- */ .hero { padding: 96px 0 72px; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; top: -260px; right: -160px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(71, 76, 138, .20), transparent 70%); pointer-events: none; } .hero::after { content: ""; position: absolute; bottom: -280px; left: -200px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(184, 83, 47, .09), transparent 70%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } /* Grid items default to min-width: auto, which refuses to shrink below the content's intrinsic min-content width. In .hero-grid that's driven by long unbreakable filenames inside .hero-visual (underscores don't create a line-break opportunity); in .pricing-grid and .two-col it's nowrap CTA button text (e.g. "Запросить пробную лицензию") inside a column flexbox card -- same underlying trap, different content triggering it. Either way it was forcing the grid item wider than its track, so on narrow screens the card kept its left padding but overflowed straight through its own right padding to the viewport edge (found via exact getBoundingClientRect measurements after a user report of asymmetric card margins: right edge landed exactly at the viewport width instead of the container's inset). Applied to every card-holding grid on the site, not just the ones caught so far, since they all share this same structural pattern and would hit the identical bug the moment their content got long enough. */ .hero-grid > *, .grid > *, .audience-grid > *, .split > *, .pricing-grid > *, .two-col > * { min-width: 0; } .hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; } .hero-meta { display: flex; gap: 28px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); flex-wrap: wrap; } .hero-meta div { min-width: 120px; } .hero-meta strong { display: block; font-family: var(--font-head); font-size: 1.3rem; color: var(--text); } .hero-meta span { font-size: .82rem; color: var(--text-faint); } .hero-visual { position: relative; border-radius: var(--radius); border: 1px solid var(--border-soft); background: linear-gradient(160deg, var(--bg-panel-2), #131318); padding: 18px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); } .hero-visual .window-bar { display: flex; gap: 6px; margin-bottom: 14px; } .hero-visual .window-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-soft); } .hero-visual .window-bar span:nth-child(1) { background: var(--scarlet); } .hero-visual .window-bar span:nth-child(2) { background: var(--joy); } .hero-visual .window-bar span:nth-child(3) { background: var(--electric-3); } .mock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--bg-panel); border: 1px solid var(--border); margin-bottom: 8px; font-size: .82rem; } .mock-row .name { color: var(--text); font-weight: 500; } .mock-row .path { color: var(--text-faint); font-size: .74rem; } .status-pill { font-family: var(--font-head); font-size: .68rem; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .status-ok { background: rgba(74, 76, 255, .16); color: var(--electric-3); } .status-bad { background: rgba(255, 39, 0, .16); color: #ff6b52; } .status-fixed { background: rgba(255, 102, 0, .16); color: var(--joy); } /* ---------- sections ---------- */ section { padding: 88px 0; border-top: 1px solid var(--border); scroll-margin-top: 100px; } #top { scroll-margin-top: 0; } .section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; } .section-head p { margin: 0; } /* ---------- feature grid ---------- */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; transition: border-color .15s ease, transform .15s ease; } .card:hover { border-color: var(--border-soft); transform: translateY(-3px); } .card-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--electric), var(--electric-2)); margin-bottom: 16px; font-size: 1.2rem; } .card h3 { margin-bottom: 8px; } .card p { margin: 0; font-size: .9rem; } /* ---------- codecs ---------- */ .codec-strip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .codec-chip { border: 1px solid var(--border-soft); border-radius: 999px; padding: 10px 20px; font-family: var(--font-head); font-size: .82rem; color: var(--text); background: var(--bg-panel); } .codec-chip b { color: var(--electric-3); } /* ---------- audience ---------- */ .audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .audience-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; } .audience-card .tag { margin-bottom: 14px; display: inline-block; } .audience-card h3 { margin-bottom: 10px; } .audience-card p { font-size: .92rem; margin: 0; } .audience-visual { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); padding: 16px; margin-bottom: 20px; } .audience-visual .visual-toolbar { display: flex; justify-content: space-between; align-items: center; font-size: .68rem; color: var(--text-faint); margin-bottom: 10px; font-family: var(--font-head); letter-spacing: .03em; } /* Shared "before / after" storytelling mock used by both audience cards: a labelled row of clip/frame cells, one flagged as broken, a one-line connector explaining what DXV Frame Doctor does, then the same row again with that cell healed. Keeps a light Resolume/render-queue accent (layer chip, BPM, filmstrip) without trying to clone either app's full chrome -- the before/after is what actually explains the value, not UI fidelity. */ .resolume-mock { background: #0c0c0f; border: 1px solid var(--border); border-radius: 6px; padding: 10px; } .rl-top { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: .64rem; letter-spacing: .03em; color: var(--text-faint); margin-bottom: 10px; } .rl-top .rl-file { flex: 1; } .rl-top .rl-bpm { color: var(--electric-3); } .rl-layer-chip { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 4px; padding: 2px 6px; color: var(--text-muted); } .rl-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-family: var(--font-head); font-size: .62rem; letter-spacing: .03em; text-transform: uppercase; color: var(--text-faint); } .rl-row-head .status-pill { padding: 2px 8px; font-size: .6rem; } .rl-strip { display: flex; gap: 5px; } .rl-cell { flex: 1; aspect-ratio: 16 / 10; border-radius: 4px; border-top: 2px solid rgba(255, 255, 255, .12); position: relative; } .rl-cell.c1 { background: linear-gradient(135deg, var(--electric-2), var(--electric)); } .rl-cell.c2 { background: linear-gradient(135deg, var(--joy), var(--aperol)); } .rl-cell.c3 { background: linear-gradient(135deg, var(--border-soft), var(--bg-panel-2)); } .rl-cell.corrupt { background: repeating-linear-gradient( 115deg, var(--bg-panel-2) 0 3px, var(--scarlet) 3px 5px, var(--bg-panel-2) 5px 9px, var(--electric-3) 9px 11px, var(--bg-panel-2) 11px 16px ); border: 1px solid var(--scarlet); } .rl-cell.healed { border: 1px solid var(--electric-3); } .rl-flag { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .6rem; font-family: var(--font-head); line-height: 1; } .corrupt .rl-flag, .frame.bad .rl-flag { background: var(--scarlet); color: #fff; } .healed .rl-flag, .frame.fixed .rl-flag { background: var(--electric-3); color: #0c0c0f; } .rl-connector { text-align: center; margin: 9px 0; } .rl-connector .rl-arrow { font-size: .8rem; color: var(--text-faint); line-height: 1; margin-bottom: 2px; } .rl-connector .rl-label { display: inline-block; font-family: var(--font-head); font-size: .64rem; color: var(--electric-3); letter-spacing: .01em; } .rl-bottom { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--font-head); font-size: .6rem; letter-spacing: .03em; color: var(--text-faint); } .rl-fader { flex: 1; height: 5px; border-radius: 999px; background: var(--border-soft); position: relative; overflow: hidden; } .rl-fader::after { content: ""; position: absolute; inset: 0; width: 62%; background: var(--electric-3); border-radius: 999px; } /* After-Effects-style render filmstrip mock -- same before/after pattern, numbered frames, and the two neighbours used for interpolation marked. */ .render-strip { display: flex; gap: 4px; } .render-strip .frame { flex: 1; height: 34px; border-radius: 4px; background: linear-gradient(165deg, var(--bg-panel-2), var(--bg)); border: 1px solid var(--border); position: relative; } .render-strip .frame .fr-num { position: absolute; left: 3px; bottom: 2px; font-size: .52rem; font-family: var(--font-head); color: var(--text-faint); } .render-strip .frame.donor { border-color: var(--electric-3); border-style: dashed; } .render-strip .frame.bad { background: rgba(184, 83, 47, .22); border-color: var(--scarlet); border-style: solid; } .render-strip .frame.fixed { background: rgba(144, 149, 201, .18); border-color: var(--electric-3); border-style: solid; } .visual-caption { font-size: .72rem; color: var(--text-faint); margin-top: 10px; } /* ---------- modes ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .split .card { padding: 30px; } .tag-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .tag { font-size: .7rem; font-family: var(--font-head); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text-muted); } /* ---------- changelog ---------- */ .changelog-list { max-width: 760px; margin: 0 auto; } .changelog-entry { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 32px 0; border-top: 1px solid var(--border); } .changelog-entry:first-child { border-top: none; } .changelog-version { font-family: var(--font-head); font-size: 1.6rem; color: var(--electric-3); } .changelog-version span { display: block; font-family: var(--font-body); font-size: .74rem; color: var(--text-faint); margin-top: 4px; } .changelog-entry h3 { margin-bottom: 12px; } .changelog-entry ul { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: .92rem; } .changelog-entry li { margin-bottom: 7px; } .changelog-entry li::marker { color: var(--scarlet); } /* ---------- pricing / license ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; } .price-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; } .price-card.featured { border-color: var(--scarlet); background: linear-gradient(160deg, rgba(184, 83, 47, .10), var(--bg-panel) 60%); position: relative; } .price-card .badge { position: absolute; top: -13px; right: 24px; background: var(--scarlet); color: #fff; font-family: var(--font-head); font-size: .68rem; padding: 5px 12px; border-radius: 999px; } .price-amount { font-family: var(--font-head); font-size: 2.1rem; margin: 8px 0 4px; } .price-amount span { font-size: .95rem; color: var(--text-faint); font-family: var(--font-body); } .price-card ul { list-style: none; padding: 0; margin: 20px 0 26px; flex: 1; } .price-card li { display: flex; gap: 10px; font-size: .89rem; color: var(--text-muted); padding: 7px 0; } .price-card li::before { content: "✓"; color: var(--electric-3); font-weight: 700; } .price-card.featured li::before { color: var(--scarlet); } .period-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; } .period-chip { font-family: var(--font-head); font-size: .74rem; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border-soft); color: var(--text-muted); } /* ---------- forms ---------- */ .form-panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { margin-bottom: 16px; } .field.hidden { display: none; } .field label { display: block; font-size: .8rem; color: var(--text-muted); margin-bottom: 7px; font-family: var(--font-head); letter-spacing: .01em; } .field input, .field select, .field textarea { width: 100%; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text); padding: 11px 13px; font-family: var(--font-body); font-size: .92rem; outline: none; transition: border-color .15s ease; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--electric-3); } /* One .fp-input per requested device, stacked -- .field input's own width:100% already applies to each, this just adds breathing room between them beyond the first. */ #fingerprintList .fp-input + .fp-input { margin-top: 8px; } .field textarea { resize: vertical; min-height: 100px; } .field small { display: block; margin-top: 6px; color: var(--text-faint); font-size: .76rem; } .form-status { margin-top: 14px; font-size: .86rem; min-height: 1.2em; } .form-status.ok { color: #4ade80; } .form-status.err { color: #ff6b52; } .form-status.warn { color: #fbbf24; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } /* ---------- fingerprint helper ---------- */ .fp-help { background: var(--bg); border: 1px dashed var(--border-soft); border-radius: var(--radius-sm); padding: 14px 16px; font-size: .82rem; color: var(--text-faint); margin-bottom: 20px; } .fp-help code { color: var(--electric-3); } /* ---------- footer ---------- */ footer { border-top: 1px solid var(--border); padding: 48px 0 32px; } .footer-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 32px; } .footer-brand { display: flex; flex-direction: column; gap: 10px; max-width: 260px; } .footer-legal { font-size: .78rem; color: var(--text-faint); line-height: 1.5; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links a { color: var(--text-muted); font-size: .88rem; } .footer-links a:hover { color: var(--text); } .footer-contact { display: flex; flex-direction: column; gap: 10px; } .footer-contact-title { font-family: var(--font-head); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--electric-3); } .footer-contact a { color: var(--text-muted); font-size: .88rem; } .footer-contact a:hover { color: var(--text); } .footer-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .footer-buttons .btn { padding: 8px 16px; font-size: .82rem; } .footer-bottom { padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: var(--text-faint); } .footer-policy-links { display: flex; gap: 20px; flex-wrap: wrap; } .footer-policy-links a { color: var(--text-faint); } .footer-policy-links a:hover { color: var(--text-muted); } /* ---------- legal pages (offer, privacy, payment-delivery) ---------- */ .legal-page { max-width: 820px; padding-top: 56px; padding-bottom: 80px; } .legal-updated { color: var(--text-faint); font-size: .88rem; margin-bottom: 40px; } .legal-body h2 { font-size: 1.2rem; margin-top: 2em; } .legal-body p { font-size: .95rem; } .legal-body a { color: var(--electric-3); text-decoration: underline; } .legal-download { margin-top: 2em; } .legal-back { margin-top: 24px; } /* ---------- modal ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(8, 8, 10, .72); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .modal-overlay.open { display: flex; } .modal { background: var(--bg-panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 30px; max-width: 480px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative; } .modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text-faint); font-size: 1.3rem; cursor: pointer; line-height: 1; } .modal-close:hover { color: var(--text); } /* ---------- misc ---------- */ .center { text-align: center; } .mt-24 { margin-top: 24px; } .note { font-size: .82rem; color: var(--text-faint); } /* ---------- responsive ---------- */ /* Same width-or-touch condition as the .side-dock breakpoint above, for the same reason: a plain max-width check misses phones whose landscape width exceeds 900px, which would otherwise keep these two-column layouts uncollapsed on what's still a phone screen. */ @media (max-width: 900px), (hover: none) and (pointer: coarse) { .hero-grid { grid-template-columns: 1fr; } .grid { grid-template-columns: repeat(2, 1fr); } .audience-grid { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } .two-col { grid-template-columns: 1fr; } .changelog-entry { grid-template-columns: 1fr; gap: 10px; } /* background-attachment: fixed is notoriously unreliable on mobile browsers -- during fast/ momentum scrolling they frequently can't repaint it in time, which is what was showing up as a flash of blank white lower on the page (compounded by having no background of its own, fixed above). It's a subtle cosmetic parallax touch on desktop and not worth the mobile rendering cost, so it's simply turned off here. */ body { background-attachment: scroll; } } @media (max-width: 640px) { .nav-cta .btn-ghost { display: none; } .grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } section { padding: 64px 0; } .hero { padding: 56px 0 48px; } } @media (max-width: 480px) { .brand-name { display: none; } .nav-cta .btn-primary { display: none; } }