/* Atlas Energie -- sistem vizual. Directia vine din cei patru jucatori care functioneaza deja, nu din preferinte: PF Nexus, nTeaser, LevelTen si Milk the Sun sunt toti pe fundal deschis, cu verde ca accent, si isi arata listarile ca randuri aliniate pe coloane, nu ca dale colorate. Un cumparator scaneaza zeci de oportunitati cautand tipare; randurile se citesc in diagonala, cardurile obliga ochiul sa o ia de la capat de fiecare data. Doua abateri deliberate de la ei: 1. Verdele nostru e mai inchis si mai putin saturat decat al lor. Ei sunt platforme de tranzactii; noi pornim de la registre publice, iar tonul corect e de institutie care tine evidenta, nu de startup. 2. Culoarea ramane rezervata hartii, unde codifica tehnologia pe un scatter si a trecut verificarea pentru daltonism. In liste tehnologia e o pictograma monocroma. Altfel fiecare rand ar tipa deopotriva si nimic n-ar mai iesi in evidenta. Tokenurile stau pe :root, nu pe un element interior: proprietatile personalizate se propaga doar in jos, iar declarate pe un wrapper lasau fara fundal -- asa a ajuns prima versiune a hartii neagra pe negru. */ :root{ color-scheme:light; --paper:#ffffff; --paper-2:#f6f8f6; /* suprafete: bara de filtre, dale */ --paper-3:#eef2ef; /* hover, stari apasate */ --ink:#0d1a14; /* titluri; verde-negru, nu negru pur */ --ink-2:#41524a; /* text curent */ --ink-3:#74857c; /* localizari, legende, date secundare */ --line:#e3eae6; --line-strong:#c7d4cd; --accent:#0f5d40; /* verde de padure, institutional */ --accent-ink:#0a3f2b; /* hover pe accent */ --accent-wash:#e7f1ec; --good:#0f5d40; --warn:#9a5312; /* aviz expirat -- chihlimbar, nu rosu */ --warn-wash:#fbf0e4; /* Doar pentru harta. In liste nu se folosesc. */ --solar:#2a78d6; --stocare:#eb6834; --eolian:#1baf7a; --altele:#74857c; --land:#eef2ef; --radius:6px; --wrap:1120px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink-2); font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased; } .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px} /* Fara font extern: harta trebuie sa ramana un singur fisier autonom, care merge si de pe file://, deci nu poate cere fonturi. Ierarhia se face din greutate, scara si spatiere -- nu dintr-un caracter de imprumut. */ h1,h2,h3{color:var(--ink);letter-spacing:-.025em;line-height:1.1;margin:0} h1{font-size:clamp(2rem,4.6vw,3.15rem);font-weight:760;letter-spacing:-.035em; text-wrap:balance} h2{font-size:1.45rem;font-weight:700} h3{font-size:1.05rem;font-weight:680} a{color:inherit} .mono,.num,.eyebrow,.label{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; } /* Eticheta mica, cu majuscule si spatiere -- vocabularul unui registru. E singurul element decorativ care se repeta, si isi merita locul: spune de fiecare data din ce sursa vine ce urmeaza. */ .eyebrow{ font-size:11px;letter-spacing:.15em;text-transform:uppercase; color:var(--accent);margin:0 0 14px;font-weight:600; } .lede{font-size:1.14rem;color:var(--ink-2);max-width:60ch;margin:14px 0 0} .sub{color:var(--ink-2);margin:6px 0 22px;max-width:66ch} /* ------------------------------------------------------------ navigatie */ nav.top{ border-bottom:1px solid var(--line); background:var(--paper); position:sticky;top:0;z-index:20; } nav.top .wrap{display:flex;align-items:center;gap:26px;height:64px} .brand{ font-weight:760;font-size:1.06rem;letter-spacing:-.02em; color:var(--ink);text-decoration:none;margin-right:4px; } .brand span{color:var(--accent)} nav.top .item{ color:var(--ink-2);text-decoration:none;font-size:.95rem; padding:6px 0;border-bottom:2px solid transparent; } nav.top .item:hover{color:var(--ink)} nav.top .item[aria-current]{color:var(--ink);border-bottom-color:var(--accent)} .spacer{flex:1} /* Bulina de stare din antet. LevelTen tine acolo "All services are online"; pentru un produs de date semnalul care conteaza nu e ca serverul raspunde, ci cat de proaspete sunt cifrele. */ .freshness{ display:inline-flex;align-items:center;gap:7px; font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.06em; color:var(--ink-3);white-space:nowrap;margin-right:6px; } .freshness .dot{ width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none; } /* ------------------------------------------------------------ butoane */ .btn{ display:inline-block;background:var(--accent);color:#fff; border:1px solid var(--accent);border-radius:var(--radius); padding:9px 17px;font-size:.95rem;font-weight:600; text-decoration:none;cursor:pointer;font-family:inherit; transition:background .12s ease,border-color .12s ease; } .btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)} .btn.ghost{ background:transparent;color:var(--ink);border-color:var(--line-strong); } .btn.ghost:hover{background:var(--paper-2);border-color:var(--ink-3)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} /* ------------------------------------------------------------ sectiuni */ section{padding:52px 0} section.hero{padding:74px 0 46px} section + section{border-top:1px solid var(--line)} /* ------------------------------------------------------------ erou */ /* Cautarea in erou e tiparul PF Nexus: primul lucru de pe pagina nu e o promisiune, e unealta. Filtrele sunt aceleasi ca pe /proiecte, deci cine incepe aici nu invata nimic de doua ori. */ .hero-search{ display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end; margin:30px 0 22px;padding:16px; background:var(--paper-2);border:1px solid var(--line); border-radius:var(--radius);max-width:840px; } .hero-search .btn{padding:9px 20px;height:38px;align-self:flex-end} /* Ceilalti pun aici sigle de clienti. Noi n-avem clienti de aratat, dar avem registrele din care agregam -- verificabile, si mai grele decat un logo imprumutat. */ .sources{ font-size:.88rem;color:var(--ink-3);margin:0; } .sources strong{color:var(--ink-2);font-weight:600} .section-head{ display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end; justify-content:space-between;margin-bottom:20px; } .section-head .sub{margin-bottom:0} /* Banda cu teza. Un singur loc pe pagina unde fundalul se schimba, si e rezervat pentru cifra care schimba felul in care citesti o lista. */ section.band{background:var(--paper-2);border-top:1px solid var(--line)} .claim{ font-size:clamp(1.6rem,3.4vw,2.35rem);font-weight:740;letter-spacing:-.03em; max-width:22ch;margin-bottom:14px; } .claim em{font-style:normal;color:var(--warn)} /* ------------------------------------------------------------ dale de cifre */ .tiles{ display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:0;border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;background:var(--paper); } .tiles{margin:0} .tile{padding:18px 20px;border-right:1px solid var(--line)} .tile:last-child{border-right:none} .tile dt{ font-family:ui-monospace,Menlo,monospace; font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3);margin-bottom:6px; } .tile dd{ margin:0;font-size:1.95rem;font-weight:720;color:var(--ink); letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.12; } .tile dd small{ display:block;font-size:.86rem;font-weight:450;color:var(--ink-3); letter-spacing:0;margin-top:3px; } /* ------------------------------------------------------------ filtre */ .filters{ display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end; padding:16px 18px;background:var(--paper-2); border:1px solid var(--line);border-radius:var(--radius);margin-bottom:26px; } .field{display:flex;flex-direction:column;gap:5px;min-width:150px} .field label{ font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.11em; text-transform:uppercase;color:var(--ink-3); } select,input[type=number],input[type=text]{ font:inherit;font-size:.94rem;color:var(--ink);background:var(--paper); border:1px solid var(--line-strong);border-radius:var(--radius); padding:8px 10px;min-width:150px; } select:hover,input:hover{border-color:var(--ink-3)} .go{display:flex;gap:9px;margin-left:auto} /* ------------------------------------------------------------ listari */ /* Randul e unitatea. Coloanele sunt aliniate ca sa se poata compara putere cu putere si stadiu cu stadiu de sus in jos, fara sa reciteste fiecare element. */ .listings{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .listing{ display:grid; grid-template-columns:34px minmax(0,1.05fr) 104px 176px minmax(0,1.3fr); align-items:center;gap:16px; padding:15px 20px;text-decoration:none; border-bottom:1px solid var(--line); transition:background .1s ease; } .listing:last-child{border-bottom:none} .listing:hover{background:var(--paper-2)} .listing-icon{color:var(--accent);display:flex;align-items:center} .listing-name{ color:var(--ink);font-weight:640;font-size:1rem;letter-spacing:-.012em; display:flex;align-items:center;gap:9px;min-width:0; } .listing-mw{ font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums; color:var(--ink);font-size:.95rem;text-align:right;white-space:nowrap; } .listing-stage{color:var(--ink-2);font-size:.92rem} .listing-where{ color:var(--ink-3);font-size:.9rem; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* Semnal, nu decoratie: apare doar cand chiar stim proprietarul din registrul guvernamental. Cine e ramane ascuns pana la o expresie de interes acceptata. */ .flag{ font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--accent);background:var(--accent-wash); border-radius:3px;padding:2px 6px;white-space:nowrap;flex:none; } /* Titularii din registrul guvernamental sunt localizati doar la nivel de judet. Se spune, nu se ascunde -- un cumparator care compara doua listari trebuie sa stie ca una e la stalp si cealalta undeva in judet. */ .approx{font-style:italic;opacity:.75} /* Codul citabil al listarii, in tiparul ID-ului de la Milk the Sun. Discret: e util cand ai nevoie de el, nu cand scanezi lista. */ .ref{ font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em; color:var(--ink-3);font-weight:400;flex:none; } /* Numarul de rezultate si sortarea, deasupra listei -- Milk the Sun le are pe amandoua si e primul lucru care lipsea la noi. */ .resultbar{ display:flex;flex-wrap:wrap;gap:12px;align-items:center; justify-content:space-between;margin-bottom:14px; } .resultbar .count{color:var(--ink-2);font-size:.95rem} .resultbar .count strong{color:var(--ink);font-variant-numeric:tabular-nums} .sorter{display:flex;align-items:center;gap:9px} .sorter label{ font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.11em; text-transform:uppercase;color:var(--ink-3); } .sorter select{min-width:170px;padding:6px 9px} /* Aglomerarea la punctul de racordare. Ideea barelor vine de la indicatorul de pret al Milk the Sun; continutul e al nostru, pentru ca preturi de tranzactie n-avem, dar disputa pe nodul de retea da. */ .loadmeter{ margin-top:16px;padding-top:16px;border-top:1px solid var(--line); } .loadmeter-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .loadmeter-head .label{ font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3); } .loadmeter-head strong{color:var(--ink);font-size:.95rem;font-weight:640} .loadmeter-bars{display:inline-flex;gap:3px} .loadmeter-bars .bar{ width:16px;height:7px;border-radius:2px;background:var(--line-strong); } .loadmeter-bars .bar.on{background:var(--accent)} .empty{padding:40px 20px;text-align:center;color:var(--ink-3)} .pager{ display:flex;align-items:center;gap:16px;margin-top:22px; color:var(--ink-3);font-size:.92rem; } .pager span{margin:0 auto} /* ------------------------------------------------------------ fisa proiect */ .panel{ border:1px solid var(--line);border-radius:var(--radius); padding:22px 24px;background:var(--paper); } .panel + .panel{margin-top:16px} .panel h3{margin-bottom:14px} .spec{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:11px 24px} .spec dt{color:var(--ink-3);font-size:.93rem} .spec dd{ margin:0;color:var(--ink);font-weight:560; font-variant-numeric:tabular-nums;font-size:.96rem; } .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .chip{ font-size:.85rem;color:var(--ink-2);background:var(--paper-2); border:1px solid var(--line);border-radius:999px;padding:4px 12px; } .chip.good{color:var(--good);border-color:#bcd9cb;background:var(--accent-wash)} .chip.warn{color:var(--warn);border-color:#e8d2b4;background:var(--warn-wash)} .locked{ background:var(--paper-2);border:1px solid var(--line); border-radius:var(--radius);padding:16px 18px;color:var(--ink-3); font-size:.93rem;margin-top:16px; } .locked strong{color:var(--ink);font-weight:640} /* Fisa de proiect: continut la stanga, decizia la dreapta. Coloana din dreapta ramane in campul vizual cat timp se citesc specificatiile, ca la nTeaser -- acolo se afla si butonul de expresie de interes, si motivul pentru care proprietarul nu e afisat. */ .detail{ display:grid;grid-template-columns:minmax(0,1.85fr) minmax(280px,1fr); gap:22px;align-items:start; } .detail > div:last-child{position:sticky;top:88px} @media (max-width:900px){ .detail{grid-template-columns:1fr} .detail > div:last-child{position:static} } /* ------------------------------------------------------------ subsol */ footer.site{ border-top:1px solid var(--line);background:var(--paper-2); padding:34px 0;margin-top:64px;color:var(--ink-3);font-size:.9rem; } footer.site a{color:var(--ink-2)} /* ------------------------------------------------------------ tabele */ .scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)} table{border-collapse:collapse;width:100%;min-width:760px;font-size:.94rem} th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line); color:var(--ink-2)} thead th{ background:var(--paper-2);color:var(--ink-3);font-weight:600; font-family:ui-monospace,Menlo,monospace;font-size:10.5px; letter-spacing:.11em;text-transform:uppercase; } tbody tr:last-child td{border-bottom:none} td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)} /* ------------------------------------------------------------ preturi */ /* Trei niveluri plus matrice de comparatie -- structura PF Nexus. Matricea conteaza mai mult decat cardurile: acolo se vede ce iei, si acolo se uita cineva care compara doua platforme. */ .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} .plan{ border:1px solid var(--line);border-radius:var(--radius); padding:26px 24px;background:var(--paper);display:flex;flex-direction:column; } .plan.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .plan-who{color:var(--ink-3);font-size:.92rem;margin:6px 0 18px;flex:1} .plan-price{ font-size:2.2rem;font-weight:730;color:var(--ink);letter-spacing:-.035em; margin:0 0 20px;line-height:1.1; } .plan-price small{ display:block;font-size:.85rem;font-weight:450;color:var(--ink-3); letter-spacing:0;margin-top:4px; } .plan .btn{text-align:center} table.matrix{min-width:640px} table.matrix td.mark,table.matrix th:not(:first-child){text-align:center;width:150px} table.matrix tr.group th{ background:var(--paper-2);color:var(--ink);text-align:left; font-family:ui-monospace,Menlo,monospace;font-size:10.5px; letter-spacing:.11em;text-transform:uppercase; } .matrix .yes{color:var(--accent);font-weight:700} .matrix .no{color:var(--line-strong)} /* ------------------------------------------------------------ doua usi */ .doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px} .door{ border:1px solid var(--line);border-radius:var(--radius);padding:26px; background:var(--paper); } .door h3{margin-bottom:8px} .door p{color:var(--ink-2);margin:0 0 18px} .door ul{margin:0 0 18px;padding-left:20px;color:var(--ink-2)} .door li{margin-bottom:6px} /* ------------------------------------------------------------ raspuns */ @media (max-width:900px){ .listing{ grid-template-columns:28px minmax(0,1fr) auto; grid-template-areas:"icon name mw" ". stage stage" ". where where"; gap:4px 12px;padding:14px 16px; } .listing-icon{grid-area:icon} .listing-name{grid-area:name} .listing-mw{grid-area:mw} .listing-stage{grid-area:stage} .listing-where{grid-area:where;white-space:normal} .tile{border-right:none;border-bottom:1px solid var(--line)} nav.top .wrap{gap:16px;overflow-x:auto} .go{margin-left:0} } @media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }