246 lines
9.1 KiB
CSS
246 lines
9.1 KiB
CSS
/* ==============================
|
|
tutorials.css — 3Dcomunity
|
|
Tema neon (verde/naranja)
|
|
Full-width + responsive
|
|
(Coloca las fuentes en /fonts)
|
|
============================== */
|
|
|
|
/* 0) Reset + Vars */
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
html, body { height:100%; }
|
|
:root{
|
|
--bg-0:#0a0a0a; --bg-1:#0f0f0f; --bg-2:#151515; --panel:#1b1b1b;
|
|
--text:#f2f2f2; --muted:#a9a9a9; --stroke:#101010; --shadow:rgba(0,0,0,.55);
|
|
|
|
--neon-green:#39FF14; --neon-orange:#FF7A18;
|
|
--grad-gn-or:linear-gradient(90deg,var(--neon-green),var(--neon-orange));
|
|
|
|
--font-ui:'Oxanium','Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
|
|
--font-title:'ThreeDIsometric',var(--font-ui);
|
|
--font-display:'Gunplay',var(--font-ui);
|
|
--mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
|
|
|
|
--header-h:clamp(88px,16vh,150px);
|
|
--radius:16px;
|
|
--pad:clamp(14px,2vw,24px);
|
|
}
|
|
|
|
/* 1) Fuentes locales (rutas absolutas para funcionar en /sub) */
|
|
@font-face{
|
|
font-family:'ThreeDIsometric';
|
|
src:url('/fonts/3DIsometric-Regular.ttf') format('truetype'),
|
|
url('/fonts/3DIsometric-Regular.otf') format('opentype');
|
|
font-weight:700; font-style:normal; font-display:swap;
|
|
}
|
|
@font-face{
|
|
font-family:'Gunplay';
|
|
src:url('/fonts/Gunplay-Regular.otf') format('opentype');
|
|
font-weight:400; font-style:normal; font-display:swap;
|
|
}
|
|
@font-face{
|
|
font-family:'Oxanium';
|
|
src:url('/fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
|
|
font-weight:200 800; font-style:normal; font-display:swap;
|
|
}
|
|
|
|
/* 2) Base documento */
|
|
body{
|
|
font-family:var(--font-ui); color:var(--text);
|
|
background:
|
|
radial-gradient(1200px 700px at 8% -10%,#141414 0%,#0c0c0c 55%,#070707 100%),
|
|
var(--bg-0);
|
|
min-height:100svh;
|
|
display:grid; grid-template-rows:var(--header-h) 1fr;
|
|
}
|
|
*::-webkit-scrollbar{ width:10px; height:10px; }
|
|
*::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:999px; }
|
|
*::-webkit-scrollbar-thumb:hover{ background:#3a3a3a; }
|
|
|
|
/* 3) Header + Navegación */
|
|
.site-header{
|
|
background:linear-gradient(180deg,#0e0e0e 0%,#0a0a0a 100%);
|
|
border-bottom:1px solid #121212;
|
|
box-shadow:0 6px 24px var(--shadow);
|
|
display:grid;
|
|
grid-template-columns:min-content 1fr auto;
|
|
align-items:center;
|
|
gap:clamp(8px,1.6vw,18px);
|
|
padding:clamp(10px,2vw,18px) clamp(14px,2.4vw,26px);
|
|
}
|
|
.site-logo{ display:inline-flex; align-items:center; }
|
|
.site-logo img{
|
|
width:150px; height:150px; object-fit:contain; border-radius:10px;
|
|
box-shadow:0 0 0 1px #161616, 0 8px 18px rgba(0,0,0,.35);
|
|
}
|
|
.site-title{
|
|
justify-self:center; text-align:center;
|
|
font-family:var(--font-title); font-weight:800;
|
|
font-size:clamp(2.4rem,6vw,4.4rem);
|
|
letter-spacing:.06em; color:var(--neon-orange);
|
|
text-shadow:0 0 6px rgba(255,122,24,.25),0 12px 28px rgba(0,0,0,.45);
|
|
white-space:nowrap;
|
|
}
|
|
.nav-menu{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.7rem; }
|
|
|
|
/* 4) Botones (global) */
|
|
.btn{
|
|
--h:clamp(44px,5.2vh,56px); --px:clamp(14px,2.2vw,24px);
|
|
display:inline-flex; align-items:center; justify-content:center;
|
|
height:var(--h); padding:0 var(--px);
|
|
border-radius:14px; border:1px solid #1a1a1a;
|
|
font-family:var(--font-display); font-weight:800; letter-spacing:.02em;
|
|
text-decoration:none; user-select:none; cursor:pointer;
|
|
background-image:var(--grad-gn-or); background-size:220% 100%; background-position:0% 50%;
|
|
color:#0b0b0b;
|
|
box-shadow:0 8px 22px rgba(0,0,0,.55);
|
|
transition:background-position .35s ease, transform .12s ease, box-shadow .25s ease, filter .2s ease, border-color .2s ease, opacity .2s ease;
|
|
}
|
|
.btn:hover{
|
|
background-position:100% 50%; transform:translateY(-1px);
|
|
box-shadow:0 14px 28px rgba(0,0,0,.65), 0 0 18px rgba(57,255,20,.28), 0 0 28px rgba(255,122,24,.22);
|
|
filter:saturate(1.06); border-color:#262626;
|
|
}
|
|
.btn:active{ transform:translateY(0); box-shadow:inset 0 4px 10px rgba(0,0,0,.45); }
|
|
.btn:focus-visible{ outline:2px solid rgba(57,255,20,.9); outline-offset:3px; }
|
|
|
|
.btn-green{ background:none; background-color:var(--neon-green); }
|
|
.btn-orange{ background:none; background-color:var(--neon-orange); }
|
|
.btn-outline{
|
|
background:transparent; color:var(--text); border-color:#2d2d2d;
|
|
box-shadow:0 8px 22px rgba(0,0,0,.45);
|
|
}
|
|
.btn-outline:hover{
|
|
background:#151515; border-color:var(--neon-green);
|
|
box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 14px rgba(57,255,20,.22);
|
|
}
|
|
|
|
/* Botones del header (usa .btn-like para <button>) */
|
|
.nav-menu button{
|
|
height:clamp(42px,5vh,52px); padding:0 clamp(12px,2vw,20px);
|
|
border-radius:12px; border:1px solid #1a1a1a;
|
|
font-family:var(--font-display); font-weight:800; font-size:clamp(1rem,1.6vw,1.15rem);
|
|
background-image:var(--grad-gn-or); background-size:220% 100%; background-position:0% 50%;
|
|
color:#0b0b0b; box-shadow:0 6px 18px rgba(0,0,0,.5);
|
|
cursor:pointer; transition:background-position .35s, transform .12s, box-shadow .25s, filter .2s, border-color .2s;
|
|
}
|
|
.nav-menu button:hover{
|
|
background-position:100% 50%; transform:translateY(-1px);
|
|
box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 18px rgba(57,255,20,.28),0 0 28px rgba(255,122,24,.22);
|
|
border-color:#262626; filter:saturate(1.06);
|
|
}
|
|
.nav-menu button.active{
|
|
background:none; background-color:var(--neon-green); color:#0b0b0b;
|
|
border-color:#2b2b2b; box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 10px rgba(57,255,20,.35);
|
|
}
|
|
|
|
/* 5) Página tutorials */
|
|
.tut-page{ padding:0; overflow-y:auto; min-height:0; }
|
|
.doc-card{
|
|
width:100%;
|
|
background:
|
|
radial-gradient(1400px 700px at 0% 0%, rgba(57,255,20,.06), transparent 60%),
|
|
linear-gradient(180deg,#121212 0%,#0e0e0e 100%);
|
|
border-top:1px solid #171717; border-bottom:1px solid #171717;
|
|
box-shadow:0 10px 28px var(--shadow) inset;
|
|
padding:clamp(18px,3.2vw,42px);
|
|
display:grid; gap:clamp(16px,2.2vw,28px);
|
|
}
|
|
|
|
/* 6) Hero */
|
|
.hero-head{
|
|
display:grid; gap:clamp(10px,1.4vw,16px);
|
|
padding:clamp(8px,1.2vw,12px) 0;
|
|
border-bottom:1px solid #202020;
|
|
}
|
|
.hero-title{
|
|
font-family:var(--font-title);
|
|
font-size:clamp(2.2rem,5.8vw,4rem);
|
|
line-height:1.05; letter-spacing:.02em;
|
|
color:var(--neon-orange);
|
|
text-shadow:0 0 8px rgba(255,122,24,.18);
|
|
}
|
|
.hero-title span{ color:var(--neon-green); text-shadow:0 0 10px rgba(57,255,20,.22); }
|
|
.hero-subtitle{ font-size:clamp(1.04rem,1.8vw,1.24rem); color:var(--text); max-width:1100px; }
|
|
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem .85rem; margin-top:.25rem; }
|
|
|
|
/* 7) Índice */
|
|
.index-row{
|
|
display:flex; flex-wrap:wrap; gap:.6rem .7rem;
|
|
padding:.35rem 0; border-top:1px solid #202020; border-bottom:1px solid #202020;
|
|
}
|
|
|
|
/* 8) Bloques / tarjetas */
|
|
.block{ display:grid; gap:.9rem; }
|
|
.block-title{
|
|
font-family:var(--font-display);
|
|
font-size:clamp(1.3rem,2.6vw,1.7rem);
|
|
letter-spacing:.01em;
|
|
}
|
|
.grid-2{ display:grid; gap:clamp(12px,2vw,18px); grid-template-columns:repeat(2,minmax(0,1fr)); }
|
|
.card{
|
|
background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius);
|
|
box-shadow:0 10px 26px var(--shadow); padding:var(--pad);
|
|
display:grid; gap:.7rem;
|
|
}
|
|
.card h4{ font-weight:800; font-size:clamp(1.05rem,1.9vw,1.25rem); letter-spacing:.01em; }
|
|
|
|
/* 9) Listas */
|
|
.check-list, .dash-list{ list-style:none; display:grid; gap:.5rem; }
|
|
.check-list li{ position:relative; padding-left:1.6rem; }
|
|
.check-list li::before{
|
|
content:"✓"; position:absolute; left:0; top:0; color:var(--neon-green); font-weight:900;
|
|
}
|
|
.dash-list li{ position:relative; padding-left:1.2rem; color:#d6d6d6; }
|
|
.dash-list li::before{ content:"—"; position:absolute; left:0; top:0; color:#7c7c7c; }
|
|
|
|
/* 10) Código y ASCII */
|
|
pre.code{
|
|
background:#0f0f0f; color:#ddd; border:1px solid #232323;
|
|
border-radius:12px; padding:12px 14px; overflow:auto; font-family:var(--mono);
|
|
box-shadow:inset 0 0 0 1px #111, 0 12px 24px rgba(0,0,0,.35);
|
|
}
|
|
pre.code code{ font-family:inherit; font-size:.95rem; }
|
|
pre.ascii{
|
|
background:#0e0e0e; border:1px dashed #2b2b2b; border-radius:12px;
|
|
padding:14px 16px; overflow:auto; font-family:var(--mono);
|
|
text-shadow:0 0 8px rgba(0,0,0,.3);
|
|
}
|
|
pre.ascii.gn{ color:var(--neon-green); }
|
|
pre.ascii.or{ color:var(--neon-orange); }
|
|
|
|
/* 11) FAQ */
|
|
.faq{
|
|
background:#141414; border:1px solid #2a2a2a; border-radius:12px; padding:.85rem 1rem;
|
|
}
|
|
.faq + .faq{ margin-top:.6rem; }
|
|
.faq summary{ cursor:pointer; list-style:none; font-weight:700; }
|
|
.faq summary::-webkit-details-marker{ display:none; }
|
|
.faq summary::after{ content:"+"; float:right; font-weight:900; color:var(--neon-green); }
|
|
.faq[open] summary::after{ content:"—"; }
|
|
|
|
/* 12) Tipografía general en el documento */
|
|
.doc-card p, .doc-card ul, .doc-card ol{ line-height:1.7; color:var(--text); }
|
|
|
|
/* 13) Utilidades */
|
|
.muted{ color:var(--muted); }
|
|
.center{ text-align:center; }
|
|
.mt{ margin-top:.8rem; }
|
|
|
|
/* 14) Responsive */
|
|
@media (max-width:1200px){
|
|
.grid-2{ grid-template-columns:1fr 1fr; }
|
|
}
|
|
@media (max-width:900px){
|
|
.site-header{ grid-template-columns:min-content 1fr; grid-auto-rows:auto; }
|
|
.site-title{ font-size:clamp(2rem,6.5vw,3rem); }
|
|
.nav-menu{ justify-content:center; }
|
|
.grid-2{ grid-template-columns:1fr; }
|
|
}
|
|
@media (max-width:680px){
|
|
.btn{ --h:44px; }
|
|
.btn-row{ gap:.6rem; }
|
|
}
|
|
@media (max-width:480px){
|
|
.hero-title{ font-size:clamp(1.8rem,10vw,2.3rem); }
|
|
.hero-subtitle{ font-size:1rem; }
|
|
}
|