/* =========================== RobinCraft — Global Styles =========================== */ :root { --rh-green: #00c805; --rh-green-dark: #00a804; --rh-green-light: #6bffa0; --bg-dark: #0d1117; --bg-darker: #08090c; --bg-card: #151b23; --text-main: #f4fff4; --text-muted: #9fb3a8; --accent-yellow: #ffe066; --accent-pink: #ff6bcb; --border-glow: rgba(0, 200, 5, 0.4); --font-display: "Pixelify Sans", "Press Start 2P", monospace; --font-body: "Poppins", system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ---------- Animated Minecraft-style background world ---------- */ /* Lives on , never on , so it can't be broken by body's own transform animation (a transform on an ancestor turns it into a containing block for position:fixed descendants — see page-fade-in). */ html::before, html::after { content: ""; position: fixed; left: 0; right: 0; pointer-events: none; z-index: -2; background-repeat: repeat-x; image-rendering: pixelated; } html::before { top: 0; height: 58vh; min-height: 240px; background-image: url("../assets/img/bg-clouds.svg"), url("../assets/img/bg-mountains-far.svg"); background-position: 0 8%, 0 100%; background-size: 420px 140px, auto 85%; opacity: 0.65; animation: bg-drift-far 100s linear infinite; } html::after { bottom: 0; height: 32vh; min-height: 170px; background-image: url("../assets/img/bg-mountains-near.svg"), url("../assets/img/bg-ground.svg"); background-position: 0 0, 0 100%; background-size: auto 78%, 200px 100px; opacity: 0.75; animation: bg-drift-near 42s linear infinite; } @keyframes bg-drift-far { from { background-position: 0 8%, 0 100%; } to { background-position: -420px 8%, -336px 100%; } } @keyframes bg-drift-near { from { background-position: 0 0, 0 100%; } to { background-position: -340px 0, -200px 100%; } } @media (prefers-reduced-motion: reduce) { html::before, html::after { animation: none; } } body { background: radial-gradient(circle at top, rgba(16, 26, 19, 0.55) 0%, rgba(8, 9, 12, 0.75) 60%); color: var(--text-main); font-family: var(--font-display); line-height: 1.6; overflow-x: hidden; animation: page-fade-in 0.5s ease both; } @keyframes page-fade-in { from { opacity: 0; transform: translateY(8px); } /* must end on "none", not translateY(0) — any non-none transform on body turns it into a containing block for position:fixed descendants (like the custom cursor), which breaks them the moment the page scrolls */ to { opacity: 1; transform: none; } } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } body { opacity: 1; animation: none; } .hero-gif-frame, .badge-float { animation: none !important; } } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; } /* Minecraft-style blocky title look */ h1, h2, .brand-name, .step-num, .phase, .pill, .badge-float, .btn { letter-spacing: 0.03em; } h1, .brand-name, .page-header h1, .hero h1 { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55), 4px 4px 0 rgba(0, 0, 0, 0.35); image-rendering: pixelated; } h2 { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); } .container { width: min(1180px, 92%); margin-inline: auto; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.8rem; border-radius: 999px; font-weight: 700; font-family: var(--font-display); font-size: 1rem; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .btn-primary { background: linear-gradient(135deg, var(--rh-green), var(--rh-green-light)); color: #04220a; box-shadow: 0 6px 0 var(--rh-green-dark), 0 10px 24px rgba(0, 200, 5, 0.35); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--rh-green-dark), 0 14px 28px rgba(0, 200, 5, 0.45); } .btn-primary:active { transform: translateY(1px); box-shadow: 0 3px 0 var(--rh-green-dark); } .btn-outline { background: transparent; border-color: var(--rh-green); color: var(--rh-green-light); } .btn-outline:hover { background: rgba(0, 200, 5, 0.12); transform: translateY(-2px); } /* ---------- Navbar ---------- */ .navbar { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); background: rgba(8, 9, 12, 0.75); border-bottom: 1px solid rgba(0, 200, 5, 0.25); } .navbar .container { display: flex; align-items: center; justify-content: space-between; padding-block: 0.9rem; } .brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; } .brand .emoji-cat { font-size: 1.6rem; } .brand-name { color: var(--rh-green-light); } .brand-name span { color: var(--accent-yellow); } .nav-links { display: flex; gap: 1.8rem; font-weight: 600; font-size: 0.95rem; } .nav-links a { position: relative; padding-block: 0.3rem; color: var(--text-muted); transition: color 0.15s ease; } .nav-links a:hover, .nav-links a.active { color: var(--rh-green-light); } .nav-links a.active::after, .nav-links a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 3px; background: var(--rh-green); } .nav-cta { display: flex; gap: 0.8rem; align-items: center; } .nav-social { display: flex; gap: 0.5rem; } .nav-social-link { display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; color: var(--text-muted); background: rgba(0, 200, 5, 0.08); border: 1px solid rgba(0, 200, 5, 0.25); border-radius: 8px; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .nav-social-link:hover { color: var(--rh-green-light); border-color: var(--rh-green); background: rgba(0, 200, 5, 0.16); transform: translateY(-2px); } .burger { display: none; } /* ---------- Hero ---------- */ .hero { padding-block: 5rem 4rem; position: relative; } .hero .container { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 3rem; } .pill { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(0, 200, 5, 0.12); border: 1px solid var(--border-glow); color: var(--rh-green-light); padding: 0.4rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; margin-bottom: 1.2rem; } .hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 1.2rem; } .hero h1 .accent { color: var(--rh-green); } .hero h1 .accent2 { color: var(--accent-yellow); } .hero p.lead { color: var(--text-muted); font-size: 1.15rem; max-width: 46ch; margin-bottom: 2rem; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; } .hero-stats { display: flex; gap: 1.6rem; flex-wrap: wrap; } .hero-stats .stat strong { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--rh-green-light); } .hero-stats .stat span { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; } .hero-gif-frame { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; background: var(--bg-card); border: 6px solid var(--rh-green); box-shadow: 0 0 0 8px rgba(0, 200, 5, 0.08), 0 20px 60px rgba(0, 200, 5, 0.25); overflow: hidden; display: flex; align-items: center; justify-content: center; animation: float 4s ease-in-out infinite; } .hero-gif-frame img, .gif-slot img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Minecraft pixel frame (notched corners, no curves) ---------- */ .hero-gif-frame, .gallery-item, .game-frame { border-radius: 0; clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px ); } img, video, canvas { image-rendering: pixelated; image-rendering: -moz-crisp-edges; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .gif-slot { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--text-muted); text-align: center; padding: 1rem; font-size: 0.85rem; } .gif-slot .placeholder-emoji { font-size: 3rem; } .badge-float { position: absolute; background: var(--bg-card); border: 2px solid var(--rh-green); border-radius: 16px; padding: 0.5rem 0.9rem; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; box-shadow: 0 8px 20px rgba(0,0,0,0.4); } .badge-1 { top: 5%; left: -6%; animation: float 3.5s ease-in-out infinite 0.3s; } .badge-2 { bottom: 8%; right: -8%; animation: float 4.5s ease-in-out infinite 0.6s; } /* ---------- Section generic ---------- */ section { padding-block: 5rem; } .section-head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: 3rem; } .section-head h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 0.8rem; } .section-head p { color: var(--text-muted); font-size: 1.05rem; } .section-tag { color: var(--accent-yellow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; display: block; margin-bottom: 0.6rem; } /* ---------- Cards ---------- */ .card { background: var(--bg-card); border: 1px solid rgba(0, 200, 5, 0.2); border-radius: 20px; padding: 1.8rem; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-6px); border-color: var(--rh-green); box-shadow: 0 16px 32px rgba(0, 200, 5, 0.15); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .card .icon, .social-card .icon { font-size: 1.8rem; margin-bottom: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; background: linear-gradient(135deg, #8f8f8f, #5c5c5c); border-top: 3px solid #d4d4d4; border-left: 3px solid #d4d4d4; border-bottom: 3px solid #2e2e2e; border-right: 3px solid #2e2e2e; transition: transform 0.2s ease; } .card:hover .icon { transform: scale(1.12) rotate(-4deg); } .social-card:hover .icon { transform: scale(1.15) rotate(4deg); } .brand { transition: transform 0.2s ease; } .brand:hover { transform: scale(1.04); } .brand:hover .emoji-cat { animation: wiggle 0.4s ease; } @keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } } .card h3 { margin-bottom: 0.6rem; font-size: 1.2rem; } .card p { color: var(--text-muted); font-size: 0.95rem; } /* ---------- Gallery ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .gallery-item { aspect-ratio: 1/1; overflow: hidden; border: 2px solid rgba(0, 200, 5, 0.25); position: relative; background: var(--bg-card); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .gallery-item:hover { transform: translateY(-6px) scale(1.03); border-color: var(--rh-green); box-shadow: 0 14px 28px rgba(0, 200, 5, 0.25); } .gallery-item img { transition: transform 0.35s ease; } .gallery-item:hover img { transform: scale(1.08); } .gallery-item .gif-slot { font-size: 0.75rem; } .gallery-item .tag { position: absolute; bottom: 0.6rem; left: 0.6rem; background: rgba(0,0,0,0.6); padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: var(--rh-green-light); } /* ---------- Tokenomics ---------- */ .token-panel { background: var(--bg-card); border: 1px solid rgba(0, 200, 5, 0.25); border-radius: 24px; padding: 2.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; } .contract-box { display: flex; align-items: center; gap: 0.8rem; background: var(--bg-darker); border: 1px dashed var(--rh-green); border-radius: 12px; padding: 0.9rem 1.1rem; font-family: monospace; font-size: 0.9rem; color: var(--rh-green-light); word-break: break-all; } .copy-btn { background: var(--rh-green); color: #04220a; border: none; border-radius: 8px; padding: 0.4rem 0.8rem; font-weight: 700; cursor: pointer; flex-shrink: 0; } .token-list { display: flex; flex-direction: column; gap: 0.9rem; } .token-list li { display: flex; justify-content: space-between; padding: 0.7rem 1rem; background: var(--bg-darker); border-radius: 10px; font-weight: 600; } .token-list li span:last-child { color: var(--rh-green-light); } .pie-visual { aspect-ratio: 1/1; border-radius: 50%; background: conic-gradient( var(--rh-green) 0% 60%, var(--accent-yellow) 60% 80%, var(--accent-pink) 80% 92%, #4a5568 92% 100% ); max-width: 260px; margin-inline: auto; position: relative; box-shadow: 0 0 0 10px var(--bg-darker), 0 0 40px rgba(0,200,5,0.3); } .pie-visual::after { content: ""; position: absolute; inset: 22%; background: var(--bg-card); border-radius: 50%; } .legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.4rem; justify-content: center; } .legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); } .legend-dot { width: 10px; height: 10px; border-radius: 50%; } /* ---------- Roadmap ---------- */ .roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .roadmap-step { position: relative; padding-top: 1.5rem; } .roadmap-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--rh-green); } .roadmap-step .phase { font-family: var(--font-display); color: var(--accent-yellow); font-weight: 800; margin-bottom: 0.4rem; } /* ---------- How to buy steps ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .step-card { background: var(--bg-card); border-radius: 18px; padding: 1.6rem; border: 1px solid rgba(0,200,5,0.2); text-align: center; } .step-num { width: 44px; height: 44px; background: var(--rh-green); border-top: 3px solid var(--rh-green-light); border-left: 3px solid var(--rh-green-light); border-bottom: 3px solid var(--rh-green-dark); border-right: 3px solid var(--rh-green-dark); color: #04220a; font-family: var(--font-display); font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.2rem; } /* ---------- Community ---------- */ .social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } .social-card { text-align: center; padding: 2rem 1.2rem; } .social-card .icon { font-size: 2.4rem; } /* ---------- Footer ---------- */ footer { border-top: 1px solid rgba(0,200,5,0.2); padding-block: 3rem 2rem; color: var(--text-muted); font-size: 0.9rem; } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem; } .footer-links { display: flex; gap: 2.5rem; flex-wrap: wrap; } .footer-col h4 { color: var(--text-main); margin-bottom: 0.8rem; font-size: 0.95rem; } .footer-col a { display: block; margin-bottom: 0.5rem; color: var(--text-muted); transition: color 0.15s; } .footer-col a:hover { color: var(--rh-green-light); } .disclaimer { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.4rem; font-size: 0.8rem; color: #6b7a70; } /* ---------- Mini Game ---------- */ .game-wrap { max-width: 800px; margin-inline: auto; text-align: center; } .game-hud { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .hud-box { background: var(--bg-card); border: 2px solid var(--rh-green); border-radius: 12px; padding: 0.6rem 1.2rem; font-weight: 700; } .hud-box span { color: var(--rh-green-light); } .game-frame { position: relative; border: 4px solid var(--rh-green); overflow: hidden; box-shadow: 0 0 0 8px rgba(0, 200, 5, 0.08), 0 20px 60px rgba(0, 200, 5, 0.2); line-height: 0; } #game-canvas { width: 100%; height: auto; display: block; cursor: pointer; background: #0d1610; } .game-overlay { position: absolute; inset: 0; background: rgba(8, 9, 12, 0.78); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; padding: 1.5rem; cursor: pointer; transition: opacity 0.2s ease; } .game-overlay.hidden { display: none; } .game-overlay h2 { color: var(--rh-green-light); } .game-overlay p { color: var(--text-muted); max-width: 420px; } .game-hint { margin-top: 1rem; color: var(--text-muted); font-size: 0.9rem; } /* ---------- Page header (inner pages) ---------- */ .page-header { padding-block: 3.5rem 2.5rem; text-align: center; } .page-header h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin-bottom: 0.8rem; } .page-header p { color: var(--text-muted); max-width: 600px; margin-inline: auto; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .hero .container { grid-template-columns: 1fr; } .hero-visual { order: -1; } .grid-3, .grid-2, .roadmap, .steps, .social-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: repeat(3, 1fr); } .token-panel { grid-template-columns: 1fr; } .nav-links { display: none; } .burger { display: block; font-size: 1.6rem; background: none; border: none; color: var(--text-main); cursor: pointer; } } @media (max-width: 600px) { .grid-3, .grid-2, .roadmap, .steps, .social-grid { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .hero-actions { flex-direction: column; } .footer-top { flex-direction: column; } .nav-social { display: none; } }