/* Design tokens of the admin. Every colour, size, radius, shadow and duration the other stylesheets use is defined here once, derived from MyPeptideApp's variables.css. [Phase 1, section 13] Light is the default. Dark applies in two cases, and the two dark blocks at the end of this file must stay identical: - the user chose dark: the server writes data-theme="dark" on - the user follows the system (no data-theme, or no session at all) and the system is dark A user who chose light gets data-theme="light", which the media query excludes. The server decides, so nothing flashes on load and no script is involved. A theme picked in the account menu applies at once through app.js, and every page after that gets it from the server again. Contrast, WCAG 2.2 AA, measured with the relative luminance formula; translucent colours are measured blended over the background named: light dark text on surface 17.74 16.90 text on surface-muted 16.12 15.63 text on surface-selected 16.12 13.88 the current page, an open menu text on canvas-selected 14.33 13.88 the open section, on the canvas text-muted on canvas-hover 6.87 6.65 a row of it under the pointer text on surface-raised 17.74 13.17 the chosen segment text-muted on surface 7.56 7.19 text-subtle on surface-muted 4.87 5.25 its weakest background text on selection 11.84 8.39 over surface-muted, the worst case control-border on surface 3.34 3.75 non-text, 3:1 needed: the outline of a text field or checkbox, not of a dropdown control-border-hover on surface 4.83 5.67 focus on surface-muted 17.99 16.33 ring and focused border, at worst focus against control-border 5.93 4.70 what a field changes on focus primary on surface-muted 17.99 16.33 a checked box in a chosen card on-primary on primary 19.80 18.97 also the tick and the radio dot status text on its background 5.20 9.03 the weakest of the four on-danger on danger-solid 4.83 4.83 on-success on success-solid 3.91 3.91 non-text, 3:1 needed: the check of a link that went live success-solid on surface 3.91 4.72 the green circle itself (D80) panel ink, muted, on the mesh 4.75 5.58 at full violet, the worst case chart-ink on surface 17.74 16.90 the period's line, a funnel stage chart-line on surface 4.42 5.06 decoration: the big charts' current line, whose tooltips and hidden table name every value (D101) chart-prev on surface 1.97 2.74 decoration, as every chart grey series-violet on surface 4.52 6.67 decoration: Compare's fourth post, named on its key and its columns on-picture-mark on picture-mark 3.03 3.03 non-text, 3:1 needed: a poster's mark over a white picture, the worst case device-grey on device-paper 4.74 4.74 the domain in an app's bar the studio draws (D117) device-link on device-alert 3.60 3.60 decoration: the iPhone's own question, drawn as it shows ring steps on surface, weakest 2.11 2.27 decoration: the table beside the ring names every step map steps on surface, weakest 1.60 2.07 decoration: the list beside the map and its tooltips name them tree-line on surface 1.97 2.74 decoration: the lines of a model's page name every node in words tabbar-ink on glass over canvas 16.82 14.77 every tab of the phone's bar tooltip-fg on tooltip-bg 16.98 18.16 a name in the rail platform glyph on its tint 2.71 4.37 decoration, at worst (Telegram, Facebook): the platform is named beside its mark text-subtle is the lowest text colour there is; anything lighter is decoration and never carries text. focus-halo is decoration too: the focused border carries the state. */ :root { color-scheme: light; /* Surfaces, from the page behind everything to the things on it. */ --color-canvas: #F9FAFB; --color-surface: #FFFFFF; --color-surface-muted: #F3F4F6; /* Rows of the navigation, of menus, lists and tables: under the pointer, and the one that is current or open. Grey in both themes. */ --color-surface-hover: #F9FAFB; --color-surface-selected: #F3F4F6; /* The same for rows that sit on the canvas itself, the settings list on a wide screen, where surface-hover would be the canvas again. */ --color-canvas-hover: #F3F4F6; --color-canvas-selected: #E5E7EB; /* What sits raised on a grey track: the chosen option of a segmented control. White in light mode, a lighter grey in dark mode, where the surface would read as a hole in the track. */ --color-surface-raised: #FFFFFF; --color-input: #FFFFFF; --color-overlay: rgba(17, 24, 39, 0.45); /* Behind the record panel, dimmed and not blurred: the list beside it stays readable. [D76] */ --color-overlay-panel: rgba(17, 24, 39, 0.28); /* The tour (D86): the grid of dots behind the pictures of its cards, and the window's edge, which only a dark page needs. Behind it the page is dimmed as behind the record panel, not blurred. */ --color-tour-grid: rgba(17, 24, 39, 0.11); --color-tour-ring: transparent; /* Lines. border separates surfaces and is decoration. control-border outlines text fields and checkboxes, which must be found without guessing: an empty field is nothing but its border, so it meets 3:1; control-border-hover is its darker step under the pointer. border-strong outlines a secondary button and a dropdown, which are found by their text, and a dropdown by its chevron too, and a text or date field among filters, found by its label beside them; border-strong-hover is that field's darker step under the pointer, about two fifths of the way to control-border. */ --color-border: #E5E7EB; --color-border-strong: #D1D5DB; --color-border-strong-hover: #B4B9C2; --color-control-border: #878D98; --color-control-border-hover: #6B7280; --color-text: #111827; --color-text-muted: #4B5563; --color-text-subtle: #646B78; /* Primary action: black in light mode, white in dark mode. */ --color-primary: #0A0A0A; --color-primary-hover: #262626; --color-primary-active: #404040; --color-on-primary: #FFFFFF; /* Focus and selection, in the same black and white as everything else. focus is the keyboard ring and the border of a focused input, focus-halo the soft ring around that input, selection the grey behind selected text, translucent so it works on every surface. Checked checkboxes and radios are primary with on-primary. There is no accent: the violet of the sign in panel stays on the panel. */ --color-focus: #0A0A0A; --color-focus-halo: rgba(10, 10, 10, 0.10); --color-selection: rgba(10, 10, 10, 0.14); /* Status tones: badges, alerts, flash messages, field errors and destructive actions, the danger button and the Sign out rows. */ --color-success-text: #067647; --color-success-bg: #ECFDF3; --color-success-border: #ABEFC6; --color-warning-text: #B54708; --color-warning-bg: #FFFAEB; --color-warning-border: #FEDF89; --color-danger-text: #B42318; --color-danger-bg: #FEF3F2; --color-danger-border: #FECDCA; --color-info-text: #175CD3; --color-info-bg: #EFF8FF; --color-info-border: #B2DDFF; --color-danger-solid: #D92D20; --color-danger-solid-hover: #B42318; --color-on-danger: #FFFFFF; /* The one solid green: the check of a link that went live, the 600 of the green scale the success tokens come from, the same in both themes. Colour means status, and this is the one success the admin celebrates. [D80, point 4] */ --color-success-solid: #079455; --color-on-success: #FFFFFF; /* The tones of what happens to an account (D107): the drawings of Add event on its page and History's marks, each in the tone of what it records: event-status amber, a change of status; event-link blue, a link set in the bio and a link going live; event-verification green, a verification; event-danger red, what went wrong, such as a ban or a failed verification. Decoration: every drawing and mark stands beside its words. [Phase 4, section 8.8; D107, points 2, 5 and 8] */ --color-event-status: #E8890C; --color-event-link: #2F6FED; --color-event-verification: #1F9D55; --color-event-danger: #E5484D; /* Compare's fourth post (D113, 6): its posts each in a tone that names it, on its key, its line and its ring alone, in the order chosen: the chart's blue, event-status's amber, event-verification's green, then this violet. Never on a figure. [Phase 5, M12.9] */ --color-series-violet: #7A5AF8; /* The platforms' marks (components.css, "Platform marks"): a brand's colour, so an account's platform is told at a glance in the black and white of everything else. A soft tint of the brand for the box, a step stronger for its border, the glyph in the brand's colour, a little deeper where the brand's own is too light on its tint (OnlyFans' blue), never a solid fill. Snapchat's yellow cannot be read as a glyph on light, so its box takes the yellow and the glyph the ink. Black brands (TikTok, X, Threads) and the platforms without a mark keep the neutral box. In dark mode the tint is the brand at a low alpha over the surface, and the glyph a little lighter where the brand's own is too dark there. Decoration: the platform is named in words beside its mark (decided on 14 October 2026, after the agency's first feedback). */ --color-platform-instagram: #E1306C; --color-platform-instagram-bg: #FDECF2; --color-platform-instagram-border: #F8CFDF; --color-platform-onlyfans: #0098D6; --color-platform-onlyfans-bg: #EAF7FD; --color-platform-onlyfans-border: #C2E7F8; --color-platform-facebook: #0866FF; --color-platform-facebook-bg: #E9F1FF; --color-platform-facebook-border: #C6DAFF; --color-platform-reddit: #FF4500; --color-platform-reddit-bg: #FFEDE5; --color-platform-reddit-border: #FFCDB8; --color-platform-youtube: #FF0000; --color-platform-youtube-bg: #FFEBEB; --color-platform-youtube-border: #FFC7C7; --color-platform-telegram: #229ED9; --color-platform-telegram-bg: #E8F5FC; --color-platform-telegram-border: #BEE3F5; --color-platform-snapchat: #111827; --color-platform-snapchat-bg: #FFFBC7; --color-platform-snapchat-border: #F0E38A; /* The drawings of Analytics, in the same black, white and grey. chart-ink draws the period, chart-prev the period before and the small lines of the tiles, chart-grid the hairlines, chart-wash the area under the line, chart-fade the top of the area that fades downwards under the Dashboard's bare chart (a little stronger in dark, where a white tint on near black reads fainter), chart-flow the funnel's flows. The Instagram tab's chart over time (LineChart in a card) draws its current period in one blue of the ring's family (ring-5): chart-line its line, its end and crosshair points, its legend and tooltip keys, chart-line-wash its area (a little stronger in dark); the period before, the Dashboard's bare chart, every other drawing and every sparkline keep the greys (D101). The reads of Instagram add four: chart-gap the grey band where no read came, chart-night the light band of the reads' night pause, chart-other the other reels' plays stacked on a reel's own, and chart-visits the area of an account's visits under a reel's. [Phase 5, sections 1.7 and 9.3] heat-0 to heat-5 are the six greys of the heatmap, from fewer to more. The ring that splits the visits is drawn in colour: one family of blues whose steps alternate light and dark, so neighbours stay apart, and ring-other for all that folds into Other. The map by country takes the same family in order instead, map-1 the fewest visits to map-5 the most, over the grey dots of map-land (D82). Every drawing repeats its numbers as text, so these colours are decoration; a loss and a change use the status texts. [Phase 3, section 4.8] */ --color-chart-ink: #111827; --color-chart-prev: #B4B9C2; --color-chart-grid: #EEF0F3; --color-chart-wash: rgba(17, 24, 39, 0.07); --color-chart-fade: rgba(17, 24, 39, 0.12); --color-chart-line: #2A78D6; --color-chart-line-wash: rgba(42, 120, 214, 0.09); --color-chart-flow: rgba(17, 24, 39, 0.11); --color-chart-gap: rgba(100, 107, 120, 0.22); --color-chart-night: rgba(17, 24, 39, 0.035); --color-chart-other: #CDD1D7; --color-chart-visits: rgba(17, 24, 39, 0.09); /* The lines of a model's page in Models & Accounts, solid for how her accounts lead to OnlyFans and dashed for what sits on a phone: the grey of chart-prev, decoration like it. [Phase 4, sections 8.4 and 8.18; D95] */ --color-tree-line: #B4B9C2; /* The ghosts of the empty states: the shape of what a card will show, drawn fainter than any chart. ghost fills a placeholder, ghost-strong a bar and a dot on it, ghost-line the line of a ghost chart and ghost-fade the top of the area under it. Decoration, as every chart grey: the words over a ghost say what is missing. [D77] */ --color-ghost: #F1F2F5; --color-ghost-strong: #E7E9ED; --color-ghost-line: #DCDFE4; --color-ghost-fade: rgba(17, 24, 39, 0.035); --color-heat-0: #F3F4F6; --color-heat-1: #DADDE2; --color-heat-2: #B6BBC4; --color-heat-3: #8B919C; --color-heat-4: #555B67; --color-heat-5: #111827; --color-ring-1: #1C5CAB; --color-ring-2: #86B6EF; --color-ring-3: #0D366B; --color-ring-4: #5598E7; --color-ring-5: #2A78D6; --color-ring-other: #D1D5DB; --color-map-land: #E1E4E8; --color-map-1: #B3CFF3; --color-map-2: #7FADEB; --color-map-3: #4A8BE0; --color-map-4: #2268C6; --color-map-5: #0F4691; /* The drawn portraits that stand for a model without a picture (components.css, .portrait-1 to .portrait-10): ten looks, each the top and the bottom of its room, its light, the skin and what is worn. Like a photo they look the same in both themes, so the dark blocks leave them out, and like a picture they are decoration beside the model's name, so no contrast is measured. */ --portrait-sunset-top: #F0A36B; --portrait-sunset-bottom: #6E4A6B; --portrait-sunset-light: rgba(255, 226, 170, 0.9); --portrait-sunset-skin: #B9785C; --portrait-sunset-wear: #3C2430; --portrait-beach-top: #9CC7E4; --portrait-beach-bottom: #E8D2AE; --portrait-beach-light: rgba(255, 250, 235, 0.85); --portrait-beach-skin: #D7A07C; --portrait-beach-wear: #2B2F3A; --portrait-room-top: #E7DCCD; --portrait-room-bottom: #B9A48E; --portrait-room-light: rgba(255, 214, 150, 0.75); --portrait-room-skin: #E2B394; --portrait-room-wear: #F3EEE8; --portrait-studio-top: #F2E6E9; --portrait-studio-bottom: #D8C3C9; --portrait-studio-light: rgba(255, 255, 255, 0.9); --portrait-studio-skin: #E5BBA0; --portrait-studio-wear: #B23A48; --portrait-night-top: #1D2233; --portrait-night-bottom: #3B2F45; --portrait-night-light: rgba(255, 92, 170, 0.55); --portrait-night-skin: #C98E78; --portrait-night-wear: #0E0F14; --portrait-mirror-top: #EEF0F2; --portrait-mirror-bottom: #C9CDD3; --portrait-mirror-light: rgba(255, 255, 255, 0.9); --portrait-mirror-skin: #E3B697; --portrait-mirror-wear: #1A1A1D; --portrait-gym-top: #A8ACB2; --portrait-gym-bottom: #5F646B; --portrait-gym-light: rgba(255, 255, 255, 0.6); --portrait-gym-skin: #D39E80; --portrait-gym-wear: #16171A; --portrait-pool-top: #7FD3D6; --portrait-pool-bottom: #2F8FA6; --portrait-pool-light: rgba(255, 255, 255, 0.7); --portrait-pool-skin: #D9A07E; --portrait-pool-wear: #D7263D; --portrait-car-top: #2A2C31; --portrait-car-bottom: #4D4A47; --portrait-car-light: rgba(255, 240, 210, 0.7); --portrait-car-skin: #E0AC8C; --portrait-car-wear: #B7B9BD; --portrait-street-top: #C9D2DA; --portrait-street-bottom: #77706A; --portrait-street-light: rgba(255, 255, 255, 0.6); --portrait-street-skin: #D6A387; --portrait-street-wear: #7B2F2F; /* The pictures of AI Copilot's four analyses (copilot.css): for each, the dark ground of its mesh and three glows of its colour, violet for the content, blue for the funnel, amber for the health of the accounts and red for the bans. Then what the motif over a mesh is made of: frosted glass, stronger for what stands in front, its rim, the shine along its top and its shadow; the figures in the reels; the white of a line, a mark or the funnel's end, and its glow; and how strong the grain over all of it is. Like the portraits they look the same in both themes, so the dark blocks leave them out, and they are decoration: each analysis' name stands under its picture. [D78] */ --copilot-content-base: #100C26; --copilot-content-1: rgba(112, 44, 230, 0.95); --copilot-content-2: rgba(200, 44, 214, 0.92); --copilot-content-3: rgba(76, 62, 214, 0.70); --copilot-funnel-base: #06112A; --copilot-funnel-1: rgba(32, 92, 230, 0.95); --copilot-funnel-2: rgba(64, 196, 255, 0.78); --copilot-funnel-3: rgba(40, 72, 190, 0.55); --copilot-health-base: #1A1004; --copilot-health-1: rgba(214, 128, 20, 0.82); --copilot-health-2: rgba(252, 208, 120, 0.82); --copilot-health-3: rgba(150, 80, 10, 0.60); --copilot-bans-base: #1A0708; --copilot-bans-1: rgba(222, 40, 40, 0.92); --copilot-bans-2: rgba(250, 120, 30, 0.78); --copilot-bans-3: rgba(120, 24, 32, 0.80); --copilot-glass: rgba(255, 255, 255, 0.13); --copilot-glass-front: rgba(255, 255, 255, 0.22); --copilot-glass-rim: rgba(255, 255, 255, 0.34); --copilot-glass-shine: rgba(255, 255, 255, 0.22); --copilot-glass-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.45); --copilot-figure: rgba(255, 255, 255, 0.26); --copilot-figure-front: rgba(255, 255, 255, 0.34); --copilot-notch: rgba(255, 255, 255, 0.45); --copilot-ink: #FFFFFF; --copilot-glow: rgba(255, 255, 255, 0.55); --copilot-grain-opacity: 0.5; /* The pictures of the tour (D86, tour.css): the link page on a phone as fans see it, its frame, screen, ink, quiet button, shadow and the blue of the verified badge; and AI Copilot's field on its picture, white with the ink and the round black arrow of the field on AI Copilot's page. Like the portraits they look the same in both themes, so the dark blocks leave them out, and they are decoration: each card says in words what it shows. */ --tour-phone-frame: #0A0A0A; --tour-phone-screen: #0E0E10; --tour-phone-ink: #FFFFFF; --tour-phone-quiet: rgba(255, 255, 255, 0.14); --tour-phone-shadow: 0 22px 40px -16px rgba(16, 24, 40, 0.45); --tour-verified: #3B82F6; --tour-ask-bg: #FFFFFF; --tour-ask-ink: #111827; --tour-ask-send: #0A0A0A; --tour-ask-shadow: 0 18px 40px -14px rgba(10, 4, 40, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.40); /* Images in a theme colour. A background image cannot use currentColor, so each theme carries its own copy: the chevron of a select in text-subtle, and the tick of a checked box in on-primary, white on black in light mode and black on white in dark mode. */ --image-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646B78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --image-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); /* The ramp the welcome's word is drawn through, a filter of the word itself (partials/tour/word.php): a navy core on a light card, a brighter blue one on a dark card, where navy would vanish. [D86] */ --image-tour-heat: url("#tour-heat-light"); /* The sign in panel. Its mesh and ink belong to the theme because the panel is the one large area of colour in the whole interface. */ --panel-base: #F6F4FE; --panel-light: rgba(255, 255, 255, 0.92); --panel-violet-1: rgba(108, 92, 224, 0.56); --panel-violet-2: rgba(134, 110, 240, 0.38); --panel-violet-3: rgba(92, 76, 214, 0.36); --panel-ink: #171326; --panel-ink-muted: #3D3752; --panel-mark-bg: #171326; --panel-mark-fg: #FBFAFF; --panel-grain-opacity: 0.22; --panel-grain-blend: overlay; /* Shadows are soft and few. Dark mode keeps the names with more opacity, because a light shadow disappears on a dark canvas. */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, 0.22); --shadow-primary: 0 10px 22px -12px rgba(17, 24, 39, 0.75), 0 1px 2px rgba(17, 24, 39, 0.10); /* A window over the page, and a sheet from the bottom of a phone's screen, whose shadow falls upwards. [D73] */ --shadow-dialog: 0 32px 64px -16px rgba(16, 24, 40, 0.30), 0 2px 6px rgba(16, 24, 40, 0.06); --shadow-sheet: 0 -16px 48px -16px rgba(16, 24, 40, 0.28); /* The record panel at the right edge, whose shadow falls to the left. [D76] */ --shadow-panel: -24px 0 48px -16px rgba(16, 24, 40, 0.24); /* AI Copilot's field to ask, lifted off the page, a little more while it is used. [D78] */ --shadow-ask: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 32px -14px rgba(16, 24, 40, 0.16); --shadow-ask-focus: 0 1px 2px rgba(16, 24, 40, 0.05), 0 18px 40px -14px rgba(16, 24, 40, 0.22); /* The cards in the tour's pictures, and the sidebar entry it lifts. */ --shadow-tour-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -12px rgba(16, 24, 40, 0.16); --shadow-tour-spot: 0 8px 24px -6px rgba(16, 24, 40, 0.28); /* A reel's cover, everywhere (D101): no frame, a hairline ring of cover-ring and a soft shadow, as a photo lies on the page; the large cover of a reel's page a little more lifted. */ --color-cover-ring: rgba(16, 24, 40, 0.08); --shadow-cover: 0 1px 2px rgba(16, 24, 40, 0.16); --shadow-cover-lg: 0 10px 24px -8px rgba(16, 24, 40, 0.16); /* A mark that lies on a reel's picture, the same in either theme, since the picture has none: a post's poster's external-link mark, white on black at 42 percent (Phase 5, M12.3). */ --color-picture-mark: rgba(0, 0, 0, 0.42); --color-on-picture-mark: #FFFFFF; /* The phone the link page studio draws around the page (D117), the same in either theme, since it draws a device and not the admin: its body, the light of an app's bar and of where a fan arrives, the text on that light and its grey, and the iPhone's own question, its ground and its blue. */ --color-device: #0B0B0C; --color-device-paper: #FFFFFF; --color-device-ink: #000000; --color-device-grey: #737373; --color-device-alert: #F2F2F7; --color-device-link: #007AFF; /* Type. Inter for text, Instrument Sans for headings, JetBrains Mono for identifiers. One scale; inputs never go below --text-md where a finger may use them, because a phone zooms into any field with a smaller font. */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-display: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 */ --text-base: 0.875rem; /* 14 */ --text-md: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --leading-tight: 1.2; --leading-normal: 1.55; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; /* A 4 pixel spacing scale. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Two radii, and two exceptions, both MyPeptideApp's: the sign in panel keeps its 24, because at its size a 12 pixel corner reads as a sharp card, and the settings dialog of a wide screen, a window rather than a card, keeps its 16. */ --radius-sm: 8px; --radius-md: 12px; --radius-full: 9999px; --radius-panel: 24px; --radius-dialog: 16px; /* Controls are 44 pixels tall, the smallest target a thumb hits reliably. Small buttons shrink only where the pointer is precise, and so do the fields and the buttons of a window, to 40 (D101). */ --control-height: 44px; --control-height-md: 40px; --control-height-sm: 36px; /* The sidebar, and the rail of icons it folds into. [D74] */ --sidebar-width: 244px; --rail-width: 60px; --content-max: 1120px; --gutter: 16px; /* The search panel of Models & Accounts over the page under it. [Phase 4, section 8.13] On a phone, from the page up: the title that shows once the page is scrolled, the search that covers the page, the tab bar and its search field over it. The sidebar of a wider screen stands above all of the page. [D74] */ --z-panel: 50; --z-phone-top: 60; /* A page on its way: its cover over the content column, above the phone's small title, under its search and its bar. [D110] */ --z-page-cover: 65; --z-phone-search: 70; --z-tabbar: 80; --z-sidebar: 200; /* How much of a phone's screen its keyboard covers, which lifts the tab bar's search field with it; app.js sets it while it is open. [D74] */ --keyboard: 0px; /* A page's cover taken over from the page before (D110): how long it still holds, where its arc had turned and, for another view of the page, where it begins; wait.js sets them on a page that came while the one before was covered. */ --arriving-hold: 0ms; --arriving-turn: 0ms; --arriving-top: 0px; /* The settings dialog of a wide screen, above the sidebar. The confirmation dialog opens in the browser's top layer, above it. */ --z-dialog: 300; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* A sheet's slide, fast at first and settling, as a phone's own. */ --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); --duration-fast: 120ms; --duration-normal: 220ms; /* A filter row's grey pill gliding to the picture or period chosen, across the page load (D92), and a page of its filters coming in. */ --duration-glide: 240ms; /* How much the page behind a window blurs: the dialogs of a form and the settings window alike. [D73] */ --backdrop-blur: 8px; /* The glass of what floats over a page on a phone, after iOS 26: the tab bar, its search button and a page's round way back. A clear tint over the blurred page, a rim of light brighter top left and bottom right, a glow at the thick edge and a wide soft shadow. tabbar-ink draws every tab, open or not, as Apple does: the open one shows by its filled icon and by the lens behind it. While a tab is held the lens lifts into a clear drop with a light ring, a glow and, faintly, the drop-iris rainbow at its rim. The glass is decoration; the ink on it is measured over its weakest background, the page's canvas through the tint. [D74] */ --glass-bg: rgba(255, 255, 255, 0.74); --glass-tint: rgba(255, 255, 255, 0.50); --glass-rim: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 26%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.35) 78%, rgba(255, 255, 255, 0.95) 100%); --glass-edge: rgba(0, 0, 0, 0.05); --glass-inner: inset 0 0 10px rgba(255, 255, 255, 0.55), inset 0 1px 0.5px rgba(255, 255, 255, 0.9); --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05); --tabbar-ink: #1C1C1E; --tabbar-ink-open: #000000; --tabbar-lens: rgba(0, 0, 0, 0.065); --drop-bg: rgba(255, 255, 255, 0.50); --drop-ring: rgba(255, 255, 255, 0.95); --drop-glow: rgba(255, 255, 255, 0.80); --drop-shadow: 0 10px 26px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.06); --drop-iris-opacity: 0.6; --drop-iris: conic-gradient(from 210deg, rgba(255, 128, 200, 0.9), rgba(128, 190, 255, 0.9), rgba(140, 240, 200, 0.9), rgba(255, 226, 128, 0.9), rgba(255, 128, 200, 0.9)); /* The lens settling on a tab, with a little spring. */ --ease-lens: cubic-bezier(0.34, 1.32, 0.5, 1); /* The names of the rail's icons on hover: dark on light, light on dark. */ --color-tooltip-bg: #111827; --color-tooltip-fg: #F9FAFB; } @media (pointer: coarse) { :root { --control-height-md: 44px; --control-height-sm: 44px; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-canvas: #0A0A0A; --color-surface: #141414; --color-surface-muted: #1C1C1C; --color-surface-hover: #1C1C1C; --color-surface-selected: #262626; --color-canvas-hover: #1C1C1C; --color-canvas-selected: #262626; --color-surface-raised: #2A2A2A; --color-input: #0F0F0F; --color-overlay: rgba(0, 0, 0, 0.65); --color-overlay-panel: rgba(0, 0, 0, 0.55); --color-tour-grid: rgba(255, 255, 255, 0.08); --color-tour-ring: rgba(255, 255, 255, 0.08); --color-border: #262626; --color-border-strong: #333333; --color-border-strong-hover: #4B4B52; --color-control-border: #707078; --color-control-border-hover: #8E8E97; --color-text: #F5F5F5; --color-text-muted: #A1A1AA; --color-text-subtle: #8E8E97; --color-primary: #FAFAFA; --color-primary-hover: #E5E5E5; --color-primary-active: #D4D4D4; --color-on-primary: #0A0A0A; --color-focus: #FAFAFA; --color-focus-halo: rgba(250, 250, 250, 0.14); --color-selection: rgba(250, 250, 250, 0.20); --color-success-text: #75E0A7; --color-success-bg: #0B2519; --color-success-border: #11472F; --color-warning-text: #FEC84B; --color-warning-bg: #2A1D07; --color-warning-border: #5E3F0B; --color-danger-text: #FDA29B; --color-danger-bg: #2D110E; --color-danger-border: #6A1F17; --color-info-text: #84CAFF; --color-info-bg: #0B2037; --color-info-border: #17406E; --color-danger-solid: #D92D20; --color-danger-solid-hover: #B42318; --color-on-danger: #FFFFFF; --color-success-solid: #079455; --color-on-success: #FFFFFF; --color-event-status: #F5B454; --color-event-link: #7CB4FF; --color-event-verification: #5FD08A; --color-event-danger: #FF6B6B; --color-series-violet: #A48AFB; --color-platform-instagram: #EC4C83; --color-platform-instagram-bg: rgba(225, 48, 108, 0.16); --color-platform-instagram-border: rgba(225, 48, 108, 0.32); --color-platform-onlyfans: #00AFF0; --color-platform-onlyfans-bg: rgba(0, 175, 240, 0.14); --color-platform-onlyfans-border: rgba(0, 175, 240, 0.30); --color-platform-facebook: #3D82FF; --color-platform-facebook-bg: rgba(8, 102, 255, 0.18); --color-platform-facebook-border: rgba(8, 102, 255, 0.36); --color-platform-reddit: #FF4500; --color-platform-reddit-bg: rgba(255, 69, 0, 0.15); --color-platform-reddit-border: rgba(255, 69, 0, 0.32); --color-platform-youtube: #FF3B3B; --color-platform-youtube-bg: rgba(255, 0, 0, 0.16); --color-platform-youtube-border: rgba(255, 0, 0, 0.30); --color-platform-telegram: #26A5E4; --color-platform-telegram-bg: rgba(38, 165, 228, 0.15); --color-platform-telegram-border: rgba(38, 165, 228, 0.32); --color-platform-snapchat: #FFFC00; --color-platform-snapchat-bg: rgba(255, 252, 0, 0.12); --color-platform-snapchat-border: rgba(255, 252, 0, 0.26); --color-chart-ink: #F5F5F5; --color-chart-prev: #5B5B64; --color-chart-grid: #232326; --color-chart-wash: rgba(245, 245, 245, 0.07); --color-chart-fade: rgba(245, 245, 245, 0.16); --color-chart-line: #3987E5; --color-chart-line-wash: rgba(57, 135, 229, 0.16); --color-chart-flow: rgba(245, 245, 245, 0.11); --color-chart-gap: rgba(142, 142, 151, 0.24); --color-chart-night: rgba(245, 245, 245, 0.05); --color-chart-other: #46464E; --color-chart-visits: rgba(245, 245, 245, 0.1); --color-tree-line: #5B5B64; --color-ghost: #1D1D20; --color-ghost-strong: #252529; --color-ghost-line: #2F2F35; --color-ghost-fade: rgba(245, 245, 245, 0.035); --color-heat-0: #1C1C1C; --color-heat-1: #2C2C31; --color-heat-2: #46464E; --color-heat-3: #6C6C76; --color-heat-4: #A3A3AC; --color-heat-5: #F5F5F5; --color-ring-1: #6DA7EC; --color-ring-2: #184F95; --color-ring-3: #9EC5F4; --color-ring-4: #256ABF; --color-ring-5: #3987E5; --color-ring-other: #46464E; --color-map-land: #303036; --color-map-1: #1F4A82; --color-map-2: #2A64AE; --color-map-3: #3D86DF; --color-map-4: #74ABEE; --color-map-5: #B5D3F7; --image-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --image-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --image-tour-heat: url("#tour-heat-dark"); --panel-base: #0A0912; --panel-light: rgba(180, 166, 255, 0.13); --panel-violet-1: rgba(124, 106, 240, 0.40); --panel-violet-2: rgba(150, 118, 246, 0.24); --panel-violet-3: rgba(108, 92, 224, 0.22); --panel-ink: #F3F1FA; --panel-ink-muted: #B6B0CC; --panel-mark-bg: rgba(255, 255, 255, 0.92); --panel-mark-fg: #0C0A13; --panel-grain-opacity: 0.16; --panel-grain-blend: soft-light; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7); --shadow-primary: 0 10px 24px -14px rgba(255, 255, 255, 0.35); --shadow-dialog: 0 32px 64px -16px rgba(0, 0, 0, 0.80), 0 2px 6px rgba(0, 0, 0, 0.40); --shadow-sheet: 0 -16px 48px -16px rgba(0, 0, 0, 0.70); --shadow-panel: -24px 0 48px -16px rgba(0, 0, 0, 0.70); --shadow-ask: 0 1px 2px rgba(0, 0, 0, 0.50), 0 16px 36px -14px rgba(0, 0, 0, 0.80); --shadow-ask-focus: 0 1px 2px rgba(0, 0, 0, 0.50), 0 20px 44px -14px rgba(0, 0, 0, 0.90); --shadow-tour-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 12px 28px -12px rgba(0, 0, 0, 0.70); --shadow-tour-spot: 0 8px 24px -6px rgba(0, 0, 0, 0.70); --color-cover-ring: rgba(255, 255, 255, 0.1); --shadow-cover: 0 1px 2px rgba(0, 0, 0, 0.55); --shadow-cover-lg: 0 10px 24px -8px rgba(0, 0, 0, 0.55); --color-picture-mark: rgba(0, 0, 0, 0.42); --color-on-picture-mark: #FFFFFF; --color-device: #0B0B0C; --color-device-paper: #FFFFFF; --color-device-ink: #000000; --color-device-grey: #737373; --color-device-alert: #F2F2F7; --color-device-link: #007AFF; --glass-bg: rgba(30, 30, 32, 0.58); --glass-tint: rgba(255, 255, 255, 0.04); --glass-rim: linear-gradient(150deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0.10) 78%, rgba(255, 255, 255, 0.30) 100%); --glass-edge: rgba(255, 255, 255, 0.08); --glass-inner: inset 0 0 12px rgba(255, 255, 255, 0.05), inset 0 1px 0.5px rgba(255, 255, 255, 0.12); --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.40); --tabbar-ink: #F2F2F7; --tabbar-ink-open: #FFFFFF; --tabbar-lens: rgba(255, 255, 255, 0.13); --drop-bg: rgba(255, 255, 255, 0.10); --drop-ring: rgba(255, 255, 255, 0.40); --drop-glow: rgba(255, 255, 255, 0.12); --drop-shadow: 0 10px 26px rgba(0, 0, 0, 0.60), 0 1px 3px rgba(0, 0, 0, 0.40); --drop-iris-opacity: 0.45; --color-tooltip-bg: #F5F5F5; --color-tooltip-fg: #0A0A0A; } } :root[data-theme="dark"] { color-scheme: dark; --color-canvas: #0A0A0A; --color-surface: #141414; --color-surface-muted: #1C1C1C; --color-surface-hover: #1C1C1C; --color-surface-selected: #262626; --color-canvas-hover: #1C1C1C; --color-canvas-selected: #262626; --color-surface-raised: #2A2A2A; --color-input: #0F0F0F; --color-overlay: rgba(0, 0, 0, 0.65); --color-overlay-panel: rgba(0, 0, 0, 0.55); --color-tour-grid: rgba(255, 255, 255, 0.08); --color-tour-ring: rgba(255, 255, 255, 0.08); --color-border: #262626; --color-border-strong: #333333; --color-border-strong-hover: #4B4B52; --color-control-border: #707078; --color-control-border-hover: #8E8E97; --color-text: #F5F5F5; --color-text-muted: #A1A1AA; --color-text-subtle: #8E8E97; --color-primary: #FAFAFA; --color-primary-hover: #E5E5E5; --color-primary-active: #D4D4D4; --color-on-primary: #0A0A0A; --color-focus: #FAFAFA; --color-focus-halo: rgba(250, 250, 250, 0.14); --color-selection: rgba(250, 250, 250, 0.20); --color-success-text: #75E0A7; --color-success-bg: #0B2519; --color-success-border: #11472F; --color-warning-text: #FEC84B; --color-warning-bg: #2A1D07; --color-warning-border: #5E3F0B; --color-danger-text: #FDA29B; --color-danger-bg: #2D110E; --color-danger-border: #6A1F17; --color-info-text: #84CAFF; --color-info-bg: #0B2037; --color-info-border: #17406E; --color-danger-solid: #D92D20; --color-danger-solid-hover: #B42318; --color-on-danger: #FFFFFF; --color-success-solid: #079455; --color-on-success: #FFFFFF; --color-event-status: #F5B454; --color-event-link: #7CB4FF; --color-event-verification: #5FD08A; --color-event-danger: #FF6B6B; --color-series-violet: #A48AFB; --color-platform-instagram: #EC4C83; --color-platform-instagram-bg: rgba(225, 48, 108, 0.16); --color-platform-instagram-border: rgba(225, 48, 108, 0.32); --color-platform-onlyfans: #00AFF0; --color-platform-onlyfans-bg: rgba(0, 175, 240, 0.14); --color-platform-onlyfans-border: rgba(0, 175, 240, 0.30); --color-platform-facebook: #3D82FF; --color-platform-facebook-bg: rgba(8, 102, 255, 0.18); --color-platform-facebook-border: rgba(8, 102, 255, 0.36); --color-platform-reddit: #FF4500; --color-platform-reddit-bg: rgba(255, 69, 0, 0.15); --color-platform-reddit-border: rgba(255, 69, 0, 0.32); --color-platform-youtube: #FF3B3B; --color-platform-youtube-bg: rgba(255, 0, 0, 0.16); --color-platform-youtube-border: rgba(255, 0, 0, 0.30); --color-platform-telegram: #26A5E4; --color-platform-telegram-bg: rgba(38, 165, 228, 0.15); --color-platform-telegram-border: rgba(38, 165, 228, 0.32); --color-platform-snapchat: #FFFC00; --color-platform-snapchat-bg: rgba(255, 252, 0, 0.12); --color-platform-snapchat-border: rgba(255, 252, 0, 0.26); --color-chart-ink: #F5F5F5; --color-chart-prev: #5B5B64; --color-chart-grid: #232326; --color-chart-wash: rgba(245, 245, 245, 0.07); --color-chart-fade: rgba(245, 245, 245, 0.16); --color-chart-line: #3987E5; --color-chart-line-wash: rgba(57, 135, 229, 0.16); --color-chart-flow: rgba(245, 245, 245, 0.11); --color-chart-gap: rgba(142, 142, 151, 0.24); --color-chart-night: rgba(245, 245, 245, 0.05); --color-chart-other: #46464E; --color-chart-visits: rgba(245, 245, 245, 0.1); --color-tree-line: #5B5B64; --color-ghost: #1D1D20; --color-ghost-strong: #252529; --color-ghost-line: #2F2F35; --color-ghost-fade: rgba(245, 245, 245, 0.035); --color-heat-0: #1C1C1C; --color-heat-1: #2C2C31; --color-heat-2: #46464E; --color-heat-3: #6C6C76; --color-heat-4: #A3A3AC; --color-heat-5: #F5F5F5; --color-ring-1: #6DA7EC; --color-ring-2: #184F95; --color-ring-3: #9EC5F4; --color-ring-4: #256ABF; --color-ring-5: #3987E5; --color-ring-other: #46464E; --color-map-land: #303036; --color-map-1: #1F4A82; --color-map-2: #2A64AE; --color-map-3: #3D86DF; --color-map-4: #74ABEE; --color-map-5: #B5D3F7; --image-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --image-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --image-tour-heat: url("#tour-heat-dark"); --panel-base: #0A0912; --panel-light: rgba(180, 166, 255, 0.13); --panel-violet-1: rgba(124, 106, 240, 0.40); --panel-violet-2: rgba(150, 118, 246, 0.24); --panel-violet-3: rgba(108, 92, 224, 0.22); --panel-ink: #F3F1FA; --panel-ink-muted: #B6B0CC; --panel-mark-bg: rgba(255, 255, 255, 0.92); --panel-mark-fg: #0C0A13; --panel-grain-opacity: 0.16; --panel-grain-blend: soft-light; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7); --shadow-primary: 0 10px 24px -14px rgba(255, 255, 255, 0.35); --shadow-dialog: 0 32px 64px -16px rgba(0, 0, 0, 0.80), 0 2px 6px rgba(0, 0, 0, 0.40); --shadow-sheet: 0 -16px 48px -16px rgba(0, 0, 0, 0.70); --shadow-panel: -24px 0 48px -16px rgba(0, 0, 0, 0.70); --shadow-ask: 0 1px 2px rgba(0, 0, 0, 0.50), 0 16px 36px -14px rgba(0, 0, 0, 0.80); --shadow-ask-focus: 0 1px 2px rgba(0, 0, 0, 0.50), 0 20px 44px -14px rgba(0, 0, 0, 0.90); --shadow-tour-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 12px 28px -12px rgba(0, 0, 0, 0.70); --shadow-tour-spot: 0 8px 24px -6px rgba(0, 0, 0, 0.70); --color-cover-ring: rgba(255, 255, 255, 0.1); --shadow-cover: 0 1px 2px rgba(0, 0, 0, 0.55); --shadow-cover-lg: 0 10px 24px -8px rgba(0, 0, 0, 0.55); --color-picture-mark: rgba(0, 0, 0, 0.42); --color-on-picture-mark: #FFFFFF; --color-device: #0B0B0C; --color-device-paper: #FFFFFF; --color-device-ink: #000000; --color-device-grey: #737373; --color-device-alert: #F2F2F7; --color-device-link: #007AFF; --glass-bg: rgba(30, 30, 32, 0.58); --glass-tint: rgba(255, 255, 255, 0.04); --glass-rim: linear-gradient(150deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0.10) 78%, rgba(255, 255, 255, 0.30) 100%); --glass-edge: rgba(255, 255, 255, 0.08); --glass-inner: inset 0 0 12px rgba(255, 255, 255, 0.05), inset 0 1px 0.5px rgba(255, 255, 255, 0.12); --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.40); --tabbar-ink: #F2F2F7; --tabbar-ink-open: #FFFFFF; --tabbar-lens: rgba(255, 255, 255, 0.13); --drop-bg: rgba(255, 255, 255, 0.10); --drop-ring: rgba(255, 255, 255, 0.40); --drop-glow: rgba(255, 255, 255, 0.12); --drop-shadow: 0 10px 26px rgba(0, 0, 0, 0.60), 0 1px 3px rgba(0, 0, 0, 0.40); --drop-iris-opacity: 0.45; --color-tooltip-bg: #F5F5F5; --color-tooltip-fg: #0A0A0A; }