/* ============================================================ site.css — Shared stylesheet for Linux & VPS Guides drunkenwalnuts.com ============================================================ */ /* ── Google Fonts are loaded in each HTML ── */ /* ──────────────────────── CSS CUSTOM PROPERTIES ──────────────────────── */ :root { --bg: #080c14; --bg2: #0d1220; --bg3: #111827; --bg4: #1a2235; --border: #1e2d45; --border2: #2a3f5f; --accent: #00d4ff; --accent2: #7c3aed; --orange: #f97316; --green: #10b981; --purple-soft: #a855f7; --red: #ef4444; --yellow: #f59e0b; --amber: #f59e0b; --text: #e2e8f0; --text2: #8b949e; --text3: #4a5568; --mono: 'JetBrains Mono', monospace; --sans: 'Syne', sans-serif; --site-nav-h: 49px; /* sticky nav height — update if nav padding changes */ } /* ──────────────────────── RESET & BASE ──────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { background: var(--bg); color: var(--text); font-family: var(--sans); min-height: 100vh; overflow-x: hidden; line-height: 1.6; } /* ──────────────────────── GRID BACKGROUND ──────────────────────── */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(0,212,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,0.025) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none; z-index: 0; } /* ──────────────────────── GLOW BLOBS ──────────────────────── */ .blob { position: fixed; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; } .blob-1 { width: 600px; height: 600px; top: -200px; left: -200px; background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, transparent 70%); } .blob-2 { width: 500px; height: 500px; bottom: -150px; right: -100px; background: radial-gradient(circle, rgba(0,212,255,0.12) 0%, transparent 70%); } /* ──────────────────────── LAYOUT WRAPPERS ──────────────────────── */ .wrap { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; padding: 0 24px; } /* Narrower reading column used by guide pages */ .content-wrap { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; padding: 0 24px; } /* ──────────────────────── NAV ──────────────────────── */ /* * .site-shell — a self-contained, full-width strip used ONLY by nav and footer. * It has its own fixed max-width and horizontal padding that are NEVER * overridden by page-level .wrap or .content-wrap rules. * Every page's nav and footer should use
/ *
instead of
. */ .site-shell { max-width: 1060px; margin: 0 auto; padding: 0 24px; } nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border); background: rgba(8,12,20,0.88); backdrop-filter: blur(14px); /* Ensure nav itself always spans the full viewport width */ width: 100%; box-sizing: border-box; } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; } .nav-logo { font-family: var(--mono); font-size: 0.85rem; font-weight: 700; color: var(--accent); letter-spacing: 0.5px; text-decoration: none; display: flex; align-items: center; gap: 8px; } .nav-logo .prompt { color: var(--accent2); } .nav-logo .cursor { display: inline-block; width: 2px; height: 1em; background: var(--accent); margin-left: 2px; animation: blink 1.1s step-end infinite; vertical-align: text-bottom; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } .nav-links { display: flex; gap: 24px; list-style: none; } .nav-links a { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text2); text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: var(--accent); } .nav-links a.active { color: var(--accent); } /* ──────────────────────── HERO (shared across all pages) ──────────────────────── */ .hero { padding: 80px 0 60px; text-align: center; } /* index.html uses slightly more vertical padding */ .hero--home { padding: 96px 0 72px; } .hero-badge { display: inline-block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(0,212,255,0.3); padding: 5px 16px; border-radius: 2px; margin-bottom: 28px; } .hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -1px; margin-bottom: 22px; } /* index.html uses a slightly larger h1 */ .hero--home h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); } .hero h1 .line-1 { display: block; color: var(--text); } .hero h1 .line-2 { display: block; background: linear-gradient(120deg, var(--accent) 0%, var(--accent2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-sub { max-width: 560px; margin: 0 auto 36px; font-size: 1.05rem; color: var(--text2); line-height: 1.75; } .hero-meta { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; } .meta-item { font-family: var(--mono); font-size: 0.72rem; color: var(--text3); letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; } .meta-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); display: inline-block; } /* ──────────────────────── SECTION LABEL (divider) ──────────────────────── */ .section-label { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; } .section-label span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text3); white-space: nowrap; } .section-label::before, .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } .section-label::before { display: none; } /* guide pages use slightly more bottom margin */ .section-label--guide { margin-bottom: 36px; } /* ──────────────────────── HOME — GUIDE CARDS ──────────────────────── */ .guides { padding-bottom: 100px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 28px 26px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; } /* Radial mouse-follow glow */ .card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.03), transparent 40%); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .card:hover::before { opacity: 1; } .card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); } /* Per-card accent colours */ .card.card-ubuntu { --card-accent: var(--orange); } .card.card-vps { --card-accent: var(--green); } .card.card-wg { --card-accent: var(--accent); } .card.card-ssh { --card-accent: var(--purple-soft); } .card.card-caddy { --card-accent: #2dd4bf; } .card:hover { border-color: var(--card-accent); } /* Glowing top stripe on hover */ .card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--card-accent); opacity: 0; transition: opacity 0.25s; } .card:hover::after { opacity: 1; } .card-icon { font-size: 2rem; line-height: 1; } .card-tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--card-accent); border: 1px solid currentColor; padding: 3px 10px; border-radius: 2px; display: inline-block; width: fit-content; } .card-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.3px; color: var(--text); line-height: 1.25; } .card-desc { font-size: 0.875rem; color: var(--text2); line-height: 1.65; flex: 1; } .card-pills { display: flex; flex-wrap: wrap; gap: 6px; } .pill { font-family: var(--mono); font-size: 0.62rem; color: var(--text3); background: var(--bg4); border: 1px solid var(--border); padding: 2px 8px; border-radius: 3px; } .card-cta { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--border); } .card-cta-text { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; color: var(--card-accent); letter-spacing: 0.5px; } .card-arrow { font-size: 1rem; color: var(--card-accent); transition: transform 0.2s; } .card:hover .card-arrow { transform: translateX(5px); } /* ──────────────────────── HOME — FEATURE STRIP ──────────────────────── */ .features { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 52px 0; margin-bottom: 80px; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; } .feature-item { display: flex; flex-direction: column; gap: 10px; } .feature-icon { font-size: 1.4rem; } .feature-label { font-size: 0.95rem; font-weight: 700; color: var(--text); } .feature-desc { font-size: 0.8rem; color: var(--text2); line-height: 1.6; } /* ──────────────────────── GUIDE PAGES — TABLE OF CONTENTS ──────────────────────── */ .toc-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 28px 32px; margin: 0 0 52px; } .toc-card h2 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text3); margin-bottom: 18px; } .toc-list { list-style: none; display: flex; flex-direction: column; gap: 6px; } .toc-list li { display: flex; align-items: center; gap: 12px; } .toc-num { font-family: var(--mono); font-size: 0.65rem; color: var(--accent); min-width: 22px; } .toc-list a { font-size: 0.9rem; color: var(--text2); text-decoration: none; transition: color 0.2s; line-height: 1.4; } .toc-list a:hover { color: var(--accent); } /* ──────────────────────── GUIDE PAGES — STEP BLOCKS ──────────────────────── */ .guide-body { padding-bottom: 100px; } .step-block { margin-bottom: 52px; scroll-margin-top: 80px; } .step-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .step-num { font-family: var(--mono); font-size: 0.65rem; font-weight: 700; color: var(--accent); background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.2); border-radius: 4px; padding: 4px 10px; white-space: nowrap; letter-spacing: 1px; } .step-title { font-size: 1.4rem; font-weight: 800; color: var(--text); letter-spacing: -0.3px; } .step-body { font-size: 0.95rem; color: var(--text2); line-height: 1.75; margin-bottom: 20px; } .step-body strong { color: var(--text); } .step-body a { color: var(--accent); text-decoration: none; } .step-body a:hover { text-decoration: underline; } /* ──────────────────────── GUIDE PAGES — CODE BLOCKS ──────────────────────── */ .code-block { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 16px 0; } .code-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg4); } .code-label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); } .copy-btn { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); background: transparent; border: 1px solid var(--border2); border-radius: 3px; padding: 3px 10px; cursor: pointer; transition: color 0.2s, border-color 0.2s; display: flex; align-items: center; gap: 6px; } .copy-btn:hover { color: var(--accent); border-color: var(--accent); } .copy-btn.copied { color: var(--green); border-color: var(--green); } code.block { display: block; font-family: var(--mono); font-size: 0.82rem; color: var(--text); padding: 18px 20px; white-space: pre; overflow-x: auto; line-height: 1.7; } code.block .comment { color: var(--text3); } code.block .cmd { color: var(--accent); } code.block .flag { color: var(--accent2); } code.block .str { color: var(--green); } code.block .placeholder { color: var(--orange); } /* Inline code */ code.inline { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.15); border-radius: 3px; padding: 1px 6px; } /* ──────────────────────── GUIDE PAGES — CALLOUT BOXES ──────────────────────── */ .callout { display: flex; gap: 14px; border-radius: 8px; padding: 16px 20px; margin: 20px 0; font-size: 0.88rem; line-height: 1.65; } .callout-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; } .callout-text strong { display: block; margin-bottom: 4px; font-size: 0.82rem; letter-spacing: 0.5px; } .callout.warning { background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.25); color: var(--text2); } .callout.warning strong { color: var(--yellow); } .callout.danger { background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.25); color: var(--text2); } .callout.danger strong { color: var(--red); } .callout.tip { background: rgba(16,185,129,0.07); border: 1px solid rgba(16,185,129,0.22); color: var(--text2); } .callout.tip strong { color: var(--green); } .callout.info { background: rgba(0,212,255,0.06); border: 1px solid rgba(0,212,255,0.18); color: var(--text2); } .callout.info strong { color: var(--accent); } /* ──────────────────────── GUIDE PAGES — MISC COMPONENTS ──────────────────────── */ .step-divider { height: 1px; background: var(--border); margin: 52px 0; } .sub-steps { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 16px 0; } .sub-steps li { display: flex; gap: 12px; font-size: 0.92rem; color: var(--text2); line-height: 1.65; } .sub-steps li strong { color: var(--text); } .sub-bullet { font-family: var(--mono); font-size: 0.7rem; color: var(--accent2); min-width: 20px; margin-top: 3px; flex-shrink: 0; } /* ──────────────────────── GUIDE PAGES — DYNAMIC INPUTS ──────────────────────── */ .input-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .input-label { font-family: var(--mono); font-size: 0.72rem; color: var(--text2); letter-spacing: 0.5px; white-space: nowrap; } .dynamic-input { font-family: var(--mono); font-size: 0.8rem; background: var(--bg4); border: 1px solid var(--border2); border-radius: 5px; color: var(--text); padding: 7px 14px; outline: none; transition: border-color 0.2s; flex: 1; min-width: 200px; max-width: 360px; } .dynamic-input:focus { border-color: var(--accent); } .dynamic-input::placeholder { color: var(--text3); } .input-hint { font-family: var(--mono); font-size: 0.62rem; color: var(--text3); letter-spacing: 0.5px; } /* Highlighted placeholder in dynamic code blocks */ .dyn-val { color: var(--orange); font-style: italic; } /* ──────────────────────── FOOTER ──────────────────────── */ footer { border-top: 1px solid var(--border); padding: 32px 0; /* Always span full viewport width, independent of page content width */ width: 100%; box-sizing: border-box; /* Reset any margin-left set by page-specific layouts (e.g. sidebar pages) */ /* Pages that need a sidebar offset should add: footer { margin-left: var(--sidebar-w); } in their own