/* ========================================================================== WEIRDO & CO — DESIGN TOKENS -------------------------------------------------------------------------- House colours are blue and black. Every skin is built from them. Five worlds, one skeleton. The whole site is dark: the category this brand competes in is curiosities, oddities and cryptids, and that market is dark. A white page fights the product photography and fights the customer's expectation of the shelf these things end up on. The worlds are separated by HUE and by the QUALITY of their light, not by lightness. They do still sit on a ladder from lifted to absolute black, which gives the site somewhere to travel: The Weirdos #10141F lifted blue charcoal electric blue The Neighbours #0A1018 night blue one warm window The Keepers #0C1220 gallery navy silk red The Visitors #080A0E fluorescent black cold cyan The Beacons #000000 absolute black warm amber The Weirdos are the lightest because they are the front door. They are still dark. Red exists in exactly one place: The Keepers. The product brings the colour, the room stays blue-black, and because nothing else on the site is warm it reads as a shock rather than as decoration. Do not leak it into the other three. Adding a fifth world is one block in here and one entry in weirdo_collections(). Nothing else. Rule: if a component hardcodes a colour, a radius or an easing curve, that is a bug. ========================================================================== */ /* -------------------------------------------------------------------------- 0. THE HOUSE Fixed points every skin is derived from. These are the brand, and they do not change per section. -------------------------------------------------------------------------- */ :root { --house-black: #0A0C10; --house-blue: #2E5BFF; --house-white: #F2F4F8; } /* -------------------------------------------------------------------------- 1. INVARIANTS Layout, spacing, type scale, hit areas. These are what keep it one brand across four worlds that share no colours at all. -------------------------------------------------------------------------- */ :root { /* Spacing scale — 4px base, roughly 1.5 ratio. Use these. Never type a pixel value into a component. */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.25rem; --space-xl: 3.5rem; --space-2xl: 5.5rem; --space-3xl: 8rem; /* Type scale — fluid, clamped. No media queries needed for size. */ --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --text-s: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --text-m: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); --text-l: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); --text-xl: clamp(2rem, 1.5rem + 2.4vw, 3.5rem); --text-2xl: clamp(2.75rem, 1.8rem + 4.2vw, 5.5rem); --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.6; /* Layout — identical in all four worlds, and that is deliberate. */ --measure: 68ch; --container: 78rem; --container-pad: clamp(1.25rem, 4vw, 3rem); --grid-min: 15rem; /* Accessibility floor, not a style choice. */ --tap-min: 44px; --z-nav: 100; --z-drawer: 200; --z-modal: 300; --dur-fast: 140ms; --dur-mid: 260ms; --dur-slow: 520ms; /* Available in every world for the single serif accent word in a display line. Only The Keepers set their whole display type in it. */ --font-serif: "Weirdo Serif", "Iowan Old Style", Georgia, serif; } /* -------------------------------------------------------------------------- 2. THE WEIRDOS — the lifted room The lightest of the five, and still dark. Creatures, awake, watching. Bouncy and quick, with the softest corners on the site. Being one step lifted off black is what makes it read as the front door. -------------------------------------------------------------------------- */ :root, [data-collection="weirdos"] { --paper: #10141F; --paper-sunk: #0B0E17; --paper-raised: #171C2B; --ink: #EAEEF7; --ink-soft: #9AA4BC; --ink-faint: #5C6780; --rule: #232A3B; /* Lifted from the house blue so it still sings on a dark ground. #2E5BFF is correct on white and muddy on charcoal. */ --accent: #5B80FF; --accent-ink: #060A18; --accent-quiet: #17203C; --ok: #4FD8A0; --warn: #E2A02C; --pending: #5C6780; --radius: 14px; --radius-sm: 8px; --radius-pill: 999px; --border: 1.5px; /* Overshoot. Free personality. */ --motion: cubic-bezier(.34, 1.56, .64, 1); --motion-exit: cubic-bezier(.4, 0, .68, .06); --lift: -3px; --lift-scale: 1.02; /* Screen, not multiply. On a dark ground multiply just removes the texture entirely. */ --texture: url("../img/paper.avif"); --texture-opacity: 0.14; --texture-blend: screen; /* On a dark ground a drop shadow does almost nothing, so depth comes from a hairline plus a lift on hover. */ --shadow-card: 0 0 0 1px var(--rule), 0 12px 28px -20px #000; --shadow-lift: 0 0 0 1px var(--accent), 0 18px 40px -20px #000; --glow: none; --font-display: "Weirdo Display", "Poppins", ui-rounded, system-ui, sans-serif; --font-body: "Weirdo Text", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace; --display-weight: 700; --display-spacing: -0.02em; --display-case: none; --number-font: var(--font-display); --number-spacing: 0.04em; --number-case: uppercase; --number-colour: var(--accent); --cursor-media: default; --card-ratio: 4 / 5; color-scheme: dark; } /* -------------------------------------------------------------------------- 3. THE VISITORS — fluorescent Specimens under a strip light in a room nobody visits. Cold, clinical, slightly wrong. Sharp corners, mechanical motion, nothing bounces. -------------------------------------------------------------------------- */ [data-collection="visitors"] { --paper: #080A0E; --paper-sunk: #04060A; --paper-raised: #10141A; --ink: #C8D4E4; --ink-soft: #7A8798; --ink-faint: #55606D; --rule: #1F2833; --accent: #4FD8E8; --accent-ink: #04121A; --accent-quiet: #0E2028; --ok: #4FD8E8; --warn: #D8A23E; --pending: #55606D; /* 2px, not 0. A true right angle reads as unstyled rather than as a decision. */ --radius: 2px; --radius-sm: 2px; --radius-pill: 2px; --border: 1px; /* No overshoot anywhere. These things do not bounce. */ --motion: cubic-bezier(.4, 0, .2, 1); --motion-exit: cubic-bezier(.4, 0, 1, 1); --lift: 0px; --lift-scale: 1; --texture: url("../img/grain.avif"); --texture-opacity: 0.3; --texture-blend: screen; /* Depth comes from the hairline, not from shadow. */ --shadow-card: 0 0 0 1px var(--rule); --shadow-lift: 0 0 0 1px var(--accent), 0 0 24px -8px var(--accent); --glow: none; --font-display: "Weirdo Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --font-body: "Weirdo Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --font-mono: "Weirdo Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --display-weight: 500; --display-spacing: 0.01em; --display-case: uppercase; --number-font: var(--font-mono); --number-spacing: 0.14em; --number-case: uppercase; --number-colour: var(--accent); /* Specimens get examined, not browsed. */ --cursor-media: crosshair; --card-ratio: 4 / 5; color-scheme: dark; } /* -------------------------------------------------------------------------- 4. THE KEEPERS — gallery raking light Vases. The room is a dark gallery wall and one hard light comes in from the side. Everything here is about the shadow the ribs throw. This is the only place silk red appears in the entire brand. It works because nothing else on the site is warm. -------------------------------------------------------------------------- */ [data-collection="keepers"] { --paper: #0C1220; --paper-sunk: #070C16; --paper-raised: #141C2E; --ink: #EFE9E4; --ink-soft: #9AA3B4; --ink-faint: #5C6678; --rule: #222C42; /* Silk red. Kept slightly orange so it reads as pigment under a warm light rather than as an error state. */ --accent: #E23E2C; /* Near-black, not white. White on this red is 3.9:1 and fails AA for a button label. The red is a product colour and does not move; the label is not, so the label moves. */ --accent-ink: #1A0402; --accent-quiet: #2A1620; --ok: #4FBF8B; --warn: #E2A02C; --pending: #5C6678; /* Generous curves. These are sculptural objects and sharp corners fight the form. */ --radius: 20px; --radius-sm: 12px; --radius-pill: 999px; --border: 1px; /* Very slow. Light moving across a surface, not an interface reacting. */ --motion: cubic-bezier(.22, .61, .36, 1); --motion-exit: cubic-bezier(.55, 0, .68, .19); --lift: -2px; --lift-scale: 1.01; --dur-mid: 420ms; --dur-slow: 900ms; /* No grain. A gallery wall is smooth; the interest is in the lighting. */ --texture: none; --texture-opacity: 0; --shadow-card: 0 18px 40px -24px rgba(0, 0, 0, .9); --shadow-lift: 0 30px 70px -30px rgba(0, 0, 0, 1), 0 0 0 1px var(--rule); --glow: none; /* The one section with a serif. It is the gallery, and the shift in typographic register does more work than any amount of decoration. */ --font-display: "Weirdo Serif", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Weirdo Text", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace; --display-weight: 400; --display-spacing: -0.01em; --display-case: none; --number-font: var(--font-mono); --number-spacing: 0.18em; --number-case: uppercase; --number-colour: var(--accent); --cursor-media: default; /* Taller frame. Vases are columnar and a 4:5 crop cuts them off. */ --card-ratio: 3 / 4.4; color-scheme: dark; } /* -------------------------------------------------------------------------- 5. THE BEACONS — their own light 12V USB lamps. True black, and everything on the page emits rather than reflects. Light is the interface here. -------------------------------------------------------------------------- */ [data-collection="beacons"] { --paper: #000000; --paper-sunk: #000000; --paper-raised: #0A0A0C; --ink: #E8DCC8; --ink-soft: #8F8676; --ink-faint: #5E5A52; --rule: #1C1A16; /* Warm amber. The colour of a low-voltage filament, which is what these actually are. */ --accent: #FFB454; --accent-ink: #1A1000; --accent-quiet: #2A1E08; --ok: #9FD86F; --warn: #FF8A54; --pending: #5E5A52; /* Round. They are bulbs. */ --radius: 999px; --radius-sm: 14px; --radius-pill: 999px; --border: 1px; /* Slow warm-up and slow fade, like something actually heating. */ --motion: cubic-bezier(.4, 0, .2, 1); --motion-exit: cubic-bezier(.4, 0, .2, 1); --lift: 0px; --lift-scale: 1; --dur-fast: 260ms; --dur-mid: 520ms; --dur-slow: 1100ms; --texture: none; --texture-opacity: 0; /* Depth is bloom, not shadow. There is nothing for a shadow to fall on. */ --shadow-card: 0 0 0 1px var(--rule); --shadow-lift: 0 0 0 1px var(--accent-quiet), 0 0 60px -12px var(--accent); --glow: 0 0 40px -6px var(--accent); --font-display: "Weirdo Display", "Poppins", ui-rounded, system-ui, sans-serif; --font-body: "Weirdo Text", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace; --display-weight: 600; --display-spacing: 0.01em; --display-case: none; --number-font: var(--font-mono); --number-spacing: 0.16em; --number-case: uppercase; --number-colour: var(--accent); --cursor-media: default; /* Was 1 / 1, on the theory that a glowing object wants a square of night around it. That theory assumed a round lamp. The real Beacons are tall spirals photographed portrait, and the WordPress card size is a hard crop at 640x800, so a square box threw away the top and bottom of every one of them: the lit rim at the top and the base and cable at the bottom, which is the half that proves it is a lamp. Matches the rest of the site now. The glow does the work instead. */ --card-ratio: 4 / 5; color-scheme: dark; } /* -------------------------------------------------------------------------- 5b. THE NEIGHBOURS — one lit window in a dark room Book nooks. The Beacons and the Neighbours are both dark and both warm, so the distinction has to be strict or they collapse into each other: Beacons light is DIFFUSE. It bleeds out in every direction. Neighbours light is CONTAINED. One warm rectangle, hard edges, and the room around it stays cold blue. Everything else follows from that. Cold blue ink on a warm window is what makes it read as night rather than as lamplight. -------------------------------------------------------------------------- */ [data-collection="neighbours"] { --paper: #0A1018; --paper-sunk: #060B12; --paper-raised: #111926; --ink: #D8DEE9; --ink-soft: #717D8F; --ink-faint: #576272; --rule: #1A2230; /* Window light. Warmer and paler than the Beacons' amber, because it is coming through glass rather than off a filament. */ --accent: #FFC97A; --accent-ink: #1A1206; --accent-quiet: #1E1A14; --ok: #7FD8A8; --warn: #FFAE6B; --pending: #576272; /* Architectural. These are buildings. */ --radius: 4px; --radius-sm: 3px; --radius-pill: 999px; --border: 1px; --motion: cubic-bezier(.3, .7, .3, 1); --motion-exit: cubic-bezier(.5, 0, .75, 0); --lift: 0px; --lift-scale: 1; --dur-mid: 380ms; --dur-slow: 760ms; --texture: url("../img/grain.avif"); --texture-opacity: 0.18; --texture-blend: screen; --shadow-card: 0 0 0 1px var(--rule), 0 20px 44px -28px #000; --shadow-lift: 0 0 0 1px #2A3446, 0 26px 56px -26px #000; --glow: none; --font-display: "Weirdo Display", "Poppins", ui-rounded, system-ui, sans-serif; --font-body: "Weirdo Text", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace; --display-weight: 600; --display-spacing: -0.01em; --display-case: none; --number-font: var(--font-mono); --number-spacing: 0.15em; --number-case: uppercase; --number-colour: var(--accent); --cursor-media: default; /* Tall and narrow. A nook lives in the gap between books, and a square crop makes it look like something it is not. */ --card-ratio: 3 / 4.6; color-scheme: dark; } /* -------------------------------------------------------------------------- 6. NEUTRAL — cart, checkout, account, order emails No world, no motion, no personality in the surface. The copy still carries the voice; the interface does not. A themed checkout is where conversion goes to die. -------------------------------------------------------------------------- */ [data-collection="neutral"] { /* Dark, but deliberately inert. Flashing a white checkout in the middle of a black site reads as a broken page, not as a clean one. What makes this screen calm is the absence of motion, texture and accent drama, not the absence of darkness. */ --paper: #0E1116; --paper-sunk: #141821; --paper-raised: #171B24; --ink: #E8ECF2; --ink-soft: #97A0AF; --ink-faint: #626C7C; --rule: #262C38; /* House blue, lifted. The buy button still belongs to the brand. */ --accent: #5B80FF; --accent-ink: #060A18; --accent-quiet: #161D31; --ok: #4FD8A0; --warn: #E2A02C; --pending: #626C7C; --radius: 6px; --radius-sm: 4px; --radius-pill: 999px; --border: 1px; /* Every duration collapses. Nothing on a checkout screen moves. */ --motion: linear; --motion-exit: linear; --dur-fast: 0ms; --dur-mid: 0ms; --dur-slow: 0ms; --lift: 0px; --lift-scale: 1; --texture: none; --texture-opacity: 0; --shadow-card: 0 0 0 1px var(--rule); --shadow-lift: 0 0 0 1px var(--rule); --glow: none; --font-display: system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace; --display-weight: 600; --display-spacing: 0; --display-case: none; --number-font: var(--font-mono); --number-spacing: 0.04em; --number-colour: var(--ink-soft); --cursor-media: default; --card-ratio: 4 / 5; color-scheme: dark; } /* -------------------------------------------------------------------------- 7. THE DOORS The home page previews all four worlds side by side, so the split is obvious before you click. These classes let a component borrow another world's tokens without the body attribute changing. -------------------------------------------------------------------------- */ .weirdo-skin--weirdos { --paper: #10141F; --ink: #EAEEF7; --ink-soft: #9AA4BC; --rule: #232A3B; --accent: #5B80FF; --radius: 14px; --motion: cubic-bezier(.34, 1.56, .64, 1); --font-display: "Weirdo Display", "Poppins", ui-rounded, system-ui, sans-serif; --display-case: none; --display-weight: 700; } .weirdo-skin--visitors { --paper: #080A0E; --ink: #C8D4E4; --ink-soft: #7A8798; --rule: #1F2833; --accent: #4FD8E8; --radius: 2px; --motion: cubic-bezier(.4, 0, .2, 1); --font-display: "Weirdo Mono", ui-monospace, Menlo, monospace; --display-case: uppercase; --display-weight: 500; } .weirdo-skin--keepers { --paper: #0C1220; --ink: #EFE9E4; --ink-soft: #9AA3B4; --rule: #222C42; --accent: #E23E2C; --radius: 20px; --motion: cubic-bezier(.22, .61, .36, 1); --font-display: "Weirdo Serif", "Iowan Old Style", Georgia, serif; --display-case: none; --display-weight: 400; } .weirdo-skin--beacons { --paper: #000000; --ink: #E8DCC8; --ink-soft: #8F8676; --rule: #1C1A16; --accent: #FFB454; --radius: 24px; --motion: cubic-bezier(.4, 0, .2, 1); --font-display: "Weirdo Display", "Poppins", ui-rounded, system-ui, sans-serif; --display-case: none; --display-weight: 600; } .weirdo-skin--neighbours { --paper: #0A1018; --ink: #D8DEE9; --ink-soft: #6E7A8C; --rule: #1A2230; --accent: #FFC97A; --radius: 4px; --motion: cubic-bezier(.3, .7, .3, 1); --font-display: "Weirdo Display", "Poppins", ui-rounded, system-ui, sans-serif; --display-case: none; --display-weight: 600; } /* -------------------------------------------------------------------------- 5c. THE SPECIMENS bone under museum light Carved skulls and mounts. The other five worlds all use a colour accent. This one deliberately does not: the accent IS the bone, so the object is the only warm thing on the page and nothing competes with the carving. Cold ground, warm subject, hard edges. A specimen case, not a shop. -------------------------------------------------------------------------- */ [data-collection="specimens"] { --paper: #14161A; --paper-sunk: #0E1013; --paper-raised: #1B1E23; --ink: #EDE7DA; --ink-soft: #9A958A; --ink-faint: #63605A; --rule: #262A31; /* Bone. Not a colour, a material. */ --accent: #E8E0CE; --accent-ink: #14161A; --accent-quiet: #2A2C2A; --ok: #9FD86F; --warn: #E0A05A; --pending: #63605A; /* Square. A specimen label is square. */ --radius: 2px; --radius-sm: 2px; --radius-pill: 2px; --border: 1px; /* Slow and even. Nothing here is in a hurry. */ --motion: cubic-bezier(.4, 0, .2, 1); --motion-exit: cubic-bezier(.4, 0, .2, 1); --lift: 0px; --lift-scale: 1; --dur-fast: 240ms; --dur-mid: 480ms; --dur-slow: 900ms; --texture: none; --texture-opacity: 0; --shadow-card: 0 0 0 1px var(--rule); --shadow-lift: 0 0 0 1px var(--accent-quiet), 0 24px 60px -30px #000; --glow: none; --font-display: "Weirdo Display", "Poppins", ui-rounded, system-ui, sans-serif; --font-body: "Weirdo Text", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace; --display-weight: 600; --display-spacing: 0.005em; --display-case: none; --number-font: var(--font-mono); --number-spacing: 0.18em; --number-case: uppercase; --number-colour: var(--accent); --cursor-media: default; /* Wide, because these objects are wide. A 4:5 card decapitates a longhorn. */ --card-ratio: 4 / 3; color-scheme: dark; }