neo/roi24
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace all var(--mono) with explicit 'IBM Plex Mono' font-family

Browse Source
This commit is contained in:
neo committed 2026-06-25 19:02:44 +05:00
1 parent da9342cce0
commit 4d90d834ce
1 file changed
+23 -23
Download Patch File Download Diff File Expand all files Collapse all files
index_ibm.html
+23 -23
View File
@@ -133,7 +133,7 @@ section { padding: 120px 0; position: relative; z-index: 1; }
font-size: 0.6875rem; text-transform: uppercase; font-size: 0.6875rem; text-transform: uppercase;
letter-spacing: 0.18em; color: var(--accent); letter-spacing: 0.18em; color: var(--accent);
margin-bottom: 16px; font-weight: 600; margin-bottom: 16px; font-weight: 600;
font-family: var(--mono); font-family: 'IBM Plex Mono', 'SF Mono', monospace;
display: inline-flex; align-items: center; gap: 10px; display: inline-flex; align-items: center; gap: 10px;
} }
.section-label::after { .section-label::after {
@@ -171,7 +171,7 @@ section { padding: 120px 0; position: relative; z-index: 1; }
.logo-mark { .logo-mark {
width: 32px; height: 32px; border-radius: 6px; width: 32px; height: 32px; border-radius: 6px;
background: var(--accent); display: flex; align-items: center; background: var(--accent); display: flex; align-items: center;
justify-content: center; font-family: var(--mono); justify-content: center; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
font-size: 0.8125rem; font-weight: 700; color: #fff; font-size: 0.8125rem; font-weight: 700; color: #fff;
transition: transform 0.3s var(--ease-out); transition: transform 0.3s var(--ease-out);
} }
@@ -190,7 +190,7 @@ section { padding: 120px 0; position: relative; z-index: 1; }
.nav a:hover::after { width: 100%; } .nav a:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 16px; } .header-actions { display: flex; align-items: center; gap: 16px; }
.header-phone { .header-phone {
font-size: 0.8125rem; color: var(--text-sec); font-family: var(--mono); font-size: 0.8125rem; color: var(--text-sec); font-family: 'IBM Plex Mono', 'SF Mono', monospace;
transition: color 0.2s; transition: color 0.2s;
} }
.header-phone:hover { color: var(--text); } .header-phone:hover { color: var(--text); }
@@ -227,7 +227,7 @@ section { padding: 120px 0; position: relative; z-index: 1; }
} }
.btn:hover::before { opacity: 1; } .btn:hover::before { opacity: 1; }
.btn-accent { .btn-accent {
background: var(--accent); color: #000; font-family: var(--mono); background: var(--accent); color: #000; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
} }
[data-theme="light"] .btn-accent { color: #fff; } [data-theme="light"] .btn-accent { color: #fff; }
.btn-accent:hover { background: #16a34a; transform: translateY(-1px); box-shadow: 0 8px 24px var(--accent-dim); } .btn-accent:hover { background: #16a34a; transform: translateY(-1px); box-shadow: 0 8px 24px var(--accent-dim); }
@@ -254,7 +254,7 @@ section { padding: 120px 0; position: relative; z-index: 1; }
.hero-label { .hero-label {
font-size: 0.6875rem; text-transform: uppercase; font-size: 0.6875rem; text-transform: uppercase;
letter-spacing: 0.2em; color: var(--accent); letter-spacing: 0.2em; color: var(--accent);
margin-bottom: 24px; font-family: var(--mono); margin-bottom: 24px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
} }
.hero-label::before { .hero-label::before {
@@ -283,7 +283,7 @@ h1 .accent { color: var(--accent); }
display: flex; flex-direction: column; gap: 4px; display: flex; flex-direction: column; gap: 4px;
} }
.hero-meta-value { .hero-meta-value {
font-size: 1.75rem; font-weight: 700; font-family: var(--mono); font-size: 1.75rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
letter-spacing: -0.03em; letter-spacing: -0.03em;
} }
.hero-meta-label { .hero-meta-label {
@@ -320,13 +320,13 @@ h1 .accent { color: var(--accent); }
position: relative; z-index: 1; position: relative; z-index: 1;
} }
.dash-brand { .dash-brand {
font-size: 0.75rem; font-weight: 500; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px;
} }
.dash-brand svg { flex-shrink: 0; } .dash-brand svg { flex-shrink: 0; }
.dash-status { .dash-status {
display: flex; align-items: center; gap: 6px; display: flex; align-items: center; gap: 6px;
font-size: 0.6875rem; color: var(--accent); font-family: var(--mono); font-size: 0.6875rem; color: var(--accent); font-family: 'IBM Plex Mono', 'SF Mono', monospace;
} }
.dash-dot { .dash-dot {
width: 6px; height: 6px; background: var(--accent); width: 6px; height: 6px; background: var(--accent);
@@ -346,11 +346,11 @@ h1 .accent { color: var(--accent); }
.dash-big-label { .dash-big-label {
font-size: 0.6875rem; color: var(--text-dim); font-size: 0.6875rem; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.12em; text-transform: uppercase; letter-spacing: 0.12em;
margin-bottom: 8px; font-family: var(--mono); margin-bottom: 8px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
} }
.dash-big-value { .dash-big-value {
font-size: clamp(3rem, 5vw, 5rem); font-weight: 700; font-size: clamp(3rem, 5vw, 5rem); font-weight: 700;
font-family: var(--mono); font-family: 'IBM Plex Mono', 'SF Mono', monospace;
line-height: 1; line-height: 1;
} }
.dash-big-value .accent { color: var(--accent); } .dash-big-value .accent { color: var(--accent); }
@@ -369,10 +369,10 @@ h1 .accent { color: var(--accent); }
.dash-cell-label { .dash-cell-label {
font-size: 0.6875rem; color: var(--text-dim); font-size: 0.6875rem; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.1em; text-transform: uppercase; letter-spacing: 0.1em;
margin-bottom: 8px; font-family: var(--mono); margin-bottom: 8px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
} }
.dash-cell-value { .dash-cell-value {
font-size: 1.5rem; font-weight: 600; font-family: var(--mono); font-size: 1.5rem; font-weight: 600; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
letter-spacing: -0.02em; margin-bottom: 4px; letter-spacing: -0.02em; margin-bottom: 4px;
transition: color 0.3s; transition: color 0.3s;
} }
@@ -389,10 +389,10 @@ h1 .accent { color: var(--accent); }
.dash-mini-label { .dash-mini-label {
font-size: 0.625rem; color: var(--text-dim); font-size: 0.625rem; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.1em; text-transform: uppercase; letter-spacing: 0.1em;
margin-bottom: 8px; font-family: var(--mono); margin-bottom: 8px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
} }
.dash-mini-value { .dash-mini-value {
font-size: 1.25rem; font-weight: 600; font-family: var(--mono); font-size: 1.25rem; font-weight: 600; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
margin-bottom: 4px; margin-bottom: 4px;
transition: color 0.4s var(--ease-out), transform 0.3s var(--ease-out); transition: color 0.4s var(--ease-out), transform 0.3s var(--ease-out);
} }
@@ -409,7 +409,7 @@ h1 .accent { color: var(--accent); }
.dash-toggle-btn { .dash-toggle-btn {
flex: 1; padding: 10px; border: none; background: transparent; flex: 1; padding: 10px; border: none; background: transparent;
font-size: 0.6875rem; color: var(--text-dim); cursor: pointer; font-size: 0.6875rem; color: var(--text-dim); cursor: pointer;
font-family: var(--mono); text-transform: uppercase; font-family: 'IBM Plex Mono', 'SF Mono', monospace; text-transform: uppercase;
letter-spacing: 0.08em; transition: all 0.3s var(--ease-out); letter-spacing: 0.08em; transition: all 0.3s var(--ease-out);
border-right: 1px solid var(--border); position: relative; border-right: 1px solid var(--border); position: relative;
} }
@@ -435,7 +435,7 @@ h1 .accent { color: var(--accent); }
align-items: center; align-items: center;
} }
.manifesto-number { .manifesto-number {
font-size: 8rem; font-weight: 700; font-family: var(--mono); font-size: 8rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
letter-spacing: -0.05em; line-height: 0.9; letter-spacing: -0.05em; line-height: 0.9;
color: var(--text-dim); color: var(--text-dim);
} }
@@ -484,7 +484,7 @@ h1 .accent { color: var(--accent); }
} }
.problem-num { .problem-num {
font-size: 0.6875rem; color: var(--text-dim); font-size: 0.6875rem; color: var(--text-dim);
font-family: var(--mono); letter-spacing: 0.05em; font-family: 'IBM Plex Mono', 'SF Mono', monospace; letter-spacing: 0.05em;
} }
.problem-card h3 { .problem-card h3 {
font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em;
@@ -558,7 +558,7 @@ h1 .accent { color: var(--accent); }
.step:last-child { border-right: none; } .step:last-child { border-right: none; }
.step:hover { background: var(--accent-dim); } .step:hover { background: var(--accent-dim); }
.step-num { .step-num {
font-size: 2.5rem; font-weight: 700; font-family: var(--mono); font-size: 2.5rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
color: var(--accent); letter-spacing: -0.03em; color: var(--accent); letter-spacing: -0.03em;
margin-bottom: 16px; line-height: 1; opacity: 0.6; margin-bottom: 16px; line-height: 1; opacity: 0.6;
transition: opacity 0.3s; transition: opacity 0.3s;
@@ -566,7 +566,7 @@ h1 .accent { color: var(--accent); }
.step:hover .step-num { opacity: 1; } .step:hover .step-num { opacity: 1; }
.step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; } .step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.step p { font-size: 0.8125rem; color: var(--text-sec); line-height: 1.6; } .step p { font-size: 0.8125rem; color: var(--text-sec); line-height: 1.6; }
.step-time { font-size: 0.6875rem; color: var(--text-dim); font-family: var(--mono); margin-top: 12px; } .step-time { font-size: 0.6875rem; color: var(--text-dim); font-family: 'IBM Plex Mono', 'SF Mono', monospace; margin-top: 12px; }
/* ── PRICING ── */ /* ── PRICING ── */
.pricing { border-bottom: 1px solid var(--border); } .pricing { border-bottom: 1px solid var(--border); }
@@ -590,10 +590,10 @@ h1 .accent { color: var(--accent); }
.price-name { .price-name {
font-size: 0.75rem; text-transform: uppercase; font-size: 0.75rem; text-transform: uppercase;
letter-spacing: 0.15em; color: var(--text-dim); letter-spacing: 0.15em; color: var(--text-dim);
font-family: var(--mono); margin-bottom: 24px; font-family: 'IBM Plex Mono', 'SF Mono', monospace; margin-bottom: 24px;
} }
.price-amount { .price-amount {
font-size: 4rem; font-weight: 700; font-family: var(--mono); font-size: 4rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
letter-spacing: -0.04em; margin-bottom: 8px; letter-spacing: -0.04em; margin-bottom: 8px;
transition: color 0.3s; transition: color 0.3s;
} }
@@ -629,7 +629,7 @@ h1 .accent { color: var(--accent); }
} }
.faq-q:hover { color: var(--accent); } .faq-q:hover { color: var(--accent); }
.faq-q::after { .faq-q::after {
content: '+'; font-family: var(--mono); font-size: 1.25rem; content: '+'; font-family: 'IBM Plex Mono', 'SF Mono', monospace; font-size: 1.25rem;
color: var(--text-dim); transition: transform 0.3s var(--ease-out); color: var(--text-dim); transition: transform 0.3s var(--ease-out);
flex-shrink: 0; margin-left: 16px; flex-shrink: 0; margin-left: 16px;
} }
@@ -652,7 +652,7 @@ h1 .accent { color: var(--accent); }
.footer-col h4 { .footer-col h4 {
font-size: 0.6875rem; text-transform: uppercase; font-size: 0.6875rem; text-transform: uppercase;
letter-spacing: 0.12em; color: var(--text-sec); letter-spacing: 0.12em; color: var(--text-sec);
margin-bottom: 16px; font-family: var(--mono); margin-bottom: 16px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
} }
.footer-col a, .footer-col p { .footer-col a, .footer-col p {
display: block; color: var(--text-dim); display: block; color: var(--text-dim);