/* ============================================================ MiningReturns.com — Main Stylesheet Dark theme, mobile-first, AdSense-optimized layout ============================================================ */ /* Google Fonts loaded in header via */ :root { --bg: #0a0f1e; --bg2: #111827; --card: #1f2937; --card-hover: #263244; --border: #374151; --accent: #f59e0b; --accent-d: #d97706; --accent-glow: rgba(245,158,11,.18); --txt: #f9fafb; --txt-muted: #9ca3af; --txt-faint: #6b7280; --green: #10b981; --red: #ef4444; --blue: #3b82f6; --radius: 12px; --radius-sm: 6px; --shadow: 0 4px 16px rgba(0,0,0,.45); --shadow-sm: 0 2px 8px rgba(0,0,0,.3); --transition: .2s ease; --max: 1200px; --font: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; scrollbar-gutter: stable; } body { font-family: var(--font); background: var(--bg); color: var(--txt); line-height: 1.65; min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: clip; /* does NOT break position:sticky */ /* overflow-x:clip makes (not ) the viewport scroll container, so scrollbar-gutter must live here — otherwise the scroll-lock on the cookie modal removes the desktop scrollbar and shifts .container (CLS). */ scrollbar-gutter: stable; } img, svg { display: block; max-width: 100%; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-d); } p a { text-decoration: underline; } button { font-family: var(--font); cursor: pointer; border: none; } ul, ol { list-style: none; } /* ── Layout ─────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1rem; } @media(min-width:640px) { .container { padding: 0 1.5rem; } } @media(min-width:1024px) { .container { padding: 0 2rem; } } /* ── Header ─────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(10,15,30,.92); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; } .logo { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; font-weight: 700; color: var(--txt); white-space: nowrap; flex-shrink: 0; } .logo svg { width: 28px; height: 28px; } .logo span { color: var(--accent); } .site-nav { display: none; } .site-nav a { color: var(--txt-muted); font-size: .875rem; font-weight: 500; padding: .25rem .5rem; border-radius: var(--radius-sm); transition: color var(--transition), background var(--transition); } .site-nav a:hover { color: var(--txt); background: var(--card); } .site-nav a.active { color: var(--accent); } @media(min-width:768px) { .site-nav { display: flex; align-items: center; gap: .25rem; } } .menu-toggle { display: flex; flex-direction: column; gap: 5px; background: none; padding: .4rem; border-radius: var(--radius-sm); } .menu-toggle span { display: block; width: 22px; height: 2px; background: var(--txt-muted); border-radius: 2px; transition: var(--transition); } @media(min-width:768px) { .menu-toggle { display: none; } } /* Mobile nav drawer */ .mobile-nav { display: none; flex-direction: column; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 1rem; gap: .5rem; } .mobile-nav.open { display: flex; } .mobile-nav a { color: var(--txt-muted); font-size: .9375rem; font-weight: 500; padding: .5rem .75rem; border-radius: var(--radius-sm); } .mobile-nav a:hover { color: var(--txt); background: var(--card); } .mobile-nav a.active { color: var(--accent); } /* ── Hero ───────────────────────────────────────────────── */ .hero { text-align: center; padding: 3rem 1rem 2rem; background: linear-gradient(180deg, rgba(245,158,11,.06) 0%, transparent 100%); } .hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; margin-bottom: .75rem; } .hero h1 em { color: var(--accent); font-style: normal; } .hero p { color: var(--txt-muted); font-size: clamp(.9375rem, 2vw, 1.125rem); max-width: 620px; margin: 0 auto 1.25rem; } .hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; } .badge { display: inline-flex; align-items: center; gap: .35rem; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .85rem; font-size: .8125rem; color: var(--txt-muted); } .badge svg { width: 14px; height: 14px; color: var(--accent); } /* ── Ad Slots ───────────────────────────────────────────── */ .ad-wrap { margin: 1.5rem auto; text-align: center; max-width: 100%; } /* Full-width advertisement band: the section spans the viewport (subtle band background), the inner .container keeps the ad centered at 1200px. Same pattern as .hero. Height is fixed by the reserved .ad-slot inside → no CLS. */ .ad-band { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1rem 0; margin-bottom: 1.5rem; } .ad-band .ad-wrap { margin: 0 auto; } .ad-label { font-size: .6875rem; color: var(--txt-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .35rem; } .ad-slot { display: inline-block; background: var(--bg2); border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--txt-muted); font-size: .8125rem; vertical-align: top; } .ad-slot--leaderboard { width: 100%; height: 90px; max-width: 728px; line-height: 90px; overflow: hidden; } .ad-slot--rectangle { width: 100%; max-width: 300px; min-height: 250px; line-height: 250px; } .ad-slot--responsive { width: 100%; min-height: 90px; } .adsense-unit { display: none; } /* ── Calculator Section ─────────────────────────────────── */ .calc-section { padding: 0 0 2rem; } .calc-section h2 { font-size: 1.375rem; font-weight: 700; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .5rem; } .calc-section h2 svg { color: var(--accent); width: 22px; height: 22px; } .calc-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } /* Grid items must allow shrinking below content size (fixes table overflow on mobile) */ .calc-layout > * { min-width: 0; } @media(min-width:1024px) { .calc-layout { grid-template-columns: 1fr 320px; } } /* Coin Selector */ .coin-selector-label { font-size: .8125rem; font-weight: 600; color: var(--txt-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; } .coin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: .5rem; margin-bottom: 1.5rem; } .coin-card { position: relative; } .coin-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .coin-card label { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .75rem .5rem; background: var(--card); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition), background var(--transition), transform var(--transition); text-align: center; } .coin-card label:hover { border-color: var(--accent-d); background: var(--card-hover); transform: translateY(-1px); } .coin-card input:checked + label { border-color: var(--accent); background: var(--accent-glow); box-shadow: 0 0 0 1px var(--accent); } .coin-icon { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; background: var(--bg2); } .coin-name { font-size: .8125rem; font-weight: 600; color: var(--txt); } .coin-algo { font-size: .6875rem; color: var(--txt-muted); } /* Input Form */ .calc-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; } .form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media(min-width:600px) { .form-grid { grid-template-columns: 1fr 1fr; } } .field { display: flex; flex-direction: column; gap: .4rem; } .field-full { grid-column: 1/-1; } .field label { font-size: .8125rem; font-weight: 600; color: var(--txt-muted); } .field label .hint { font-weight: 400; color: var(--txt-muted); font-size: .75rem; } .input-wrap { position: relative; display: flex; width: 100%; min-width: 0; } .input-wrap input { flex: 1; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--txt); font-family: var(--font); font-size: .9375rem; padding: .625rem .75rem; transition: border-color var(--transition), box-shadow var(--transition); min-width: 0; } .input-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .input-wrap input::-webkit-inner-spin-button, .input-wrap input::-webkit-outer-spin-button { opacity: .5; } .input-unit { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--border); border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 0 .75rem; font-size: .8125rem; color: var(--txt-muted); white-space: nowrap; } .input-wrap input.with-unit { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } select.unit-select { background: var(--bg); border: 1px solid var(--border); border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--txt-muted); font-family: var(--font); font-size: .8125rem; padding: 0 .5rem; cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 1.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .5rem center; } select.unit-select:focus { outline: none; border-color: var(--accent); } /* ── Hardware preset dropdown ────────────────────────────── */ #hw-preset { width: 100%; max-width: 520px; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); color: var(--txt); font-family: var(--font); font-size: .9rem; font-weight: 500; padding: .65rem 2.25rem .65rem .9rem; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%23f59e0b'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); box-shadow: 0 1px 4px rgba(0,0,0,.25); } #hw-preset:hover { border-color: var(--accent); background-color: var(--card-hover); } #hw-preset:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } #hw-preset option { background: var(--card); color: var(--txt); font-size: .875rem; } #hw-preset option:first-child { color: var(--txt-muted); } #preset-wrap label { display: block; font-size: .8125rem; font-weight: 600; color: var(--txt-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .45rem; } #preset-wrap label::before { content: '⚡ '; } .btn-calculate { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; flex: 1 1 100%; /* fill flex line, never force parent wider */ min-width: 0; box-sizing: border-box; background: var(--accent); color: #000; font-size: 1rem; font-weight: 700; padding: .875rem 1.5rem; border-radius: var(--radius); margin-top: 1.25rem; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); letter-spacing: .01em; } .btn-calculate:hover { background: var(--accent-d); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,158,11,.35); } .btn-calculate:active { transform: none; } .btn-calculate svg { width: 18px; height: 18px; } .btn-calculate.loading { opacity: .7; pointer-events: none; } /* Results */ .results-wrap { margin-top: 1.5rem; transition: opacity .25s ease; } /* Reserve layout space from the start — opacity change does not cause CLS */ .results-pending { opacity: 0; pointer-events: none; } .results-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.25rem; } @media(min-width:600px) { .results-summary { grid-template-columns: repeat(4, 1fr); } } .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; text-align: center; } .stat-card .stat-label { font-size: .75rem; color: var(--txt-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; } .stat-card .stat-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; } .stat-card .stat-value.positive { color: #34d399; } .stat-card .stat-value.negative { color: #f87171; } .stat-card .stat-value.text-red { color: #f87171; } .stat-card .stat-value.text-green { color: #34d399; } .stat-card .stat-sub { font-size: .75rem; color: var(--txt-muted); margin-top: .2rem; } .results-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; display: block; } table.results-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .results-table th { background: var(--bg2); color: var(--txt-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: .65rem 1rem; text-align: right; white-space: nowrap; } .results-table th:first-child { text-align: left; } .results-table td { padding: .75rem 1rem; border-top: 1px solid var(--border); text-align: right; white-space: nowrap; } .results-table td:first-child { text-align: left; font-weight: 600; color: var(--txt-muted); } .results-table tr:hover td { background: var(--card-hover); } .results-table .col-profit { font-weight: 700; } .results-table .col-profit.pos { color: var(--green); } .results-table .col-profit.neg { color: var(--red); } /* Breakeven / extra stats */ .extra-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: .75rem; margin-top: 1.25rem; } .extra-stat { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; display: flex; align-items: center; gap: .75rem; } .extra-stat svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; } .extra-stat .extra-label { font-size: .8rem; color: var(--txt-muted); } .extra-stat .extra-value { font-weight: 700; font-size: 1rem; } /* ── Page two-column layout with per-section sticky sidebar ── */ .page-layout { display: grid; grid-template-columns: 1fr; } .page-layout > * { min-width: 0; } /* prevent grid blowout from nowrap/table children */ .sidebar-slot { display: none; } @media (min-width: 1024px) { .page-layout { grid-template-columns: 1fr 300px; column-gap: 2rem; align-items: stretch; /* rows stretch so sticky works within each section */ } .page-layout__full { grid-column: 1 / -1; } .sidebar-slot { display: block; } .sidebar-slot__sticky { position: sticky; top: 84px; /* 64px sticky header + 20px breathing room */ display: flex; flex-direction: column; gap: 1.5rem; } } /* Sidebar */ .calc-sidebar { display: flex; flex-direction: column; gap: 1.5rem; } .live-price-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; } .live-price-card h3 { font-size: .9375rem; font-weight: 700; margin-bottom: 1rem; } .price-row { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--border); } .price-row:last-child { border-bottom: none; } .price-row .pr-coin { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; } .price-row .pr-coin img { width: 22px; height: 22px; border-radius: 50%; } .price-row .pr-usd { font-weight: 700; font-size: .9375rem; } .price-row .pr-chg { font-size: .8rem; font-weight: 600; } .price-row .pr-chg.up { color: #34d399; } .price-row .pr-chg.dn { color: #f87171; } /* ── Content / Article ──────────────────────────────────── */ .content-section { padding: 2.5rem 0; border-top: 1px solid var(--border); } .content-section h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .content-section h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .5rem; color: var(--accent); } .content-section p { color: var(--txt-muted); margin-bottom: 1rem; max-width: 780px; } .content-section ul { list-style: disc; padding-left: 1.5rem; color: var(--txt-muted); margin-bottom: 1rem; } .content-section ul li { margin-bottom: .4rem; } /* FAQ */ .faq-list { display: flex; flex-direction: column; gap: .75rem; max-width: 780px; } .faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .faq-q { width: 100%; text-align: left; background: none; color: var(--txt); font-size: .9375rem; font-weight: 600; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: color var(--transition); } .faq-q:hover { color: var(--accent); } .faq-q svg { flex-shrink: 0; transition: transform var(--transition); } .faq-item.open .faq-q svg { transform: rotate(180deg); } .faq-a { display: none; padding: 0 1.25rem 1rem; color: var(--txt-muted); font-size: .9rem; line-height: 1.7; } .faq-item.open .faq-a { display: block; } /* ── Page Hero (inner pages) ──────────────────────────── */ .page-hero { background: linear-gradient(180deg, rgba(245,158,11,.05) 0%, transparent 100%); padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; } .page-hero h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; } .page-hero p { color: var(--txt-muted); margin-top: .5rem; } /* Inner page content */ .page-content { padding-bottom: 3rem; } .page-content h2 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .75rem; color: var(--txt); } .page-content h3 { font-size: 1rem; font-weight: 700; margin: 1.25rem 0 .4rem; color: var(--accent); } .page-content p { color: var(--txt-muted); margin-bottom: .85rem; max-width: 760px; line-height: 1.75; } .page-content ul, .page-content ol { list-style: disc; padding-left: 1.5rem; color: var(--txt-muted); margin-bottom: 1rem; } .page-content ol { list-style: decimal; } .page-content li { margin-bottom: .4rem; line-height: 1.7; } .page-content a { text-decoration: underline; } /* Glossary: card/pill links are block elements, not inline text — no underline. Inline links inside term definitions (article paragraphs) keep it. */ .page-glossary .page-content a, .page-glossary-term .page-content a { text-decoration: none; } .page-glossary-term .page-content article a { text-decoration: underline; } /* ── Footer ─────────────────────────────────────────────── */ .site-footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 2.5rem 0 1.5rem; margin-top: 2rem; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; } @media(min-width:640px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } } @media(min-width:1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1fr; } } .footer-brand p { color: var(--txt-muted); font-size: .875rem; margin-top: .75rem; max-width: 260px; } .footer-col h4 { font-size: .875rem; font-weight: 700; margin-bottom: .75rem; color: var(--txt); } .footer-col ul li { margin-bottom: .35rem; } .footer-col ul li a { font-size: .875rem; color: var(--txt-muted); } .footer-col ul li a:hover { color: var(--accent); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; } .footer-bottom p { font-size: .8125rem; color: var(--txt-muted); } .footer-bottom-links { display: flex; flex-wrap: wrap; gap: 1rem; } .footer-bottom-links a { font-size: .8125rem; color: var(--txt-muted); } .footer-bottom-links a:hover { color: var(--accent); } /* ── Cookie Banner ──────────────────────────────────────── */ /* ── Cookie consent modal overlay ───────────────────────── */ body.cookie-modal-open { overflow: hidden; } .cookie-banner { display: none; position: fixed; inset: 0; width: 100dvw; /* explicit: ignores document overflow wider than viewport */ max-width: 100vw; /* fallback for browsers without dvw */ z-index: 9999; /* dark backdrop + blur */ background: rgba(0,0,0,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; } .cookie-banner.visible { display: flex; } .cookie-inner { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 64px rgba(0,0,0,.6); padding: 2rem; max-width: 520px; width: 100%; display: flex; flex-direction: column; gap: 1.25rem; } .cookie-inner h2 { font-size: 1.125rem; font-weight: 700; color: var(--txt); margin: 0; } .cookie-text { font-size: .875rem; color: var(--txt-muted); line-height: 1.6; } .cookie-text a { text-decoration: underline; color: var(--accent); } .cookie-text .cookie-note { display: block; margin-top: .75rem; padding: .65rem .85rem; background: rgba(245,158,11,.08); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .8rem; color: var(--txt-muted); } .cookie-btns { display: flex; gap: .75rem; flex-wrap: wrap; } .btn-accept { flex: 1; background: var(--accent); color: #000; font-weight: 700; font-size: .875rem; padding: .65rem 1.25rem; border-radius: var(--radius-sm); text-align: center; transition: background var(--transition); } .btn-accept:hover { background: var(--accent-d); } .btn-decline { flex: 1; background: none; border: 1px solid var(--border); color: var(--txt-muted); font-size: .875rem; padding: .65rem 1.25rem; border-radius: var(--radius-sm); text-align: center; transition: border-color var(--transition), color var(--transition); } .btn-decline:hover { border-color: var(--txt-muted); color: var(--txt); } /* ── Live indicator ─────────────────────────────────────── */ .live-dot { display: inline-block; width: 8px; height: 8px; background: var(--green); border-radius: 50%; animation: pulse 2s infinite; margin-right: .35rem; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* ── Loader ─────────────────────────────────────────────── */ .loader { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(0,0,0,.3); border-top-color: #000; border-radius: 50%; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Utilities ──────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .text-accent { color: var(--accent); } .text-muted { color: var(--txt-muted); } .text-green { color: var(--green); } .text-red { color: var(--red); } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-0 { margin-bottom: 0; } .hidden { display: none !important; } /* ── Share button ────────────────────────────────────────── */ .btn-share { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem 1.1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--txt-muted); font-size: .875rem; font-weight: 600; transition: background var(--transition), color var(--transition); cursor: pointer; } .btn-share svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-share:hover { background: var(--card-hover); color: var(--txt); } /* ── Currency selector ───────────────────────────────────── */ .currency-selector { display: flex; align-items: center; gap: .4rem; } /* ── Pool & Currency standalone selects ─────────────────── */ #pool-select, #currency-sel { border-left: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--txt); font-size: .9rem; font-weight: 500; padding: .55rem 2rem .55rem .75rem; background-color: var(--card); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; transition: border-color .15s, box-shadow .15s; } #pool-select:hover, #currency-sel:hover { border-color: var(--accent); } #pool-select:focus, #currency-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,158,11,.15); } #pool-select { border-left: 3px solid var(--accent); } /* ── Profitable-today indicator ──────────────────────────── */ .profitable-indicator { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; margin-top: 1.25rem; border: 1px solid transparent; } .indicator-profit { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); color: #6ee7b7; } .indicator-loss { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #fca5a5; } .indicator-break { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: var(--accent); } /* ── Breadcrumb ──────────────────────────────────────────── */ .breadcrumb { padding: .6rem 0; border-bottom: 1px solid var(--border); background: var(--bg2); } .breadcrumb-list { display: flex; align-items: center; gap: .4rem; list-style: none; font-size: .8125rem; color: var(--txt-muted); } .breadcrumb-list a { color: var(--txt-muted); } .breadcrumb-list a:hover { color: var(--accent); } .breadcrumb-list [aria-current="page"] { color: var(--txt); } /* ── Coin preselect bar (coin pages) ─────────────────────── */ .coin-preselect-bar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-weight: 600; } .coin-preselect-bar img { flex-shrink: 0; } .coin-algo-badge { font-size: .75rem; font-weight: 500; background: var(--accent-glow); color: var(--accent); border: 1px solid rgba(245,158,11,.3); border-radius: 99px; padding: .15rem .6rem; } .change-coin-link { margin-left: auto; font-size: .8125rem; font-weight: 500; color: var(--txt-muted); } .change-coin-link:hover { color: var(--accent); } /* ── Related coins grid ──────────────────────────────────── */ .related-coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; } .related-coin-card { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--txt); text-decoration: none; transition: background var(--transition), border-color var(--transition); } .related-coin-card:hover { background: var(--card-hover); border-color: var(--accent); color: var(--txt); } .related-coin-name { font-size: .9rem; font-weight: 600; } .related-coin-algo { font-size: .75rem; color: var(--txt-muted); margin-top: .1rem; } /* ── Hero coin variant ───────────────────────────────────── */ .hero--coin { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* ── Price widget coin links ─────────────────────────────── */ .pr-coin a { color: var(--txt); font-weight: 600; } .pr-coin a:hover { color: var(--accent); } /* ══════════════════════════════════════════════════════════ NEWS & LEARN — Shared article / post styles ══════════════════════════════════════════════════════════ */ /* ── Section header (title + "All →" link) ───────────────── */ .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .section-link { font-size: .875rem; font-weight: 500; color: var(--accent); white-space: nowrap; } .section-link:hover { opacity: .8; } /* ── Post grid ────────────────────────────────────────────── */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .post-grid--learn { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* ── Post card ────────────────────────────────────────────── */ .post-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--txt); text-decoration: none; transition: background var(--transition), border-color var(--transition), transform var(--transition); } .post-card:hover { background: var(--card-hover); border-color: var(--accent); transform: translateY(-2px); color: var(--txt); } .post-card__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .post-card__date { font-size: .75rem; color: var(--txt-muted); } .post-card__tag { font-size: .7rem; font-weight: 600; padding: .1rem .45rem; background: var(--accent-glow); color: var(--accent); border: 1px solid rgba(245,158,11,.3); border-radius: 99px; } .post-card__title { font-size: 1rem; font-weight: 700; line-height: 1.35; margin: 0; color: var(--txt); } .post-card:hover .post-card__title { color: var(--accent); } .post-card__excerpt { font-size: .85rem; color: var(--txt-muted); line-height: 1.5; flex: 1; } .post-card__read { font-size: .775rem; color: var(--accent); font-weight: 500; margin-top: auto; } /* ── Difficulty badges ────────────────────────────────────── */ .difficulty-badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .03em; padding: .15rem .55rem; border-radius: 99px; } .difficulty-badge--beginner { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); } .difficulty-badge--intermediate { background: rgba(245,158,11,.1); color: var(--accent); border: 1px solid rgba(245,158,11,.3); } .difficulty-badge--advanced { background: rgba(239,68,68,.1); color: #fca5a5; border: 1px solid rgba(239,68,68,.25); } /* ── Article layout ───────────────────────────────────────── */ .article-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; } @media (max-width: 900px) { .article-wrap { grid-template-columns: 1fr; } .article-sidebar { display: none; } } .article-body { min-width: 0; } .article-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .article-header h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; line-height: 1.2; margin-bottom: .75rem; } .article-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .8125rem; color: var(--txt-muted); } .article-meta span { display: inline-flex; align-items: center; gap: .3rem; } .article-meta svg { width: 0.9em; height: 0.9em; flex-shrink: 0; } .article-meta strong { color: var(--txt); } /* ── Article content typography ──────────────────────────── */ .article-content { line-height: 1.75; } .article-content h2 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .75rem; padding-top: .5rem; border-top: 1px solid var(--border); } .article-content h3 { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 .5rem; color: var(--accent); } .article-content p { margin-bottom: 1rem; } .article-content ul, .article-content ol { padding-left: 1.5rem; margin-bottom: 1rem; } .article-content li { margin-bottom: .35rem; } .article-content a { color: var(--accent); text-decoration: underline; } .article-content a:hover { text-decoration: underline; } .article-content code { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: .1em .4em; font-size: .875em; } .article-content strong { color: var(--txt); } /* ── Article CTA box ──────────────────────────────────────── */ .article-cta { background: var(--card); border: 1px solid var(--accent); border-radius: var(--radius); padding: 1.25rem; margin: 2rem 0; } .article-cta h3 { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; color: var(--accent); } .article-cta .cta-links { display: flex; flex-wrap: wrap; gap: .5rem; } .article-cta .cta-links a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; background: var(--accent-glow); border: 1px solid rgba(245,158,11,.3); border-radius: var(--radius-sm); font-size: .8125rem; font-weight: 600; color: var(--accent); text-decoration: none; transition: background var(--transition); } .article-cta .cta-links a:hover { background: rgba(245,158,11,.2); text-decoration: none; } /* ── Author box ───────────────────────────────────────────── */ .author-box { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 2.5rem; } .author-box__avatar { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 800; color: var(--accent); overflow: hidden; } img.author-avatar { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; flex-shrink: 0; display: block; } .author-box__name { font-size: .9375rem; font-weight: 700; margin-bottom: .2rem; } .author-box__bio { font-size: .8125rem; color: var(--txt-muted); line-height: 1.55; } .author-box__bio a { color: var(--accent); text-decoration: underline; } /* ── Article tags ─────────────────────────────────────────── */ .article-tags { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1.5rem; } .article-tags__label { font-size: .8125rem; font-weight: 600; color: var(--txt-muted); } .article-tags__tag { font-size: .75rem; padding: .2rem .6rem; background: var(--card); border: 1px solid var(--border); border-radius: 99px; color: var(--txt-muted); } /* ── Sidebar ──────────────────────────────────────────────── */ .article-sidebar { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; } .sidebar-widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.125rem; } .sidebar-widget h3 { font-size: .875rem; font-weight: 700; margin-bottom: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-muted); } .sidebar-widget ul { list-style: none; } .sidebar-widget ul li { padding: .45rem 0; border-bottom: 1px solid var(--border); } .sidebar-widget ul li:last-child { border-bottom: none; } .sidebar-widget ul a { font-size: .85rem; color: var(--txt); } .sidebar-widget ul a:hover { color: var(--accent); } /* ── News/Learn index hero ────────────────────────────────── */ .index-hero { padding: 3rem 0 2rem; text-align: center; } .index-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: .75rem; } .index-hero p { font-size: 1.0625rem; color: var(--txt-muted); max-width: 640px; margin: 0 auto; } /* ── Learn difficulty group ───────────────────────────────── */ .learn-group { margin-bottom: 2.5rem; } .learn-group__header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } .learn-group__title { font-size: 1.125rem; font-weight: 700; } /* ══════════════════════════════════════════════════════════ LIGHT MODE (theme toggle) ══════════════════════════════════════════════════════════ */ body.light-mode { --bg: #f8fafc; --bg2: #f1f5f9; --card: #ffffff; --card-hover: #f0f4ff; --border: #e2e8f0; --accent: #d97706; --accent-d: #b45309; --accent-glow: rgba(217,119,6,.12); --txt: #0f172a; --txt-muted: #64748b; --txt-faint: #94a3b8; --shadow: 0 4px 16px rgba(0,0,0,.08); --shadow-sm: 0 2px 8px rgba(0,0,0,.05); } body.light-mode .site-header { background: rgba(248,250,252,.95); } body.light-mode .site-nav a, body.light-mode .mobile-nav a { color: var(--txt-muted); } body.light-mode .logo span { color: var(--accent); } body.light-mode .card { box-shadow: var(--shadow-sm); } body.light-mode .result-table thead { background: var(--bg2); } body.light-mode code { background: #f1f5f9; } /* ── Theme toggle button ─────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; background: var(--card); border: 1px solid var(--border); border-radius: 99px; font-size: .8125rem; color: var(--txt-muted); cursor: pointer; margin-top: .75rem; transition: background var(--transition), border-color var(--transition); } .theme-toggle:hover { border-color: var(--accent); color: var(--txt); } .theme-toggle__icon--light { display: none; } body.light-mode .theme-toggle__icon--dark { display: none; } body.light-mode .theme-toggle__icon--light { display: inline; } body.light-mode .theme-toggle__label { } /* ══════════════════════════════════════════════════════════ COMPARATOR PAGE ══════════════════════════════════════════════════════════ */ .compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; } @media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 900px) { .compare-grid { grid-template-columns: 1fr 1fr; } } .compare-col { padding: 1.25rem; } .compare-col__header { margin-bottom: 1rem; } .compare-col__header select { width: 100%; padding: .5rem .75rem; background: var(--bg); border: 2px solid var(--accent); border-radius: var(--radius-sm); color: var(--txt); font-size: .9375rem; font-weight: 700; cursor: pointer; transition: border-color .2s; } .compare-col__header select:focus { outline: none; border-color: var(--accent-d); } /* ── Compare: form labels ─────────────────────────────── */ .compare-col .form-group label, .compare-global .form-group label { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--txt-muted); margin-bottom: .375rem; } /* ── Compare: number inputs ───────────────────────────── */ .compare-col .cmp-hr, .compare-col .cmp-power, .compare-global #cmp-elec { width: 100%; padding: .55rem .75rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--txt); font-size: .9375rem; transition: border-color .2s, box-shadow .2s; appearance: none; } .compare-col .cmp-hr:focus, .compare-col .cmp-power:focus, .compare-global #cmp-elec:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } /* ── Compare: unit select inside hashrate row ─────────── */ .compare-col .cmp-unit { padding: .55rem .5rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--txt); font-size: .875rem; cursor: pointer; transition: border-color .2s; } .compare-col .cmp-unit:focus { outline: none; border-color: var(--accent); } /* ── Compare: global currency select ─────────────────── */ .compare-global #cmp-currency { width: 100%; padding: .55rem .75rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--txt); font-size: .9375rem; cursor: pointer; transition: border-color .2s, box-shadow .2s; appearance: none; } .compare-global #cmp-currency:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .compare-col__results { margin: 1rem 0; border-top: 1px solid var(--border); padding-top: 1rem; } .cmp-stat-row { display: flex; justify-content: space-between; align-items: center; padding: .35rem 0; font-size: .875rem; border-bottom: 1px solid var(--border); } .cmp-stat-row:last-child { border-bottom: none; } .cmp-stat-row span { color: var(--txt-muted); } .cmp-stat-row--profit { margin-top: .35rem; font-size: .9375rem; } .cmp-profit { color: #6ee7b7 !important; } .cmp-loss { color: #fca5a5 !important; } .cmp-break { color: var(--accent) !important; } .cmp-elec-cost { color: var(--txt-muted) !important; } .cmp-badge { display: inline-block; margin-top: .75rem; padding: .3rem .75rem; border-radius: 99px; font-size: .775rem; font-weight: 600; } .cmp-badge.cmp-profit { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); } .cmp-badge.cmp-loss { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); } .cmp-badge.cmp-break { background: var(--accent-glow); border: 1px solid rgba(245,158,11,.3); } .cmp-loading, .cmp-error { color: var(--txt-muted); font-size: .875rem; padding: .5rem 0; } .cmp-link { display: block; text-align: center; margin-top: .75rem; padding: .45rem; background: var(--accent-glow); border: 1px solid rgba(245,158,11,.3); border-radius: var(--radius-sm); font-size: .8125rem; font-weight: 600; color: var(--accent); } .cmp-link:hover { background: rgba(245,158,11,.25); color: var(--accent); } .compare-winner { margin-top: 1.25rem; padding: 1rem 1.25rem; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); border-radius: var(--radius); font-size: .9375rem; color: #6ee7b7; } .compare-winner--loss { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.3); color: var(--accent); } .compare-winner.hidden { display: none; } .compare-global { padding: 1.25rem; } /* ══════════════════════════════════════════════════════════ ELECTRICITY TABLE PAGE ══════════════════════════════════════════════════════════ */ .elec-table { width: 100%; border-collapse: collapse; font-size: .875rem; } .elec-table th { text-align: left; padding: .65rem .85rem; background: var(--card); border-bottom: 2px solid var(--border); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-muted); white-space: nowrap; } .elec-table td { padding: .6rem .85rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .elec-table tbody tr:hover { background: var(--card); } .elec-flag { font-size: 1.1rem; margin-right: .4rem; } .elec-rate strong { font-size: .9375rem; } .viability-badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 99px; white-space: nowrap; } .viability-badge--cheap { background: rgba(16,185,129,.12); color:#6ee7b7; border:1px solid rgba(16,185,129,.3); } .viability-badge--marginal { background: rgba(245,158,11,.1); color:var(--accent); border:1px solid rgba(245,158,11,.3); } .viability-badge--expensive{ background: rgba(239,68,68,.1); color:#fca5a5; border:1px solid rgba(239,68,68,.25); } .elec-filter-btn { padding: .4rem .9rem; background: var(--card); border: 1px solid var(--border); border-radius: 99px; font-size: .8125rem; font-weight: 500; color: var(--txt-muted); cursor: pointer; transition: all var(--transition); } .elec-filter-btn:hover, .elec-filter-btn.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); } .elec-checker { padding: 1.25rem; } /* Footer grid update for 5 cols */ @media(min-width:900px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1fr; } } /* ══════════════════════════════════════════════════════════ MOBILE FIXES — prevent horizontal scroll & improve layout ══════════════════════════════════════════════════════════ */ /* ── Global overflow guard ───────────────────────────────── */ /* NB: .container is intentionally NOT in this list — it already has width:100%;max-width:var(--max) so it never overflows, and adding max-width:100% here used to override its 1200px cap (this rule wins over the base .container by source order), forcing it full-width. On a throttled load that override landed only when style.css arrived, widening every .container ~+300px after first paint → horizontal CLS. */ .site-header, .site-footer, main, section, .card, .calc-form, .article-body, .article-wrap { max-width: 100%; } /* ── Header nav: hide long labels on small screens ───────── */ @media(max-width:767px) { .site-nav { display: none; } /* Tighter header on phones */ .header-inner { height: 56px; } } /* ── Hero section ────────────────────────────────────────── */ @media(max-width:600px) { .hero { padding: 1.75rem 0 1.5rem; } .hero h1 { font-size: clamp(1.5rem, 7vw, 2rem); } .hero-badges { flex-wrap: wrap; gap: .4rem; } } /* ── Coin grid: 2 columns on small phones ────────────────── */ @media(max-width:400px) { .coin-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Form grid: always 1 column on phones ────────────────── */ @media(max-width:599px) { .form-grid { grid-template-columns: 1fr; } .calc-form { padding: 1rem; } /* Stack hashrate + unit side by side but smaller */ .input-wrap input { font-size: .875rem; } } /* ── Results table: scroll container, smaller font ──────── */ @media(max-width:600px) { .results-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); } .results-table th, .results-table td { padding: .5rem .65rem; font-size: .8rem; } } /* ── Extra stats: wrap to single column ─────────────────── */ @media(max-width:600px) { .extra-stats { grid-template-columns: 1fr 1fr; } } @media(max-width:380px) { .extra-stats { grid-template-columns: 1fr; } } /* ── Live price widget: tighter ─────────────────────────── */ @media(max-width:600px) { .price-row { padding: .4rem 0; } .price-row .pr-usd { font-size: .875rem; } .price-row .pr-chg { display: none; } /* hide % change on very small screens */ } /* ── Coin preselect bar: scroll horizontal ───────────────── */ @media(max-width:600px) { .coin-preselect-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding: .6rem .75rem; } } /* ── Related coins grid: 1 col on phone ─────────────────── */ @media(max-width:480px) { .related-coins { grid-template-columns: 1fr; } } /* ── Post grid: 1 col on phone ──────────────────────────── */ @media(max-width:500px) { .post-grid, .post-grid--learn { grid-template-columns: 1fr; } } /* ── Article layout: already single col, tighten padding ── */ @media(max-width:600px) { .article-content h2 { font-size: 1.125rem; } .article-header h1 { font-size: 1.375rem; } .article-cta .cta-links { gap: .35rem; } .article-cta .cta-links a { font-size: .75rem; padding: .35rem .65rem; } .author-box { flex-direction: column; gap: .75rem; } } /* ── Compare page: 1 col on phones ──────────────────────── */ @media(max-width:599px) { .compare-grid { grid-template-columns: 1fr; } .compare-global .form-group { min-width: unset; width: 100%; } } /* ── Electricity table: hide notes col, scroll ───────────── */ @media(max-width:700px) { .elec-table { font-size: .8rem; } .elec-table th:last-child, .elec-table td:last-child { display: none; } /* hide Notes on mobile */ .elec-table th, .elec-table td { padding: .5rem .6rem; } .viability-badge { font-size: .65rem; padding: .15rem .4rem; } } /* ── Footer: 2-col grid on medium, 1-col on phone ───────── */ @media(min-width:480px) and (max-width:639px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media(max-width:479px) { .footer-grid { grid-template-columns: 1fr; } .footer-brand { margin-bottom: 0; } } /* ── Cookie modal: full-width buttons on small screens ───── */ @media(max-width:480px) { .cookie-inner { padding: 1.5rem 1.25rem; } .cookie-btns { flex-direction: column; } .btn-accept, .btn-decline { flex: none; width: 100%; } } /* ── Breadcrumb: truncate long titles ────────────────────── */ @media(max-width:600px) { .breadcrumb-list [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; display: inline-block; vertical-align: bottom; } } /* ── Profitable indicator: wrap text ────────────────────── */ @media(max-width:500px) { .profitable-indicator { flex-direction: column; align-items: flex-start; gap: .4rem; } } /* ── Share button + currency selector: wrap ─────────────── */ @media(max-width:500px) { .field-full > div[style*="flex"] { flex-wrap: wrap; } .btn-share { width: 100%; justify-content: center; } } /* ── Section title + "All →" link ───────────────────────── */ @media(max-width:480px) { .section-header { flex-direction: column; align-items: flex-start; gap: .25rem; } } /* ── Coin calculator cards grid ──────────────────────────── */ .post-grid--coins { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); } .post-card--coin .post-card__meta { align-items: center; } .post-card--coin .post-card__title { font-size: .9375rem; } /* ── Calculator specific mobile fixes ─────────────────────── Target: prevent any calc element from exceeding 100vw ─────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Hard-cap the entire calculator section */ .calc-section, .calc-form, .results-wrap, .results-summary, .results-table-wrap, .extra-stats, .coin-grid, #preset-wrap { width: 100%; max-width: 100%; box-sizing: border-box; } /* Reduce calc-form padding on phones */ .calc-form { padding: .875rem; } /* Inputs: ensure they shrink, not overflow */ .input-wrap input, .input-wrap select, .unit-select, #hw-preset { min-width: 0; max-width: 100%; } /* input + unit addon: make input take remaining space */ .input-wrap input { flex: 1 1 0; width: 0; } /* Unit label (W, %, $) — keep compact */ .input-unit { padding: 0 .5rem; font-size: .8125rem; flex-shrink: 0; } /* Calculate button: full width standalone on phone */ .btn-calculate { width: 100%; flex: 1 1 100%; margin-top: 1rem; padding: .8rem 1rem; font-size: .9375rem; } /* Share + currency: sit side by side below the button */ .btn-share { flex-shrink: 0; } .currency-selector { flex-shrink: 0; } /* Summary stat cards: 2×2 grid */ .results-summary { grid-template-columns: repeat(2, 1fr); gap: .5rem; } .stat-card { padding: .75rem .625rem; } .stat-card .stat-value { font-size: 1.05rem; } .stat-card .stat-sub { display: none; } /* hide subtitle on phones */ /* Results table: allow horizontal scroll within constrained box */ .results-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .results-table th, .results-table td { padding: .45rem .55rem; font-size: .775rem; } /* Extra stats: 2 columns */ .extra-stats { grid-template-columns: 1fr 1fr; gap: .5rem; } .extra-stat { padding: .75rem; } .extra-stat svg { width: 18px; height: 18px; } .extra-label { font-size: .75rem; } .extra-value { font-size: .875rem; } /* Coin grid: 4 columns on most phones, 3 on very small */ .coin-grid { grid-template-columns: repeat(4, 1fr); gap: .35rem; } .coin-card label { padding: .5rem .25rem; gap: .25rem; } .coin-icon { width: 26px; height: 26px; } .coin-name { font-size: .7rem; } .coin-algo { display: none; } /* hide algo text on phones */ } @media (max-width: 380px) { .coin-grid { grid-template-columns: repeat(3, 1fr); } .extra-stats { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════ CONTACT PAGE ══════════════════════════════════════════════════════════ */ /* Contact cards grid */ .contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.25rem; margin-bottom: 3rem; } .contact-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; transition: border-color var(--transition), transform var(--transition); } .contact-card:hover { border-color: var(--accent); transform: translateY(-2px); } .contact-card__icon { width: 44px; height: 44px; background: var(--accent-glow); border: 1px solid rgba(245,158,11,.3); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: .5rem; } .contact-card__icon svg { width: 22px; height: 22px; color: var(--accent); } .contact-card h2 { font-size: 1rem; font-weight: 700; color: var(--txt); } .contact-card p { font-size: .875rem; color: var(--txt-muted); flex: 1; } .contact-card__link { display: inline-block; margin-top: .25rem; font-size: .9rem; font-weight: 600; color: var(--accent); word-break: break-all; } .contact-card__link:hover { color: var(--accent-d); } /* Contact form wrapper */ .contact-form-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; margin-bottom: 2rem; } .contact-form-wrap h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; } .contact-form-intro { color: var(--txt-muted); font-size: .9375rem; margin-bottom: 1.5rem; } /* Form layout */ .contact-form { display: flex; flex-direction: column; gap: 1.25rem; } .form-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media(min-width:600px) { .form-row--2 { grid-template-columns: 1fr 1fr; } } .contact-form .field label { display: block; font-size: .8125rem; font-weight: 600; color: var(--txt-muted); margin-bottom: .4rem; } .required { color: var(--accent); margin-left: .15rem; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--txt); font-family: var(--font); font-size: .9375rem; padding: .65rem .85rem; transition: border-color var(--transition), box-shadow var(--transition); min-width: 0; } .contact-form textarea { resize: vertical; min-height: 140px; line-height: 1.6; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } /* Honeypot — must be hidden from humans */ .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* Submit button */ .btn-contact-submit { display: inline-flex; align-items: center; gap: .5rem; background: var(--accent); color: #000; font-size: 1rem; font-weight: 700; padding: .875rem 2rem; border-radius: var(--radius); transition: background var(--transition), transform var(--transition), box-shadow var(--transition); width: fit-content; } .btn-contact-submit svg { width: 18px; height: 18px; } .btn-contact-submit:hover { background: var(--accent-d); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,158,11,.35); } .btn-contact-submit:disabled { opacity: .65; pointer-events: none; } /* Feedback messages */ .form-feedback { padding: .875rem 1rem; border-radius: var(--radius-sm); font-size: .9375rem; font-weight: 500; } .form-feedback.hidden { display: none; } .form-feedback--success { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.35); color: #6ee7b7; } .form-feedback--error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #fca5a5; } /* Legal note */ .contact-form-legal { font-size: .8125rem; color: var(--txt-muted); margin-top: -.25rem; } .contact-form-legal a { font-size: inherit; } /* Company block */ .contact-company { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; } .contact-company h2 { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; } .contact-company address { font-style: normal; line-height: 1.8; color: var(--txt-muted); font-size: .9375rem; } /* ───────────────────────────────────────────────────────────── HARDWARE PAGES ───────────────────────────────────────────────────────────── */ /* Breadcrumb */ .breadcrumb-nav { padding: .75rem 0; border-bottom: 1px solid var(--border); background: var(--bg2); } .breadcrumb { list-style: none; display: flex; gap: .5rem; align-items: center; font-size: .875rem; color: var(--txt-muted); flex-wrap: wrap; } .breadcrumb li + li::before { content: '›'; margin-right: .5rem; opacity: .5; } .breadcrumb a { color: var(--txt-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--accent); } /* Hardware Hero */ .hardware-hero { padding: 2rem 0 1.5rem; } .hardware-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .hardware-hero__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; color: var(--txt); margin-bottom: .5rem; } .hardware-hero__subtitle { font-size: 1.0625rem; color: var(--txt-muted); } .tag { display: inline-block; padding: .2em .65em; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .tag--algo { background: rgba(245,158,11,.15); color: var(--accent); } .tag--cat { background: rgba(124,58,237,.15); color: #a78bfa; } .tag--coin { background: var(--bg2); color: var(--txt-muted); text-decoration: none; border: 1px solid var(--border); } .tag--coin:hover { border-color: var(--accent); color: var(--accent); } /* Hardware layout */ .hardware-content { padding-top: 2rem; padding-bottom: 3rem; } .hardware-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; } @media (max-width: 900px) { .hardware-layout { grid-template-columns: 1fr; } } /* Sections */ .hw-section { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); } .hw-section:last-child { border-bottom: none; } .hw-section h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--txt); } /* Specs table */ .specs-table-wrap { overflow-x: auto; } .specs-table { width: 100%; border-collapse: collapse; font-size: .9375rem; } .specs-table th, .specs-table td { padding: .625rem .875rem; text-align: left; border-bottom: 1px solid var(--border); } .specs-table th { width: 40%; font-weight: 600; color: var(--txt-muted); background: var(--bg2); } .specs-table td { color: var(--txt); } .specs-table thead tr { background: var(--bg2); } .specs-table thead th { color: var(--txt); } .specs-note { font-size: .8125rem; color: var(--txt-muted); margin-top: .75rem; } /* Profitability */ .profitability-note { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); border-radius: var(--radius-sm); padding: .75rem 1rem; font-size: .875rem; color: var(--txt-muted); margin-top: 1rem; } .hw-calc-links { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; margin: 1rem 0; } .btn-outline { display: inline-block; padding: .5rem 1rem; border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--accent); font-weight: 600; font-size: .875rem; text-decoration: none; } .btn-outline:hover { background: rgba(245,158,11,.1); } .btn--full { width: 100%; text-align: center; } /* Pros & Cons */ .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 600px) { .pros-cons { grid-template-columns: 1fr; } } .pros h3, .cons h3 { font-size: .9375rem; font-weight: 700; margin-bottom: .75rem; } .pros h3 { color: #6ee7b7; } .cons h3 { color: #fca5a5; } .pros ul, .cons ul { padding-left: 1.25rem; display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; color: var(--txt-muted); } /* Where to buy */ .disclaimer-note { font-size: .8125rem; color: var(--txt-muted); margin-top: .75rem; font-style: italic; } /* Sidebar cards */ .hardware-sidebar { display: flex; flex-direction: column; gap: 1.25rem; } .sidebar-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; } .sidebar-card h3 { font-size: .9375rem; font-weight: 700; margin-bottom: 1rem; color: var(--txt); } .quick-specs { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; font-size: .875rem; margin-bottom: 1rem; } .quick-specs dt { color: var(--txt-muted); font-weight: 500; } .quick-specs dd { color: var(--txt); font-weight: 600; margin: 0; } .related-hw-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; } .related-hw-list a { display: flex; flex-direction: column; gap: .15rem; padding: .5rem .625rem; border-radius: var(--radius-sm); text-decoration: none; border: 1px solid transparent; } .related-hw-list a:hover { border-color: var(--accent); background: rgba(245,158,11,.05); } .rhw-name { font-size: .875rem; font-weight: 600; color: var(--txt); } .rhw-specs { font-size: .775rem; color: var(--txt-muted); } .calc-link-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; font-size: .875rem; } .calc-link-list a { color: var(--accent); text-decoration: none; } .calc-link-list a:hover { text-decoration: underline; } /* ── Hardware Index ───────────────────────────────────────── */ .page-hero { padding: 2.5rem 0 1.5rem; border-bottom: 1px solid var(--border); } .page-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: .5rem; } .page-hero__sub { color: var(--txt-muted); font-size: 1.0625rem; max-width: 680px; margin-bottom: 1.5rem; } .hw-filter-tabs { display: flex; flex-wrap: wrap; gap: .5rem; } .hw-tab { background: var(--bg2); border: 1px solid var(--border); color: var(--txt-muted); font-size: .8125rem; font-weight: 600; padding: .35em .9em; border-radius: 999px; cursor: pointer; } .hw-tab:hover { border-color: var(--accent); color: var(--accent); } .hw-tab--active { background: var(--accent); border-color: var(--accent); color: #000; } .hardware-grid-section { padding: 2rem 0; } .hardware-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } .hw-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; transition: border-color .15s; } .hw-card:hover { border-color: var(--accent); } .hw-card__head { display: flex; gap: .5rem; } .hw-card__cat { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .15em .55em; border-radius: 999px; background: rgba(124,58,237,.15); color: #a78bfa; } .hw-card__algo { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .15em .55em; border-radius: 999px; background: rgba(245,158,11,.12); color: var(--accent); } .hw-card__name { font-size: 1.0625rem; font-weight: 700; margin: 0; } .hw-card__name a { color: var(--txt); text-decoration: none; } .hw-card__name a:hover { color: var(--accent); } .hw-card__specs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .75rem; } .hw-card__spec { display: flex; flex-direction: column; gap: .1rem; } .spec-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-muted); } .spec-val { font-size: .9375rem; font-weight: 700; color: var(--txt); } .hw-card__excerpt { font-size: .8375rem; color: var(--txt-muted); flex: 1; line-height: 1.5; margin: 0; } .hw-card__cta { font-size: .875rem; font-weight: 600; color: var(--accent); text-decoration: none; margin-top: auto; } .hw-card__cta:hover { text-decoration: underline; } .hardware-about { padding: 2.5rem 0 3rem; border-top: 1px solid var(--border); background: var(--bg2); } .hardware-about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; } @media (max-width: 700px) { .hardware-about__inner { grid-template-columns: 1fr; } } .hardware-about h2 { font-size: 1.125rem; font-weight: 700; margin-bottom: .75rem; } .hardware-about p { font-size: .9375rem; color: var(--txt-muted); line-height: 1.7; margin-bottom: .75rem; } /* ── Coin page: Recommended Hardware widget ───────────────── */ .hw-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .hw-rec-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; text-decoration: none; display: flex; flex-direction: column; gap: .5rem; transition: border-color .15s; } .hw-rec-card:hover { border-color: var(--accent); } .hw-rec-card__head { display: flex; gap: .4rem; } .hw-rec-cat { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .12em .5em; border-radius: 999px; background: rgba(124,58,237,.15); color: #a78bfa; } .hw-rec-algo { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .12em .5em; border-radius: 999px; background: rgba(245,158,11,.12); color: var(--accent); } .hw-rec-card__name { font-size: .9375rem; font-weight: 700; color: var(--txt); } .hw-rec-specs { display: flex; flex-wrap: wrap; gap: .35rem; } .hw-rec-specs span { font-size: .775rem; color: var(--txt-muted); background: var(--bg); border: 1px solid var(--border); padding: .1em .45em; border-radius: 999px; } .hw-rec-cta { font-size: .8125rem; font-weight: 600; color: var(--accent); margin-top: auto; } /* ── Shutdown Threshold Table ─────────────────────────────── */ #shutdown-wrap { margin-top: 2rem; } .shutdown-header { margin-bottom: 1rem; } .shutdown-title { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; color: var(--txt); margin: 0 0 .4rem; } .shutdown-title svg { flex-shrink: 0; stroke: var(--accent); } .shutdown-desc { font-size: .875rem; color: var(--txt-muted); margin: 0; line-height: 1.5; } .shutdown-desc strong { color: var(--txt); } .shutdown-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-sm); } .shutdown-table { width: 100%; border-collapse: collapse; font-size: .875rem; } .shutdown-table thead { background: var(--bg2); } .shutdown-table th { padding: .6rem .875rem; text-align: left; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-muted); border-bottom: 1px solid var(--border); white-space: nowrap; } .shutdown-table th.th-num { text-align: right; } .shutdown-table td { padding: .55rem .875rem; border-bottom: 1px solid var(--border); color: var(--txt); vertical-align: middle; } .shutdown-table tr:last-child td { border-bottom: none; } .shutdown-table tr:hover td { background: rgba(255,255,255,.03); } .shutdown-table td.th-num { text-align: right; } .sd-row--loss td { color: var(--txt-muted); } .td-threshold { font-weight: 700; font-variant-numeric: tabular-nums; } .td-margin { font-variant-numeric: tabular-nums; font-weight: 600; } .td-margin--profit { color: #34d399; } .td-margin--loss { color: #f87171; } .td-margin--neutral { color: var(--txt-muted); } .unit-dim { font-size: .75rem; font-weight: 400; color: var(--txt-muted); } .sd-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .45rem; vertical-align: middle; flex-shrink: 0; } .sd-dot--on { background: #34d399; box-shadow: 0 0 4px #34d39966; } .sd-dot--off { background: #f87171; } .sd-link { color: var(--txt); text-decoration: none; } .sd-link:hover { color: var(--accent); text-decoration: underline; } .shutdown-note { font-size: .775rem; color: var(--txt-muted); margin: .75rem 0 0; font-style: italic; } @media (max-width: 600px) { .shutdown-table th, .shutdown-table td { padding: .5rem .6rem; font-size: .8rem; } } /* ── Pool Picker ──────────────────────────────────────────── */ #pool-picker-wrap { margin-bottom: .5rem; } .pool-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .5rem; } .pool-method-badge { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: .2em .65em; border-radius: 999px; border: 1px solid; white-space: nowrap; } .pool-meta-item { font-size: .8rem; color: var(--txt-muted); } .pool-meta-link { color: var(--accent); text-decoration: none; font-weight: 600; } .pool-meta-link:hover { text-decoration: underline; } .pool-note { margin-top: .45rem; font-size: .8125rem; color: var(--txt-muted); line-height: 1.5; padding: .4rem .6rem; background: rgba(255,255,255,.04); border-left: 2px solid var(--border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .pool-fpps-note { margin-top: .45rem; font-size: .8125rem; color: #34d399; background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.25); border-radius: var(--radius-sm); padding: .4rem .65rem; line-height: 1.5; } .pool-variance-note { margin-top: .45rem; font-size: .8125rem; line-height: 1.5; padding: .4rem .65rem; border-radius: var(--radius-sm); } .pool-variance--medium { color: #fbbf24; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25); } .pool-variance--high { color: #f87171; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25); } /* FPPS revenue badge in results */ .fpps-badge { display: none; font-size: .7rem; font-weight: 700; color: #34d399; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.3); border-radius: 999px; padding: .15em .55em; margin-left: .4rem; vertical-align: middle; white-space: nowrap; } /* ── Author Profile Page ──────────────────────────────────── */ .author-profile { display: flex; align-items: flex-start; gap: 2rem; padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; } .author-profile__avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--accent); color: #000; font-size: 2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: -.02em; overflow: hidden; border: 3px solid var(--accent); } img.author-profile__avatar { object-fit: cover; display: block; } .author-profile__name { font-size: 1.875rem; font-weight: 800; color: var(--txt); margin: 0 0 .25rem; } .author-profile__title { font-size: 1rem; color: var(--accent); font-weight: 600; margin: 0 0 .35rem; } .author-profile__location { font-size: .875rem; color: var(--txt-muted); margin: 0 0 .75rem; } .author-profile__socials { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; } .author-social-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; font-weight: 600; color: var(--txt-muted); background: var(--bg2); border: 1px solid var(--border); border-radius: 999px; padding: .3em .85em; text-decoration: none; transition: border-color .15s, color .15s; } .author-social-link:hover { border-color: var(--accent); color: var(--accent); } .author-profile__stats { font-size: .875rem; color: var(--txt-muted); margin: 0; } .author-profile__stats strong { color: var(--txt); } .author-page-layout { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; align-items: start; } .author-main { min-width: 0; } .author-sidebar { position: sticky; top: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; } .expertise-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; } .expertise-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; } .expertise-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(245,158,11,.1); display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; color: var(--accent); } .expertise-icon svg { width: 20px; height: 20px; stroke: var(--accent); } .expertise-card h3 { font-size: .9375rem; font-weight: 700; margin: 0 0 .4rem; color: var(--txt); } .expertise-card p { font-size: .8375rem; color: var(--txt-muted); margin: 0; line-height: 1.55; } .author-post-list { display: flex; flex-direction: column; gap: 1.25rem; } .author-post-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; transition: border-color .15s; } .author-post-card:hover { border-color: var(--accent); } .author-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-bottom: .6rem; font-size: .775rem; color: var(--txt-muted); } .author-post-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; } .author-post-card h3 a { color: var(--txt); text-decoration: none; } .author-post-card h3 a:hover { color: var(--accent); } .author-post-excerpt { font-size: .8375rem; color: var(--txt-muted); margin: 0; line-height: 1.55; } .author-facts-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; } .author-facts-list li { display: flex; justify-content: space-between; gap: .5rem; font-size: .8375rem; line-height: 1.4; } .fact-label { color: var(--txt-muted); flex-shrink: 0; } .author-facts-list li span:last-child { color: var(--txt); font-weight: 600; text-align: right; } .author-links-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; } .author-links-list li a { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--txt-muted); text-decoration: none; transition: color .15s; } .author-links-list li a:hover { color: var(--accent); } @media (max-width: 900px) { .author-page-layout { grid-template-columns: 1fr; } .author-sidebar { position: static; } } @media (max-width: 600px) { .author-profile { flex-direction: column; gap: 1.25rem; } .author-profile__avatar { width: 72px; height: 72px; font-size: 1.5rem; } .author-profile__name { font-size: 1.5rem; } .expertise-grid { grid-template-columns: 1fr; } } /* ── Author page: Open-Source repo card ───────────────────── */ .oss-repo-card { display: block; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; text-decoration: none; transition: border-color .15s; margin-top: 1rem; } .oss-repo-card:hover { border-color: var(--accent); } .oss-repo-head { display: flex; align-items: center; gap: .6rem; color: var(--txt); margin-bottom: .5rem; } .oss-repo-name { font-size: .95rem; font-weight: 700; } .oss-repo-desc { font-size: .8375rem; color: var(--txt-muted); margin: 0 0 .75rem; line-height: 1.55; } .oss-repo-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .775rem; color: var(--txt-muted); } .oss-repo-meta span { display: inline-flex; align-items: center; gap: .35rem; } .oss-repo-meta span:last-child { color: var(--accent); font-weight: 600; } .oss-lang-dot { width: 10px; height: 10px; border-radius: 50%; background: #3572A5; display: inline-block; }