/* ══ DynSolutionz.com shared stylesheet ══════════════════════════════════════ Theme tokens mirror DynBrowser's ERPThemePicker palette triplets ([base, accent, tint]); site.js writes --base/--accent/--tint, everything below derives via color-mix. Dark mode = [data-dark] on . ═══════════ */ :root { --base: #f4f6fa; --accent: #0078d4; --tint: #dbeafe; --bg: var(--base); --bg-2: color-mix(in srgb, var(--tint) 34%, var(--base)); --card: #ffffff; --line: color-mix(in srgb, var(--accent) 13%, #dde3ec); --ink: #16202e; --mut: #5b6878; --acc: var(--accent); --acc-2: color-mix(in srgb, var(--accent) 20%, #06b6d4); --acc-soft: color-mix(in srgb, var(--accent) 10%, transparent); --chip: color-mix(in srgb, var(--tint) 70%, #ffffff); --acc-ink: #ffffff; --ok: #1e9e63; --warn: #d97706; --bad: #dc2626; --shadow: 0 20px 50px -18px color-mix(in srgb, var(--accent) 28%, rgb(10 20 35 / .35)); /* Brand mark (Dz + growth arrow): the "D" follows the theme accent; the growth arrow stays a constant brand orange so the logo reads the same across all 12 themes. Override --logo-arrow-* only if you ever want the arrow to follow the theme too. */ --logo-d-1: color-mix(in srgb, var(--accent) 60%, #9ad4ff); --logo-d-2: var(--accent); --logo-d-3: color-mix(in srgb, var(--accent) 72%, #001428); --logo-arrow-1: #ffc061; --logo-arrow-2: #ff7a1a; --logo-arrow-3: #ef5f00; } :root[data-dark] { --bg: color-mix(in srgb, var(--accent) 6%, #0c1016); --bg-2: color-mix(in srgb, var(--accent) 10%, #10151c); --card: color-mix(in srgb, var(--accent) 8%, #141a23); --line: color-mix(in srgb, var(--accent) 20%, #26303d); --ink: #e9edf4; --mut: #92a0b1; --acc: color-mix(in srgb, var(--accent) 68%, #bfe0ff); --acc-2: color-mix(in srgb, var(--accent) 15%, #67e8f9); --acc-soft: color-mix(in srgb, var(--accent) 20%, transparent); --chip: color-mix(in srgb, var(--accent) 22%, #182029); --shadow: 0 24px 60px -20px rgb(0 0 0 / .65); --ok: #34c98a; --warn: #f0a13a; --bad: #f26d6d; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* ── Scrollbars follow the theme ───────────────────────────────────────────── color-scheme is the half that matters most: it tells the browser to draw ALL native chrome — scrollbars, select dropdowns, date pickers, form controls — in the right mode. Without it a dark page still gets a bright white scrollbar and light dropdowns, which is what stood out on the portal's dialogs. The ::-webkit rules then tint the bar with the *selected* accent, so it matches whichever of the 12 themes is active rather than being merely dark. scrollbar-color/-width inherit, so declaring them on :root covers every scroll container on the page (Firefox and the modern standard). */ :root { color-scheme: light; scrollbar-width: thin; } :root[data-dark] { color-scheme: dark; } :root, :root[data-dark] { scrollbar-color: color-mix(in srgb, var(--accent) 34%, var(--line)) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 8px; /* Transparent border + padding-box keeps the thumb visually inset from the track instead of filling the full gutter edge to edge. */ border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 62%, var(--line)); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } body { font-family: Inter, system-ui, sans-serif; font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--ink); transition: background .45s ease, color .45s ease; overflow-x: hidden; } h1, h2, h3 { font-family: Archivo, Inter, sans-serif; line-height: 1.12; letter-spacing: -.015em; } a { color: var(--acc); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--acc); color: var(--acc-ink); } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; } .mono { font-family: 'JetBrains Mono', monospace; } .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--acc); border-radius: 2px; } /* ── Nav ─────────────────────────────────────────────── */ nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-in { display: flex; align-items: center; gap: 26px; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.16rem; color: var(--ink); letter-spacing: -.02em; } .brand:hover { text-decoration: none; } /* The DynSolutionz mark — same icon as DynBrowser's app icon (D + rising data trend), a fixed-palette graphic (not theme-reactive) referenced directly from favicon.svg rather than duplicated inline */ .brand-mark { width: 30px; height: 30px; border-radius: 8px; display: block; box-shadow: 0 4px 14px -4px rgb(91 79 201 / .5); } .brand .bz { font-style: normal; color: var(--acc-2); } .brand em { font-style: normal; color: var(--acc); } /* Company lockup (.brand-co): the full Dz brand mark (exact artwork) sits next to the "DynSolutionZ" wordmark as a logo+wordmark pair. Drops the app-icon badge treatment (rounded corners + shadow); Product brands (DynBrowser) keep the separate-badge look above. */ .brand-co { gap: 8px; } .brand-co .brand-mark { width: auto; height: 1.9em; border-radius: 0; box-shadow: none; margin: -.1em 0; } .nav-links { display: flex; gap: 22px; margin-left: 8px; } .nav-links a { color: var(--mut); font-size: .92rem; font-weight: 500; } .nav-links a:hover { color: var(--ink); text-decoration: none; } .nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; } .pill-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 6px 13px; font: 600 .8rem Inter, sans-serif; cursor: pointer; transition: border-color .2s, background .2s; display: inline-flex; align-items: center; gap: 7px; } .pill-btn:hover { border-color: var(--acc); } .nav-cta { background: var(--acc); color: var(--acc-ink); border-color: transparent; } .nav-cta:hover { filter: brightness(1.08); } /* Logged-in profile menu (injected by site.js on the public pages) */ .profile-wrap { position: relative; } .nav-profile { padding: 4px 11px 4px 5px; } .nav-avatar { width: 24px; height: 24px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #3b82f6, #7c3aed); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 .72rem Inter, sans-serif; } .nav-profile .np-name { max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-profile .np-caret { font-size: .62rem; color: var(--mut); margin-left: -2px; transition: transform .2s; } .profile-wrap.open .np-caret { transform: rotate(180deg); } .profile-menu { position: absolute; top: calc(100% + 9px); right: 0; z-index: 60; min-width: 244px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 48px -18px rgba(10, 20, 35, .4); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; } .profile-wrap.open .profile-menu { opacity: 1; visibility: visible; transform: translateY(0); } .pm-head { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px 12px; } .pm-head .nav-avatar { width: 38px; height: 38px; font-size: .95rem; margin-top: 1px; } .pm-id { min-width: 0; } .pm-name { font: 700 .9rem Inter, sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-sub { font-size: .76rem; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-badge { display: inline-block; margin-top: 5px; font: 700 .6rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--acc); background: var(--acc-soft); border-radius: 999px; padding: 2px 9px; } .pm-sep { height: 1px; background: var(--line); margin: 4px 6px; } .pm-item { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 9px; border: none; background: none; font: 500 .87rem Inter, sans-serif; color: var(--ink); cursor: pointer; text-align: left; } .pm-item:hover { background: var(--chip); text-decoration: none; } .pm-item svg { width: 16px; height: 16px; flex: none; opacity: .7; } .pm-item.pm-danger { color: #e0483a; } .pm-item.pm-danger:hover { background: color-mix(in srgb, #e0483a 11%, transparent); } /* Mobile nav (burger + panel injected by site.js) */ .nav-burger { display: none; font-size: 1rem; padding: 6px 11px; } .mobile-menu { display: none; } /* ── Hero (landing) ──────────────────────────────────── */ .hero { position: relative; padding: 84px 0 96px; overflow: clip; } .hero::before { content: ''; position: absolute; inset: -20% -10% auto; height: 130%; pointer-events: none; background: radial-gradient(46rem 30rem at 84% 8%, var(--acc-soft), transparent 66%), radial-gradient(34rem 26rem at 6% 88%, color-mix(in srgb, var(--acc) 9%, transparent), transparent 70%); } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 56px; align-items: center; } .hero h1 { font-size: clamp(2.5rem, 5vw, 3.7rem); font-weight: 800; margin: 20px 0 18px; } .hero h1 .hl { color: var(--acc); } .hero p.lead { font-size: 1.13rem; color: var(--mut); max-width: 34em; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 11px; font: 600 .97rem Inter, sans-serif; cursor: pointer; border: 1px solid transparent; transition: transform .15s, filter .2s, border-color .2s; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background: var(--acc); color: var(--acc-ink); box-shadow: 0 10px 26px -10px var(--acc); } .btn-primary:hover { filter: brightness(1.08); } .btn-ghost { border-color: var(--line); color: var(--ink); background: var(--card); } .btn-ghost:hover { border-color: var(--acc); } .hero-note { margin-top: 18px; font-size: .82rem; color: var(--mut); display: flex; align-items: center; gap: 8px; } .hero-note .dot-ok { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); } /* ── Page hero (feature deep-dive pages) ─────────────── */ .page-hero { position: relative; padding: 64px 0 72px; overflow: clip; } .page-hero::before { content: ''; position: absolute; inset: -30% -10% auto; height: 140%; pointer-events: none; background: radial-gradient(42rem 26rem at 88% 0%, var(--acc-soft), transparent 68%); } .page-grid { position: relative; display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 52px; align-items: center; } .page-hero h1 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; margin: 18px 0 14px; } .page-hero p.lead { font-size: 1.06rem; color: var(--mut); max-width: 32em; } .fact-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .fact-chips span { font: 600 .78rem 'JetBrains Mono', monospace; color: var(--acc); background: var(--acc-soft); border: 1px solid color-mix(in srgb, var(--acc) 24%, transparent); border-radius: 999px; padding: 5px 13px; } /* ── Feature cross-nav pills ─────────────────────────── */ .crossnav { padding: 18px 0; border-block: 1px solid var(--line); background: var(--bg-2); } .crossnav .wrap { display: flex; flex-wrap: wrap; gap: 9px; } .crossnav a { font: 500 .82rem Inter, sans-serif; color: var(--mut); border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 15px; } .crossnav a:hover { color: var(--ink); border-color: var(--acc); text-decoration: none; } .crossnav a.on { color: var(--acc-ink); background: var(--acc); border-color: transparent; font-weight: 600; } /* ── Product masthead ────────────────────────────────── */ /* The nav brand is always the company (DynSolutionz → home). The product a page belongs to gets its own wordmark strip directly under the nav, rendered with the exact same .brand lockup the header used to carry. On feature pages this strip sits on top of the cross-nav and the two share one edge. */ .productbar { border-block: 1px solid var(--line); background: var(--bg-2); } .productbar .wrap { display: flex; align-items: center; gap: 12px; min-height: 52px; } .productbar .brand { font-size: 1.24rem; } .productbar + .crossnav { border-top: none; } /* ── Sections ────────────────────────────────────────── */ section { padding: 88px 0; } .sec-head { max-width: 620px; margin-bottom: 54px; } .sec-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; margin: 16px 0 12px; } .sec-head p { color: var(--mut); font-size: 1.03rem; } .alt { background: var(--bg-2); border-block: 1px solid var(--line); } /* stats band */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .stat { background: var(--card); padding: 26px 24px; } .stat b { display: block; font: 600 2rem 'JetBrains Mono', monospace; color: var(--acc); } .stat span { color: var(--mut); font-size: .85rem; } /* capability grid (feature pages) */ .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cap { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 22px; transition: transform .18s, border-color .2s; } .cap:hover { transform: translateY(-3px); border-color: var(--acc); } .cap::before { content: ''; display: block; width: 26px; height: 4px; border-radius: 3px; background: var(--acc); margin-bottom: 14px; } .cap h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; } .cap p { color: var(--mut); font-size: .88rem; } /* highlight band (feature pages): big mono stats + copy */ .hi-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .hi { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 28px; } .hi b { display: block; font: 600 1.7rem 'JetBrains Mono', monospace; color: var(--acc); margin-bottom: 8px; } .hi p { color: var(--mut); font-size: .9rem; } /* feature rows (landing) */ .feat { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 44px 0; } .feat + .feat { border-top: 1px dashed var(--line); } .feat:nth-child(even) .f-viz { order: -1; } .feat h3 { font-size: 1.5rem; font-weight: 700; margin: 14px 0 10px; } .feat p { color: var(--mut); max-width: 32em; } .f-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .f-chips span { background: var(--chip); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: .78rem; font-weight: 500; } .learn { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 600; font-size: .93rem; } .learn::after { content: '→'; transition: transform .18s; } .learn:hover::after { transform: translateX(3px); } .f-viz { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 20px; box-shadow: var(--shadow); font-size: 12.5px; min-height: 220px; display: flex; flex-direction: column; justify-content: center; gap: 10px; } /* ── App mock (CSS recreation of DynBrowser) ─────────── */ .app { border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; font-size: 12.5px; transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg); transition: transform .5s ease; } .app:hover { transform: perspective(1400px) rotateY(-1deg) rotateX(0deg); } .app-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 10px 0; background: var(--bg-2); border-bottom: 1px solid var(--line); } .app-tab { padding: 7px 14px; border-radius: 9px 9px 0 0; color: var(--mut); border: 1px solid transparent; border-bottom: none; white-space: nowrap; display: flex; align-items: center; gap: 7px; font-weight: 500; } .app-tab.on { background: var(--card); color: var(--ink); border-color: var(--line); font-weight: 600; } .app-tab .fav { width: 8px; height: 8px; border-radius: 3px; background: var(--acc); flex: none; } .app-tab.plus { padding: 7px 9px; } .win-ctl { margin-left: auto; display: flex; gap: 12px; color: var(--mut); padding: 0 6px 6px; font-size: 11px; } .app-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); } .bar-ico { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--mut); } .bar-ico:nth-child(3) { color: var(--acc); } .addr { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; color: var(--mut); font-family: 'JetBrains Mono', monospace; font-size: 11px; } .addr .lock { color: var(--ok); } .app-body { padding: 14px; display: grid; gap: 12px; background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--bg-2) 40%, var(--card))); } .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .kpi { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--card); } .kpi b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 1.25rem; color: var(--acc); font-weight: 600; } .kpi span { color: var(--mut); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; } .kpi.k-warn b { color: var(--warn); } .kpi.k-bad b { color: var(--bad); } .grid { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .g-row { display: grid; grid-template-columns: 1.1fr 1.7fr 1fr .7fr 1fr; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--line); align-items: center; } .g-row:first-child { border-top: none; background: var(--bg-2); color: var(--mut); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .g-row:not(:first-child):hover { background: var(--acc-soft); } .g-row .id { font-family: 'JetBrains Mono', monospace; color: var(--acc); font-size: 11.5px; } .g-row .num { font-family: 'JetBrains Mono', monospace; text-align: right; } .pillst { justify-self: start; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; } .st-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); } .st-wip { color: var(--acc); background: var(--acc-soft); } .st-bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, transparent); } /* rows shimmer in, then reveal data */ .g-row.load > * { position: relative; color: transparent !important; } .g-row.load > *::after { content: ''; position: absolute; inset: 3px 0; border-radius: 5px; background: linear-gradient(90deg, var(--bg-2) 25%, color-mix(in srgb, var(--acc) 12%, var(--bg-2)) 50%, var(--bg-2) 75%); background-size: 220% 100%; animation: shimmer 1.1s linear infinite; } .g-row.load .pillst { background: transparent; } @keyframes shimmer { to { background-position: -220% 0; } } /* mini-viz: bars */ .viz-bars .vb { display: grid; grid-template-columns: 92px 1fr 44px; gap: 12px; align-items: center; margin: 7px 0; color: var(--mut); } .vb i { height: 10px; border-radius: 999px; background: var(--acc-soft); overflow: hidden; display: block; font-style: normal; } .vb i::after { content: ''; display: block; height: 100%; width: var(--w, 60%); border-radius: inherit; background: var(--acc); transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.7,.2,1) .2s; } .in .vb i::after { transform: scaleX(1); } .vb b { font-family: 'JetBrains Mono', monospace; text-align: right; color: var(--ink); font-weight: 500; } /* mini-viz: BOM tree */ .viz-bom { gap: 0; } .viz-bom .bn { display: flex; align-items: center; gap: 9px; padding: 6px 0 6px calc(18px * var(--lvl, 0)); color: var(--ink); } .viz-bom .bn::before { content: '▸'; color: var(--mut); font-size: 10px; } .viz-bom .bn.leaf::before { content: '·'; } .viz-bom .bn .mono { color: var(--acc); font-size: 11.5px; } .viz-bom .cm { margin-left: auto; font: 600 10.5px 'JetBrains Mono', monospace; padding: 2px 8px; border-radius: 999px; color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); } .viz-bom .cm.low { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); } .viz-bom .total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; font-weight: 600; } /* mini-viz: chart */ .viz-chart svg { width: 100%; height: auto; display: block; } .viz-chart .axis { stroke: var(--line); } .viz-chart .area { fill: var(--acc-soft); } .viz-chart .ln { stroke: var(--acc); stroke-width: 2.5; fill: none; stroke-dasharray: 600; stroke-dashoffset: 600; } .in .viz-chart .ln, .viz-chart.in .ln { animation: draw 1.6s ease forwards .2s; } @keyframes draw { to { stroke-dashoffset: 0; } } .viz-chart .zero { stroke: var(--bad); stroke-dasharray: 4 5; stroke-width: 1.4; opacity: .7; } .viz-chart text { font: 500 9px 'JetBrains Mono', monospace; fill: var(--mut); } /* mini-viz: query */ .viz-q { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; line-height: 1.9; color: var(--mut); } .viz-q .k { color: var(--acc); } .viz-q .s { color: var(--ok); } .viz-q .n { color: var(--warn); } .viz-q .resp { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; } .caret { display: inline-block; width: 7px; height: 13px; background: var(--acc); vertical-align: -2px; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* mini-viz: work cards */ .viz-work .wc { border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; display: flex; align-items: center; gap: 12px; margin: 5px 0; background: var(--bg-2); } .viz-work .wc .mono { color: var(--acc); font-size: 11.5px; } .viz-work .prio { margin-left: auto; } .viz-work .prg { flex: 0 0 90px; height: 7px; border-radius: 999px; background: var(--acc-soft); overflow: hidden; } .viz-work .prg::after { content: ''; display: block; height: 100%; width: var(--w); background: var(--acc); border-radius: inherit; } /* mini-viz: drawing sheet (Vault) */ .viz-sheet { position: relative; border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg-2); min-height: 200px; padding: 14px; } .viz-sheet svg { width: 100%; height: auto; display: block; } .viz-sheet .draw-ln { stroke: var(--acc); stroke-width: 1.6; fill: none; opacity: .85; } .viz-sheet .draw-dim { stroke: var(--mut); stroke-width: .8; stroke-dasharray: 3 4; fill: none; } .viz-sheet .tblock { position: absolute; right: 14px; bottom: 14px; border: 1px solid var(--line); background: var(--card); font: 500 9px 'JetBrains Mono', monospace; color: var(--mut); padding: 6px 10px; border-radius: 4px; } /* ── Theme lab ───────────────────────────────────────── */ .lab { text-align: center; } .lab .sec-head { margin-inline: auto; } .lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 10px; } .sw { border: 1.5px solid var(--line); background: var(--card); border-radius: 13px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 9px; font: 600 .84rem Inter, sans-serif; color: var(--ink); transition: transform .18s, border-color .2s, box-shadow .2s; } .sw:hover { transform: translateY(-3px); border-color: var(--acc); } .sw.on { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft), var(--shadow); } .sw-dots { display: flex; gap: 5px; } .sw-dots i { width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgb(0 0 0 / .12); } .lab-tools { display: flex; justify-content: center; gap: 12px; margin-top: 30px; } /* ── Platform band ───────────────────────────────────── */ .plat { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .plat-card { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 30px; } .plat-card h3 { font-size: 1.22rem; margin: 12px 0 8px; } .plat-card p { color: var(--mut); font-size: .95rem; } .plat-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--acc-soft); color: var(--acc); display: grid; place-items: center; font-size: 1.3rem; } .lic { margin-top: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .lic div h4 { font-size: 1rem; margin-bottom: 6px; display: flex; align-items: center; gap: 9px; } .lic div h4::before { content: '✓'; color: var(--ok); font-weight: 700; } .lic div p { color: var(--mut); font-size: .88rem; } /* ── CTA + footer ────────────────────────────────────── */ .cta-band { text-align: center; padding: 100px 0; position: relative; overflow: clip; } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(38rem 20rem at 50% 0%, var(--acc-soft), transparent 70%); pointer-events: none; } .cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; margin-bottom: 14px; position: relative; } .cta-band p { color: var(--mut); margin-bottom: 32px; position: relative; } footer { border-top: 1px solid var(--line); padding: 44px 0 54px; background: var(--bg-2); } .foot { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; } .foot .brand { font-size: 1.02rem; } .foot-links { display: flex; gap: 20px; flex-wrap: wrap; } .foot-links a, .foot small { color: var(--mut); font-size: .86rem; } .foot small { margin-left: auto; } .soon { opacity: .55; cursor: default; pointer-events: none; } /* ── Motion ──────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } .rise { opacity: 0; transform: translateY(18px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; } .d1 { animation-delay: .05s } .d2 { animation-delay: .16s } .d3 { animation-delay: .27s } .d4 { animation-delay: .38s } .d5 { animation-delay: .5s } @keyframes rise { to { opacity: 1; transform: none; } } /* ── Responsive ──────────────────────────────────────── */ @media (max-width: 940px) { .hero-grid, .page-grid, .feat, .plat { grid-template-columns: 1fr; } .feat { gap: 30px; } .feat:nth-child(even) .f-viz { order: 0; } .app { transform: none; } .stats { grid-template-columns: 1fr 1fr; } .cap-grid, .hi-band { grid-template-columns: 1fr 1fr; } .lic { grid-template-columns: 1fr; gap: 18px; } .nav-links { display: none; } .nav-burger { display: inline-flex; } .mobile-menu { position: absolute; top: 64px; left: 0; right: 0; z-index: 49; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px 28px 18px; flex-direction: column; } .mobile-menu.open { display: flex; } .mobile-menu a { padding: 12px 4px; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); font-size: .95rem; } .mobile-menu a:hover { text-decoration: none; color: var(--acc); } .mobile-menu a:last-child { border-bottom: none; } .mobile-menu .mm-head { font: 600 .68rem 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--mut); margin-top: 14px; padding-bottom: 4px; } } @media (max-width: 620px) { .cap-grid, .hi-band { grid-template-columns: 1fr; } .wrap { padding: 0 18px; } section { padding: 54px 0; } .hero { padding: 44px 0 56px; } .page-hero { padding: 36px 0 46px; } .sec-head { margin-bottom: 34px; } .feat { padding: 28px 0; } .cta-band { padding: 64px 0; } .nav-cta, .nav-signin, .profile-wrap { display: none; } /* these live in the mobile menu */ .mobile-menu { padding-inline: 18px; } .stat { padding: 18px; } .stat b { font-size: 1.5rem; } .hi b { font-size: 1.4rem; } .foot small { margin-left: 0; } /* Feature cross-nav becomes a horizontal scroller instead of a tall stack */ .crossnav .wrap { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .crossnav a { flex: none; } .lab-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } /* App mocks: stack side-by-side panels (inline grid styles included), 2×2 KPI tiles, and drop the qty/date columns from default 5-column demo grids. */ .app-body { grid-template-columns: 1fr !important; } .kpis { grid-template-columns: 1fr 1fr; gap: 8px; } .g-row:not([style]) { grid-template-columns: 1.1fr 1.7fr 1fr; } .g-row:not([style]) > :nth-child(n+4) { display: none; } } @media (max-width: 520px) { .app-tabs .app-tab:nth-child(3) { display: none; } /* third demo tab doesn't fit */ .hero h1 { font-size: 2.2rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } .reveal, .rise { opacity: 1; transform: none; } }