/* FONT: @import usuniety - tworzyl blokujacy lancuch zadan (HTML -> vss.css -> elms-sans.css -> woff2). Fonty laduje teraz w , PRZED tym plikiem. Wstawia go automatycznie tools/fix-html.mjs. */ /* Self-host: Elms Sans (marka) jest jedynym self-hosted fontem dostępnym w tym środowisku. Space Grotesk / IBM Plex zostały usunięte z @font-face - pliki .woff2 nie istniały na serwerze, co powodowało błędy 503 przy każdym ładowaniu strony. Stosy czcionek spadają teraz na Elms Sans + fonty systemowe (bez CDN, zgodnie z RODO). */ /* ========================================================================== Studio VSS.net — redesign 2026 SoftwareStudio Group Sp. z o.o. Marka: pomarańcz #ff6a13 + granat. Typografia techniczna: Space Grotesk + IBM Plex. ========================================================================== */ :root { --ss-orange: #ff6a13; --ss-orange-600: #e85d09; --ss-orange-300: #ff9a5c; /* --ss-orange (#ff6a13) ma tylko 2.9:1 na bialym - NIE uzywac go do tekstu ani jako tla pod bialym tekstem. Do tego sluzy --ss-orange-cta (4.9:1 z bialym tekstem). */ --ss-orange-cta: #c4470a; --ss-orange-cta-600: #9c3a06; --ss-orange-ink: #c4470a; --ss-amber: #f59e1b; --ss-ink: #0c1320; --ss-ink-700: #122036; --ss-navy: #16243f; --ss-navy-600: #1b2d4f; --ss-blue: #2b5fa3; --ss-blue-light: #e9f1fc; --ss-text: #14202f; --ss-muted: #5a6a7e; --ss-faint: #5f6d80; /* bylo #8a97a8 = 2.9:1 na bialym (WCAG fail) */ --ss-border: #e4e9f2; --ss-border-soft: #eef2f8; --ss-white: #ffffff; --ss-bg-alt: #f5f7fb; --ss-bg-warm: #f8f6f3; --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-xl: 30px; --sh-sm: 0 1px 3px rgba(16,28,48,.06), 0 1px 2px rgba(16,28,48,.05); --sh: 0 8px 28px -12px rgba(16,28,48,.18); --sh-md: 0 18px 48px -18px rgba(16,28,48,.28); --sh-lg: 0 32px 70px -24px rgba(12,19,32,.40); --sh-orange: 0 16px 40px -16px rgba(255,106,19,.5); --f-head: 'Elms Sans', 'Segoe UI', system-ui, sans-serif; --f-body: 'Elms Sans', 'Segoe UI', system-ui, sans-serif; --f-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace; --maxw: 1200px; --ease: cubic-bezier(.22,.61,.36,1); --t: .25s var(--ease); --focus-ring: 0 0 0 3px #fff, 0 0 0 6px rgba(43,95,163,.65); --focus-ring-dark: 0 0 0 3px #0c1320, 0 0 0 6px rgba(255,154,92,.9); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* P2-8: overflow-x: hidden zdjete - maskowalo przepelnienie zamiast je usuwac. Zrodlo: .shot-bar .url (white-space: nowrap, min-width: auto) rozpychal sciezke min-content elementu siatki w .art-hero-inner do 353px przy 312px dostepnych. Naprawione min-width: 0 na .shot-bar .url i na elementach siatki. */ body { font-family: var(--f-body); color: var(--ss-text); background: var(--ss-white); line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; } img { height: auto; } a { color: var(--ss-blue); text-decoration: none; transition: color var(--t); } a:hover { color: var(--ss-orange-ink); } h1, h2, h3, h4, h5 { font-family: var(--f-head); color: var(--ss-navy-600); line-height: 1.12; font-weight: 600; letter-spacing: -.018em; text-wrap: balance; } p { text-wrap: pretty; } ::selection { background: var(--ss-orange-cta); color: #fff; } /* FOCUS - w oryginale nie bylo ZADNEGO stylu focus: nawigacja klawiatura byla niemozliwa */ :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; } .hero :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible, .specs :focus-visible, .roi-results :focus-visible, .art-hero :focus-visible { box-shadow: var(--focus-ring-dark); } /* SKIP LINK */ .skip-link { position: absolute; left: 16px; top: -60px; z-index: 900; background: var(--ss-ink); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-sm) var(--r-sm); font-family: var(--f-head); font-weight: 600; transition: top .15s var(--ease); } .skip-link:focus { top: 0; color: #fff; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { padding: clamp(64px, 8vw, 110px) 0; } .section--alt { background: var(--ss-bg-alt); } .section--warm { background: var(--ss-bg-warm); } .section--tight { padding-top: 0; } .wide-section { padding: clamp(64px, 8vw, 110px) 0; } .wide-section.section--alt { background: var(--ss-bg-alt); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-orange-ink); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--ss-orange); opacity: .8; } .eyebrow--center { justify-content: center; } .section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 60px); } .section-head--center { margin-left: auto; margin-right: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } .section-title { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3rem); margin: 16px 0 0; } .section-title em { font-style: normal; color: var(--ss-orange-ink); } .section-lead { margin-top: 18px; font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); color: var(--ss-muted); line-height: 1.7; } .section-head--center .section-lead { margin-left: auto; margin-right: auto; } /* PRZYCISKI */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 999px; font-family: var(--f-head); font-size: .95rem; font-weight: 600; letter-spacing: -.01em; border: 1.5px solid transparent; cursor: pointer; transition: transform var(--t), background var(--t), border-color var(--t), color var(--t), box-shadow var(--t); white-space: nowrap; line-height: 1; } .btn svg { width: 18px; height: 18px; } .btn--primary { background: var(--ss-orange-cta); border-color: var(--ss-orange-cta); background-clip: border-box; color: #fff; box-shadow: var(--sh-orange); } .btn--primary:hover { background: var(--ss-orange-cta-600); border-color: var(--ss-orange-cta-600); color: #fff; transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--ss-navy-600); border-color: var(--ss-border); } .btn--ghost:hover { border-color: var(--ss-orange-cta); color: var(--ss-orange-ink); transform: translateY(-2px); } .btn--on-dark { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); } .btn--on-dark:hover { background: #fff; color: var(--ss-navy-600); border-color: #fff; transform: translateY(-2px); } .btn--lg { padding: 17px 32px; font-size: 1rem; } .btn .arr { transition: transform var(--t); } .btn:hover .arr { transform: translateX(4px); } /* HEADER */ .site-header { position: sticky; top: 0; z-index: 600; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--ss-border-soft); transition: box-shadow var(--t), border-color var(--t); } /* Kotwice sekcji: rekompensata wysokosci sticky headera (74px), zeby klik w menu nie ladowal pod belka */ section[id], .art-content h2[id] { scroll-margin-top: 96px; } .site-header.is-stuck { box-shadow: 0 8px 30px -16px rgba(16,28,48,.25); border-color: var(--ss-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 74px; } .logo-link { display: flex; align-items: center; flex-shrink: 0; } .logo-link img { height: 40px; width: auto; } .main-nav { display: flex; align-items: center; gap: 2px; } .main-nav a { padding: 9px 14px; font-family: var(--f-head); font-size: .92rem; font-weight: 500; color: var(--ss-text); border-radius: var(--r-sm); transition: background var(--t), color var(--t); } .main-nav a:hover { background: var(--ss-bg-alt); color: var(--ss-orange-ink); } .main-nav a[aria-current="page"] { color: var(--ss-orange-ink); background: rgba(196,71,10,.08); } .main-nav .btn--demo { margin-left: 8px; background: var(--ss-orange-cta); color: #fff; padding: 11px 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; border: none; } .main-nav .btn--demo:hover { background: var(--ss-orange-cta-600); color: #fff; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 1px solid var(--ss-border); border-radius: var(--r-sm); padding: 10px 11px; cursor: pointer; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ss-navy-600); border-radius: 2px; transition: var(--t); } /* HERO */ .hero { position: relative; background: radial-gradient(120% 120% at 85% -10%, rgba(255,106,19,.22), transparent 46%), radial-gradient(90% 90% at 8% 110%, rgba(43,95,163,.28), transparent 55%), linear-gradient(160deg, var(--ss-ink) 0%, var(--ss-ink-700) 60%, var(--ss-navy) 100%); color: #fff; overflow: hidden; padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); } .hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%); pointer-events: none; } .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(36px, 5vw, 72px); align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #ffd9bd; background: rgba(255,106,19,.14); border: 1px solid rgba(255,106,19,.34); padding: 7px 14px; border-radius: 999px; } .hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ss-orange); box-shadow: 0 0 0 0 rgba(255,106,19,.6); animation: pulse 2.4s infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,106,19,.55);} 70%{box-shadow:0 0 0 9px rgba(255,106,19,0);} 100%{box-shadow:0 0 0 0 rgba(255,106,19,0);} } .hero h1 { color: #fff; font-size: clamp(2.15rem, 1.3rem + 3.8vw, 3.85rem); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; margin: 22px 0 0; } .hero h1 em { font-style: normal; color: var(--ss-orange); } .hero-lead { margin: 22px 0 0; max-width: 540px; color: rgba(255,255,255,.74); font-size: clamp(1.02rem, .98rem + .35vw, 1.18rem); line-height: 1.7; } .hero-lead strong { color: #fff; font-weight: 600; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; } .hero-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.12); width: 100%; } .stat-item { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); padding: 18px 14px; text-align: center; transition: var(--t); } .stat-item:hover { background: rgba(255,255,255,.1); border-color: rgba(255,106,19,.5); } .stat-num { font-family: var(--f-head); font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); font-weight: 700; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; } .stat-num span { color: var(--ss-orange); } .stat-label { font-size: .84rem; color: rgba(255,255,255,.8); margin-top: 8px; line-height: 1.45; } .hero-visual { position: relative; z-index: 2; } .hero-quick { position: relative; z-index: 2; margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 480px; } .hero-qcard { display: flex; align-items: center; gap: 13px; padding: 16px 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); color: #fff; transition: var(--t); } .hero-qcard:hover { background: rgba(255,255,255,.1); border-color: rgba(255,106,19,.5); transform: translateY(-3px); color: #fff; } .hero-qcard .ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(150deg, var(--ss-orange), var(--ss-orange-600)); display: flex; align-items: center; justify-content: center; } .hero-qcard .ic svg { width: 22px; height: 22px; stroke: #fff; } .hero-qcard b { font-family: var(--f-head); font-size: .9rem; font-weight: 600; display: block; } .hero-qcard > span > span { font-size: .82rem; color: rgba(255,255,255,.78); line-height: 1.4; display: block; margin-top: 3px; } /* TRUST STRIP */ .trust { background: var(--ss-orange-cta); } /* bylo #ff6a13: bialy tekst mial 2.9:1 */ .trust-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 16px 0; } .trust-item { display: flex; align-items: center; gap: 9px; color: #fff; font-family: var(--f-head); font-size: .9rem; font-weight: 500; } .trust-item svg { flex-shrink: 0; width: 18px; height: 18px; opacity: .92; } /* MODUŁY */ .modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .mcard { position: relative; background: var(--ss-white); border: 1px solid var(--ss-border); border-radius: var(--r-lg); padding: 30px 28px 28px; display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t), border-color var(--t); overflow: hidden; } .mcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--ss-orange), var(--ss-amber)); transform: scaleX(0); transform-origin: left; transition: transform var(--t); } .mcard:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: transparent; } .mcard:hover::before { transform: scaleX(1); } .mcard-ic { width: 56px; height: 56px; border-radius: 15px; background: linear-gradient(150deg, rgba(255,106,19,.14), rgba(245,158,27,.1)); border: 1px solid rgba(255,106,19,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .mcard-ic svg { width: 28px; height: 28px; stroke: var(--ss-orange); fill: none; } .mcard .tag { font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-orange-ink); margin-bottom: 9px; } .mcard h3 { font-size: 1.18rem; margin-bottom: 10px; } .mcard p { font-size: .92rem; color: var(--ss-muted); margin: 0 0 8px; } .mcard .benefit { font-size: .86rem; color: var(--ss-text); margin-top: auto; padding-top: 14px; } .mcard .benefit strong { color: var(--ss-orange-ink); } .mcard .product-link { margin-top: 16px; font-family: var(--f-head); font-size: .9rem; font-weight: 600; color: var(--ss-orange-ink); display: inline-flex; align-items: center; gap: 6px; } .mcard .product-link .arr { transition: transform var(--t); } .mcard:hover .product-link .arr { transform: translateX(4px); } /* FEATURE ROWS */ .featurerows { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 80px); } .frow { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .frow--rev .frow-media { order: 2; } .frow-body .feature-label { font-family: var(--f-mono); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-orange-ink); } .frow-body .feature-title { font-family: var(--f-head); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); font-weight: 600; color: var(--ss-navy-600); margin: 12px 0 14px; line-height: 1.15; } .frow-body p { color: var(--ss-muted); font-size: 1rem; margin: 0; } .frow-body .feature-points { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .frow-body .feature-points li { position: relative; padding-left: 28px; font-size: .92rem; color: var(--ss-text); } .frow-body .feature-points li svg { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; stroke: var(--ss-orange); } /* SHOT (ramka zrzutu) */ .shot { position: relative; margin: 0; border: 1px solid var(--ss-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); background: var(--ss-white); transition: transform var(--t), box-shadow var(--t); } .shot:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); } .shot-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--ss-bg-alt); border-bottom: 1px solid var(--ss-border); } .shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d3dae6; } .shot-bar i:nth-child(1){ background:#ff6058; } .shot-bar i:nth-child(2){ background:#ffbd2e; } .shot-bar i:nth-child(3){ background:#28c840; } .shot-bar .url { margin-left: 10px; font-family: var(--f-mono); font-size: .7rem; color: var(--ss-faint); background: #fff; border: 1px solid var(--ss-border); border-radius: 6px; padding: 3px 10px; flex: 1; min-width: 0; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shot-canvas { position: relative; aspect-ratio: 16/10; background: var(--ss-bg-alt); } .shot-canvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; } .shot-ph { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; padding: 18px; background: linear-gradient(135deg, #fdfefe, #eef2f8); } .shot-ph .ph-row { display: flex; gap: 9px; } .shot-ph .ph-line { height: 11px; border-radius: 4px; background: rgba(43,95,163,.1); } .shot-ph .ph-block { flex: 1; border-radius: 8px; background: #fff; border: 1px solid var(--ss-border); box-shadow: var(--sh-sm); } .shot-ph .ph-accent { background: linear-gradient(135deg, rgba(255,106,19,.16), rgba(255,106,19,.06)); border-color: rgba(255,106,19,.2); } .shot-cap { padding: 13px 16px; font-size: .82rem; color: var(--ss-muted); border-top: 1px solid var(--ss-border); background: var(--ss-white); } .shot-tag { position: absolute; top: 12px; right: 12px; z-index: 3; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(12,19,32,.7); border-radius: 6px; padding: 4px 9px; backdrop-filter: blur(4px); } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; } .gallery-tile { background: var(--ss-white); border: 1px solid var(--ss-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); cursor: zoom-in; transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .gallery-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(255,106,19,.45); } .gallery-tile-img { aspect-ratio: 4/3; overflow: hidden; background: var(--ss-bg-alt); } .gallery-tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; } .gallery-tile-body { padding: 13px 15px 15px; } .gallery-tile-title { font-family: var(--f-head); font-weight: 600; font-size: .88rem; color: var(--ss-navy-600); line-height: 1.3; margin-bottom: 5px; } .gallery-tile-desc { font-size: .78rem; color: var(--ss-muted); line-height: 1.5; } /* feature-row (artykul) - duplikat usuniety, jedyna definicja jest w vss-article.css. */ /* TECHNOLOGIA */ .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .why-item { display: flex; gap: 18px; padding: 26px; background: var(--ss-white); border: 1px solid var(--ss-border); border-radius: var(--r-lg); transition: transform var(--t), box-shadow var(--t); } .why-item:hover { transform: translateY(-3px); box-shadow: var(--sh); } .why-ic { flex-shrink: 0; width: 50px; height: 50px; border-radius: 13px; background: rgba(255,106,19,.1); display: flex; align-items: center; justify-content: center; } .why-ic svg { width: 26px; height: 26px; stroke: var(--ss-orange); fill: none; } .why-item h3 { font-size: 1.05rem; margin-bottom: 7px; } .why-item p { font-size: .9rem; color: var(--ss-muted); margin: 0; } .why-item p strong { color: var(--ss-navy-600); } .specs { margin-top: 28px; background: var(--ss-ink); border-radius: var(--r-lg); padding: 32px clamp(24px,4vw,40px); color: #fff; position: relative; overflow: hidden; } .specs::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:40px 40px; mask-image: radial-gradient(80% 120% at 100% 0%,#000,transparent 70%); pointer-events: none;} .specs h3 { color: #fff; display: flex; align-items: center; gap: 11px; font-size: 1.1rem; margin-bottom: 22px; position: relative; } .specs h3 svg { width: 22px; height: 22px; stroke: var(--ss-orange); } .specs dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 32px; margin: 0; position: relative; } .specs dt { font-family: var(--f-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ss-orange-300); margin-bottom: 6px; } .specs dd { margin: 0; color: rgba(255,255,255,.9); font-size: .94rem; font-weight: 500; } /* KALKULATOR ROI */ .roi-calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,48px); align-items: start; margin-top: 44px; } .roi-inputs { background: var(--ss-white); border: 1px solid var(--ss-border); border-radius: var(--r-lg); padding: clamp(26px,3vw,34px); box-shadow: var(--sh-sm); } .roi-field { margin-bottom: 22px; } .roi-field:last-child { margin-bottom: 0; } .roi-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--f-head); font-size: .88rem; font-weight: 600; color: var(--ss-navy-600); margin-bottom: 10px; } .roi-field label .roi-val { font-family: var(--f-mono); font-size: .82rem; color: var(--ss-orange); font-weight: 700; white-space: nowrap; } .roi-field input[type="range"] { width: 100%; height: 6px; border-radius: 999px; accent-color: var(--ss-orange); cursor: pointer; display: block; } .roi-results { position: relative; background: linear-gradient(160deg, var(--ss-ink), var(--ss-navy)); border-radius: var(--r-lg); padding: clamp(26px,3vw,34px); color: #fff; overflow: hidden; } .roi-results::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:36px 36px; mask-image: radial-gradient(80% 100% at 100% 0%,#000,transparent 70%); pointer-events: none; } .roi-results h3 { position: relative; color: #fff; font-size: 1rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .roi-results h3 svg { width: 20px; height: 20px; stroke: var(--ss-orange); flex-shrink: 0; } .roi-breakdown { position: relative; display: flex; flex-direction: column; gap: 0; margin-bottom: 6px; } .roi-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .88rem; color: rgba(255,255,255,.8); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); } .roi-row b { font-family: var(--f-head); color: #fff; font-weight: 600; font-size: .92rem; white-space: nowrap; } .roi-row.roi-total-row { border-bottom: none; padding-top: 16px; } .roi-row.roi-total-row span { font-family: var(--f-head); font-size: .92rem; color: rgba(255,255,255,.85); } .roi-row.roi-total-row b { font-size: 1.4rem; color: var(--ss-orange-300); } .roi-meta { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 22px 0; } .roi-meta div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); padding: 13px 8px; text-align: center; } .roi-meta .roi-meta-num { font-family: var(--f-head); font-size: 1.1rem; font-weight: 700; color: #fff; line-height: 1.15; } .roi-meta .roi-meta-label { font-size: .74rem; color: rgba(255,255,255,.8); margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; } .roi-bar-wrap { position: relative; height: 8px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; margin-bottom: 8px; } .roi-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--ss-orange), var(--ss-amber)); border-radius: 999px; transition: width .4s var(--ease); } .roi-bar-caption { position: relative; font-size: .8rem; color: rgba(255,255,255,.78); margin-bottom: 4px; } .roi-note { position: relative; font-size: .8rem; color: rgba(255,255,255,.72); line-height: 1.6; margin-top: 18px; } @media (max-width: 860px) { .roi-calc { grid-template-columns: 1fr; } } @media (max-width: 480px) { .roi-meta { grid-template-columns: 1fr; } } /* PROZA */ .prose { max-width: 860px; margin: 0 auto; } .prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 1.6em 0 .5em; padding-bottom: .35em; border-bottom: 2px solid var(--ss-orange); display: inline-block; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.45rem); color: var(--ss-navy); margin: 1.5em 0 .4em; border-left: 3px solid var(--ss-orange); padding-left: 14px; } .prose p { font-size: 1.06rem; color: var(--ss-text); margin: 0 0 1.15em; line-height: 1.8; } .prose p strong { font-weight: 600; color: var(--ss-navy-600); } .prose a { color: var(--ss-blue); text-decoration: underline; text-underline-offset: 2px; } .prose a:hover { color: var(--ss-orange); } /* SIMPLE GRID (branże, blog itp.) */ .simple-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .scard { background: var(--ss-white); border: 1px solid var(--ss-border); border-radius: var(--r-lg); padding: 28px 26px; transition: transform var(--t), box-shadow var(--t), border-color var(--t); display: flex; flex-direction: column; } .scard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; } .scard-ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(43,95,163,.08); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .scard-ic svg { width: 28px; height: 28px; stroke: var(--ss-blue); fill: none; } .scard .tag { font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-orange-ink); margin-bottom: 9px; } .scard h2, .scard h3 { font-size: 1.1rem; margin-bottom: 9px; } .scard p { font-size: .9rem; color: var(--ss-muted); margin: 0; flex: 1; } .scard .product-link { margin-top: 16px; font-family: var(--f-head); font-size: .9rem; font-weight: 600; color: var(--ss-orange-ink); display: inline-flex; align-items: center; gap: 6px; } .scard .product-link .arr { transition: transform var(--t); } .scard:hover .product-link .arr { transform: translateX(4px); } .center-cta { text-align: center; margin-top: 44px; } /* CTA BAND */ .cta-band { position: relative; overflow: hidden; background: radial-gradient(100% 140% at 90% 0%, rgba(255,106,19,.3), transparent 50%), linear-gradient(150deg, var(--ss-ink), var(--ss-navy)); color: #fff; text-align: center; } .cta-band .container { position: relative; z-index: 2; } .cta-band h2 { color: #fff; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); } .cta-band p { color: rgba(255,255,255,.76); font-size: 1.12rem; max-width: 580px; margin: 18px auto 0; } .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 36px; } .cta-grid-bg { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:54px 54px; mask-image: radial-gradient(80% 100% at 50% 100%,#000,transparent 75%); pointer-events: none; } /* art-cta (artykuł) */ .art-cta { position: relative; background: radial-gradient(100% 140% at 90% 0%, rgba(255,106,19,.3), transparent 50%), linear-gradient(150deg, var(--ss-ink), var(--ss-navy)); color: #fff; border-radius: var(--r-xl); padding: clamp(40px,5vw,64px) clamp(32px,4vw,56px); text-align: center; overflow: hidden; } .art-cta h2 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); } .art-cta p { color: rgba(255,255,255,.76); font-size: 1.05rem; max-width: 520px; margin: 14px auto 0; } .art-cta .cta-actions { margin-top: 28px; } /* FOOTER */ .site-footer { background: var(--ss-ink); color: rgba(255,255,255,.75); } .footer-bar { height: 4px; background: linear-gradient(90deg, var(--ss-orange), var(--ss-amber) 55%, transparent); } .footer-inner { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 2.5rem; padding: 4rem 24px 3rem; max-width: var(--maxw); margin: 0 auto; } .footer-brand img { height: 34px; width: auto; filter: brightness(0) invert(1); margin-bottom: 16px; } .footer-brand p { font-size: .88rem; line-height: 1.75; margin-bottom: 18px; max-width: 420px; } .footer-brand address { font-style: normal; font-size: .88rem; color: rgba(255,255,255,.78); line-height: 1.9; } .footer-brand address a { color: var(--ss-amber); } .footer-col h4 { color: #fff; font-family: var(--f-head); font-size: .82rem; letter-spacing: .04em; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.1); } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .footer-col a { color: rgba(255,255,255,.78); font-size: .88rem; display: inline-block; padding: 2px 0; } .footer-col a:hover { color: var(--ss-amber); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.09); padding: 1.1rem 24px; max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; font-size: .84rem; color: rgba(255,255,255,.72); } .footer-bottom div { display: flex; flex-wrap: wrap; gap: 1.2rem; } .footer-bottom a { color: rgba(255,255,255,.82); } .footer-bottom a:hover { color: var(--ss-amber); } /* REVEAL ANIMATIONS */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1 !important; transform: none !important; } * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* Bez JS .reveal zostawalo opacity:0 - cala tresc byla niewidoczna. */ @media (scripting: none) { .reveal { opacity: 1 !important; transform: none !important; } } .js-failsafe .reveal { opacity: 1 !important; transform: none !important; } /* KONTAKT */ .contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .contact-card { display: flex; flex-direction: column; gap: 4px; padding: 26px 24px; background: var(--ss-white); border: 1px solid var(--ss-border); border-radius: var(--r-lg); transition: transform var(--t), box-shadow var(--t); color: var(--ss-text); } a.contact-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); color: var(--ss-text); } .cc-ic { width: 48px; height: 48px; border-radius: 13px; background: var(--ss-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .cc-ic svg { width: 24px; height: 24px; stroke: var(--ss-orange); fill: none; } .cc-label { font-family: var(--f-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ss-faint); } .cc-val { font-family: var(--f-head); font-weight: 600; color: var(--ss-navy-600); font-size: .98rem; line-height: 1.35; } .contact-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--ss-border); } .contact-foot .reg { font-size: .82rem; color: var(--ss-muted); margin: 0; } .contact-social { display: flex; gap: 11px; } .social-link { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--ss-white); border: 1px solid var(--ss-border); color: var(--ss-navy-600); transition: var(--t); } .social-link:hover { color: #fff; transform: translateY(-2px); } .social-link[aria-label="Facebook"]:hover { background: #1877F2; border-color: #1877F2; } .social-link[aria-label="LinkedIn"]:hover { background: #0077B5; border-color: #0077B5; } .social-link[aria-label="YouTube"]:hover { background: #FF0000; border-color: #FF0000; } /* FAQ MASTER-DETAIL */ .fa { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: start; max-width: 1040px; width: 100%; margin: 0 auto; } .fa-list { display: flex; flex-direction: column; gap: 4px; } .fa-q { text-align: left; background: none; border: none; cursor: pointer; font-family: var(--f-body); font-size: .98rem; font-weight: 500; color: var(--ss-muted); padding: 15px 18px; border-radius: var(--r-sm); display: flex; gap: 13px; align-items: flex-start; line-height: 1.4; transition: background var(--t), color var(--t); } .fa-q .qn { font-family: var(--f-mono); font-size: .72rem; color: var(--ss-faint); padding-top: 2px; transition: color var(--t); } .fa-q:hover { background: var(--ss-bg-alt); color: var(--ss-navy-600); } .fa-q.on { background: var(--ss-ink); color: #fff; } .fa-q.on .qn { color: var(--ss-orange-300); } .fa-panel { background: linear-gradient(160deg, var(--ss-bg-alt), #fff); border: 1px solid var(--ss-border); border-radius: var(--r-lg); padding: 34px 34px 36px; min-height: 248px; position: relative; overflow: hidden; } .fa-panel::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(var(--ss-orange), var(--ss-amber)); } .fa-panel .big { font-family: var(--f-head); font-size: 3rem; font-weight: 700; color: rgba(255,106,19,.16); line-height: 1; } .fa-panel h3 { font-size: 1.3rem; color: var(--ss-navy-600); margin: 8px 0 14px; } .fa-panel p { color: var(--ss-muted); font-size: 1rem; line-height: 1.75; margin: 0; } .fa-ans { display: none; } .fa-ans.on { display: block; animation: faIn .35s var(--ease); } @keyframes faIn { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} } /* GLOSARIUSZ - duplikat usuniety, jedyna definicja jest w vss-article.css. */ /* def-box */ .def-box { background: var(--ss-blue-light); border-left: 4px solid var(--ss-blue); border-radius: 0 var(--r) var(--r) 0; padding: 18px 22px; margin: 0 0 28px; } .def-label { font-family: var(--f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-blue); display: block; margin-bottom: 8px; } .def-box p { font-size: 1rem; color: var(--ss-text); margin: 0; line-height: 1.7; } /* CMP TABLE / TABLE-SCROLL - duplikat usuniety, jedyna definicja jest w vss-article.css (tabele wystepuja wylacznie na stronach artykulow, ktore laduja oba pliki). */ /* KARTY (listingi) */ .cat-grid, .mod-grid, .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 20px; } .cat-card, .mod-card, .product-card { display: flex; gap: 14px; align-items: flex-start; padding: 22px; background: var(--ss-white); border: 1px solid var(--ss-border); border-top: 3px solid var(--ss-border); border-radius: var(--r); text-decoration: none; color: inherit; transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .cat-card:hover, .mod-card:hover, .product-card:hover { transform: translateY(-3px); box-shadow: var(--sh); border-top-color: var(--ss-orange); } .cat-card-ico { flex-shrink: 0; display: flex; } .cat-card-ico svg { width: 34px; height: 34px; color: var(--ss-orange); } .cat-card-title { font-family: var(--f-head); font-weight: 700; color: var(--ss-ink); font-size: 1.05rem; display: block; margin-bottom: 5px; } .cat-card-desc { color: var(--ss-muted); font-size: .9rem; line-height: 1.6; } .product-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ss-orange-ink); font-weight: 600; font-family: var(--f-head); text-decoration: none; margin-top: auto; } .product-link:hover { text-decoration: underline; } /* LIGHTBOX - definicja przeniesiona w calosci do vss-article.css. Wersja z tego pliku nie miala 'display:none' w stanie domyslnym, wiec na kazdej stronie bez vss-article.css nakladka #lb bylaby widoczna na stale. */ .gallery-item { cursor: zoom-in; } /* RESPONSIVE */ @media (max-width: 1024px) { .hero-inner { grid-template-columns: 1fr; gap: 44px; } .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; } .modules-grid, .simple-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .specs dl { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .contact-cards { grid-template-columns: repeat(2,1fr); } } @media (max-width: 860px) { .frow { grid-template-columns: 1fr; gap: 24px; } .frow--rev .frow-media { order: 0; } .hero-quick { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .fa { grid-template-columns: 1fr; gap: 20px; } .fa-panel { min-height: 0; } } /* Menu zwija sie teraz przy 1080px, nie 720px: 6 pozycji + wyszukiwanie (180px) + telefon (133px) + DEMO potrzebuja razem 1027px szerokosci - zmierzone w przegladarce. Przy progu 940px pasek lamal sie w zakresie 941-1040px. */ @media (max-width: 1080px) { .main-nav { display: none; position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 3px solid var(--ss-orange-cta); box-shadow: var(--sh-md); padding: 12px; gap: 4px; max-height: calc(100dvh - 74px); overflow-y: auto; } .main-nav.is-open { display: flex; } .main-nav a { width: 100%; padding: 14px 16px; } .main-nav .btn--demo { margin: 8px 0 0; justify-content: center; } .nav-toggle { display: flex; } .nav-search { order: -1; margin: 0 0 8px; } .nav-search input { width: 100%; } } @media (max-width: 720px) { .modules-grid, .simple-grid { grid-template-columns: 1fr; } .hero-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; } /* A7: 7px dawalo ~38px efektywnego celu (font-size .88rem * line-height 1.7 + 2*7px), ponizej wymaganych 44px. 10px daje ~44px. */ .footer-col a { padding: 10px 0; } .gallery-grid { grid-template-columns: 1fr; } .specs dl { grid-template-columns: 1fr; } .hero-quick { grid-template-columns: 1fr; } .hero-stats { grid-template-columns: 1fr 1fr; } .footer-inner { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } .contact-cards { grid-template-columns: 1fr; } .contact-foot { flex-direction: column; align-items: flex-start; } } /* === FAILSAFE — zapobiega renderowaniu SVG jako 300x150 gdy CSS z opóźnieniem === */ svg { max-width: 100%; overflow: visible; } .mcard-ic svg,.why-ic svg,.scard-ic svg,.cc-ic svg,.hero-qcard .ic svg,.specs h3 svg { width:24px;height:24px;flex-shrink:0;display:block; } .mcard-ic { display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--ss-orange),var(--ss-orange-600));flex-shrink:0; } .mcard-ic svg { stroke:#fff; } .why-ic { display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--ss-blue-light);flex-shrink:0; } .why-ic svg { stroke:var(--ss-blue); } .scard-ic { display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;flex-shrink:0; } .cc-ic { display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--ss-blue-light);flex-shrink:0; } .cc-ic svg { stroke:var(--ss-blue); } /* ===================================================================== DODANE 2026-09 (audyt UX) - komponenty, ktorych witryna nie miala ===================================================================== */ /* --- WYSZUKIWANIE W NAGLOWKU ------------------------------------------ */ .nav-search { position: relative; display: flex; align-items: center; margin-left: 6px; } .nav-search input { font-family: var(--f-body); font-size: .9rem; color: var(--ss-text); background: var(--ss-bg-alt); border: 1px solid var(--ss-border); border-radius: 999px; padding: 9px 14px 9px 36px; width: 180px; transition: width var(--t), background var(--t), border-color var(--t); } .nav-search input::placeholder { color: var(--ss-faint); } .nav-search input:focus { width: 240px; background: #fff; border-color: var(--ss-orange-cta); } .nav-search .ns-ic { position: absolute; left: 12px; width: 16px; height: 16px; stroke: var(--ss-faint); fill: none; pointer-events: none; } .nav-search button { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* --- STICKY CTA (mobile) --------------------------------------------- */ .mcta { display: none; } @media (max-width: 1080px) { .mcta { display: flex; position: fixed; z-index: 700; left: 0; right: 0; bottom: 0; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--ss-border); box-shadow: 0 -8px 30px -18px rgba(16,28,48,.4); transform: translateY(120%); transition: transform .3s var(--ease); } .mcta.is-in { transform: none; } .mcta .btn { flex: 1; padding: 14px 12px; font-size: .94rem; justify-content: center; white-space: nowrap; } .mcta .btn--tel { flex: 0 0 52px; padding: 14px 0; } .mcta .btn--tel svg { width: 20px; height: 20px; } body { padding-bottom: 76px; } } @media (prefers-reduced-motion: reduce) { .mcta { transition: none; } } /* --- PASEK TELEFONU W NAGLOWKU --------------------------------------- */ .header-tel { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-head); font-weight: 600; font-size: .92rem; color: var(--ss-navy-600); padding: 9px 12px; border-radius: var(--r-sm); } .header-tel svg { width: 16px; height: 16px; stroke: var(--ss-orange-cta); fill: none; } .header-tel:hover { background: var(--ss-bg-alt); color: var(--ss-orange-ink); } /* --- NAV TOGGLE: stan otwarty --------------------------------------- */ .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- FAQ: akordeon na mobile (master-detail dzialal tylko na desktopie) */ .fa-acc { display: none; } @media (max-width: 760px) { .fa-panel { display: none; } .fa-list { gap: 0; } .fa-q { border-bottom: 1px solid var(--ss-border); border-radius: 0; padding: 16px 4px; } .fa-q.on { background: none; color: var(--ss-navy-600); font-weight: 600; } .fa-q.on .qn { color: var(--ss-orange-ink); } .fa-acc { display: block; overflow: hidden; max-height: 0; transition: max-height .3s var(--ease); } .fa-acc[data-open="1"] { max-height: 1200px; } .fa-acc > div { padding: 4px 4px 20px; color: var(--ss-muted); font-size: .98rem; line-height: 1.75; } } /* --- UTIL ------------------------------------------------------------ */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- WYSZUKIWANIE W STOPCE ------------------------------------------ */ .footer-search { display: flex; gap: 8px; margin-top: 20px; max-width: 340px; } .footer-search input { flex: 1; min-width: 0; font-family: var(--f-body); font-size: .9rem; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm); padding: 11px 14px; } .footer-search input::placeholder { color: rgba(255,255,255,.55); } .footer-search input:focus { background: rgba(255,255,255,.12); border-color: var(--ss-orange-300); } .footer-search button { font-family: var(--f-head); font-size: .88rem; font-weight: 600; color: #fff; background: var(--ss-orange-cta); border: none; border-radius: var(--r-sm); padding: 11px 18px; cursor: pointer; } .footer-search button:hover { background: var(--ss-orange-cta-600); } /* --- STRONA /szukaj/ ------------------------------------------------- */ .search-box { position: relative; display: flex; gap: 12px; align-items: center; max-width: 720px; } .search-box .sb-ic { position: absolute; left: 20px; width: 20px; height: 20px; stroke: var(--ss-faint); pointer-events: none; } .search-box input { flex: 1; min-width: 0; font-family: var(--f-body); font-size: 1.05rem; color: var(--ss-text); background: #fff; border: 1.5px solid var(--ss-border); border-radius: 999px; padding: 17px 22px 17px 52px; } .search-box input::placeholder { color: var(--ss-faint); } .search-box input:focus { border-color: var(--ss-orange-cta); } .search-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 18px; font-size: .88rem; color: var(--ss-muted); } .search-tags a { display: inline-block; padding: 7px 14px; background: var(--ss-bg-alt); border: 1px solid var(--ss-border); border-radius: 999px; font-size: .86rem; font-weight: 500; color: var(--ss-navy-600); } .search-tags a:hover { border-color: var(--ss-orange-cta); color: var(--ss-orange-ink); background: #fff; } .search-count { font-size: .95rem; color: var(--ss-muted); margin: 0 0 22px; } .search-results { display: flex; flex-direction: column; gap: 12px; max-width: 860px; } .sres { display: flex; flex-direction: column; gap: 5px; padding: 20px 22px; background: #fff; border: 1px solid var(--ss-border); border-left: 3px solid var(--ss-border); border-radius: var(--r); transition: var(--t); } .sres:hover { border-left-color: var(--ss-orange-cta); box-shadow: var(--sh); transform: translateX(2px); } .sres-cat { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-orange-ink); } .sres-title { font-family: var(--f-head); font-size: 1.08rem; font-weight: 600; color: var(--ss-navy-600); line-height: 1.3; } .sres-desc { font-size: .92rem; color: var(--ss-muted); line-height: 1.6; } .sres-url { font-family: var(--f-mono); font-size: .78rem; color: var(--ss-faint); } .sres-empty { padding: 26px 0; } .sres-empty p { color: var(--ss-muted); margin: 0 0 18px; } @media (max-width: 620px) { .search-box { flex-direction: column; align-items: stretch; } .search-box .sb-ic { top: 19px; } .search-box .btn { justify-content: center; } }