/* ============================================================================= * RIVERSIDE TWIN TOWERS — DESIGN TOKENS (shared by every HTML deliverable) * Palette echoes the reference render: bronze + river-blue + sunset, near-black UI. * ========================================================================== */ @import url('../vendor/fonts.css'); /* self-hosted Latin — no CDN */ @import url('../vendor/fonts-intl.css'); /* self-hosted Khmer (unicode-range gated; only downloads for Khmer text) */ :root { /* UI surfaces */ --bg: #0E1116; --bg-2: #11151B; --panel: #141A22; --line: #1E2630; --line-2: #2A3442; /* Text */ --text: #EAF0F4; --muted: #9DB0BC; --faint: #6B7C88; /* Brand */ --bronze: #C9974C; --bronze-deep: #B8863B; --river: #2C6E8F; --river-deep: #173B4F; --sunset-warm: #F2C078; --sunset-glow: #E8804B; --glass: #9FC6D8; --glass-deep: #5E93AE; /* Use-colors */ --use-retail: #C9974C; --use-office: #5B86A6; --use-hotel: #B98A45; --use-residential: #3E7CA0; --use-amenity: #7FD4D8; --use-crown: #CFE6EA; --use-parking: #3A3F45; --use-plaza: #6C7A52; --use-water: #1C4A63; /* Type */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; /* Gradients */ --grad-sunset: linear-gradient(135deg, #173B4F 0%, #2C6E8F 38%, #C9974C 78%, #F2C078 100%); --grad-panel: linear-gradient(180deg, #141A22 0%, #0E1116 100%); /* Rhythm */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --pad: clamp(20px, 4vw, 64px); --maxw: 1240px; } /* per-language typeface — switching swaps every var(--font-*) automatically */ html[lang="km"]{ --font-display:'Noto Serif Khmer','Noto Sans Khmer',serif; --font-sans:'Noto Sans Khmer','Khmer OS','Hanuman',sans-serif; } html[lang="zh"]{ --font-display:'Noto Serif SC','Songti SC','Songti TC',STSong,SimSun,serif; --font-sans:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif; } html[lang="km"], html[lang="km"] *{ letter-spacing:0 !important; } /* Khmer must never be letter-spaced (incl. eyebrows/labels) */ /* visible keyboard focus (mouse focus stays clean via :focus-visible) */ :focus-visible{ outline:2px solid var(--sunset-warm) !important; outline-offset:2px !important; border-radius:2px; } /* language switcher (shared) */ .langsw{ display:inline-flex; gap:2px; border:1px solid var(--line-2); border-radius:999px; padding:3px; background:rgba(14,17,22,.55); backdrop-filter:blur(8px); } .langbtn{ background:transparent; border:0; color:var(--muted); font-family:var(--font-sans); font-size:.72rem; letter-spacing:.03em; padding:5px 11px; border-radius:999px; cursor:pointer; transition:.2s; line-height:1.4; } .langbtn:hover{ color:var(--text); } .langbtn.on{ background:var(--bronze); color:#0E1116; font-weight:600; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; letter-spacing: 0.01em; } h1,h2,h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: 0.005em; } .eyebrow { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--bronze); } .serif-italic { font-family: var(--font-display); font-style: italic; } a { color: var(--bronze); text-decoration: none; } a:hover { color: var(--sunset-warm); } .disclaimer { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px; display: inline-block; }