Vigilio Desto
9226c270ae
20 writings from vault source (~/.napkin/writing/), 10 extracted from HTML. ASW Hugo pack as theme, pure ASW CSS (no theme.css). garden.trentuna.com now serves Hugo static output. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
4931 lines
153 KiB
CSS
4931 lines
153 KiB
CSS
/**
|
||
* asw.css — Agentic Semantic Web
|
||
* A standalone CSS framework for agent-generated web content.
|
||
*
|
||
* Semantic HTML + data-attributes. Zero classes required.
|
||
* Single file. Builds on Open Props token foundation.
|
||
*
|
||
* Lineage: Open Props (tokens), Pico CSS (semantic HTML patterns),
|
||
* Charts.css (data-attribute vocabulary pattern).
|
||
* License: MIT
|
||
*/
|
||
|
||
/* ── Open Props: props.colors.css ─────────────────────────────── */
|
||
:where(html) {
|
||
--gray-0: #f8f9fa;
|
||
--gray-1: #f1f3f5;
|
||
--gray-2: #e9ecef;
|
||
--gray-3: #dee2e6;
|
||
--gray-4: #ced4da;
|
||
--gray-5: #adb5bd;
|
||
--gray-6: #868e96;
|
||
--gray-7: #495057;
|
||
--gray-8: #343a40;
|
||
--gray-9: #212529;
|
||
--gray-10: #16191d;
|
||
--gray-11: #0d0f12;
|
||
--gray-12: #030507;
|
||
--stone-0: #f8fafb;
|
||
--stone-1: #f2f4f6;
|
||
--stone-2: #ebedef;
|
||
--stone-3: #e0e4e5;
|
||
--stone-4: #d1d6d8;
|
||
--stone-5: #b1b6b9;
|
||
--stone-6: #979b9d;
|
||
--stone-7: #7e8282;
|
||
--stone-8: #666968;
|
||
--stone-9: #50514f;
|
||
--stone-10: #3a3a37;
|
||
--stone-11: #252521;
|
||
--stone-12: #121210;
|
||
--red-0: #fff5f5;
|
||
--red-1: #ffe3e3;
|
||
--red-2: #ffc9c9;
|
||
--red-3: #ffa8a8;
|
||
--red-4: #ff8787;
|
||
--red-5: #ff6b6b;
|
||
--red-6: #fa5252;
|
||
--red-7: #f03e3e;
|
||
--red-8: #e03131;
|
||
--red-9: #c92a2a;
|
||
--red-10: #b02525;
|
||
--red-11: #962020;
|
||
--red-12: #7d1a1a;
|
||
--pink-0: #fff0f6;
|
||
--pink-1: #ffdeeb;
|
||
--pink-2: #fcc2d7;
|
||
--pink-3: #faa2c1;
|
||
--pink-4: #f783ac;
|
||
--pink-5: #f06595;
|
||
--pink-6: #e64980;
|
||
--pink-7: #d6336c;
|
||
--pink-8: #c2255c;
|
||
--pink-9: #a61e4d;
|
||
--pink-10: #8c1941;
|
||
--pink-11: #731536;
|
||
--pink-12: #59102a;
|
||
--purple-0: #f8f0fc;
|
||
--purple-1: #f3d9fa;
|
||
--purple-2: #eebefa;
|
||
--purple-3: #e599f7;
|
||
--purple-4: #da77f2;
|
||
--purple-5: #cc5de8;
|
||
--purple-6: #be4bdb;
|
||
--purple-7: #ae3ec9;
|
||
--purple-8: #9c36b5;
|
||
--purple-9: #862e9c;
|
||
--purple-10: #702682;
|
||
--purple-11: #5a1e69;
|
||
--purple-12: #44174f;
|
||
--violet-0: #f3f0ff;
|
||
--violet-1: #e5dbff;
|
||
--violet-2: #d0bfff;
|
||
--violet-3: #b197fc;
|
||
--violet-4: #9775fa;
|
||
--violet-5: #845ef7;
|
||
--violet-6: #7950f2;
|
||
--violet-7: #7048e8;
|
||
--violet-8: #6741d9;
|
||
--violet-9: #5f3dc4;
|
||
--violet-10: #5235ab;
|
||
--violet-11: #462d91;
|
||
--violet-12: #3a2578;
|
||
--indigo-0: #edf2ff;
|
||
--indigo-1: #dbe4ff;
|
||
--indigo-2: #bac8ff;
|
||
--indigo-3: #91a7ff;
|
||
--indigo-4: #748ffc;
|
||
--indigo-5: #5c7cfa;
|
||
--indigo-6: #4c6ef5;
|
||
--indigo-7: #4263eb;
|
||
--indigo-8: #3b5bdb;
|
||
--indigo-9: #364fc7;
|
||
--indigo-10: #2f44ad;
|
||
--indigo-11: #283a94;
|
||
--indigo-12: #21307a;
|
||
--blue-0: #e7f5ff;
|
||
--blue-1: #d0ebff;
|
||
--blue-2: #a5d8ff;
|
||
--blue-3: #74c0fc;
|
||
--blue-4: #4dabf7;
|
||
--blue-5: #339af0;
|
||
--blue-6: #228be6;
|
||
--blue-7: #1c7ed6;
|
||
--blue-8: #1971c2;
|
||
--blue-9: #1864ab;
|
||
--blue-10: #145591;
|
||
--blue-11: #114678;
|
||
--blue-12: #0d375e;
|
||
--cyan-0: #e3fafc;
|
||
--cyan-1: #c5f6fa;
|
||
--cyan-2: #99e9f2;
|
||
--cyan-3: #66d9e8;
|
||
--cyan-4: #3bc9db;
|
||
--cyan-5: #22b8cf;
|
||
--cyan-6: #15aabf;
|
||
--cyan-7: #1098ad;
|
||
--cyan-8: #0c8599;
|
||
--cyan-9: #0b7285;
|
||
--cyan-10: #095c6b;
|
||
--cyan-11: #074652;
|
||
--cyan-12: #053038;
|
||
--teal-0: #e6fcf5;
|
||
--teal-1: #c3fae8;
|
||
--teal-2: #96f2d7;
|
||
--teal-3: #63e6be;
|
||
--teal-4: #38d9a9;
|
||
--teal-5: #20c997;
|
||
--teal-6: #12b886;
|
||
--teal-7: #0ca678;
|
||
--teal-8: #099268;
|
||
--teal-9: #087f5b;
|
||
--teal-10: #066649;
|
||
--teal-11: #054d37;
|
||
--teal-12: #033325;
|
||
--green-0: #ebfbee;
|
||
--green-1: #d3f9d8;
|
||
--green-2: #b2f2bb;
|
||
--green-3: #8ce99a;
|
||
--green-4: #69db7c;
|
||
--green-5: #51cf66;
|
||
--green-6: #40c057;
|
||
--green-7: #37b24d;
|
||
--green-8: #2f9e44;
|
||
--green-9: #2b8a3e;
|
||
--green-10: #237032;
|
||
--green-11: #1b5727;
|
||
--green-12: #133d1b;
|
||
--lime-0: #f4fce3;
|
||
--lime-1: #e9fac8;
|
||
--lime-2: #d8f5a2;
|
||
--lime-3: #c0eb75;
|
||
--lime-4: #a9e34b;
|
||
--lime-5: #94d82d;
|
||
--lime-6: #82c91e;
|
||
--lime-7: #74b816;
|
||
--lime-8: #66a80f;
|
||
--lime-9: #5c940d;
|
||
--lime-10: #4c7a0b;
|
||
--lime-11: #3c6109;
|
||
--lime-12: #2c4706;
|
||
--yellow-0: #fff9db;
|
||
--yellow-1: #fff3bf;
|
||
--yellow-2: #ffec99;
|
||
--yellow-3: #ffe066;
|
||
--yellow-4: #ffd43b;
|
||
--yellow-5: #fcc419;
|
||
--yellow-6: #fab005;
|
||
--yellow-7: #f59f00;
|
||
--yellow-8: #f08c00;
|
||
--yellow-9: #e67700;
|
||
--yellow-10: #b35c00;
|
||
--yellow-11: #804200;
|
||
--yellow-12: #663500;
|
||
--orange-0: #fff4e6;
|
||
--orange-1: #ffe8cc;
|
||
--orange-2: #ffd8a8;
|
||
--orange-3: #ffc078;
|
||
--orange-4: #ffa94d;
|
||
--orange-5: #ff922b;
|
||
--orange-6: #fd7e14;
|
||
--orange-7: #f76707;
|
||
--orange-8: #e8590c;
|
||
--orange-9: #d9480f;
|
||
--orange-10: #bf400d;
|
||
--orange-11: #99330b;
|
||
--orange-12: #802b09;
|
||
--choco-0: #fff8dc;
|
||
--choco-1: #fce1bc;
|
||
--choco-2: #f7ca9e;
|
||
--choco-3: #f1b280;
|
||
--choco-4: #e99b62;
|
||
--choco-5: #df8545;
|
||
--choco-6: #d46e25;
|
||
--choco-7: #bd5f1b;
|
||
--choco-8: #a45117;
|
||
--choco-9: #8a4513;
|
||
--choco-10: #703a13;
|
||
--choco-11: #572f12;
|
||
--choco-12: #3d210d;
|
||
--brown-0: #faf4eb;
|
||
--brown-1: #ede0d1;
|
||
--brown-2: #e0cab7;
|
||
--brown-3: #d3b79e;
|
||
--brown-4: #c5a285;
|
||
--brown-5: #b78f6d;
|
||
--brown-6: #a87c56;
|
||
--brown-7: #956b47;
|
||
--brown-8: #825b3a;
|
||
--brown-9: #6f4b2d;
|
||
--brown-10: #5e3a21;
|
||
--brown-11: #4e2b15;
|
||
--brown-12: #422412;
|
||
--sand-0: #f8fafb;
|
||
--sand-1: #e6e4dc;
|
||
--sand-2: #d5cfbd;
|
||
--sand-3: #c2b9a0;
|
||
--sand-4: #aea58c;
|
||
--sand-5: #9a9178;
|
||
--sand-6: #867c65;
|
||
--sand-7: #736a53;
|
||
--sand-8: #5f5746;
|
||
--sand-9: #4b4639;
|
||
--sand-10: #38352d;
|
||
--sand-11: #252521;
|
||
--sand-12: #121210;
|
||
--camo-0: #f9fbe7;
|
||
--camo-1: #e8ed9c;
|
||
--camo-2: #d2df4e;
|
||
--camo-3: #c2ce34;
|
||
--camo-4: #b5bb2e;
|
||
--camo-5: #a7a827;
|
||
--camo-6: #999621;
|
||
--camo-7: #8c851c;
|
||
--camo-8: #7e7416;
|
||
--camo-9: #6d6414;
|
||
--camo-10: #5d5411;
|
||
--camo-11: #4d460e;
|
||
--camo-12: #36300a;
|
||
--jungle-0: #ecfeb0;
|
||
--jungle-1: #def39a;
|
||
--jungle-2: #d0e884;
|
||
--jungle-3: #c2dd6e;
|
||
--jungle-4: #b5d15b;
|
||
--jungle-5: #a8c648;
|
||
--jungle-6: #9bbb36;
|
||
--jungle-7: #8fb024;
|
||
--jungle-8: #84a513;
|
||
--jungle-9: #7a9908;
|
||
--jungle-10: #658006;
|
||
--jungle-11: #516605;
|
||
--jungle-12: #3d4d04;
|
||
}
|
||
|
||
/* ── Open Props: props.gray-oklch.css ─────────────────────────────── */
|
||
:where(*) {
|
||
--gray-0: oklch(99% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-1: oklch(95% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-2: oklch(88% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-3: oklch(80% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-4: oklch(74% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-5: oklch(68% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-6: oklch(63% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-7: oklch(58% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-8: oklch(53% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-9: oklch(49% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-10: oklch(43% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-11: oklch(37% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-12: oklch(31% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-13: oklch(25% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-14: oklch(18% var(--gray-chroma, none) var(--gray-hue, none));
|
||
--gray-15: oklch(10% var(--gray-chroma, none) var(--gray-hue, none));
|
||
}
|
||
|
||
/* ── Open Props: props.sizes.css ─────────────────────────────── */
|
||
:where(html) {
|
||
--size-000: -.5rem;
|
||
--size-00: -.25rem;
|
||
--size-1: .25rem;
|
||
--size-2: .5rem;
|
||
--size-3: 1rem;
|
||
--size-4: 1.25rem;
|
||
--size-5: 1.5rem;
|
||
--size-6: 1.75rem;
|
||
--size-7: 2rem;
|
||
--size-8: 3rem;
|
||
--size-9: 4rem;
|
||
--size-10: 5rem;
|
||
--size-11: 7.5rem;
|
||
--size-12: 10rem;
|
||
--size-13: 15rem;
|
||
--size-14: 20rem;
|
||
--size-15: 30rem;
|
||
--size-px-000: -8px;
|
||
--size-px-00: -4px;
|
||
--size-px-1: 4px;
|
||
--size-px-2: 8px;
|
||
--size-px-3: 16px;
|
||
--size-px-4: 20px;
|
||
--size-px-5: 24px;
|
||
--size-px-6: 28px;
|
||
--size-px-7: 32px;
|
||
--size-px-8: 48px;
|
||
--size-px-9: 64px;
|
||
--size-px-10: 80px;
|
||
--size-px-11: 120px;
|
||
--size-px-12: 160px;
|
||
--size-px-13: 240px;
|
||
--size-px-14: 320px;
|
||
--size-px-15: 480px;
|
||
--size-fluid-1: clamp(.5rem, 1vw, 1rem);
|
||
--size-fluid-2: clamp(1rem, 2vw, 1.5rem);
|
||
--size-fluid-3: clamp(1.5rem, 3vw, 2rem);
|
||
--size-fluid-4: clamp(2rem, 4vw, 3rem);
|
||
--size-fluid-5: clamp(4rem, 5vw, 5rem);
|
||
--size-fluid-6: clamp(5rem, 7vw, 7.5rem);
|
||
--size-fluid-7: clamp(7.5rem, 10vw, 10rem);
|
||
--size-fluid-8: clamp(10rem, 20vw, 15rem);
|
||
--size-fluid-9: clamp(15rem, 30vw, 20rem);
|
||
--size-fluid-10: clamp(20rem, 40vw, 30rem);
|
||
--size-content-1: 20ch;
|
||
--size-content-2: 45ch;
|
||
--size-content-3: 60ch;
|
||
--size-header-1: 20ch;
|
||
--size-header-2: 25ch;
|
||
--size-header-3: 35ch;
|
||
--size-xxs: 240px;
|
||
--size-xs: 360px;
|
||
--size-sm: 480px;
|
||
--size-md: 768px;
|
||
--size-lg: 1024px;
|
||
--size-xl: 1440px;
|
||
--size-xxl: 1920px;
|
||
--size-relative-000: -.5ch;
|
||
--size-relative-00: -.25ch;
|
||
--size-relative-1: .25ch;
|
||
--size-relative-2: .5ch;
|
||
--size-relative-3: 1ch;
|
||
--size-relative-4: 1.25ch;
|
||
--size-relative-5: 1.5ch;
|
||
--size-relative-6: 1.75ch;
|
||
--size-relative-7: 2ch;
|
||
--size-relative-8: 3ch;
|
||
--size-relative-9: 4ch;
|
||
--size-relative-10: 5ch;
|
||
--size-relative-11: 7.5ch;
|
||
--size-relative-12: 10ch;
|
||
--size-relative-13: 15ch;
|
||
--size-relative-14: 20ch;
|
||
--size-relative-15: 30ch;
|
||
}
|
||
|
||
/* ── Open Props: props.fonts.css ─────────────────────────────── */
|
||
:where(html) {
|
||
--font-system-ui: system-ui, sans-serif;
|
||
--font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
|
||
--font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
|
||
--font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
|
||
--font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
|
||
--font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
|
||
--font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
|
||
--font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
|
||
--font-monospace-code: Dank Mono,Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
|
||
--font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
|
||
--font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
|
||
--font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
|
||
--font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
|
||
--font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
|
||
--font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
|
||
--font-sans: var(--font-system-ui);
|
||
--font-serif: ui-serif, serif;
|
||
--font-mono: var(--font-monospace-code);
|
||
--font-weight-1: 100;
|
||
--font-weight-2: 200;
|
||
--font-weight-3: 300;
|
||
--font-weight-4: 400;
|
||
--font-weight-5: 500;
|
||
--font-weight-6: 600;
|
||
--font-weight-7: 700;
|
||
--font-weight-8: 800;
|
||
--font-weight-9: 900;
|
||
--font-lineheight-00: .95;
|
||
--font-lineheight-0: 1.1;
|
||
--font-lineheight-1: 1.25;
|
||
--font-lineheight-2: 1.375;
|
||
--font-lineheight-3: 1.5;
|
||
--font-lineheight-4: 1.75;
|
||
--font-lineheight-5: 2;
|
||
--font-letterspacing-0: -.05em;
|
||
--font-letterspacing-1: .025em;
|
||
--font-letterspacing-2: .050em;
|
||
--font-letterspacing-3: .075em;
|
||
--font-letterspacing-4: .150em;
|
||
--font-letterspacing-5: .500em;
|
||
--font-letterspacing-6: .750em;
|
||
--font-letterspacing-7: 1em;
|
||
--font-size-00: .5rem;
|
||
--font-size-0: .75rem;
|
||
--font-size-1: 1rem;
|
||
--font-size-2: 1.1rem;
|
||
--font-size-3: 1.25rem;
|
||
--font-size-4: 1.5rem;
|
||
--font-size-5: 2rem;
|
||
--font-size-6: 2.5rem;
|
||
--font-size-7: 3rem;
|
||
--font-size-8: 3.5rem;
|
||
--font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
|
||
--font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
|
||
--font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
|
||
--font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
|
||
}
|
||
|
||
/* ── Open Props: props.borders.css ─────────────────────────────── */
|
||
:where(html) {
|
||
--border-size-1: 1px;
|
||
--border-size-2: 2px;
|
||
--border-size-3: 5px;
|
||
--border-size-4: 10px;
|
||
--border-size-5: 25px;
|
||
--radius-1: 2px;
|
||
--radius-2: 5px;
|
||
--radius-3: 1rem;
|
||
--radius-4: 2rem;
|
||
--radius-5: 4rem;
|
||
--radius-6: 8rem;
|
||
--radius-drawn-1: 255px 15px 225px 15px / 15px 225px 15px 255px;
|
||
--radius-drawn-2: 125px 10px 20px 185px / 25px 205px 205px 25px;
|
||
--radius-drawn-3: 15px 255px 15px 225px / 225px 15px 255px 15px;
|
||
--radius-drawn-4: 15px 25px 155px 25px / 225px 150px 25px 115px;
|
||
--radius-drawn-5: 250px 25px 15px 20px / 15px 80px 105px 115px;
|
||
--radius-drawn-6: 28px 100px 20px 15px / 150px 30px 205px 225px;
|
||
--radius-round: 1e5px;
|
||
--radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
|
||
--radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
|
||
--radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
|
||
--radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
|
||
--radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;
|
||
--radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
|
||
--radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));
|
||
--radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));
|
||
--radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));
|
||
--radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
|
||
--radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));
|
||
}
|
||
|
||
/* ── Open Props: props.shadows.css ─────────────────────────────── */
|
||
@import 'props.media.css';
|
||
|
||
:where(html) {
|
||
--shadow-color: 220 3% 15%;
|
||
--shadow-strength: 1%;
|
||
--shadow-strength-3: calc(var(--shadow-strength) + 2%);
|
||
--shadow-strength-4: calc(var(--shadow-strength) + 3%);
|
||
--shadow-strength-5: calc(var(--shadow-strength) + 4%);
|
||
--shadow-strength-6: calc(var(--shadow-strength) + 5%);
|
||
--shadow-strength-7: calc(var(--shadow-strength) + 6%);
|
||
--shadow-strength-8: calc(var(--shadow-strength) + 7%);
|
||
--shadow-strength-10: calc(var(--shadow-strength) + 9%);
|
||
--inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001;
|
||
--shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / var(--shadow-strength-10));
|
||
--shadow-2:
|
||
0 3px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
|
||
0 7px 14px -5px hsl(var(--shadow-color) / var(--shadow-strength-6));
|
||
--shadow-3:
|
||
0 -1px 3px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
|
||
0 1px 2px -5px hsl(var(--shadow-color) / var(--shadow-strength-3)),
|
||
0 2px 5px -5px hsl(var(--shadow-color) / var(--shadow-strength-5)),
|
||
0 4px 12px -5px hsl(var(--shadow-color) / var(--shadow-strength-6)),
|
||
0 12px 15px -5px hsl(var(--shadow-color) / var(--shadow-strength-8));
|
||
--shadow-4:
|
||
0 -2px 5px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
|
||
0 1px 1px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
|
||
0 2px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
|
||
0 5px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)),
|
||
0 9px 9px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)),
|
||
0 16px 16px -2px hsl(var(--shadow-color) / var(--shadow-strength-7));
|
||
--shadow-5:
|
||
0 -1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
|
||
0 2px 1px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
|
||
0 5px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
|
||
0 10px 10px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)),
|
||
0 20px 20px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)),
|
||
0 40px 40px -2px hsl(var(--shadow-color) / var(--shadow-strength-8));
|
||
--shadow-6:
|
||
0 -1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
|
||
0 3px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
|
||
0 7px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
|
||
0 12px 10px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)),
|
||
0 22px 18px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)),
|
||
0 41px 33px -2px hsl(var(--shadow-color) / var(--shadow-strength-7)),
|
||
0 100px 80px -2px hsl(var(--shadow-color) / var(--shadow-strength-8));
|
||
--inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / var(--shadow-strength-10));
|
||
--inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);
|
||
--inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);
|
||
--inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);
|
||
--inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);
|
||
}
|
||
|
||
@media (--OSdark) {
|
||
:where(html) {
|
||
--shadow-color: 220 40% 2%;
|
||
--shadow-strength: 25%;
|
||
--inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007;
|
||
}
|
||
}
|
||
/* ── Open Props: props.easing.css ─────────────────────────────── */
|
||
:where(html) {
|
||
--ease-1: cubic-bezier(.25, 0, .5, 1);
|
||
--ease-2: cubic-bezier(.25, 0, .4, 1);
|
||
--ease-3: cubic-bezier(.25, 0, .3, 1);
|
||
--ease-4: cubic-bezier(.25, 0, .2, 1);
|
||
--ease-5: cubic-bezier(.25, 0, .1, 1);
|
||
--ease-in-1: cubic-bezier(.25, 0, 1, 1);
|
||
--ease-in-2: cubic-bezier(.50, 0, 1, 1);
|
||
--ease-in-3: cubic-bezier(.70, 0, 1, 1);
|
||
--ease-in-4: cubic-bezier(.90, 0, 1, 1);
|
||
--ease-in-5: cubic-bezier(1, 0, 1, 1);
|
||
--ease-out-1: cubic-bezier(0, 0, .75, 1);
|
||
--ease-out-2: cubic-bezier(0, 0, .50, 1);
|
||
--ease-out-3: cubic-bezier(0, 0, .3, 1);
|
||
--ease-out-4: cubic-bezier(0, 0, .1, 1);
|
||
--ease-out-5: cubic-bezier(0, 0, 0, 1);
|
||
--ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
|
||
--ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
|
||
--ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
|
||
--ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
|
||
--ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
|
||
--ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
|
||
--ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
|
||
--ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
|
||
--ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
|
||
--ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
|
||
--ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1);
|
||
--ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1);
|
||
--ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1);
|
||
--ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1);
|
||
--ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
|
||
--ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
|
||
--ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
|
||
--ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
|
||
--ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
|
||
--ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
|
||
--ease-step-1: steps(2);
|
||
--ease-step-2: steps(3);
|
||
--ease-step-3: steps(4);
|
||
--ease-step-4: steps(7);
|
||
--ease-step-5: steps(10);
|
||
--ease-elastic-1: var(--ease-elastic-out-1);
|
||
--ease-elastic-2: var(--ease-elastic-out-2);
|
||
--ease-elastic-3: var(--ease-elastic-out-3);
|
||
--ease-elastic-4: var(--ease-elastic-out-4);
|
||
--ease-elastic-5: var(--ease-elastic-out-5);
|
||
--ease-squish-1: var(--ease-elastic-in-out-1);
|
||
--ease-squish-2: var(--ease-elastic-in-out-2);
|
||
--ease-squish-3: var(--ease-elastic-in-out-3);
|
||
--ease-squish-4: var(--ease-elastic-in-out-4);
|
||
--ease-squish-5: var(--ease-elastic-in-out-5);
|
||
--ease-spring-1: linear(
|
||
0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
|
||
0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
|
||
1.001
|
||
);
|
||
--ease-spring-2: linear(
|
||
0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962,
|
||
1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%,
|
||
0.999 61.6%, 0.995 71.2%, 1
|
||
);
|
||
--ease-spring-3: linear(
|
||
0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
|
||
1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
|
||
1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
|
||
0.997 69.8%, 1.003 76.9%, 1
|
||
);
|
||
--ease-spring-4: linear(
|
||
0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185,
|
||
1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973,
|
||
0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%,
|
||
0.998 78.9%, 1
|
||
);
|
||
--ease-spring-5: linear(
|
||
0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231,
|
||
1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%,
|
||
0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
|
||
1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
|
||
);
|
||
--ease-bounce-1: linear(
|
||
0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%,
|
||
0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879,
|
||
0.885, 0.895, 0.908 89.7%, 0.946, 1
|
||
);
|
||
--ease-bounce-2: linear(
|
||
0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765,
|
||
1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788,
|
||
0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954,
|
||
0.973, 1
|
||
);
|
||
--ease-bounce-3: linear(
|
||
0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764,
|
||
1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672,
|
||
0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879,
|
||
0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957,
|
||
0.96, 0.968, 0.981, 1
|
||
);
|
||
--ease-bounce-4: linear(
|
||
0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81,
|
||
0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%,
|
||
0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%,
|
||
0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1
|
||
);
|
||
--ease-bounce-5: linear(
|
||
0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627,
|
||
0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892,
|
||
0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%,
|
||
0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943,
|
||
0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1
|
||
);
|
||
--ease-circ-in: cubic-bezier(.6,.04,.98,.335);
|
||
--ease-circ-in-out: cubic-bezier(.785,.135,.15,.86);
|
||
--ease-circ-out: cubic-bezier(.075,.82,.165,1);
|
||
--ease-cubic-in: cubic-bezier(.55,.055,.675,.19);
|
||
--ease-cubic-in-out: cubic-bezier(.645,.045,.355,1);
|
||
--ease-cubic-out: cubic-bezier(.215,.61,.355,1);
|
||
--ease-expo-in: cubic-bezier(.95,.05,.795,.035);
|
||
--ease-expo-in-out: cubic-bezier(1,0,0,1);
|
||
--ease-expo-out: cubic-bezier(.19,1,.22,1);
|
||
--ease-quad-in: cubic-bezier(.55,.085,.68,.53);
|
||
--ease-quad-in-out: cubic-bezier(.455,.03,.515,.955);
|
||
--ease-quad-out: cubic-bezier(.25,.46,.45,.94);
|
||
--ease-quart-in: cubic-bezier(.895,.03,.685,.22);
|
||
--ease-quart-in-out: cubic-bezier(.77,0,.175,1);
|
||
--ease-quart-out: cubic-bezier(.165,.84,.44,1);
|
||
--ease-quint-in: cubic-bezier(.755,.05,.855,.06);
|
||
--ease-quint-in-out: cubic-bezier(.86,0,.07,1);
|
||
--ease-quint-out: cubic-bezier(.23,1,.32,1);
|
||
--ease-sine-in: cubic-bezier(.47,0,.745,.715);
|
||
--ease-sine-in-out: cubic-bezier(.445,.05,.55,.95);
|
||
--ease-sine-out: cubic-bezier(.39,.575,.565,1);
|
||
}
|
||
|
||
/* ── Open Props: props.animations.css ─────────────────────────────── */
|
||
@import 'props.media.css';
|
||
|
||
:where(html) {
|
||
--animation-fade-in: fade-in .5s var(--ease-3);
|
||
--animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
|
||
--animation-fade-out: fade-out .5s var(--ease-3);
|
||
--animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
|
||
--animation-scale-up: scale-up .5s var(--ease-3);
|
||
--animation-scale-down: scale-down .5s var(--ease-3);
|
||
--animation-slide-out-up: slide-out-up .5s var(--ease-3);
|
||
--animation-slide-out-down: slide-out-down .5s var(--ease-3);
|
||
--animation-slide-out-right: slide-out-right .5s var(--ease-3);
|
||
--animation-slide-out-left: slide-out-left .5s var(--ease-3);
|
||
--animation-slide-in-up: slide-in-up .5s var(--ease-3);
|
||
--animation-slide-in-down: slide-in-down .5s var(--ease-3);
|
||
--animation-slide-in-right: slide-in-right .5s var(--ease-3);
|
||
--animation-slide-in-left: slide-in-left .5s var(--ease-3);
|
||
--animation-shake-x: shake-x .75s var(--ease-out-5);
|
||
--animation-shake-y: shake-y .75s var(--ease-out-5);
|
||
--animation-shake-z: shake-z 1s var(--ease-in-out-3);
|
||
--animation-spin: spin 2s linear infinite;
|
||
--animation-ping: ping 5s var(--ease-out-3) infinite;
|
||
--animation-blink: blink 1s var(--ease-out-3) infinite;
|
||
--animation-float: float 3s var(--ease-in-out-3) infinite;
|
||
--animation-bounce: bounce 2s var(--ease-squish-2) infinite;
|
||
--animation-pulse: pulse 2s var(--ease-out-3) infinite;
|
||
}
|
||
|
||
@keyframes fade-in {
|
||
to { opacity: 1 }
|
||
}
|
||
@keyframes fade-in-bloom {
|
||
0% { opacity: 0; filter: brightness(1) blur(20px) }
|
||
10% { opacity: 1; filter: brightness(2) blur(10px) }
|
||
100% { opacity: 1; filter: brightness(1) blur(0) }
|
||
}
|
||
@keyframes fade-out {
|
||
to { opacity: 0 }
|
||
}
|
||
@keyframes fade-out-bloom {
|
||
100% { opacity: 0; filter: brightness(1) blur(20px) }
|
||
10% { opacity: 1; filter: brightness(2) blur(10px) }
|
||
0% { opacity: 1; filter: brightness(1) blur(0) }
|
||
}
|
||
@keyframes scale-up {
|
||
to { transform: scale(1.25) }
|
||
}
|
||
@keyframes scale-down {
|
||
to { transform: scale(.75) }
|
||
}
|
||
@keyframes slide-out-up {
|
||
to { transform: translateY(-100%) }
|
||
}
|
||
@keyframes slide-out-down {
|
||
to { transform: translateY(100%) }
|
||
}
|
||
@keyframes slide-out-right {
|
||
to { transform: translateX(100%) }
|
||
}
|
||
@keyframes slide-out-left {
|
||
to { transform: translateX(-100%) }
|
||
}
|
||
@keyframes slide-in-up {
|
||
from { transform: translateY(100%) }
|
||
}
|
||
@keyframes slide-in-down {
|
||
from { transform: translateY(-100%) }
|
||
}
|
||
@keyframes slide-in-right {
|
||
from { transform: translateX(-100%) }
|
||
}
|
||
@keyframes slide-in-left {
|
||
from { transform: translateX(100%) }
|
||
}
|
||
@keyframes shake-x {
|
||
0%, 100% { transform: translateX(0%) }
|
||
20% { transform: translateX(-5%) }
|
||
40% { transform: translateX(5%) }
|
||
60% { transform: translateX(-5%) }
|
||
80% { transform: translateX(5%) }
|
||
}
|
||
@keyframes shake-y {
|
||
0%, 100% { transform: translateY(0%) }
|
||
20% { transform: translateY(-5%) }
|
||
40% { transform: translateY(5%) }
|
||
60% { transform: translateY(-5%) }
|
||
80% { transform: translateY(5%) }
|
||
}
|
||
@keyframes shake-z {
|
||
0%, 100% { transform: rotate(0deg) }
|
||
20% { transform: rotate(-2deg) }
|
||
40% { transform: rotate(2deg) }
|
||
60% { transform: rotate(-2deg) }
|
||
80% { transform: rotate(2deg) }
|
||
}
|
||
@keyframes spin {
|
||
to { transform: rotate(1turn) }
|
||
}
|
||
@keyframes ping {
|
||
90%, 100% {
|
||
transform: scale(2);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
@keyframes blink {
|
||
0%, 100% {
|
||
opacity: 1
|
||
}
|
||
50% {
|
||
opacity: .5
|
||
}
|
||
}
|
||
@keyframes float {
|
||
50% { transform: translateY(-25%) }
|
||
}
|
||
@keyframes bounce {
|
||
25% { transform: translateY(-20%) }
|
||
40% { transform: translateY(-3%) }
|
||
0%, 60%, 100% { transform: translateY(0) }
|
||
}
|
||
@keyframes pulse {
|
||
50% { transform: scale(.9,.9) }
|
||
}
|
||
@media (--OSdark) {
|
||
@keyframes fade-in-bloom {
|
||
0% { opacity: 0; filter: brightness(1) blur(20px) }
|
||
10% { opacity: 1; filter: brightness(0.5) blur(10px) }
|
||
100% { opacity: 1; filter: brightness(1) blur(0) }
|
||
}
|
||
}
|
||
@media (--OSdark) {
|
||
@keyframes fade-out-bloom {
|
||
100% { opacity: 0; filter: brightness(1) blur(20px) }
|
||
10% { opacity: 1; filter: brightness(0.5) blur(10px) }
|
||
0% { opacity: 1; filter: brightness(1) blur(0) }
|
||
}
|
||
}
|
||
/* ── Open Props: props.gradients.css ─────────────────────────────── */
|
||
:where(html) {
|
||
--gradient-space: ;
|
||
--gradient-1: linear-gradient(to bottom right var(--gradient-space), #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
|
||
--gradient-2: linear-gradient(to bottom right var(--gradient-space), #48005c, #8300e2, #a269ff);
|
||
--gradient-3:
|
||
radial-gradient(
|
||
circle at top right var(--gradient-space),
|
||
hsl(180 100% 50%), hsl(180 100% 50% / 0%)
|
||
),
|
||
radial-gradient(
|
||
circle at bottom left var(--gradient-space),
|
||
hsl(328 100% 54%), hsl(328 100% 54% / 0%)
|
||
);
|
||
--gradient-4: linear-gradient(to bottom right var(--gradient-space), #00F5A0, #00D9F5);
|
||
--gradient-5: conic-gradient(from -270deg at 75% 110% var(--gradient-space), fuchsia, floralwhite);
|
||
--gradient-6: conic-gradient(from -90deg at top left var(--gradient-space), black, white);
|
||
--gradient-7: linear-gradient(to bottom right var(--gradient-space), #72C6EF, #004E8F);
|
||
--gradient-8: conic-gradient(from 90deg at 50% 0% var(--gradient-space), #111, 50%, #222, #111);
|
||
--gradient-9: conic-gradient(from .5turn at bottom center var(--gradient-space), lightblue, white);
|
||
--gradient-10: conic-gradient(from 90deg at 40% -25% var(--gradient-space), #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
|
||
--gradient-11: conic-gradient(at bottom left var(--gradient-space), deeppink, cyan);
|
||
--gradient-12: conic-gradient(from 90deg at 25% -10% var(--gradient-space), #ff4500, #d3f340, #7bee85, #afeeee, #7bee85);
|
||
--gradient-13: radial-gradient(circle at 50% 200% var(--gradient-space), #000142, #3b0083, #b300c3, #ff059f, #ff4661, #ffad86, #fff3c7);
|
||
--gradient-14: conic-gradient(at top right var(--gradient-space), lime, cyan);
|
||
--gradient-15: linear-gradient(to bottom right var(--gradient-space), #c7d2fe, #fecaca, #fef3c7);
|
||
--gradient-16: radial-gradient(circle at 50% -250% var(--gradient-space), #374151, #111827, #000);
|
||
--gradient-17: conic-gradient(from -90deg at 50% -25% var(--gradient-space), blue, blueviolet);
|
||
--gradient-18:
|
||
linear-gradient(0deg var(--gradient-space), hsla(0 100% 50% / 80%), hsla(0 100% 50% / 0) 75%),
|
||
linear-gradient(60deg var(--gradient-space), hsla(60 100% 50% / 80%), hsla(60 100% 50% / 0) 75%),
|
||
linear-gradient(120deg var(--gradient-space), hsla(120 100% 50% / 80%), hsla(120 100% 50% / 0) 75%),
|
||
linear-gradient(180deg var(--gradient-space), hsla(180 100% 50% / 80%), hsla(180 100% 50% / 0) 75%),
|
||
linear-gradient(240deg var(--gradient-space), hsla(240 100% 50% / 80%), hsla(240 100% 50% / 0) 75%),
|
||
linear-gradient(300deg var(--gradient-space), hsla(300 100% 50% / 80%), hsla(300 100% 50% / 0) 75%)
|
||
;
|
||
--gradient-19: linear-gradient(to bottom right var(--gradient-space), #ffe259, #ffa751);
|
||
--gradient-20: conic-gradient(from -135deg at -10% center var(--gradient-space), #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4);
|
||
--gradient-21: conic-gradient(from -90deg at 25% 115% var(--gradient-space), #ff0000, #ff0066, #ff00cc, #cc00ff, #6600ff, #0000ff, #0000ff, #0000ff, #0000ff);
|
||
--gradient-22: linear-gradient(to bottom right var(--gradient-space), #acb6e5, #86fde8);
|
||
--gradient-23: linear-gradient(to bottom right var(--gradient-space), #536976, #292E49);
|
||
--gradient-24: conic-gradient(from .5turn at 0% 0% var(--gradient-space), #00c476, 10%, #82b0ff, 90%, #00c476);
|
||
--gradient-25: conic-gradient(at 125% 50% var(--gradient-space), #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7);
|
||
--gradient-26: linear-gradient(to bottom right var(--gradient-space), #9796f0, #fbc7d4);
|
||
--gradient-27: conic-gradient(from .5turn at bottom left var(--gradient-space), deeppink, rebeccapurple);
|
||
--gradient-28: conic-gradient(from -90deg at 50% 105% var(--gradient-space), white, orchid);
|
||
--gradient-29:
|
||
radial-gradient(
|
||
circle at top right var(--gradient-space),
|
||
hsl(250 100% 85%), hsl(250 100% 85% / 0%)
|
||
),
|
||
radial-gradient(
|
||
circle at bottom left var(--gradient-space),
|
||
hsl(220 90% 75%), hsl(220 90% 75% / 0%)
|
||
);
|
||
--gradient-30: radial-gradient(
|
||
circle at top right var(--gradient-space),
|
||
hsl(150 100% 50%), hsl(150 100% 50% / 0%)
|
||
),
|
||
radial-gradient(
|
||
circle at bottom left var(--gradient-space),
|
||
hsl(150 100% 84%), hsl(150 100% 84% / 0%)
|
||
);
|
||
--noise-1: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||
--noise-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||
--noise-3: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||
--noise-4: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||
--noise-5: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||
--noise-filter-1: contrast(300%) brightness(100%);
|
||
--noise-filter-2: contrast(200%) brightness(150%);
|
||
--noise-filter-3: contrast(200%) brightness(250%);
|
||
--noise-filter-4: contrast(200%) brightness(500%);
|
||
--noise-filter-5: contrast(200%) brightness(1000%);
|
||
}
|
||
|
||
@supports (background: linear-gradient(to right in oklab, #000, #fff)) {
|
||
:where(html) {
|
||
--gradient-space: in oklab;
|
||
}
|
||
}
|
||
/* ── Layer: 00-reset ─────────────────────────────────── */
|
||
/**
|
||
* 00-reset.css
|
||
* CSS reset and normalization
|
||
* Ported from: Pico CSS v2.1.1
|
||
*/
|
||
|
||
/* Box-sizing reset */
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
::before,
|
||
::after {
|
||
text-decoration: inherit;
|
||
vertical-align: inherit;
|
||
}
|
||
|
||
/* Document */
|
||
:where(:root) {
|
||
-webkit-tap-highlight-color: transparent;
|
||
-webkit-text-size-adjust: 100%;
|
||
text-size-adjust: 100%;
|
||
text-rendering: optimizeLegibility;
|
||
overflow-wrap: break-word;
|
||
tab-size: 4;
|
||
}
|
||
|
||
/* Root font-size — 100% default, responsive scaling in 01-tokens.css */
|
||
html {
|
||
font-size: 100%;
|
||
}
|
||
|
||
/* Body */
|
||
body {
|
||
width: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: var(--text-base); /* 1rem — inherits html responsive scaling */
|
||
font-family: var(--font-ui);
|
||
background-color: var(--surface);
|
||
color: var(--text);
|
||
}
|
||
|
||
/* Prose font — same neo-grotesque stack, consistent across all contexts */
|
||
/* article and [data-layout="prose"] inherit body font — no override needed */
|
||
|
||
/* Main */
|
||
main {
|
||
display: block;
|
||
}
|
||
|
||
/* Nested lists */
|
||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
||
margin: 0;
|
||
}
|
||
|
||
/* ── Layer: 01-tokens ─────────────────────────────────── */
|
||
/**
|
||
* 01-tokens.css
|
||
* ASW semantic layer — builds on Open Props
|
||
*
|
||
* Open Props (included by build.sh) provides the base scales:
|
||
* --gray-0…15, --green-0…12, --blue-0…12, --red-0…12, --yellow-0…12
|
||
* --size-1…15, --font-size-0…8, --font-weight-1…9
|
||
* --font-lineheight-0…5, --radius-1…6, --shadow-1…6
|
||
* --ease-1…5, --ease-spring-1…5, --ease-bounce-1…5
|
||
* --gradient-1…30, --animation-*, @keyframes
|
||
*
|
||
* This file defines only what Open Props doesn't:
|
||
* 1. Surface / text / accent — semantic aliases (override to theme)
|
||
* 2. Font stack aliases — prose, heading, ui (map to OP font stacks)
|
||
* 3. Agent-native tokens — task, callout, session, wikilink, redacted
|
||
* 4. A handful of precise values without direct OP equivalents
|
||
*
|
||
* To theme ASW:
|
||
* Override semantic aliases at :root in your own CSS.
|
||
* Use Open Props base tokens (--gray-*, --green-*, --size-*) as values.
|
||
*
|
||
* Lineage: absorbed patterns from Pico CSS, Open Props, Charts.css.
|
||
*/
|
||
|
||
/* ══════════════════════════════════════════════════════════════════
|
||
DARK THEME (default)
|
||
Using Open Props oklch gray scale — perceptually uniform steps.
|
||
Set --gray-hue to tint all surfaces. Example:
|
||
Trentuna: --gray-hue: 45 (warm amber tint)
|
||
vigilio-garden: --gray-hue: 150 (subtle green tint)
|
||
══════════════════════════════════════════════════════════════════ */
|
||
|
||
:root {
|
||
|
||
/* ── Surfaces ──────────────────────────────────────────────────── */
|
||
|
||
--surface: var(--gray-15); /* deepest background (oklch 10%) */
|
||
--surface-1: var(--gray-14); /* cards, sidebars (oklch 18%) */
|
||
--surface-2: var(--gray-13); /* hover, raised elements (oklch 25%) */
|
||
--surface-card: var(--surface-1);
|
||
--surface-hover: var(--surface-2);
|
||
|
||
/* ── Text ──────────────────────────────────────────────────────── */
|
||
|
||
--text: var(--gray-1); /* primary (95% lightness) */
|
||
--text-2: var(--gray-3); /* secondary (80%) */
|
||
--text-3: var(--gray-5); /* muted (68%) */
|
||
--text-dim: var(--gray-7); /* dim (58%) */
|
||
|
||
/* ── Accent ────────────────────────────────────────────────────── */
|
||
|
||
--accent: var(--green-5);
|
||
--accent-hover: var(--green-4);
|
||
--on-accent: var(--gray-15);
|
||
--accent-focus: rgba(34, 197, 94, 0.35);
|
||
--accent-subtle: rgba(34, 197, 94, 0.10);
|
||
--accent-underline: rgba(34, 197, 94, 0.45);
|
||
--accent-hover-underline: rgba(34, 197, 94, 0.55);
|
||
|
||
/* ── Links ─────────────────────────────────────────────────────── */
|
||
/* Blue — web convention. Accent (green) reserved for UI chrome. */
|
||
|
||
--link: var(--blue-5); /* #339af0 */
|
||
--link-hover: var(--blue-4); /* #4dabf7 */
|
||
--link-underline: rgba(51, 154, 240, 0.4);
|
||
--link-hover-underline: rgba(51, 154, 240, 0.55);
|
||
--link-focus: rgba(51, 154, 240, 0.35);
|
||
|
||
/* Secondary accents — reachable as named aliases */
|
||
--accent-blue: var(--blue-5);
|
||
--accent-red: var(--red-7);
|
||
--accent-orange: var(--yellow-6);
|
||
|
||
/* ── Border ────────────────────────────────────────────────────── */
|
||
|
||
--border: var(--gray-11); /* 37% lightness — visible against 10% bg */
|
||
--border-subtle: var(--gray-12); /* 31% lightness — very subtle */
|
||
--border-width: 1px;
|
||
--outline-width: 2px;
|
||
|
||
/* ── Font stacks ───────────────────────────────────────────────── */
|
||
/* Open Props named stacks — no web font loading required. */
|
||
/* --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova */
|
||
/* --font-monospace-code: Dank Mono, Operator Mono, Inconsolata... */
|
||
|
||
--font-prose: var(--font-neo-grotesque);
|
||
--font-heading: var(--font-neo-grotesque);
|
||
--font-ui: var(--font-neo-grotesque);
|
||
/* --font-mono: var(--font-monospace-code) — provided directly by Open Props */
|
||
|
||
/* ── Typography scale ─────────────────────────────────────────── */
|
||
/* Open Props provides: --font-size-0 (.75rem) through --font-size-8 (3.5rem) */
|
||
/* We define only the one gap: 0.875rem has no OP equivalent */
|
||
|
||
--text-xs: var(--font-size-0); /* 0.75rem — badges, fine print */
|
||
--text-sm: 0.875rem; /* 0.875rem — metadata, captions (no OP match) */
|
||
--text-base: var(--font-size-1); /* 1rem — body */
|
||
--text-2xl: var(--font-size-4); /* 1.5rem — subheadings */
|
||
--text-3xl: var(--font-size-5); /* 2rem — section headings */
|
||
|
||
/* ── Heading scale ─────────────────────────────────────────────── */
|
||
|
||
--h1-size: 1.875rem;
|
||
--h2-size: 1.5rem;
|
||
--h3-size: 1.25rem;
|
||
--h4-size: 1.0625rem;
|
||
--h5-size: 0.9375rem;
|
||
--h6-size: 0.8125rem;
|
||
|
||
--h1-weight: var(--font-weight-4); /* 400 */
|
||
--h2-weight: var(--font-weight-4);
|
||
--h3-weight: var(--font-weight-4);
|
||
--h4-weight: var(--font-weight-5); /* 500 */
|
||
--h5-weight: var(--font-weight-6); /* 600 */
|
||
--h6-weight: var(--font-weight-6);
|
||
|
||
--h1-color: var(--text);
|
||
--h2-color: var(--text);
|
||
--h3-color: var(--text);
|
||
--h4-color: var(--text-2);
|
||
--h5-color: var(--text-2);
|
||
--h6-color: var(--text-3);
|
||
|
||
/* ── Spacing aliases ─────────────────────────────────────────────
|
||
Open Props sizes: --size-1 (.25rem), --size-2 (.5rem), --size-3 (1rem),
|
||
--size-5 (1.5rem), --size-7 (2rem), --size-9 (4rem)
|
||
We alias these with semantic names AND define --space-3 (0.75rem gap)
|
||
──────────────────────────────────────────────────────────────── */
|
||
|
||
--space-1: var(--size-1); /* 0.25rem */
|
||
--space-2: var(--size-2); /* 0.50rem */
|
||
--space-3: 0.75rem; /* 0.75rem — no OP equivalent */
|
||
--space-4: var(--size-3); /* 1.00rem */
|
||
--space-5: var(--size-5); /* 1.50rem */
|
||
--space-6: var(--size-7); /* 2.00rem */
|
||
--space-8: var(--size-9); /* 4.00rem */
|
||
|
||
/* ── Rhythm ─────────────────────────────────────────────────────── */
|
||
|
||
--type-space: var(--space-4); /* paragraph / element spacing */
|
||
--type-space-top: var(--space-5); /* heading top margin after content */
|
||
--leading: 1.6;
|
||
--leading-tight: var(--font-lineheight-1); /* 1.25 */
|
||
|
||
/* ── Radius ─────────────────────────────────────────────────────── */
|
||
/* Open Props: --radius-1 (2px), --radius-2 (5px), --radius-3 (1rem) */
|
||
|
||
--radius-sm: var(--radius-1); /* 2px */
|
||
--radius-md: 4px; /* between OP radius-1 and radius-2 */
|
||
|
||
/* ── Easing ─────────────────────────────────────────────────────── */
|
||
/* Open Props provides rich curves — we alias the most-used ones */
|
||
|
||
--ease: 0.2s var(--ease-3);
|
||
--ease-fast: 0.1s var(--ease-2);
|
||
|
||
/* ── Inline element tokens ─────────────────────────────────────── */
|
||
|
||
--selection: rgba(96, 165, 250, 0.25);
|
||
--mark-bg: rgba(245, 158, 11, 0.2);
|
||
--mark-color: var(--accent-orange);
|
||
--kbd-bg: var(--text);
|
||
--kbd-color: var(--surface);
|
||
--code-color: var(--text-2);
|
||
--table-stripe: rgba(38, 38, 38, 0.5);
|
||
|
||
/* ── Form tokens ─────────────────────────────────────────────────── */
|
||
|
||
--input-bg: var(--surface-1);
|
||
--input-border: var(--border);
|
||
--input-active-bg: var(--surface);
|
||
--input-selected: rgba(34, 197, 94, 0.2);
|
||
--input-px: var(--space-4);
|
||
--input-py: var(--space-3);
|
||
--disabled-opacity: 0.5;
|
||
|
||
/* ── State colors ─────────────────────────────────────────────────── */
|
||
|
||
--ok: var(--green-5);
|
||
--warn: var(--yellow-5);
|
||
--error: var(--red-7);
|
||
--info: var(--blue-5);
|
||
--blocked: var(--gray-5);
|
||
|
||
--error-active: var(--red-9);
|
||
--error-focus: rgba(239, 68, 68, 0.375);
|
||
|
||
/* ── Component tokens ─────────────────────────────────────────────── */
|
||
|
||
--track-bg: var(--surface-2); /* progress / meter background */
|
||
--modal-overlay: rgba(10, 10, 10, 0.8);
|
||
--modal-backdrop: blur(0.375rem);
|
||
--accordion-active: var(--accent-hover);
|
||
|
||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 115, 115)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════
|
||
AGENT-NATIVE TOKENS
|
||
These are ASW's actual contribution — concepts no other framework has.
|
||
Propose additions to Open Props: data-task, data-callout, data-session.
|
||
══════════════════════════════════════════════════════════════════ */
|
||
|
||
--task-done: var(--green-5);
|
||
--task-blocked: var(--red-5);
|
||
--task-wip: var(--yellow-5);
|
||
--task-todo: var(--gray-5);
|
||
|
||
--callout-info: var(--blue-5);
|
||
--callout-warn: var(--yellow-5);
|
||
--callout-error: var(--red-5);
|
||
--callout-note: var(--gray-5);
|
||
|
||
--session-bg: var(--surface-1);
|
||
--wikilink: var(--blue-4);
|
||
--redacted: var(--gray-8);
|
||
|
||
}
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════
|
||
LIGHT MODE — override semantic aliases only
|
||
══════════════════════════════════════════════════════════════════ */
|
||
|
||
@media (prefers-color-scheme: light) {
|
||
:root {
|
||
color-scheme: light;
|
||
|
||
--surface: var(--gray-0); /* 99% lightness */
|
||
--surface-1: var(--gray-1); /* 95% */
|
||
--surface-2: var(--gray-2); /* 88% */
|
||
--surface-card: var(--gray-0);
|
||
--surface-hover: var(--gray-1);
|
||
|
||
--text: var(--gray-14); /* 18% — dark but not pure black */
|
||
--text-2: var(--gray-11); /* 37% */
|
||
--text-3: var(--gray-8); /* 53% */
|
||
--text-dim: var(--gray-6); /* 63% */
|
||
|
||
--accent: var(--green-8);
|
||
--accent-hover: var(--green-9);
|
||
--on-accent: var(--gray-0);
|
||
--accent-focus: rgba(22, 163, 74, 0.35);
|
||
--accent-subtle: rgba(22, 163, 74, 0.10);
|
||
|
||
--border: var(--gray-3); /* 80% — visible on near-white */
|
||
--border-subtle: var(--gray-2); /* 88% — very subtle */
|
||
|
||
--link: var(--blue-8); /* #1971c2 */
|
||
--link-hover: var(--blue-7); /* #1c7ed6 */
|
||
--link-underline: rgba(25, 113, 194, 0.4);
|
||
--link-hover-underline: rgba(25, 113, 194, 0.55);
|
||
--link-focus: rgba(25, 113, 194, 0.35);
|
||
|
||
--h1-color: var(--gray-15);
|
||
--h2-color: var(--gray-14);
|
||
--h3-color: var(--gray-13);
|
||
--h4-color: var(--gray-12);
|
||
--h5-color: var(--gray-11);
|
||
--h6-color: var(--gray-10);
|
||
|
||
--mark-bg: #fce6bf;
|
||
--mark-color: var(--gray-15);
|
||
--selection: rgba(37, 99, 235, 0.2);
|
||
|
||
--code-color: var(--text-3);
|
||
--table-stripe: rgba(111, 120, 135, 0.04);
|
||
|
||
--input-bg: var(--gray-0);
|
||
--input-border: var(--gray-4);
|
||
--input-active-bg: var(--gray-0);
|
||
--input-selected: var(--gray-2);
|
||
|
||
--track-bg: var(--gray-3);
|
||
--modal-overlay: rgba(232, 234, 237, 0.75);
|
||
|
||
--error: oklch(50% 0.17 20);
|
||
--error-active: oklch(44% 0.18 20);
|
||
|
||
--session-bg: var(--surface-1);
|
||
}
|
||
}
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════
|
||
RESPONSIVE FONT SCALING
|
||
Subtle upscaling at large viewports — all rem values follow.
|
||
══════════════════════════════════════════════════════════════════ */
|
||
|
||
@media (min-width: 1024px) { html { font-size: 103%; } }
|
||
@media (min-width: 1280px) { html { font-size: 106%; } }
|
||
@media (min-width: 1536px) { html { font-size: 109%; } }
|
||
|
||
/* ── Layer: 02-semantic ─────────────────────────────────── */
|
||
/**
|
||
* 02-semantic.css
|
||
* Semantic HTML element styles
|
||
* Part of: Agentic Semantic Web
|
||
*
|
||
* Ported from: Pico CSS v2.1.1
|
||
* License: MIT
|
||
*
|
||
* This layer handles typography and semantic HTML elements.
|
||
* Classes are NOT supported—use semantic tags only.
|
||
*/
|
||
|
||
/* ── Typography: Headings ──────────────────────────────────────────── */
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
margin-top: 0;
|
||
margin-bottom: var(--type-space);
|
||
line-height: var(--leading-tight);
|
||
font-family: var(--font-heading);
|
||
text-wrap: balance;
|
||
}
|
||
|
||
h1 {
|
||
font-size: var(--h1-size);
|
||
color: var(--h1-color);
|
||
font-weight: var(--h1-weight);
|
||
}
|
||
|
||
h2 {
|
||
font-size: var(--h2-size);
|
||
color: var(--h2-color);
|
||
font-weight: var(--h2-weight);
|
||
}
|
||
|
||
h3 {
|
||
font-size: var(--h3-size);
|
||
color: var(--h3-color);
|
||
font-weight: var(--h3-weight);
|
||
}
|
||
|
||
h4 {
|
||
font-size: var(--h4-size);
|
||
color: var(--h4-color);
|
||
font-weight: var(--h4-weight);
|
||
}
|
||
|
||
h5 {
|
||
font-size: var(--h5-size);
|
||
color: var(--h5-color);
|
||
font-weight: var(--h5-weight);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
h6 {
|
||
font-size: var(--h6-size);
|
||
color: var(--h6-color);
|
||
font-weight: var(--h6-weight);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
|
||
/* Add spacing before headings that follow content elements */
|
||
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
|
||
margin-top: var(--type-space-top);
|
||
}
|
||
|
||
/* ── Typography: UI elements — structural, navigational, informational ── */
|
||
/* These override the prose body font with the humanist sans UI stack. */
|
||
|
||
nav,
|
||
header,
|
||
footer,
|
||
label,
|
||
th,
|
||
caption,
|
||
small,
|
||
figcaption,
|
||
button,
|
||
input,
|
||
select,
|
||
textarea,
|
||
hgroup > p,
|
||
hgroup > small {
|
||
font-family: var(--font-ui);
|
||
}
|
||
|
||
/* ── Typography: Paragraphs ────────────────────────────────────────── */
|
||
|
||
p {
|
||
margin-top: 0;
|
||
margin-bottom: var(--type-space);
|
||
color: var(--text);
|
||
font-style: normal;
|
||
font-weight: var(--font-weight-4);
|
||
}
|
||
|
||
/* ── Typography: Lists ─────────────────────────────────────────────── */
|
||
|
||
address,
|
||
dl,
|
||
ol,
|
||
ul {
|
||
margin-top: 0;
|
||
margin-bottom: var(--type-space);
|
||
color: var(--text);
|
||
font-style: normal;
|
||
font-weight: var(--font-weight-4);
|
||
}
|
||
|
||
:where(ol, ul) li {
|
||
margin-bottom: calc(var(--type-space) * 0.25);
|
||
}
|
||
|
||
/* Nested lists: reduce spacing */
|
||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
||
margin: 0;
|
||
margin-top: calc(var(--type-space) * 0.25);
|
||
}
|
||
|
||
ul li {
|
||
list-style: square;
|
||
}
|
||
|
||
/* ── Typography: Blockquote ────────────────────────────────────────── */
|
||
|
||
blockquote {
|
||
display: block;
|
||
margin: var(--type-space) 0;
|
||
padding: var(--space-4);
|
||
border-right: none;
|
||
border-left: 0.25rem solid var(--border);
|
||
border-inline-start: 0.25rem solid var(--border);
|
||
border-inline-end: none;
|
||
}
|
||
|
||
blockquote footer {
|
||
margin-top: calc(var(--type-space) * 0.5);
|
||
color: var(--text-3);
|
||
}
|
||
|
||
/* ── Typography: Horizontal Rule ───────────────────────────────────── */
|
||
|
||
hr {
|
||
height: 0;
|
||
margin: var(--type-space) 0;
|
||
border: 0;
|
||
border-top: 1px solid var(--border);
|
||
color: inherit;
|
||
}
|
||
|
||
/* ── Typography: Inline Elements ───────────────────────────────────── */
|
||
|
||
b,
|
||
strong {
|
||
font-weight: bolder;
|
||
}
|
||
|
||
mark {
|
||
padding: 0.125rem 0.25rem;
|
||
background-color: var(--mark-bg);
|
||
color: var(--mark-color);
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
ins {
|
||
color: var(--text-2);
|
||
text-decoration: none;
|
||
}
|
||
|
||
del {
|
||
color: var(--accent-red);
|
||
}
|
||
|
||
abbr[title] {
|
||
border-bottom: 1px dotted;
|
||
text-decoration: none;
|
||
cursor: help;
|
||
}
|
||
|
||
sub,
|
||
sup {
|
||
position: relative;
|
||
font-size: 0.75em;
|
||
line-height: 0;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
sub {
|
||
bottom: -0.25em;
|
||
}
|
||
|
||
sup {
|
||
top: -0.5em;
|
||
}
|
||
|
||
small {
|
||
font-size: 0.875em;
|
||
}
|
||
|
||
/* ── Links ─────────────────────────────────────────────────────────── */
|
||
|
||
:where(a:not([role=button])),
|
||
[role=link] {
|
||
|
||
|
||
|
||
outline: none;
|
||
background-color: transparent;
|
||
color: var(--link);
|
||
text-decoration: underline;
|
||
text-decoration-color: var(--link-underline);
|
||
text-underline-offset: 0.125em;
|
||
transition: background-color var(--ease),
|
||
color var(--ease),
|
||
text-decoration var(--ease),
|
||
box-shadow var(--ease);
|
||
}
|
||
|
||
:where(a:not([role=button])):is(:hover, :active, :focus),
|
||
[role=link]:is(:hover, :active, :focus) {
|
||
color: var(--link-hover);
|
||
text-decoration-color: var(--link-hover-underline);
|
||
}
|
||
|
||
:where(a:not([role=button])):focus-visible,
|
||
[role=link]:focus-visible {
|
||
box-shadow: 0 0 0 var(--outline-width) var(--link-focus);
|
||
}
|
||
|
||
/* ── Text Selection ────────────────────────────────────────────────── */
|
||
|
||
::selection {
|
||
background-color: var(--selection);
|
||
}
|
||
|
||
/* ── Tables ────────────────────────────────────────────────────────── */
|
||
|
||
:where(table) {
|
||
width: 100%;
|
||
margin-top: 0;
|
||
margin-bottom: var(--type-space);
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
text-indent: 0;
|
||
color: var(--text);
|
||
font-style: normal;
|
||
font-weight: var(--font-weight-4);
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: calc(var(--space-4) / 2) var(--space-4);
|
||
border-bottom: var(--border-width) solid var(--border);
|
||
background-color: transparent;
|
||
color: var(--text);
|
||
font-weight: var(--font-weight-4);
|
||
text-align: left;
|
||
}
|
||
|
||
thead th,
|
||
thead td {
|
||
font-weight: 600;
|
||
border-bottom-width: 2px;
|
||
}
|
||
|
||
tfoot th,
|
||
tfoot td {
|
||
border-top: var(--border-width) solid var(--border);
|
||
border-bottom: 0;
|
||
}
|
||
|
||
/* Striped tables (class-based but useful) */
|
||
table.striped tbody tr:nth-child(odd) th,
|
||
table.striped tbody tr:nth-child(odd) td {
|
||
background-color: var(--table-stripe);
|
||
}
|
||
|
||
/* ── Code & Preformatted Text ──────────────────────────────────────── */
|
||
|
||
pre,
|
||
code,
|
||
kbd,
|
||
samp {
|
||
font-size: 0.875em;
|
||
font-family: var(--font-mono);
|
||
border-radius: var(--radius-md);
|
||
background: var(--surface-1);
|
||
color: var(--code-color);
|
||
font-weight: var(--font-weight-4);
|
||
line-height: initial;
|
||
}
|
||
|
||
/* Inline code elements */
|
||
code,
|
||
kbd,
|
||
samp {
|
||
display: inline-block;
|
||
padding: 0.375rem;
|
||
}
|
||
|
||
/* Code blocks */
|
||
pre {
|
||
display: block;
|
||
margin-top: 0;
|
||
margin-bottom: var(--space-4);
|
||
padding: var(--space-4);
|
||
overflow-x: auto;
|
||
-ms-overflow-style: scrollbar;
|
||
}
|
||
|
||
pre > code,
|
||
pre > samp {
|
||
display: block;
|
||
padding: 0;
|
||
background: none;
|
||
font-size: inherit;
|
||
font-family: inherit;
|
||
line-height: var(--leading);
|
||
}
|
||
|
||
/* Keyboard input */
|
||
kbd {
|
||
background-color: var(--kbd-bg);
|
||
color: var(--kbd-color);
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
/* ── Prism.js Syntax Highlighting Theme ────────────────────────────── *
|
||
*
|
||
* These rules style Prism.js token classes using ASW tokens.
|
||
* asw.css provides the theme; each page loads Prism via:
|
||
*
|
||
* <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
|
||
* <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
|
||
* <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||
*
|
||
* The CDN theme's colors are overridden here. ASW tokens handle dark/light.
|
||
* ─────────────────────────────────────────────────────────────────── */
|
||
|
||
/* Reset Prism default background — pre already styled by ASW */
|
||
code[class*="language-"],
|
||
pre[class*="language-"] {
|
||
color: var(--code-color);
|
||
background: none;
|
||
text-shadow: none;
|
||
}
|
||
|
||
pre[class*="language-"] {
|
||
background: var(--surface-1);
|
||
}
|
||
|
||
/* Token colors — dark (default) */
|
||
.token.comment,
|
||
.token.prolog,
|
||
.token.doctype,
|
||
.token.cdata {
|
||
color: var(--gray-6); /* muted: ~55% lightness */
|
||
font-style: italic;
|
||
}
|
||
|
||
.token.punctuation {
|
||
color: var(--text-3); /* slightly muted */
|
||
}
|
||
|
||
.token.tag,
|
||
.token.deleted {
|
||
color: var(--red-4); /* HTML tags, deleted code */
|
||
}
|
||
|
||
.token.attr-name,
|
||
.token.namespace {
|
||
color: var(--yellow-4); /* attribute names */
|
||
}
|
||
|
||
.token.string,
|
||
.token.attr-value,
|
||
.token.char,
|
||
.token.inserted {
|
||
color: var(--green-4); /* strings, values */
|
||
}
|
||
|
||
.token.number,
|
||
.token.boolean,
|
||
.token.constant,
|
||
.token.symbol {
|
||
color: var(--orange-4); /* literals */
|
||
}
|
||
|
||
.token.selector,
|
||
.token.builtin {
|
||
color: var(--teal-4); /* CSS selectors, builtins */
|
||
}
|
||
|
||
.token.keyword,
|
||
.token.atrule {
|
||
color: var(--blue-4); /* keywords, @rules */
|
||
}
|
||
|
||
.token.function,
|
||
.token.class-name {
|
||
color: var(--cyan-4); /* function/class names */
|
||
}
|
||
|
||
.token.property {
|
||
color: var(--blue-5); /* object properties */
|
||
}
|
||
|
||
.token.operator,
|
||
.token.entity,
|
||
.token.url {
|
||
color: var(--text-2); /* operators */
|
||
}
|
||
|
||
.token.regex {
|
||
color: var(--orange-5); /* regex literals */
|
||
}
|
||
|
||
.token.important,
|
||
.token.variable {
|
||
color: var(--yellow-5); /* !important, variables */
|
||
font-weight: var(--font-weight-5);
|
||
}
|
||
|
||
.token.bold { font-weight: var(--font-weight-7); }
|
||
.token.italic { font-style: italic; }
|
||
|
||
/* Light mode overrides */
|
||
@media (prefers-color-scheme: light) {
|
||
.token.comment,
|
||
.token.prolog,
|
||
.token.doctype,
|
||
.token.cdata { color: var(--gray-6); }
|
||
|
||
.token.punctuation { color: var(--gray-8); }
|
||
|
||
.token.tag,
|
||
.token.deleted { color: var(--red-8); }
|
||
|
||
.token.attr-name,
|
||
.token.namespace { color: var(--yellow-9); }
|
||
|
||
.token.string,
|
||
.token.attr-value,
|
||
.token.char,
|
||
.token.inserted { color: var(--green-8); }
|
||
|
||
.token.number,
|
||
.token.boolean,
|
||
.token.constant,
|
||
.token.symbol { color: var(--orange-8); }
|
||
|
||
.token.selector,
|
||
.token.builtin { color: var(--teal-8); }
|
||
|
||
.token.keyword,
|
||
.token.atrule { color: var(--blue-8); }
|
||
|
||
.token.function,
|
||
.token.class-name { color: var(--cyan-9); }
|
||
|
||
.token.property { color: var(--blue-9); }
|
||
|
||
.token.operator,
|
||
.token.entity,
|
||
.token.url { color: var(--gray-8); }
|
||
|
||
.token.regex { color: var(--orange-7); }
|
||
|
||
.token.important,
|
||
.token.variable { color: var(--yellow-9); }
|
||
}
|
||
|
||
/* ── Details / Summary ─────────────────────────────────────────────── */
|
||
|
||
details {
|
||
display: block;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
details summary {
|
||
line-height: 1rem;
|
||
list-style-type: none;
|
||
cursor: pointer;
|
||
transition: color var(--ease);
|
||
color: var(--accent);
|
||
}
|
||
|
||
/* Hide browser default marker */
|
||
details summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
details summary::marker {
|
||
display: none;
|
||
}
|
||
|
||
details summary::-moz-list-bullet {
|
||
list-style-type: none;
|
||
}
|
||
|
||
/* CSS-drawn chevron using Unicode character ▸ (U+25B8) */
|
||
details summary::after {
|
||
content: "▸";
|
||
display: inline-block;
|
||
width: 1rem;
|
||
height: 1rem;
|
||
margin-inline-start: calc(var(--space-4, 1rem) * 0.5);
|
||
float: right;
|
||
font-size: var(--text-sm);
|
||
line-height: 1rem;
|
||
text-align: center;
|
||
color: var(--text-3);
|
||
transform: rotate(90deg); /* Point down when closed */
|
||
transition: transform var(--ease);
|
||
}
|
||
|
||
details summary:focus {
|
||
outline: none;
|
||
}
|
||
|
||
details summary:focus-visible {
|
||
outline: var(--outline-width) solid var(--accent-focus);
|
||
outline-offset: calc(var(--space-4, 1rem) * 0.5);
|
||
color: var(--accordion-active);
|
||
}
|
||
|
||
/* Open state */
|
||
details[open] > summary {
|
||
margin-bottom: var(--space-4);
|
||
color: var(--text-3);
|
||
}
|
||
|
||
details[open] > summary::after {
|
||
transform: rotate(180deg); /* Point down when open */
|
||
}
|
||
|
||
/* ── Dialog / Modal ────────────────────────────────────────────────── */
|
||
|
||
dialog {
|
||
display: flex;
|
||
z-index: 999;
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: inherit;
|
||
min-width: 100%;
|
||
height: inherit;
|
||
min-height: 100%;
|
||
padding: 0;
|
||
border: 0;
|
||
backdrop-filter: var(--modal-backdrop);
|
||
background-color: var(--modal-overlay);
|
||
color: var(--text);
|
||
}
|
||
|
||
dialog > article {
|
||
width: 100%;
|
||
max-height: calc(100vh - var(--space-4) * 2);
|
||
margin: var(--space-4);
|
||
overflow: auto;
|
||
}
|
||
|
||
/* Responsive max-widths for modal content */
|
||
@media (min-width: 576px) {
|
||
dialog > article {
|
||
max-width: 510px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
dialog > article {
|
||
max-width: 700px;
|
||
}
|
||
}
|
||
|
||
/* Modal header */
|
||
dialog > article > header > * {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
dialog > article > header .close,
|
||
dialog > article > header :is(a, button)[rel=prev] {
|
||
margin: 0;
|
||
margin-left: var(--space-4);
|
||
padding: 0;
|
||
float: right;
|
||
}
|
||
|
||
/* Modal footer */
|
||
dialog > article > footer {
|
||
text-align: right;
|
||
}
|
||
|
||
dialog > article > footer button,
|
||
dialog > article > footer [role=button] {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
dialog > article > footer button:not(:first-of-type),
|
||
dialog > article > footer [role=button]:not(:first-of-type) {
|
||
margin-left: calc(var(--space-4) * 0.5);
|
||
}
|
||
|
||
/* Close button: Unicode ✕ (U+2715) instead of SVG */
|
||
dialog > article .close,
|
||
dialog > article :is(a, button)[rel=prev] {
|
||
display: block;
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
margin-top: calc(var(--space-4) * -0.5);
|
||
margin-bottom: var(--space-4);
|
||
margin-left: auto;
|
||
border: none;
|
||
background-color: transparent;
|
||
color: var(--text-3);
|
||
font-size: 1.5rem;
|
||
line-height: 1;
|
||
text-align: center;
|
||
opacity: 0.5;
|
||
transition: opacity var(--ease);
|
||
cursor: pointer;
|
||
}
|
||
|
||
dialog > article .close::before,
|
||
dialog > article :is(a, button)[rel=prev]::before {
|
||
content: "✕"; /* Unicode heavy multiplication X */
|
||
}
|
||
|
||
dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
||
dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Hidden state */
|
||
dialog:not([open]),
|
||
dialog[open=false] {
|
||
display: none;
|
||
}
|
||
|
||
/* Body scroll lock when modal is open */
|
||
.modal-is-open {
|
||
padding-right: var(--scrollbar-width, 0px);
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
touch-action: none;
|
||
}
|
||
|
||
.modal-is-open dialog {
|
||
pointer-events: auto;
|
||
touch-action: auto;
|
||
}
|
||
|
||
/* Animations (only if motion is not reduced) */
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
:where(.modal-is-opening, .modal-is-closing) dialog,
|
||
:where(.modal-is-opening, .modal-is-closing) dialog > article {
|
||
animation-duration: 0.2s;
|
||
animation-timing-function: ease-in-out;
|
||
animation-fill-mode: both;
|
||
}
|
||
|
||
:where(.modal-is-opening, .modal-is-closing) dialog {
|
||
animation-duration: 0.8s;
|
||
animation-name: modal-overlay;
|
||
}
|
||
|
||
:where(.modal-is-opening, .modal-is-closing) dialog > article {
|
||
animation-delay: 0.2s;
|
||
animation-name: modal;
|
||
}
|
||
|
||
.modal-is-closing dialog,
|
||
.modal-is-closing dialog > article {
|
||
animation-delay: 0s;
|
||
animation-direction: reverse;
|
||
}
|
||
|
||
@keyframes modal-overlay {
|
||
from {
|
||
backdrop-filter: none;
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
@keyframes modal {
|
||
from {
|
||
transform: translateY(-100%);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Respect reduced motion: instant show/hide */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
dialog,
|
||
dialog > article {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
}
|
||
|
||
/* ── Figure & Figcaption ───────────────────────────────────────────── */
|
||
|
||
figure {
|
||
display: block;
|
||
margin: 0;
|
||
margin-bottom: var(--space-4);
|
||
padding: 0;
|
||
}
|
||
|
||
figure figcaption {
|
||
padding: calc(var(--space-4) * 0.5) 0;
|
||
color: var(--text-3);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
/* ── Progress ──────────────────────────────────────────────────────── */
|
||
|
||
progress {
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
display: inline-block;
|
||
vertical-align: baseline;
|
||
width: 100%;
|
||
height: 0.5rem;
|
||
margin-bottom: calc(var(--space-4) * 0.5);
|
||
overflow: hidden;
|
||
border: 0;
|
||
border-radius: var(--radius-md);
|
||
background-color: var(--track-bg);
|
||
color: var(--accent);
|
||
}
|
||
|
||
progress::-webkit-progress-bar {
|
||
border-radius: var(--radius-md);
|
||
background: none;
|
||
}
|
||
|
||
progress[value]::-webkit-progress-value {
|
||
background-color: var(--accent);
|
||
transition: inline-size var(--ease);
|
||
}
|
||
|
||
progress::-moz-progress-bar {
|
||
background-color: var(--accent);
|
||
}
|
||
|
||
/* Indeterminate progress (animated) - respect motion preferences */
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
progress:indeterminate {
|
||
background: var(--track-bg)
|
||
linear-gradient(to right,
|
||
var(--accent) 30%,
|
||
var(--track-bg) 30%)
|
||
top left / 150% 150% no-repeat;
|
||
animation: progress-indeterminate 1s linear infinite;
|
||
}
|
||
|
||
progress:indeterminate[value]::-webkit-progress-value {
|
||
background-color: transparent;
|
||
}
|
||
|
||
@keyframes progress-indeterminate {
|
||
0% {
|
||
background-position: 200% 0;
|
||
}
|
||
100% {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
progress:indeterminate {
|
||
background: var(--track-bg);
|
||
}
|
||
}
|
||
|
||
/* ── Meter ─────────────────────────────────────────────────────────── */
|
||
|
||
meter {
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
display: inline-block;
|
||
vertical-align: baseline;
|
||
width: 100%;
|
||
height: 0.5rem;
|
||
margin-bottom: calc(var(--space-4) * 0.5);
|
||
overflow: hidden;
|
||
border: 0;
|
||
border-radius: var(--radius-md);
|
||
background-color: var(--track-bg);
|
||
accent-color: var(--accent); /* Modern CSS: browser renders with our accent */
|
||
}
|
||
|
||
/* Webkit meter styling */
|
||
meter::-webkit-meter-bar {
|
||
border-radius: var(--radius-md);
|
||
background-color: var(--track-bg);
|
||
}
|
||
|
||
meter::-webkit-meter-optimum-value {
|
||
background-color: var(--accent);
|
||
}
|
||
|
||
meter::-webkit-meter-suboptimum-value {
|
||
background-color: var(--accent-blue);
|
||
}
|
||
|
||
meter::-webkit-meter-even-less-good-value {
|
||
background-color: var(--accent-red); /* Red-ish for bad values */
|
||
}
|
||
|
||
/* Firefox meter styling */
|
||
meter::-moz-meter-bar {
|
||
border-radius: var(--radius-md);
|
||
background-color: var(--accent);
|
||
}
|
||
|
||
meter:-moz-meter-optimum::-moz-meter-bar {
|
||
background-color: var(--accent);
|
||
}
|
||
|
||
meter:-moz-meter-sub-optimum::-moz-meter-bar {
|
||
background-color: var(--accent-blue);
|
||
}
|
||
|
||
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
|
||
background-color: var(--accent-red);
|
||
}
|
||
|
||
/* ── Content Container ─────────────────────────────────────────────── */
|
||
/* body > nav, body > main, and body > footer share container alignment so agents
|
||
can write <body><nav>…<main>…<footer> and get consistent widths.
|
||
Scoped to body > nav/main/footer to avoid affecting nested elements
|
||
(breadcrumbs, pagination, mains inside grid layouts). */
|
||
|
||
body > nav,
|
||
body > main,
|
||
body > footer {
|
||
width: 100%;
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
padding-right: var(--space-4);
|
||
padding-left: var(--space-4);
|
||
}
|
||
|
||
/* Default: constrained container (replaces .container class) */
|
||
@media (min-width: 576px) {
|
||
body > nav,
|
||
body > main:not([data-layout="fluid"]),
|
||
body > footer {
|
||
max-width: 510px;
|
||
padding-right: 0;
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
body > nav,
|
||
body > main:not([data-layout="fluid"]),
|
||
body > footer {
|
||
max-width: 700px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
body > nav,
|
||
body > main:not([data-layout="fluid"]),
|
||
body > footer {
|
||
max-width: 950px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1280px) {
|
||
body > nav,
|
||
body > main:not([data-layout="fluid"]),
|
||
body > footer {
|
||
max-width: 1200px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1536px) {
|
||
body > nav,
|
||
body > main:not([data-layout="fluid"]),
|
||
body > footer {
|
||
max-width: 1450px;
|
||
}
|
||
}
|
||
|
||
/* Full-width opt-out */
|
||
body > main[data-layout="fluid"] {
|
||
max-width: none;
|
||
}
|
||
|
||
/* ── Layer: 03-components ─────────────────────────────────── */
|
||
/**
|
||
* 03-components.css
|
||
* UI component patterns (buttons, forms, nav, dialog, details)
|
||
* Part of: Agentic Semantic Web
|
||
*
|
||
* Ported from: Pico CSS v2.1.1
|
||
* License: MIT
|
||
*
|
||
* Modernizations:
|
||
* - Uses `accent-color` for checkbox/radio (simpler than background-image)
|
||
* - Drops class-based button variants (.secondary, .contrast, .outline)
|
||
*/
|
||
|
||
/* ── Buttons ───────────────────────────────────────────────────────────*/
|
||
|
||
button {
|
||
margin: 0;
|
||
overflow: visible;
|
||
font-family: inherit;
|
||
text-transform: none;
|
||
}
|
||
|
||
button,
|
||
[type=submit],
|
||
[type=reset],
|
||
[type=button],
|
||
[role=button] {
|
||
|
||
|
||
|
||
display: inline-block;
|
||
padding: var(--input-py) var(--input-px);
|
||
border: var(--border-width) solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
outline: none;
|
||
background-color: var(--surface);
|
||
color: var(--text);
|
||
font-weight: var(--font-weight-4);
|
||
font-size: var(--text-base);
|
||
line-height: var(--leading);
|
||
text-align: center;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
transition: background-color var(--ease),
|
||
border-color var(--ease),
|
||
color var(--ease);
|
||
}
|
||
|
||
button:is(:hover, :active, :focus-visible),
|
||
[type=submit]:is(:hover, :active, :focus-visible),
|
||
[type=reset]:is(:hover, :active, :focus-visible),
|
||
[type=button]:is(:hover, :active, :focus-visible),
|
||
[role=button]:is(:hover, :active, :focus-visible) {
|
||
background-color: var(--surface-hover);
|
||
border-color: var(--border);
|
||
color: var(--text);
|
||
}
|
||
|
||
button:focus-visible,
|
||
[type=submit]:focus-visible,
|
||
[type=reset]:focus-visible,
|
||
[type=button]:focus-visible,
|
||
[role=button]:focus-visible {
|
||
box-shadow: 0 0 0 var(--outline-width) var(--accent-focus);
|
||
}
|
||
|
||
button[disabled],
|
||
[type=submit][disabled],
|
||
[type=reset][disabled],
|
||
[type=button][disabled],
|
||
[role=button][disabled] {
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ── Form Elements ─────────────────────────────────────────────────────*/
|
||
|
||
input,
|
||
optgroup,
|
||
select,
|
||
textarea {
|
||
margin: 0;
|
||
font-size: var(--text-base);
|
||
line-height: var(--leading);
|
||
font-family: inherit;
|
||
letter-spacing: inherit;
|
||
}
|
||
|
||
fieldset {
|
||
width: 100%;
|
||
margin: 0;
|
||
margin-bottom: var(--space-4);
|
||
padding: 0;
|
||
border: 0;
|
||
}
|
||
|
||
fieldset legend,
|
||
label {
|
||
display: block;
|
||
margin-bottom: calc(var(--space-4) * 0.375);
|
||
color: var(--text);
|
||
font-weight: var(--font-weight-4);
|
||
}
|
||
|
||
input:not([type=checkbox], [type=radio], [type=range], [type=file]),
|
||
select,
|
||
textarea {
|
||
width: 100%;
|
||
padding: var(--input-py) var(--input-px);
|
||
border: var(--border-width) solid var(--input-border);
|
||
border-radius: var(--radius-md);
|
||
outline: none;
|
||
background-color: var(--input-bg);
|
||
color: var(--text);
|
||
font-weight: var(--font-weight-4);
|
||
transition: background-color var(--ease),
|
||
border-color var(--ease),
|
||
color var(--ease);
|
||
}
|
||
|
||
input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):is(:active, :focus-visible),
|
||
select:not([readonly]):is(:active, :focus-visible),
|
||
textarea:not([readonly]):is(:active, :focus-visible) {
|
||
border-color: var(--accent);
|
||
background-color: var(--input-active-bg);
|
||
}
|
||
|
||
input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):focus-visible,
|
||
select:not([readonly]):focus-visible,
|
||
textarea:not([readonly]):focus-visible {
|
||
box-shadow: 0 0 0 var(--outline-width) var(--accent);
|
||
}
|
||
|
||
input:not([type=checkbox], [type=radio], [type=range], [type=file])[disabled],
|
||
select[disabled],
|
||
textarea[disabled] {
|
||
opacity: var(--disabled-opacity);
|
||
pointer-events: none;
|
||
}
|
||
|
||
input::placeholder,
|
||
textarea::placeholder,
|
||
select:invalid {
|
||
color: var(--text-3);
|
||
opacity: 1;
|
||
}
|
||
|
||
input:not([type=checkbox], [type=radio]),
|
||
select,
|
||
textarea {
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
/* ── Select Dropdown ───────────────────────────────────────────────────*/
|
||
|
||
select:not([multiple], [size]) {
|
||
padding-right: calc(var(--input-px) + 1.5rem);
|
||
background-image: var(--icon-chevron);
|
||
background-position: center right 0.75rem;
|
||
background-size: 1rem auto;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
select[multiple] option:checked {
|
||
background: var(--input-selected);
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ── Textarea ──────────────────────────────────────────────────────────*/
|
||
|
||
textarea {
|
||
display: block;
|
||
resize: vertical;
|
||
}
|
||
|
||
/* ── Checkboxes & Radios (Modern CSS) ──────────────────────────────────*/
|
||
|
||
label:has([type=checkbox], [type=radio]) {
|
||
width: fit-content;
|
||
cursor: pointer;
|
||
}
|
||
|
||
[type=checkbox],
|
||
[type=radio] {
|
||
width: 1.25em;
|
||
height: 1.25em;
|
||
margin-top: -0.125em;
|
||
margin-right: 0.5em;
|
||
vertical-align: middle;
|
||
cursor: pointer;
|
||
|
||
/* Modern CSS: use browser's native styling with our accent color */
|
||
accent-color: var(--accent);
|
||
}
|
||
|
||
[type=checkbox] ~ label,
|
||
[type=radio] ~ label {
|
||
display: inline-block;
|
||
margin-bottom: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
[type=checkbox] ~ label:not(:last-of-type),
|
||
[type=radio] ~ label:not(:last-of-type) {
|
||
margin-right: 1em;
|
||
}
|
||
|
||
/* ── Validation States ─────────────────────────────────────────────────*/
|
||
|
||
input[aria-invalid=false],
|
||
select[aria-invalid=false],
|
||
textarea[aria-invalid=false] {
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
input[aria-invalid=false]:is(:active, :focus-visible),
|
||
select[aria-invalid=false]:is(:active, :focus-visible),
|
||
textarea[aria-invalid=false]:is(:active, :focus-visible) {
|
||
border-color: var(--accent-hover);
|
||
box-shadow: 0 0 0 var(--outline-width) var(--accent-focus) !important;
|
||
}
|
||
|
||
input[aria-invalid=true],
|
||
select[aria-invalid=true],
|
||
textarea[aria-invalid=true] {
|
||
border-color: var(--error);
|
||
}
|
||
|
||
input[aria-invalid=true]:is(:active, :focus-visible),
|
||
select[aria-invalid=true]:is(:active, :focus-visible),
|
||
textarea[aria-invalid=true]:is(:active, :focus-visible) {
|
||
border-color: var(--error-active);
|
||
box-shadow: 0 0 0 var(--outline-width) var(--error-focus) !important;
|
||
}
|
||
|
||
/* ── Helper Text ───────────────────────────────────────────────────────*/
|
||
|
||
:where(input, select, textarea, fieldset) + small {
|
||
display: block;
|
||
width: 100%;
|
||
margin-top: calc(var(--space-4) * -0.75);
|
||
margin-bottom: var(--space-4);
|
||
color: var(--text-3);
|
||
}
|
||
|
||
:where(input, select, textarea, fieldset)[aria-invalid=false] + small {
|
||
color: var(--accent);
|
||
}
|
||
|
||
:where(input, select, textarea, fieldset)[aria-invalid=true] + small {
|
||
color: var(--accent-red);
|
||
}
|
||
|
||
label > :where(input, select, textarea) {
|
||
margin-top: calc(var(--space-4) * 0.25);
|
||
}
|
||
|
||
/* ── Navigation ────────────────────────────────────────────────────────*/
|
||
/* Semantic nav: <nav><strong>Brand</strong><ul><li><a>...</a></li></ul></nav> */
|
||
|
||
body > nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: 1.5rem;
|
||
padding-bottom: 1.5rem;
|
||
margin-bottom: 2rem;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
body > nav strong {
|
||
font-family: var(--font-mono);
|
||
font-weight: 700;
|
||
font-size: var(--text-base);
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
body > nav ul {
|
||
list-style: none;
|
||
display: flex;
|
||
gap: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
body > nav ul li {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body > nav ul li + li::before {
|
||
content: "|";
|
||
color: var(--text-dim);
|
||
margin: 0 0.75rem;
|
||
}
|
||
|
||
body > nav a {
|
||
color: var(--text-2);
|
||
text-decoration: none;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
body > nav a:hover,
|
||
body > nav a[aria-current="page"] {
|
||
color: var(--text);
|
||
}
|
||
|
||
/* Medium screens: allow links to wrap */
|
||
@media (max-width: 991px) {
|
||
body > nav ul {
|
||
flex-wrap: wrap;
|
||
gap: 0.25rem 0;
|
||
}
|
||
}
|
||
|
||
/* Small screens: stack brand above links */
|
||
@media (max-width: 767px) {
|
||
body > nav {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
body > nav ul:last-child {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
body > nav ul:last-child li + li::before {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* ── Nav Dropdown ──────────────────────────────────────────────────────*/
|
||
/* <details> inside <nav> becomes a dropdown menu. No classes needed.
|
||
Usage: <nav><ul><li><details><summary>Menu</summary><ul><li>...</li></ul></details></li></ul></nav> */
|
||
|
||
body > nav li:has(details) {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
body > nav details {
|
||
position: relative;
|
||
margin: 0;
|
||
}
|
||
|
||
body > nav details summary {
|
||
color: var(--text-2);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
list-style: none;
|
||
cursor: pointer;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
body > nav details summary:hover {
|
||
color: var(--text);
|
||
}
|
||
|
||
/* Override accordion chevron in nav context */
|
||
body > nav details summary::after {
|
||
content: "▾";
|
||
float: none;
|
||
margin-inline-start: 0.25rem;
|
||
transform: none;
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
body > nav details[open] > summary::after {
|
||
content: "▴";
|
||
transform: none;
|
||
}
|
||
|
||
/* Dropdown panel */
|
||
body > nav details > ul,
|
||
body > nav details > div {
|
||
position: absolute;
|
||
top: calc(100% + 0.5rem);
|
||
left: 0;
|
||
min-width: 160px;
|
||
padding: 0.5rem 0;
|
||
margin: 0;
|
||
background: var(--surface-1);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
z-index: 20;
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
body > nav details > ul li {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Remove pipe separator in dropdown items */
|
||
body > nav details > ul li + li::before {
|
||
display: none;
|
||
}
|
||
|
||
body > nav details > ul li a {
|
||
display: block;
|
||
padding: 0.35rem 1rem;
|
||
color: var(--text-2);
|
||
text-decoration: none;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
transition: background-color 0.1s, color 0.1s;
|
||
}
|
||
|
||
body > nav details > ul li a:hover {
|
||
background: var(--border-subtle);
|
||
color: var(--text);
|
||
}
|
||
|
||
/* Close dropdown when clicking outside (CSS-only via :focus-within) */
|
||
nav details:not(:focus-within) > ul,
|
||
nav details:not(:focus-within) > div {
|
||
/* Allow browser default open/close behavior —
|
||
no forced hiding. Agent can add JS for click-outside. */
|
||
}
|
||
|
||
/* Mobile: dropdown becomes full-width */
|
||
@media (max-width: 767px) {
|
||
nav details > ul,
|
||
nav details > div {
|
||
position: static;
|
||
box-shadow: none;
|
||
border: none;
|
||
border-left: 2px solid var(--border);
|
||
margin-left: 0.5rem;
|
||
padding: 0.25rem 0 0.25rem 0.5rem;
|
||
background: transparent;
|
||
}
|
||
}
|
||
|
||
/* ── Articles & Cards ──────────────────────────────────────────────────*/
|
||
/* Semantic article: <article><header><h3>Title</h3></header>Content</article> */
|
||
/* Container query: layout adapts to article's own width, not viewport.
|
||
An article in a sidebar shrinks gracefully; at full width it expands. */
|
||
|
||
article {
|
||
container-type: inline-size;
|
||
container-name: article;
|
||
background: transparent;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: 1rem 1.25rem;
|
||
margin: 0.75rem 0;
|
||
}
|
||
|
||
article > header {
|
||
margin: 0 0 0.5rem 0;
|
||
padding: 0 0 0.4rem 0;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
border-top: none;
|
||
border-radius: 0;
|
||
background-color: transparent;
|
||
}
|
||
|
||
article header h3 {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-3);
|
||
}
|
||
|
||
/* Narrow container: compact card (sidebar, grid cell) */
|
||
@container article (max-width: 300px) {
|
||
article > header {
|
||
border-bottom: none;
|
||
padding-bottom: 0;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
article header h3 {
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
article > :is(p, dl, ul, ol) {
|
||
font-size: var(--text-sm);
|
||
}
|
||
}
|
||
|
||
/* Wide container: spacious layout */
|
||
@container article (min-width: 600px) {
|
||
article {
|
||
padding: 1.5rem 2rem;
|
||
}
|
||
|
||
article > header {
|
||
margin-bottom: 0.75rem;
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
}
|
||
|
||
/* ── Definition Lists ──────────────────────────────────────────────────*/
|
||
/* Monospace data display for dt/dd pairs */
|
||
|
||
dt {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
font-weight: 500;
|
||
color: var(--text-2);
|
||
margin-top: 0.75rem;
|
||
}
|
||
|
||
dd {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
color: var(--text);
|
||
margin-left: 0;
|
||
margin-top: 0.15rem;
|
||
}
|
||
|
||
article dt:first-of-type {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* ── Sections ──────────────────────────────────────────────────────────*/
|
||
|
||
section + section {
|
||
padding-top: 1.5rem;
|
||
border-top: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
hgroup p {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
color: var(--text-3);
|
||
margin-top: 0.25rem;
|
||
}
|
||
|
||
/* Section intro: hgroup as centered subtitle block */
|
||
section > hgroup:first-child {
|
||
text-align: center;
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
/* Card variant: navigation cards use UI font h3, not session-log monospace */
|
||
article[data-role="card"] header h3 {
|
||
font-family: var(--font-ui);
|
||
font-size: var(--h3-size);
|
||
font-weight: var(--h3-weight);
|
||
text-transform: none;
|
||
letter-spacing: normal;
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ── Footer ────────────────────────────────────────────────────────────*/
|
||
|
||
body > footer,
|
||
footer:last-child {
|
||
margin-top: 3rem;
|
||
padding-top: 1.5rem;
|
||
padding-bottom: 2rem;
|
||
border-top: 1px solid var(--border);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--text-3);
|
||
}
|
||
|
||
/* ── Layer: 04-data-attrs ─────────────────────────────────── */
|
||
/**
|
||
* 04-data-attrs.css
|
||
* Agentic extensions: data-attribute selectors for vault concepts
|
||
* Part of: Agentic Semantic Web
|
||
*/
|
||
|
||
@layer data-attrs {
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Vault-specific role patterns
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Command box for install instructions */
|
||
[data-role="command-box"] {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: var(--surface-1);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: 0.75rem 1rem;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
margin: 1.5rem 0;
|
||
}
|
||
|
||
[data-role="command-box"] .prefix {
|
||
color: var(--text-3);
|
||
margin-right: 0.5rem;
|
||
user-select: none;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Wikilinks — [[Note Name]]
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-wikilink] {
|
||
color: var(--accent-blue);
|
||
font-family: var(--font-mono);
|
||
font-size: 0.9em;
|
||
text-decoration: none;
|
||
border-bottom: 1px dotted var(--border);
|
||
transition: border-color 0.15s;
|
||
}
|
||
|
||
[data-wikilink]:hover {
|
||
border-bottom-color: var(--accent-blue);
|
||
}
|
||
|
||
[data-wikilink][data-unresolved] {
|
||
color: var(--text-dim);
|
||
border-bottom-color: var(--text-dim);
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Tasks — - [ ] todo / - [x] done / - [?] blocked
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-task] {
|
||
display: block;
|
||
padding: 0.4em 0;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
[data-task]::before {
|
||
margin-right: 0.75em;
|
||
font-weight: 700;
|
||
}
|
||
|
||
[data-task="todo"]::before {
|
||
content: "○";
|
||
color: var(--accent-orange);
|
||
}
|
||
|
||
[data-task="done"]::before {
|
||
content: "●";
|
||
color: var(--accent);
|
||
}
|
||
|
||
[data-task="blocked"]::before {
|
||
content: "◐";
|
||
color: var(--accent-red);
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Status indicators — awake / sleeping / blocked / unknown
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-status] {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
[data-status="awake"] {
|
||
color: var(--accent);
|
||
}
|
||
|
||
[data-status="sleeping"] {
|
||
color: var(--text-3);
|
||
font-style: italic;
|
||
}
|
||
|
||
[data-status="blocked"] {
|
||
color: var(--accent-red);
|
||
}
|
||
|
||
[data-status="unknown"] {
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Callouts — note / warning / error / tip
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-callout] {
|
||
margin: 1.5em 0;
|
||
padding: 1em 1.25em;
|
||
border-left: 3px solid var(--accent-blue);
|
||
background: var(--surface-card);
|
||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
||
}
|
||
|
||
[data-callout="warning"] { border-left-color: var(--accent-orange); }
|
||
[data-callout="error"] { border-left-color: var(--accent-red); }
|
||
[data-callout="tip"] { border-left-color: var(--accent); }
|
||
|
||
[data-callout-title] {
|
||
font-family: var(--font-mono);
|
||
font-weight: 500;
|
||
font-size: var(--text-sm);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text);
|
||
margin-bottom: 0.5em;
|
||
display: block;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Session metadata — mode / timestamp / hash
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-session] {
|
||
display: block;
|
||
padding: 0.75em 1em;
|
||
margin: 1em 0;
|
||
background: var(--surface-card);
|
||
border: 1px solid var(--border);
|
||
border-left: 3px solid var(--accent);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
[data-mode="autonomous"] { color: var(--accent-blue); }
|
||
[data-mode="interactive"] { color: var(--accent); }
|
||
|
||
[data-session-meta] {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
color: var(--text-3);
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Tags and hashes
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-tag] {
|
||
color: var(--accent-blue);
|
||
font-family: var(--font-mono);
|
||
font-size: 0.85em;
|
||
text-decoration: none;
|
||
}
|
||
|
||
[data-tag]::before { content: "#"; }
|
||
[data-tag]:hover { color: var(--text); }
|
||
|
||
[data-hash] {
|
||
font-family: var(--font-mono);
|
||
color: var(--text-3);
|
||
font-size: var(--text-sm);
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Semantic roles — timeline / status-card / diff
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-role="timeline"] {
|
||
border-left: 1px solid var(--border);
|
||
padding-left: 1.5em;
|
||
margin: 1.5em 0;
|
||
}
|
||
|
||
[data-role="timeline"] > * {
|
||
position: relative;
|
||
margin-bottom: 1.5em;
|
||
}
|
||
|
||
[data-role="timeline"] > *::before {
|
||
content: "●";
|
||
position: absolute;
|
||
left: -1.85em;
|
||
color: var(--accent);
|
||
font-size: 0.7em;
|
||
}
|
||
|
||
[data-role="status-card"] {
|
||
padding: 1.25em;
|
||
background: var(--surface-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
margin: 1em 0;
|
||
}
|
||
|
||
[data-role="diff"] {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
padding: 0.75em 1em;
|
||
background: var(--surface-1);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
overflow-x: auto;
|
||
}
|
||
|
||
[data-role="diff"] .add { color: var(--accent); }
|
||
[data-role="diff"] .remove { color: var(--accent-red); }
|
||
[data-role="diff"] .context { color: var(--text-dim); }
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Tooltips — hover/focus-visible, accessible
|
||
Usage: <span data-tooltip="Explanation text">term</span>
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-tooltip] {
|
||
position: relative;
|
||
cursor: help;
|
||
border-bottom: 1px dotted var(--text-dim);
|
||
}
|
||
|
||
[data-tooltip]::after {
|
||
content: attr(data-tooltip);
|
||
position: absolute;
|
||
bottom: calc(100% + 0.5rem);
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
padding: 0.4rem 0.75rem;
|
||
background: var(--surface-1);
|
||
color: var(--text);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
line-height: 1.4;
|
||
white-space: nowrap;
|
||
max-width: 280px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: opacity 0.15s;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* Arrow */
|
||
[data-tooltip]::before {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: calc(100% + 0.15rem);
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border: 0.35rem solid transparent;
|
||
border-top-color: var(--border);
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: opacity 0.15s;
|
||
z-index: 10;
|
||
}
|
||
|
||
[data-tooltip]:hover::after,
|
||
[data-tooltip]:hover::before,
|
||
[data-tooltip]:focus-visible::after,
|
||
[data-tooltip]:focus-visible::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Bottom placement */
|
||
[data-tooltip-position="bottom"]::after {
|
||
bottom: auto;
|
||
top: calc(100% + 0.5rem);
|
||
}
|
||
|
||
[data-tooltip-position="bottom"]::before {
|
||
bottom: auto;
|
||
top: calc(100% + 0.15rem);
|
||
border-top-color: transparent;
|
||
border-bottom-color: var(--border);
|
||
}
|
||
|
||
/* Generator utility roles */
|
||
[data-role="log-entry"] {
|
||
padding: 0.3rem 0;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
[data-role="list-item"] {
|
||
padding: 0.1rem 0;
|
||
}
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Sub-navigation — section nav within a page group
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Usage:
|
||
<nav data-subnav>
|
||
<a href="/vigilio/" aria-current="page">index</a>
|
||
<a href="/vigilio/now">now</a>
|
||
<a href="/vigilio/status">status</a>
|
||
</nav>
|
||
|
||
Place inside <main class="container"> before article content.
|
||
aria-current="page" marks the active section. No classes needed. */
|
||
|
||
[data-subnav] {
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
margin-bottom: 2rem;
|
||
padding-bottom: 0.75rem;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
[data-subnav] a {
|
||
color: var(--text-dim);
|
||
text-decoration: none;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
[data-subnav] a + a::before {
|
||
content: "/";
|
||
color: var(--border);
|
||
margin: 0 0.6rem;
|
||
}
|
||
|
||
[data-subnav] a:hover {
|
||
color: var(--text);
|
||
}
|
||
|
||
[data-subnav] a[aria-current="page"] {
|
||
color: var(--text);
|
||
}
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
data-diff — CSS diff viewer for code review and comparison output
|
||
Issue: agentic-semantic-web#52
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-diff] {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
background: var(--surface-1);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
overflow-x: auto;
|
||
margin: var(--space-5) 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* File header */
|
||
[data-diff-file] {
|
||
display: block;
|
||
background: var(--surface-card);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 0.4em 1em;
|
||
font-size: var(--text-xs);
|
||
color: var(--text-3);
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
/* Individual diff lines */
|
||
[data-diff-line] {
|
||
display: block;
|
||
padding: 0.15em 1em 0.15em 3em;
|
||
position: relative;
|
||
line-height: 1.6;
|
||
white-space: pre;
|
||
}
|
||
|
||
/* Prefix gutter marker */
|
||
[data-diff-line]::before {
|
||
position: absolute;
|
||
left: 1em;
|
||
width: 1.5em;
|
||
text-align: center;
|
||
}
|
||
|
||
[data-diff-line="added"] {
|
||
background: rgba(34, 197, 94, 0.10);
|
||
color: var(--green-3);
|
||
}
|
||
|
||
[data-diff-line="added"]::before {
|
||
content: "+";
|
||
color: var(--green-5);
|
||
}
|
||
|
||
[data-diff-line="removed"] {
|
||
background: rgba(239, 68, 68, 0.10);
|
||
color: #f8b4b4;
|
||
}
|
||
|
||
[data-diff-line="removed"]::before {
|
||
content: "−";
|
||
color: var(--red-6);
|
||
}
|
||
|
||
[data-diff-line="context"] {
|
||
color: var(--text-3);
|
||
}
|
||
|
||
[data-diff-line="context"]::before {
|
||
content: " ";
|
||
}
|
||
|
||
/* Hunk header — @@ line markers */
|
||
[data-diff-line="hunk"] {
|
||
background: rgba(99, 179, 237, 0.07);
|
||
color: var(--accent-blue);
|
||
font-style: italic;
|
||
}
|
||
|
||
[data-diff-line="hunk"]::before {
|
||
content: "@@";
|
||
font-style: normal;
|
||
color: var(--accent-blue);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
data-redacted — privacy-aware redaction styling
|
||
Issue: agentic-semantic-web#55
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Base: fully redacted — black bar, not selectable */
|
||
[data-redacted] {
|
||
background: var(--text);
|
||
color: transparent;
|
||
border-radius: var(--radius-sm);
|
||
user-select: none;
|
||
/* Screen reader replacement handled via aria-label on element */
|
||
}
|
||
|
||
/* Block-level redaction */
|
||
[data-redacted]:is(p, div, section, article, li) {
|
||
display: block;
|
||
min-height: 1.2em;
|
||
}
|
||
|
||
/* Variant: reveal on hover/focus */
|
||
[data-redacted="reveal"] {
|
||
cursor: pointer;
|
||
transition: background 0.15s, color 0.15s;
|
||
}
|
||
|
||
[data-redacted="reveal"]:hover,
|
||
[data-redacted="reveal"]:focus {
|
||
background: var(--surface-card);
|
||
color: var(--text);
|
||
outline: 1px solid var(--border);
|
||
border-radius: var(--radius-sm);
|
||
user-select: text;
|
||
}
|
||
|
||
/* Variant: label — shows [REDACTED] text */
|
||
[data-redacted="label"] {
|
||
background: var(--surface-1);
|
||
color: var(--text-dim);
|
||
font-family: var(--font-mono);
|
||
font-size: 0.85em;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-sm);
|
||
padding: 0 0.35em;
|
||
user-select: none;
|
||
}
|
||
|
||
[data-redacted="label"]::before {
|
||
content: "[REDACTED]";
|
||
}
|
||
|
||
[data-redacted="label"] > * {
|
||
display: none;
|
||
}
|
||
|
||
/* Light mode adjustments */
|
||
@media (prefers-color-scheme: light) {
|
||
[data-redacted] {
|
||
background: #1a1a1a;
|
||
}
|
||
[data-redacted="reveal"]:hover,
|
||
[data-redacted="reveal"]:focus {
|
||
background: #f0f0f0;
|
||
color: #111;
|
||
}
|
||
}
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
data-reading-progress — CSS-only scroll progress bar
|
||
Issue: agentic-semantic-web#53
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
@keyframes asw-reading-progress {
|
||
from { width: 0%; }
|
||
to { width: 100%; }
|
||
}
|
||
|
||
[data-reading-progress]::before {
|
||
content: "";
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 2px;
|
||
background: var(--accent);
|
||
z-index: 9999;
|
||
/* animation-timeline: scroll() — fills as the element scrolls */
|
||
animation: asw-reading-progress auto linear;
|
||
animation-timeline: scroll(root);
|
||
}
|
||
|
||
/* Graceful degradation: if animation-timeline unsupported, ::before is empty */
|
||
|
||
/* Subtle shadow so bar is visible on light pages too */
|
||
[data-reading-progress]::before {
|
||
box-shadow: 0 0 6px var(--accent-focus);
|
||
}
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
ai-disclosure — styling for AI content disclosure attributes
|
||
Issue: agentic-semantic-web#58
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Subtle accent on AI-generated sections — light left border indicator */
|
||
[ai-disclosure] {
|
||
border-left: 2px solid transparent;
|
||
padding-left: var(--space-3);
|
||
}
|
||
|
||
[ai-disclosure="ai-generated"] {
|
||
border-left-color: rgba(34, 197, 94, 0.25);
|
||
}
|
||
|
||
[ai-disclosure="ai-assisted"] {
|
||
border-left-color: rgba(99, 179, 237, 0.20);
|
||
}
|
||
|
||
/* Autonomous — more distinct: full accent treatment */
|
||
[ai-disclosure="autonomous"] {
|
||
border-left-color: var(--accent);
|
||
border-left-width: 2px;
|
||
}
|
||
|
||
/* Mixed — yellow/amber to signal blended provenance */
|
||
[ai-disclosure="mixed"] {
|
||
border-left-color: rgba(245, 158, 11, 0.30);
|
||
}
|
||
|
||
/* Disclosure badge — optional ::after label for verbose mode */
|
||
[ai-disclosure][data-show-disclosure]::after {
|
||
content: " [" attr(ai-disclosure) "]";
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--text-dim);
|
||
vertical-align: super;
|
||
font-size: 0.65em;
|
||
}
|
||
|
||
/* ── CTA buttons: data-role on <a> ─────────────────────────────────────── */
|
||
/* Agents write <a href="..."> naturally. data-role styles intent without class names. */
|
||
a[data-role="primary"] {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: var(--space-2) var(--space-5);
|
||
background: var(--accent);
|
||
color: var(--on-accent);
|
||
border-radius: var(--radius-md);
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
transition: background var(--ease-1) 150ms;
|
||
}
|
||
|
||
a[data-role="primary"]:hover {
|
||
background: var(--accent-hover);
|
||
color: var(--on-accent);
|
||
text-decoration: none;
|
||
}
|
||
|
||
a[data-role="secondary"] {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: var(--space-2) var(--space-5);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
color: var(--text-2);
|
||
text-decoration: none;
|
||
transition: border-color var(--ease-1) 150ms, color var(--ease-1) 150ms;
|
||
}
|
||
|
||
a[data-role="secondary"]:hover {
|
||
border-color: var(--accent);
|
||
color: var(--text);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* ── Badge atom ────────────────────────────────────────────────────────────── */
|
||
/* Icon badge / token pill. <span data-badge>token</span>. */
|
||
[data-badge] {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-2) var(--space-3);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--accent);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
} /* end @layer data-attrs */
|
||
|
||
/* ── Layer: 05-utilities ─────────────────────────────────── */
|
||
/**
|
||
* 05-utilities.css
|
||
* Utility patterns (layout helpers, text modifiers, responsive utilities)
|
||
* Part of: Agentic Semantic Web
|
||
*/
|
||
|
||
@layer utilities {
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Text utilities
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-text~="mono"] {
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
[data-text~="dim"] {
|
||
color: var(--text-3);
|
||
}
|
||
|
||
[data-text~="accent"] {
|
||
color: var(--accent);
|
||
}
|
||
|
||
[data-text~="small"] {
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
/* Eyebrow — small monospace uppercase accent label above a heading */
|
||
[data-text~="eyebrow"] {
|
||
display: block;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--accent);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Layout utilities
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Grid layout with responsive stacking */
|
||
[data-layout="grid-2"] {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1rem;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
[data-layout="grid-2"] {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Card grid — responsive wrap for article cards */
|
||
[data-layout="card-grid"] {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
[data-layout="card-grid"] > * {
|
||
flex: 1 1 calc(50% - 0.75rem);
|
||
min-width: 240px;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
[data-layout="card-grid"] > * {
|
||
flex-basis: 100%;
|
||
}
|
||
}
|
||
|
||
/* Stats bar — horizontal row of key-value metrics */
|
||
[data-layout="stats"] {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0;
|
||
}
|
||
|
||
[data-layout="stats"] > * {
|
||
flex: 1 1 0;
|
||
min-width: 5rem;
|
||
padding: 0.75rem 0;
|
||
text-align: center;
|
||
border-right: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
[data-layout="stats"] > *:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
[data-layout="stats"] .value {
|
||
display: block;
|
||
font-family: var(--font-mono);
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
[data-layout="stats"] .label {
|
||
display: block;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.65rem;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--text-3);
|
||
margin-top: 0.2rem;
|
||
}
|
||
|
||
@media (max-width: 400px) {
|
||
[data-layout="stats"] > * {
|
||
flex-basis: 33%;
|
||
border-right: none;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
}
|
||
}
|
||
|
||
/* Inline definition lists */
|
||
dl[data-layout="inline"] {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 0.15rem 1rem;
|
||
align-items: baseline;
|
||
}
|
||
|
||
dl[data-layout="inline"] dt,
|
||
dl[data-layout="inline"] dd {
|
||
margin: 0;
|
||
padding: 0;
|
||
margin-inline-start: 0;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Responsive visibility
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Hide on mobile */
|
||
[data-visible="desktop"] {
|
||
display: none;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
[data-visible="desktop"] {
|
||
display: initial;
|
||
}
|
||
}
|
||
|
||
/* Hide on desktop */
|
||
[data-visible="mobile"] {
|
||
display: initial;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
[data-visible="mobile"] {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Loading indicator — aria-busy
|
||
Usage: <button aria-busy="true">Loading…</button>
|
||
<section aria-busy="true">Content loading…</section>
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
[aria-busy="true"] {
|
||
cursor: progress;
|
||
}
|
||
|
||
/* Inline spinner before text in buttons and interactive elements */
|
||
:is(button, [role="button"], a)[aria-busy="true"]::before {
|
||
content: "";
|
||
display: inline-block;
|
||
width: 1em;
|
||
height: 1em;
|
||
margin-right: 0.5em;
|
||
vertical-align: -0.125em;
|
||
border: 2px solid currentColor;
|
||
border-top-color: transparent;
|
||
border-radius: 50%;
|
||
animation: spin 0.6s linear infinite;
|
||
}
|
||
|
||
/* Disable interaction on busy buttons */
|
||
:is(button, [role="button"])[aria-busy="true"] {
|
||
pointer-events: none;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Block-level busy: overlay spinner centered */
|
||
:is(section, article, main, div)[aria-busy="true"] {
|
||
position: relative;
|
||
min-height: 3rem;
|
||
}
|
||
|
||
:is(section, article, main, div)[aria-busy="true"]::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
margin: -0.75rem 0 0 -0.75rem;
|
||
border: 2px solid var(--text-3);
|
||
border-top-color: transparent;
|
||
border-radius: 50%;
|
||
animation: spin 0.6s linear infinite;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Accessibility enhancements
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Disable all transitions and animations for reduced motion preference */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|
||
|
||
/* Increase contrast for high-contrast preference */
|
||
@media (prefers-contrast: more) {
|
||
:root {
|
||
--border-color: #404040;
|
||
--border-color-subtle: #2d2d2d;
|
||
--text-primary: #ffffff;
|
||
--text-secondary: #d4d4d4;
|
||
--border-width: 2px;
|
||
}
|
||
|
||
/* Thicker borders on interactive elements */
|
||
a,
|
||
button,
|
||
input,
|
||
select,
|
||
textarea,
|
||
[data-wikilink] {
|
||
border-width: 2px;
|
||
}
|
||
|
||
/* Stronger focus indicators */
|
||
:focus-visible {
|
||
outline-width: 3px;
|
||
outline-offset: 3px;
|
||
}
|
||
}
|
||
|
||
} /* end @layer utilities */
|
||
|
||
/* ── Layer: 06-charts ─────────────────────────────────── */
|
||
/**
|
||
* 06-charts.css
|
||
* Data-driven charts from semantic HTML tables.
|
||
* Absorbed from Charts.css — class API converted to data-attributes.
|
||
*
|
||
* Core vocabulary:
|
||
* data-chart="bar|column|line|area|pie" — chart type
|
||
* data-chart-labels — show axis labels (thead)
|
||
* data-chart-spacing="1–5" — gap between bars (default 2)
|
||
* data-chart-stacked — stacked multi-dataset mode
|
||
* style="--size: 0.8" — data injection on <td> (legal exception)
|
||
* style="--color: #hex" — per-row color override on <tr>
|
||
*
|
||
* Pragmatic exception: style="--size: N" and style="--color: X" on table cells
|
||
* are DATA injection, not presentation — they bind numeric values to CSS.
|
||
* This is the one place ASW permits inline style attributes.
|
||
*
|
||
* Chart dimensions:
|
||
* --chart-height Bar chart: bar thickness. Column chart: chart height.
|
||
* --chart-bar-size Column chart: bar width.
|
||
* --chart-gap Gap between data points.
|
||
*
|
||
* Lineage: Charts.css (MIT) — converted class API to data-attribute API.
|
||
* Reference: chartscss.org
|
||
*/
|
||
|
||
@layer charts {
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Shared chart tokens
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-chart] {
|
||
|
||
/* Data series colors — cycle via nth-child in each chart type */
|
||
--chart-color-1: var(--accent); /* green */
|
||
--chart-color-2: var(--accent-blue); /* blue */
|
||
--chart-color-3: var(--accent-orange); /* orange */
|
||
--chart-color-4: var(--accent-red); /* red */
|
||
--chart-color-5: var(--purple-5, #ae3ec9);
|
||
--chart-color-6: var(--cyan-5, #15aabf);
|
||
--chart-color-7: var(--pink-5, #e64980);
|
||
--chart-color-8: var(--teal-5, #0ca678);
|
||
|
||
/* Layout */
|
||
--chart-height: 200px; /* column chart area height */
|
||
--chart-bar-size: 2rem; /* column bar width / bar chart bar height */
|
||
--chart-gap: 6px; /* spacing between data points */
|
||
|
||
/* Axis / labels */
|
||
--chart-axis: var(--border);
|
||
--chart-axis-width: 2px;
|
||
--chart-label: var(--text-3);
|
||
--chart-label-size: var(--text-xs);
|
||
|
||
/* Bar styling */
|
||
--chart-radius: var(--radius-2);
|
||
|
||
/* Reset table styles — <table> is presentational structure here */
|
||
display: block;
|
||
inline-size: 100%;
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
[data-chart] caption {
|
||
display: block;
|
||
font-size: var(--text-sm);
|
||
color: var(--text-3);
|
||
text-align: start;
|
||
padding-block-end: var(--size-3);
|
||
caption-side: top;
|
||
}
|
||
|
||
/* thead: hidden by default, shown with data-chart-labels */
|
||
[data-chart] thead {
|
||
display: none;
|
||
}
|
||
|
||
[data-chart][data-chart-labels] thead {
|
||
display: block;
|
||
}
|
||
|
||
/* tbody: each chart type overrides this */
|
||
[data-chart] tbody {
|
||
display: block;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Bar chart — horizontal bars
|
||
══════════════════════════════════════════════════════════════════════════
|
||
|
||
Structure:
|
||
<table data-chart="bar">
|
||
<caption>Title</caption>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">Label</th>
|
||
<td style="--size: 0.8">80%</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
The bar width = 100% × --size. Bar is a ::before pseudo on td.
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-chart="bar"] tbody {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--chart-gap);
|
||
|
||
/* Left axis line */
|
||
border-inline-start: var(--chart-axis-width) solid var(--chart-axis);
|
||
padding-inline-start: 0;
|
||
}
|
||
|
||
[data-chart="bar"] tr {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--size-3);
|
||
}
|
||
|
||
/* Row label (th) */
|
||
[data-chart="bar"] th[scope="row"] {
|
||
font-size: var(--chart-label-size);
|
||
font-weight: 400;
|
||
color: var(--chart-label);
|
||
min-inline-size: 5rem;
|
||
max-inline-size: 8rem;
|
||
text-align: end;
|
||
padding-block: 0;
|
||
padding-inline: var(--size-2) 0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Data cell — the track */
|
||
[data-chart="bar"] td {
|
||
flex: 1;
|
||
position: relative;
|
||
block-size: var(--chart-bar-size);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0;
|
||
overflow: visible;
|
||
}
|
||
|
||
/* The bar itself — ::before */
|
||
[data-chart="bar"] td::before {
|
||
content: "";
|
||
display: block;
|
||
block-size: 100%;
|
||
inline-size: calc(100% * var(--size, 0.5));
|
||
background: var(--color, var(--chart-color-1));
|
||
border-radius: 0 var(--chart-radius) var(--chart-radius) 0;
|
||
transition: opacity 0.15s ease, inline-size 0.3s var(--ease-3, ease-out);
|
||
}
|
||
|
||
[data-chart="bar"] td:hover::before {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Data label (text inside/after bar) */
|
||
[data-chart="bar"] td::after {
|
||
content: attr(data-value);
|
||
position: absolute;
|
||
inset-inline-start: calc(100% * var(--size, 0.5) + 0.35rem);
|
||
font-size: var(--chart-label-size);
|
||
color: var(--text-3);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Color cycling for multi-series */
|
||
[data-chart="bar"] tr:nth-child(1) td::before { background: var(--color, var(--chart-color-1)); }
|
||
[data-chart="bar"] tr:nth-child(2) td::before { background: var(--color, var(--chart-color-2)); }
|
||
[data-chart="bar"] tr:nth-child(3) td::before { background: var(--color, var(--chart-color-3)); }
|
||
[data-chart="bar"] tr:nth-child(4) td::before { background: var(--color, var(--chart-color-4)); }
|
||
[data-chart="bar"] tr:nth-child(5) td::before { background: var(--color, var(--chart-color-5)); }
|
||
[data-chart="bar"] tr:nth-child(6) td::before { background: var(--color, var(--chart-color-6)); }
|
||
[data-chart="bar"] tr:nth-child(7) td::before { background: var(--color, var(--chart-color-7)); }
|
||
[data-chart="bar"] tr:nth-child(8) td::before { background: var(--color, var(--chart-color-8)); }
|
||
[data-chart="bar"] tr:nth-child(n+9) td::before { background: var(--color, var(--chart-color-1)); }
|
||
|
||
/* ── Spacing modifiers ──────────────────────────────────── */
|
||
[data-chart="bar"][data-chart-spacing="1"] tbody { gap: 2px; }
|
||
[data-chart="bar"][data-chart-spacing="2"] tbody { gap: 6px; }
|
||
[data-chart="bar"][data-chart-spacing="3"] tbody { gap: 10px; }
|
||
[data-chart="bar"][data-chart-spacing="4"] tbody { gap: 16px; }
|
||
[data-chart="bar"][data-chart-spacing="5"] tbody { gap: 24px; }
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Column chart — vertical bars
|
||
══════════════════════════════════════════════════════════════════════════
|
||
|
||
Structure:
|
||
<table data-chart="column">
|
||
<caption>Title</caption>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">Jan</th>
|
||
<td style="--size: 0.6">60</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
The chart area is --chart-height. Each column height = --chart-height × --size.
|
||
Columns sit at the bottom of the chart area (flex-end alignment).
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-chart="column"] tbody {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-end;
|
||
gap: var(--chart-gap);
|
||
block-size: var(--chart-height);
|
||
border-block-end: var(--chart-axis-width) solid var(--chart-axis);
|
||
padding: 0;
|
||
}
|
||
|
||
[data-chart="column"] tr {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
flex: 1;
|
||
block-size: 100%;
|
||
gap: var(--size-1);
|
||
}
|
||
|
||
/* Column label (th) at the bottom */
|
||
[data-chart="column"] th[scope="row"] {
|
||
font-size: var(--chart-label-size);
|
||
font-weight: 400;
|
||
color: var(--chart-label);
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-inline-size: 100%;
|
||
padding: 0;
|
||
padding-block-start: var(--size-1);
|
||
/* Move below axis */
|
||
order: 2;
|
||
margin-block-start: var(--size-2);
|
||
}
|
||
|
||
/* Data cell — the column bar */
|
||
[data-chart="column"] td {
|
||
display: block;
|
||
inline-size: 100%;
|
||
block-size: calc(var(--chart-height) * var(--size, 0.5));
|
||
padding: 0;
|
||
order: 1;
|
||
transition: block-size 0.3s var(--ease-3, ease-out);
|
||
border-radius: var(--chart-radius) var(--chart-radius) 0 0;
|
||
}
|
||
|
||
/* Color cycling for columns */
|
||
[data-chart="column"] tr:nth-child(1) td { background: var(--color, var(--chart-color-1)); }
|
||
[data-chart="column"] tr:nth-child(2) td { background: var(--color, var(--chart-color-2)); }
|
||
[data-chart="column"] tr:nth-child(3) td { background: var(--color, var(--chart-color-3)); }
|
||
[data-chart="column"] tr:nth-child(4) td { background: var(--color, var(--chart-color-4)); }
|
||
[data-chart="column"] tr:nth-child(5) td { background: var(--color, var(--chart-color-5)); }
|
||
[data-chart="column"] tr:nth-child(6) td { background: var(--color, var(--chart-color-6)); }
|
||
[data-chart="column"] tr:nth-child(7) td { background: var(--color, var(--chart-color-7)); }
|
||
[data-chart="column"] tr:nth-child(8) td { background: var(--color, var(--chart-color-8)); }
|
||
[data-chart="column"] tr:nth-child(n+9) td { background: var(--color, var(--chart-color-1)); }
|
||
|
||
[data-chart="column"] td:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* ── Spacing modifiers ──────────────────────────────────── */
|
||
[data-chart="column"][data-chart-spacing="1"] tbody { gap: 2px; }
|
||
[data-chart="column"][data-chart-spacing="2"] tbody { gap: 6px; }
|
||
[data-chart="column"][data-chart-spacing="3"] tbody { gap: 12px; }
|
||
[data-chart="column"][data-chart-spacing="4"] tbody { gap: 20px; }
|
||
[data-chart="column"][data-chart-spacing="5"] tbody { gap: 32px; }
|
||
|
||
/* ── Column chart labels ───────────────────────────────── */
|
||
/* When data-chart-labels present, show thead as axis header */
|
||
[data-chart="column"][data-chart-labels] thead {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-block-end: var(--size-2);
|
||
}
|
||
|
||
[data-chart="column"][data-chart-labels] thead th {
|
||
font-size: var(--chart-label-size);
|
||
color: var(--chart-label);
|
||
font-weight: 400;
|
||
text-align: center;
|
||
flex: 1;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Area chart — filled area from baseline
|
||
══════════════════════════════════════════════════════════════════════════
|
||
|
||
CSS-only area charts use linear-gradient on the td background.
|
||
Each point's area = --size fraction of the column height.
|
||
|
||
Structure identical to column — but cells connect visually.
|
||
The visual connection requires identical widths and no gap (or clip).
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-chart="area"] tbody {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-end;
|
||
block-size: var(--chart-height);
|
||
border-block-end: var(--chart-axis-width) solid var(--chart-axis);
|
||
gap: 0; /* no gap — cells must connect */
|
||
padding: 0;
|
||
}
|
||
|
||
[data-chart="area"] tr {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
justify-content: flex-end;
|
||
flex: 1;
|
||
block-size: 100%;
|
||
}
|
||
|
||
[data-chart="area"] th[scope="row"] {
|
||
font-size: var(--chart-label-size);
|
||
font-weight: 400;
|
||
color: var(--chart-label);
|
||
text-align: center;
|
||
order: 2;
|
||
padding-block-start: var(--size-1);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Area cell — filled gradient from --size down to baseline */
|
||
[data-chart="area"] td {
|
||
display: block;
|
||
inline-size: 100%;
|
||
block-size: calc(var(--chart-height) * var(--size, 0.5));
|
||
padding: 0;
|
||
order: 1;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
var(--chart-color-1) 0%,
|
||
color-mix(in oklch, var(--chart-color-1), transparent 70%) 100%
|
||
);
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Line chart — dots connected by a visual line
|
||
══════════════════════════════════════════════════════════════════════════
|
||
|
||
CSS-only: we use the column approach but mark the top with a dot (::after)
|
||
and use a border-top line to simulate connection between points.
|
||
True line interpolation requires JavaScript or SVG.
|
||
|
||
What we ship: column bars in outline/transparent mode with an accent dot
|
||
at the top — semantic, readable, no JS.
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-chart="line"] tbody {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-end;
|
||
block-size: var(--chart-height);
|
||
border-block-end: var(--chart-axis-width) solid var(--chart-axis);
|
||
gap: 0;
|
||
padding: 0;
|
||
position: relative;
|
||
}
|
||
|
||
[data-chart="line"] tr {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
flex: 1;
|
||
block-size: 100%;
|
||
}
|
||
|
||
[data-chart="line"] th[scope="row"] {
|
||
font-size: var(--chart-label-size);
|
||
font-weight: 400;
|
||
color: var(--chart-label);
|
||
text-align: center;
|
||
order: 2;
|
||
padding-block-start: var(--size-1);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Line chart cell — transparent bar with accent top border + dot */
|
||
[data-chart="line"] td {
|
||
display: block;
|
||
inline-size: 100%;
|
||
block-size: calc(var(--chart-height) * var(--size, 0.5));
|
||
padding: 0;
|
||
order: 1;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
color-mix(in oklch, var(--chart-color-1), transparent 80%) 0%,
|
||
transparent 60%
|
||
);
|
||
border-block-start: 2px solid var(--chart-color-1);
|
||
position: relative;
|
||
}
|
||
|
||
/* Dot at data point */
|
||
[data-chart="line"] td::before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
inset-block-start: -5px;
|
||
inset-inline-start: 50%;
|
||
translate: -50% 0;
|
||
inline-size: 8px;
|
||
block-size: 8px;
|
||
border-radius: 50%;
|
||
background: var(--chart-color-1);
|
||
border: 2px solid var(--surface);
|
||
z-index: 1;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Pie chart — conic-gradient segments
|
||
══════════════════════════════════════════════════════════════════════════
|
||
|
||
CSS-only pie charts use conic-gradient on a single element.
|
||
Each segment's arc = --size × 360deg.
|
||
Requires stacking values in CSS — not practical to automate per-row.
|
||
|
||
For agent use: pie charts work best with explicit conic-gradient
|
||
set as a custom property. The data-chart="pie" wrapper provides
|
||
the shape and size; the agent sets --pie-segments.
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-chart="pie"] {
|
||
--pie-size: min(200px, 100%);
|
||
--pie-segments: conic-gradient(
|
||
var(--chart-color-1) 0% 25%,
|
||
var(--chart-color-2) 25% 50%,
|
||
var(--chart-color-3) 50% 75%,
|
||
var(--chart-color-4) 75% 100%
|
||
);
|
||
}
|
||
|
||
/* Pie uses a generated element — hide table structure visually */
|
||
[data-chart="pie"] tbody { display: none; }
|
||
|
||
/* Show caption + legend from thead */
|
||
[data-chart="pie"] thead {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--size-2);
|
||
justify-content: center;
|
||
margin-block-end: var(--size-3);
|
||
}
|
||
|
||
[data-chart="pie"] thead th {
|
||
font-size: var(--chart-label-size);
|
||
color: var(--chart-label);
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* The pie rendered as ::before on the table element */
|
||
[data-chart="pie"]::before {
|
||
content: "";
|
||
display: block;
|
||
inline-size: var(--pie-size);
|
||
block-size: var(--pie-size);
|
||
border-radius: 50%;
|
||
background: var(--pie-segments);
|
||
margin-inline: auto;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Stacked bars — data-chart-stacked modifier
|
||
══════════════════════════════════════════════════════════════════════════
|
||
When multiple <td> in one <tr>, stack them.
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-chart="bar"][data-chart-stacked] td {
|
||
/* Multiple tds per row — share the bar track inline */
|
||
display: inline-block;
|
||
inline-size: calc(100% * var(--size, 0.2));
|
||
border-radius: 0;
|
||
}
|
||
|
||
[data-chart="bar"][data-chart-stacked] td::before {
|
||
display: none; /* td IS the bar in stacked mode */
|
||
}
|
||
|
||
[data-chart="bar"][data-chart-stacked] td:first-of-type {
|
||
border-radius: 0 0 0 0;
|
||
}
|
||
|
||
[data-chart="bar"][data-chart-stacked] td:last-of-type {
|
||
border-radius: 0 var(--chart-radius) var(--chart-radius) 0;
|
||
}
|
||
|
||
/* Stacked color cycling */
|
||
[data-chart][data-chart-stacked] td:nth-of-type(1) { background: var(--chart-color-1); }
|
||
[data-chart][data-chart-stacked] td:nth-of-type(2) { background: var(--chart-color-2); }
|
||
[data-chart][data-chart-stacked] td:nth-of-type(3) { background: var(--chart-color-3); }
|
||
[data-chart][data-chart-stacked] td:nth-of-type(4) { background: var(--chart-color-4); }
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Accessibility
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Ensure cell content (the data value) is readable for screen readers
|
||
but visually hidden inside the bar — text is in aria / caption */
|
||
[data-chart="bar"] td,
|
||
[data-chart="column"] td {
|
||
font-size: var(--chart-label-size);
|
||
color: transparent; /* data visible to SR, hidden visually */
|
||
}
|
||
|
||
/* Respect user preference — no transitions */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
[data-chart] td,
|
||
[data-chart] td::before {
|
||
transition: none;
|
||
}
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Radial chart — circular gauge
|
||
══════════════════════════════════════════════════════════════════════════
|
||
|
||
Structure:
|
||
<table data-chart="radial" style="--size: 0.72">
|
||
<caption>Token budget used</caption>
|
||
<tbody><tr><td><span>72%</span></td></tr></tbody>
|
||
</table>
|
||
|
||
The gauge is a conic-gradient on the td element.
|
||
--size (0–1) drives the arc: --size × 360deg = colored portion.
|
||
::before pseudo creates a donut hole cutout over the gradient.
|
||
<span> inside td floats the value text above the donut via z-index.
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-chart="radial"] {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--size-2);
|
||
}
|
||
|
||
[data-chart="radial"] caption {
|
||
font-size: var(--chart-label-size);
|
||
color: var(--chart-label);
|
||
text-align: center;
|
||
caption-side: bottom;
|
||
padding-block-start: var(--size-2);
|
||
}
|
||
|
||
[data-chart="radial"] tbody { display: flex; }
|
||
[data-chart="radial"] tr { display: flex; }
|
||
|
||
/* The gauge circle */
|
||
[data-chart="radial"] td {
|
||
position: relative;
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 50%;
|
||
background: conic-gradient(
|
||
var(--color, var(--chart-color-1)) 0deg calc(var(--size, 0.5) * 360deg),
|
||
var(--surface-1, #111111) 0deg
|
||
);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
border: none;
|
||
color: transparent; /* data readable by SR, hidden visually */
|
||
}
|
||
|
||
/* Donut hole */
|
||
[data-chart="radial"] td::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 18px;
|
||
border-radius: 50%;
|
||
background: var(--surface);
|
||
z-index: 0;
|
||
}
|
||
|
||
/* Value text centered in the donut hole */
|
||
[data-chart="radial"] td span {
|
||
position: relative;
|
||
z-index: 1;
|
||
font-size: var(--text-xs);
|
||
font-family: var(--font-mono);
|
||
color: var(--text);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Status color variants */
|
||
[data-chart="radial"][data-status="warning"] td {
|
||
background: conic-gradient(
|
||
var(--accent-orange, #f08c00) 0deg calc(var(--size, 0.5) * 360deg),
|
||
var(--surface-1, #111111) 0deg
|
||
);
|
||
}
|
||
|
||
[data-chart="radial"][data-status="danger"] td {
|
||
background: conic-gradient(
|
||
var(--accent-red, #e03131) 0deg calc(var(--size, 0.5) * 360deg),
|
||
var(--surface-1, #111111) 0deg
|
||
);
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Burndown chart — sprint burndown with CSS ideal-line overlay
|
||
══════════════════════════════════════════════════════════════════════════
|
||
|
||
Structure: same as column chart, but:
|
||
- Bars use --accent-red (remaining work = red)
|
||
- tbody::after renders a diagonal linear-gradient as the ideal-line
|
||
- Ideal line runs top-left to bottom-right: full work at start → zero at end
|
||
|
||
<table data-chart="burndown">
|
||
<caption>Sprint burndown</caption>
|
||
<tbody>
|
||
<tr><th scope="row">D1</th><td style="--size: 0.95">19</td></tr>
|
||
...
|
||
</tbody>
|
||
</table>
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-chart="burndown"] tbody {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-end;
|
||
block-size: var(--chart-height);
|
||
border-block-end: var(--chart-axis-width) solid var(--chart-axis);
|
||
position: relative; /* required for ::after overlay */
|
||
gap: var(--chart-gap);
|
||
padding: 0;
|
||
}
|
||
|
||
/* Ideal-line overlay — diagonal gradient = ideal burn velocity */
|
||
[data-chart="burndown"] tbody::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
to bottom right,
|
||
color-mix(in oklch, var(--chart-color-2, var(--accent-blue, #4dabf7)), transparent 20%) 0%,
|
||
transparent 100%
|
||
);
|
||
pointer-events: none;
|
||
z-index: 2;
|
||
}
|
||
|
||
[data-chart="burndown"] tr {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
flex: 1;
|
||
block-size: 100%;
|
||
gap: var(--size-1);
|
||
}
|
||
|
||
/* Remaining-work bar — red, with ideal line overlay above it */
|
||
[data-chart="burndown"] td {
|
||
display: block;
|
||
inline-size: 100%;
|
||
block-size: calc(var(--chart-height) * var(--size, 0.5));
|
||
background: color-mix(in oklch, var(--chart-color-4, var(--accent-red, #e03131)), transparent 25%);
|
||
border-radius: var(--chart-radius) var(--chart-radius) 0 0;
|
||
order: 1;
|
||
padding: 0;
|
||
border: none;
|
||
color: transparent;
|
||
position: relative;
|
||
z-index: 1;
|
||
transition: opacity 0.15s ease;
|
||
}
|
||
|
||
[data-chart="burndown"] td:hover { opacity: 0.85; }
|
||
|
||
[data-chart="burndown"] th[scope="row"] {
|
||
font-size: var(--chart-label-size);
|
||
font-weight: 400;
|
||
color: var(--chart-label);
|
||
text-align: center;
|
||
order: 2;
|
||
padding-block-start: var(--size-1);
|
||
white-space: nowrap;
|
||
padding: 0;
|
||
margin-block-start: var(--size-2);
|
||
}
|
||
|
||
/* ── Spacing modifiers for area and line (port from bar/column) ──── */
|
||
|
||
[data-chart="area"][data-chart-spacing="1"] tbody { gap: 0; }
|
||
[data-chart="area"][data-chart-spacing="2"] tbody { gap: 2px; }
|
||
[data-chart="area"][data-chart-spacing="3"] tbody { gap: 6px; }
|
||
[data-chart="area"][data-chart-spacing="4"] tbody { gap: 12px; }
|
||
[data-chart="area"][data-chart-spacing="5"] tbody { gap: 20px; }
|
||
|
||
[data-chart="line"][data-chart-spacing="1"] tbody { gap: 0; }
|
||
[data-chart="line"][data-chart-spacing="2"] tbody { gap: 2px; }
|
||
[data-chart="line"][data-chart-spacing="3"] tbody { gap: 6px; }
|
||
[data-chart="line"][data-chart-spacing="4"] tbody { gap: 12px; }
|
||
[data-chart="line"][data-chart-spacing="5"] tbody { gap: 20px; }
|
||
|
||
/* ── data-chart-reverse modifier ────────────────────────────────── */
|
||
|
||
[data-chart="bar"][data-chart-reverse] tbody {
|
||
flex-direction: column-reverse;
|
||
}
|
||
|
||
[data-chart="column"][data-chart-reverse] tbody {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
/* ── data-chart-stacked on column ───────────────────────────────── */
|
||
|
||
[data-chart="column"][data-chart-stacked] tr {
|
||
flex-direction: row;
|
||
align-items: flex-end;
|
||
gap: 0;
|
||
}
|
||
|
||
[data-chart="column"][data-chart-stacked] td {
|
||
flex: 1;
|
||
border-radius: 0;
|
||
block-size: calc(var(--chart-height) * var(--size, 0.2));
|
||
}
|
||
|
||
[data-chart="column"][data-chart-stacked] td:first-of-type {
|
||
border-radius: var(--chart-radius) 0 0 0;
|
||
}
|
||
|
||
[data-chart="column"][data-chart-stacked] td:last-of-type {
|
||
border-radius: 0 var(--chart-radius) 0 0;
|
||
}
|
||
|
||
/* ── data-chart-labels on bar ────────────────────────────────────── */
|
||
|
||
[data-chart="bar"][data-chart-labels] thead {
|
||
display: block;
|
||
margin-block-end: var(--size-2);
|
||
}
|
||
|
||
[data-chart="bar"][data-chart-labels] thead th {
|
||
font-size: var(--chart-label-size);
|
||
color: var(--chart-label);
|
||
font-weight: 400;
|
||
}
|
||
|
||
} /* end @layer charts */
|
||
|
||
/* ── Layer: 08-layout ─────────────────────────────────── */
|
||
/**
|
||
* 08-layout.css
|
||
* Layout patterns: container, docs layout, grid helpers
|
||
* Part of: Agentic Semantic Web
|
||
*/
|
||
|
||
/* ── Container ─────────────────────────────────────────────────────── */
|
||
|
||
.container {
|
||
max-width: var(container-width, 1200px);
|
||
margin-inline: auto;
|
||
padding-inline: var(--space-5);
|
||
}
|
||
|
||
/* ── Body baseline ──────────────────────────────────────────────────── */
|
||
|
||
body {
|
||
background-color: var(--surface);
|
||
color: var(--text);
|
||
font-weight: var(--font-weight-4);
|
||
line-height: var(--leading);
|
||
font-variant-emoji: text; /* render emoji as monochrome glyphs, not OS pictographs */
|
||
min-height: 100vh;
|
||
/* font-family and font-size live in 00-reset.css — do not set here */
|
||
}
|
||
|
||
/* ── Hero ──────────────────────────────────────────────────────────── */
|
||
/* Landing page hero block. Usually <header data-layout="hero">. */
|
||
[data-layout="hero"] {
|
||
text-align: center;
|
||
padding: var(--space-8) var(--space-5);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
/* ── Install snippet ────────────────────────────────────────────────── */
|
||
/* One-liner install code pill. <p data-layout="install"><code>...</code></p> */
|
||
[data-layout="install"] {
|
||
display: inline-block;
|
||
background: var(--surface-1);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-2) var(--space-4);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
margin: var(--space-4) 0;
|
||
}
|
||
|
||
/* ── Actions row ────────────────────────────────────────────────────── */
|
||
/* CTA button row. <nav data-layout="actions"> wraps primary + secondary links. */
|
||
nav[data-layout="actions"] {
|
||
display: flex;
|
||
gap: var(--space-4);
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: var(--space-5);
|
||
padding: 0;
|
||
}
|
||
|
||
nav[data-layout="actions"] a {
|
||
text-decoration: none;
|
||
color: var(--text-2);
|
||
}
|
||
|
||
nav[data-layout="actions"] a:hover {
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ── Docs layout ────────────────────────────────────────────────────── */
|
||
|
||
[data-layout="docs"] {
|
||
display: grid;
|
||
grid-template-columns: 220px 1fr 200px;
|
||
grid-template-rows: auto;
|
||
gap: var(--space-6);
|
||
max-width: 1400px;
|
||
margin-inline: auto;
|
||
padding: var(--space-6) var(--space-5);
|
||
align-items: start;
|
||
}
|
||
|
||
/* ── Left sidebar ───────────────────────────────────────────────────── */
|
||
|
||
[data-layout="docs"] > aside:first-of-type {
|
||
position: sticky;
|
||
top: calc(60px + var(--space-4));
|
||
max-height: calc(100vh - 80px);
|
||
overflow-y: auto;
|
||
/* ASW-styled scrollbar — thin, subtle, no system chrome */
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--border) transparent;
|
||
}
|
||
|
||
[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar-thumb {
|
||
background: var(--border);
|
||
border-radius: var(--radius-full);
|
||
}
|
||
|
||
[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar-thumb:hover {
|
||
background: var(--text-3);
|
||
}
|
||
|
||
/* Sidebar nav — vertical list, no top-bar chrome */
|
||
[data-layout="docs"] > aside:first-of-type nav,
|
||
nav[data-nav="sidebar"] {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: stretch;
|
||
padding: 0;
|
||
margin: 0;
|
||
border: none;
|
||
gap: 0;
|
||
}
|
||
|
||
[data-layout="docs"] > aside:first-of-type nav small {
|
||
display: block;
|
||
color: var(--text-3);
|
||
font-size: var(--text-xs);
|
||
font-family: var(--font-mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
padding: 0 var(--space-3);
|
||
margin-bottom: var(--space-2);
|
||
margin-top: var(--space-4);
|
||
}
|
||
|
||
[data-layout="docs"] > aside:first-of-type nav small:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
[data-layout="docs"] > aside:first-of-type nav ul,
|
||
nav[data-nav="sidebar"] ul {
|
||
display: flex;
|
||
flex-direction: column;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
gap: 0;
|
||
font-family: var(--font-ui);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
[data-layout="docs"] > aside:first-of-type nav ul li {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* No pipe separators in sidebar */
|
||
[data-layout="docs"] > aside:first-of-type nav ul li + li::before,
|
||
nav[data-nav="sidebar"] ul li + li::before {
|
||
display: none;
|
||
}
|
||
|
||
[data-layout="docs"] > aside:first-of-type nav a {
|
||
display: block;
|
||
padding: var(--space-1) var(--space-3);
|
||
border-radius: var(--radius-md);
|
||
color: var(--text-2);
|
||
text-decoration: none;
|
||
transition: background-color var(--ease), color var(--ease);
|
||
font-family: var(--font-ui);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
[data-layout="docs"] > aside:first-of-type nav a:hover {
|
||
background-color: var(--surface-hover);
|
||
color: var(--text);
|
||
}
|
||
|
||
[data-layout="docs"] > aside:first-of-type nav a[aria-current] {
|
||
background-color: var(--accent-subtle);
|
||
color: var(--accent);
|
||
}
|
||
|
||
/* ── Main content ───────────────────────────────────────────────────── */
|
||
|
||
[data-layout="docs"] > article {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* ── Right TOC ──────────────────────────────────────────────────────── */
|
||
|
||
[data-layout="docs"] > aside[data-toc] {
|
||
position: sticky;
|
||
top: calc(60px + var(--space-4));
|
||
max-height: calc(100vh - 80px);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* TOC nav — vertical, compact, no top-bar chrome */
|
||
[data-layout="docs"] > aside[data-toc] nav,
|
||
nav[data-nav="toc"] {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: stretch;
|
||
padding: 0;
|
||
margin: 0;
|
||
border: none;
|
||
gap: 0;
|
||
}
|
||
|
||
[data-layout="docs"] > aside[data-toc] small {
|
||
display: block;
|
||
color: var(--text-3);
|
||
font-size: var(--text-xs);
|
||
font-family: var(--font-mono);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
[data-layout="docs"] > aside[data-toc] nav ul,
|
||
nav[data-nav="toc"] ul {
|
||
display: flex;
|
||
flex-direction: column;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
gap: 0;
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
[data-layout="docs"] > aside[data-toc] nav ul li {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
[data-layout="docs"] > aside[data-toc] nav ul li + li::before,
|
||
nav[data-nav="toc"] ul li + li::before {
|
||
display: none;
|
||
}
|
||
|
||
[data-layout="docs"] > aside[data-toc] nav a {
|
||
display: block;
|
||
padding: 0.2rem var(--space-2);
|
||
font-size: var(--text-xs);
|
||
color: var(--text-3);
|
||
text-decoration: none;
|
||
border-left: 2px solid transparent;
|
||
transition: color var(--ease), border-color var(--ease);
|
||
}
|
||
|
||
[data-layout="docs"] > aside[data-toc] nav a:hover {
|
||
color: var(--text);
|
||
border-left-color: var(--border);
|
||
}
|
||
|
||
[data-layout="docs"] > aside[data-toc] nav a[aria-current] {
|
||
color: var(--accent);
|
||
border-left-color: var(--accent);
|
||
}
|
||
|
||
/* ── Prev/Next navigation ───────────────────────────────────────────── */
|
||
|
||
[data-role="prev-next"] {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: var(--space-8);
|
||
padding-top: var(--space-5);
|
||
border-top: var(--border-width) solid var(--border);
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
[data-role="prev-next"] a {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-1);
|
||
text-decoration: none;
|
||
color: var(--text-2);
|
||
max-width: 45%;
|
||
transition: color var(--ease);
|
||
}
|
||
|
||
[data-role="prev-next"] a:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
[data-role="prev-next"] a[rel="prev"] {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
[data-role="prev-next"] a[rel="next"] {
|
||
align-items: flex-end;
|
||
margin-left: auto;
|
||
}
|
||
|
||
[data-role="prev-next"] small {
|
||
font-size: var(--text-xs);
|
||
font-family: var(--font-mono);
|
||
color: var(--text-3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
|
||
[data-role="prev-next"] span {
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
/* ── Responsive ─────────────────────────────────────────────────────── */
|
||
|
||
@media (max-width: 1100px) {
|
||
[data-layout="docs"] {
|
||
grid-template-columns: 200px 1fr;
|
||
}
|
||
[data-layout="docs"] > aside[data-toc] {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
[data-layout="docs"] {
|
||
grid-template-columns: 1fr;
|
||
padding: var(--space-4);
|
||
}
|
||
[data-layout="docs"] > aside:first-of-type {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* Allow <main> as content column in docs layout — override body > main container sizing */
|
||
[data-layout="docs"] > main {
|
||
max-width: none;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* ── Grid helpers ───────────────────────────────────────────────────── */
|
||
|
||
[data-layout="grid-2"] {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--space-5);
|
||
}
|
||
|
||
[data-layout="grid-3"] {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--space-5);
|
||
}
|
||
|
||
[data-layout="card-grid"] {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||
gap: var(--space-5);
|
||
}
|
||
|
||
[data-layout="stats"] {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-5);
|
||
}
|
||
|
||
[data-layout="stats"] > * {
|
||
flex: 1;
|
||
min-width: 120px;
|
||
}
|
||
|
||
[data-layout="stats"] [data-stat="value"],
|
||
[data-layout="stats"] .value {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-3xl);
|
||
font-weight: var(--font-weight-7);
|
||
color: var(--accent);
|
||
display: block;
|
||
}
|
||
|
||
[data-layout="stats"] [data-stat="label"],
|
||
[data-layout="stats"] .label {
|
||
font-size: var(--text-xs);
|
||
color: var(--text-3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
display: block;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
[data-layout="grid-2"],
|
||
[data-layout="grid-3"] {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* ── Prose layout ───────────────────────────────────────────────────── */
|
||
/* Reading-optimised width. ~65 characters per line — Bringhurst/LaTeX */
|
||
/* standard for comfortable prose. Use on <main> or any block element. */
|
||
|
||
main[data-layout="prose"],
|
||
[data-layout="prose"] {
|
||
max-width: 65ch;
|
||
margin-inline: auto;
|
||
}
|
||
|
||
/* ── Timeline layout ────────────────────────────────────────────────── */
|
||
/* Chronological spine: vertical accent line, node per event. */
|
||
/* Usage: <ol data-layout="timeline"> <li> <time>…</time> <article> */
|
||
/* Issue: agentic-semantic-web#54 */
|
||
|
||
[data-layout="timeline"] {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: var(--space-5) 0;
|
||
position: relative;
|
||
}
|
||
|
||
/* Vertical spine */
|
||
[data-layout="timeline"]::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0.6rem;
|
||
top: 0.5rem;
|
||
bottom: 0.5rem;
|
||
width: 1px;
|
||
background: var(--border);
|
||
}
|
||
|
||
[data-layout="timeline"] > li {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 0 var(--space-5);
|
||
align-items: start;
|
||
padding-left: calc(1.2rem + var(--space-3));
|
||
margin-bottom: var(--space-6);
|
||
position: relative;
|
||
}
|
||
|
||
[data-layout="timeline"] > li:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Node dot */
|
||
[data-layout="timeline"] > li::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0.275rem;
|
||
top: 0.45rem;
|
||
width: 0.65rem;
|
||
height: 0.65rem;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
border: 2px solid var(--surface);
|
||
box-shadow: 0 0 0 1px var(--accent);
|
||
}
|
||
|
||
/* Time element */
|
||
[data-layout="timeline"] > li > time {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--text-3);
|
||
white-space: nowrap;
|
||
padding-top: 0.1em;
|
||
display: block;
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
|
||
/* Content */
|
||
[data-layout="timeline"] > li > article,
|
||
[data-layout="timeline"] > li > div {
|
||
min-width: 0;
|
||
}
|
||
|
||
[data-layout="timeline"] > li > article > :first-child,
|
||
[data-layout="timeline"] > li > div > :first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* Alternate variant: alternating left/right */
|
||
[data-layout="timeline alternate"] > li:nth-child(even) {
|
||
direction: rtl;
|
||
}
|
||
|
||
[data-layout="timeline alternate"] > li:nth-child(even) > * {
|
||
direction: ltr;
|
||
}
|
||
|
||
/* ── Report layout ──────────────────────────────────────────────────── */
|
||
/* Print-first document layout. Clean on screen, correct on paper. */
|
||
/* Light surface. Constrained width. Print stylesheet built in. */
|
||
/* Issue: agentic-semantic-web#56 */
|
||
|
||
[data-layout="report"] {
|
||
background: var(--surface);
|
||
color: var(--text);
|
||
font-family: var(--font-ui);
|
||
font-size: 1rem;
|
||
line-height: var(--leading);
|
||
}
|
||
|
||
[data-layout="report"] > header,
|
||
[data-layout="report"] > main,
|
||
[data-layout="report"] > footer {
|
||
max-width: 72ch;
|
||
margin-inline: auto;
|
||
padding-inline: var(--space-5);
|
||
}
|
||
|
||
[data-layout="report"] > header {
|
||
padding-top: var(--space-6);
|
||
padding-bottom: var(--space-5);
|
||
border-bottom: 2px solid var(--border);
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
[data-layout="report"] > header h1 {
|
||
font-size: var(--text-2xl);
|
||
margin: 0 0 var(--space-3);
|
||
color: var(--text);
|
||
}
|
||
|
||
[data-layout="report"] > main {
|
||
padding-bottom: var(--space-8);
|
||
}
|
||
|
||
[data-layout="report"] > footer {
|
||
border-top: 1px solid var(--border);
|
||
padding-top: var(--space-4);
|
||
padding-bottom: var(--space-4);
|
||
font-size: var(--text-sm);
|
||
color: var(--text-3);
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
/* Print styles */
|
||
@media print {
|
||
[data-layout="report"] {
|
||
--surface: #ffffff;
|
||
--text: #000000;
|
||
font-size: 11pt;
|
||
}
|
||
|
||
[data-layout="report"] > header {
|
||
page-break-after: avoid;
|
||
}
|
||
|
||
[data-layout="report"] h2,
|
||
[data-layout="report"] h3 {
|
||
page-break-after: avoid;
|
||
}
|
||
|
||
[data-layout="report"] pre,
|
||
[data-layout="report"] table,
|
||
[data-layout="report"] figure {
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
[data-layout="report"] a::after {
|
||
content: " (" attr(href) ")";
|
||
font-size: 0.8em;
|
||
color: #666;
|
||
}
|
||
|
||
[data-layout="report"] a[href^="#"]::after {
|
||
content: "";
|
||
}
|
||
|
||
[data-layout="report"] nav,
|
||
[data-layout="report"] [data-no-print] {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|