/* ========================================================================== PALETTES One per vertical. A hue rotation alone made 14 sites look like one site, so each palette sets its own ground, its own accent, and its own action colour. Applied as data-palette on . Every palette defines the same five roles: --dp-ground the dark hero and footer ground --dp-ground-2 the tint that lights one corner of the hero --dp-brand-hue drives links, rules, and the silo cards --dp-cta-* the single action colour, warm enough to read as a button ========================================================================== */ /* Dumpster rental. Working steel and safety orange. */ body[data-palette="steel"] { --dp-ground: hsl(213, 34%, 15%); --dp-ground-2: hsl(206, 62%, 26%); --dp-brand-hue: 208; --dp-cta-100: hsl(26, 100%, 95%); --dp-cta-300: hsl(28, 96%, 72%); --dp-cta-500: hsl(24, 94%, 48%); --dp-cta-600: hsl(21, 96%, 42%); } /* Financial advisors. Harbour blue and a restrained gold. */ body[data-palette="harbor"] { --dp-ground: hsl(202, 45%, 14%); --dp-ground-2: hsl(192, 58%, 24%); --dp-brand-hue: 194; --dp-cta-100: hsl(44, 92%, 94%); --dp-cta-300: hsl(42, 88%, 70%); --dp-cta-500: hsl(38, 92%, 45%); --dp-cta-600: hsl(34, 94%, 39%); } /* Personal injury. Charcoal and clay: serious, not alarming. */ body[data-palette="clay"] { --dp-ground: hsl(20, 12%, 14%); --dp-ground-2: hsl(14, 42%, 26%); --dp-brand-hue: 14; --dp-cta-100: hsl(12, 92%, 95%); --dp-cta-300: hsl(12, 84%, 72%); --dp-cta-500: hsl(10, 74%, 48%); --dp-cta-600: hsl(8, 78%, 41%); } /* Business loans. Forest and a bright gold. */ body[data-palette="forest"] { --dp-ground: hsl(158, 32%, 12%); --dp-ground-2: hsl(152, 46%, 22%); --dp-brand-hue: 156; --dp-cta-100: hsl(48, 94%, 94%); --dp-cta-300: hsl(46, 92%, 70%); --dp-cta-500: hsl(42, 96%, 46%); --dp-cta-600: hsl(38, 96%, 40%); } /* Hard money. Near-black slate and copper. */ body[data-palette="copper"] { --dp-ground: hsl(28, 14%, 12%); --dp-ground-2: hsl(26, 48%, 24%); --dp-brand-hue: 30; --dp-cta-100: hsl(30, 92%, 94%); --dp-cta-300: hsl(30, 86%, 70%); --dp-cta-500: hsl(28, 88%, 46%); --dp-cta-600: hsl(24, 90%, 39%); } /* Cosmetic dentists. Clean lagoon and coral. */ body[data-palette="lagoon"] { --dp-ground: hsl(196, 48%, 14%); --dp-ground-2: hsl(186, 62%, 26%); --dp-brand-hue: 190; --dp-cta-100: hsl(6, 96%, 95%); --dp-cta-300: hsl(6, 92%, 76%); --dp-cta-500: hsl(4, 80%, 54%); --dp-cta-600: hsl(2, 82%, 46%); } /* Real estate. Ink and terracotta. */ body[data-palette="terracotta"] { --dp-ground: hsl(206, 28%, 15%); --dp-ground-2: hsl(18, 44%, 28%); --dp-brand-hue: 20; --dp-cta-100: hsl(20, 92%, 95%); --dp-cta-300: hsl(20, 84%, 72%); --dp-cta-500: hsl(18, 78%, 48%); --dp-cta-600: hsl(14, 82%, 41%); } /* Assisted living. Warm brown and soft amber: calm, not clinical. */ body[data-palette="amber"] { --dp-ground: hsl(24, 20%, 16%); --dp-ground-2: hsl(32, 44%, 30%); --dp-brand-hue: 30; --dp-cta-100: hsl(38, 94%, 94%); --dp-cta-300: hsl(38, 90%, 72%); --dp-cta-500: hsl(34, 88%, 46%); --dp-cta-600: hsl(30, 90%, 40%); } /* Criminal defense. Oxblood and brass. */ body[data-palette="oxblood"] { --dp-ground: hsl(350, 30%, 13%); --dp-ground-2: hsl(348, 48%, 24%); --dp-brand-hue: 350; --dp-cta-100: hsl(40, 92%, 94%); --dp-cta-300: hsl(40, 86%, 70%); --dp-cta-500: hsl(36, 86%, 48%); --dp-cta-600: hsl(32, 88%, 41%); } /* IT services. Indigo and cyan. */ body[data-palette="indigo"] { --dp-ground: hsl(248, 38%, 15%); --dp-ground-2: hsl(256, 54%, 30%); --dp-brand-hue: 254; --dp-cta-100: hsl(186, 92%, 94%); --dp-cta-300: hsl(186, 84%, 68%); --dp-cta-500: hsl(188, 92%, 38%); --dp-cta-600: hsl(190, 94%, 32%); } /* Car accident. Slate blue and amber. */ body[data-palette="slate"] { --dp-ground: hsl(216, 30%, 16%); --dp-ground-2: hsl(210, 46%, 28%); --dp-brand-hue: 212; --dp-cta-100: hsl(40, 94%, 94%); --dp-cta-300: hsl(40, 90%, 70%); --dp-cta-500: hsl(36, 92%, 48%); --dp-cta-600: hsl(32, 94%, 42%); } /* Midwife care. Warm rose ground and a deep rose action. */ body[data-palette="rose"] { --dp-ground: hsl(344, 24%, 16%); --dp-ground-2: hsl(338, 40%, 30%); --dp-brand-hue: 342; --dp-cta-100: hsl(346, 92%, 95%); --dp-cta-300: hsl(346, 82%, 76%); --dp-cta-500: hsl(344, 68%, 48%); --dp-cta-600: hsl(342, 72%, 41%); } /* Commercial cleaning. Jade and lime. */ body[data-palette="jade"] { --dp-ground: hsl(178, 42%, 12%); --dp-ground-2: hsl(172, 54%, 22%); --dp-brand-hue: 174; --dp-cta-100: hsl(74, 86%, 94%); --dp-cta-500: hsl(78, 72%, 36%); --dp-cta-300: hsl(78, 68%, 62%); --dp-cta-600: hsl(82, 76%, 30%); } /* Plastic surgeons. Aubergine and blush. */ body[data-palette="aubergine"] { --dp-ground: hsl(300, 26%, 14%); --dp-ground-2: hsl(312, 38%, 28%); --dp-brand-hue: 308; --dp-cta-100: hsl(348, 94%, 95%); --dp-cta-300: hsl(348, 86%, 78%); --dp-cta-500: hsl(346, 72%, 52%); --dp-cta-600: hsl(344, 76%, 44%); } /* The hero and footer read from --dp-ground, so a palette changes both without touching any component rule. */ .dp-hero { background: radial-gradient(115% 130% at 88% 6%, var(--dp-ground-2) 0%, transparent 58%), var(--dp-ground, var(--dp-grey-900)); } .dp-footer { background: var(--dp-ground, var(--dp-grey-900)); } .dp-sticky { background: var(--dp-ground, var(--dp-grey-900)); } .dp-prose section[data-section="cta"], .entry-content section[data-section="cta"], .dp-cta-band { background: radial-gradient(90% 160% at 90% 0%, var(--dp-ground-2) 0%, transparent 60%), var(--dp-ground, var(--dp-brand-900)); } /* Wholesale cannabis. Deep green ground with brass, taken from the palette measured off Farnsworth: cream, deep green #014215, oxblood, gold #D9A536. The hero here is dark rather than cream, so green carries the ground and the gold does the work the cream did. */ body[data-palette="cultivar"] { --dp-ground: hsl(146, 74%, 9%); --dp-ground-2: hsl(150, 46%, 18%); --dp-brand-hue: 148; --dp-cta-100: hsl(42, 92%, 94%); --dp-cta-300: hsl(42, 86%, 72%); --dp-cta-500: hsl(40, 72%, 53%); --dp-cta-600: hsl(36, 76%, 45%); } /* Real paper per palette. Deriving one from the hue at 8% saturation made every site the same grey, which is what flattened the network. */ html body[data-palette="steel"] { --an-paper: hsl(210, 14%, 91%); --an-paper-2: hsl(210, 16%, 95%); --an-rule: hsl(210, 12%, 80%); } html body[data-palette="harbor"] { --an-paper: hsl(194, 20%, 93%); --an-paper-2: hsl(194, 24%, 96%); --an-rule: hsl(194, 16%, 82%); } html body[data-palette="clay"] { --an-paper: hsl(24, 18%, 91%); --an-paper-2: hsl(24, 22%, 95%); --an-rule: hsl(24, 14%, 80%); } html body[data-palette="forest"] { --an-paper: hsl(150, 16%, 92%); --an-paper-2: hsl(150, 20%, 96%); --an-rule: hsl(150, 12%, 81%); } html body[data-palette="copper"] { --an-paper: hsl(30, 20%, 90%); --an-paper-2: hsl(30, 24%, 95%); --an-rule: hsl(30, 16%, 79%); } html body[data-palette="lagoon"] { --an-paper: hsl(188, 22%, 93%); --an-paper-2: hsl(188, 26%, 96%); --an-rule: hsl(188, 16%, 83%); } html body[data-palette="terracotta"] { --an-paper: hsl(22, 20%, 92%); --an-paper-2: hsl(22, 24%, 96%); --an-rule: hsl(22, 15%, 81%); } html body[data-palette="amber"] { --an-paper: hsl(36, 26%, 91%); --an-paper-2: hsl(36, 30%, 95%); --an-rule: hsl(36, 18%, 80%); } html body[data-palette="oxblood"] { --an-paper: hsl(348, 14%, 92%); --an-paper-2: hsl(348, 18%, 96%); --an-rule: hsl(348, 12%, 82%); } html body[data-palette="indigo"] { --an-paper: hsl(250, 16%, 93%); --an-paper-2: hsl(250, 20%, 96%); --an-rule: hsl(250, 13%, 83%); } html body[data-palette="slate"] { --an-paper: hsl(212, 15%, 92%); --an-paper-2: hsl(212, 18%, 95%); --an-rule: hsl(212, 12%, 81%); } html body[data-palette="rose"] { --an-paper: hsl(344, 24%, 93%); --an-paper-2: hsl(344, 30%, 96%); --an-rule: hsl(344, 16%, 84%); } html body[data-palette="jade"] { --an-paper: hsl(172, 20%, 92%); --an-paper-2: hsl(172, 24%, 96%); --an-rule: hsl(172, 14%, 81%); } html body[data-palette="aubergine"] { --an-paper: hsl(308, 14%, 92%); --an-paper-2: hsl(308, 18%, 96%); --an-rule: hsl(308, 11%, 82%); }