/* * The design language, ported from astro-erudite (MIT, * github.com/jktrn/astro-erudite) — the template enscribe.dev is built on. * * Not from enscribe.dev itself: that repository is source-available rather than * open source, and its own licence says its site-specific code and visual design * are proprietary and may not be copied. Everything here comes from the MIT * template, with its values kept as they are — the twelve-step grey scale, one * red for anything destructive, the Utopia type and space scales, the small * radii, the hairline rules, the sidebar, the entry list, the callout and the * icon button. Light and dark swap on `prefers-color-scheme` rather than * `light-dark()`, so an older browser gets the light theme instead of nothing. * * Typeface is IBM Plex (SIL OFL) — licence alongside the files in /public/fonts. */ @font-face{font-family:"IBM Plex Sans";src:url("/public/fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight:100 700;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("/public/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} /* The wordmark only — a display face for the two places the product names itself: the bar and the landing card. Everything else stays IBM Plex. */ @font-face{font-family:"Space Grotesk";src:url("/public/fonts/SpaceGrotesk-Medium.woff2") format("woff2"); font-weight:500;font-style:normal;font-display:swap} /* ── colour ───────────────────────────────────────────────────────────────── */ :root{ color-scheme:light; --gray-1:#fcfcfc;--gray-2:#f9f9f9;--gray-3:#f0f0f0;--gray-4:#e8e8e8;--gray-5:#e0e0e0;--gray-6:#d9d9d9; --gray-7:#cecece;--gray-8:#bbbbbb;--gray-9:#8d8d8d;--gray-10:#838383;--gray-11:#646464;--gray-12:#202020; --red-11:#ce2c31; --background:var(--gray-1);--foreground:var(--gray-12); --primary:var(--gray-12);--primary-foreground:var(--gray-1); --muted:var(--gray-3);--muted-foreground:var(--gray-11); --destructive:var(--red-11);--border:var(--gray-6);--ring:var(--gray-8); /* Drawn here rather than as a background-image literal so it can follow the theme like every other colour. */ --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23646464' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E"); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --gray-1:#111111;--gray-2:#191919;--gray-3:#222222;--gray-4:#2a2a2a;--gray-5:#313131;--gray-6:#3a3a3a; --gray-7:#484848;--gray-8:#606060;--gray-9:#6e6e6e;--gray-10:#7b7b7b;--gray-11:#b4b4b4;--gray-12:#eeeeee; --red-11:#ff9592; --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b4b4b4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E"); } } /* The toggle sets data-theme on ; without it the OS decides. */ :root[data-theme="dark"]{ color-scheme:dark; --gray-1:#111111;--gray-2:#191919;--gray-3:#222222;--gray-4:#2a2a2a;--gray-5:#313131;--gray-6:#3a3a3a; --gray-7:#484848;--gray-8:#606060;--gray-9:#6e6e6e;--gray-10:#7b7b7b;--gray-11:#b4b4b4;--gray-12:#eeeeee; --red-11:#ff9592; --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b4b4b4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E"); } :root[data-theme="light"]{ color-scheme:light; --gray-1:#fcfcfc;--gray-2:#f9f9f9;--gray-3:#f0f0f0;--gray-4:#e8e8e8;--gray-5:#e0e0e0;--gray-6:#d9d9d9; --gray-7:#cecece;--gray-8:#bbbbbb;--gray-9:#8d8d8d;--gray-10:#838383;--gray-11:#646464;--gray-12:#202020; --red-11:#ce2c31; } /* ── type ─────────────────────────────────────────────────────────────────── */ :root{ --font-sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --font-display:"Space Grotesk","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif; --step--1:clamp(0.8889rem,0.8709rem + 0.0877vw,0.9375rem); --step-0:clamp(1rem,0.9538rem + 0.2255vw,1.125rem); --step-1:clamp(1.125rem,1.0418rem + 0.4059vw,1.35rem); --step-2:clamp(1.2656rem,1.1346rem + 0.6392vw,1.62rem); --step-3:clamp(1.4238rem,1.2315rem + 0.9383vw,1.944rem); --font-weight-normal:400; --font-weight-medium:450; --tracking-tight:-0.015em; --leading-offset:0.65rem; --measure:40rem; } /* ── space and shape ──────────────────────────────────────────────────────── */ :root{ --space-3xs:clamp(0.25rem,0.2269rem + 0.1127vw,0.3125rem); --space-2xs:clamp(0.5rem,0.4769rem + 0.1127vw,0.5625rem); --space-xs:clamp(0.75rem,0.7038rem + 0.2255vw,0.875rem); --space-s:clamp(1rem,0.9538rem + 0.2255vw,1.125rem); --space-m:clamp(1.5rem,1.4307rem + 0.3382vw,1.6875rem); --space-l:clamp(2rem,1.9076rem + 0.451vw,2.25rem); --space-xl:clamp(3rem,2.8613rem + 0.6764vw,3.375rem); --radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px; --grid-max-width:75.94rem;--grid-gutter:var(--space-s); --page-offset-top:var(--space-l); --page-offset-bottom:var(--space-m); --bar-gutter:max(var(--grid-gutter),(100% - var(--measure)) / 2); --bar-border-image:linear-gradient(to right, transparent 0 var(--bar-gutter), var(--border) 0 calc(100% - var(--bar-gutter)), transparent 0); } /* ── wallpaper ────────────────────────────────────────────────────────────── */ /* * From assets/backgrounds, a different one per page load, in colour: the * pictures are the point. It is held back as a wash — strongest behind the page * title, a trace by the time body copy starts — so type keeps its contrast. */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:var(--bg-image);background-size:cover;background-position:center; opacity:.45; -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.35) 22%,rgba(0,0,0,.14) 55%,rgba(0,0,0,.07) 100%); mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.35) 22%,rgba(0,0,0,.14) 55%,rgba(0,0,0,.07) 100%)} @media (prefers-color-scheme:dark){ body::before{opacity:.3} } :root[data-theme="dark"] body::before{opacity:.3} :root[data-theme="light"] body::before{opacity:.45} /* ── base ─────────────────────────────────────────────────────────────────── */ *,::before,::after{box-sizing:border-box;border-color:var(--border);letter-spacing:var(--tracking-tight)} /* Every list here is chrome — nav, sidebar, entries, people — so none of them wants markers or indent. Anything that should read as prose has to ask. */ ul,ol{margin:0;padding:0;list-style:none} html{scrollbar-gutter:stable} body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans); font-size:var(--step-0);line-height:calc(var(--leading-offset) + 1em);text-wrap:pretty; -webkit-font-smoothing:antialiased} h1,h2,h3{margin:0 0 var(--space-2xs);font-weight:var(--font-weight-medium);text-wrap:balance; line-height:calc(var(--leading-offset) + 1em)} h1{font-size:var(--step-3)} h2{font-size:var(--step-1)} h3{font-size:var(--step-0)} p{margin:0 0 var(--space-xs)} a{color:inherit;text-decoration:underline;text-decoration-color:transparent; text-decoration-thickness:max(1px,0.0625em);text-decoration-skip-ink:none; text-underline-position:under;text-underline-offset:-0.06em} a:hover{text-decoration-color:currentColor} :focus-visible{outline:2px solid var(--ring);outline-offset:0.25rem;border-radius:var(--radius-sm)} code{font-family:var(--font-mono);font-size:0.9em;background:var(--muted);border-radius:var(--radius-sm);padding:0 4px} .lede{color:var(--muted-foreground);max-width:var(--measure);margin:0 0 var(--space-m)} .muted{color:var(--muted-foreground)} .small{font-size:var(--step--1)} /* ── bar ──────────────────────────────────────────────────────────────────── */ /* The reference's mobile bar: frosted, and a 2px rule inset to the content. */ .bar{position:sticky;top:0;z-index:10;background-color:color-mix(in oklab,var(--background) 90%,transparent); backdrop-filter:blur(8px)} .bar-inner{display:flex;align-items:center;gap:var(--space-s);flex-wrap:wrap; max-width:var(--grid-max-width);margin-inline:auto;padding:var(--space-2xs) var(--grid-gutter); border-bottom:2px solid var(--border);border-image:var(--bar-border-image)} .brand{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-display); font-size:var(--step-1);font-weight:500;letter-spacing:-0.03em;text-decoration-line:none} .bar nav{flex:1;font-size:var(--step--1)} .bar nav ul{display:flex;gap:var(--space-s);margin:0;padding:0;list-style:none} .bar nav a{display:block;color:var(--muted-foreground)} .bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--foreground);text-decoration:none} .who{display:flex;align-items:center;gap:var(--space-2xs);color:var(--muted-foreground);font-size:var(--step--1)} .who img{width:1.5rem;height:1.5rem;border-radius:var(--radius-full);display:block; box-shadow:0 0 0 1.5px var(--background)} .who form{margin:0} /* ── presence ─────────────────────────────────────────────────────────────── */ /* The reference's home shows a live account: avatar, name, handle. Here it is the bot's own. */ .presence{display:flex;align-items:center;gap:var(--space-2xs)} .presence img{width:2.75rem;height:2.75rem;border-radius:var(--radius-full);display:block; box-shadow:0 0 0 1.5px var(--background)} .presence .names{display:flex;flex-direction:column;line-height:calc(var(--leading-offset) + 0.9em)} .presence .name{font-weight:var(--font-weight-medium)} .presence .handle{color:var(--muted-foreground);font-size:var(--step--1)} /* Monochrome, like everything else: filled means on. */ .dot{display:inline-block;width:0.5rem;height:0.5rem;border-radius:var(--radius-full); background:var(--foreground);margin-inline-end:var(--space-3xs)} .dot.off{background:var(--muted-foreground)} /* ── page ─────────────────────────────────────────────────────────────────── */ .page{max-width:var(--grid-max-width);margin-inline:auto;padding:var(--page-offset-top) var(--grid-gutter) 0} .row{display:flex;align-items:center;gap:var(--space-2xs);flex-wrap:wrap} .between{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-xs);flex-wrap:wrap} /* ── entry list ───────────────────────────────────────────────────────────── */ /* The reference's post list, which is what a list of groups wants to be. */ .entries{display:flex;flex-direction:column;gap:var(--space-s);margin:0 0 var(--space-m);padding:0;list-style:none} .entries > li{display:flex;align-items:flex-start;gap:var(--space-s)} .entries > li > .entry{display:flex;flex-direction:column;flex:1;min-width:0} .entry-title{font-size:var(--step-1);font-weight:var(--font-weight-medium); line-height:calc(var(--leading-offset) + 1em);text-decoration-line:none} .entry-title:hover{text-decoration-line:underline} .entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3xs); margin-block-end:var(--space-3xs);font-size:var(--step--1);color:var(--muted-foreground)} .entry-meta .avatars{display:flex;align-items:center;margin-block-end:-0.1em} .entry-meta .avatars img{width:1.125rem;height:1.125rem;border-radius:var(--radius-full);display:block; box-shadow:0 0 0 1.5px var(--background)} .entry-meta .avatars img:not(:first-child){margin-inline-start:-0.375rem} /* Tags are faded text, not chips. */ .entry-tags{display:flex;flex-wrap:wrap;gap:var(--space-3xs)} .entry-tags span{color:color-mix(in oklab,var(--muted-foreground) 75%,transparent)} .entry-actions{margin:0;flex-shrink:0} /* ── surfaces ─────────────────────────────────────────────────────────────── */ .card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-s); margin-bottom:var(--space-s);background:color-mix(in oklab,var(--background) 88%,transparent)} .card h2{margin-top:0} .card p:last-child{margin-bottom:0} .danger{border-color:color-mix(in oklab,var(--destructive) 45%,var(--border))} .danger h2{color:var(--destructive)} .empty{padding:var(--space-m);border:1px dashed var(--border);border-radius:var(--radius-lg); color:var(--muted-foreground);font-size:var(--step--1);text-align:center} /* ── callout ──────────────────────────────────────────────────────────────── */ /* The reference's callout: an accent on the leading edge, no fill. */ .note{padding-block:0.75rem;padding-inline:1rem 0; border-inline-start:4px solid var(--muted-foreground); margin-bottom:var(--space-m);font-size:var(--step--1)} .note.err{border-inline-start-color:var(--destructive);color:var(--destructive)} .note.ok{border-inline-start-color:var(--foreground)} /* ── buttons ──────────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem; padding:var(--space-3xs) var(--space-xs);border:1px solid var(--primary); border-radius:var(--radius-md);background:var(--primary);color:var(--primary-foreground); font:inherit;font-size:var(--step--1);font-weight:var(--font-weight-medium);cursor:pointer; text-decoration-line:none;white-space:nowrap} .btn:hover{opacity:.85} .btn.grey{background:transparent;color:var(--foreground);border-color:var(--border)} .btn.grey:hover{background-color:color-mix(in oklab,var(--muted) 50%,transparent);opacity:1} .btn.red{background:transparent;color:var(--destructive);border-color:currentColor} .btn.red:hover{background-color:color-mix(in oklab,var(--destructive) 10%,transparent);opacity:1} .btn.sm{min-height:2rem;padding:0 var(--space-2xs)} .btn[disabled]{opacity:.5;cursor:not-allowed} /* The reference's icon button, for anything that is a glyph and a hover fill. */ .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem; border:1px solid var(--border);border-radius:var(--radius-md);background:transparent; color:var(--muted-foreground);cursor:pointer;padding:0} .icon-btn:hover{background-color:color-mix(in oklab,var(--muted) 50%,transparent);color:var(--foreground)} .icon-btn svg{width:1rem;height:1rem;display:block} /* ── controls ─────────────────────────────────────────────────────────────── */ /* * The reference styles prose, not forms, so these are built out of its tokens: * hairline border, small radius, the page colour for the field, the ring for * focus, and nothing coloured but the state. Native controls throughout, so they * keep their keyboard behaviour, autofill and mobile pickers. */ label{display:block;margin-bottom:var(--space-3xs);font-size:var(--step--1); font-weight:var(--font-weight-medium);color:var(--muted-foreground)} input[type=text],input[type=number],input[type=search],input[type=email],textarea,select{ width:100%;padding:var(--space-2xs) var(--space-xs);border:1px solid var(--border); border-radius:var(--radius-md);background:var(--background);color:var(--foreground); font:inherit;font-size:var(--step--1); transition:border-color 120ms ease,background-color 120ms ease} input[type=text]:hover,input[type=number]:hover,input[type=search]:hover,textarea:hover,select:hover{ border-color:var(--gray-8)} input[type=text]:focus-visible,input[type=number]:focus-visible,input[type=search]:focus-visible, textarea:focus-visible,select:focus-visible{outline:2px solid var(--ring);outline-offset:0;border-color:transparent} ::placeholder{color:var(--muted-foreground)} textarea{resize:vertical;min-height:4.5rem;line-height:calc(var(--leading-offset) + 1em)} /* Spinners add noise for a field that is usually typed or pasted. */ input[type=number]{appearance:textfield;-moz-appearance:textfield} input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0} /* Dropdown: no native chrome, a chevron drawn in the muted foreground. */ select{appearance:none;-webkit-appearance:none;cursor:pointer; padding-right:calc(var(--space-s) + var(--space-2xs)); background-image:var(--select-chevron);background-repeat:no-repeat; background-position:right var(--space-2xs) center;background-size:1rem} select[multiple]{background-image:none;padding:var(--space-3xs);height:auto} select[multiple] option{padding:var(--space-3xs) var(--space-2xs);border-radius:var(--radius-sm)} select[multiple] option:checked{background:var(--primary);color:var(--primary-foreground)} select[disabled],input[disabled],textarea[disabled]{opacity:.55;cursor:not-allowed} /* Toggle. Monochrome on purpose: the knob moving and filling is the state, which is how this design says everything else. */ .check{display:flex;align-items:center;gap:var(--space-2xs);margin:0 0 var(--space-2xs); font-size:var(--step--1);font-weight:var(--font-weight-medium);color:var(--foreground); cursor:pointer} .check input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;flex:none; width:1.875rem;height:1.0625rem;margin:0;padding:0;cursor:pointer; border:1px solid var(--border);border-radius:var(--radius-full);background:transparent; transition:border-color 150ms ease} .check input[type=checkbox]::after{content:"";position:absolute;top:50%;left:2px; width:0.6875rem;height:0.6875rem;border-radius:var(--radius-full); background:var(--muted-foreground);transform:translateY(-50%); transition:transform 150ms ease,background-color 150ms ease} .check input[type=checkbox]:hover{border-color:var(--gray-8)} .check input[type=checkbox]:checked{border-color:var(--primary)} .check input[type=checkbox]:checked::after{transform:translate(0.8125rem,-50%);background:var(--primary)} .check input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed} .field{margin-bottom:var(--space-s);max-width:28rem} .hint{margin-top:var(--space-3xs);font-size:var(--step--1);color:var(--muted-foreground)} /* ── people rows, picker rows ─────────────────────────────────────────────── */ .people{display:flex;flex-direction:column;margin:0;padding:0;list-style:none} .person,.result{display:flex;align-items:center;gap:var(--space-2xs);padding:var(--space-3xs) 0; border-bottom:1px solid var(--border);font-size:var(--step--1)} .person:last-child,.result:last-child{border-bottom:0} .person img,.result img{width:1.75rem;height:1.75rem;border-radius:var(--radius-full);display:block; box-shadow:0 0 0 1.5px var(--background)} .person .name,.result .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .person form,.result form{margin:0} .result{width:100%;border:0;border-bottom:1px solid var(--border);background:transparent;color:inherit; font:inherit;text-align:left;cursor:pointer} .result:hover{background-color:color-mix(in oklab,var(--muted) 50%,transparent)} .results{display:flex;flex-direction:column;max-width:28rem} /* ── tabs ─────────────────────────────────────────────────────────────────── */ /* The bar's nav treatment, reused for a set of views within one page. */ .tabs{margin-bottom:var(--space-m)} .tabs ul{display:flex;gap:var(--space-s);font-size:var(--step--1)} .tabs a{color:var(--muted-foreground)} .tabs a:hover,.tabs a[aria-current="page"]{color:var(--foreground);text-decoration:none} /* Rank column on a leaderboard: mono, quiet, foreground for the top three. */ .rank{font-family:var(--font-mono);font-size:var(--step--1);color:var(--muted-foreground); min-width:1.75rem} .rank.top{color:var(--foreground)} /* ── tables ───────────────────────────────────────────────────────────────── */ table{width:100%;border-collapse:collapse;font-size:var(--step--1)} th,td{text-align:left;padding:var(--space-2xs) var(--space-2xs) var(--space-2xs) 0; border-bottom:1px solid var(--border);vertical-align:top} th{font-weight:var(--font-weight-medium);color:var(--muted-foreground)} tbody tr:last-child td{border-bottom:0} /* ── settings sidebar ─────────────────────────────────────────────────────── */ /* The reference's sidebar: colour carries the state, there is no filled chip. */ .admin{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:var(--space-l);align-items:start} .sided{display:flex;flex-direction:column;gap:var(--space-2xs);position:sticky;top:var(--page-offset-top)} .sided ul{display:flex;flex-direction:column;gap:var(--space-3xs);margin:0;padding:0;list-style:none} .sided a{display:block;color:var(--muted-foreground)} .sided a:hover,.sided a[aria-current="page"]{color:var(--foreground);text-decoration:none} /* ── footer ───────────────────────────────────────────────────────────────── */ .foot{display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs); max-width:var(--grid-max-width);margin-inline:auto;padding:0 var(--grid-gutter); margin-block:var(--space-xs) var(--page-offset-bottom); font-size:var(--step--1);color:var(--muted-foreground)} .foot p{margin:0} @media (min-width:40rem){ .foot{flex-direction:row;justify-content:space-between} } @media(max-width:820px){ .admin{grid-template-columns:1fr} .sided{position:static} .sided ul{flex-direction:row;flex-wrap:wrap;gap:var(--space-s)} .entries > li{flex-direction:column} }