/* Neighborhood Blocks design tokens: the only place a raw color, font or size is written. Every stylesheet and script on the development site uses these names. Two tiers: - palette: the brand's named colors (pine, lime, sage, the soft washes, ...); - roles: what a color is for (page background, surface, text, border, accent, ...). Roles flip in dark mode. Two looks, both from the live site: the marketing pages (data-look="site" on : home, hub, placeholders) use the landing page's slightly softer pine and ink; the app pages (portals) use the builder's. Dark mode is shared. Generated size, spacing and radius scales sit at the end of the file. */ :root{ /* ── palette ── */ --pine:#1E3B2C;--lime:#D6EC3F;--sage:#B8DEC3;--sage2:#CDE0D3;--sagewash:#DCEBE0; --sky:#AEE1F5;--lilac:#AEE1F5;--skywash:#D9E8F2;--skyink:#2C5F78; --rose:#C4586C;--rosewash:#FFD9E2;--pink:#FFCFE3; --amber:#E3B75A;--amberwash:#F5E4BF; --brick:#96412E;--clay:#F3DCD2;--peach:#FFB27A;--lilacwash:#E8E2F6; --cream:#F7F4EC; /* ── roles ── */ --bg:#FFFFFF; /* the page */ --surface:#FFFFFF; /* cards, inputs, buttons on the page */ --surface-muted:#F7F4EC; /* quiet panels: stats, archived cards, notes */ --nav-bg:rgba(255,255,255,.94); /* the floating nav on marketing pages */ --text:#4F554F; /* body copy */ --text-strong:#101310; /* headings, labels, values */ --text-muted:#646B64; /* hints, meta: 4.5:1 or better on white and cream */ --border:#E6E5E0; --border-hover:#101310; --border-soft:rgba(16,19,16,.08); --rule-soft:rgba(16,19,16,.14); --accent:#1E3B2C; /* selected pills, primary buttons, switches */ --on-accent:#D6EC3F; /* text on --accent */ --accent-text:#1E3B2C; /* accent used as text on the page */ --accent-border:#1E3B2C; /* focus rings and selected outlines */ --on-lime:#1E3B2C; /* text on lime, in both modes */ --on-color:#FFFFFF; /* text on a strong palette color (rose, sky ink, danger) */ --on-brick:#FFF6EE; --danger:#C2402A; --danger-ring:rgba(194,64,42,.18); --danger-border:rgba(194,64,42,.4); --error-bg:#FFCFE3; --error-text:#7A1F44; --banner-bg:#E3B75A; /* the development banner stays amber in both modes */ --on-banner:#101310; --knob:#FFFFFF; /* switch knob */ --qr-bg:#FFFFFF; /* QR codes always print dark on white */ --qr-ink:#000000; /* the dark modules of a QR code, in both themes */ /* the six QR looks a Plus building can pick, as on the live builder; print colors, the same in both themes */ --qr-classic_block-ink:#1E3B2C;--qr-classic_block-bg:#FFFFFF; --qr-lime_pop-ink:#1E3B2C;--qr-lime_pop-bg:#D6EC3F; --qr-downtown_sky-ink:#1E3B2C;--qr-downtown_sky-bg:#AEE1F5; --qr-neon_night-ink:#D6EC3F;--qr-neon_night-bg:#1E3B2C; --qr-sunset-ink:#1E3B2C;--qr-sunset-bg:#FFCFE3; --qr-peach-ink:#1E3B2C;--qr-peach-bg:#FFB27A; --swatch-garden_courtyard:#B8DEC3;--swatch-route_66_neon:#FFB27A;--swatch-downtown_loft:#AEE1F5; --swatch-midtown_sunset:#FFCFE3;--swatch-brick_and_ivy:#F3DCD2;--swatch-block_party:#D6EC3F; /* ── type ── */ --font-display:'Bricolage Grotesque',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; --fs-display:clamp(46px,7.3vw,94px); --fs-display-short:clamp(42px,6.4vw,82px); --fs-section:clamp(27px,3.8vw,47px); --fs-page-title:clamp(28px,6vw,38px); --fs-auth-title:clamp(30px,7vw,38px); --fs-step-title:clamp(26px,6.4vw,34px); --fs-hero-title:clamp(24px,6vw,32px); --fs-card-title:clamp(20px,2.2vw,25px); --fs-card-title-sm:clamp(20px,2.2vw,24px); --fs-lede:clamp(15.5px,1.35vw,18px); --fs-lede-app:clamp(15.5px,1.4vw,18px); --fs-book-title:clamp(34px,7vw,52px); --fs-chapter-title:clamp(30px,6vw,44px); --fs-stat:clamp(34px,6vw,48px); /* ── radii ── */ --r-xl:28px;--r-lg:18px;--r-sm:12px;--r-pill:999px; --r-blob:clamp(36px,6vmax,84px); /* ── motion ── */ --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-fast:.15s;--dur-base:.18s;--dur-theme:.2s; /* ── layout ── */ --w-site-nav:1240px;--w-cover:1140px;--w-band:1100px;--w-portal-nav:1180px;--w-landing:1040px;--w-list:960px; --w-overview:660px;--w-read:720px;--w-step:620px;--w-loading:620px;--w-foot:640px;--w-auth:440px; --foot:74px; /* ── layers ── */ --z-nav:90;--z-top:70;--z-footbar:65;--z-progress:60;--z-popover:20;--z-toast:300; /* ── charts and admin ── */ --chart-1:#1E3B2C;--chart-2:#7BB38F;--chart-3:#2C5F78;--chart-4:#E3B75A;--chart-5:#C4586C;--chart-6:#96412E; --chart-grid:rgba(16,19,16,.08);--chart-text:#6F766F; --sample-stripe:rgba(227,183,90,.14);--sample-edge:#E3B75A; --ok:#2A6B45;--ok-soft:#DCEBE0;--warn:#7E4F0A;--warn-soft:#F5E4BF; --heat-0:#FFCFE3;--heat-1:#F5E4BF;--heat-2:#DCEBE0;--heat-3:#B8DEC3; --shadow-lift:0 10px 28px rgba(16,19,16,.10); --w-side:248px;--w-side-collapsed:68px;--w-admin:1180px; --z-side:75; color-scheme:light; } /* marketing pages: the live landing page's palette */ :root[data-look="site"]{ --pine:#2D5140;--sky:#A6CDE4;--peach:#F0B79A; --text:#454C46;--text-strong:#1A1F1B;--text-muted:#666D66;--border:#E8E7E2;--border-hover:#1A1F1B; --accent:#2D5140;--on-accent:#B8DEC3;--accent-text:#2D5140;--accent-border:#1A1F1B; } /* ── dark: the same names, pine-ink surfaces and cream text. Not on Blaine's pages (data-pages="blaine"): his stylesheets use several of these names for his own brand colors, so his dark mode is its own (lib/blaine/dark.css) ── */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]):not(.light):not([data-pages="blaine"]){ --pine:#2F5A44;--sage:#2A4535;--sage2:#22362A;--sagewash:#1F3327; --sky:#24485A;--lilac:#24485A;--skywash:#1D2E38;--skyink:#7FB6D1; --rose:#E07A8C;--rosewash:#3A2229;--pink:#4A2032; --amberwash:#3A3020;--brick:#D0765F;--clay:#3A2A24;--peach:#5A3A26;--lilacwash:#2A2638; --cream:#1E2B23; --bg:#0F1712;--surface:#17221B;--surface-muted:#1E2B23;--nav-bg:rgba(15,23,18,.92); --text:#C9CFC8;--text-strong:#F7F4EC;--text-muted:#9AA39B; --border:#2C3A31;--border-hover:#F7F4EC;--border-soft:rgba(247,244,236,.10);--rule-soft:rgba(247,244,236,.16); --accent:#2F5A44;--on-accent:#D6EC3F;--accent-text:#9FD3B4;--accent-border:#6FAE8C; --danger:#E0634D;--danger-ring:rgba(224,99,77,.25);--danger-border:rgba(224,99,77,.5); --error-bg:#4A2032;--error-text:#FFC2D6; --swatch-garden_courtyard:#3E6B51;--swatch-route_66_neon:#8A5A36;--swatch-downtown_loft:#2F6078; --swatch-midtown_sunset:#7A4A5E;--swatch-brick_and_ivy:#6E4A3E;--swatch-block_party:#8C9A2A; --chart-1:#9FD3B4;--chart-2:#5C9C74;--chart-3:#7FB6D1;--chart-4:#E3B75A;--chart-5:#E07A8C;--chart-6:#D0765F; --chart-grid:rgba(247,244,236,.10);--chart-text:#9AA39B; --sample-stripe:rgba(227,183,90,.10);--sample-edge:#A8853F; --ok:#7FCB9A;--ok-soft:#1F3327;--warn:#E3B75A;--warn-soft:#3A3020; --heat-0:#4A2032;--heat-1:#3A3020;--heat-2:#1F3327;--heat-3:#2F5A44; --shadow-lift:0 10px 28px rgba(0,0,0,.45); color-scheme:dark; } } :root[data-theme="dark"]:not([data-pages="blaine"]),:root.dark:not([data-pages="blaine"]){ --pine:#2F5A44;--sage:#2A4535;--sage2:#22362A;--sagewash:#1F3327; --sky:#24485A;--lilac:#24485A;--skywash:#1D2E38;--skyink:#7FB6D1; --rose:#E07A8C;--rosewash:#3A2229;--pink:#4A2032; --amberwash:#3A3020;--brick:#D0765F;--clay:#3A2A24;--peach:#5A3A26;--lilacwash:#2A2638; --cream:#1E2B23; --bg:#0F1712;--surface:#17221B;--surface-muted:#1E2B23;--nav-bg:rgba(15,23,18,.92); --text:#C9CFC8;--text-strong:#F7F4EC;--text-muted:#9AA39B; --border:#2C3A31;--border-hover:#F7F4EC;--border-soft:rgba(247,244,236,.10);--rule-soft:rgba(247,244,236,.16); --accent:#2F5A44;--on-accent:#D6EC3F;--accent-text:#9FD3B4;--accent-border:#6FAE8C; --danger:#E0634D;--danger-ring:rgba(224,99,77,.25);--danger-border:rgba(224,99,77,.5); --error-bg:#4A2032;--error-text:#FFC2D6; --swatch-garden_courtyard:#3E6B51;--swatch-route_66_neon:#8A5A36;--swatch-downtown_loft:#2F6078; --swatch-midtown_sunset:#7A4A5E;--swatch-brick_and_ivy:#6E4A3E;--swatch-block_party:#8C9A2A; --chart-1:#9FD3B4;--chart-2:#5C9C74;--chart-3:#7FB6D1;--chart-4:#E3B75A;--chart-5:#E07A8C;--chart-6:#D0765F; --chart-grid:rgba(247,244,236,.10);--chart-text:#9AA39B; --sample-stripe:rgba(227,183,90,.10);--sample-edge:#A8853F; --ok:#7FCB9A;--ok-soft:#1F3327;--warn:#E3B75A;--warn-soft:#3A3020; --heat-0:#4A2032;--heat-1:#3A3020;--heat-2:#1F3327;--heat-3:#2F5A44; --shadow-lift:0 10px 28px rgba(0,0,0,.45); color-scheme:dark; } /* ── building page themes: a Plus building's chosen colors (live site's six); a starter page stays plain ── */ [data-block-theme]{ --bt-bg:var(--bg);--bt-txt:var(--text-strong);--bt-card:var(--surface);--bt-card-txt:var(--text-strong); --bt-av:var(--text-strong);--bt-av-txt:var(--bg);--bt-acc:var(--accent);--bt-acc-txt:var(--on-accent); } [data-block-theme="garden_courtyard"]{--bt-bg:#EAF3E2;--bt-txt:#1E3B2C;--bt-card:#FFFFFF;--bt-card-txt:#1E3B2C;--bt-av:#D6EC3F;--bt-av-txt:#1E3B2C;--bt-acc:#1E3B2C;--bt-acc-txt:#D6EC3F} [data-block-theme="route_66_neon"]{--bt-bg:#2B1E3F;--bt-txt:#FFFFFF;--bt-card:#3A2B54;--bt-card-txt:#F3E9FF;--bt-av:#FC5C72;--bt-av-txt:#FFFFFF;--bt-acc:#F7B32B;--bt-acc-txt:#2B1E3F} [data-block-theme="downtown_loft"]{--bt-bg:#1A1E1A;--bt-txt:#FFFFFF;--bt-card:#2B302B;--bt-card-txt:#EDEFE8;--bt-av:#AEE1F5;--bt-av-txt:#1A1E1A;--bt-acc:#FFFFFF;--bt-acc-txt:#1A1E1A} [data-block-theme="midtown_sunset"]{--bt-bg:#FFCFE3;--bt-txt:#1E3B2C;--bt-card:#FFFFFF;--bt-card-txt:#1E3B2C;--bt-av:#FFB27A;--bt-av-txt:#1E3B2C;--bt-acc:#1E3B2C;--bt-acc-txt:#FFCFE3} [data-block-theme="brick_and_ivy"]{--bt-bg:#B34A32;--bt-txt:#FFF6EE;--bt-card:#8E3A27;--bt-card-txt:#FFE8DE;--bt-av:#F7F4EC;--bt-av-txt:#B34A32;--bt-acc:#D6EC3F;--bt-acc-txt:#1E3B2C} [data-block-theme="block_party"]{--bt-bg:#3D2E8C;--bt-txt:#FFFFFF;--bt-card:#4C3BA6;--bt-card-txt:#EDEAFF;--bt-av:#FC5C72;--bt-av-txt:#FFFFFF;--bt-acc:#D6EC3F;--bt-acc-txt:#3D2E8C} /* the two light themes get a dark version; the dark themes already are */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]):not(.light) [data-block-theme="garden_courtyard"]{--bt-bg:#16261C;--bt-txt:#EAF3E2;--bt-card:#1F3327;--bt-card-txt:#EAF3E2;--bt-acc:#D6EC3F;--bt-acc-txt:#1E3B2C} :root:not([data-theme="light"]):not(.light) [data-block-theme="midtown_sunset"]{--bt-bg:#2E1A24;--bt-txt:#FFE3EF;--bt-card:#3E2330;--bt-card-txt:#FFE3EF;--bt-acc:#FFB27A;--bt-acc-txt:#2E1A24} } :root[data-theme="dark"] [data-block-theme="garden_courtyard"],:root.dark [data-block-theme="garden_courtyard"]{--bt-bg:#16261C;--bt-txt:#EAF3E2;--bt-card:#1F3327;--bt-card-txt:#EAF3E2;--bt-acc:#D6EC3F;--bt-acc-txt:#1E3B2C} :root[data-theme="dark"] [data-block-theme="midtown_sunset"],:root.dark [data-block-theme="midtown_sunset"]{--bt-bg:#2E1A24;--bt-txt:#FFE3EF;--bt-card:#3E2330;--bt-card-txt:#FFE3EF;--bt-acc:#FFB27A;--bt-acc-txt:#2E1A24} /* ── map pins and the Deco letter blocks ── */ :root{--deco-d:#1E3B2C;--deco-e:#D6EC3F;--deco-c:#AEE1F5;--deco-o:#FFB27A;--deco-ink:#101310;--deco-on-d:#D6EC3F} /* ── generated scales: begin ── */ :root{ /* font sizes */ --fs-10:10px;--fs-10-5:10.5px;--fs-11:11px;--fs-11-5:11.5px;--fs-12:12px;--fs-12-5:12.5px;--fs-13:13px;--fs-13-5:13.5px;--fs-14:14px;--fs-14-5:14.5px;--fs-15:15px;--fs-15-5:15.5px;--fs-16:16px;--fs-16-5:16.5px;--fs-17:17px;--fs-17-5:17.5px;--fs-18:18px;--fs-19:19px;--fs-20:20px;--fs-22:22px;--fs-24:24px;--fs-25:25px;--fs-26:26px;--fs-28:28px;--fs-32:32px;--fs-40:40px; /* spacing */ --sp-2:2px;--sp-3:3px;--sp-4:4px;--sp-5:5px;--sp-6:6px;--sp-7:7px;--sp-8:8px;--sp-9:9px;--sp-10:10px;--sp-11:11px;--sp-12:12px;--sp-13:13px;--sp-14:14px;--sp-15:15px;--sp-16:16px;--sp-17:17px;--sp-18:18px;--sp-20:20px;--sp-22:22px;--sp-24:24px;--sp-26:26px;--sp-28:28px;--sp-30:30px;--sp-32:32px;--sp-34:34px;--sp-36:36px;--sp-40:40px;--sp-44:44px;--sp-48:48px;--sp-52:52px;--sp-56:56px;--sp-60:60px;--sp-64:64px;--sp-70:70px;--sp-72:72px;--sp-80:80px;--sp-86:86px;--sp-88:88px;--sp-96:96px;--sp-100:100px;--sp-104:104px;--sp-112:112px;--sp-120:120px;--sp-132:132px; /* radii */ --radius-3:3px;--radius-5:5px;--radius-6:6px;--radius-10:10px;--radius-14:14px;--radius-16:16px;--radius-20:20px;--radius-22:22px;--radius-24:24px;--radius-28:28px;--radius-30:30px;--radius-44:44px;--radius-99:99px; } /* ── generated scales: end ── */