/* telos-v2.css — skonsolidowany styl szablonu Telos ID (port z elementy-bazowe-v12) + warstwa animacji impeccable v2. Generowane: bin/build-telos-v2-css.mjs. NIE edytowac recznie. Uzywane przez renderer panelu traffic-overview-v3 (nowy styl), telos.css zostaje dla v2. */ /* ===== telos-css (z v12) ===== */ /* ============================================================ telos.css — kanon design systemu paneli (skopiowany 1:1 z public/assets/telos.css). Zmiany robimy w panelu + re-ekstrakcja. ============================================================ */ :root{ --brand-green:#1eb88a; --brand-green-dark:#17946e; --brand-green-text:#117657; --brand-green-light:#e8f8f2; --brand-green-soft:#cfeadd; --k-views:#1eb88a; --k-views-soft:#e8f8f2; --k-users:#0ea5b7; --k-users-soft:#cffafe; --k-sessions:#0d8c6b; --k-sessions-soft:#d1f0e2; --k-gsc:#d97706; --k-gsc-soft:#fef3c7; --up:#047857; --up-soft:#d1fae5; --down:#b91c1c; --down-soft:#fee2e2; --flat:#6b7280; --flat-soft:#f1f3f5; --s-up:#10b981; --s-up-soft:#d1fae5; --s-down:#ef4444; --s-down-soft:#fee2e2; --s-star:#8b5cf6; --s-star-soft:#ede9fe; --s-ai:#b45309; --s-ai-soft:#fef3c7; --text-dark:#1a1a1a; --text-medium:#444; --text-light:#666; --text-muted:#999; --border-light:#e3e6e9; --border-soft:#eef0f2; --bg-page:#f5f7f6; --bg-card:#fff; --bg-soft:#fafbfa; --status-success:#27ae60; --status-error:#e74c3c; --shadow-card:0 1px 2px rgba(20,40,30,.04), 0 4px 16px rgba(20,40,30,.06); --shadow-card-hover:0 4px 8px rgba(20,40,30,.07), 0 12px 32px rgba(20,40,30,.10); --soc-fb:#1877F2; --soc-fb-bg:rgba(24,119,242,.07); --soc-fb-border:rgba(24,119,242,.18); --soc-ig:#DC2743; --soc-ig-bg:rgba(220,39,67,.07); --soc-ig-border:rgba(220,39,67,.18); --soc-x:#0f1419; --soc-x-bg:rgba(0,0,0,.045); --soc-x-border:rgba(0,0,0,.16); --soc-yt:#FF0000; --soc-li:#0A66C2; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px; --nav-h:54px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} html,body{font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--text-dark);background:var(--bg-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:var(--brand-green-text);text-decoration:none} a:hover{color:var(--brand-green-dark)} button{font-family:inherit;cursor:pointer;border:0;background:transparent} :focus-visible{outline:2px solid var(--brand-green);outline-offset:2px;border-radius:6px} /* TOP BAR */ .topbar{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:16px 22px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;box-shadow:var(--shadow-card);margin-bottom:12px;position:relative;overflow:hidden} .topbar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand-green) 0%, var(--brand-green-dark) 100%)} .pmark{display:flex;align-items:center;gap:13px;min-width:0;justify-self:start} .pmark .pico{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--brand-green),var(--brand-green-dark));display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 18px -8px rgba(30,184,138,.7)} .pmark .pico svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round} .pmark .ptx{min-width:0} .pmark .pname{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--text-dark);line-height:1.12;display:block} .pmark .pdom{font-family:'Roboto Mono',monospace;font-size:12px;font-weight:600;color:var(--brand-green-text);display:inline-flex;align-items:center;gap:5px;margin-top:5px} .pmark .pdom svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.1;opacity:.85} .client-mark{display:flex;align-items:center;gap:12px;min-width:0} .client-mark img{height:42px;width:auto;display:block;flex-shrink:0} .client-mark .client-name{font-size:13px;color:var(--text-light);line-height:1.3;min-width:0} .client-mark .client-name strong{display:block;font-size:15px;color:var(--text-dark);font-weight:600;letter-spacing:-.005em} .datepicker{justify-self:center;display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-pill);padding:9px 16px;font-size:13.5px;font-weight:500;color:var(--text-dark);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.03);transition:all .15s ease} .datepicker:hover{border-color:var(--brand-green);box-shadow:0 0 0 3px var(--brand-green-light)} .datepicker svg{width:15px;height:15px;color:var(--brand-green-dark);flex-shrink:0} .datepicker .arrow{color:var(--text-muted);font-size:10px;margin-left:4px} .realizacja{justify-self:end;display:flex;align-items:center;gap:12px} /* DATEPICKER MENU */ .dp{position:relative} .dp-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--border-light);border-radius:14px;box-shadow:var(--shadow-card-hover);padding:13px 15px;width:440px;max-width:92vw;z-index:90;display:none} .dp-menu.open{display:block} .dp-grp{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin:0 0 6px} .dp-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px} .dp-chip{padding:7px 13px;border:1px solid var(--border-light);border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;color:var(--text-dark);white-space:nowrap;transition:all .14s ease;cursor:pointer} .dp-chip:hover{border-color:var(--brand-green);background:var(--brand-green-light);color:var(--brand-green-dark)} .dp-chip.on{background:linear-gradient(135deg,var(--brand-green),var(--brand-green-dark));color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(23,148,110,.26)} .dp-note{font-size:11px;color:var(--text-light);font-weight:500;text-align:center;line-height:1.4;max-width:380px;margin:8px auto 0} .dp-note b{color:var(--text-medium);font-weight:600} .dp-note .dp-vs{color:var(--brand-green-dark);font-weight:700} .dp-custom{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap} .dp-custom label{display:flex;flex-direction:column;gap:3px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)} .dp-custom input[type=date]{font-family:inherit;font-size:12px;border:1px solid var(--border-light);border-radius:8px;padding:6px 9px;color:var(--text-dark)} .dp-go{background:linear-gradient(135deg,var(--brand-green),var(--brand-green-dark));color:#fff;font-weight:600;font-size:12.5px;border-radius:8px;padding:8px 14px;cursor:pointer;border:none} /* STICKY ANCHOR NAV */ .anchor-nav{background:rgba(255,255,255,.92);border:1px solid var(--border-light);border-radius:var(--radius-pill);box-shadow:var(--shadow-card);backdrop-filter:saturate(180%) blur(10px);display:flex;align-items:center;gap:6px;padding:7px 10px;overflow-x:auto;scrollbar-width:none} .anchor-nav::-webkit-scrollbar{display:none} .anchor-nav .nav-brand{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;font-size:12px;font-weight:700;color:var(--text-dark);white-space:nowrap;flex-shrink:0;border-right:1px solid var(--border-soft);margin-right:4px} .anchor-link{padding:8px 14px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;color:var(--text-light);white-space:nowrap;flex-shrink:0;transition:all .16s ease;position:relative;cursor:pointer} .anchor-link:hover{color:var(--brand-green-dark);background:var(--brand-green-light)} .anchor-link.active{color:#fff;background:linear-gradient(135deg,var(--brand-green) 0%, var(--brand-green-dark) 100%);box-shadow:0 2px 8px rgba(23,148,110,.26)} /* TITLE BLOCK */ .title-block{text-align:center;padding:12px 0 22px} .title-block h1{font-size:26px;font-weight:700;color:var(--text-dark);margin-bottom:8px;letter-spacing:-.012em} .title-block .source{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-light)} .title-block .source img{height:16px;width:auto} /* SECTION HEAD */ .section-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin:8px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--border-light);position:relative} .section-head::after{content:"";position:absolute;left:0;bottom:-1px;width:54px;height:2px;background:var(--sec-accent,var(--brand-green))} .section-head .sh-num{font-size:46px;font-weight:800;color:var(--sec-accent,var(--brand-green));line-height:.82;letter-spacing:-.04em;font-variant-numeric:tabular-nums;opacity:.92} .section-head .sh-text{min-width:0} .section-head .sh-text h2{font-size:23px;font-weight:700;color:var(--sec-accent,var(--brand-green));letter-spacing:-.015em;line-height:1.12} .section-head .sh-text .sh-sub{display:block;font-size:13px;color:var(--text-light);font-weight:500;margin-top:4px} .sh-id{display:flex;align-items:center;gap:9px;color:var(--sec-accent,var(--brand-green))} .sh-id .sh-live{font-family:'Roboto Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.78} .sh-id .sh-path{display:inline-flex;align-items:center;gap:5px} .sh-id .sh-path i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)} .sh-id .sh-path i:nth-child(1){opacity:.28}.sh-id .sh-path i:nth-child(2){opacity:.55}.sh-id .sh-path i:nth-child(3){opacity:.85} .sh-id .sh-dot{position:relative;width:9px;height:9px;border-radius:50%;background:currentColor;margin-left:3px;flex-shrink:0} .sh-id .sh-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:shPing 2s cubic-bezier(0,0,.2,1) infinite} @keyframes shPing{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.7);opacity:0}} /* GRID */ .grid{display:grid;gap:16px} .grid.row-hero{grid-template-columns:repeat(4,1fr)} .grid.row-tables{grid-template-columns:1fr 1fr} .grid.row-sources{grid-template-columns:1fr 1fr 1fr} .grid.row-gsc-kpi{grid-template-columns:repeat(4,1fr)} .grid.row-ai-detail{grid-template-columns:1fr 1.25fr} /* CARD */ .card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:14px;padding:18px;box-shadow:var(--shadow-card);position:relative;overflow:hidden;transition:box-shadow .22s ease,transform .22s ease} .card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)} .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px} .card-head .card-title{font-size:13px;font-weight:600;color:var(--text-dark);line-height:1.35;letter-spacing:-.005em;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .source-tag{display:inline-flex;align-items:center;font-size:9.5px;background:var(--brand-green-light);color:var(--brand-green-text);padding:3px 8px;border-radius:5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px} .source-tag.gsc{background:#fef3c7;color:#92400e} .source-tag.ai{background:#ede9fe;color:#6d28d9} /* KPI */ .kpi{background:var(--bg-card);border:1px solid var(--border-light);border-radius:14px;padding:18px;box-shadow:var(--shadow-card);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;min-height:154px;transition:box-shadow .22s ease,transform .22s ease} .kpi:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)} .kpi-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px} .kpi-head .kpi-title{font-size:13px;font-weight:700;color:var(--text-dark);text-transform:uppercase;letter-spacing:.4px;line-height:1.2} .kpi-head .kpi-icon{width:30px;height:30px;border-radius:8px;background:var(--kpi-soft);color:currentColor;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s ease} .kpi:hover .kpi-head .kpi-icon{transform:scale(1.08)} .kpi-head .kpi-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .kpi-value{font-size:32px;font-weight:700;color:var(--text-dark);line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .kpi.views .kpi-value{color:var(--k-views)} .kpi-spark{margin-top:auto;height:46px} .kpi.views{color:var(--k-views);--kpi-soft:var(--k-views-soft)} .kpi.users{color:var(--k-users);--kpi-soft:var(--k-users-soft)} .kpi.sessions{color:var(--k-sessions);--kpi-soft:var(--k-sessions-soft)} .kpi.gsc{color:var(--k-gsc);--kpi-soft:var(--k-gsc-soft)} .kpi .delta-pill{align-self:flex-start;font-size:12px} /* DELTA PILL */ .delta-pill{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap} .delta-pill svg{display:none!important} .delta-pill.up{color:var(--up)} .delta-pill.down{color:var(--down)} .delta-pill.flat{color:var(--flat)} .delta-pill .vs{font-weight:500;color:var(--text-muted);margin-left:3px} .delta-pill.up::before,.delta-pill.down::before{content:"";display:inline-block;width:12px;height:14px;flex:0 0 auto;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-mode:alpha;mask-mode:alpha} .delta-pill.up::before{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} .delta-pill.down::before{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} /* CHART CARD */ .chart-card{display:flex;flex-direction:column;min-height:280px} .chart-card .chart-wrap{flex:1;position:relative;min-height:210px} .chart-card.tall{min-height:340px} .chart-card.tall .chart-wrap{min-height:280px} /* TABLE */ .tbl-card{padding:0;overflow:hidden} .tbl-card .card-head{padding:16px 20px 10px;margin-bottom:0} .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} table{width:100%;border-collapse:collapse;font-size:13px;min-width:0} table thead{background:var(--bg-soft)} table th{text-align:left;font-weight:600;font-size:10.5px;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;padding:10px 16px;border-bottom:1px solid var(--border-light);white-space:nowrap} table th.num,table th.dlt{text-align:right} table td{padding:11px 16px;border-bottom:1px solid var(--border-soft);font-size:13px;color:var(--text-dark);vertical-align:middle;line-height:1.4} table tr:last-child td{border-bottom:none} table tbody tr{transition:background .12s ease} /* zebra (port z audyt-seo-news-4media .report-table) — parzyste wiersze lekko tonowane = lepsza skanowalnosc dlugich tabel na desktopie. Subtelnie, w odcieniu marki. */ table tbody tr:nth-child(even) td{background:#f6faf8} table tr:hover td{background:var(--brand-green-light)} table td.idx{color:var(--text-muted);font-weight:600;width:30px;font-variant-numeric:tabular-nums;text-align:right} table td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-dark);white-space:nowrap;width:1%} table td.dlt{text-align:right;width:1%;white-space:nowrap} table td.share{text-align:right;font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--text-medium);width:74px;white-space:nowrap} /* udzial sklejony z liczba sesji w jednej komorce (.num) — z separatorem „·" */ .num-share{color:var(--text-medium);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} .num-share::before{content:"·";color:var(--text-muted);margin:0 5px;font-weight:700} table td.title-cell{font-size:13px;line-height:1.4} table td.title-cell .title-link{color:var(--text-dark);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;transition:color .15s ease} table td.title-cell .title-link:hover{color:var(--brand-green-dark);text-decoration:underline;text-underline-offset:3px} table td.title-cell .title-link::after{content:" ↗";color:var(--text-muted);font-size:10px;opacity:0;transition:opacity .15s ease} table td.title-cell .title-link:hover::after{opacity:1} table td.title-cell.no-link{color:var(--text-muted);font-style:italic} table td.url-cell{font-family:'Roboto Mono','SF Mono',ui-monospace,monospace;font-size:11.5px;line-height:1.4} table td.url-cell .url-link{color:var(--text-medium);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;transition:color .15s ease} table td.url-cell .url-link:hover{color:var(--brand-green-dark);text-decoration:underline;text-underline-offset:3px} table td.country-cell{display:flex;align-items:center;gap:10px} table td.country-cell .fi{width:22px;height:16px;border-radius:2px;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.08);background-size:cover} table td.country-cell .country-name{font-weight:500} table td.country-cell .country-other-icon{width:22px;height:16px;border-radius:2px;background:#f0f0f0;display:inline-flex;align-items:center;justify-content:center;font-size:11px} .srt{display:inline-block;width:9px;height:7px;margin-left:5px;vertical-align:middle;fill:none;stroke:var(--brand-green-dark);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} /* DONUT */ .donut-card{display:flex;flex-direction:column} /* WAZNE: kontener wykresu Chart.js MUSI byc blokiem position:relative z definowana wysokoscia — NIE flex (flex + responsywny canvas = petla rozrostu, canvas wyjezdza poza viewport / nie laduje sie za 1. razem). Canvas wypelnia kontener. */ .donut-wrap{position:relative;height:220px;width:100%;overflow:hidden} .donut-wrap canvas{display:block;max-width:100%} .donut-legend{margin-top:12px;display:grid;grid-template-columns:1fr;gap:6px;font-size:12px} .donut-legend .li{display:flex;align-items:center;gap:8px;color:var(--text-medium);min-width:0;padding:3px 0} .donut-legend .li .dot{width:10px;height:10px;border-radius:3px;flex-shrink:0} .donut-legend .li .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .donut-legend .li .pct{font-weight:600;color:var(--text-dark);font-variant-numeric:tabular-nums} /* SEGMENTY */ .seg-list{display:flex;flex-direction:column;gap:15px;margin-top:2px} .seg-v{display:flex;flex-direction:column;gap:5px} .seg-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0} .seg-v-top{display:flex;align-items:center;gap:8px} .seg-v-name{font-size:12.5px;font-weight:600;color:var(--text-dark);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .seg-v-pct{font-size:14px;font-weight:700;color:var(--text-dark);font-variant-numeric:tabular-nums} .seg-v-bar{height:7px;background:var(--border-soft);border-radius:99px;overflow:hidden} .seg-v-bar>div{height:100%;border-radius:99px;transition:width .8s cubic-bezier(.16,.84,.44,1)} .seg-v-bot{display:flex;align-items:center;justify-content:space-between;gap:8px} .seg-v-sess{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums} /* KONTYNENTY */ .cont-card{padding:18px} .cont-layout{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:center} .cont-donut .donut-wrap{height:200px} .cont-right{display:flex;flex-direction:column;gap:16px} .cont-list{display:flex;flex-direction:column;gap:14px} .cont-row{display:grid;grid-template-columns:170px 1fr auto;gap:14px;align-items:center} .cont-row .cont-head{display:flex;align-items:center;gap:9px;min-width:0} .cont-row .cont-dot{width:12px;height:12px;border-radius:4px;flex-shrink:0} .cont-row .cont-name{font-size:13.5px;font-weight:600;color:var(--text-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cont-row .cont-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#b45309;background:#fef3c7;padding:2px 6px;border-radius:4px;flex-shrink:0} .cont-bar{height:9px;background:var(--border-soft);border-radius:99px;overflow:hidden;position:relative} .cont-bar-fill{height:100%;border-radius:99px;transition:width .8s cubic-bezier(.16,.84,.44,1)} .cont-row .cont-vals{display:flex;align-items:baseline;gap:8px;white-space:nowrap;justify-content:flex-end;min-width:96px} .cont-row .cont-pct{font-size:15px;font-weight:700;color:var(--text-dark);font-variant-numeric:tabular-nums} .cont-row .cont-sess{font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums} .cont-alert{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fffbeb;border:1px solid #fde68a;border-radius:var(--radius-md);font-size:12.5px;color:#92400e;line-height:1.4} .cont-alert svg{width:18px;height:18px;color:#d97706;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .cont-alert strong{font-weight:700;color:#b45309} /* note-card — blok interpretacyjny/kontekstowy (port .note-block z audyt-seo-news-4media, adaptacja BEZ kreski z lewej: ikona + tlo). Warianty: info (zielony), neutral (szary). */ .note-card{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border-radius:var(--radius-md);font-size:13px;line-height:1.5;border:1px solid;color:var(--text-medium)} .note-card svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .note-card strong{font-weight:700;color:var(--text-dark)} .note-card.info{background:var(--brand-green-light);border-color:var(--brand-green-soft)} .note-card.info svg{color:var(--brand-green-dark)} .note-card.info strong{color:var(--brand-green-text)} .note-card.neutral{background:var(--bg-soft);border-color:var(--border-light)} .note-card.neutral svg{color:var(--text-light)} .cont-tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--text-medium);white-space:nowrap} .cont-tag::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--c);flex-shrink:0} /* GEO SPLIT */ .geo-bottom{display:grid;grid-template-columns:330px 1fr;gap:14px;align-items:start} .geo-split{display:flex;flex-direction:column;gap:14px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:14px;padding:18px;box-shadow:var(--shadow-card);transition:box-shadow .22s ease} .geo-split:hover{box-shadow:var(--shadow-card-hover)} .geo-split-card{display:flex;align-items:center;gap:14px;min-width:0} .geo-split-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .geo-split-card.pl .geo-split-icon{background:var(--brand-green-light)} .geo-split-card.pl .geo-split-icon .fi{width:32px;height:23px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08)} .geo-split-card.out .geo-split-icon{background:#fef3c7} .geo-split-card.out .geo-split-icon svg{width:24px;height:24px;stroke:#b45309;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .geo-split-body{min-width:0} .geo-split-label{font-size:11.5px;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px} .geo-split-value{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:9px;margin-top:5px;flex-wrap:wrap} .geo-split-card.pl .geo-split-value{color:var(--brand-green-dark)} .geo-split-card.out .geo-split-value{color:#b45309} .geo-split-sess{font-size:12px;font-weight:500;color:var(--text-muted);letter-spacing:0} .geo-split-bar{width:100%;height:12px;border-radius:99px;overflow:hidden;display:flex;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)} .geo-split-bar-pl{background:linear-gradient(90deg,var(--brand-green),var(--brand-green-dark));height:100%} .geo-split-bar-out{background:linear-gradient(90deg,#f59e0b,#d97706);height:100%} /* KARTY AI */ .ai-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .ai-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:14px;padding:16px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:156px;transition:all .22s ease} .ai-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)} .ai-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:currentColor;opacity:.9} .ai-card.chatgpt{color:#10A37F;background:linear-gradient(135deg,rgba(16,163,127,.08) 0%, #fff 62%);border-color:rgba(16,163,127,.2)} .ai-card.perplexity{color:#20808D;background:linear-gradient(135deg,rgba(32,128,141,.08) 0%, #fff 62%);border-color:rgba(32,128,141,.2)} .ai-card.gemini{color:#1C69FF;background:linear-gradient(135deg,rgba(28,105,255,.07) 0%, #fff 62%);border-color:rgba(28,105,255,.2)} .ai-card.claude{color:#D97757;background:linear-gradient(135deg,rgba(217,119,87,.09) 0%, #fff 62%);border-color:rgba(217,119,87,.22)} .ai-card.muted{background:var(--bg-soft);color:#94a3b8} .ai-card.muted::before{opacity:.3;background:#cbd5e1} .ai-head{display:flex;align-items:center;gap:12px} .ai-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:currentColor;flex-shrink:0;transition:transform .2s ease;box-shadow:0 2px 6px rgba(0,0,0,.08)} .ai-card:hover .ai-icon{transform:scale(1.08) rotate(-3deg)} .ai-icon svg{width:22px;height:22px;fill:#fff} .ai-card.muted .ai-icon{background:#94a3b8;box-shadow:none} .ai-name{font-size:16px;font-weight:700;color:var(--text-dark);letter-spacing:-.01em} .ai-card.muted .ai-name{color:var(--text-light)} .ai-value{font-size:30px;font-weight:800;color:var(--text-dark);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .ai-card.muted .ai-value{color:var(--text-muted);font-weight:700} .ai-meta{font-size:11.5px;color:var(--text-light);font-weight:500} .ai-share-bar{height:6px;background:var(--border-soft);border-radius:99px;overflow:hidden;margin-top:auto} .ai-share-fill{height:100%;background:currentColor;border-radius:99px;transition:width .9s cubic-bezier(.16,.84,.44,1)} .ai-muted-tag{font-size:11px;color:var(--text-muted);font-style:italic;margin-top:auto} /* PODSUMOWANIE / SYGNAŁY */ .summary{margin:8px 0 12px;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px 18px} .summary-head{display:flex;align-items:center;gap:10px;margin-bottom:10px} .summary-eyebrow{font-size:10.5px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:1.1px;display:inline-flex;align-items:center;gap:8px} .summary-eyebrow svg{width:13px;height:13px;color:var(--brand-green);stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .summary-meta{font-size:10.5px;color:var(--text-muted);margin-left:auto;font-style:italic} .summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .signal{background:var(--bg-card);border:1px solid var(--border-light);border-radius:11px;padding:13px 15px;display:flex;flex-direction:column;gap:5px;min-height:100px;position:relative;overflow:hidden;transition:box-shadow .18s ease,transform .18s ease} .signal::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:currentColor;opacity:.9} .signal:hover{box-shadow:0 6px 18px rgba(0,0,0,.07);transform:translateY(-2px)} .signal-row{display:flex;align-items:center;gap:8px} .signal-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:currentColor;flex-shrink:0} .signal-icon svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .signal.star .signal-icon svg{fill:#fff;stroke:none} .signal-label{font-size:10.5px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.7px} .signal-value{font-size:13.5px;font-weight:700;color:var(--text-dark);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .signal-delta{margin-top:auto} .signal-delta .delta-pill{font-size:11.5px} .signal-delta small{font-weight:500;color:var(--text-muted);margin-left:6px;font-size:10.5px} .signal.up{color:var(--s-up);background:linear-gradient(135deg,var(--s-up-soft) 0%, #fff 64%);border-color:rgba(16,185,129,.28)} .signal.down{color:var(--s-down);background:linear-gradient(135deg,var(--s-down-soft) 0%, #fff 64%);border-color:rgba(239,68,68,.28)} .signal.star{color:var(--s-star);background:linear-gradient(135deg,var(--s-star-soft) 0%, #fff 64%);border-color:rgba(139,92,246,.26)} .signal.ai{color:var(--s-ai);background:linear-gradient(135deg,var(--s-ai-soft) 0%, #fff 64%);border-color:rgba(180,83,9,.24)} .signal.up .signal-value,.signal.down .signal-value{color:var(--text-dark)} /* SOCIAL */ .soc-grid-active{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)} .soc-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:14px;padding:16px;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:148px;transition:all .22s ease} .soc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)} .soc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:currentColor;opacity:.85} .soc-card .soc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;position:relative;z-index:1} .soc-card .soc-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#fff;color:currentColor;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:transform .2s ease} .soc-card:hover .soc-icon{transform:scale(1.08) rotate(-3deg)} .soc-card .soc-icon svg{width:18px;height:18px;fill:currentColor} .soc-card .soc-name{font-size:12.5px;font-weight:600;color:var(--text-dark);line-height:1.2;flex:1;min-width:0} .soc-card .soc-name small{display:block;font-size:10.5px;color:var(--text-muted);font-weight:500;margin-top:2px;letter-spacing:.2px} .soc-card .badge-paid{font-size:9.5px;font-weight:700;background:#fff;color:currentColor;padding:2px 7px;border-radius:5px;border:1px solid currentColor;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0} .soc-card .soc-value{font-size:26px;font-weight:700;color:var(--text-dark);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;position:relative;z-index:1;margin-bottom:6px} .soc-card .soc-spark{margin-top:auto;height:34px;position:relative;z-index:1} .soc-card.fb{color:var(--soc-fb);background:linear-gradient(135deg,var(--soc-fb-bg) 0%, #fff 60%);border-color:var(--soc-fb-border)} .soc-card.ig{color:var(--soc-ig);background:linear-gradient(135deg,var(--soc-ig-bg) 0%, #fff 60%);border-color:var(--soc-ig-border)} .soc-card.ig::before{background:linear-gradient(90deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)} .soc-card.ig .soc-icon{background:linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);color:#fff} .soc-card.x{color:var(--soc-x);background:linear-gradient(135deg,var(--soc-x-bg) 0%, #fff 60%);border-color:var(--soc-x-border)} .soc-card.x .soc-icon{background:#000;color:#fff} .soc-empty-row{padding:12px 18px;background:var(--bg-soft);border:1px dashed var(--border-light);border-radius:var(--radius-md);display:flex;flex-wrap:wrap;align-items:center;gap:10px} .soc-empty-label{font-size:11.5px;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.7px;display:inline-flex;align-items:center;gap:8px} .soc-empty-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text-muted)} .soc-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-pill);font-size:11.5px;font-weight:600;color:var(--text-medium);transition:all .16s ease} .soc-chip:hover{border-color:currentColor;transform:translateY(-1px)} .soc-chip.tt{color:#0f1419}.soc-chip.yt{color:var(--soc-yt)}.soc-chip.li{color:var(--soc-li)} .soc-chip .soc-chip-icon{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0} .soc-chip .soc-chip-icon svg{width:11px;height:11px;fill:currentColor} .soc-chip.tt .soc-chip-icon{background:#000} .soc-chip.yt .soc-chip-icon{background:var(--soc-yt)} .soc-chip.li .soc-chip-icon{background:var(--soc-li)} /* MINI KPI (v6 — „blok danych" bez kreski z lewej. KOLOR per metryka + IKONA w rogu (zamiast cyfry) = od razu widac co jest czym. Niski kafel hugujacy tresc, duza liczba, delta po prawej od liczby. Wzorzec .stat z audyt-seo-news-4media. */ .mini-kpi{--mk-accent:var(--k-gsc);background:var(--bg-card);border:1px solid var(--border-light);border-radius:12px;padding:13px 15px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:7px;transition:box-shadow .2s ease,transform .2s ease} .mini-kpi:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)} .mini-kpi .mk-title{font-size:11px;font-weight:700;color:var(--text-medium);text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:7px} .mini-kpi .mk-title .mk-dot{width:8px;height:8px;border-radius:50%;background:var(--mk-accent);flex-shrink:0} .mini-kpi .mk-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .mini-kpi .mk-value{font-size:33px;font-weight:800;color:var(--text-dark);line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .mini-kpi .mk-row .delta-pill{font-size:13px} /* ikona-znak metryki w prawym dolnym rogu (kolor akcentu, subtelna) */ .mini-kpi .mk-ico{position:absolute;right:11px;bottom:9px;width:30px;height:30px;color:var(--mk-accent);opacity:.22;pointer-events:none} .mini-kpi .mk-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* kolory per metryka */ .mini-kpi.mk-clicks{--mk-accent:#1eb88a} .mini-kpi.mk-impr{--mk-accent:#0ea5b7} .mini-kpi.mk-ctr{--mk-accent:#8b5cf6} .mini-kpi.mk-pos{--mk-accent:#d97706} /* FOOTER */ .footer{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;position:relative} .footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand-green) 0%, var(--brand-green-dark) 100%)} .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 0.8fr;gap:28px;padding:26px 28px 22px} .footer-col{display:flex;flex-direction:column;gap:10px;min-width:0} .ft-legal-mini{margin-top:7px;font-size:11px;color:var(--text-light);font-weight:500;line-height:1.5} .ft-legal-mini a{color:var(--text-light);text-decoration:none;font-weight:600} .ft-legal-mini a:hover{color:var(--brand-green-dark);text-decoration:underline;text-underline-offset:2px} .ft-legal-mini .sep{margin:0 6px;color:var(--border-light)} .footer-label{font-size:10.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:4px} .footer-realiz-row{display:flex;align-items:center;gap:11px;flex-wrap:nowrap} /* logotyp Telos w stopce = klikalny link do telos.rewizja.net (z UTM panelu) */ a.ft-logo-link{text-decoration:none;color:inherit;width:fit-content;transition:transform .18s ease} a.ft-logo-link:hover .ft-word{color:var(--brand-green-dark)} a.ft-logo-link:hover .tsyg{transform:scale(1.05)} a.ft-logo-link .tsyg{transition:transform .18s ease} .footer-realiz-row .realiz-text{display:inline-flex;align-items:center;min-width:0} .footer-realiz-row .tsyg{width:32px;height:32px;flex-shrink:0} .footer-realiz-row .ft-word{font-size:24px;font-weight:800;letter-spacing:-.022em;color:var(--text-dark);line-height:1;flex-shrink:0} .footer-realiz-row .ft-div{width:1px;height:26px;background:var(--border-light);flex-shrink:0} .footer-realiz-row .realiz-text strong{font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);font-family:'Roboto Mono',monospace;display:block;line-height:1.3} .footer-realiz-row .realiz-text small{font-size:11.5px;color:var(--text-light);display:block;margin-top:3px} .footer-note{font-size:12px;color:var(--text-light);line-height:1.5;margin-top:6px} .footer-contact{display:flex;flex-direction:column;gap:6px} .footer-contact .ct-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-medium)} .footer-contact .ct-row svg{width:13px;height:13px;color:var(--brand-green-dark);flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .footer-contact .ct-row a{color:var(--text-medium);font-weight:500} .footer-meta{display:flex;flex-direction:column;gap:0} .footer-meta-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;justify-content:center;padding:8px 0;border-bottom:1px solid var(--border-soft);min-width:0} .footer-meta-item:last-child{border-bottom:0} .footer-meta-item .fm-label{font-size:11.5px;color:var(--text-light);font-weight:500;flex-shrink:0} .footer-meta-item .fm-value{font-size:12.5px;font-weight:600;color:var(--text-dark);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:6px;text-align:left} .footer-meta-item .fm-value .dot-live{width:7px;height:7px;border-radius:50%;background:var(--status-success);box-shadow:0 0 0 3px rgba(39,174,96,.18);animation:pulse 2.4s ease-in-out infinite} .footer-meta-item .fm-value .badge-ver{background:var(--brand-green-light);color:var(--brand-green-text);padding:2px 8px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:.2px} @keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(39,174,96,.18)}50%{box-shadow:0 0 0 6px rgba(39,174,96,.06)}} .footer-bottom{padding:14px 28px;background:var(--bg-soft);border-top:1px solid var(--border-soft);display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--text-muted);flex-wrap:wrap;gap:8px} .footer-legal{display:inline-flex;align-items:center;gap:9px} .footer-legal a{color:var(--text-light);font-weight:600} .footer-legal a:hover{color:var(--brand-green-dark);text-decoration:underline;text-underline-offset:2px} .footer-legal .sep{color:var(--border-light)} /* TO TOP */ .to-top-demo{position:static;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--brand-green),var(--brand-green-dark));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(23,148,110,.32);transition:all .25s ease} .to-top-demo:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(23,148,110,.4)} .to-top-demo svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} /* SYGNET ID */ .tsyg{display:block;color:var(--brand-green)} .tsyg .cv{fill:none;stroke:currentColor;stroke-width:2.9;stroke-linecap:round;stroke-linejoin:round} .tsyg .dt{fill:currentColor} .telos-mark{display:flex;flex-direction:row;align-items:center;gap:12px} .telos-mark .tsyg{width:34px;height:34px;flex-shrink:0} .telos-mark .telos-word{font-size:27px;font-weight:800;letter-spacing:-.022em;line-height:1;color:var(--text-dark)} .telos-mark .telos-div{width:1px;height:26px;background:var(--border-light);flex-shrink:0} .telos-mark .telos-mark-tx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;font-family:'Roboto Mono',monospace} .telos-mark .telos-by{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)} .telos-mark .telos-rw{font-size:12px;color:var(--text-light);font-weight:500} /* ===== rwd-v2 (z v12) ===== */ /* ============================================================ TELOS RWD v2 — warstwa telefon-first czytelnosci. Cel: na telefonie/tablecie kazdy NOSNY podpis >=12px, mniej czystych ozdobnikow, liczby duze, tabele jako karty. Docelowo te reguly trafia do @media w public/assets/telos.css. ============================================================ */ /* --- 1. SZKIELET: zwijanie chrome na mobile (czego kit nie mial) --- */ @media (max-width:768px){ .topbar{grid-template-columns:1fr;gap:13px;text-align:center;padding:14px} .client-mark{justify-content:center} .dp,.datepicker{justify-self:center} .realizacja{justify-self:center;justify-content:center} .telos-mark{justify-content:center;flex-wrap:wrap} .section-head{grid-template-columns:auto 1fr;gap:14px;margin:8px 0 16px} .section-head .sh-num{font-size:36px} .section-head .sh-text h2{font-size:20px} .footer-grid{grid-template-columns:1fr;gap:22px;padding:22px} .anchor-nav .nav-brand{display:none} .dp-menu{width:min(440px,92vw)} } /* --- 2. OZDOBNIKI precz na waskim ekranie (dekoracja, nie dane) --- */ @media (max-width:768px){ .sh-id{display:none} /* sciezka + ping = ornament ID */ .summary-meta{display:none} /* meta-podpis kursywa */ } /* --- 3. PODLOGI TYPOGRAFII: nosne podpisy nie schodza < 12px --- */ @media (max-width:768px){ .delta-pill{font-size:12.5px} .delta-pill .vs{font-size:12px} .seg-v-sess,.cont-sess,.cont-tag,.share,.url-cell,.url-link,.ai-meta, .geo-split-label,.signal-label,.signal-delta small,.fm-label,.mk-title, .soc-empty-label,.soc-chip,.ai-muted-tag,.footer-label,.footer-note, .footer-realiz-row .realiz-text small,.footer-bottom,.fb-noindex, .summary-eyebrow,.dp-note,.title-block .source,.donut-legend .li{font-size:12.5px} .source-tag{font-size:10.5px;padding:3px 9px} .badge-paid,.cont-badge,.badge-ver{font-size:10.5px} /* tabele na tablecie (641-768, jeszcze nie karty): czytelniejsze naglowki i komorki */ table th{font-size:12.5px} table td{font-size:14px} table td.num,table td.share,table td.dlt,table td.idx{font-size:13.5px} table td.url-cell,table td.url-cell .url-link{font-size:12.5px} .sh-text .sh-sub{font-size:13.5px} .card-head .card-title{font-size:14px} .seg-v-name,.cont-name{font-size:13.5px} .seg-v-pct{font-size:15px} .footer-realiz-row .realiz-text strong{font-size:10.5px} } /* --- 4. LICZBY wieksze na telefonie (kluczowe wartosci czytelne) --- */ @media (max-width:480px){ .kpi-value{font-size:clamp(30px,11vw,38px)} .mk-value{font-size:clamp(24px,8.5vw,30px)} .ai-value{font-size:clamp(28px,9vw,34px)} .soc-value,.geo-split-value{font-size:clamp(24px,8vw,30px)} .section-head .sh-num{font-size:33px} .section-head .sh-text h2{font-size:19px} .delta-pill{font-size:13px;gap:5px} .delta-pill.up::before,.delta-pill.down::before{width:13px;height:15px} .cont-row{grid-template-columns:88px 1fr auto;gap:9px} .cont-row .cont-vals{min-width:66px} .cont-row .cont-pct{font-size:14px} .title-block h1{font-size:20px} } /* --- 5. TABELE -> KARTY <=640px: koniec mikrodruku i poziomego scrolla. data-label dokladany z przez JS (w Blade: petla po naglowkach). --- */ @media (max-width:640px){ .tbl-scroll{overflow:visible} .tbl-card table,.tbl-card tbody,.tbl-card tr,.tbl-card td{display:block;width:100%} .tbl-card thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .tbl-card tr{border:1px solid var(--border-light);border-radius:12px;padding:9px 14px;margin:0 14px 12px} .tbl-card tbody tr:first-child{margin-top:4px} .tbl-card tr:hover td{background:transparent} /* zebra WYLACZONA w trybie kart (mobile): tlo na pojedynczych dawalo dziwne podswietlenie tylko pod tekstem. Na mobile karty wystarczaja, zebra zbedna. */ .tbl-card tbody tr:nth-child(even) td{background:transparent} .tbl-card td{border:none!important;padding:7px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:right;font-size:13.5px;width:auto;white-space:normal} .tbl-card td::before{content:attr(data-label);font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.4px;font-size:11px;text-align:left;flex-shrink:0} .tbl-card td.idx{display:none} .tbl-card td.title-cell,.tbl-card td.url-cell{display:block;text-align:left} .tbl-card td.title-cell::before,.tbl-card td.url-cell::before{display:block;margin-bottom:4px} .tbl-card td.title-cell .title-link,.tbl-card td.url-cell .url-link{-webkit-line-clamp:3;font-size:13.5px} .tbl-card td.url-cell .url-link{word-break:break-all} .tbl-card td.country-cell{justify-content:flex-start;gap:10px} .tbl-card td.country-cell::before{content:none} .tbl-card td.num,.tbl-card td.share{font-size:14px} .tbl-card td{min-width:0} .tbl-card tr{overflow:hidden} } /* --- 6. POPRAWKI SPECYFICZNOSCI: base telos.css uzywa selektorow 2-klasowych (np. .cont-row .cont-sess), wiec pojedyncza klasa ich nie nadpisze. Dopasowujemy selektor, zeby podlogi typografii faktycznie zadzialaly. --- */ @media (max-width:768px){ .cont-row .cont-sess{font-size:12.5px} .signal-delta .delta-pill{font-size:12.5px} .mini-kpi .mk-title{font-size:12.5px} .footer-meta-item .fm-label{font-size:12.5px} .cont-row .cont-badge{font-size:10.5px} .soc-card .badge-paid{font-size:10.5px} } /* --- 6b. MNIEJ OZDOBNIKOW na telefonie: deskryptor „by Rewizja.Net" znika z topbara (zostaje w stopce), podpis kanalu social czytelniejszy. --- */ @media (max-width:768px){ .soc-card .soc-name small{font-size:12px} } @media (max-width:480px){ .topbar .telos-mark .telos-div,.topbar .telos-mark .telos-mark-tx{display:none} .topbar .telos-mark .telos-word{font-size:24px} } /* --- 6c. CZYTELNOSC ETYKIET DRUGIEGO RZEDU: linie wtorne (sesji, "vs poprz.", udzial AI, "organic", "brak ruchu") byly 12,5px ale WYSZARZONE (#999) -> nikna obok pogrubionych wartosci. Podnosimy do 13px i przyciemniamy do #666. --- */ @media (max-width:768px){ .signal-delta small,.seg-v-sess,.cont-row .cont-sess,.ai-meta,.ai-muted-tag, .soc-card .soc-name small,.delta-pill .vs,.geo-split-sess{font-size:13px;color:var(--text-light)} .source-tag,.source-tag.gsc,.source-tag.ai{font-size:11px} .soc-card .badge-paid,.cont-row .cont-badge,.footer-meta-item .badge-ver{font-size:11px} .signal-label,.mini-kpi .mk-title,.geo-split-label,.soc-empty-label, .summary-eyebrow,.footer-label{color:var(--text-medium)} } /* --- 7. RUSZTOWANIE KATALOGU (kit-*): zawijanie dlugich etykiet klas, zeby nie rozpychaly strony na waskim ekranie (to NIE jest design system). --- */ @media (max-width:640px){ .kit-block-label{flex-wrap:wrap;align-items:flex-start} .kit-tagname{white-space:normal;word-break:break-word;max-width:100%} .kit-cat-head{flex-wrap:wrap} .kit-row{gap:16px} } /* ===== rwd-v3 (z v12) ===== */ /* ============================================================ RWD v3 — feedback Marcina: max czytelnosc na telefonie/tablecie. Bez „vs poprz." (oczywiste), wieksze liczby wtorne, tabele jako wyrazne karty z delta obok liczby, geografia z paskiem pod regionem. ============================================================ */ /* --- A. „vs poprz." precz na mobile (oczywiste z porownania) --- */ @media (max-width:768px){ .delta-pill .vs{display:none} } /* --- B. SEGMENTY RUCHU: liczby +~50% (sesje i %), delta wyrazniejsza --- */ @media (max-width:768px){ .seg-list{gap:18px} .seg-v-name{font-size:14.5px} .seg-v-pct{font-size:21px;font-weight:800} .seg-v-bar{height:9px} .seg-v-sess{font-size:14.5px;font-weight:600;color:var(--text-medium)} .seg-v-bot .delta-pill{font-size:13.5px} .seg-dot{width:11px;height:11px} } /* --- C. TABELE -> KARTY (telefon <=640): wyrazne wiersze (cien + mocniejsza ramka), wieksze liczby, ZMIANA obok liczby bez etykiety „Zmiana", oddech z prawej --- */ @media (max-width:640px){ .tbl-card tr{border:1px solid #d2dad6;box-shadow:0 1px 3px rgba(20,40,30,.06);border-radius:13px;padding:13px 16px;margin:0 4px 14px;background:#fff;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:9px} .tbl-card td{width:100%;padding:0;font-size:14px} .tbl-card td::before{font-size:11.5px;color:var(--text-light)} /* liczba + zmiana w jednym rzedzie: num rosnie, dlt doklejony, bez etykiety „Zmiana” */ .tbl-card td.num{width:auto;flex:1 1 55%;font-size:17px;font-weight:800;color:var(--text-dark)} .tbl-card td.dlt{width:auto;flex:0 0 auto;justify-content:flex-end;padding-left:2px} .tbl-card td.dlt::before{content:none} .tbl-card td.dlt .delta-pill{font-size:13.5px} .tbl-card td.share{width:100%;font-size:15px;font-weight:700} .tbl-card td.share::before{font-weight:600} /* tytul / url na pelnej szerokosci, wieksze */ .tbl-card td.title-cell,.tbl-card td.url-cell{flex:1 1 100%} .tbl-card td.title-cell .title-link{font-size:14.5px;font-weight:600;color:var(--text-dark);-webkit-line-clamp:3} .tbl-card td.url-cell .url-link{font-size:13px} .tbl-card td.country-cell{flex:1 1 100%;justify-content:flex-start;gap:11px} .tbl-card td.country-cell .country-name{font-size:15px;font-weight:700} .tbl-card td.country-cell .fi{width:28px;height:20px} } /* --- D. KARTY MODELI AI: wieksze liczby + dopisek „sesji · X% udzialu” --- */ @media (max-width:768px){ .ai-grid{gap:13px} .ai-value{font-size:clamp(34px,11vw,44px);font-weight:800} .ai-name{font-size:17px} .ai-meta{font-size:14px;font-weight:600;color:var(--text-medium)} .ai-muted-tag{font-size:13.5px} .ai-card{min-height:auto} } /* --- E. KARTY SOCIAL: wieksze liczby + podpis kanalu --- */ @media (max-width:768px){ .soc-card .soc-value{font-size:clamp(30px,10vw,40px);font-weight:800} .soc-card .soc-name{font-size:14px} .soc-card .soc-name small{font-size:13px} .soc-card{min-height:auto} .soc-spark{height:30px} } /* --- F. GEOGRAFIA — kontynenty: PASEK POD REGIONEM (stack), czytelny badge „uwaga”, wieksze marginesy/oddech --- */ @media (max-width:768px){ .cont-card{padding:16px 16px 18px} .cont-layout{gap:18px} .cont-list{gap:18px} .cont-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"head vals" "bar bar";gap:8px 12px;align-items:center} .cont-row .cont-head{grid-area:head;min-width:0;gap:8px} .cont-row .cont-vals{grid-area:vals;min-width:0;align-items:baseline;gap:9px} .cont-row .cont-bar{grid-area:bar;height:10px} .cont-row .cont-name{font-size:15px;font-weight:700} .cont-row .cont-pct{font-size:18px;font-weight:800} .cont-row .cont-sess{font-size:13.5px;color:var(--text-medium)} .cont-row .cont-badge{font-size:10px;padding:3px 8px;border-radius:6px;background:#fef3c7;color:#b45309;border:1px solid #fde68a} .cont-alert{padding:12px 14px;font-size:13px;margin-top:2px} .cont-alert strong{font-weight:700} } /* --- G. PELNA LISTA KRAJOW (tabela->karty): czytelne, wyrazne wiersze, margines z prawej (dziedziczy z C); kontynent jako tag obok etykiety --- */ @media (max-width:640px){ .tbl-card td.country-cell::before{content:none} .geo-bottom .tbl-card td.num{flex:1 1 50%;font-size:17px} .geo-bottom .tbl-card td.share{font-size:15px} /* kolumna „Kontynent” (tag) w jednym rzedzie etykieta+tag */ .geo-bottom .tbl-card td:not(.country-cell):not(.num):not(.share){width:100%} } /* ===== rwd-v4 (z v12) ===== */ /* ============================================================ RWD v4 — feedback Marcina: WIEKSZE i ZWARTE tresci na mobile. Klucz: koniec „pustego srodka" w tabelach — etykieta i wartosc stoja RAZEM (flex-start), wartosci duze i bold. Top zrodla jak segmenty (bold). Podsumowanie = wieksze karty i tresci. ============================================================ */ /* --- TABELE -> KARTY (telefon <=640): zwarty uklad, duze bold wartosci, etykieta tuz przy wartosci (NIE na przeciwnych krawedziach). --- */ @media (max-width:640px){ .tbl-card tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:16px;row-gap:10px; border:1px solid #cfd7d3;box-shadow:0 1px 4px rgba(20,40,30,.08);border-radius:13px; padding:15px 17px;margin:0 4px 14px;background:#fff} .tbl-card td{display:flex;align-items:baseline;gap:8px;width:auto;padding:0;border:none!important; white-space:normal;font-size:16px;text-align:left;justify-content:flex-start} .tbl-card td::before{content:attr(data-label);font-size:11px;font-weight:700;color:var(--text-light); text-transform:uppercase;letter-spacing:.4px;flex-shrink:0} .tbl-card td.idx{display:none} /* PRIMARY = pierwsza komorka po numerze (nazwa/tytul/url/kraj): duza, bold, bez etykiety, pelna szer. */ .tbl-card td.idx + td{flex:1 1 100%;font-size:16px;font-weight:700;color:var(--text-dark);line-height:1.4} .tbl-card td.idx + td::before{content:none} .tbl-card .title-link{font-size:16px;font-weight:700;color:var(--text-dark);-webkit-line-clamp:3} .tbl-card .url-link{font-size:13.5px;font-weight:600;color:var(--text-medium)} /* METRYKI zwarte w jednym rzedzie: wartosc DUZA bold tuz przy malej etykiecie */ .tbl-card td.num{font-size:19px;font-weight:800;color:var(--text-dark)} .tbl-card td.share{font-size:17px;font-weight:700;color:var(--text-dark)} .tbl-card td.dlt{font-size:14px} .tbl-card td.dlt::before{content:none} .tbl-card td.dlt .delta-pill{font-size:14.5px} /* country: flaga+nazwa wyrownane do srodka, nazwa duza; kontynent pelna szer. */ .tbl-card td.country-cell{flex:1 1 100%;align-items:center;gap:11px} .tbl-card td.country-cell::before{content:none} .tbl-card td.country-cell .fi{width:30px;height:22px} .tbl-card td.country-cell .country-name{font-size:16.5px;font-weight:700;color:var(--text-dark)} .tbl-card td.country-cell .country-other-icon{width:30px;height:22px;font-size:15px} .geo-bottom .tbl-card td:not(.idx):not(.country-cell):not(.num):not(.share):not(.dlt){flex:1 1 100%} .geo-bottom .tbl-card td.num{font-size:19px} .geo-bottom .tbl-card td.share{font-size:17px} .cont-tag{font-size:13px} } /* --- TOP ZRODLA: jak segmenty — nazwa zrodla duza/bold, % bold zielony --- */ @media (max-width:640px){ .row-sources .tbl-card td.idx + td{font-size:17px;font-weight:800} .row-sources .tbl-card td.share{font-size:19px;font-weight:800;color:var(--brand-green-dark)} .row-sources .tbl-card td.num{font-size:19px} } /* --- PODSUMOWANIE OKRESU: wieksze karty i tresci --- */ @media (max-width:768px){ .summary{padding:16px} .summary-grid{gap:12px} .signal{min-height:auto;padding:17px 19px;gap:10px} .signal-icon{width:32px;height:32px} .signal-icon svg{width:17px;height:17px} .signal-label{font-size:12px} .signal-value{font-size:17.5px;-webkit-line-clamp:3;line-height:1.35} .signal-delta .delta-pill{font-size:15px} .signal-delta small{font-size:13px} .summary-eyebrow{font-size:12.5px} .summary-eyebrow svg{width:15px;height:15px} } /* ===== rwd-v6 (z v12) ===== */ /* ============================================================ RWD v6 — mini-KPI: 2 KOLUMNY na telefonie (wypelnia szerokosc, nizszy stos = koniec bialej pustki po bokach i nadmiernej wysokosci). Ikona-znak + kolor per metryka pochodza z bazy .mini-kpi. ============================================================ */ @media (max-width:560px){ .grid.row-gsc-kpi{grid-template-columns:1fr 1fr;gap:12px} .mini-kpi{padding:12px 13px} .mini-kpi .mk-value{font-size:27px} .mini-kpi .mk-row{gap:7px} .mini-kpi .mk-title{font-size:10.5px;letter-spacing:.3px} .mini-kpi .mk-row .delta-pill{font-size:12.5px} .mini-kpi .mk-ico{width:24px;height:24px;right:9px;bottom:8px} } /* ===== rwd-v7 (z v12) ===== */ /* ============================================================ RWD v7 — % UDZIALU obok liczby sesji (NIE pod nia). To udzial w calosci, wiec bez znaku zmiany — czysta wartosc tuz przy liczbie, z separatorem „·". Zmiana (porownanie) zostaje osobno jako delta. ============================================================ */ @media (max-width:640px){ /* share: inline tuz za liczba sesji, bez etykiety „%”, z kropka-separatorem */ .tbl-card td.share{width:auto;flex:0 0 auto;font-size:16px;font-weight:700;color:var(--text-medium)} .tbl-card td.share::before{content:"·";color:var(--text-muted);font-weight:700;margin-right:1px; font-size:16px;letter-spacing:0;text-transform:none} .geo-bottom .tbl-card td.share{font-size:16px} /* country: liczba sesji + udzial w jednej, zwartej linii */ .geo-bottom .tbl-card td.num{flex:0 0 auto} } /* ===== rwd-v8 (z v12) ===== */ /* ============================================================ RWD v8 — kraje: karta jako GRID (deterministyczny uklad, bez kaprysow flex-wrap). Wiersz 1: [flaga+kraj] .......... [delta porownania] (delta PRZY nazwie, prawa) Wiersz 2: kontynent (pelna szer.) Wiersz 3: sesje + udzial obok siebie. Wartosci nie dotykaja prawej krawedzi (padding-right 18). ============================================================ */ @media (max-width:640px){ /* GRID (deterministyczny): [kraj] .. [delta] / kontynent / sesje+udzial. Sesje i udzial sa w JEDNEJ komorce (.num + .num-share) -> zawsze zwarte. */ .geo-bottom .tbl-card tr{ display:grid;grid-template-columns:1fr auto; grid-template-areas:"name delta" "kont kont" "mets mets"; align-items:center;column-gap:10px;row-gap:9px;padding:15px 18px} .geo-bottom .tbl-card td.country-cell{grid-area:name;align-items:center;min-width:0} .geo-bottom .tbl-card td.dlt{grid-area:delta;justify-self:end;align-self:center;width:auto} .geo-bottom .tbl-card td.dlt::before{content:none} .geo-bottom .tbl-card td.dlt .delta-pill{font-size:14px;white-space:nowrap} .geo-bottom .tbl-card td:not(.idx):not(.country-cell):not(.num):not(.dlt){grid-area:kont} .geo-bottom .tbl-card td.num{grid-area:mets;justify-self:start;font-size:18px} .geo-bottom .tbl-card td.num .num-share{font-size:15px} } /* ===== warstwa animacji impeccable v2 (port z telos.css) ===== */ /* ========================================================================= SZABLON WIZUALIZACJI — warstwa animacji „impeccable v2" Aktywna gdy ma klasę .fx-on (dodaje ją telos.js, gdy brak prefers-reduced-motion). Wzorzec dla wszystkich paneli Telos. Mechanika sterowana z telos.js (wipe wykresów, count-up, kaskady, donuty). ========================================================================= */ /* Hero/stagger: dłuższy dojazd + lekki blur-in + miękki spring. */ body.fx-on .reveal{transition:opacity .7s cubic-bezier(.22,.68,0,1.01), transform .7s cubic-bezier(.22,.68,0,1.01), filter .7s ease} body.fx-on .reveal:not(.in){transform:translateY(26px) scale(.992);filter:blur(6px)} body.fx-on .reveal-stagger > *{transition:opacity .62s cubic-bezier(.22,.68,0,1.01), transform .62s cubic-bezier(.22,.68,0,1.01), filter .62s ease} body.fx-on .reveal-stagger:not(.in) > *{transform:translateY(22px) scale(.985);filter:blur(5px)} body.fx-on .reveal-stagger.in > *:nth-child(1){transition-delay:.02s} body.fx-on .reveal-stagger.in > *:nth-child(2){transition-delay:.10s} body.fx-on .reveal-stagger.in > *:nth-child(3){transition-delay:.18s} body.fx-on .reveal-stagger.in > *:nth-child(4){transition-delay:.26s} body.fx-on .reveal-stagger.in > *:nth-child(5){transition-delay:.34s} body.fx-on .reveal-stagger.in > *:nth-child(6){transition-delay:.42s} /* Sekcja: numer 01/02 wjeżdża, akcentowy pasek robi wipe. */ body.fx-on .section-head{position:relative} body.fx-on .section-head .sh-num{transition:transform .55s cubic-bezier(.22,.68,0,1.01) .05s, opacity .55s ease .05s} body.fx-on .section-head:not(.in) .sh-num{transform:translateX(-14px) rotate(-4deg);opacity:0} body.fx-on .section-head::after{content:"";position:absolute;left:0;bottom:-7px;height:2px;width:0;background:var(--sec-accent,var(--brand-green,#17946e));border-radius:2px;transition:width .7s cubic-bezier(.16,.84,.44,1) .12s;opacity:.55} body.fx-on .section-head.in::after{width:64px} /* Delta-pille i mini-KPI: pop-in z lekkim overshootem (po dojechaniu liczby). */ body.fx-on .delta-pill,body.fx-on .mini-kpi .mk-value{will-change:transform,opacity} @keyframes fxPop{0%{opacity:0;transform:translateY(6px) scale(.86)}60%{opacity:1;transform:translateY(0) scale(1.05)}100%{transform:scale(1)}} body.fx-on.fx-run .delta-pill{animation:fxPop .5s cubic-bezier(.22,.68,0,1.01) both} body.fx-on.fx-run .row-hero .delta-pill{animation-delay:.9s} body.fx-on.fx-run .row-gsc-kpi .delta-pill{animation-delay:.5s} /* Karty: spójny lift + cień + mikro-obrót ikony przy hover. */ body.fx-on .kpi,body.fx-on .card,body.fx-on .mini-kpi,body.fx-on .ai-card,body.fx-on .soc-card,body.fx-on .geo-split{transition:box-shadow .26s ease, transform .26s cubic-bezier(.22,.68,0,1.01)} body.fx-on .kpi:hover,body.fx-on .card:hover,body.fx-on .mini-kpi:hover,body.fx-on .ai-card:hover,body.fx-on .soc-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(20,40,30,.10)} body.fx-on .kpi:hover .kpi-icon,body.fx-on .ai-card:hover .ai-icon{transform:scale(1.08) rotate(-4deg)} /* Paski (segmenty + kontynenty): grow od zera + jednorazowy „shine". */ body.fx-on .seg-v-bar>div,body.fx-on .cont-bar-fill,body.fx-on .ai-share-fill{position:relative;overflow:hidden} body.fx-on .seg-v-bar>div.fx-grow,body.fx-on .cont-bar-fill.fx-grow{width:0 !important} @keyframes fxShine{0%{transform:translateX(-120%)}100%{transform:translateX(260%)}} body.fx-on .fx-shine::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%);animation:fxShine 1.1s ease .35s 1} /* Duże wykresy czasowe: wipe clip-path od lewej do prawej na wejściu w viewport. */ body.fx-on .chart-wrap.fx-wipe{clip-path:inset(0 100% 0 0)} body.fx-on .chart-wrap.fx-wipe.fx-go{clip-path:inset(0 0 0 0);transition:clip-path 1.15s cubic-bezier(.16,.84,.44,1)} /* Tabele: kaskada wierszy przy wejściu w viewport. .tbl-scroll ma overflow-x:auto (przeglądarka promuje overflow-y do auto), więc translateY wiersza tworzy chwilowy pionowy scrollbar — klipujemy oś Y. */ body.fx-on .tbl-scroll{overflow-y:hidden} @keyframes fxRow{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}} body.fx-on tbody.fx-cascade tr{opacity:0;animation:fxRow .46s cubic-bezier(.22,.68,0,1.01) both;animation-delay:calc(var(--ri,0) * 38ms)} /* Aktywna kotwica: podkreślenie przesuwa się płynnie. */ body.fx-on .anchor-link{position:relative} body.fx-on .anchor-link::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;background:var(--brand-green,#17946e);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,.68,0,1.01);opacity:0} body.fx-on .anchor-link.active::after{transform:scaleX(1);opacity:.9} /* „Live" kropka aktualizacji — mocniejsze halo. */ body.fx-on .dot-live{animation:fxLive 2.2s ease-in-out infinite} @keyframes fxLive{0%,100%{box-shadow:0 0 0 3px rgba(39,174,96,.18)}50%{box-shadow:0 0 0 7px rgba(39,174,96,.04)}} /* Tabular-nums — zero skakania szerokości liczb podczas count-upu. */ body.fx-on .kpi-value,body.fx-on .mk-value{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* Pop ikon KPI przy wejściu hero. */ @keyframes fxIconPop{0%{transform:scale(0) rotate(-28deg);opacity:0}62%{transform:scale(1.14) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0)}} body.fx-on.fx-run .row-hero .kpi-icon{animation:fxIconPop .56s cubic-bezier(.22,.68,0,1.01) both} body.fx-on.fx-run .row-hero .kpi:nth-child(1) .kpi-icon{animation-delay:.16s} body.fx-on.fx-run .row-hero .kpi:nth-child(2) .kpi-icon{animation-delay:.24s} body.fx-on.fx-run .row-hero .kpi:nth-child(3) .kpi-icon{animation-delay:.32s} body.fx-on.fx-run .row-hero .kpi:nth-child(4) .kpi-icon{animation-delay:.40s} /* Pasek postępu scrolla u góry. */ #fx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:400;background:linear-gradient(90deg,#1eb88a,#17946e);box-shadow:0 0 8px rgba(23,148,110,.5);transition:width .08s linear} body:not(.fx-on) #fx-progress{opacity:0} /* Spotlight podążający za kursorem na kartach. */ body.fx-on .fx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(30,184,138,.10),transparent 62%);z-index:1} body.fx-on .fx-spot:hover::after{opacity:1} body.fx-on .fx-spot > *{position:relative;z-index:2} /* Donut: wejście z narastaniem (skala+fade); sweep gra przez reset+update wykresu. */ body.fx-on .donut-wrap.fx-dn{opacity:0;transform:scale(.9)} body.fx-on .donut-wrap.fx-dn.fx-go{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.22,.68,0,1.01)} /* Magnetyczny „do góry" — płynny powrót transformu. */ body.fx-on .to-top.show{transition:transform .18s cubic-bezier(.22,.68,0,1.01),background .2s,box-shadow .25s,opacity .25s} @media (prefers-reduced-motion: reduce){ body.fx-on .reveal,body.fx-on .reveal-stagger > *{transition:none;filter:none;transform:none} body.fx-on.fx-run .delta-pill,body.fx-on tbody.fx-cascade tr,body.fx-on .fx-shine::after{animation:none;opacity:1} body.fx-on .chart-wrap.fx-wipe{clip-path:none} body.fx-on .donut-wrap.fx-dn{opacity:1;transform:none} body.fx-on.fx-run .row-hero .kpi-icon{animation:none} #fx-progress{display:none} } /* ===== panel layout (poza galeria kit) ===== */ .wrap{max-width:1400px;margin:0 auto;padding:0 22px} .section-head{margin:46px 0 18px} .footer{margin-top:48px} .footer-legal{padding:13px 28px;background:var(--bg-soft);border-top:1px solid var(--border-soft);display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:12px} /* legal (Polityka prywatnosci / Regulamin) pod kolumna „Realizacja panelu", bez osobnego paska */ .footer-realiz-legal{margin-top:11px;display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12px} .footer-realiz-legal a{color:var(--text-light);font-weight:600;text-decoration:none;transition:color .14s ease} .footer-realiz-legal a:hover{color:var(--brand-green-dark)} .footer-realiz-legal .fl-sep{color:var(--border-light)} .footer-legal a{color:var(--text-medium);font-weight:600;text-decoration:none;transition:color .14s ease} .footer-legal a:hover{color:var(--brand-green-dark)} .footer-legal .fl-sep{color:var(--border-light)} .geo-bottom .tbl-card td.share{width:124px} .share-cell{display:flex;flex-direction:column;align-items:stretch;gap:5px} .share-cell .share-pct{text-align:right;font-weight:600;font-variant-numeric:tabular-nums} .share-cell .share-bar{height:6px;background:var(--border-soft);border-radius:99px;overflow:hidden} .share-cell .share-bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand-green),var(--brand-green-dark));transition:width .8s cubic-bezier(.16,.84,.44,1)} .telos-mark-link{text-decoration:none;cursor:pointer} .telos-mark-link .tsyg{transition:transform .18s ease} .telos-mark-link:hover .tsyg{transform:scale(1.06)} .realizacja{display:inline-flex;align-items:center;gap:12px} .btn-back-ico{width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid var(--brand-green-soft);color:var(--brand-green-text);text-decoration:none;flex:none;transition:border-color .15s ease,background .15s ease} .btn-back-ico:hover{border-color:var(--brand-green);background:var(--brand-green-light)} .btn-back-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .topbar{overflow:visible} .topbar::before{border-radius:var(--radius-lg) var(--radius-lg) 0 0} .dp{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative} .dp-menu{z-index:160} .anchor-nav{justify-content:center;position:sticky;top:8px;z-index:60;margin-bottom:20px;scroll-behavior:smooth} /* scroll-do-gory FAB — bazowy .to-top jest w telos.css, ktorego panel v3 NIE laduje (tylko telos-v2.css). TODO PROD: dodac te reguly do warstwy panelLayout w bin/build-telos-v2-css.mjs i regenerowac telos-v2.css. */ .to-top{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--brand-green),var(--brand-green-dark));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px -6px rgba(23,148,110,.5);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .25s ease;z-index:72;border:none;cursor:pointer} .to-top.show{opacity:1;visibility:visible;transform:none} .to-top:hover{transform:translateY(-3px);box-shadow:0 12px 28px -6px rgba(23,148,110,.6)} .to-top svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} /* sticky powrot do Telosa: strzalka w bok (ID) + sygnet; wjezdza w anchor-nav gdy header poza widokiem */ .nav-home{display:inline-flex;align-items:center;gap:7px;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;text-decoration:none;padding:0;margin:0;border-right:1px solid transparent;transition:max-width .32s cubic-bezier(.22,.61,.36,1),opacity .24s ease,padding .32s,margin .32s} .anchor-nav.home-on .nav-home{max-width:96px;opacity:1;padding:4px 11px 4px 4px;margin-right:6px;border-right-color:var(--border-light)} .nav-home .nh-arrow{width:16px;height:16px;flex:none;fill:none;stroke:var(--brand-green-text);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .nav-home .nh-syg{width:21px;height:21px;flex:none;fill:none;stroke:var(--text-dark)} .nav-home .nh-syg .cv{stroke:var(--text-dark);stroke-width:2.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .nav-home .nh-syg .dt{fill:var(--text-dark);stroke:none} .nav-home:hover .nh-arrow{stroke:var(--brand-green-dark)} .nav-home:hover .nh-syg .cv{stroke:var(--brand-green-dark)} @media(prefers-reduced-motion:reduce){.nav-home,.to-top{transition:opacity .2s}} .soc-chip.x{color:#0f1419}.soc-chip.x .soc-chip-icon{background:#0f1419} .soc-chip.fb{color:#1877F2}.soc-chip.fb .soc-chip-icon{background:#1877F2} .soc-chip.ig{color:#DC2743}.soc-chip.ig .soc-chip-icon{background:#DC2743} .client-name .access-pill{display:flex;width:fit-content;margin-top:7px} .geo-split-dlt{margin-top:6px} .bg-sygnet{position:fixed;right:-26px;bottom:-26px;width:min(46vw,540px);height:min(46vw,540px);color:var(--brand-green);opacity:.10;z-index:0;pointer-events:none} .bg-sygnet svg{width:100%;height:100%;display:block} .bg-glow{position:fixed;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,transparent 0%,transparent 38%,rgba(30,184,138,.22) 100%);z-index:0;pointer-events:none} body.fx-on .mini-kpi .mk-ico{position:absolute;z-index:2} @media(max-width:768px){.wrap{padding:0 14px}.section-head{margin:36px 0 16px}.anchor-nav{justify-content:flex-start}.bg-sygnet{opacity:.08;width:min(72vw,360px);height:min(72vw,360px)}} /* tylko chrome aplikacji, ktorego NIE ma w telos-v2.css (tnav, impersonacja, pigulka dostepu, datepicker custom) */ .access-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--radius-pill);background:var(--brand-green-light);color:var(--brand-green-dark);font-size:12px;font-weight:700;border:1px solid rgba(23,148,110,.22)} .access-pill svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .imp-bar{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:9px 18px;background:linear-gradient(135deg,#b45309,#92400e);color:#fff;font-size:13px;font-weight:600} .imp-bar form{margin:0} .imp-bar button{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-pill);padding:5px 14px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit} .imp-bar button:hover{background:rgba(255,255,255,.28)} .owner-contact a{color:var(--brand-green-dark);font-weight:600} .tnav{position:sticky;top:0;z-index:120;display:flex;align-items:center;gap:18px;padding:0 22px;height:54px;background:#fff;border-bottom:1px solid var(--border-light);box-shadow:0 1px 0 rgba(0,0,0,.02)} .tnav-brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.01em} .tnav-logo{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--brand-green),var(--brand-green-dark))} .tnav-logo svg{width:19px;height:19px} .tnav-links{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;flex:1} .tnav-link{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;color:var(--text-medium);white-space:nowrap;transition:all .12s ease} .tnav-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tnav-link:hover{background:var(--brand-green-light);color:var(--brand-green-dark)} .tnav-link.on{background:linear-gradient(135deg,var(--brand-green),var(--brand-green-dark));color:#fff} .tnav-logout{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--radius-pill);font-size:13px;font-weight:700;color:var(--text-medium);border:1px solid var(--border-light);background:#fff;cursor:pointer;font-family:inherit} .tnav-logout svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tnav-logout:hover{border-color:var(--brand-green);color:var(--brand-green-dark)} .dp-custom{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap} .dp-custom label{display:flex;flex-direction:column;gap:3px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)} .dp-custom input[type=date]{font-family:inherit;font-size:12px;border:1px solid var(--border-light);border-radius:8px;padding:6px 9px;color:var(--text-dark)} .dp-custom input[type=date]:focus{outline:none;border-color:var(--brand-green);box-shadow:0 0 0 3px var(--brand-green-light)} .dp-go{background:linear-gradient(135deg,var(--brand-green),var(--brand-green-dark));color:#fff;font-weight:600;font-size:12.5px;border-radius:8px;padding:8px 14px;cursor:pointer;border:none} .dp-go:hover{filter:brightness(1.05)} .grid.row-sources{grid-template-columns:1fr 1fr 1fr} @media (max-width:860px){.tnav{height:auto;flex-wrap:wrap;padding:10px 16px;gap:8px}.tnav-links{order:3;width:100%}} @media (max-width:1100px){.grid.row-sources{grid-template-columns:1fr 1fr}.grid.row-sources .tbl-card{grid-column:1 / -1}} @media (max-width:768px){.grid.row-sources{grid-template-columns:1fr}.grid.row-sources .tbl-card{grid-column:auto}} /* ============================================================ RWD MOBILE v2 — WZORCOWY mobile Telos ID (telefon-first). CALA warstwa jest w @media -> ZERO wplywu na PC (Marcin 2026-06-19). Naprawia wady baseline: karty/kolumny scisniete obok siebie, sticky-nav przewijany w poziomie, top nieczytelny, za male czcionki/cyfry. Docelowo -> warstwa rwd generatora `bin/build-telos-v2-css.mjs`. ============================================================ */ /* === 0) NAGLOWEK STANDARDOWY ROWNIEZ NA PC (Marcin 2026-06-19): bez podpisu, krotkie porownanie === Te reguly sa NIE w @media — celowo, bo PC ma byc tak samo jak mobile: terse daty (tagline nie ma w znaczniku). */ .dp-note{font-size:0!important;line-height:1.5} .dp-note b,.dp-note .dp-vs{font-size:13.5px;font-weight:700} .dp-note .dp-vs{color:var(--brand-green-dark);margin-left:8px} .dp-note .dp-vs::before{content:"vs ";font-size:13.5px;font-weight:600;color:var(--text-muted);margin-right:5px} /* === 1) SIATKI: nic obok siebie na telefonie (czytelnosc > gestosc) === */ /* 4-kol karty: 561-900 -> 2 kol, <=560 -> 1 kol */ @media (max-width:900px){ .grid.row-hero,.grid.row-gsc-kpi,.ai-grid,.summary-grid,.soc-grid-active,.mcards{ grid-template-columns:repeat(2,1fr)!important;gap:13px} /* 2-kol / staloszerokie uklady sekcji -> 1 kol (sekcje 3/5/7: tabele, AI-detal, geo) */ .grid.row-tables,.grid.row-ai-detail,.grid.row-sources,.cont-layout,.geo-bottom,.split-2{ grid-template-columns:1fr!important} .cont-layout{gap:16px}.geo-bottom{gap:14px} } @media (max-width:560px){ .grid.row-hero,.grid.row-gsc-kpi,.ai-grid,.summary-grid,.soc-grid-active,.mcards{ grid-template-columns:1fr!important} .kpi{min-height:auto} } /* === 2) STICKY-NAV -> HAMBURGER w PRAWYM GORNYM ROGU + prostokatny dropdown === */ .nav-burger{display:none} .nav-drop{display:contents} /* PC: wrapper przezroczysty, linki plyna inline jak dotad */ .nav-drop .nav-drop-home{display:none} /* powrot do Telosa TYLKO w mobilnym menu (na PC nie pokazujemy go w pasku) */ .nav-scrim{display:none} @media (max-width:768px){ /* BUBBLE: nawigacja = okragly FAB w lewym dolnym rogu (analogicznie do .to-top), NIE pasek */ .anchor-nav{position:fixed;left:18px;bottom:18px;top:auto;right:auto;width:auto;z-index:60; padding:0;margin:0;background:none;border:none;box-shadow:none;backdrop-filter:none;overflow:visible;display:block} .anchor-nav .nav-brand,.anchor-nav .nav-home{display:none} /* powrot do Telosa jest w TOP (wycentrowany) */ .anchor-nav .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;padding:0; background:linear-gradient(135deg,var(--brand-green),var(--brand-green-dark));border:none;color:#fff;cursor:pointer; box-shadow:0 8px 24px rgba(23,148,110,.36)} .nav-burger .nb-label{display:none} /* w bubble tylko ikona */ .nav-burger .nb-bars{position:relative;width:20px;height:14px;flex:none} .nav-burger .nb-bars i{position:absolute;left:0;right:0;height:2.4px;border-radius:2px;background:#fff;transition:transform .25s ease,opacity .2s ease} .nav-burger .nb-bars i:nth-child(1){top:0}.nav-burger .nb-bars i:nth-child(2){top:6px}.nav-burger .nb-bars i:nth-child(3){top:12px} .anchor-nav.nav-open .nb-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)} .anchor-nav.nav-open .nb-bars i:nth-child(2){opacity:0} .anchor-nav.nav-open .nb-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* panel listy = PROSTOKAT nad bubble (otwiera sie do gory). Wysoki: miesci WSZYSTKIE pozycje + powrot */ .anchor-nav .nav-drop{display:none;position:absolute;bottom:calc(100% + 12px);left:0;z-index:80; flex-direction:column;gap:2px;width:min(290px,84vw);max-height:calc(100vh - 110px);overflow:auto; background:#fff;border:1px solid var(--border-light);border-radius:16px; box-shadow:0 28px 64px -20px rgba(10,53,40,.55);padding:8px} .anchor-nav.nav-open .nav-drop{display:flex} .anchor-nav .nav-drop .anchor-link{display:block;width:100%;text-align:left;padding:11px 15px;border-radius:11px;font-size:14.5px;font-weight:600} .anchor-nav .nav-drop .anchor-link.active{background:var(--brand-green-light);color:var(--brand-green-dark)} /* powrot do Telosa — wyrozniona pozycja na gorze menu */ .anchor-nav .nav-drop .nav-drop-home{display:flex;align-items:center;gap:9px;padding:12px 15px;margin-bottom:4px; border-bottom:1px solid var(--border-soft);border-radius:11px 11px 0 0;color:var(--brand-green-text);font-weight:700;font-size:14.5px} .nav-drop-home svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none} .nav-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(8,40,30,.20);opacity:0;visibility:hidden;transition:opacity .25s} .nav-scrim.on{opacity:1;visibility:visible} } @media (prefers-reduced-motion:reduce){.nav-burger .nb-bars i{transition:none}} /* === 3) TOP: nazwa + domena DO LEWEJ, BEZ podpisu; porownanie terse === */ @media (max-width:900px){ .topbar{grid-template-columns:1fr!important;gap:10px;text-align:left;padding:14px 16px} .pmark,.client-mark{justify-self:start;justify-content:flex-start;text-align:left} .title-block{display:none} /* gdyby byl duzy title-block — precz na mobile */ .pmark .pname{font-size:19px} .pmark .pdom{font-size:13px} .topbar-center{justify-self:stretch;align-items:flex-start} .datepicker{justify-self:start} .realizacja{justify-self:center;justify-content:center;margin-top:2px} /* powrot do Telosa WYCENTROWANY w top */ .telos-mark .telos-word{font-size:21px}.telos-mark .tsyg{width:29px;height:29px} /* porownanie okres-vs-okres: tylko daty + „vs", bez „Biezacy/Porownanie/(poprzednie...)" */ .dp-note{font-size:0!important;line-height:1.5;margin-top:8px} .dp-note b,.dp-note .dp-vs{font-size:13px;font-weight:700} .dp-note .dp-vs{color:var(--brand-green-dark);margin-left:8px} .dp-note .dp-vs::before{content:"vs ";font-size:13px;font-weight:600;color:var(--text-muted);margin-right:5px} } /* === 4) CZCIONKI/CYFRY WIEKSZE NA MOBILE (mocno czytelne; zero wplywu na PC) === */ @media (max-width:768px){ /* duze liczby kart */ .kpi-value{font-size:clamp(32px,9.5vw,42px)} .mini-kpi .mk-value{font-size:clamp(30px,9vw,40px)} .ai-value,.soc-value{font-size:clamp(32px,10vw,42px)} .mcard .mval{font-size:clamp(34px,10vw,44px)} .geo-split-value{font-size:clamp(24px,7vw,30px)} /* etykiety/podpisy — koniec mikro-tekstu */ .kpi-head .kpi-title{font-size:13.5px} .mini-kpi .mk-title{font-size:12.5px} .seg-v-name{font-size:14.5px}.seg-v-pct{font-size:16px}.seg-v-sess{font-size:12.5px} .delta-pill{font-size:13.5px} .source-tag{font-size:11px} .badge{font-size:12px} .sh-src{font-size:11.5px} .mcard .mname{font-size:18px}.mcard .mfull{font-size:13px}.mcard .mstat{font-size:14px} .distleg{font-size:12.5px} .dvm{font-size:13.5px}.dvname{font-size:20px}.dvnote{font-size:13.5px} .cont-name{font-size:15px}.cont-pct{font-size:18px}.cont-sess{font-size:13px} /* listy POD wykresami kolowymi (legenda donuta) — koniec malutkich cyfr */ .donut-legend .li{font-size:15px!important;padding:6px 0} .donut-legend .li .nm{font-size:15px} .donut-legend .li .pct{font-size:17px;font-weight:700} .donut-legend .li .dot{width:12px;height:12px} .ai-name{font-size:17px}.ai-meta{font-size:13.5px} .soc-name{font-size:14.5px} .signal-label{font-size:11.5px}.signal-value{font-size:15px} .section-head .sh-text h2{font-size:21px}.section-head .sh-sub{font-size:13px} .footer-label{font-size:12px}.fm-label{font-size:12.5px}.fm-value{font-size:13.5px} .ft-legal-mini{font-size:12px}.footer-contact .ct-row{font-size:13.5px} .card-head .card-title{font-size:14px} } /* === 5) DELTY +/- % DUZE (Marcin: smialo x2, miejsce jest) — wysoka specyficznosc bije `.kpi .delta-pill` === */ @media (max-width:768px){ .kpi .delta-pill,.signal .delta-pill,.soc-card .delta-pill,.mini-kpi .delta-pill, .ai-card .delta-pill,.geo-split .delta-pill{font-size:25px!important;font-weight:800;line-height:1.1} /* strzalka 3-daszki skalowana do duzej cyfry */ .kpi .delta-pill.up::before,.kpi .delta-pill.down::before, .signal .delta-pill.up::before,.signal .delta-pill.down::before, .soc-card .delta-pill.up::before,.soc-card .delta-pill.down::before{width:21px;height:24px} /* w tabelach (gestsze wiersze) delta czytelna, ale nie gigant */ .tbl-card .delta-pill,.geo-bottom .delta-pill{font-size:18px!important;font-weight:800} } /* === 6) PELNA LISTA KRAJOW: NAZWA na osobnej linii, ponizej „X% ruchu (N sesji) … delta" === (Marcin 2026-06-19: liczby POD nazwa + zaczynamy od PROCENTU: „79,5% ruchu (1 131 sesji) −9,4%"). FLEX: nazwa flex 100% (linia 1, dowolnie dluga). Linia 2 = % + sesje w nawiasie + delta. Linia 3 = kontynent. UWAGA produkcja: odmiana „sesji/sesje" liczona w blade (tu makieta = „sesji" generycznie). */ @media (max-width:768px){ .geo-bottom .tbl-card tr{display:flex!important;flex-wrap:wrap;align-items:baseline;column-gap:7px;row-gap:7px; grid-template-areas:none!important;padding:15px 17px} .geo-bottom .tbl-card td{width:auto!important;border:none!important;grid-area:auto!important;white-space:nowrap} .geo-bottom .tbl-card td.idx{display:none} .geo-bottom .tbl-card td::before{content:none!important} /* zdejmij data-label (SESJE/% udzial/KONTYNENT) */ /* linia 1: NAZWA pelna szerokosc, wlasna linia (dluga nazwa sie zawija) */ .geo-bottom .tbl-card td.country-cell{order:1;flex:1 1 100%;font-size:16.5px;font-weight:700;white-space:normal;min-width:0} /* linia 2: PROCENT najpierw -> „79,5% ruchu (1 131 sesji) … delta" */ .geo-bottom .tbl-card td.share{order:2;flex:0 0 auto} .geo-bottom .tbl-card td.share .share-bar{display:none} .geo-bottom .tbl-card td.share .share-pct{font-size:18px;font-weight:800;color:var(--brand-green-dark)} .geo-bottom .tbl-card td.share .share-pct::after{content:" ruchu";font-size:14px;font-weight:600;color:var(--text-medium)} .geo-bottom .tbl-card td.num{order:3;flex:0 0 auto;font-size:15px;font-weight:700;color:var(--text-medium);gap:0!important} /* gap:0 -> brak spacji miedzy „(" a liczba (td jest flex z gap:8px w rwd-v4) */ .geo-bottom .tbl-card td.num::before{content:"("!important} .geo-bottom .tbl-card td.num::after{content:"\00a0sesji)"} /* nbsp — w flex (gap:0) zwykla spacja by sie ucieła */ .geo-bottom .tbl-card td.dlt{order:4;flex:0 0 auto;margin-left:auto} .geo-bottom .tbl-card td.dlt .delta-pill{font-size:17px!important} /* linia 3: kontynent (drobny tag z kropka) */ .geo-bottom .tbl-card td:has(.cont-tag){order:5;flex:1 1 100%;font-size:13px} } /* ===== EKRANY (jeden naraz, wzorzec monitoring-pozycji) ===== */ .scr-pane{display:none} .scr-pane.scr-on{display:block} /* ===== rezerwa wysokosci pod font-swap Poppins (zero CLS) ===== */ .topbar{min-height:74px} .anchor-nav{min-height:50px} .section-head{min-height:72px} .lm-tt{min-height:66px} .lm-sources{min-height:62px} .lm-quote{min-height:90px} .bf-label{line-height:16px} .bf-opts{min-height:96px} .bf-cost{min-height:80px} .kw-hint{min-height:20px} .tok-pill b{font-weight:800} .tok-pill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none} /* ===== MODAL ladowania (Arystoteles) ===== */ .loadscrim{position:fixed;inset:0;background:rgba(10,40,30,.42);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s ease;z-index:200} body.loading .loadscrim{opacity:1;visibility:visible} .loadmodal{position:fixed;left:50%;top:50%;width:min(440px,92vw);background:#fff;border-radius:18px;box-shadow:0 30px 70px -20px rgba(10,53,40,.55);overflow:hidden;opacity:0;visibility:hidden;transition:opacity .3s ease;z-index:201} .loadmodal,body.loading .loadmodal{transform:translate(-50%,-50%)} body.loading .loadmodal{opacity:1;visibility:visible} .lm-top{display:flex;align-items:center;gap:15px;padding:20px 22px;background:linear-gradient(135deg,var(--brand-green-dark),#0a4d39);color:#fff} .lm-fig{width:58px;height:58px;border-radius:13px;object-fit:cover;flex:none;background:rgba(255,255,255,.14)} .lm-tt b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em} .lm-tt span{display:block;font-size:12.5px;opacity:.88;margin-top:3px} .lm-sources{display:flex;flex-wrap:wrap;gap:9px;padding:18px 22px 4px} .srcchip{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:var(--text-medium);border:1px solid var(--border-light);border-radius:99px;padding:7px 14px} .srcchip .sc-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--brand-green-soft);border-top-color:var(--brand-green-dark);animation:bfspin .8s linear infinite;flex:none} .srcchip.done{color:var(--brand-green-text);border-color:var(--brand-green-soft);background:var(--brand-green-light)} .srcchip.done .sc-spin{border:none;animation:none;background:var(--brand-green-dark);position:relative} .srcchip.done .sc-spin::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} @keyframes bfspin{to{transform:rotate(360deg)}} .lm-quote{padding:8px 22px 20px;font-size:12.5px;color:var(--text-light);line-height:1.55} @media(prefers-reduced-motion:reduce){.loadscrim,.loadmodal{transition:none}.srcchip .sc-spin{animation:none}} /* ===== FORMULARZE ===== */ .bf-form{padding:22px} .bf-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-light);margin-bottom:9px} .bf-label-sm{font-size:10.5px;margin-bottom:7px} .bf-hero{display:flex;align-items:center;gap:12px;border:1.5px solid var(--brand-green-soft);border-radius:14px;padding:6px 6px 6px 16px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease} .bf-hero:hover{border-color:var(--brand-green)} .bf-hero:focus-within{border-color:var(--brand-green);box-shadow:0 0 0 3px var(--brand-green-light)} .bf-hero-ico{width:20px;height:20px;flex:none;color:var(--brand-green-dark);stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .bf-hero input{flex:1;min-width:0;border:none;outline:none;font-family:inherit;font-size:17px;font-weight:500;color:var(--text-dark);background:transparent;padding:11px 0} .kw-hint{font-size:12.5px;color:var(--text-muted);font-weight:500;margin-top:9px;line-height:1.45} .kw-hint b{color:var(--brand-green-text)} .btn-go{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--brand-green),var(--brand-green-dark));color:#fff;font-family:inherit;font-size:14px;font-weight:700;border-radius:11px;padding:12px 20px;cursor:pointer;flex:none;border:none;transition:filter .15s ease,transform .15s ease} .btn-go:hover{filter:brightness(1.05);transform:translateY(-1px)} .btn-go:disabled{opacity:.5;cursor:not-allowed;transform:none} .btn-go svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .bf-opts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:18px;border-top:1px solid var(--border-soft);padding-top:16px} .bf-field input,.bf-field select{width:100%;font-family:inherit;font-size:14px;font-weight:600;color:var(--text-dark);border:1.5px solid var(--brand-green-soft);border-radius:11px;padding:11px 13px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease} .bf-field input:hover,.bf-field select:hover{border-color:var(--brand-green)} .bf-field input:focus,.bf-field select:focus{outline:none;border-color:var(--brand-green);box-shadow:0 0 0 3px var(--brand-green-light)} .bf-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;min-height:32px} .bf-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-dark);background:var(--bg-soft);border:1px solid var(--border-light);border-radius:99px;padding:5px 7px 5px 12px} .bf-chip button{width:20px;height:20px;border-radius:50%;border:none;background:var(--border-light);color:var(--text-medium);font-size:13px;line-height:1;cursor:pointer;flex:none} .bf-chip button:hover{background:#fee2e2;color:#b91c1c} .bf-types{margin-top:18px;border-top:1px solid var(--border-soft);padding-top:16px} .bf-tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px} .bf-type{display:block;cursor:pointer;min-width:0;position:relative} .bf-type input{position:absolute;opacity:0;pointer-events:none} .bf-type span{display:flex;flex-direction:column;gap:3px;height:100%;min-height:104px;border:1.5px solid var(--border-light);border-radius:12px;padding:11px 12px;font-size:13.5px;font-weight:700;color:var(--text-dark);transition:all .14s ease} .bf-type span small{font-size:11.5px;font-weight:500;color:var(--text-muted);line-height:1.35} .bf-type span em{font-style:normal;font-size:12px;font-weight:800;color:var(--brand-green-text);margin-top:auto;padding-top:5px} .bf-type:hover span{border-color:var(--brand-green-soft)} .bf-type input:checked + span{border-color:var(--brand-green);background:var(--brand-green-light);box-shadow:0 2px 8px rgba(23,148,110,.14)} .bf-type input:disabled + span{opacity:.45;cursor:not-allowed} .bf-type input:focus-visible + span{outline:2px solid var(--brand-green);outline-offset:2px} .bf-cost{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--border-soft)} .bf-cost-item{display:flex;flex-direction:column;gap:2px;min-width:0} .bf-cost-item i{font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light)} .bf-cost-item b{font-size:20px;font-weight:800;color:var(--text-dark);font-variant-numeric:tabular-nums;line-height:1.15} .bf-cost-item b.cost{color:var(--brand-green-dark)} .bf-cost-sep{width:1px;align-self:stretch;background:var(--border-light)} .bf-cost .btn-go{margin-left:auto} .bf-warn{font-size:12.5px;font-weight:600;color:#92400e;margin-top:10px;min-height:18px} /* ===== KPI ===== */ .kpi-wm{position:absolute;top:6px;right:14px;font-family:'Roboto Mono',monospace;font-size:46px;font-weight:700;color:var(--text-dark);opacity:.07;z-index:0;pointer-events:none;letter-spacing:-1px;line-height:1} body.fx-on .fx-spot>.kpi-wm{position:absolute;z-index:0} .kpi-head,.kpi-value,.kpi-sub,.kpi-spark,.kpi .delta-pill{position:relative;z-index:1} .kpi-sub{font-size:12px;color:var(--text-muted);font-weight:500;min-height:34px;line-height:1.4} .kpi-value.good{color:var(--brand-green-dark)} .kpi-spark{margin-top:auto;height:34px;min-height:34px} .kpi-spark .spk{width:100%;height:34px;display:block;max-width:100%} .grid.row-hero .kpi{min-height:200px} .kpi-meter{margin-top:auto;height:8px;border-radius:99px;background:var(--border-soft);overflow:hidden;position:relative;z-index:1} .kpi-meter>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#1eb88a,#f59e0b)} /* ===== karty / wykresy ===== */ .card-pad{padding:20px 22px} .card-h{font-size:15px;font-weight:800;color:var(--text-dark);margin-bottom:4px} .card-sub{font-size:12.5px;color:var(--text-light);margin-bottom:14px;line-height:1.45} .chart-box{position:relative;height:330px} .chart-box canvas{max-width:100%} .stack{display:flex;flex-direction:column;gap:18px} .gap-top{margin-top:18px} /* legenda HTML (wykres rysowany tez na ukrytym ekranie; legenda w canvasie mierzylaby sie na 0 px) */ .html-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin-top:12px} .hl-i{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#334155} .hl-i i{width:10px;height:10px;border-radius:50%;flex:none} /* ===== TABELE: pelna szerokosc, bez poziomego scrolla ===== */ .tbl-wrap{overflow:hidden;max-width:100%} .tbl-wrap table{width:100%;table-layout:auto} .tbl-wrap th{white-space:normal;line-height:1.3} .tbl-wrap td{overflow-wrap:anywhere} .kw-q{display:block;font-size:14px;font-weight:600;color:var(--text-dark);line-height:1.3} .kw-quest::before{content:"?";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:8px;border-radius:6px;background:#ede9fe;color:#6d28d9;font-size:11px;font-weight:800;vertical-align:-3px} .h-scope{display:block;font-size:12.5px;color:var(--text-muted);font-weight:500;margin-top:2px} .chip{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.2px;padding:2px 9px;border-radius:99px;white-space:nowrap} .chip-m{background:var(--bg-soft);color:var(--text-medium);border:1px solid var(--border-light)} .chip-buy{background:#fef3c7;color:#92400e} .chip-nav{background:#e0f2fe;color:#075985} .kd{display:inline-flex;align-items:center;justify-content:center;min-width:34px;font-size:12.5px;font-weight:800;border-radius:8px;padding:3px 8px;font-variant-numeric:tabular-nums} .kd-low{background:var(--brand-green-light);color:var(--brand-green-text)} .kd-mid{background:#fef3c7;color:#92400e} .kd-high{background:#fee2e2;color:#b91c1c} .dom-cell a{font-weight:700;color:var(--text-dark)} .dom-cell a:hover{color:var(--brand-green-dark);text-decoration:underline} .dom-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px} tr.you td{background:var(--brand-green-light)!important} .you-tag{display:inline-flex;font-size:10.5px;font-weight:800;color:#fff;background:var(--brand-green-dark);border-radius:99px;padding:1px 8px;margin-left:6px;vertical-align:2px} .pos-b{display:inline-flex;align-items:center;justify-content:center;min-width:28px;font-size:13px;font-weight:800;color:#fff;background:#1eb88a;border-radius:8px;padding:3px 8px;font-variant-numeric:tabular-nums} .pos-b.p3{background:#0d8c6b} .pos-cell{width:1%} .pg-dom{display:block;font-size:14px;font-weight:700;color:var(--text-dark)} .comp-cell{font-weight:600;color:var(--text-dark)} .pos-none{font-size:12px;color:var(--text-muted);font-weight:600} .zero{font-weight:800;color:#b91c1c} .cov{display:inline-flex;font-size:12px;font-weight:800;border-radius:99px;padding:3px 11px;white-space:nowrap;margin-right:9px} .cov.cv-ok{background:var(--brand-green-light);color:var(--brand-green-text)} .cov.cv-mid{background:#fef3c7;color:#92400e} .cov.cv-no{background:#fee2e2;color:#b91c1c} .uv{display:block;color:var(--brand-green-dark);font-weight:600;font-size:12.5px;font-family:'Roboto Mono',monospace;overflow-wrap:anywhere;margin-top:3px} .cov-cell .uv{display:inline} .uv:hover{text-decoration:underline} .open-link{font-size:12.5px;font-weight:700;color:var(--brand-green-dark)} .open-link:hover{text-decoration:underline} .tbl-foot{padding:12px 20px 16px;font-size:12.5px;color:var(--text-light);font-weight:600;border-top:1px solid var(--border-soft)} /* ===== mini statystyki ===== */ .mstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px} .mstat{background:var(--bg-card);border:1px solid var(--border-light);border-radius:13px;padding:15px 17px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:5px;box-shadow:var(--shadow-card);min-width:0;transition:transform .2s ease,box-shadow .2s ease} .mstat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc,var(--brand-green))} .mstat .ms-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light)} .mstat .ms-v{font-size:28px;font-weight:800;color:var(--text-dark);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .mstat .ms-f{font-size:12px;color:var(--text-muted);font-weight:500;line-height:1.4} body.fx-on .mstat:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(20,40,30,.10)} /* ===== explainer Arystoteles (kanon regula 29) ===== */ .arist-note{display:flex;gap:18px;align-items:center;background:var(--brand-green-light);border:1px solid var(--brand-green-soft);border-radius:14px;padding:16px 20px;margin-top:16px} .arist-note .arist-img{flex:none;width:104px;height:104px;object-fit:contain;background:transparent;border:0} .arist-note .arist-tx{min-width:0} .arist-note .arist-tx p{font-size:13px;line-height:1.6;color:var(--text-medium);margin:0 0 7px} .arist-note .arist-tx p:last-child{margin-bottom:0} .arist-note .arist-tx b{color:var(--brand-green-text)} /* ===== przelacznik trybu w formularzu (skrot do drugiego ekranu) ===== */ .mode-switch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;font-size:13px;color:var(--text-medium)} .mode-switch a{font-weight:700;color:var(--brand-green-dark)} .mode-switch a:hover{text-decoration:underline} .bf-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:var(--text-dark);color:#fff;font-size:13px;font-weight:600;padding:11px 20px;border-radius:99px;box-shadow:0 12px 30px rgba(0,0,0,.25);opacity:0;visibility:hidden;transition:all .25s ease;z-index:90} .bf-toast.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} @media(max-width:1100px){ .bf-tgrid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:900px){ .bf-opts{grid-template-columns:minmax(0,1fr);gap:14px} .mstats{grid-template-columns:minmax(0,1fr)} .chart-box{height:290px} .tbl-wrap th,.tbl-wrap td{padding-left:10px;padding-right:10px} } @media(max-width:768px){ .kw-q,.pg-dom{font-size:15px} .chip,.cov,.kd{font-size:12px} .kpi-sub{font-size:12.5px} .mstat .ms-v{font-size:30px} .bf-cost-item b{font-size:22px} .uv{font-size:13px} } @media(max-width:760px){ .bf-hero{flex-wrap:wrap;padding:14px} .bf-hero input{flex:1 1 100%;font-size:16px;padding:6px 0} .btn-go{width:100%;justify-content:center} .bf-cost-sep{display:none} .bf-cost .btn-go{margin-left:0} } @media(max-width:640px){ .arist-note{flex-direction:column;align-items:flex-start;gap:12px;padding:15px 17px} .arist-note .arist-img{width:88px;height:88px} .tbl-card td.kw-cell,.tbl-card td.dom-cell,.tbl-card td.page-cell,.tbl-card td.cov-cell{display:block;text-align:left;width:100%} .tbl-card td.kw-cell::before,.tbl-card td.dom-cell::before,.tbl-card td.page-cell::before,.tbl-card td.cov-cell::before{display:block;margin-bottom:4px} .cov-cell .uv{display:block;margin-top:6px} .tbl-card .tbl-wrap table,.tbl-card .tbl-wrap tbody{width:100%;box-sizing:border-box} .tbl-card .tbl-wrap tr{width:auto!important;box-sizing:border-box} .tbl-card .tbl-wrap td{box-sizing:border-box;max-width:100%} .tbl-card .tbl-wrap thead{display:none} .pos-cell{width:auto} } @media(max-width:420px){ .bf-tgrid{grid-template-columns:minmax(0,1fr)} } .bf-cost-item,.bf-cost-sep{display:none!important}@media (max-width:640px){.tbl-card thead{display:none}.tbl-card td{min-width:0;flex-wrap:wrap}.tbl-card span.tc{max-width:100%;white-space:normal}.seg-v-name{white-space:normal;overflow:visible;text-overflow:clip}}html{scrollbar-width:none}html::-webkit-scrollbar{display:none}body{overflow-x:hidden}.mk-strip,.mk-note,.mknote{display:none!important}