/* Drago2 Policy Center Layout mirrors policy.wemade.games: a 60px header strip, a centred 1072px column, tab row, date selector, then long-form legal copy. Measurements were taken from the reference rather than eyeballed. */ :root { --bg: #ffffff; --header-bg: #f8f8f8; --text: #454545; --heading: #161519; --line: #e6e6e6; --line-strong: #161519; --muted: #8a8a8a; --surface: #ffffff; --surface-alt: #fafafa; --hover: #f4f4f4; --link: #1b62c4; --link-hover: #12448c; --shadow: rgba(0, 0, 0, .10); --logo-invert: 0; --content-w: 1072px; --header-h: 60px; } /* Dark theme. Values are chosen for contrast rather than by inverting the light palette: pure white text on pure black glares, so body text sits at #c8c8cc on #13141a — comfortably above the 4.5:1 needed for long-form reading. The theme is set by a data-theme attribute on , applied before first paint so the page never flashes light before switching. */ :root[data-theme="dark"] { --bg: #13141a; --header-bg: #191a21; --text: #c8c8cc; --heading: #f0f0f3; --line: #2b2d36; --line-strong: #f0f0f3; --muted: #8c8c96; --surface: #191a21; --surface-alt: #1f2028; --hover: #24252e; --link: #7fb2ff; --link-hover: #a5c9ff; --shadow: rgba(0, 0, 0, .5); /* The wordmark file is black for the light page; on dark it inverts back to the white original it was made from. */ --logo-invert: 1; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; font-size: 14px; line-height: 1.38; /* Cyrillic and Central-European diacritics must render cleanly: the language list spans Russian, Polish, Czech, Hungarian and Romanian. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --------------------------------------------------------------- header -- */ .hd { height: var(--header-h); background: var(--header-bg); display: flex; align-items: center; justify-content: center; position: relative; } .hd__logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--heading); } /* The brand wordmark ships as white artwork for dark backgrounds; this page is white, so `logo-dark.webp` holds a pre-inverted black copy. Baking the inversion into the file rather than applying `filter: invert(1)` here means the logo still renders correctly for anyone holding a cached stylesheet. If the brand asset is ever updated, regenerate logo-dark.webp from it. */ .hd__logo img { height: 24px; width: auto; display: block; filter: invert(var(--logo-invert)); } /* Theme toggle sits immediately left of the language selector. The icon shows the theme you would switch TO, which is the convention users expect. */ .themebtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; flex: none; } .themebtn:hover { border-color: #c9c9c9; } :root[data-theme="dark"] .themebtn:hover { border-color: #454754; } .themebtn svg { width: 16px; height: 16px; display: block; } /* Only one icon is shown at a time. */ .themebtn .icon-moon { display: none; } :root[data-theme="dark"] .themebtn .icon-sun { display: none; } :root[data-theme="dark"] .themebtn .icon-moon { display: block; } /* The two controls share a row so they stay aligned as a pair. */ .hdctl { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; } /* Language selector. No flags: locale and nationality are not the same thing, and a flag misrepresents languages spoken across many countries. */ .lang { position: relative; } .lang__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; line-height: 1; } .lang__btn:hover { border-color: #c9c9c9; } .lang__btn svg { width: 12px; height: 12px; opacity: .55; flex: none; } .lang__menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 168px; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 24px var(--shadow); padding: 4px; z-index: 40; } .lang__menu[hidden] { display: none; } .lang__opt { display: block; width: 100%; text-align: left; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--text); background: none; border: 0; border-radius: 3px; cursor: pointer; } .lang__opt:hover { background: var(--hover); } .lang__opt[aria-current="true"] { font-weight: 700; color: var(--heading); } /* ---------------------------------------------------------------- shell -- */ .wrap { width: var(--content-w); max-width: calc(100% - 48px); margin: 0 auto; } /* ----------------------------------------------------------------- tabs -- */ .tabs { display: flex; gap: 8px; margin-top: 53px; } .tabs__item { flex: 1; text-align: center; padding: 10px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 400; color: var(--text); text-decoration: none; transition: border-color .15s ease; } .tabs__item:hover { border-bottom-color: #b5b5b5; } .tabs__item[aria-current="page"] { font-weight: 600; border-bottom: 2px solid var(--line-strong); color: var(--heading); } /* ----------------------------------------------------------------- date -- */ .dateline { display: flex; justify-content: flex-end; margin-top: 22px; } .datepick { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; font: inherit; font-size: 14px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; line-height: 1; } .datepick:hover { border-color: #c9c9c9; } .datepick svg { width: 10px; height: 10px; opacity: .5; } /* Only one revision exists so far. The control stays visible to match the reference and to hold the shape for when history accumulates, but it says so plainly instead of opening an empty menu. */ .datepick--single { cursor: default; } .datepick--single:hover { border-color: var(--line); } .datenote { margin: 8px 0 0; text-align: right; font-size: 12px; color: var(--muted); } /* -------------------------------------------------------------- content -- */ .doc { margin: 40px 0 96px; } .doc__intro { margin: 0; } .doc h2 { margin: 48px 0 0; font-size: 20px; font-weight: 700; line-height: 1.38; color: var(--heading); } .doc h3 { margin: 28px 0 0; font-size: 15px; font-weight: 700; color: var(--heading); } .doc p { margin: 16px 0 0; } .doc ul, .doc ol { margin: 12px 0 0; padding-left: 22px; } .doc li { margin: 4px 0; } .doc a { color: var(--link); text-decoration: underline; } .doc a:hover { color: var(--link-hover); } .doc strong { color: var(--heading); font-weight: 700; } .doc__note { margin-top: 12px; font-size: 13px; color: var(--muted); } /* Tables carry the cookie inventory. They must stay readable on a phone, so they scroll inside their own box rather than forcing the page sideways. */ .doc__tablewrap { margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .doc table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; } .doc th, .doc td { border: 1px solid var(--line); padding: 9px 16px; text-align: left; vertical-align: top; } .doc th { font-weight: 700; color: var(--heading); background: var(--surface-alt); } .doc code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--hover); padding: 1px 5px; border-radius: 3px; } /* --------------------------------------------------------------- footer -- */ .ft { border-top: 1px solid var(--line); padding: 24px 0 40px; font-size: 13px; color: var(--muted); } .ft__row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: center; } .ft a { color: var(--muted); text-decoration: none; } .ft a:hover { color: var(--text); text-decoration: underline; } .ft__legal { margin: 14px 0 0; text-align: center; line-height: 1.6; } /* ------------------------------------------------------------ responsive -- */ @media (max-width: 900px) { .tabs { margin-top: 32px; flex-wrap: wrap; gap: 0; } .tabs__item { flex: 1 1 50%; } .doc h2 { margin-top: 40px; font-size: 18px; } } @media (max-width: 560px) { .wrap { max-width: calc(100% - 32px); } .hd { justify-content: flex-start; padding-left: 16px; } .hdctl { right: 12px; gap: 6px; } .lang__btn { max-width: 38vw; overflow: hidden; } .tabs__item { flex: 1 1 100%; font-size: 13px; text-align: left; padding: 12px 4px; } .dateline { justify-content: flex-start; } .datenote { text-align: left; } } @media print { .hd, .tabs, .dateline, .datenote, .ft { display: none; } /* Printing is always on white paper. */ :root[data-theme="dark"] { --bg: #fff; --text: #000; --heading: #000; --line: #999; } .doc { margin: 0; } body { font-size: 11pt; } } /* --------------------------------------------------- revision menu + a11y -- */ /* The date control became a real menu once revisions moved into the database. With a single revision it still renders as the plain label the original shipped with. */ .datewrap { position: relative; } .datemenu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 168px; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 24px var(--shadow); padding: 4px; z-index: 40; } .datemenu[hidden] { display: none; } .datemenu__opt { display: block; padding: 8px 10px; font-size: 13px; color: var(--text); text-decoration: none; border-radius: 3px; white-space: nowrap; } .datemenu__opt:hover { background: var(--hover); } .datemenu__opt[aria-current="true"] { font-weight: 700; color: var(--heading); } /* The documents open at

, so each page carries a heading for assistive tech and search engines without altering the layout the design calls for. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Superseded revisions are readable but clearly marked as not in force. */ .revnotice { margin: 0 0 24px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 4px; background: var(--surface); font-size: 13.5px; color: var(--muted); }