/* ===================================================================================================================== SuburbRank — THE PALETTE BLACK AND CORAL. #EB6753 the accent, and the single colour that identifies the brand #EE4C34 the hotter coral, for emphasis on the accent itself #B33A28 the accent deepened, for accent-coloured TEXT #0B0B0D black, the dark theme's ground #16161A near-black, the light theme's ink Poppins headings. DM Sans body. The coral is the parent real estate site's own, taken from its stylesheet rather than approximated by eye, so anybody arriving here from the Goldmines section recognises the product immediately. --------------------------------------------------------------------------------------------------------------- THIS FILE DOES MORE THAN A THEME FILE SHOULD, AND THAT IS THE POINT OF THIS NOTE Rule 1 below says the accent family only — backgrounds, text and borders belong to shell.css. This palette breaks that rule deliberately, because "black" is a statement about SURFACES and there is no way to say it from the accent alone. The shell's grounds are navy tinted (#F3F6FD paper, #0A1020 night, and every border, rule and shadow tinted to match), which is right beside a sapphire and wrong beside a coral: the two casts fight, and the page reads slightly purple where it should read warm. So the surfaces are neutralised here. WHAT THAT COSTS: this file now has to be re-checked whenever shell.css changes a surface, which is exactly the coupling rule 1 exists to prevent. Every value below was chosen to meet or beat the shell's own contrast targets rather than merely to look right — light text 16.4 / 6.7 / 3.3 on paper shell targets 16.6 / 6.5 / 3.2 dark text 17.4 / 9.3 / 5.4 on black shell targets 16.4 / 9.2 / 4.8 — so a reader is no worse off on any of them, and better off on four. --------------------------------------------------------------------------------------------------------------- THE ONE THING CORAL COSTS, WHICH IS REAL AND IS PAID FOR BELOW shell.css reserves red 0-20 degrees for money LOST, on the figures. The coral is hue 8. It is sitting inside that meaning, and no amount of care makes it not. The answer is the one the first coral palette on this site used, and it was right then: --error is DEEPENED AND FLATTENED away from the accent, from the shell's #C0392B to #9E2116 — same broad hue, roughly half the lightness, well clear of the coral's chalky quality. Beside each other they read as two colours rather than two moods of one, which is what the cue needs. --success is untouched; green was never in dispute. AND NOTHING BRAND-COLOURED SITS ON A FIGURE. Growth percentages take the verdict colours; scores, badges, chips, rings and the map take the accent. That separation is enforced in the markup rather than here — see .sm-up and .sm-down in shell.css, which are the only place a number is coloured at all. It is what makes a coral accent survivable beside a red loss figure, and it is not optional. --------------------------------------------------------------------------------------------------------------- THE ROTATION IS MONOCHROME, WHICH IS WHAT BLACK AND CORAL MEANS Everything that repeats as siblings — numbered steps, card icons, report section numbers, the progress rail — walks a three step ramp with the accent as step one. The shell's own steps two and three are a deep blue and a cyan, chosen for a sapphire; left alone they would run coral, navy, cyan, which is three unrelated hues in sequence and reads as confetti rather than as a system. So they are restated as GRAPHITE and STONE: coral, then near-black, then a warm mid grey. No third hue at all, which is the whole idea of a two colour scheme — the accent is the only colour on the page, and the rhythm comes from value instead. Both -text forms clear 4.5:1 because both are used as text. --------------------------------------------------------------------------------------------------------------- TWO RULES, THE FIRST NOW PARTLY SUSPENDED 1. The accent family, the rotation, the verdict pair and the surfaces — and nothing else. Anything not named below still belongs to shell.css and is already themed for both light and dark. 2. Whatever appears in :root MUST also appear in [data-theme="dark"], line for line. A variable in one and not the other is a variable stuck on the wrong theme, because this file loads after shell.css and :root and [data-theme="dark"] have equal specificity. With surfaces in play this rule is now load bearing rather than tidy: a light-only background declaration would follow the reader into dark mode and paint paper on night. Coded By Darko G. ===================================================================================================================== */ :root { /* ---- THE TYPEFACES ------------------------------------------------------------------------------------------ The parent site's, so the two read as one product. Both are loaded in default.aspx; the fallbacks matter because a blocked font service must not drop the site into Times New Roman. */ --font-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-sans: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* ---- THE ACCENT FAMILY — light ----------------------------------------------------------------------------- Named "gold" in shell.css, where the name is historical and is spoken by several thousand declarations. Read it as "the accent". */ --gold: #EB6753; --gold-bright: #EE4C34; --gold-light: #F5A697; /* Accent-coloured TEXT, which needs to clear 4.5:1 on white. #EB6753 does not — it is 3.2:1 — so anything that reads as words rather than as decoration takes this instead (5.9:1). Getting this one wrong is how a brand colour ends up on a link nobody can read. */ --gold-text: #B33A28; --gold-tint: rgba(235, 103, 83, 0.13); --gold-tint-line: rgba(235, 103, 83, 0.34); /* Accent text sitting on one of the two fixed dark panels. Warm and near-white rather than the coral itself, which vibrates against a near-black at any size worth reading. */ --champagne: #FDE7E1; --primary: #EB6753; --accent: #EB6753; --accent-cyan: #EE4C34; --accent-glow: rgba(235, 103, 83, 0.32); /* Every stop clears 4.5:1 against white, because a dozen components put text or an icon directly on this. That requirement is what makes this the DEEP end of the family: there is no coral both light enough to look like the accent and dark enough to carry white text, and the gradient's job is to carry text. */ --gradient-primary: linear-gradient(115deg, #8A2C1E 0%, #B33A28 46%, #9A3123 100%); /* The decorative one, with nothing sitting on it: the accent showing off. */ --gradient-vivid: linear-gradient(115deg, #EE4C34 0%, #EB6753 46%, #B33A28 100%); --border-hover: rgba(235, 103, 83, 0.52); --input-focus-glow: rgba(235, 103, 83, 0.18); /* ---- THE BUTTONS — light ----------------------------------------------------------------------------------- MIXED TOWARD A NEUTRAL BLACK RATHER THAN A NAVY ONE, which is the whole of this block. shell.css derives the button by mixing var(--gold) toward #03151F. That is a blue-black, and it was chosen when the accent was a sapphire, where mixing blue into blue costs nothing. Mixing it into CORAL drains the chroma out on the way down — 47% saturation at the resting stop against 61% for the accent itself — and the button comes out a brick brown that reads as neither black nor coral. It is the single ugliest thing a coral accent does on this shell and it is entirely avoidable. THAT FIX WAS APPLIED TO THE PRIMARY AND NOT TO THE SECONDARY. --btn-secondary-bg sat at #6E534B for a long time afterwards, which is the brick brown described above, arrived at the same way and left in place while the paragraph condemning it was right here. It is graphite now. Mixed toward #0B0B0D — the same black the dark theme's ground is — the hue and the chroma both survive, and the button is recognisably the brand colour turned down rather than a different colour altogether. Contrast is unchanged by the swap, which is the point: it is a hue fix, not a value one. coral, as it originally shipped rest 8.7 / 6.3 / 4.5 hover 4.5 / 3.8 / 3.2 coral, mixed toward black rest 7.6 / 5.6 / 4.2 hover 4.2 / 3.6 / 3.2 THE BAR IS PURE WHITE rather than the shell's tint of the accent. shell.css requires it to clear 3:1 against both the resting and the revealed fill; a 28% coral tint reads 2.3:1 on the lighter stops and would fade out as it grew. White reads 3.2:1 at worst. */ --btn-primary-bg: linear-gradient(135deg, #863E34 0%, #A84B3E 50%, #C95948 100%); --btn-primary-hover: linear-gradient(135deg, #C95948 0%, #DB614E 50%, #EB6753 100%); --btn-primary-ink: #FFFFFF; --btn-primary-bar: #FFFFFF; /* Secondary keeps the shell's shape and takes the same neutral black, one step quieter than primary. IT NOW ACTUALLY IS ONE. This read #6E534B for a long time — a warm brown, and the only hue in a palette of coral and true neutrals that belonged to neither of them. Graphite is the value the sentence above was always describing, and it is this file's own --accent-2, so the button is made of the palette rather than of a colour invented for it. White on graphite is 13.28:1, and the face reads 12.09:1 against the page — it has a silhouette of its own and needs no border to be seen. Beside a coral primary, black-and-coral is the pairing the whole theme is built on. */ --btn-secondary-bg: #2F2F36; --btn-secondary-bg-hover: #45454E; --btn-secondary-line: transparent; --btn-secondary-ink: #FFFFFF; /* ---- THE ROTATION — light: graphite, then stone. No third hue. ---------------------------------------------- */ --accent-2: #2F2F36; --accent-2-bright: #45454E; --accent-2-text: #26262C; --accent-2-tint: rgba(47, 47, 54, 0.10); --accent-2-line: rgba(47, 47, 54, 0.26); --accent-2-glow: rgba(47, 47, 54, 0.26); --accent-3: #7A736D; --accent-3-bright: #938B84; --accent-3-text: #5E5852; --accent-3-tint: rgba(122, 115, 109, 0.12); --accent-3-line: rgba(122, 115, 109, 0.28); --accent-3-glow: rgba(122, 115, 109, 0.26); /* The three soft washes behind every page, and the largest coloured objects on the site. HALF THE STRENGTH THE SHELL USES, and that is a consequence of the neutral ground rather than a preference. 0.10 is right over the shell's #F3F6FD, where a blue-tinted paper cancels some of a warm wash. Over a neutral paper nothing cancels it, and the same alpha turned the entire viewport pink — a coral SITE rather than a black-and-coral one, which is the opposite of the brief. DO NOT RAISE THEM. shell.css's own note is explicit that nothing above 0.14 has ever looked right, and that the fix for a wash reading too faint is never to make it bigger or add more. That advice holds in both directions: this one was reading too STRONG, and the fix was not to tint the paper to compensate. */ --ambient-1: rgba(235, 103, 83, 0.055); --ambient-2: rgba(47, 47, 54, 0.035); --ambient-3: rgba(122, 115, 109, 0.035); /* THE ORB IS THE ONE THAT ACTUALLY TURNED THE PAGE PINK, and it took sampling rendered pixels to find, because it is not in the paint stack any inspector reports — it is pointer-events:none and sits behind everything. .ambient-orb is a 640px disc filled with PURE var(--gold) and held down only by this opacity. At the shell's 0.11 that is a coral disc the size of the hero, over a paper with no blue in it to cancel it, and the result was a coral SITE rather than a black-and-coral one. shell.css's own note on it says: "want it gone, set the three to transparent and --ambient-orb to 0". Not gone — a trace of warmth in the top corner is what stops a neutral ground reading as grey card — but less than half. */ --ambient-orb: 0.045; /* The two blooms inside .dash-hero and .rp-cover. The shell's are a cyan and a blue, chosen for a sapphire; on a black-and-coral panel they read as a colour cast from a different site. Theme independent, like the panels themselves, so they carry the same values in both blocks. */ --panel-glow-a: rgba(235, 103, 83, 0.18); --panel-glow-b: rgba(245, 166, 151, 0.13); /* ---- THE SURFACES — light: warm neutral paper, near-black ink ----------------------------------------------- The shell's are navy tinted, which is right beside a sapphire and wrong beside a coral. Every one of these is the same value with the blue taken out of it, and every contrast target is met or beaten — see the note at the top. --bg-secondary stays pure white, because white is what a card is. */ --ink: #101014; --bone: #FFFFFF; --bg-primary: #F5F4F3; --bg-secondary: #FFFFFF; --bg-tertiary: #EAE8E6; --bg-card: rgba(255, 255, 255, 0.86); --bg-glass: rgba(245, 244, 243, 0.82); --text-primary: #16161A; --text-secondary: #55555E; --text-muted: #85858F; --border: rgba(16, 16, 20, 0.10); --rule: rgba(16, 16, 20, 0.09); --shadow-sm: 0 2px 10px rgba(16, 16, 20, 0.06); --shadow-md: 0 24px 56px -32px rgba(16, 16, 20, 0.30); --shadow-lg: 0 46px 100px -48px rgba(16, 16, 20, 0.40); --phone-screen: #0C0C0F; --input-bg: #FFFFFF; --input-border: rgba(16, 16, 20, 0.14); /* ---- THE VERDICT COLOURS — light --------------------------------------------------------------------------- --success is the shell's, untouched: green is money gained and nothing here is in dispute about that. --error IS MOVED, for the reason set out at the top: the shell's #C0392B sits two degrees from the accent, so beside a coral badge it reads as the same colour in a slightly different mood, which is exactly what the growth figures cannot afford. Both are still red — a falling market shown in anything else is a falling market the reader has to be told about twice. */ --error: #9E2116; --error-bright: #C4392A; --error-glow: rgba(158, 33, 22, 0.36); /* ---- THE TWO FIXED DARK PANELS ------------------------------------------------------------------------------- .dash-hero and .rp-cover are the only surfaces on the site that are dark in BOTH themes, so their body text is a fixed near-white literal in shell.css and these gradients have to stay dark at every stop in both. They are neutral black here rather than the shell's navy, for the same reason as every other surface above. DECLARED IN BOTH BLOCKS WITH THE SAME VALUES, because the panels are theme independent and so are these. */ --dash-hero-gradient: linear-gradient(150deg, #0E0E10 0%, #1C1C20 46%, #2A2A2E 100%); --dash-hero-accent: #F5A697; --rp-cover-gradient: linear-gradient(150deg, #0A0A0C 0%, #18181C 38%, #2A2A2E 76%, #111114 100%); --rp-cover-accent: #F5A697; /* ---- THE PODIUM — light ------------------------------------------------------------------------------------ Gold, silver and bronze on ranks 1, 2 and 3. The only place on this site where a colour means a POSITION. THE RANK NUMBER IS ALWAYS PRINTED BESIDE THE METAL and each place has its own icon — trophy, medal, award. That is deliberate: roughly one man in twelve cannot separate the gold from the bronze, and a podium that says which is which only by hue is a podium that does not work for them. Colour is the third cue here, not the first. WHY THESE DO NOT COLLIDE WITH THE PALETTE. Gold sits 6 degrees off --warning, which is the closest call on the page. It survives because the two are never the same SHAPE: a caveat is an amber triangle inside a callout, and a podium place is a numbered pill in the corner of a card. Bronze is 20 degrees off the coral accent and 23 off the loss red, and it is much darker than either. Silver is neutral and cannot collide with anything. Each is a deep metal INK on a 16% tint of itself, rather than a filled metal pill: gold light enough to look like gold cannot carry white, and the tinted form reads as a medal ribbon anyway. */ --podium-1: #C9A227; --podium-1-ink: #7E621B; --podium-1-tint: rgba(201, 162, 39, 0.16); --podium-1-line: rgba(201, 162, 39, 0.45); --podium-2: #78808A; --podium-2-ink: #545A63; --podium-2-tint: rgba(120, 128, 138, 0.16); --podium-2-line: rgba(120, 128, 138, 0.45); --podium-3: #A9713F; --podium-3-ink: #8A4B22; --podium-3-tint: rgba(169, 113, 63, 0.16); --podium-3-line: rgba(169, 113, 63, 0.45); /* Slot 1 only, so the report's primary series is the brand. Slots 2 to 7 stay the shell's: they are chosen to remain distinguishable from one another AND in greyscale, and re-picking them here would quietly break that on a report that has a print path. */ --chart-1: #EB6753; } [data-theme="dark"] { --font-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-sans: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* The accent lifts in dark, as every accent on this platform does: #EB6753 on a black page is legible but heavy, and the components that carry it are small. */ --gold: #F2836F; --gold-bright: #F79E8C; --gold-light: #FBC3B6; --gold-text: #F79E8C; --gold-tint: rgba(242, 131, 111, 0.16); --gold-tint-line: rgba(242, 131, 111, 0.38); --champagne: #FDE7E1; --primary: #F2836F; --accent: #F2836F; --accent-cyan: #F79E8C; --accent-glow: rgba(242, 131, 111, 0.34); --gradient-primary: linear-gradient(115deg, #E05B44 0%, #F2836F 46%, #F79E8C 100%); --gradient-vivid: linear-gradient(115deg, #F79E8C 0%, #F2836F 46%, #E05B44 100%); --border-hover: rgba(242, 131, 111, 0.52); --input-focus-glow: rgba(242, 131, 111, 0.22); /* ---- THE BUTTONS — dark ------------------------------------------------------------------------------------ CAPPED BELOW THE ACCENT. shell.css climbs the dark button TO var(--gold) and pushes the reveal past it toward white, on the reasoning that the dominant button on a night page should be the brightest thing on it. With a salmon accent and a white label that lands at 2.5:1, which is not a label, it is a suggestion of one. So the ramp stops short of the accent and stays in the deeper coral. It still sits at 3.6:1 to 6.2:1 against the black page — plainly the most present control there — while the label runs 3.2:1 to 5.5:1 rather than 2.5:1. The button is a little less bright and a great deal more readable, which is the right way round for the one control the whole page is pointing at. Restated in full rather than inherited, because of rule 2 at the top of this file. */ --btn-primary-bg: linear-gradient(135deg, #B8402C 0%, #C74A34 50%, #D6553D 100%); --btn-primary-hover: linear-gradient(135deg, #D6553D 0%, #E05F46 50%, #E86A52 100%); --btn-primary-ink: #FFFFFF; --btn-primary-bar: #FFFFFF; /* Dark: a raised neutral, not a darker one. The page is #0B0B0D and the card #141416, so a graphite button would sink into its own panel; this sits a step above it and reads as a key you can press. #F2F1F0 on it is 12.4:1. */ --btn-secondary-bg: #2A2A2F; --btn-secondary-bg-hover: #3A3A41; --btn-secondary-line: rgba(242, 241, 240, 0.32); /* 3.41:1 against the card — a raised face this close in value needs a real edge */ --btn-secondary-ink: #F2F1F0; /* The rotation, in dark. Unlike the two fixed panels below, these DO flip: they sit on the themed page surfaces, so they take the luminous end of the ramp the way --gold does. */ --accent-2: #A8A6AE; --accent-2-bright: #C2C0C7; --accent-2-text: #C2C0C7; --accent-2-tint: rgba(168, 166, 174, 0.14); --accent-2-line: rgba(168, 166, 174, 0.30); --accent-2-glow: rgba(168, 166, 174, 0.26); --accent-3: #B6ADA4; --accent-3-bright: #CEC6BD; --accent-3-text: #CEC6BD; --accent-3-tint: rgba(182, 173, 164, 0.14); --accent-3-line: rgba(182, 173, 164, 0.30); --accent-3-glow: rgba(182, 173, 164, 0.26); /* Dark keeps nearly the shell's strength: a warm wash over black has nothing to fight and reads as depth rather than as tint. It is the light block that had to come down. */ --ambient-1: rgba(242, 131, 111, 0.08); --ambient-2: rgba(168, 166, 174, 0.045); --ambient-3: rgba(182, 173, 164, 0.045); /* Dark keeps most of the shell's orb: a warm disc over black reads as depth rather than as tint, which is the whole reason it exists. It is the light block that had to come down. */ --ambient-orb: 0.075; --panel-glow-a: rgba(235, 103, 83, 0.18); --panel-glow-b: rgba(245, 166, 151, 0.13); /* ---- THE SURFACES — dark: actual black --------------------------------------------------------------------- #0B0B0D rather than the shell's #0A1020, which is a navy charcoal. Still not #000: a true black ground makes every shadow on the page invisible and every card edge a hard line, and the whole layout depends on both. */ --ink: #060608; --bone: #F2F1F0; --bg-primary: #0B0B0D; --bg-secondary: #141416; --bg-tertiary: #1E1E22; --bg-card: rgba(22, 22, 26, 0.74); --bg-glass: rgba(11, 11, 13, 0.80); --text-primary: #F2F1F0; --text-secondary: #B3B2B0; --text-muted: #87868A; --border: rgba(242, 241, 240, 0.13); --rule: rgba(242, 241, 240, 0.10); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.55); --shadow-md: 0 24px 56px -32px rgba(0, 0, 0, 0.90); --shadow-lg: 0 46px 100px -48px rgba(0, 0, 0, 0.96); --phone-screen: #050506; --input-bg: #17171A; --input-border: rgba(242, 241, 240, 0.16); /* The loss colour lifts too, and keeps the same distance from the accent it has in light: the accent is a warm salmon here, so the loss red stays deeper and flatter than it. */ --error: #D9503C; --error-bright: #E86A56; --error-glow: rgba(217, 80, 60, 0.38); /* The two fixed dark panels. SAME VALUES as the light block, for the reason given there. */ --dash-hero-gradient: linear-gradient(150deg, #0E0E10 0%, #1C1C20 46%, #2A2A2E 100%); --dash-hero-accent: #F5A697; --rp-cover-gradient: linear-gradient(150deg, #0A0A0C 0%, #18181C 38%, #2A2A2E 76%, #111114 100%); --rp-cover-accent: #F5A697; /* The podium, lifted for a black ground: the metal becomes its own ink, as every accent does in dark. */ --podium-1: #E3C46A; --podium-1-ink: #E3C46A; --podium-1-tint: rgba(227, 196, 106, 0.17); --podium-1-line: rgba(227, 196, 106, 0.42); --podium-2: #C3C8CE; --podium-2-ink: #C3C8CE; --podium-2-tint: rgba(195, 200, 206, 0.16); --podium-2-line: rgba(195, 200, 206, 0.40); --podium-3: #D99268; --podium-3-ink: #D99268; --podium-3-tint: rgba(217, 146, 104, 0.16); --podium-3-line: rgba(217, 146, 104, 0.40); --chart-1: #F2836F; }