/* * Ranked War Protocol — Neo-Brutalist Red / Dark Theme * Add to the document : * */ @import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;600;700&display=swap"); :root { color-scheme: dark; --ink: #090909; --paper: #f2eadf; --paper-muted: #c9c0b5; --red: #ff2b16; --red-dark: #b9190b; --white: #fffaf2; --line: 3px; --shadow: 8px 8px 0 var(--red); --content-width: 920px; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--ink); scroll-behavior: smooth; } body { width: min(calc(100% - 32px), var(--content-width)); margin: 0 auto; padding: clamp(28px, 6vw, 72px) 0 96px; overflow-wrap: break-word; color: var(--paper); background: radial-gradient(circle at 12px 12px, rgba(255, 43, 22, 0.16) 2px, transparent 2px) 0 0 / 24px 24px, var(--ink); font-family: "Space Grotesk", "Arial Narrow", Arial, sans-serif; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem); line-height: 1.65; } body::before { content: "DEVILS IN DISGUISE / WAR MANUAL"; display: block; width: max-content; max-width: 100%; margin: 0 0 14px; padding: 7px 12px 5px; border: var(--line) solid var(--paper); color: var(--paper); background: var(--ink); font-size: 0.72rem; font-weight: 700; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; } ::selection { color: var(--ink); background: var(--red); } h1, h2, h3, h4 { text-wrap: balance; } h1 { position: relative; margin: 0 8px clamp(56px, 8vw, 88px) 0; padding: clamp(22px, 4vw, 42px); border: var(--line) solid var(--paper); box-shadow: var(--shadow); color: var(--white); background: var(--red); font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(3.2rem, 10vw, 7.4rem); font-weight: 900; line-height: 0.82; letter-spacing: -0.075em; text-transform: uppercase; } h1::after { content: "READ. COORDINATE. DOMINATE."; display: block; margin-top: clamp(22px, 4vw, 44px); padding-top: 15px; border-top: var(--line) solid var(--ink); color: var(--ink); font-family: "Space Grotesk", Arial, sans-serif; font-size: clamp(0.66rem, 2vw, 0.86rem); font-weight: 700; line-height: 1.2; letter-spacing: 0.17em; } h2 { position: relative; margin: clamp(72px, 10vw, 112px) 8px 34px 0; padding: 18px 22px 16px; border: var(--line) solid var(--paper); box-shadow: var(--shadow); color: var(--ink); background: var(--red); font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(1.75rem, 5vw, 3.1rem); line-height: 0.98; letter-spacing: -0.045em; text-transform: uppercase; } h2::before { content: "SECTION"; position: absolute; top: -16px; right: 16px; padding: 4px 9px 3px; border: 2px solid var(--paper); color: var(--paper); background: var(--ink); font-family: "Space Grotesk", Arial, sans-serif; font-size: 0.62rem; font-weight: 700; line-height: 1; letter-spacing: 0.16em; } h3 { display: flex; align-items: flex-start; gap: 12px; margin: 42px 0 16px; color: var(--white); font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(1.3rem, 3.5vw, 2rem); line-height: 1.08; letter-spacing: -0.025em; text-transform: uppercase; } h3::before { content: ""; flex: 0 0 17px; width: 17px; height: 17px; margin-top: 0.18em; border: 2px solid var(--paper); background: var(--red); box-shadow: 3px 3px 0 var(--paper); } h4 { width: fit-content; margin: 32px 0 12px; padding: 5px 10px 4px; border: 2px solid var(--red); color: var(--red); font-size: 0.9rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.1em; text-transform: uppercase; } p { max-width: 76ch; margin: 0 0 16px; color: var(--paper-muted); } strong { color: var(--white); font-weight: 700; text-decoration-line: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 3px; } ul, ol { margin: 20px 0 30px; padding: 0; list-style: none; counter-reset: protocol-item; } li { position: relative; margin: 0 0 -3px; padding: 14px 18px 14px 58px; border: var(--line) solid var(--paper); color: var(--ink); background: var(--paper); font-weight: 600; line-height: 1.4; transition: translate 140ms ease, box-shadow 140ms ease; } li:nth-child(even) { background: #ded5ca; } li::before { position: absolute; top: -3px; bottom: -3px; left: -3px; display: grid; width: 44px; place-items: center; border: var(--line) solid var(--paper); color: var(--white); background: var(--red); font-family: "Archivo Black", Impact, sans-serif; line-height: 1; } ul > li::before { content: "×"; font-size: 1.5rem; } ol > li { counter-increment: protocol-item; } ol > li::before { content: counter(protocol-item, decimal-leading-zero); font-size: 0.78rem; } li:hover { z-index: 1; box-shadow: 6px 6px 0 var(--red); translate: -3px -3px; } li strong { color: var(--ink); } blockquote { position: relative; margin: 34px 8px 42px 0; padding: clamp(25px, 5vw, 44px); border: var(--line) solid var(--paper); box-shadow: var(--shadow); color: var(--ink); background: var(--paper); } blockquote::before { content: "“"; position: absolute; top: -32px; left: 18px; color: var(--red); font-family: Georgia, serif; font-size: 7rem; font-weight: 900; line-height: 1; } blockquote p, blockquote strong { margin: 0; color: var(--ink); font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.32; text-decoration: none; } /* A sharp finishing rail at the bottom of the protocol. */ body::after { content: "END OF PROTOCOL ● STAY READY"; display: block; margin-top: 72px; padding: 20px; border: var(--line) solid var(--paper); color: var(--ink); background: var(--red); font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(0.85rem, 2vw, 1.08rem); line-height: 1.1; letter-spacing: 0.08em; text-align: center; } @media (max-width: 620px) { :root { --line: 2px; --shadow: 5px 5px 0 var(--red); } body { width: min(calc(100% - 24px), var(--content-width)); padding-top: 22px; } h1 { margin-right: 5px; font-size: clamp(2.8rem, 16vw, 4.5rem); } h2 { margin-right: 5px; padding-inline: 15px; } h3 { gap: 9px; } h3::before { flex-basis: 13px; width: 13px; height: 13px; } li { padding: 12px 12px 12px 48px; } li::before { width: 37px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } li { transition: none; } } @media print { :root { --ink: #000; --paper: #fff; --paper-muted: #111; --red: #d51e0b; --white: #fff; } body { width: 100%; padding: 0; background: #fff; color: #000; font-size: 10.5pt; } h1, h2, blockquote { box-shadow: none; break-after: avoid-page; } h3, h4, li { break-inside: avoid; } p { color: #111; } }