/** * royale-kazino-az.com — «SIRSIRA & KÖMÜR» * * THE PALETTE LAW, and the only reason this file is written the way it is. Every sibling in * this cluster leaves one of the three words to be inferred: royale-kazino.az lets the * ccTLD carry the country, royalekazino.com drops the separator, royale-casino-az.com * swaps the Azerbaijani word for the international one. This domain SPELLS ALL THREE OUT. * So this document is about what is actually written down versus what a reader is merely * invited to assume — and a palette for that has to be a palette in which nothing is * implied. Hence a MIRROR. * * Write u = Y + 0,05 for the WCAG relative luminance Y, so every contrast ratio is a plain * quotient of u. The paper is u_P = 0,970, the dark ground u_G = 0,072, * and k = u_P·u_G = 0,06984. * * R1 INVOLUTION. The palette is CLOSED under mu(u) = k/u. Every token's mirror is in * the palette; mu is its own inverse; mu swaps the two grounds. Worst deviation over * the six shipped pairs: 0,078%. * R2 EQUAL READING. Therefore contrast(ust_j, paper) == contrast(alt_j, ground) for * every pair — 1,15 · 1,80 · 3,67 · 6,20 · 9,41 · 13,48 on BOTH * grounds, worst deviation 0,114%. A fact reads with exactly the same * weight on either side, so the choice of ground can never smuggle in emphasis. * R3 ONE FIXED POINT. u* = sqrt(k) — the token `ox`, 3,67 : 1 on both grounds. It is * the only colour that belongs to both sides, which is why it is grey (it cannot * pick one) and why it is LARGE-TEXT-AND-ICONS ONLY (sqrt(R) is below 4,5 for any * real paper/ground pair, so the hinge can never be a body ink). * R4 MIRRORED CHROMA. C(u) == C(k/u), rising with distance from the axis — so chroma is * NOT a monotone function of lightness (1 turning point). The two most * saturated surfaces on the page are the two GROUNDS; every ink between them is * nearer grey. This is the opposite of every ordinary ramp. * * All eleven sit on ONE hue, OKLCH 194,5° — the emptiest point on the network's hue * circle (329 chromatic hues across 103 themes; nearest neighbour 2,5°). Hue is NOT the * claim here and distinguishes nothing: the claim is the mirror. * * İŞIQ SAHƏSİ L 0,968 C 0,0371 #D9FDFC sırsıra — the paper * ÜST 1 L 0,922 C 0,0304 #CFECEC lövhə-üst — 1,15 : 1 plate fill * ÜST 2 L 0,786 C 0,0188 #ACBDBE xətt-üst — 1,80 : 1 hairlines * OX L 0,598 C 0,0024 #7E8080 ox — 3,67 : 1 BOTH grounds; large text/icons only * ÜST 4 L 0,472 C 0,0137 #535E5E kölgə-üst — 6,20 : 1 secondary prose * ÜST 5 L 0,373 C 0,0263 #304545 naxış-üst — 9,41 : 1 headings, badges * KÖLGƏ SAHƏSİ L 0,277 C 0,0350 #102D30 kömür — 13,48 : 1 body ink on the paper * ALT 1 L 0,316 C 0,0321 #1D3738 lövhə-alt — 1,15 : 1 plate fill * ALT 2 L 0,427 C 0,0212 #425352 xətt-alt — 1,80 : 1 hairlines * ALT 4 L 0,733 C 0,0168 #9DACAC kölgə-alt — 6,20 : 1 secondary prose * ALT 5 L 0,853 C 0,0247 #BDD4D4 naxış-alt — 9,41 : 1 headings, badges * * `census_rka.py` over the 103 themes on this machine: 0 hold R1, 0 hold R2, 0 hold R4, * 0 hold any of them. None of the eleven hexes appears anywhere in the network's tokens. * * FOUR CONSEQUENCES THAT READ AS RULES WHILE EDITING THIS FILE. * (a) NO RULE IN THIS FILE MAY NAME A TOKEN. Every declaration addresses a SEMANTIC var * (--rka-ground / --rka-ink / --rka-plate / --rka-line / --rka-quiet / --rka-head / * --rka-axis), and one block — `.rka-gece` — rebinds all seven to the other side. * That is the whole implementation of the law: the document can change ground * anywhere and the palette guarantees not one ratio moves. * (b) THE PLATE COSTS NOTHING HERE, and that is a consequence, not a second policy. A * plate sits 1,15 above its ground, and the gap between adjacent rungs is * 1,56× — larger than the plate's cost — so every rung survives being put on * one: quiet 5,39 : 1, head 8,17 : 1, ink 11,71 : 1, and the axis still clears the * 3 : 1 large-text floor at 3,19 : 1. The 94th's plate hazard cannot occur. * (c) THERE IS NO SUCH THING AS «a slightly lighter version» of a token. A tint is a * colour with no mirror, and a colour with no mirror reads differently on the two * grounds — the one thing this palette claims cannot happen. * (d) The three statuses of the content law (YAZILIB / GÜMAN / «—») are told apart by a * WORD and by WHICH SIDE OF THE MIRROR they are printed on — plain ink, an inverted * chip, a bare dash — never by hue, because there is only one hue and it reports a * token's rung, never a fact's status. * * @package royale-kazino-az-com */ /* NO GRADIENTS ANYWHERE IN THIS FILE, and that is the law rather than a preference. A gradient between two rungs is a run of colours that are not rungs at all — the midpoint of any two tokens on this ramp lies OFF the sequence, because the mean of two terms of a geometric series is not a term of it. So a gradient here is not a soft edge; it is a stretch of pixels that break the law the whole document is built on. Translucent WASHES are the same problem written in rgba(), and a hex sweep cannot see them (the 79th's recorded trap), so both grounds are flat and there is no backdrop tint anywhere. THE ONE NAMED EXEMPTION: box-shadow, which is black at low alpha. A shadow darkens what is already there rather than painting a colour of its own, it is never text and never an edge the reader must resolve, and dxl/seocheck.py §15 strips shadow declarations before the sweep rather than whitelisting their hexes. */ /* ------------------------------------------------------------------ 1. tokens */ :root { /* the eleven tokens. Sorted by luminance the two chains ALTERNATE, because they are each other's mirror and not each other's continuation. */ --rka-sirsira: #D9FDFC; --rka-lovhe-ust: #CFECEC; --rka-xett-ust: #ACBDBE; --rka-ox: #7E8080; --rka-kolge-ust: #535E5E; --rka-naxis-ust: #304545; --rka-komur: #102D30; --rka-lovhe-alt: #1D3738; --rka-xett-alt: #425352; --rka-kolge-alt: #9DACAC; --rka-naxis-alt: #BDD4D4; /* THE MECHANIC. No rule below this block names a token; they all name one of these seven, and `.rka-gece` rebinds all seven to the other side of the mirror. */ --rka-ground: var(--rka-sirsira); --rka-ink: var(--rka-komur); --rka-plate: var(--rka-lovhe-ust); --rka-line: var(--rka-xett-ust); --rka-line-lit: var(--rka-ox); --rka-axis: var(--rka-ox); --rka-quiet: var(--rka-kolge-ust); --rka-head: var(--rka-naxis-ust); --rka-mark: var(--rka-naxis-ust); --rka-focus: var(--rka-naxis-ust); /* ƏKS-JETON — a disc of diameter 66 whose eleven 6-unit bands tile it exactly, so band 5 spans 30..36 and its midpoint IS the centre. Geometry in inc/brand.php. */ --jt-vb: 66; --jt-band: 6px; --jt-centre: 33px; --rka-shell: 1160px; --rka-measure: 720px; --rka-radius: 3px; --rka-tap: 44px; } /* THE OTHER SIDE. Seven rebindings and nothing else: the law does the rest. */ .rka-gece { --rka-ground: var(--rka-komur); --rka-ink: var(--rka-sirsira); --rka-plate: var(--rka-lovhe-alt); --rka-line: var(--rka-xett-alt); --rka-line-lit: var(--rka-ox); --rka-axis: var(--rka-ox); --rka-quiet: var(--rka-kolge-alt); --rka-head: var(--rka-naxis-alt); --rka-mark: var(--rka-naxis-alt); --rka-focus: var(--rka-naxis-alt); background-color: var(--rka-komur); color: var(--rka-sirsira); } /* theme.json publishes its element colours at `:root :where(...)`, which is specificity (0,1,0); every override below is (0,1,1) or higher on purpose, because a tie would be settled by stylesheet order and global-styles is printed before this file (the 86th's recorded trap: a theme.json heading colour made every heading on a light section invisible). */ .rka-gece :is(h1, h2, h3, h4, h5, h6) { color: var(--rka-head); } .rka-gece a:not(.wp-element-button):not(.rka-cta):not(.rka-head__cta):not(.rka-btn) { color: var(--rka-ink); } .rka-gece a:not(.wp-element-button):not(.rka-cta):not(.rka-head__cta):not(.rka-btn):hover { color: var(--rka-head); } /* The CTA is the one place the mirror is a GESTURE and not a rule: on the paper the button is the dark ground, on the dark ground it is the paper. Pressing it is stepping across the axis, and by R2 the label reads at 13,48 : 1 either way. */ .rka-gece .wp-element-button, .rka-gece .wp-block-button__link { background-color: var(--rka-sirsira); color: var(--rka-komur); } .rka-gece .wp-element-button:hover, .rka-gece .wp-block-button__link:hover { background-color: var(--rka-naxis-alt); color: var(--rka-komur); } *, *::before, *::after { box-sizing: border-box; } [hidden] { /* an author `display` must not out-rank the attribute — recorded defect */ display: none !important; } html { scroll-behavior: smooth; /* the sticky header must not cover an anchored section heading */ scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; } body { background: var(--rka-ground); color: var(--rka-ink); font-variant-numeric: lining-nums; overflow-x: hidden; margin: 0; } /* V2 — a restrained, high-end game-lounge layer. Decorative hero art remains a CSS * background; controls and editorial content stay semantic HTML above it. */ :root { --rka-gold:#d9b45b; --rka-gold-light:#f8e8b0; --rka-ink-dark:#071411; --rka-emerald:#0e2b22; } body { background:#071411; color:#f6f2e8; } .rka-head { background:rgba(7,20,17,.92); border-bottom:1px solid rgba(217,180,91,.28); backdrop-filter:blur(18px); } .rka-head__in { max-width:1240px; } .rka-wordmark,.rka-head .rka-brand { color:var(--rka-gold-light)!important; } .rka-jeton circle { stroke:var(--rka-gold)!important; } .rka-head a:not(.rka-head__cta):not(.rka-brand) { color:#e9e1d0!important; } .rka-head a:hover { color:var(--rka-gold)!important; } .rka-trust { background:#0e2b22; border-bottom:1px solid rgba(217,180,91,.2); color:#e9e1d0; } .rka-trust strong,.rka-trust__lead { color:var(--rka-gold-light); } #rka-main { position:relative; background:linear-gradient(90deg,rgba(7,20,17,.98) 0%,rgba(7,20,17,.91) 43%,rgba(7,20,17,.22) 100%),url('../images/gen/royale-kazino-az-com-hero-v2.png') right top / min(100%,1720px) auto no-repeat,#071411; } #rka-main::before { content:""; position:absolute; inset:0 0 auto; height:650px; pointer-events:none; background:linear-gradient(180deg,transparent 62%,#071411 100%); z-index:0; } #rka-main > * { position:relative; z-index:1; } #rka-main :is(h1,h2,h3,h4) { color:#f8e8b0!important; } #rka-main :is(p,li,td,th,summary) { color:#f1eadc; } #rka-main a:not(.wp-element-button):not(.rka-cta):not(.rka-btn) { color:#f8e8b0!important; } .rka-hero,.rka-intro,#rka-main > .wp-block-post-content > :first-child { padding-top:clamp(58px,10vw,136px); min-height:500px; } #rka-main .rka-plate,#rka-main .rka-card,#rka-main .rka-table-wrap,#rka-main details,#rka-main table { background:rgba(14,43,34,.86)!important; border-color:rgba(217,180,91,.25)!important; box-shadow:0 18px 50px rgba(0,0,0,.25); } #rka-main .wp-element-button,#rka-main .wp-block-button__link,.rka-head__cta,.rka-cta,.rka-btn { background:var(--rka-gold)!important; color:#071411!important; border:1px solid #f8e8b0!important; box-shadow:0 10px 26px rgba(217,180,91,.22); transition:transform .2s ease,box-shadow .2s ease,background .2s ease; } #rka-main .wp-element-button:hover,#rka-main .wp-block-button__link:hover,.rka-head__cta:hover,.rka-cta:hover,.rka-btn:hover { background:#f8e8b0!important; transform:translateY(-2px); box-shadow:0 15px 34px rgba(217,180,91,.35); } .rka-foot { background:#040b09!important; border-top:1px solid rgba(217,180,91,.32); } .rka-foot :is(h2,h3) { color:var(--rka-gold-light)!important; } .rka-foot :is(p,li) { color:#d8d2c5!important; } @media (max-width:780px) { #rka-main { background-size:auto 510px; background-position:64% top; } #rka-main::before { height:530px; background:linear-gradient(180deg,rgba(7,20,17,.18),#071411 94%); } .rka-hero,.rka-intro,#rka-main > .wp-block-post-content > :first-child { min-height:430px; padding-top:52px; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } } img, svg { max-width: 100%; height: auto; } /* ------------------------------------------------------------- 2. skip + focus */ .rka-skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--rka-ink); color: var(--rka-ground); padding: 12px 18px; font-weight: 700; text-decoration: none; } .rka-skip-link:focus, .rka-skip-link:focus-visible { left: 12px; top: 12px; } /* Chrome computes `outline-width: medium` as 3px even with no outline declared, so a ring that only sets width is invisible to a script-driven gate — and to a reader on a dark ground. Set STYLE, COLOUR and OFFSET, and set both pseudo-classes, because :focus-visible does not match a programmatic .focus(). */ a:focus, button:focus, summary:focus, [tabindex]:focus, input:focus, a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, input:focus-visible { outline: 3px solid var(--rka-focus); outline-offset: 3px; border-radius: 1px; } /* --------------------------------------------------------------- 3. type scale */ .rka-main { display: block; } .rka-eyebrow { font-family: "Poppins", "Century Gothic", "Segoe UI", sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rka-quiet); margin: 0 0 10px; } .rka-lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.62; color: var(--rka-ink); max-width: 62ch; } .rka-note { font-size: 14px; line-height: 1.6; color: var(--rka-quiet); } /* the FIGURES face — digits only, never a word. CONDENSED, not monospaced, and that is this build's one typographic argument: sixteen free monos have now been auditioned across two rows and every one of them ships a latin-ext file claiming U+0259 with no glyph behind it, so the mono axis is closed for Azerbaijani. What a value column actually needs is equal digit WIDTH, which `tabular-nums` gives in any face, and a voice visibly different from the prose, which Archivo Narrow gives at a narrower set-width than the body — and with a schwa that exists. probe.js §4 fails on any .rka-fig span whose text holds a letter, which keeps the question out of the build. */ .rka-fig { font-family: "Tinos", "Times New Roman", Times, serif; font-variant-numeric: lining-nums tabular-nums; font-weight: 600; letter-spacing: 0.01em; } /* NOT the figures face: a code fragment («rel="nofollow sponsored"», a blank licence line) is letters, and the figures face is reserved for digits. It gets the system monospace stack, which is honest about being a different thing. */ .rka-code { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: .93em; letter-spacing: -0.01em; } .rka-rule { height: 1px; background: var(--rka-line); border: 0; margin: 0; } /* ------------------------------------------------------------------ 4. buttons */ .rka-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: var(--rka-tap); padding: 14px 30px; font-family: "Poppins", "Century Gothic", "Segoe UI", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.03em; text-decoration: none; border: 0; border-radius: var(--rka-radius); /* buxar (8), not şeh (6): under R2 the loudest colour available is also the palest, so the primary control is drawn in VALUE — 15.68:1 on the ground. */ background: var(--rka-ink); color: var(--rka-ground); cursor: pointer; transition: filter .18s ease, transform .18s ease; /* never `width: 100%` on a padded control — it scrolls a 390px phone sideways */ max-width: 100%; } .rka-btn:hover { background: var(--rka-head); color: var(--rka-ground); } .rka-btn:active { transform: translateY(1px); } .rka-btn[aria-disabled="true"], .rka-btn:disabled { background: var(--rka-plate); color: var(--rka-quiet); cursor: not-allowed; filter: none; } .rka-btn--ghost { background: transparent; border: 1px solid var(--rka-line-lit); color: var(--rka-ink); font-weight: 600; } .rka-btn--ghost:hover { background: var(--rka-plate); filter: none; } .rka-btn--small { min-height: var(--rka-tap); padding: 11px 18px; font-size: 14px; } /* ------------------------------------------------------------------- 5. header */ .rka-head { position: sticky; top: 0; z-index: 60; background: var(--rka-ground); border-bottom: 1px solid var(--rka-line); } /* `wp:shortcode` renders through wpautop, so each of the three shortcodes in the header template part arrives wrapped in a

. Those wrappers become the flex items, they carry paragraph margins, and the masthead measured 90px for a row of 44px controls that were not even vertically centred. `display: contents` hands flex layout the real elements. */ .rka-head__in > p { display: contents; } .rka-head__in { max-width: var(--rka-shell); margin: 0 auto; padding: 11px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .rka-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--rka-ink); min-height: var(--rka-tap); } .rka-brand:hover { color: var(--rka-head); } .rka-wordmark { font-family: "Poppins", "Century Gothic", "Segoe UI", sans-serif; font-size: 19px; font-weight: 600; letter-spacing: 0.005em; line-height: 1; white-space: nowrap; } /* The nav markup comes from inc/chrome.php: TWO renderings of the same five-item tree — an inline