1 line
No EOL
5.1 KiB
CSS
1 line
No EOL
5.1 KiB
CSS
:root{--primary:#2563eb;--text:#1f2937;--text-light:#6b7280;--bg:#ffffff;--bg-alt:#f8fafc;--border:#e2e8f0;--radius:.5rem;--shadow:0 1px 3px rgba(0,0,0,.1);--transition:all .2s ease;}html{scroll-behavior:smooth;}.loading{text-align:center;padding:2rem;color:var(--text-light);}body{font-family:-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;line-height:1.7;max-width:1100px;margin:0 auto;padding:2rem;color:var(--text);background:var(--bg);}h1,h2,h3,h4{margin-top:2.5rem;margin-bottom:1.5rem;font-weight:600;line-height:1.3;color:var(--text);}h1{font-size:2.25rem;}h2{font-size:1.875rem;}h3{font-size:1.5rem;}a{color:var(--primary);text-decoration:none;transition:var(--transition);}a:hover{opacity:.8;text-decoration:underline;}a[href^="http"]::after{content:" ↗";font-size:.8em;opacity:1;text-decoration:none;display:inline-block;transition:var(--transition);color:var(--primary);}table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.95rem;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}th,td{padding:1rem;text-align:left;border-bottom:1px solid var(--border);}th{background-color:var(--primary);color:white;font-weight:600;position:sticky;top:0;z-index:1}th:not(:last-child){border-right:1px solid var(--border);}tr:nth-child(even){background:var(--bg-alt);}tr:hover{background:rgba(37,99,235,.05);transition:var(--transition);}th:first-child{border-top-left-radius:var(--radius);}th:last-child{border-top-right-radius:var(--radius);}tr:last-child td:first-child{border-bottom-left-radius:var(--radius);}tr:last-child td:last-child{border-bottom-right-radius:var(--radius);}.pricing-tb{font-weight:normal;}#search-container,#search-container-adult{margin:2rem auto;max-width:1000px;padding:1rem;border-radius:var(--radius);position:relative;display:flex;align-items:center;}#host-search-input,#adult-host-search-input{width:100%;padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);font-size:1rem;transition:var(--transition);box-sizing:border-box}#host-search-input:focus,#adult-host-search-input:focus{outline:none;border-color:var(--primary);}blockquote{margin:2rem 0;padding:1rem 2rem;border-left:4px solid var(--primary);background:var(--bg-alt);}code,.last-updated-date{background:var(--bg-alt);padding:.2em .4em;border-radius:var(--radius);font-size:.875em;font-family:ui-monospace,'Cascadia Code','Source Code Pro',Menlo,monospace;}#compare-container{margin-top:30px;margin-bottom:20px;display:flex;flex-direction:column;align-items:center;gap:1rem;}.compare-select-group{display:flex;gap:.5rem;align-items:center;width:100%;max-width:500px;background:var(--bg-alt);padding:.75rem;border-radius:var(--radius);border:1px solid var(--border);}.compare-select-group label{font-weight:600;flex-shrink:0;min-width:80px;text-align:right}.compare-select-group select{padding:.6rem 1rem;border:1px solid var(--border);border-radius:var(--radius);font-size:1rem;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');background-repeat:no-repeat;cursor:pointer;flex-grow:1;box-sizing:border-box;background-color:var(--bg);background-position:right 8px center;}.compare-select-group select:hover{border-color:var(--primary);}.compare-select-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1);}@media (max-width:768px){body{padding:1rem}h1{font-size:1.875rem}h2{font-size:1.5rem}h3{font-size:1.25rem}table{border-radius:0;border-left:none;border-right:none;display:block;overflow-x:auto;white-space:nowrap}th,td{padding:.75rem;min-width:120px;font-size:.9rem}th{white-space:nowrap}#search-container,#search-container-adult{margin-left:0;margin-right:0;border-radius:0}#compare-container{flex-direction:column;align-items:stretch}.compare-select-group{flex-direction:column;align-items:stretch}.compare-select-group label{text-align:left;min-width:auto}}.clear-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:14px;color:var(--text-light);background:var(--bg-alt);border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);}.clear-icon:hover{background:var(--border);color:var(--text);}.search-input:not(:placeholder-shown)+.clear-icon{opacity:1;}#compare-table-container{position:relative;margin-top:2rem;border:1px solid var(--border);border-radius:var(--radius);padding:1rem;}#close-compare{position:absolute;top:-12px;right:-12px;background-color:var(--text);color:white;border:2px solid var(--bg);border-radius:50%;width:24px;height:24px;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.8;transition:var(--transition);box-shadow:var(--shadow);}#close-compare:hover{opacity:1;transform:scale(1.1);}footer{margin-top:4rem;padding:2rem 0;border-top:1px solid var(--border);text-align:center;color:var(--text-light);}main>*{opacity:0;transform:translateY(20px);animation:fadeIn .5s ease forwards;}@keyframes fadeIn{to{opacity:1;transform:translateY(0)}} |