|
Метки: очистка ручная отмена |
| (не показана 1 промежуточная версия этого же участника) |
| Строка 1: |
Строка 1: |
|
| |
|
| /* ==========================================
| |
| NULL / CRYPTOGRAPHY — MAIN PAGE
| |
| Citizen skin compatible
| |
| ========================================== */
| |
|
| |
| .crypto-home {
| |
| --crypto-accent: #a3ff68;
| |
| --crypto-bg: #101419;
| |
| --crypto-panel: #171e25;
| |
| --crypto-border: rgba(150, 175, 190, .15);
| |
| --crypto-muted: #8b99a5;
| |
| --crypto-text: #e9f0f4;
| |
|
| |
| max-width: 1180px;
| |
| margin: 0 auto;
| |
| color: var(--crypto-text);
| |
| font-family: inherit;
| |
| }
| |
|
| |
| .crypto-home * {
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| .crypto-home a {
| |
| text-decoration: none !important;
| |
| }
| |
|
| |
| .crypto-home .crypto-hero {
| |
| position: relative;
| |
| display: grid;
| |
| grid-template-columns: 1.2fr .8fr;
| |
| min-height: 410px;
| |
| padding: 64px 7%;
| |
| overflow: hidden;
| |
| background:
| |
| radial-gradient(ellipse at 78% 48%, rgba(163,255,104,.10), transparent 36%),
| |
| linear-gradient(120deg, #151d23, #101419 70%);
| |
| border: 1px solid var(--crypto-border);
| |
| border-radius: 16px;
| |
| }
| |
|
| |
| .crypto-home .crypto-hero-content {
| |
| position: relative;
| |
| z-index: 2;
| |
| align-self: center;
| |
| }
| |
|
| |
| .crypto-home .crypto-eyebrow {
| |
| color: var(--crypto-accent);
| |
| font-family: monospace;
| |
| font-size: 11px;
| |
| letter-spacing: 2px;
| |
| text-transform: uppercase;
| |
| }
| |
|
| |
| .crypto-home .crypto-hero-title {
| |
| margin: 25px 0 18px;
| |
| font-size: clamp(38px, 5vw, 66px);
| |
| line-height: 1.04;
| |
| font-weight: 750;
| |
| letter-spacing: -2.5px;
| |
| }
| |
|
| |
| .crypto-home .crypto-hero-title span {
| |
| color: var(--crypto-accent);
| |
| }
| |
|
| |
| .crypto-home .crypto-hero-description {
| |
| max-width: 490px;
| |
| color: var(--crypto-muted);
| |
| font-size: 15px;
| |
| line-height: 1.8;
| |
| }
| |
|
| |
| .crypto-home .crypto-hero-actions {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 12px;
| |
| margin-top: 30px;
| |
| }
| |
|
| |
| .crypto-home .crypto-button {
| |
| display: inline-block;
| |
| padding: 12px 18px;
| |
| border: 1px solid var(--crypto-border);
| |
| border-radius: 6px;
| |
| font-size: 13px;
| |
| font-weight: 650;
| |
| transition: .2s ease;
| |
| }
| |
|
| |
| .crypto-home .crypto-button-primary {
| |
| color: #101419;
| |
| background: var(--crypto-accent);
| |
| border-color: var(--crypto-accent);
| |
| }
| |
|
| |
| .crypto-home .crypto-button-primary:hover {
| |
| background: #c0ff9b;
| |
| transform: translateY(-2px);
| |
| }
| |
|
| |
| .crypto-home .crypto-button-secondary {
| |
| color: var(--crypto-text);
| |
| }
| |
|
| |
| .crypto-home .crypto-button-secondary:hover {
| |
| border-color: var(--crypto-accent);
| |
| color: var(--crypto-accent);
| |
| }
| |
|
| |
| .crypto-home .crypto-hero-visual {
| |
| position: relative;
| |
| display: grid;
| |
| place-items: center;
| |
| min-height: 270px;
| |
| }
| |
|
| |
| .crypto-home .crypto-core {
| |
| display: grid;
| |
| place-items: center;
| |
| width: 116px;
| |
| height: 116px;
| |
| z-index: 2;
| |
| border: 1px solid rgba(163,255,104,.65);
| |
| border-radius: 50%;
| |
| background: radial-gradient(circle, #293c2b, #151e20 72%);
| |
| box-shadow: 0 0 60px rgba(163,255,104,.13);
| |
| color: white;
| |
| font-size: 48px;
| |
| font-weight: 800;
| |
| }
| |
|
| |
| .crypto-home .crypto-core span,
| |
| .crypto-home .crypto-manifesto-mark span {
| |
| color: var(--crypto-accent);
| |
| }
| |
|
| |
| .crypto-home .crypto-orbit {
| |
| position: absolute;
| |
| width: 210px;
| |
| height: 210px;
| |
| border: 1px solid rgba(163,255,104,.22);
| |
| border-radius: 50%;
| |
| }
| |
|
| |
| .crypto-home .crypto-orbit-one {
| |
| transform: scaleX(1.5) rotate(-28deg);
| |
| }
| |
|
| |
| .crypto-home .crypto-orbit-two {
| |
| transform: scaleX(.7) rotate(52deg);
| |
| }
| |
|
| |
| .crypto-home .crypto-orbit-three {
| |
| width: 290px;
| |
| height: 290px;
| |
| border-style: dashed;
| |
| opacity: .45;
| |
| }
| |
|
| |
| .crypto-home .crypto-coordinate {
| |
| position: absolute;
| |
| color: var(--crypto-muted);
| |
| font: 9px monospace;
| |
| letter-spacing: 2px;
| |
| }
| |
|
| |
| .crypto-home .crypto-coordinate-top {
| |
| top: 10%;
| |
| right: 0;
| |
| }
| |
|
| |
| .crypto-home .crypto-coordinate-bottom {
| |
| bottom: 10%;
| |
| left: 0;
| |
| }
| |
|
| |
| .crypto-home .crypto-hero-index {
| |
| position: absolute;
| |
| bottom: 18px;
| |
| left: 7%;
| |
| color: #697780;
| |
| font: 9px monospace;
| |
| letter-spacing: 2px;
| |
| }
| |
|
| |
| .crypto-home .crypto-section-heading {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| align-items: end;
| |
| margin: 64px 0 22px;
| |
| }
| |
|
| |
| .crypto-home .crypto-section-heading h2 {
| |
| margin: 9px 0 0;
| |
| font-size: 30px;
| |
| font-weight: 750;
| |
| }
| |
|
| |
| .crypto-home .crypto-section-index {
| |
| color: var(--crypto-muted);
| |
| font: 11px monospace;
| |
| }
| |
|
| |
| .crypto-home .crypto-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(3, minmax(0, 1fr));
| |
| gap: 14px;
| |
| }
| |
|
| |
| .crypto-home .crypto-card {
| |
| position: relative;
| |
| min-height: 245px;
| |
| padding: 23px;
| |
| overflow: hidden;
| |
| border: 1px solid var(--crypto-border);
| |
| border-radius: 10px;
| |
| background: var(--crypto-panel);
| |
| transition: transform .2s ease, border-color .2s ease;
| |
| }
| |
|
| |
| .crypto-home .crypto-card:hover {
| |
| transform: translateY(-4px);
| |
| border-color: rgba(163,255,104,.5);
| |
| }
| |
|
| |
| .crypto-home .crypto-card-featured {
| |
| background:
| |
| radial-gradient(circle at 90% 10%, rgba(163,255,104,.12), transparent 45%),
| |
| var(--crypto-panel);
| |
| border-color: rgba(163,255,104,.4);
| |
| }
| |
|
| |
| .crypto-home .crypto-card-top {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| gap: 8px;
| |
| color: var(--crypto-muted);
| |
| font: 9px monospace;
| |
| letter-spacing: 1px;
| |
| }
| |
|
| |
| .crypto-home .crypto-card-status {
| |
| color: var(--crypto-accent);
| |
| text-align: right;
| |
| }
| |
|
| |
| .crypto-home .crypto-card-symbol {
| |
| margin-top: 23px;
| |
| color: var(--crypto-accent);
| |
| font-size: 30px;
| |
| }
| |
|
| |
| .crypto-home .crypto-card h3 {
| |
| margin: 12px 0 8px;
| |
| font-size: 19px;
| |
| }
| |
|
| |
| .crypto-home .crypto-card p {
| |
| min-height: 52px;
| |
| margin: 0 0 16px;
| |
| color: var(--crypto-muted);
| |
| font-size: 12px;
| |
| line-height: 1.7;
| |
| }
| |
|
| |
| .crypto-home .crypto-card > a {
| |
| color: var(--crypto-accent);
| |
| font-size: 12px;
| |
| font-weight: 650;
| |
| }
| |
|
| |
| .crypto-home .crypto-manifesto {
| |
| position: relative;
| |
| display: flex;
| |
| justify-content: space-between;
| |
| gap: 30px;
| |
| margin-top: 55px;
| |
| padding: 42px;
| |
| overflow: hidden;
| |
| border: 1px solid var(--crypto-border);
| |
| border-radius: 12px;
| |
| background: linear-gradient(110deg, #19231f, #151b20);
| |
| }
| |
|
| |
| .crypto-home .crypto-manifesto-label {
| |
| color: var(--crypto-accent);
| |
| font: 10px monospace;
| |
| letter-spacing: 2px;
| |
| }
| |
|
| |
| .crypto-home .crypto-manifesto-content {
| |
| max-width: 650px;
| |
| }
| |
|
| |
| .crypto-home .crypto-manifesto-title {
| |
| font-size: clamp(26px, 4vw, 42px);
| |
| line-height: 1.15;
| |
| font-weight: 750;
| |
| letter-spacing: -1px;
| |
| }
| |
|
| |
| .crypto-home .crypto-manifesto-content p {
| |
| max-width: 520px;
| |
| margin-top: 18px;
| |
| color: var(--crypto-muted);
| |
| font-size: 13px;
| |
| line-height: 1.8;
| |
| }
| |
|
| |
| .crypto-home .crypto-manifesto-mark {
| |
| align-self: center;
| |
| color: rgba(255,255,255,.08);
| |
| font-size: 75px;
| |
| font-weight: 800;
| |
| }
| |
|
| |
| .crypto-home .crypto-bottom-grid {
| |
| display: grid;
| |
| grid-template-columns: 1fr 1fr;
| |
| gap: 14px;
| |
| margin-top: 14px;
| |
| }
| |
|
| |
| .crypto-home .crypto-info-block {
| |
| padding: 28px;
| |
| border: 1px solid var(--crypto-border);
| |
| border-radius: 10px;
| |
| background: var(--crypto-panel);
| |
| }
| |
|
| |
| .crypto-home .crypto-info-block h2 {
| |
| margin: 12px 0;
| |
| font-size: 23px;
| |
| }
| |
|
| |
| .crypto-home .crypto-info-block p {
| |
| color: var(--crypto-muted);
| |
| font-size: 13px;
| |
| line-height: 1.8;
| |
| }
| |
|
| |
| .crypto-home .crypto-terminal-header {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| color: var(--crypto-muted);
| |
| font: 10px monospace;
| |
| letter-spacing: 1px;
| |
| }
| |
|
| |
| .crypto-home .crypto-terminal-dot {
| |
| width: 7px;
| |
| height: 7px;
| |
| border-radius: 50%;
| |
| background: var(--crypto-accent);
| |
| box-shadow: 0 0 10px var(--crypto-accent);
| |
| }
| |
|
| |
| .crypto-home .crypto-terminal-line {
| |
| margin-top: 24px;
| |
| color: var(--crypto-text);
| |
| font: 12px monospace;
| |
| }
| |
|
| |
| .crypto-home .crypto-terminal-line span {
| |
| color: var(--crypto-accent);
| |
| }
| |
|
| |
| .crypto-home .crypto-terminal-output {
| |
| margin: 15px 0;
| |
| padding: 12px;
| |
| border-left: 1px solid var(--crypto-accent);
| |
| color: var(--crypto-muted);
| |
| font: 11px/2 monospace;
| |
| }
| |
|
| |
| .crypto-home .crypto-terminal-output b {
| |
| color: var(--crypto-accent);
| |
| font-weight: 500;
| |
| }
| |
|
| |
| .crypto-home .crypto-footer {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| gap: 15px;
| |
| margin-top: 35px;
| |
| padding: 20px 0;
| |
| border-top: 1px solid var(--crypto-border);
| |
| color: var(--crypto-muted);
| |
| font: 9px monospace;
| |
| letter-spacing: 1.5px;
| |
| }
| |
|
| |
| @media (max-width: 800px) {
| |
| .crypto-home .crypto-hero {
| |
| grid-template-columns: 1fr;
| |
| padding: 40px 7%;
| |
| }
| |
|
| |
| .crypto-home .crypto-hero-visual {
| |
| min-height: 230px;
| |
| }
| |
|
| |
| .crypto-home .crypto-grid {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 540px) {
| |
| .crypto-home .crypto-hero-title {
| |
| letter-spacing: -1.5px;
| |
| }
| |
|
| |
| .crypto-home .crypto-grid,
| |
| .crypto-home .crypto-bottom-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .crypto-home .crypto-card {
| |
| min-height: auto;
| |
| }
| |
|
| |
| .crypto-home .crypto-manifesto {
| |
| flex-direction: column;
| |
| padding: 26px;
| |
| }
| |
|
| |
| .crypto-home .crypto-manifesto-mark {
| |
| display: none;
| |
| }
| |
|
| |
| .crypto-home .crypto-footer {
| |
| flex-direction: column;
| |
| }
| |
| }
| |
