/* ══════════════════════════════════════════════════════════════════════════ * OGA · assets/css/ogace-finish.css * FINISH LAYER — v110005 * ══════════════════════════════════════════════════════════════════════════ * * Loads LAST. Four jobs: * * 1. PALETTE Corrects the brand tokens to the values sampled from the * logo artwork itself. * 2. TEXT Clean rendering plus a restrained depth treatment. * 3. LINE-FREE Removes rules and separators from every header bar and * page header; separation is carried by space and tone. * 4. ICON SURFACE Consistent optical treatment for the new 18-glyph set. * * ── ON THE PALETTE CORRECTION ────────────────────────────────────────────── * The theme carried #032EA1 / #E00025. Sampling the 2000x2000 logo file * returns different values: * * #032EA1 diamond blue 13,948 px * #E00025 diamond red 15,963 px * #1B2E95 wordmark blue 257,899 px (GUIDE) * #001D6C deep navy 24,224 px (ONLINE / Association) * * #032EA1 and #E00025 are the Cambodian national flag values. The mark is * built on the flag; that is the identity, so the tokens now match it. * * ── ON TEXT SHADOW ───────────────────────────────────────────────────────── * Shadow on body copy reduces legibility — it softens the very edges the eye * uses to resolve letterforms, and it is one of the more common causes of * text failing contrast checks in practice. So depth here is applied only * where type is large enough to carry it: * * headings, hero titles, stat figures, the 404 numeral, the logo wordmark * * Body copy, small print, meta lines, form labels and mono readouts get no * shadow at all. In light mode the shadow is a near-transparent navy at * sub-pixel offset — it reads as weight rather than as a drop shadow. In dark * mode it becomes a faint brand-blue glow, since a dark shadow on a dark * ground is invisible and would only muddy the glyph edges. * * A `.oga-flat` class on disables the effect entirely. * ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ * 1 · PALETTE CORRECTION * ══════════════════════════════════════════════════════════════════════════ */ :root { --brand-blue: #032EA1; --brand-red: #E00025; --brand-wordmark: #1B2E95; --brand-navy: #001D6C; --brand-blue-900: #001240; --brand-blue-800: #001D6C; --brand-blue-700: #02248a; --brand-blue-600: #032EA1; --brand-blue-500: #1B2E95; --brand-blue-400: #3552c4; --brand-blue-300: #6E8CF5; --brand-blue-200: #93aaf8; --brand-blue-100: #c6d3fc; --brand-blue-050: #e9eefe; --brand-red-900: #5c0010; --brand-red-800: #8a0017; --brand-red-700: #b3001d; --brand-red-600: #E00025; --brand-red-500: #ee1f42; --brand-red-400: #F55C80; --brand-red-300: #f9849e; --brand-red-200: #fcaebf; --brand-red-100: #fdd6de; --brand-red-050: #feebef; } /* ── Light mode ───────────────────────────────────────────────────────── * blue 11.00:1 AAA · red 5.00:1 AA · navy 15.08:1 AAA — all on white. */ body.oga-brand-light { --gold: #032EA1; --gold-dim: rgba(3, 46, 161, 0.08); --gold-glow: rgba(3, 46, 161, 0.16); --gold-hover: #001D6C; --line1: rgba(3, 46, 161, 0.09); --line2: rgba(3, 46, 161, 0.16); --line3: rgba(3, 46, 161, 0.25); --g1: #032EA1; --g1-bg: rgba(3, 46, 161, 0.08); --g1-bd: rgba(3, 46, 161, 0.24); --g2: #1B2E95; --g2-bg: rgba(27, 46, 149, 0.08); --g2-bd: rgba(27, 46, 149, 0.22); --g6: #C4001F; --g6-bg: rgba(196, 0, 31, 0.08); --g6-bd: rgba(196, 0, 31, 0.24); --btn-ink: #ffffff; } /* ── Dark mode ────────────────────────────────────────────────────────── * Raw #032EA1 on #08090a is 1.81:1 and fails outright, so the accents are * lightened tints: #6E8CF5 at 6.39:1 and #F55C80 at 6.38:1, both AA. */ body.oga-brand-dark { --gold: #6E8CF5; --gold-dim: rgba(110, 140, 245, 0.14); --gold-glow: rgba(110, 140, 245, 0.22); --gold-hover: #93aaf8; --line1: rgba(147, 170, 248, 0.08); --line2: rgba(147, 170, 248, 0.14); --line3: rgba(147, 170, 248, 0.22); --g1: #6E8CF5; --g1-bg: rgba(110, 140, 245, 0.12); --g1-bd: rgba(110, 140, 245, 0.26); --g2: #9a9af2; --g2-bg: rgba(154, 154, 242, 0.10); --g2-bd: rgba(154, 154, 242, 0.24); --g6: #F55C80; --g6-bg: rgba(245, 92, 128, 0.11); --g6-bd: rgba(245, 92, 128, 0.26); /* white on #6E8CF5 is only 3.23:1, so filled buttons take ink instead */ --btn-ink: #08090a; } /* ══════════════════════════════════════════════════════════════════════════ * 2 · TEXT RENDERING * ══════════════════════════════════════════════════════════════════════════ * The existing polish layer sets -webkit-font-smoothing: antialiased on both * html and body, globally. That property makes glyphs render THINNER, which * is right for light text on dark, but on a white canvas it thins dark text * that was already crisp — small copy ends up looking washed. So smoothing is * split per mode below, and light mode is returned to the platform default. * ══════════════════════════════════════════════════════════════════════════ */ body.oga-brand-light, body.oga-brand-light input, body.oga-brand-light button, body.oga-brand-light textarea, body.oga-brand-light select { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } body.oga-brand-dark, body.oga-brand-dark input, body.oga-brand-dark button, body.oga-brand-dark textarea, body.oga-brand-dark select { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-optical-sizing: auto; font-synthesis: none; font-variant-ligatures: common-ligatures contextual; font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "cv05" 1, "cv11" 1; } /* The prior layer used -webkit-text-stroke to fake extra weight on headings. * That paints a stroke centred on the glyph outline, which thickens the letter * inward as well as outward and closes up counters at small sizes. Inter ships * a real 650 weight, so use it. */ h1, h2, h3, .oga-hero-title, .oga-section-title, .oga-brand-logo-name, .oga-logo-name, .oga-article-title { -webkit-text-stroke: 0; font-weight: 650; font-kerning: normal; text-wrap: balance; } /* Optical tracking: tighten as size grows, open as it shrinks */ .oga-article-title, .oga-hero-title { letter-spacing: -0.022em; line-height: 1.13; } .oga-article-body h2 { letter-spacing: -0.016em; } .oga-article-body h3 { letter-spacing: -0.011em; } .oga-stat-value { letter-spacing: -0.034em; line-height: 0.96; } /* Figures read down a column, so they need fixed-advance digits */ .oga-stat-value, .oga-404-code, .oga-search-count, .oga-pagination .page-numbers, time { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } .oga-article-body, .oga-entry-content { text-wrap: pretty; } /* ══════════════════════════════════════════════════════════════════════════ * 3 · DEPTH — large type only * ══════════════════════════════════════════════════════════════════════════ */ body.oga-brand-light:not(.oga-flat) h1, body.oga-brand-light:not(.oga-flat) h2, body.oga-brand-light:not(.oga-flat) .oga-hero-title, body.oga-brand-light:not(.oga-flat) .oga-article-title, body.oga-brand-light:not(.oga-flat) .oga-stat-value, body.oga-brand-light:not(.oga-flat) .oga-404-code, body.oga-brand-light:not(.oga-flat) .oga-brand-logo-name, body.oga-brand-light:not(.oga-flat) .oga-logo-name { text-shadow: 0 1px 0 rgba(0, 18, 64, 0.055), 0 2px 4px rgba(0, 18, 64, 0.05); } /* Dark: a shadow would vanish, so lift with a faint brand-blue halo instead */ body.oga-brand-dark:not(.oga-flat) h1, body.oga-brand-dark:not(.oga-flat) h2, body.oga-brand-dark:not(.oga-flat) .oga-hero-title, body.oga-brand-dark:not(.oga-flat) .oga-article-title, body.oga-brand-dark:not(.oga-flat) .oga-stat-value, body.oga-brand-dark:not(.oga-flat) .oga-404-code, body.oga-brand-dark:not(.oga-flat) .oga-brand-logo-name, body.oga-brand-dark:not(.oga-flat) .oga-logo-name { text-shadow: 0 0 1px rgba(110, 140, 245, 0.16), 0 2px 14px rgba(110, 140, 245, 0.12); } /* Explicitly no shadow on anything small — legibility outranks effect */ .oga-article-body, .oga-article-body p, .oga-entry-meta, .oga-stat-label, .oga-stat-note, .oga-dir-title, .oga-dir-desc, .oga-prompt, .oga-section-label, .oga-brand-logo-sub, .oga-logo-sub, .oga-stat-layer, .oga-dir-layer, .oga-pillar-chip, .oga-badge, label, input, textarea, select, code, kbd, pre, small { text-shadow: none; } /* ══════════════════════════════════════════════════════════════════════════ * 4 · LINE-FREE HEADERS * ══════════════════════════════════════════════════════════════════════════ * Every rule, hairline and separator is removed from the header stack and * from page headers. Hierarchy is carried by space and background tone. * A sticky header still needs to detach from content when scrolled, so an * ambient shadow is used rather than a border — it reads as elevation, not * as a drawn line. * ══════════════════════════════════════════════════════════════════════════ */ .oga-header-wrap, .oga-header-inner, .oga-topbar, .oga-topbar-actions, .oga-navbar, .oga-tagbar, .oga-pillars-wrap, .oga-pillars-strip, .oga-pillars-strip-wrap, .oga-search-expanded, .oga-mobile-drawer, .oga-strip { border: 0; border-top: 0; border-bottom: 0; border-left: 0; border-right: 0; box-shadow: none; } .oga-header-wrap::before, .oga-header-wrap::after, .oga-topbar::before, .oga-topbar::after, .oga-pillars-strip::before, .oga-pillars-strip::after, .oga-pillars-wrap::before, .oga-pillars-wrap::after { display: none; content: none; } /* Elevation on scroll instead of a rule */ body.oga-brand-light .oga-header-wrap { box-shadow: 0 1px 2px rgba(0, 18, 64, 0.035), 0 6px 20px rgba(0, 18, 64, 0.035); } body.oga-brand-dark .oga-header-wrap { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 26px rgba(0, 0, 0, 0.32); } /* Page headers: rules removed, spacing opened to compensate */ .oga-article-header, .oga-archive-header, .oga-wc-header, .oga-page-header, .oga-section-header, .oga-hero-header { border-bottom: 0; border-top: 0; } .oga-article-header { padding-bottom: 4px; margin-bottom: 26px; } .oga-archive-header { padding-bottom: 2px; margin-bottom: 24px; } .oga-wc-header { padding-bottom: 0; margin-bottom: 20px; } /* Pillar chips keep their own outline — that is a control affordance, not a * separator, so it stays. Only the strip's rule was removed. */ /* ══════════════════════════════════════════════════════════════════════════ * 5 · ICON SURFACE * ══════════════════════════════════════════════════════════════════════════ */ .oga-listing-icon { shape-rendering: geometricPrecision; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } /* Icons align to the text baseline, not the box centre — that half-pixel is * what makes an icon+label pair look aligned rather than merely adjacent. */ .oga-stat-icon, .oga-dir-icon, .oga-gl-icon, .oga-tp-icon, .oga-hero-feature-icon { transform: translateY(-0.5px); } /* Brand-tinted icon plates */ body.oga-brand-light .oga-dir-icon, body.oga-brand-light .oga-gl-icon, body.oga-brand-light .oga-tp-icon { background: rgba(3, 46, 161, 0.045); border-color: rgba(3, 46, 161, 0.11); } body.oga-brand-dark .oga-dir-icon, body.oga-brand-dark .oga-gl-icon, body.oga-brand-dark .oga-tp-icon { background: rgba(110, 140, 245, 0.08); border-color: rgba(110, 140, 245, 0.16); } .oga-dir-card:hover .oga-dir-icon { background: var(--gold-dim); border-color: var(--dir-accent, var(--gold)); } /* ══════════════════════════════════════════════════════════════════════════ * 6 · BRAND EMPHASIS UTILITIES * ══════════════════════════════════════════════════════════════════════════ */ .oga-hl-brand { background: linear-gradient(96deg, var(--brand-blue) 0%, var(--brand-red) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; text-shadow: none; } body.oga-brand-dark .oga-hl-brand { background: linear-gradient(96deg, var(--gold) 0%, var(--g6) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .oga-hl-brand { -webkit-text-fill-color: currentColor; background: none; color: var(--gold); } } .oga-hl-mark { background-image: linear-gradient(to top, var(--gold-glow) 0%, var(--gold-glow) 34%, transparent 34%); padding: 0 0.12em; border-radius: 2px; text-shadow: none; } .oga-hl-underline { text-decoration: underline; text-decoration-color: var(--brand-red); text-decoration-thickness: 0.11em; text-underline-offset: 0.19em; text-decoration-skip-ink: auto; } body.oga-brand-dark .oga-hl-underline { text-decoration-color: var(--g6); } .oga-hl-figure { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em; color: var(--gold); } .oga-hl-code { font-family: var(--mono); font-size: 0.88em; padding: 0.12em 0.4em; border-radius: var(--r4); background: var(--gold-dim); color: var(--gold); text-shadow: none; } /* Brand rule: blue → red at the diamond's own proportion */ .oga-brand-rule { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-blue) 74%, var(--brand-red) 74%, var(--brand-red) 100%); } body.oga-brand-dark .oga-brand-rule { background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 74%, var(--g6) 74%, var(--g6) 100%); } /* ══════════════════════════════════════════════════════════════════════════ * 7 · LOGO MARK * ══════════════════════════════════════════════════════════════════════════ * The mark is NOT square. Measured from the source artwork, the diamond is * 949 x 820 — aspect 1.157, wider than tall. Sizing it into a square box * would squash it, so the box is driven by height and the width follows the * aspect ratio. --oga-mark-size therefore sets the mark HEIGHT. * ══════════════════════════════════════════════════════════════════════════ */ .oga-logo-mark--svg { width: auto; height: auto; background: none; border-radius: 0; padding: 0; font-size: 0; box-shadow: none; flex-shrink: 0; } .oga-logo-mark--svg .oga-brand-logo-mark, .oga-brand-logo-mark { --oga-mark-aspect: 1.165; display: block; height: var(--oga-mark-size, 36px); width: calc(var(--oga-mark-size, 36px) * var(--oga-mark-aspect)); flex-shrink: 0; } .oga-brand-logo-mark svg, .oga-logo-mark--svg svg { display: block; width: 100%; height: 100%; } /* An uploaded custom logo keeps its own intrinsic ratio */ .oga-brand-logo-mark .oga-brand-logo-custom { width: auto; height: 100%; max-width: none; } /* ══════════════════════════════════════════════════════════════════════════ * 8 · ACCESSIBILITY FALLBACKS * ══════════════════════════════════════════════════════════════════════════ */ @media (forced-colors: active) { * { text-shadow: none; } .oga-hl-brand { -webkit-text-fill-color: currentColor; background: none; color: CanvasText; } .oga-hl-mark { background-image: none; text-decoration: underline; } .oga-header-wrap { box-shadow: none; border-bottom: 1px solid CanvasText; } } @media (prefers-reduced-transparency: reduce) { body.oga-brand-dark:not(.oga-flat) h1, body.oga-brand-dark:not(.oga-flat) h2, body.oga-brand-dark:not(.oga-flat) .oga-hero-title, body.oga-brand-dark:not(.oga-flat) .oga-article-title { text-shadow: none; } } @media print { * { text-shadow: none !important; } .oga-header-wrap { box-shadow: none; } .oga-hl-brand { -webkit-text-fill-color: currentColor; background: none; color: #001D6C; } }