/* ============================================================ KitsuneGuide — app.css Aesthetic: cream/beige fansite revival, dark mode reinterpreted as warm "old terminal paper". Pixel sprites, dotted borders, beveled boxes, JP/EN mixed headings, ONE neon accent. ============================================================ */ /* ---------- Fonts (no layout shift, swap) ---------- */ @import url('https://fonts.googleapis.com/css2?family=VT323&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+JP:wght@400;700&display=swap'); /* ---------- Tokens ---------- */ :root { /* paper + ink */ --paper: #1a1814; /* deep warm black (dark-mode "paper") */ --paper-2: #221f1a; /* card surface */ --paper-3: #2a2620; /* nested surface */ --cream: #fff8dc; /* the famous cornsilk — primary text */ --cream-2: #f1e9c8; /* slightly muted cream */ --cream-dim: #b8ad88; /* muted body text */ --cream-faint: #948a6e; /* metadata, timestamps — AA on dark paper (5.1:1) */ --ink-line: #3a3528; /* divider hairlines */ /* accent — used SPARINGLY. Rule: #0066FF NEVER inline in paragraph text; restricted to large headings, buttons, focus rings, icons, ribbons. For inline links use --accent-link (5.5:1 on dark paper). */ --accent: #0066ff; /* electric blue — UI / large only */ --accent-glow: #4d8dff; --accent-link: #4d8dff; /* AA inline-link safe on dark paper */ --accent-link-visited: #a36bd4; /* visited link — 5.5:1 on dark paper */ --hot: #ff3d8a; /* magenta sparkle — hover state only */ /* category swatches (subtle) */ --cat-fix: #ffb347; /* amber */ --cat-opt: #7be0a3; /* mint */ /* type */ --pixel: 'VT323', 'Courier New', monospace; --mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace; --jp: 'Noto Sans JP', 'MS Gothic', 'ヒラギノ角ゴ Pro', sans-serif; /* layout */ --wrap: 1080px; --gap: 18px; --radius: 0; /* sharp boxes */ --border: 2px dashed var(--cream-faint); --border-dot: 2px dotted var(--cream-faint); --bevel-light: rgba(255, 248, 220, 0.18); --bevel-dark: rgba(0, 0, 0, 0.55); } /* ============================================================ THEME: PAPER (light cream) — for article/post pages Apply via . Inverts paper/ink so the reader gets a high-contrast cream background with dark ink. Hero/landing keeps the default dark theme. ============================================================ */ body.theme-paper { background: repeating-linear-gradient(0deg, rgba(0,0,0,0.018) 0 1px, transparent 1px 3px), radial-gradient(ellipse at top, #ece5cf 0%, #e8e1cb 60%); --wall: #e8e1cb; /* peripheral / page bg — dimmer field */ --paper: #f5efd8; /* cream paper — article column only */ --paper-2: #ede5c4; /* callout boxes */ --paper-sunk: #e0d8b4; /* code blocks, sunken */ --paper-3: #ede5c4; /* legacy alias */ --cream: #1f1b14; /* --ink — 14.6:1 AAA */ --cream-2: #3a3428; /* --ink-2 — 10.4:1 AAA */ --cream-dim: #6b6557; /* --ink-muted — 5.5:1 AA */ --cream-faint: #948c77; /* --ink-faint — 3.3:1 large only */ --ink-line: #c9bf94; --bevel-light: rgba(255, 255, 255, 0.75); --bevel-dark: rgba(0, 0, 0, 0.25); --accent: #0066ff; /* 4.3:1 UI components only */ --accent-link: #ffffff; /* pure white inline links (per spec) */ --accent-link-visited: #f0e6ff; /* visited — white-tinted lavender */ --hot: #b22222; /* --vermillion — 5.6:1 AA */ } /* ============================================================ AUTO-FLIP: respect OS prefers-color-scheme: light. Dark theme is the default for hero/landing. If the user has set their OS to light, opt them into the paper theme unless the markup explicitly opts out via . ============================================================ */ @media (prefers-color-scheme: light) { body:not(.theme-dark) { background: repeating-linear-gradient(0deg, rgba(0,0,0,0.018) 0 1px, transparent 1px 3px), radial-gradient(ellipse at top, #ece5cf 0%, #e8e1cb 60%); --wall: #e8e1cb; --paper: #f5efd8; --paper-2: #ede5c4; --paper-sunk: #e0d8b4; --paper-3: #ede5c4; --cream: #1f1b14; --cream-2: #3a3428; --cream-dim: #6b6557; --cream-faint: #948c77; --ink-line: #c9bf94; --bevel-light: rgba(255, 255, 255, 0.75); --bevel-dark: rgba(0, 0, 0, 0.25); --accent: #0066ff; --accent-link: #ffffff; --accent-link-visited: #f0e6ff; --hot: #b22222; } } /* ============================================================ QUORA-PATTERN: WALL + PAPER COLUMN (article pages) --wall fills the viewport. Article column (.page, article) gets --paper, max-width 68ch, soft shadow on the wall. ============================================================ */ body.theme-paper main.wrap > article, body.theme-paper main.wrap > .page { background: var(--paper); max-width: 68ch; margin: 32px auto 56px; padding: 36px 44px 48px; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 24px rgba(31, 27, 20, 0.08), 0 0 0 1px rgba(0,0,0,0.04); } @media (prefers-color-scheme: light) { body:not(.theme-dark) main.wrap > article, body:not(.theme-dark) main.wrap > .page { background: var(--paper); max-width: 68ch; margin: 32px auto 56px; padding: 36px 44px 48px; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 24px rgba(31, 27, 20, 0.08), 0 0 0 1px rgba(0,0,0,0.04); } } @media (max-width: 720px) { body.theme-paper main.wrap > article, body.theme-paper main.wrap > .page { padding: 24px 20px 32px; margin: 16px auto 32px; } } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-style: dotted; } a:visited { color: var(--accent-link-visited); } a:hover { color: var(--hot); text-decoration-style: solid; } /* ---------- Focus ring (keyboard a11y — WCAG 2.4.7) ---------- */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .btn:focus-visible, .nav-yt:focus-visible { outline-offset: 4px; } /* ---------- Reduced motion (WCAG 2.3.3) ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .post:hover { transform: none; } .post:hover::after { display: none; } /* no ★ NEW! sparkle */ .btn:hover, .nav-yt:hover { transform: none; } .video-embed:hover { transform: none; } } /* ---------- Body / paper ---------- */ html { background: var(--paper); color: var(--cream); } body { font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--cream); background: /* faint scanline / dotted paper texture */ repeating-linear-gradient(0deg, rgba(255, 248, 220, 0.018) 0 1px, transparent 1px 3px), radial-gradient(ellipse at top, var(--paper-2) 0%, var(--paper) 60%); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- Wrap ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } /* =========================================================== NAV (.nav .nav-inner .brand .brand-mark .nav-links .nav-link .nav-yt) Style: thin cream bar with dotted bottom border + pixel kitsune mark =========================================================== */ .nav { background: var(--paper-2); border-bottom: var(--border-dot); position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(120%); } .nav-inner { display: flex; align-items: center; gap: 18px; padding: 12px 20px; min-height: 56px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--pixel); font-size: 26px; letter-spacing: 0.5px; color: var(--cream); text-decoration: none; } .brand:hover { color: var(--cream); } .brand-mark { /* pixel kitsune-mask glyph in a beveled tile */ display: inline-grid; place-items: center; width: 32px; height: 32px; font-family: var(--pixel); font-size: 22px; color: var(--paper); background: var(--cream); text-transform: lowercase; box-shadow: inset 2px 2px 0 var(--bevel-light), inset -2px -2px 0 rgba(0,0,0,0.25), 2px 2px 0 var(--accent); position: relative; } .brand-mark::after { /* tiny pixel ear marks */ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 22% 30%, var(--paper) 0 1.5px, transparent 2px), radial-gradient(circle at 78% 30%, var(--paper) 0 1.5px, transparent 2px); } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: 12px; flex: 1; flex-wrap: wrap; } .nav-link { font-family: var(--mono); font-size: 13px; text-decoration: none; color: var(--cream-2); padding: 6px 10px; border: 1px dotted transparent; } .nav-link::before { content: "» "; color: var(--cream-faint); } .nav-link:hover { color: var(--cream); border-color: var(--cream-faint); background: var(--paper-3); } .nav-yt { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; background: var(--accent); color: var(--cream); padding: 8px 14px; text-decoration: none; box-shadow: inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 rgba(0,0,0,0.4), 3px 3px 0 var(--paper); } .nav-yt:hover { background: var(--hot); color: var(--cream); transform: translate(1px, 1px); box-shadow: inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 rgba(0,0,0,0.4), 2px 2px 0 var(--paper); } /* =========================================================== HERO Style: cream "card" with dotted border, EN H1 + JP subtitle, single neon accent on first CTA only =========================================================== */ .hero { margin: 32px 0 28px; padding: 28px 28px 26px; background: var(--paper-2); border: var(--border); position: relative; } .hero::before { /* corner ornament */ content: "★"; position: absolute; top: -14px; left: 18px; background: var(--paper); padding: 0 8px; font-family: var(--pixel); font-size: 22px; color: var(--accent); letter-spacing: 4px; } .hero::after { content: "♪ kitsune-guide.exe"; position: absolute; top: -10px; right: 18px; background: var(--paper); padding: 0 10px; font-family: var(--mono); font-size: 10px; color: var(--cream-faint); letter-spacing: 1px; text-transform: uppercase; } .hero h1 { font-family: var(--pixel); font-size: clamp(34px, 5.6vw, 56px); line-height: 1.0; letter-spacing: 0.5px; margin: 0 0 4px; color: var(--cream); text-wrap: balance; } /* JP subtitle layered after H1 — auto-rendered via ::after if absent in markup; if you want it inline, add … inside h1 */ .hero h1::after { content: "クイック・フィックス・ガイド"; display: block; font-family: var(--jp); font-size: 14px; font-weight: 400; color: var(--cream-faint); letter-spacing: 6px; margin-top: 8px; } .hero-sub { font-family: var(--mono); font-size: 14px; color: var(--cream-2); margin: 14px 0 22px; max-width: 60ch; text-wrap: pretty; } .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; padding: 10px 16px; border: 1px solid var(--cream-faint); background: var(--paper-3); color: var(--cream); box-shadow: inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark), 3px 3px 0 var(--paper); cursor: pointer; transition: transform 0.06s linear; } .btn:hover { color: var(--cream); background: var(--paper-2); transform: translate(1px, 1px); box-shadow: inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark), 2px 2px 0 var(--paper); } .btn:active { transform: translate(3px, 3px); box-shadow: inset -1px -1px 0 var(--bevel-light), inset 1px 1px 0 var(--bevel-dark); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--cream); } .btn-primary:hover { background: var(--accent-glow); color: var(--cream); } .btn-secondary { background: var(--paper-3); border-color: var(--cream-faint); } /* =========================================================== HOME GRID (.home-grid > .latest + .sidebar) =========================================================== */ .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; margin: 8px 0 56px; } .latest > h2, .sidebar-h { font-family: var(--pixel); font-size: 24px; letter-spacing: 1px; margin: 0 0 16px; color: var(--cream); display: flex; align-items: baseline; gap: 10px; } .latest > h2::before, .sidebar-h::before { content: "❀"; color: var(--accent); font-size: 18px; } .latest > h2::after { content: "/ saisin no posuto"; font-family: var(--mono); font-size: 10px; color: var(--cream-faint); letter-spacing: 2px; text-transform: uppercase; } /* ---------- Feed cards ---------- */ .latest { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .latest > h2 { grid-column: 1 / -1; } .post { display: flex; flex-direction: column; text-decoration: none; color: var(--cream); background: var(--paper-2); border: var(--border-dot); padding: 0; transition: transform 0.08s linear, border-color 0.12s; position: relative; } .post:hover { border-color: var(--accent); transform: translate(-1px, -1px); color: var(--cream); } .post:hover::after { content: "★ NEW!"; position: absolute; top: -10px; right: -8px; font-family: var(--pixel); font-size: 16px; background: var(--hot); color: var(--cream); padding: 1px 8px; letter-spacing: 1px; box-shadow: 2px 2px 0 var(--paper); pointer-events: none; } .post-thumb { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-bottom: 1px dotted var(--cream-faint); } .post-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); } .post-thumb .play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .post-thumb .play span { display: grid; place-items: center; width: 44px; height: 44px; background: rgba(26, 24, 20, 0.85); color: var(--cream); border: 2px solid var(--cream); box-shadow: 2px 2px 0 var(--accent); } .post:hover .play span { background: var(--accent); border-color: var(--cream); } .post-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; } .post-meta { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--cream-faint); } .post-meta .cat { background: var(--cream); color: var(--paper); padding: 1px 7px; font-weight: 700; letter-spacing: 1px; } .post-meta .dot { display: inline-block; width: 4px; height: 4px; background: var(--cream-faint); } .post-title { font-family: var(--pixel); font-size: 22px; line-height: 1.05; letter-spacing: 0.4px; margin: 0; color: var(--cream); text-wrap: balance; } .post-excerpt { font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--cream-dim); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-more { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-top: 2px; } .post-more::after { content: " →"; } /* Featured = full width */ .post.featured { grid-column: 1 / -1; flex-direction: row; border-style: dashed; border-color: var(--accent); } .post.featured .post-thumb { flex: 0 0 46%; aspect-ratio: 16 / 9; border-bottom: none; border-right: 1px dotted var(--cream-faint); } .post.featured .post-body { padding: 22px 22px 22px; justify-content: center; } .post.featured .post-title { font-size: 30px; } .post.featured .post-excerpt { -webkit-line-clamp: 4; font-size: 13px; } .post.featured::before { content: "// featured fix"; position: absolute; top: -10px; left: 16px; background: var(--paper); padding: 0 8px; font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; } /* =========================================================== SIDEBAR ("old fansite link dump" — but it's a feed list) =========================================================== */ .sidebar { align-self: start; background: var(--paper-2); border: var(--border-dot); padding: 16px 14px 18px; position: relative; } .sidebar::before { content: "[ recent ]"; position: absolute; top: -10px; left: 14px; background: var(--paper); padding: 0 8px; font-family: var(--pixel); font-size: 16px; color: var(--accent); letter-spacing: 2px; } .sidebar::after { content: "★ updated daily ★"; display: block; margin-top: 14px; padding-top: 10px; border-top: 1px dotted var(--cream-faint); font-family: var(--mono); font-size: 10px; text-align: center; color: var(--cream-faint); letter-spacing: 2px; } .recent-item { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dotted var(--ink-line); text-decoration: none; color: var(--cream); align-items: start; } .recent-item:last-of-type { border-bottom: none; } .recent-item:hover { color: var(--cream); } .recent-item:hover .recent-title { color: var(--accent); } .recent-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--ink-line); } .recent-thumb img { width:100%; height:100%; object-fit: cover; } .recent-thumb .pill { position: absolute; bottom: 2px; left: 2px; font-family: var(--mono); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: var(--cream); color: var(--paper); padding: 1px 4px; } .recent-date { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--cream-faint); grid-column: 2; } .recent-title { font-family: var(--mono); font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--cream); grid-column: 2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* sidebar can also host "old fansite link dump" lists if added later: ul.sidebar-links { list-style: none; padding: 0; margin: 0; } ul.sidebar-links li::before { content: "› "; color: var(--accent); } */ /* =========================================================== CATEGORY INDEX (/fix/ /optimization/) — same shell, full grid =========================================================== */ .category-header { margin: 32px 0 20px; padding: 22px 24px; background: var(--paper-2); border: var(--border); position: relative; } .category-header::before { content: "/cat/"; position: absolute; top: -10px; left: 16px; background: var(--paper); padding: 0 8px; font-family: var(--pixel); font-size: 16px; color: var(--accent); } .category-header h1 { font-family: var(--pixel); font-size: 44px; margin: 0; letter-spacing: 0.5px; } .category-header .jp { display: block; font-family: var(--jp); font-size: 13px; color: var(--cream-faint); letter-spacing: 6px; margin-top: 4px; } .category-header p { font-family: var(--mono); font-size: 13px; color: var(--cream-dim); margin: 10px 0 0; max-width: 60ch; } .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); margin-bottom: 56px; } /* =========================================================== BOILERPLATE PAGES (.page-header .page-content) =========================================================== */ .page { max-width: 720px; margin: 0 auto; } .page-header { margin: 32px 0 24px; padding: 24px 0 20px; border-bottom: var(--border-dot); } .page-header h1 { font-family: var(--pixel); font-size: 48px; margin: 8px 0 0; letter-spacing: 0.5px; } .page-content { font-family: var(--mono); font-size: 14px; line-height: 1.75; color: var(--cream-2); padding-bottom: 56px; } .page-content h2 { font-family: var(--pixel); font-size: 26px; letter-spacing: 0.5px; color: var(--cream); margin: 32px 0 8px; padding-bottom: 4px; border-bottom: 1px dotted var(--ink-line); } .page-content h2::before { content: "» "; color: var(--accent); } .page-content p { margin: 0 0 14px; text-wrap: pretty; } .page-content a { color: var(--accent-link); } /* ---------- Breadcrumb ---------- */ .breadcrumb { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: lowercase; color: var(--cream-faint); margin-bottom: 6px; } .breadcrumb a { color: var(--cream-faint); text-decoration: none; border-bottom: 1px dotted var(--cream-faint); } .breadcrumb a:hover { color: var(--accent-link); border-color: var(--accent-link); } .breadcrumb .sep { margin: 0 6px; color: var(--cream-faint); } .breadcrumb .current { color: var(--cream-2); } .breadcrumb .section { color: var(--accent); } /* =========================================================== 404 =========================================================== */ .not-found { margin: 80px auto; max-width: 560px; text-align: center; padding: 40px 24px; background: var(--paper-2); border: var(--border); position: relative; } .not-found::before { content: "(╥﹏╥) error"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--paper); padding: 0 10px; font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; } .not-found h1 { font-family: var(--pixel); font-size: 120px; line-height: 1; margin: 0 0 4px; color: var(--cream); letter-spacing: 4px; text-shadow: 4px 4px 0 var(--accent); } .not-found p { font-family: var(--mono); font-size: 13px; color: var(--cream-dim); margin: 14px auto 24px; max-width: 40ch; } .btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* =========================================================== FOOTER =========================================================== */ footer.site { margin-top: 40px; padding: 28px 0 32px; background: var(--paper-2); border-top: var(--border-dot); position: relative; } footer.site::before { content: "════ ★ ════ ♪ ════ ❀ ════"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--paper); padding: 0 14px; font-family: var(--pixel); font-size: 16px; color: var(--cream-faint); letter-spacing: 2px; } .foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } .foot-links a { color: var(--cream-2); text-decoration: none; padding: 4px 0; border-bottom: 1px dotted transparent; } .foot-links a:hover { color: var(--accent-link); border-color: var(--accent-link); } .foot-bottom { margin-top: 16px; text-align: center; font-family: var(--mono); font-size: 10px; color: var(--cream-faint); letter-spacing: 2px; } .foot-bottom::before { content: "♪ "; color: var(--accent-link); } .foot-bottom::after { content: " ♪ last updated 2026.05.04"; color: var(--cream-faint); } /* =========================================================== RESPONSIVE =========================================================== */ @media (max-width: 860px) { .home-grid { grid-template-columns: 1fr; } .latest { grid-template-columns: 1fr; } .post.featured { flex-direction: column; } .post.featured .post-thumb { flex: none; border-right: none; border-bottom: 1px dotted var(--cream-faint); } .nav-inner { flex-wrap: wrap; } .nav-links { order: 3; flex-basis: 100%; margin-left: 0; } .hero h1 { font-size: 36px; } .not-found h1 { font-size: 80px; } } @media (max-width: 480px) { .nav-yt { font-size: 11px; padding: 6px 10px; } .hero { padding: 22px 18px; } .post-title { font-size: 19px; } .hero h1::after { letter-spacing: 3px; font-size: 12px; } }