/* ============================================================ lilharper.dev - per-page themes ------------------------------------------------------------ HOW THIS WORKS, AND WHY IT IS ONE FILE INSTEAD OF 27 Every gated page already carries `data-page=""` on . So a theme is one selector setting three custom properties, and the shared component styles below read those properties instead of hardcoding purple. No page markup changes, no per-page stylesheet, and a page with no theme block simply keeps the site default. --k-accent the topic's colour --k-soft the same colour at tint strength, for fills --k-glow for shadows and rings NOTHING HERE IS EXPLICIT. Harper's brief was "a theme designed around the kink, use your judgement but not NSFW". These are colour and texture associations only: rope is hemp and warm, wax is candlelight, primal is forest. Nobody arriving on one of these pages learns anything from the palette that the words do not already say. Loaded only by the pages that need it, after style.css so it wins on equal specificity. Started as Adult Dynamics only; Harley's page uses the same mechanism now, which is why the file is page-themes and not kink-themes. ============================================================ */ /* ============================================================ CALM ROOMS ------------------------------------------------------------ A theme can only be seen if something is not painted on top of it. The sitewide chaos layer (six rifts, the starfield, the static/colour noise, the discharge arcs) is the house style and it earns its place on most of this site. On the comfort pages it is actively working against the writing. Rendered on agere, the warm lamp-lit room the theme builds sat underneath white jagged rift cracks running straight through the body copy, a magenta nebula wash, and a pixel grid, and the paragraph explaining that Mama's real name is kept off the page was hard to read over all of it. Those pages are about safety, softness and being able to put your guard down. Corruption-of-the-machine is the wrong feeling in that room, and low-contrast body text on a page somebody might open while regressed or overwhelmed is the wrong outcome full stop. So: `data-calm="true"` on turns the noise down. Not off everywhere, down here. The starfield stays at a quarter strength so the page still belongs to the same site, the rifts and the static go, and js/chaos-arcs.js and js/glitch.js both check the same attribute and never start. One attribute, four mechanisms, no per-page JS. ============================================================ */ body[data-calm] #chaosRifts { display: none; } body[data-calm] #staticGlitch { display: none; } body[data-calm] #starfield { opacity: 0.25; } /* The stickers stay. They are cute rather than corrupted, which is the distinction this whole block is drawing. */ /* A warm vignette in place of what was removed, so the page reads as deliberately soft rather than as the effects having failed to load. */ body[data-calm] .main::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, var(--k-soft, rgba(255,176,74,0.10)), transparent 70%); } /* ---------- the shared hooks every theme drives ---------- */ [data-page] .prose h2 { color: var(--k-accent, var(--text)); } [data-page] .tag { color: var(--k-accent, var(--purple-bright)); background: var(--k-soft, rgba(168,85,247,0.12)); } [data-page] .value { border-left: 3px solid var(--k-accent, transparent); } [data-page] .value .ico { filter: drop-shadow(0 0 8px var(--k-glow, transparent)); } [data-page] .callout { border-left-color: var(--k-accent, var(--purple-bright)); } [data-page] .pull-quote { border-left-color: var(--k-accent, var(--purple-bright)); color: var(--k-accent, var(--text)); } [data-page] .resource-card:hover { border-color: var(--k-accent, var(--border-strong)); box-shadow: 0 10px 30px var(--k-glow, rgba(168,85,247,0.15)); } [data-page] .glossary-term dt { color: var(--k-accent, var(--purple-bright)); } [data-page] .page-head .eyebrow { color: var(--k-accent, var(--purple-bright)); } /* ---------- rope: hemp, jute, warm natural fibre ---------- */ body[data-page="ropes"] { --k-accent:#d9a05b; --k-soft:rgba(217,160,91,0.13); --k-glow:rgba(217,160,91,0.28); } /* ---------- impact: heat rising under skin ---------- */ body[data-page="impact"] { --k-accent:#ff7a5c; --k-soft:rgba(255,122,92,0.13); --k-glow:rgba(255,122,92,0.28); } /* ---------- wax: candlelight ---------- */ body[data-page="waxplay"] { --k-accent:#ffc46b; --k-soft:rgba(255,196,107,0.14); --k-glow:rgba(255,196,107,0.3); } /* ---------- knife: cold steel ---------- */ body[data-page="knifeplay"] { --k-accent:#b8c6d6; --k-soft:rgba(184,198,214,0.12); --k-glow:rgba(184,198,214,0.26); } /* ---------- biting / marking: deep red ---------- */ body[data-page="biting"] { --k-accent:#e05576; --k-soft:rgba(224,85,118,0.13); --k-glow:rgba(224,85,118,0.28); } /* ---------- breath: pale air ---------- */ body[data-page="breathplay"] { --k-accent:#8fd3e8; --k-soft:rgba(143,211,232,0.12); --k-glow:rgba(143,211,232,0.26); } /* ---------- petplay: collar-tag brass and warmth ---------- */ body[data-page="petplay"] { --k-accent:#f0a860; --k-soft:rgba(240,168,96,0.13); --k-glow:rgba(240,168,96,0.28); } /* ---------- primal: forest floor ---------- */ body[data-page="primal"] { --k-accent:#6fbf73; --k-soft:rgba(111,191,115,0.13); --k-glow:rgba(111,191,115,0.26); } /* ---------- furry: bright, friendly, unserious ---------- */ body[data-page="furry"] { --k-accent:#7fb3ff; --k-soft:rgba(127,179,255,0.13); --k-glow:rgba(127,179,255,0.28); } /* ---------- power exchange: deep authority purple ---------- */ body[data-page="powerexchange"]{ --k-accent:#9d7bff; --k-soft:rgba(157,123,255,0.13); --k-glow:rgba(157,123,255,0.28); } /* ---------- ownership: brass, engraved ---------- */ body[data-page="ownership"] { --k-accent:#d4b483; --k-soft:rgba(212,180,131,0.13); --k-glow:rgba(212,180,131,0.26); } /* ---------- objectification: cool polished stone ---------- */ body[data-page="objectification"]{ --k-accent:#a9b4c2; --k-soft:rgba(169,180,194,0.12); --k-glow:rgba(169,180,194,0.24); } /* ---------- praise: warm gold ---------- */ body[data-page="praise"] { --k-accent:#ffd479; --k-soft:rgba(255,212,121,0.14); --k-glow:rgba(255,212,121,0.3); } /* ---------- humiliation: flushed pink ---------- */ body[data-page="humiliation"] { --k-accent:#ff8fb1; --k-soft:rgba(255,143,177,0.13); --k-glow:rgba(255,143,177,0.28); } /* ---------- CNC: caution amber, because the page is about the brakes ---------- */ body[data-page="cnc"] { --k-accent:#ffb454; --k-soft:rgba(255,180,84,0.13); --k-glow:rgba(255,180,84,0.28); } /* ---------- sadomasochism: dark wine ---------- */ body[data-page="sadomasochism"]{ --k-accent:#c96a8a; --k-soft:rgba(201,106,138,0.13); --k-glow:rgba(201,106,138,0.26); } /* ---------- exhibitionism: stage light ---------- */ body[data-page="exhibitionism"]{ --k-accent:#ffe08a; --k-soft:rgba(255,224,138,0.13); --k-glow:rgba(255,224,138,0.28); } /* ---------- voyeurism: dim room, one lit window ---------- */ body[data-page="voyeurism"] { --k-accent:#7d8fd6; --k-soft:rgba(125,143,214,0.13); --k-glow:rgba(125,143,214,0.26); } /* ---------- group: several lights at once ---------- */ body[data-page="groupplay"] { --k-accent:#ff9ecb; --k-soft:rgba(255,158,203,0.13); --k-glow:rgba(255,158,203,0.28); } /* ---------- auralism: sound, cool and clean ---------- */ body[data-page="auralism"] { --k-accent:#6fe3d2; --k-soft:rgba(111,227,210,0.13); --k-glow:rgba(111,227,210,0.26); } /* ---------- tentacle: deep water ---------- */ body[data-page="tentacle"] { --k-accent:#5fc9c9; --k-soft:rgba(95,201,201,0.13); --k-glow:rgba(95,201,201,0.26); } /* ---------- roleplay: theatre curtain ---------- */ body[data-page="roleplay"] { --k-accent:#c98ae0; --k-soft:rgba(201,138,224,0.13); --k-glow:rgba(201,138,224,0.28); } /* ---------- foot: neutral, understated ---------- */ body[data-page="footfetish"] { --k-accent:#b49ad6; --k-soft:rgba(180,154,214,0.12); --k-glow:rgba(180,154,214,0.24); } /* ---------- bondage: leather and buckle, warmer than rope ---------- */ body[data-page="bondage"] { --k-accent:#c98f6b; --k-soft:rgba(201,143,107,0.13); --k-glow:rgba(201,143,107,0.26); } /* ---------- 24/7: deep, steady, unhurried ---------- */ body[data-page="twentyfourseven"]{ --k-accent:#8f7bd6; --k-soft:rgba(143,123,214,0.13); --k-glow:rgba(143,123,214,0.26); } /* ---------- BDSM hub: the site's own purple, as the parent topic ---------- */ body[data-page="bdsm"] { --k-accent:#a855f7; --k-soft:rgba(168,85,247,0.13); --k-glow:rgba(168,85,247,0.28); } /* ---------- ageplay (DD/lg): soft pink, adjacent to agere but not it ---------- */ body[data-page="ageplay"] { --k-accent:#ff9ede; --k-soft:rgba(255,158,222,0.13); --k-glow:rgba(255,158,222,0.28); } /* ---------- ABDL ---------- */ body[data-page="abdl"] { --k-accent:#8fc7ff; --k-soft:rgba(143,199,255,0.13); --k-glow:rgba(143,199,255,0.26); } /* ============================================================ CG/L - the full skin ------------------------------------------------------------ Harper's most important page, and the one she asked to be skinned "bluey/muffin heeler" across the whole section rather than given a single accent colour like the others. Bluey's palette is the actual reference: the show's warm orange (Bandit), the blue heeler blue, and a cream that reads as daylight rather than as a dark UI. So this page steps further from the site's CRT purple than anything else on the site, on purpose. It is the one page that should feel like a living room in the afternoon. The dark background stays. Going fully cream would break the sidebar, the topbar and every shared component, and the point is a warmer room in the same house, not a different house. ============================================================ */ body[data-page="agere"] { --k-accent: #ffb04a; /* Bandit orange */ --k-soft: rgba(255, 176, 74, 0.14); --k-glow: rgba(255, 176, 74, 0.3); --k-blue: #4a9de8; /* heeler blue */ --k-cream: #ffeccf; } /* Warm the page background towards a lamp-lit room. */ body[data-page="agere"] .page { background: radial-gradient(90% 60% at 12% 0%, rgba(255, 176, 74, 0.10), transparent 62%), radial-gradient(80% 55% at 88% 8%, rgba(74, 157, 232, 0.09), transparent 60%); } body[data-page="agere"] .prose h2 { color: var(--k-accent); } body[data-page="agere"] .prose h3 { color: var(--k-blue); } body[data-page="agere"] .prose strong, body[data-page="agere"] .prose b { color: var(--k-cream); } /* Cards get rounded off and warmed. Bluey's whole visual language is soft corners and flat colour; sharp panels fight it. */ body[data-page="agere"] .value, body[data-page="agere"] .resource-card, body[data-page="agere"] .callout { border-radius: 18px; } body[data-page="agere"] .value { border-left: 3px solid var(--k-blue); background: linear-gradient(180deg, rgba(255, 176, 74, 0.07), rgba(255, 176, 74, 0.02)); } body[data-page="agere"] .value:nth-child(even) { border-left-color: var(--k-accent); } body[data-page="agere"] .callout { border-left: 4px solid var(--k-accent); background: radial-gradient(120% 90% at 0% 0%, rgba(255, 176, 74, 0.12), transparent 60%), var(--panel); } /* Boundary callouts stay visually serious even here. A hard limit rendered as a friendly orange box is the one place this skin would actively work against the writing. */ body[data-page="agere"] .callout-boundary { border-left: 4px solid var(--pink-bright); border-radius: 18px; } body[data-page="agere"] .tag { background: var(--k-soft); color: var(--k-accent); border-color: rgba(255, 176, 74, 0.35); border-radius: 999px; } body[data-page="agere"] .glossary-term dt { color: var(--k-blue); } body[data-page="agere"] .pull-quote { border-left-color: var(--k-accent); color: var(--k-cream); } /* A soft daylight wash along the top of the page head, so the warmth is the first thing you notice rather than something you find halfway down. */ body[data-page="agere"] .page-head { position: relative; } body[data-page="agere"] .page-head::after { content: ""; position: absolute; inset: -20px -30px auto -30px; height: 130px; z-index: -1; pointer-events: none; background: radial-gradient(60% 100% at 20% 0%, rgba(255, 176, 74, 0.16), transparent 70%); } body[data-page="agere"] .page-head h1 .accent { color: var(--k-accent); } @media (prefers-reduced-motion: reduce) { body[data-page="agere"] .value { transition: none; } } /* ============================================================ Harley - the dog page ------------------------------------------------------------ German shepherd and husky, which between them are black-and-tan and ice-blue-and-charcoal. So: a warm tan accent for the shepherd half, a pale husky blue for the cold half, and rounded soft edges because the page is about a dog and there is no reason for it to look severe. Not a kink theme, obviously. It shares this file because it is the same mechanism: three custom properties on , read by the same shared component hooks at the top. ============================================================ */ body[data-page="harley"] { --k-accent: #d9a05b; /* shepherd tan */ --k-soft: rgba(217, 160, 91, 0.14); --k-glow: rgba(217, 160, 91, 0.3); --k-ice: #8fd0e8; /* husky eye */ --k-coat: #f2e3cd; } body[data-page="harley"] .page { background: radial-gradient(85% 55% at 10% 0%, rgba(217, 160, 91, 0.10), transparent 62%), radial-gradient(75% 50% at 90% 10%, rgba(143, 208, 232, 0.09), transparent 60%); } body[data-page="harley"] .prose h2 { color: var(--k-accent); } body[data-page="harley"] .prose h3 { color: var(--k-ice); } body[data-page="harley"] .prose strong, body[data-page="harley"] .prose b { color: var(--k-coat); } body[data-page="harley"] .value, body[data-page="harley"] .resource-card, body[data-page="harley"] .callout { border-radius: 18px; } body[data-page="harley"] .value { border-left: 3px solid var(--k-ice); background: linear-gradient(180deg, rgba(217, 160, 91, 0.07), rgba(217, 160, 91, 0.02)); } body[data-page="harley"] .value:nth-child(even) { border-left-color: var(--k-accent); } body[data-page="harley"] .callout { border-left: 4px solid var(--k-accent); background: radial-gradient(120% 90% at 0% 0%, rgba(217, 160, 91, 0.12), transparent 60%), var(--panel); } body[data-page="harley"] .tag { background: var(--k-soft); color: var(--k-accent); border-color: rgba(217, 160, 91, 0.35); border-radius: 999px; } body[data-page="harley"] .pull-quote { border-left-color: var(--k-accent); color: var(--k-coat); } body[data-page="harley"] .page-head { position: relative; } body[data-page="harley"] .page-head::after { content: ""; position: absolute; inset: -20px -30px auto -30px; height: 130px; z-index: -1; pointer-events: none; background: radial-gradient(60% 100% at 20% 0%, rgba(217, 160, 91, 0.16), transparent 70%); } body[data-page="harley"] .page-head h1 .accent { color: var(--k-accent); } /* Photos of a dog deserve to not be square. */ body[data-page="harley"] .photo-strip img { border-radius: 14px; } /* ---------- help hub: the same amber as its nav button ---------- Matching the button deliberately. Someone who clicked an amber thing should land somewhere amber; a colour that changes on arrival makes people wonder whether they went where they meant to. */ body[data-page="help"] { --k-accent:#ffcc66; --k-soft:rgba(255,204,102,0.14); --k-glow:rgba(255,204,102,0.3); } body[data-page="help"] .page-head h1 .accent { color: var(--k-accent); } body[data-page="help"] .callout-boundary { border-left-color: #ff8a5c; } /* ============================================================ petre -- pet regression ------------------------------------------------------------ Deliberately the softest palette in this file. The page's whole argument is that this is a comfort mechanism and not a kink, and a theme in the same reds and violets as the pages either side of it in the nav would quietly undercut that before a word is read. Moss and blush instead: warm, low-contrast, closer to a blanket than to a dungeon. Shares agere's rounded corners, because these two are siblings and should feel like it. ============================================================ */ body[data-page="petre"] { --k-accent: #9bd4a4; /* moss */ --k-soft: rgba(155, 212, 164, 0.13); --k-glow: rgba(155, 212, 164, 0.28); --k-blush: #f0bcc4; --k-cream: #f6ecdf; } body[data-page="petre"] .page { background: radial-gradient(88% 58% at 15% 0%, rgba(155, 212, 164, 0.09), transparent 62%), radial-gradient(78% 52% at 86% 10%, rgba(240, 188, 196, 0.08), transparent 60%); } body[data-page="petre"] .prose h2 { color: var(--k-accent); } body[data-page="petre"] .prose h3 { color: var(--k-blush); } body[data-page="petre"] .prose strong, body[data-page="petre"] .prose b { color: var(--k-cream); } body[data-page="petre"] .value, body[data-page="petre"] .resource-card, body[data-page="petre"] .callout { border-radius: 18px; } body[data-page="petre"] .value { border-left: 3px solid var(--k-accent); background: linear-gradient(180deg, rgba(155, 212, 164, 0.06), rgba(155, 212, 164, 0.02)); } body[data-page="petre"] .value:nth-child(even) { border-left-color: var(--k-blush); } body[data-page="petre"] .callout { border-left: 4px solid var(--k-accent); background: radial-gradient(120% 90% at 0% 0%, rgba(155, 212, 164, 0.11), transparent 60%), var(--panel); } /* Same exception agere makes, for the same reason: the boundary callouts on this page carry the two hardest lines on it (this is not petplay, and people will try to use the headspace against you). A soft moss box would read as a suggestion. */ body[data-page="petre"] .callout-boundary { border-left: 4px solid var(--pink-bright); border-radius: 18px; }