/* ========================================================== ELECTRIC EULOGY — style.css ---------------------------------------------------------- MADE BY: "CESARE" S. PROJECT NAME: ElectricEulogy ---------------------------------------------------------- This file is part of the Electric Eulogy website project. ---------------------------------------------------------- HOW THIS STYLESHEET IS ORGANIZED ---------------------------------------------------------- Sections are marked with "--- NAME ---" comment banners in the same order the matching HTML sections appear in index.html: - Ticker, Navigation, Layout, Home, About, Art, Code, Blog, Shop, Modal, Lightbox, footer/misc... A dedicated "RESPONSIVE / MOBILE" section at the very end overrides earlier rules with @media queries for tablet and phone screen widths. ========================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poiret+One&family=Rajdhani:wght@500;600;700&family=VT323&family=Kaisei+HarunoUmi&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Diphylleia&family=Gothic+A1:wght@400;500;600;700&family=Long+Cang&family=Noto+Sans+SC:wght@400;500;600;700&family=Bpmf+Zihi+Kai+Std&family=Noto+Sans+TC:wght@400;500;600;700&family=Bilbo&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap'); /* ============================================================ --- LANGUAGE FONT STACKS - Reusable color/font "constants" --- ------------------------------------------------------------ --D (display) and --M (body) are Latin-only (Poiret One & Rajdhani). js/lang.js sets as early as possible (an inline snippet in each page's , before first paint) so there's no flash of the wrong font while the page loads. Because literally every rule below this point reaches its font through var(--D)/var(--M) rather than a hardcoded family name, overriding just these two variables per language re-themes the ENTIRE site — nav, headings, buttons, tags, forms, everything — with no other rule anywhere needing to know a language switcher exists. English and Spanish are deliberately not listed here: both are plain Latin script and Poiret One/Rajdhani already render Spanish's accented characters (á é í ñ ó ú ü) fine, so the :root defaults apply as-is. Each language gets a "thin-elegant" display font (re: Poiret One's deco linework: For headings/nav/buttons/logos) paired with a "high-glyph-coverage" body font (re: Rajdhani's workhorse role: For paragraphs/forms/dense text) — rather than defaulting everything to plain Noto Sans, which would read as generic and lose the site's art-deco identity. ja/ko/zh-Hans/zh-Hant/vi lean even further into that split than English/Spanish do: --D is a genuine calligraphic face for each of those five, while --M is a clean geometric "metro/modern" UI sans chosen to read as crisp and systematic at the small sizes nav tabs/buttons/badges/forms actually render at — so the contrast between "title" and "small print" is much starker for these five than it is for the site's default look. Within --D: ja/zh-Hans target a sharp, angular, dry-brush "torn-edge" ink-calligraphy look (bold declarative brushwork with visible texture at the stroke edges) via Yuji Mai and Long Cang — both explicitly described by their own designers/Google's listing as "raw," "unrestrained," and "textured" rather than polished. ko/zh-Hant instead use two exact fonts requested by name (Diphylleia, Bpmf Zihi Kai Std) — softer, warmer, more rounded/disciplined brush calligraphy, gentle rather than jagged. vi (Bilbo) sits in between: legible and disciplined rather than either extreme. See the per-language comments just below for the reasoning behind each individual pick. ============================================================ */ :root { --blk:#050508; --org:#ff6a00; --od:#c44d00; --og:#ff6a0044; --wht:#e8e0d0; --off:#c9bfad; --grn:#39ff5a; --gd:#1a8c30; --pnk:#ff4da6; --pur:#b44dff; --g2:#111116; --yel:#ffd700; --tel:#00e5cc; --ind:#4b0082; --indb:#6610f2; --indc:#9b59ff; --D:'Poiret One',sans-serif; --M:'Rajdhani',sans-serif; --D-lh:1.1; /* .htitle's line-height, as a var so a language whose --D face has unusually tall glyphs (deep brush descenders/flourishes) can loosen it without affecting every other language — see html[data-lang="ko"] below. */ --nh:88px; /* Actual pixel height of