/* The Urban Media Group — design tokens. * * ONE place for every colour, size and spacing value on the site. The newsletter * taught this the hard way: its email renderer held colours as literal hex values * copied at build time, so every later palette change reached the web version and * silently missed the email, and the two shipped different golds for weeks. * Nothing below is repeated anywhere else. * * Every value is sampled from the owner's own logo files, not chosen by eye: * navy #101E2B / #0E1E2B the shared chassis, from all six marks * red #D43B36 Urban Atlanta * gold #FFCD81 Urban Savannah * cream #FDF4E1 / #FEF4E1 the badge fields * paper #F1F0F6 the neutral * * A city is one class on — .city-atlanta or .city-savannah — which swaps * the accent and nothing else. That is the whole multi-city system: one chassis, * one variable. */ :root { /* --- the chassis, shared by every page in the group --------------------- */ /* Measured against the benchmark on 2026-08-13 rather than guessed. Every neutral in this file used to be BLUE: a navy ground, and greys that were blue-greys (#B6C2CE, #7C8B9A). Under a red accent that is a fight -- red and blue sit opposite each other on the wheel, so the page reads as a default dark theme with a red highlight rather than as one composition. The benchmark's ground is rgb(7,8,7) and its greys are green-greys; its text is a warm off-white, not a cool one. These are the same VALUES OF LIGHTNESS as before, so every contrast measurement in this stylesheet still holds. Only the hue moved: off blue, onto a near-neutral that leans very slightly warm. The navy-* names are kept because they are used in about four hundred places and renaming them would be a diff nobody could read. */ --navy-900: #0B0C0D; /* deepest, for the page behind everything */ --navy-800: #121415; /* section fields */ --navy-700: #151719; /* cards, header */ --navy-600: #1D2022; /* raised surfaces */ --line: #2B2F32; /* hairlines and card borders */ --paper: #ECEAE5; /* primary text: warm off-white, not a cool one */ --paper-70: #B9BCB8; /* secondary text */ --paper-45: #85898A; /* tertiary, labels */ /* Fixed contrast tokens for components that stay dark even when a light parent section remaps --paper. Without these, a dark proof card inside a cream band can inherit dark-on-light text and become unreadable. */ --on-dark: #ECEAE5; --on-dark-70: #B9BCB8; --on-dark-45: #85898A; --cream: #FDF4E1; /* the badge cream, for warm surfaces */ /* --- per-city accent. Overridden by the city class below. -------------- */ --accent: #D43B36; --accent-hi: #EC392F; /* saturated red that keeps small type readable on dark */ --accent-dk: #A32D2A; --accent-15: rgba(212, 59, 54, .15); --accent-08: rgba(212, 59, 54, .08); /* --- type ------------------------------------------------------------- */ /* The brand system names Sora/Montserrat for headings and Inter for body. Self-hosted webfonts get added at build; until then the stack falls back through what macOS, Windows and Android actually ship, so the mockup is honest about what a visitor without the webfont sees. */ --font-display: "Sora", "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* A third face, for editorial headlines and statistical numerals only. Measured from the owner's benchmark (docs/DESIGN_REFERENCE.md): their large figures are set in a serif, which is most of why their reach numbers read as editorial rather than as a dashboard. Ours were in the sans. Sora keeps the uppercase labels and buttons; Inter keeps body copy. Deleting this one line reverts the decision. */ --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif; /* Fluid scale: clamp() so a phone and a desktop both read well without a breakpoint for every size. Mobile-first, because most visitors arrive from Instagram on a phone. */ --step--1: clamp(.78rem, .76rem + .1vw, .84rem); --step-0: clamp(1rem, .97rem + .15vw, 1.08rem); --step-1: clamp(1.2rem, 1.12rem + .35vw, 1.4rem); --step-2: clamp(1.5rem, 1.34rem + .7vw, 2rem); --step-3: clamp(2rem, 1.6rem + 1.8vw, 3.2rem); --step-4: clamp(2.6rem, 1.8rem + 3.6vw, 5.2rem); /* --- space, on a consistent ratio ------------------------------------- */ --sp-1: .35rem; --sp-2: .7rem; --sp-3: 1.1rem; --sp-4: 1.6rem; --sp-5: 2.4rem; --sp-6: 3.4rem; --sp-7: 5rem; --sp-8: 7rem; /* --- elevation --------------------------------------------------------- Measured off the benchmark on 2026-08-13, and this is the finding that actually answers "it feels like old HTML". It is not colour. Their panels are LIT OBJECTS; ours were flat fills with a 1px border, which is what an admin panel is. Every raised surface there carries three things at once: 1. a barely-there gradient instead of a flat colour; 2. a large, soft, low drop shadow; 3. a 1px INSET highlight along the top edge. That third one is the whole trick. It reads as a surface catching light from above, which is what makes an element look like an object you could put a thumb on rather than a rectangle that was filled in. It is the "soft shadows and subtle gradients, raised and almost touchable" the owner described. Their exact values, to the pixel: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) 0 24px 64px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.05) */ --surface: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); --surface-2: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); --surface-editorial: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%), linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 58%); --lift-1: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); --lift-2: 0 24px 64px rgba(0, 0, 0, .50), inset 0 1px 0 rgba(255, 255, 255, .05); --lift-in: inset 0 1px 0 rgba(255, 255, 255, .06); --lift-soft: 0 14px 44px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .055); --line-hi: rgba(255, 255, 255, .115); /* Frosted glass. Fifteen elements on their page use it and we had none. */ --frost: blur(16px) saturate(1.4); /* A coloured glow, for the few things that are live or are the one action. */ --glow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent); --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --shadow: 0 18px 44px rgba(0, 0, 0, .38); --wrap: 1200px; --ease: cubic-bezier(.2, .7, .3, 1); } /* --grade-top / --grade-bot tint the hero photograph. The owner's brand-system mock (DesignInspiration.png) grades the skyline into the city's own colour over near-black; the grade here had been navy-blue for every brand, which is why the hero read cool and neutral against that reference. It is one blend layer in .grade, so a city's photography follows its accent the same way its buttons do. */ .city-atlanta { --accent: #D43B36; --accent-hi: #EC392F; --accent-dk: #A32D2A; --accent-15: rgba(212, 59, 54, .15); --accent-08: rgba(212, 59, 54, .08); --grade-top: #C93D38; --grade-bot: #2B0E0D; } .city-savannah { --accent: #FFCD81; --accent-hi: #FFCD81; --accent-dk: #D9A34F; --accent-15: rgba(255, 205, 129, .15); --accent-08: rgba(255, 205, 129, .08); --grade-top: #FFC067; --grade-bot: #3A2610; } /* The parent brand carries no city accent: it is the neutral that both sit under, so it uses the paper tone where a city would use its colour. */ .brand-tumg { --accent: #F1F0F6; --accent-hi: #F1F0F6; --accent-dk: #C7CFD8; --accent-15: rgba(241, 240, 246, .14); --accent-08: rgba(241, 240, 246, .07); /* The parent brand keeps the cool grade: it is the neutral both cities sit under, and tinting its hero either city's colour would claim one of them. */ --grade-top: #1B4463; --grade-bot: #0D2033; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }