/* ========================================================================== pohjoinen.css — Ratkaisijan sivupohjien ilme ("pohjoinen valo") -------------------------------------------------------------------------- Kayttajan maku 25.9.2026: Teenage Engineering / Nothing + pohjoinen valo, R-logon taustasininen (#60A9DD) ainoana voimakkaana korostusvarina. KOSKEE SIVUPOHJIA (tili, pro, selaa, tyokalusivun kehys), EI APPEJA. Appien sisalla on edelleen Tailwind + /js/ratkaisija-ui.js (Guide §7). Kaikki luokat alkavat pv- ja kaikki tokenit --pv-, jotta tiedosto voidaan ladata vanhan tyylin rinnalle (esim. /pro/-esittelysivu) ilman tormayksia. Sivun runko saa ilmeen vasta kun . Taustakerrokset (body::before/::after) ovat z-index -1:lla eika sisaltokaarissa ole z-indexia, jotta appien fixed-kerrokset (modaalit, alapalkki, upotettu tyokalu) eivat jaa pinoamiskontekstin vangiksi. Vuorokaudenaika: vaihtaa horisontin hehkun savyn. Ilman skriptia kaytetaan paivan savya. Kontrasti (taustaa #080C12 vasten): --pv-text 16.8:1, --pv-text-2 9.1:1, --pv-text-3 5.7:1, --pv-r 7.7:1. Tumma teksti --pv-r-napilla 7.5:1. Versiotunniste kasin: /css/pohjoinen.css?v=YYYYMMDD (Guide §0). 26.9.2026 "vahan lampimammaksi" (kayttajan paatos): mono-isot kirjaimet vain pieniin etiketteihin (idx, tagit, kv-avaimet, alaviite). Napit, sirut, yläpalkin linkit ja lomakkeiden otsikot tavallisella kirjoitusasulla, sirut ja ylapalkin napit pilleriksi, kulmat 8 -> 12 px. ========================================================================== */ :root { --pv-bg: #080C12; --pv-surface: #0E141D; --pv-surface-2: #131B26; --pv-field: #0A1017; --pv-line: rgba(255, 255, 255, 0.08); --pv-line-2: rgba(255, 255, 255, 0.15); --pv-text: #E9EEF3; --pv-text-2: #A6B2BF; --pv-text-3: #808C9A; --pv-r: #60A9DD; --pv-r-hover: #7DBBE6; --pv-r-ink: #051019; --pv-ok: #5BE0A1; --pv-warn: #F2C14E; --pv-bad: #FF7A6B; --pv-radius: 12px; --pv-sans: "Space Grotesk", Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --pv-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* horisontin hehku, paiva oletuksena */ --pv-g1: #60A9DD; --pv-g2: #9FD3F5; } html[data-vk="aamu"] { --pv-g1: #F0A27F; --pv-g2: #60A9DD; } html[data-vk="ilta"] { --pv-g1: #B48CF2; --pv-g2: #F08C6B; } html[data-vk="yo"] { --pv-g1: #3DDC97; --pv-g2: #60A9DD; } /* --- Runko ------------------------------------------------------------- */ body.pv { margin: 0; min-height: 100vh; background: var(--pv-bg); color: var(--pv-text); font: 400 15px/1.5 var(--pv-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } body.pv *, body.pv *::before, body.pv *::after { box-sizing: border-box; } /* Pistematriisi: haalea, haipyy alaspain */ body.pv::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.3px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.35) 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.35) 55%, transparent 100%); } /* Horisontti: pohjoinen valo ylareunassa */ body.pv::before { content: ""; position: fixed; left: -10vw; right: -10vw; top: -30vh; height: 62vh; z-index: -1; pointer-events: none; background: radial-gradient(50% 55% at 28% 42%, var(--pv-g1) 0%, transparent 72%), radial-gradient(42% 50% at 74% 38%, var(--pv-g2) 0%, transparent 72%); opacity: 0.16; filter: blur(28px); } body.pv a { color: var(--pv-r); } body.pv :focus-visible { outline: 2px solid var(--pv-r); outline-offset: 2px; } .pv-wrap { position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding: 0 16px 72px; } .pv-wrap.is-wide { max-width: 1160px; } /* Tyopoyta: mobiilisarake + sivupaneeli */ .pv-shell { display: grid; gap: 24px; } @media (min-width: 1000px) { .pv-shell { grid-template-columns: minmax(0, 560px) 320px; justify-content: center; align-items: start; gap: 40px; } .pv-shell.side-left { grid-template-columns: 240px minmax(0, 640px); } .pv-side { position: sticky; top: 24px; } } /* --- Ylapalkki ja sanamerkki ------------------------------------------ */ /* Palkki on leveampi kuin sarake: tyopoydalla sanamerkki vasemmalla, tilinapit oikealla, sisalto keskella kapeana sarakkeena. */ .pv-bar { position: relative; max-width: 1160px; margin: 0 auto; padding-left: 16px; padding-right: 16px; } @media (min-width: 1000px) { .pv-bar { padding-left: 32px; padding-right: 32px; } } .pv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 8px; } .pv-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--pv-text) !important; text-decoration: none; min-height: 44px; } .pv-brand img { width: 28px; height: 28px; border-radius: 7px; display: block; } .pv-brand-name { font: 700 19px/1 var(--pv-sans); letter-spacing: -0.025em; } .pv-brand-tag { font: 400 10.5px/1 var(--pv-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pv-text-2); border: 1px solid var(--pv-line-2); border-radius: 4px; padding: 4px 6px 3px; } /* auth-nav.js:n napit tassa ilmeessa. auth-nav kayttaa :where()-valitsimia, joten namat voittavat ilman !importantia. */ body.pv .auth-nav { gap: 6px; } body.pv .auth-nav :is(.auth-pill, .auth-link, .auth-button) { border-radius: 999px; border: 1px solid var(--pv-line-2); background: transparent; color: var(--pv-text-2); font: 500 13px/1 var(--pv-sans); letter-spacing: 0; text-transform: none; padding: 9px 13px; } body.pv .auth-nav .pulssi-link { gap: 6px; } body.pv .auth-nav .auth-email { text-transform: none; letter-spacing: 0; } body.pv .auth-nav :is(.auth-link, .auth-button):hover { color: var(--pv-text); border-color: rgba(255,255,255,.3); background: transparent; } body.pv .auth-nav .auth-link.primary { background: var(--pv-text); border-color: var(--pv-text); color: var(--pv-bg); font-weight: 700; } body.pv .auth-nav .auth-link.primary.pulssi-link { background: transparent; border-color: var(--pv-line-2); color: var(--pv-text); } body.pv .auth-nav .is-current { box-shadow: none; color: var(--pv-text); border-color: var(--pv-r); } /* Kapealla: rivi omalle rivilleen vasempaan laitaan, ei oikealle roikkumaan */ @media (max-width: 479px) { body.pv .pv-top .auth-nav { width: 100%; justify-content: flex-start; } body.pv .auth-nav :is(.auth-pill, .auth-link, .auth-button) { padding: 9px 10px; } } /* --- Typografia -------------------------------------------------------- */ .pv-idx { display: flex; font-weight: 400; align-items: center; gap: 10px; margin: 32px 0 12px; font: 400 11px/1 var(--pv-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pv-text-3); } .pv-idx::after { content: ""; flex: 1; height: 1px; background: var(--pv-line); } .pv-idx b { color: var(--pv-r); font-weight: 400; } .pv-h1 { margin: 0 0 12px; font: 600 clamp(26px, 7vw, 38px)/1.08 var(--pv-sans); letter-spacing: -0.03em; overflow-wrap: anywhere; } .pv-lead { margin: 0; color: var(--pv-text-2); font-size: 15px; } .pv-mono { font: 400 11px/1.4 var(--pv-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pv-text-3); } /* --- LED ja merkit ----------------------------------------------------- */ .pv-led { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--pv-r); box-shadow: 0 0 0 3px rgba(96, 169, 221, 0.14), 0 0 12px rgba(96, 169, 221, 0.55); } .pv-led.is-ok { background: var(--pv-ok); box-shadow: 0 0 0 3px rgba(91, 224, 161, 0.14), 0 0 12px rgba(91, 224, 161, 0.5); } .pv-led.is-warn { background: var(--pv-warn); box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.14), 0 0 12px rgba(242, 193, 78, 0.45); } .pv-led.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pv-text-3); } .pv-led.is-live { animation: pv-pulse 2.4s ease-in-out infinite; } @keyframes pv-pulse { 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .pv-led.is-live { animation: none; } } .pv-tag { display: inline-flex; align-items: center; gap: 6px; font: 400 10.5px/1 var(--pv-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pv-text-2); border: 1px solid var(--pv-line-2); border-radius: 4px; padding: 4px 6px 3px; white-space: nowrap; } .pv-tag.is-r { color: var(--pv-r); border-color: rgba(96, 169, 221, 0.45); } /* --- Pinnat ------------------------------------------------------------ */ .pv-card { background: rgba(14, 20, 29, 0.82); border: 1px solid var(--pv-line); border-radius: var(--pv-radius); padding: 18px; } .pv-kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; align-items: baseline; } .pv-kv dt { font: 400 11px/1.4 var(--pv-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pv-text-3); } .pv-kv dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Rivilista: toiminnot, sovellukset, tyokalut */ .pv-list { list-style: none; margin: 0; padding: 0; background: rgba(14, 20, 29, 0.82); border: 1px solid var(--pv-line); border-radius: var(--pv-radius); overflow: hidden; } .pv-list > li + li { border-top: 1px solid var(--pv-line); } .pv-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 16px; margin: 0; border: 0; background: none; color: var(--pv-text) !important; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.15s; } .pv-row:hover { background: rgba(255, 255, 255, 0.035); } .pv-row:disabled { cursor: default; opacity: 0.6; } .pv-row-mark { display: flex; align-items: center; justify-content: center; color: var(--pv-text-2); } .pv-row-main { min-width: 0; } .pv-row-title { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; } .pv-row-sub { display: block; color: var(--pv-text-2); font-size: 13px; line-height: 1.35; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-row-meta { justify-self: end; } .pv-go { font: 400 13px/1 var(--pv-mono); color: var(--pv-text-3); transition: transform 0.15s, color 0.15s; } .pv-row:hover .pv-go { color: var(--pv-r); transform: translateX(2px); } .pv-row.is-danger .pv-row-title { color: var(--pv-bad); } /* --- Napit ja kentat --------------------------------------------------- */ .pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: var(--pv-radius); border: 1px solid var(--pv-line-2); background: transparent; color: var(--pv-text) !important; font: 600 15px/1 var(--pv-sans); text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .pv-btn:hover { border-color: rgba(255, 255, 255, 0.32); } .pv-btn.is-primary { background: var(--pv-r); border-color: var(--pv-r); color: var(--pv-r-ink) !important; } .pv-btn.is-primary:hover { background: var(--pv-r-hover); border-color: var(--pv-r-hover); } .pv-btn:disabled { opacity: 0.55; cursor: default; } .pv-btns { display: flex; gap: 8px; flex-wrap: wrap; } .pv-btns > .pv-btn { flex: 1 1 140px; } .pv-field { display: grid; gap: 6px; margin-bottom: 12px; } .pv-field label { font: 500 13px/1.3 var(--pv-sans); color: var(--pv-text-2); } .pv-input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: var(--pv-radius); border: 1px solid var(--pv-line-2); background: var(--pv-field); color: var(--pv-text); font: 400 16px/1.2 var(--pv-sans); } .pv-input::placeholder { color: var(--pv-text-3); } .pv-input:focus { outline: none; border-color: var(--pv-r); box-shadow: 0 0 0 3px rgba(96, 169, 221, 0.2); } .pv-status { min-height: 1.4em; margin: 10px 2px 0; font: 400 12px/1.45 var(--pv-mono); color: var(--pv-text-2); } .pv-status.is-ok { color: var(--pv-ok); } .pv-status.is-err { color: var(--pv-bad); } /* --- Sirut (suodattimet) ----------------------------------------------- */ .pv-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; } .pv-chips::-webkit-scrollbar { display: none; } .pv-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--pv-line-2); background: transparent; color: var(--pv-text-2); font: 500 13px/1 var(--pv-sans); cursor: pointer; white-space: nowrap; } .pv-chip:hover { color: var(--pv-text); } .pv-chip[aria-pressed="true"] { background: var(--pv-text); border-color: var(--pv-text); color: var(--pv-bg); } .pv-chip small { font-size: inherit; opacity: 0.6; } /* --- Modaali ----------------------------------------------------------- */ .pv-modal-bg { position: fixed; inset: 0; z-index: 60; display: none; align-items: flex-end; justify-content: center; padding: 12px; background: rgba(3, 6, 10, 0.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .pv-modal-bg.open { display: flex; } @media (min-width: 640px) { .pv-modal-bg { align-items: center; } } .pv-modal { width: 100%; max-width: 420px; background: var(--pv-surface); border: 1px solid var(--pv-line-2); border-radius: 18px; padding: 20px; } .pv-modal h2 { margin: 0 0 16px; font: 600 20px/1.2 var(--pv-sans); letter-spacing: -0.02em; } /* --- Pro: sovelluskortit ----------------------------------------------- */ .pv-pro-apps { display: grid; gap: 10px; margin-top: 16px; } .pv-pro-app { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: stretch; color: var(--pv-text) !important; text-decoration: none; padding: 18px 18px 0 18px; overflow: hidden; transition: border-color 0.15s; } .pv-pro-app:hover { border-color: rgba(96, 169, 221, 0.45); } .pv-pro-app-text { display: flex; flex-direction: column; gap: 8px; padding-bottom: 18px; } .pv-pro-app-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pv-pro-app-name { font: 600 21px/1.15 var(--pv-sans); letter-spacing: -0.02em; } .pv-pro-app-desc { color: var(--pv-text-2); font-size: 14px; } .pv-pro-app-go { margin-top: auto; padding-top: 8px; font: 400 11px/1 var(--pv-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pv-r); } .pv-pro-app-shot { width: 104px; height: 150px; align-self: end; object-fit: cover; object-position: top; border: 1px solid var(--pv-line-2); border-bottom: 0; border-radius: 10px 10px 0 0; display: block; } @media (max-width: 359px) { .pv-pro-app-shot { width: 84px; height: 130px; } } @media (min-width: 640px) { .pv-pro-app-shot { width: 150px; height: 190px; } } /* --- Pro-sovellukset (.pv-app) ------------------------------------------ Remonttiseuranta (ja myohemmin Pulssi) piirtaa kayttoliittymansa Tailwind-luokilla, jotka on kirjoitettu vaalealle pohjalle. Tama kerros kaantaa ne pohjoiseen ilmeeseen appin sisalla. Upotetut tyokalut (.pv-light) jaavat omaan ilmeeseensa: ne ovat samat laskurit kuin tyokalusivuilla, joissa valkoinen kortti tummalla pohjalla on tuttu. Valitsimen spesifisyys (0,3,0) voittaa Tailwindin (0,1,0) ilman !importantia. */ .pv-app { color: var(--pv-text); } .pv-app .bg-white:not(.pv-light *) { background-color: var(--pv-surface); } .pv-app .bg-slate-50:not(.pv-light *), .pv-app .bg-gray-50:not(.pv-light *) { background-color: var(--pv-field); } .pv-app .bg-slate-100:not(.pv-light *) { background-color: var(--pv-surface-2); } .pv-app .bg-slate-700:not(.pv-light *) { background-color: var(--pv-text); color: var(--pv-bg); } .pv-app .bg-slate-900:not(.pv-light *) { background-color: var(--pv-r); color: var(--pv-r-ink); } .pv-app .bg-slate-900.rounded-full:not(.pv-light *) { background-color: var(--pv-text); color: var(--pv-bg); } .pv-app .hover\:bg-slate-800:hover:not(.pv-light *) { background-color: var(--pv-r-hover); } .pv-app .hover\:bg-slate-50:hover:not(.pv-light *), .pv-app .hover\:bg-slate-200:hover:not(.pv-light *) { background-color: rgba(255, 255, 255, 0.05); } .pv-app .text-slate-900:not(.pv-light *), .pv-app .text-slate-800:not(.pv-light *) { color: var(--pv-text); } .pv-app .text-slate-700:not(.pv-light *), .pv-app .text-slate-600:not(.pv-light *), .pv-app .text-gray-600:not(.pv-light *) { color: var(--pv-text-2); } .pv-app .text-slate-500:not(.pv-light *), .pv-app .text-slate-400:not(.pv-light *) { color: var(--pv-text-3); } .pv-app .text-slate-300:not(.pv-light *) { color: #5F6B79; } .pv-app .hover\:text-slate-600:hover:not(.pv-light *), .pv-app .hover\:text-white:hover:not(.pv-light *) { color: var(--pv-text); } .pv-app .hover\:text-blue-600:hover:not(.pv-light *), .pv-app .hover\:text-sky-600:hover:not(.pv-light *), .pv-app .text-sky-600:not(.pv-light *) { color: var(--pv-r); } .pv-app .border-slate-100:not(.pv-light *), .pv-app .border-slate-200:not(.pv-light *), .pv-app .divide-slate-100:not(.pv-light *) > * + * { border-color: var(--pv-line); } .pv-app .border-slate-300:not(.pv-light *) { border-color: var(--pv-line-2); } .pv-app .hover\:border-slate-400:hover:not(.pv-light *) { border-color: rgba(96, 169, 221, 0.5); } .pv-app .shadow-sm:not(.pv-light *), .pv-app .shadow:not(.pv-light *), .pv-app .shadow-lg:not(.pv-light *), .pv-app .hover\:shadow:hover:not(.pv-light *) { box-shadow: none; } .pv-app .rounded-xl:not(.pv-light *) { border-radius: var(--pv-radius); } .pv-app .rounded-2xl:not(.pv-light *) { border-radius: 12px; } .pv-app .rounded-full:not(.pv-light *) { border-radius: 6px; } .pv-app .focus\:ring-slate-300:focus:not(.pv-light *) { --tw-ring-color: rgba(96, 169, 221, 0.35); border-color: var(--pv-r); } .pv-app :is(input, select, textarea):not(.pv-light *) { color-scheme: dark; } /* Tilavarit: vihrea = valmis, punainen = yli / poista, keltainen = kulu */ .pv-app :is(.text-emerald-600, .text-emerald-400):not(.pv-light *) { color: var(--pv-ok); } .pv-app :is(.bg-emerald-500, .bg-emerald-400):not(.pv-light *) { background-color: var(--pv-ok); } .pv-app .bg-emerald-600:not(.pv-light *) { background-color: var(--pv-ok); color: #04150D; } .pv-app .hover\:bg-emerald-700:hover:not(.pv-light *) { background-color: #7BE8B5; } .pv-app :is(.text-red-600, .text-red-500, .text-red-400, .hover\:text-red-500:hover, .hover\:text-red-600:hover):not(.pv-light *) { color: var(--pv-bad); } .pv-app :is(.bg-red-500, .bg-red-400):not(.pv-light *) { background-color: var(--pv-bad); color: #1A0603; } .pv-app .border-red-200:not(.pv-light *) { border-color: rgba(255, 122, 107, 0.4); } .pv-app .hover\:bg-red-50:hover:not(.pv-light *) { background-color: rgba(255, 122, 107, 0.1); } .pv-app :is(.text-amber-600, .text-amber-700, .text-amber-800, .hover\:text-amber-600:hover):not(.pv-light *) { color: var(--pv-warn); } .pv-app .bg-amber-400:not(.pv-light *) { background-color: var(--pv-warn); } .pv-app .bg-amber-50:not(.pv-light *) { background-color: rgba(242, 193, 78, 0.1); } .pv-app .border-amber-200:not(.pv-light *) { border-color: rgba(242, 193, 78, 0.35); } .pv-app :is(.bg-blue-500, .bg-blue-600):not(.pv-light *) { background-color: var(--pv-r); color: var(--pv-r-ink); } .pv-app .text-blue-400:not(.pv-light *) { color: var(--pv-r); } .pv-app .bg-teal-50:not(.pv-light *) { background-color: rgba(96, 169, 221, 0.1); } .pv-app .border-teal-200:not(.pv-light *) { border-color: rgba(96, 169, 221, 0.4); } .pv-app .text-teal-900:not(.pv-light *) { color: var(--pv-text); } .pv-app .bg-black\/50:not(.pv-light *) { background-color: rgba(3, 6, 10, 0.74); } /* Kuluryhmien savyt: vaalea tausta -> lapikuultava, tumma teksti -> vaalea */ .pv-app .bg-blue-50:not(.pv-light *) { background-color: rgba(96, 165, 250, 0.14); } .pv-app .bg-indigo-50:not(.pv-light *) { background-color: rgba(129, 140, 248, 0.14); } .pv-app .bg-purple-50:not(.pv-light *) { background-color: rgba(192, 132, 252, 0.14); } .pv-app .bg-cyan-50:not(.pv-light *) { background-color: rgba(34, 211, 238, 0.12); } .pv-app .bg-orange-50:not(.pv-light *) { background-color: rgba(251, 146, 60, 0.13); } .pv-app .text-blue-700:not(.pv-light *) { color: #93C5FD; } .pv-app .text-indigo-700:not(.pv-light *) { color: #A5B4FC; } .pv-app .text-purple-700:not(.pv-light *) { color: #D8B4FE; } .pv-app .text-cyan-700:not(.pv-light *) { color: #67E8F9; } .pv-app .text-orange-700:not(.pv-light *) { color: #FDBA74; } .pv-app .border-l-slate-300:not(.pv-light *) { border-left-color: var(--pv-line-2); } .pv-foot { margin-top: 48px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } body.pv .pv-foot a { color: var(--pv-text-3); text-decoration: none; } body.pv .pv-foot a:hover { color: var(--pv-text); } .pv-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }