@birdycom/omniaui-blocks 0.12.4 → 0.12.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/blocks/app-header.html +3 -3
- package/blocks/app-shell.html +13 -13
- package/blocks/auth-split.html +2 -2
- package/blocks/contact-grid.html +1 -1
- package/blocks/data-table.html +118 -73
- package/blocks/forgot-password.html +1 -1
- package/blocks/form-page.html +2 -2
- package/blocks/hero-code.html +3 -3
- package/blocks/login-01.html +1 -1
- package/blocks/login-02.html +1 -1
- package/blocks/login-03.html +1 -1
- package/blocks/module-header.html +1 -1
- package/blocks/otp-01.html +1 -1
- package/blocks/otp-02.html +1 -1
- package/blocks/product-grid.html +6 -6
- package/blocks/profile-header.html +27 -11
- package/blocks/reset-password.html +1 -1
- package/blocks/sidebar-01.html +11 -11
- package/blocks/sidebar-02.html +9 -9
- package/blocks/sidebar-03.html +5 -5
- package/blocks/sidebar-04.html +11 -11
- package/blocks/sidebar-05.html +6 -6
- package/blocks/signup-01.html +2 -2
- package/blocks/signup-02.html +2 -2
- package/blocks/site-footer.html +6 -6
- package/blocks/site-header.html +1 -1
- package/blocks/spotlight.html +2 -2
- package/blocks/team-list.html +3 -3
- package/dist/blocks.css +64 -1
- package/dist/blocks.min.css +1 -1
- package/dist/parts/app-data-table-look.css +41 -0
- package/dist/parts/site-profile-header.css +17 -0
- package/package.json +2 -2
- package/pro.json +48 -0
package/dist/blocks.css
CHANGED
|
@@ -601,7 +601,10 @@
|
|
|
601
601
|
border-block-end: 1px solid var(--oc-border);
|
|
602
602
|
}
|
|
603
603
|
|
|
604
|
-
.oc-block-appbar-nav { flex: 1; min-inline-size: 0; overflow-x: auto; }
|
|
604
|
+
.oc-block-appbar-nav { flex: 1; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }
|
|
605
|
+
/* One line: in a narrow header the module links scroll sideways instead of wrapping onto a second row. */
|
|
606
|
+
.oc-block-appbar-nav .oc-navmenu { flex-wrap: nowrap; }
|
|
607
|
+
.oc-block-appbar-nav .oc-navmenu-link { white-space: nowrap; }
|
|
605
608
|
|
|
606
609
|
.oc-block-appbar-actions { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; }
|
|
607
610
|
|
|
@@ -1113,6 +1116,49 @@
|
|
|
1113
1116
|
|
|
1114
1117
|
.oc-block-dash-table { inline-size: 100%; }
|
|
1115
1118
|
|
|
1119
|
+
/* parts/app-data-table-look.css */
|
|
1120
|
+
/* File: packages/blocks/src/parts/app-data-table-look.css | Map: toolbar controls (2rem, pills) -> header row -> striped rows -> row actions -> footer and pager */
|
|
1121
|
+
/* The data table block (server-rendered, also the Livewire DataTable) in the look of the data table component
|
|
1122
|
+
(.oc-data-table in packages/ui): the same control height, header, stripes, sort icons and footer. */
|
|
1123
|
+
|
|
1124
|
+
.oc-block-datatable .oc-table-toolbar :is(.oc-input, .oc-select) { block-size: 2rem; padding-block: 0; font-size: 0.8125rem; }
|
|
1125
|
+
.oc-block-datatable .oc-table-toolbar .oc-input { flex: 1 1 10rem; min-inline-size: 9rem; }
|
|
1126
|
+
.oc-block-datatable .oc-filter-pills { border-inline-start: 0; padding-inline-start: 0; }
|
|
1127
|
+
.oc-block-datatable .oc-filter-pill { display: inline-flex; align-items: center; block-size: 2rem; padding-inline: 0.625rem; border-radius: calc(var(--oc-radius) - 2px); }
|
|
1128
|
+
.oc-block-datatable .oc-filter-pill { font: inherit; font-size: 0.8125rem; cursor: pointer; }
|
|
1129
|
+
.oc-block-datatable .oc-filter-pill[aria-current="true"] { color: var(--oc-primary-foreground); background: var(--oc-primary); border-color: var(--oc-primary); }
|
|
1130
|
+
|
|
1131
|
+
.oc-block-datatable .oc-table thead th {
|
|
1132
|
+
block-size: 2.75rem;
|
|
1133
|
+
font-size: 0.8125rem;
|
|
1134
|
+
font-weight: 600;
|
|
1135
|
+
color: var(--oc-foreground);
|
|
1136
|
+
background: var(--oc-card);
|
|
1137
|
+
}
|
|
1138
|
+
.oc-block-datatable .oc-table :is(th, td) { white-space: nowrap; vertical-align: middle; }
|
|
1139
|
+
.oc-block-datatable .oc-table tbody tr:nth-child(even of :not([hidden])) { background: color-mix(in oklch, var(--oc-card), var(--oc-foreground) 3.5%); }
|
|
1140
|
+
.oc-block-datatable .oc-table tbody tr:hover { background: color-mix(in oklch, var(--oc-card), var(--oc-primary) 8%); }
|
|
1141
|
+
.oc-block-datatable td.oc-table-actions { text-align: end; }
|
|
1142
|
+
.oc-block-datatable .oc-block-datatable-bulk[hidden] { display: none; }
|
|
1143
|
+
.oc-block-datatable .oc-table tbody tr[hidden] { display: none; }
|
|
1144
|
+
.oc-block-datatable td.oc-table-actions > * + * { margin-inline-start: 0.375rem; }
|
|
1145
|
+
|
|
1146
|
+
.oc-block-datatable .oc-table-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
|
|
1147
|
+
.oc-block-datatable .oc-table-footer label { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--oc-foreground); }
|
|
1148
|
+
.oc-block-datatable .oc-table-footer .oc-select { block-size: 2rem; padding-block: 0; inline-size: auto; font-size: 0.8125rem; }
|
|
1149
|
+
.oc-block-datatable .oc-table-footer nav { justify-self: end; }
|
|
1150
|
+
.oc-block-datatable .oc-pagination-item :is(a, button) { min-inline-size: 2rem; min-block-size: 2rem; font-size: 0.8125rem; }
|
|
1151
|
+
.oc-block-datatable .oc-pagination-item:is(.is-active, [aria-current]) :is(a, button),
|
|
1152
|
+
.oc-block-datatable .oc-pagination-item [aria-current="page"] {
|
|
1153
|
+
color: var(--oc-primary);
|
|
1154
|
+
background: oklch(from var(--oc-primary) l c h / 0.1);
|
|
1155
|
+
border-color: oklch(from var(--oc-primary) l c h / 0.35);
|
|
1156
|
+
}
|
|
1157
|
+
@media (max-width: 40rem) {
|
|
1158
|
+
.oc-block-datatable .oc-table-footer { grid-template-columns: 1fr; }
|
|
1159
|
+
.oc-block-datatable .oc-table-footer nav { justify-self: start; }
|
|
1160
|
+
}
|
|
1161
|
+
|
|
1116
1162
|
/* parts/site-about-timeline.css */
|
|
1117
1163
|
/* File: packages/blocks/src/parts/site-about-timeline.css
|
|
1118
1164
|
Map: section -> split grid -> media placeholder + badge -> copy -> timeline spacing -> reverse variant
|
|
@@ -1448,6 +1494,23 @@ a.oc-block-contact-line:hover { color: var(--oc-brand-1); }
|
|
|
1448
1494
|
.oc-block-profile-tab:hover { color: var(--oc-foreground); }
|
|
1449
1495
|
.oc-block-profile-tab[aria-current="page"] { border-block-end-color: var(--oc-brand-1); color: var(--oc-foreground); }
|
|
1450
1496
|
.oc-block-profile-tab:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
|
|
1497
|
+
/* Tabs on the page itself (no route per tab): label.oc-block-profile-tab with a radio, the matching
|
|
1498
|
+
.oc-block-profile-panel (same order) shows. CSS only. */
|
|
1499
|
+
label.oc-block-profile-tab { position: relative; cursor: pointer; }
|
|
1500
|
+
.oc-block-profile-tab > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
|
|
1501
|
+
.oc-block-profile-tab:has(input:checked) { border-block-end-color: var(--oc-brand-1); color: var(--oc-foreground); }
|
|
1502
|
+
.oc-block-profile-tab:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
|
|
1503
|
+
.oc-block-profile-panel { display: none; padding: 1.25rem clamp(1rem, 3vw, 1.5rem); }
|
|
1504
|
+
.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(1) input:checked) .oc-block-profile-panel:nth-of-type(1),
|
|
1505
|
+
.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(2) input:checked) .oc-block-profile-panel:nth-of-type(2),
|
|
1506
|
+
.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(3) input:checked) .oc-block-profile-panel:nth-of-type(3),
|
|
1507
|
+
.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(4) input:checked) .oc-block-profile-panel:nth-of-type(4),
|
|
1508
|
+
.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(5) input:checked) .oc-block-profile-panel:nth-of-type(5),
|
|
1509
|
+
.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(6) input:checked) .oc-block-profile-panel:nth-of-type(6) { display: block; }
|
|
1510
|
+
.oc-block-profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
|
|
1511
|
+
.oc-block-profile-grid > li { display: grid; gap: 0.4rem; font-size: 0.875rem; }
|
|
1512
|
+
.oc-block-profile-grid small { color: var(--oc-muted-foreground); }
|
|
1513
|
+
.oc-block-profile-thumb { aspect-ratio: 16 / 9; border-radius: var(--oc-radius); background: linear-gradient(135deg, var(--oc-accent-from, var(--oc-primary)), var(--oc-accent-to, var(--oc-primary))); opacity: 0.85; }
|
|
1451
1514
|
|
|
1452
1515
|
/* Compact: low banner and a smaller avatar. */
|
|
1453
1516
|
.oc-block-profile--compact .oc-block-profile-banner { aspect-ratio: 10 / 1; min-block-size: 4.5rem; }
|
package/dist/blocks.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--oc-block-max-width:1200px;--oc-block-gap:24px;--oc-block-radius:16px;--oc-block-surface:var(--oc-card);--oc-block-surface-soft:var(--oc-muted);--oc-block-border:var(--oc-border);--oc-block-text:var(--oc-foreground);--oc-block-text-soft:var(--oc-muted-foreground);--oc-block-accent:var(--oc-primary)}.oc-block-hero{text-align:center;padding:64px var(--oc-block-gap) 48px;max-width:var(--oc-block-max-width);margin:0 auto}.oc-block-hero-badge{border:1px solid var(--oc-block-border);color:var(--oc-block-accent);background:oklch(from var(--color-vividblue-50) l c h / .08);border-radius:999px;margin-bottom:16px;padding:4px 12px;font-size:.78rem;display:inline-block}.oc-block-hero h1{color:var(--oc-block-text);letter-spacing:-.02em;margin:0 0 16px;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.15}.oc-block-hero p{color:var(--oc-block-text-soft);max-width:640px;margin:0 auto 28px;font-size:1.1rem;line-height:1.6}.oc-block-hero-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.oc-block-hero-split{padding:48px var(--oc-block-gap);max-width:var(--oc-block-max-width);grid-template-columns:1fr 1fr;align-items:center;gap:40px;margin:0 auto;display:grid}.oc-block-hero-split h1{color:var(--oc-block-text);margin:0 0 14px;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;line-height:1.15}.oc-block-hero-split p{color:var(--oc-block-text-soft);margin:0 0 24px;font-size:1rem;line-height:1.6}.oc-block-hero-visual{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);min-height:280px;color:var(--oc-block-text-soft);justify-content:center;align-items:center;font-size:.9rem;display:flex}@media (width<=50rem){.oc-block-hero-split{text-align:center;grid-template-columns:1fr}}.oc-block-auth{max-width:400px;padding:0 var(--oc-block-gap);margin:48px auto}.oc-block-auth-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:32px 28px}.oc-block-auth-card h2{color:var(--oc-block-text);margin:0 0 6px;font-size:1.3rem}.oc-block-auth-card .oc-block-subtitle{color:var(--oc-block-text-soft);margin:0 0 24px;font-size:.88rem}.oc-block-auth-footer{text-align:center;color:var(--oc-block-text-soft);margin-top:16px;font-size:.85rem}.oc-block-auth-footer a{color:var(--oc-block-accent);text-decoration:none}.oc-block-auth-footer a:hover{text-decoration:underline}.oc-block-auth-divider{color:var(--oc-block-text-soft);align-items:center;gap:12px;margin:20px 0;font-size:.82rem;display:flex}.oc-block-auth-divider:before,.oc-block-auth-divider:after{content:"";background:var(--oc-block-border);flex:1;height:1px}.oc-block-pricing{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;margin:48px auto}.oc-block-pricing h2{color:var(--oc-block-text);margin:0 0 8px;font-size:1.8rem}.oc-block-pricing>p{color:var(--oc-block-text-soft);margin:0 0 32px;font-size:1rem}.oc-block-pricing-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;display:grid}.oc-block-pricing-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);text-align:left;flex-direction:column;padding:28px 24px;display:flex}.oc-block-pricing-card--featured{border-color:var(--oc-block-accent);box-shadow:0 0 0 1px var(--oc-block-accent)}.oc-block-pricing-name{color:var(--oc-block-text);margin:0 0 4px;font-size:1rem;font-weight:600}.oc-block-pricing-desc{color:var(--oc-block-text-soft);margin:0 0 16px;font-size:.85rem}.oc-block-pricing-price{color:var(--oc-block-text);margin:0 0 4px;font-size:2.2rem;font-weight:700}.oc-block-pricing-price span{color:var(--oc-block-text-soft);font-size:.9rem;font-weight:400}.oc-block-pricing-features{flex:1;margin:16px 0 24px;padding:0;list-style:none}.oc-block-pricing-features li{color:var(--oc-block-text-soft);border-bottom:1px solid var(--oc-border);padding:6px 0;font-size:.88rem}.oc-block-pricing-features li:before{content:"✓ ";color:var(--oc-block-accent);font-weight:600}.oc-block-features{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;margin:48px auto}.oc-block-features h2{color:var(--oc-block-text);margin:0 0 8px;font-size:1.6rem}.oc-block-features>p{color:var(--oc-block-text-soft);margin:0 0 32px}.oc-block-features-grid{text-align:left;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;display:grid}.oc-block-feature-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:24px}.oc-block-feature-icon{background:oklch(from var(--color-vividblue-50) l c h / .12);width:40px;height:40px;color:var(--oc-block-accent);border-radius:10px;justify-content:center;align-items:center;margin-bottom:14px;font-size:1.2rem;display:flex}.oc-block-feature-card h3{color:var(--oc-block-text);margin:0 0 8px;font-size:1rem}.oc-block-feature-card p{color:var(--oc-block-text-soft);margin:0;font-size:.88rem;line-height:1.55}.oc-block-testimonials{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);margin:48px auto}.oc-block-testimonial-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;display:grid}.oc-block-testimonial-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:24px}.oc-block-testimonial-card blockquote{color:var(--oc-block-text-soft);margin:0 0 16px;font-size:.92rem;font-style:italic;line-height:1.6}.oc-block-testimonial-author{align-items:center;gap:10px;display:flex}.oc-block-testimonial-author strong{color:var(--oc-block-text);font-size:.88rem;display:block}.oc-block-testimonial-author span{color:var(--oc-block-text-soft);font-size:.78rem}.oc-block-footer{border-top:1px solid var(--oc-block-border);inline-size:100%;padding:40px var(--oc-block-gap) 24px;max-width:var(--oc-block-max-width);margin:48px auto 0}.oc-block-footer-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px;margin-bottom:32px;display:grid}.oc-block-footer-col h4{text-transform:uppercase;letter-spacing:.06em;color:var(--oc-block-text-soft);margin:0 0 12px;font-size:.85rem}.oc-block-footer-col ul{margin:0;padding:0;list-style:none}.oc-block-footer-col li{margin-bottom:8px}.oc-block-footer-col a{color:var(--oc-block-text-soft);font-size:.88rem;text-decoration:none}.oc-block-footer-col a:hover{color:var(--oc-block-text)}.oc-block-footer-bottom{border-top:1px solid var(--oc-block-border);color:var(--oc-block-text-soft);flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:16px;font-size:.82rem;display:flex}.oc-block-cta{background:linear-gradient(135deg, oklch(from var(--color-vividblue-50) l c h / .12), oklch(from var(--color-indigo-10) l c h / .08));border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);text-align:center;max-width:var(--oc-block-max-width);margin:48px auto;padding:40px}.oc-block-cta h2{color:var(--oc-block-text);margin:0 0 10px;font-size:1.5rem}.oc-block-cta p{color:var(--oc-block-text-soft);max-width:520px;margin:0 auto 24px}.oc-block-stats{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin:48px auto;display:grid}.oc-block-stat{padding:20px}.oc-block-stat-value{color:var(--oc-block-accent);margin-bottom:4px;font-size:2rem;font-weight:700}.oc-block-stat-label{color:var(--oc-block-text-soft);font-size:.85rem}.oc-block-swatch-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px;display:grid}.oc-block-swatch-grid .oc-swatch--ral-group{border-color:var(--color-vividblue-70);background:oklch(from var(--color-vividblue-70) l c h / .12);min-height:88px}.oc-block-shell{--oc-block-shell-height:100dvh;block-size:var(--oc-block-shell-height);background:var(--oc-background);color:var(--oc-foreground);grid-template-columns:auto minmax(0,1fr);display:grid;overflow:hidden}.oc-block-shell-toggle{opacity:0;pointer-events:none;position:absolute}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar{inline-size:var(--oc-sidebar-width-icon)}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-label{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-badge{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-sub{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-group-label{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar .oc-user-text{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) details.oc-sidebar-collapsible>summary:after{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-button{justify-content:center;padding-inline:0}.oc-block-shell-main{flex-direction:column;min-block-size:0;min-inline-size:0;display:flex}.oc-block-shell-breadcrumbs{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;padding:.5rem 1rem}.oc-block-shell-content{overscroll-behavior-y:contain;flex:1;min-block-size:0;min-inline-size:0;padding:1rem;overflow:auto}.oc-block-shell-menu-button{display:none}@media (width<=47.99rem){.oc-block-shell{grid-template-columns:minmax(0,1fr)}.oc-block-shell>.oc-sidebar{display:none}.oc-block-shell-menu-button{display:inline-flex}}.oc-block-appbar{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;align-items:center;gap:.75rem;min-block-size:3.5rem;padding:.5rem 1rem;display:flex}.oc-block-appbar-nav{flex:1;min-inline-size:0;overflow-x:auto}.oc-block-appbar-actions{align-items:center;gap:.5rem;margin-inline-start:auto;display:flex}.oc-block-appbar-title{white-space:nowrap;font-size:1rem;font-weight:600}.oc-block-modulehead{padding:1.5rem 0 .5rem}.oc-block-modulehead-band{background:linear-gradient(100deg, oklch(from var(--oc-primary) l c h / .1), oklch(from var(--oc-primary) l c h / .02));border:1px solid oklch(from var(--oc-primary) l c h / .25);border-radius:calc(var(--oc-radius) + 4px);align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;display:flex}.oc-block-modulehead-icon{block-size:2.5rem;inline-size:2.5rem;color:var(--oc-primary);background:oklch(from var(--oc-primary) l c h / .12);border-radius:calc(var(--oc-radius) + 2px);flex-shrink:0;place-items:center;font-size:1.25rem;display:grid}.oc-block-modulehead-icon svg{block-size:1.25em;inline-size:1.25em}.oc-block-authsplit-logo svg{block-size:1.5rem;inline-size:1.5rem}.oc-block-modulehead-body{min-inline-size:0;max-inline-size:42rem}.oc-block-modulehead-title{letter-spacing:-.01em;color:var(--oc-foreground);margin:0;font-size:1.25rem;font-weight:600}.oc-block-modulehead-intro{color:var(--oc-muted-foreground);margin:.25rem 0 0;font-size:.875rem;line-height:1.55}.oc-block-modulehead-meta{flex-wrap:wrap;align-items:center;gap:.5rem;margin-block-start:.5rem;display:flex}.oc-block-modulehead-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding-block:1rem 0;display:flex}.oc-block-datatable{padding:0}.oc-block-datatable-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:1.25rem 1.5rem 0;display:flex}.oc-block-datatable-title{color:var(--oc-foreground);margin:0;font-size:1.1rem;font-weight:600}.oc-block-datatable-description{color:var(--oc-muted-foreground);margin:.125rem 0 0;font-size:.875rem}.oc-block-datatable-body{padding:1rem 1.5rem 1.25rem}.oc-block-datatable .oc-table-wrap{border:1px solid var(--oc-border)}.oc-block-datatable .oc-table{table-layout:auto}.oc-block-datatable .oc-table th,.oc-block-datatable .oc-table td{border-inline:0}.oc-block-datatable .oc-table tbody tr:last-child td{border-block-end:0}.oc-block-datatable .oc-table-wrap>.oc-table{min-inline-size:40rem}.oc-block-datatable-bulk{background:oklch(from var(--oc-primary) l c h / .08);border:1px solid oklch(from var(--oc-primary) l c h / .3);border-radius:var(--oc-radius);align-items:center;gap:.75rem;margin-block-end:.75rem;padding:.5rem .75rem;font-size:.8125rem;display:flex}.oc-block-authsplit{background:var(--oc-background);min-block-size:32rem;color:var(--oc-foreground);display:grid}@media (width>=62rem){.oc-block-authsplit{grid-template-columns:1fr 1fr}}.oc-block-authsplit-brand{color:var(--oc-primary-foreground);background:radial-gradient(ellipse 80% 60% at 20% -10%, oklch(from var(--oc-brand-2) l c h / .35), transparent 55%), var(--oc-primary);border-inline-end:1px solid var(--oc-border);flex-direction:column;justify-content:space-between;gap:2rem;padding:2.5rem;display:none;position:relative}@media (width>=62rem){.oc-block-authsplit-brand{display:flex}}.oc-block-authsplit-brand--photo{color:var(--color-white-100);background:linear-gradient(to top, oklch(from var(--color-black-100) l c h / .8), oklch(from var(--color-black-100) l c h / .15) 55%, oklch(from var(--color-black-100) l c h / .5)), var(--oc-authsplit-photo,none) center / cover no-repeat, var(--oc-primary)}.oc-block-authsplit-brand--photo .oc-block-authsplit-quote{border-inline-start-color:oklch(from var(--color-white-100) l c h / .6)}.oc-block-authsplit-logo{letter-spacing:-.01em;color:inherit;align-items:center;gap:.75rem;font-size:1.1rem;font-weight:600;text-decoration:none;display:inline-flex}.oc-block-authsplit-quote{border-inline-start:2px solid oklch(from var(--oc-primary-foreground) l c h / .55);max-inline-size:28rem;margin:0;padding-inline-start:1.25rem}.oc-block-authsplit-quote p{color:inherit;margin:0 0 .5rem;font-size:1.1rem;font-weight:500;line-height:1.55}.oc-block-authsplit-quote footer{opacity:.75;color:inherit;font-size:.875rem}.oc-block-authsplit-form{justify-content:center;align-items:center;padding:2rem 1rem;display:flex}.oc-block-authsplit-card{inline-size:100%;max-inline-size:26rem}.oc-block-authsplit-title{letter-spacing:-.01em;text-align:center;margin:0 0 .25rem;font-size:1.5rem;font-weight:600}.oc-block-authsplit-subtitle{text-align:center;color:var(--oc-muted-foreground);margin:0 0 1.5rem;font-size:.875rem}.oc-block-authsplit-fields{flex-direction:column;gap:1rem;display:flex}.oc-block-authsplit-row{justify-content:space-between;align-items:center;gap:.5rem;font-size:.8125rem;display:flex}.oc-block-twofactor{gap:1.5rem;max-inline-size:28rem;margin-inline:auto;display:grid}.oc-block-twofactor-step{gap:.75rem;display:grid}.oc-block-twofactor-center{text-align:center;justify-items:center;gap:.75rem;display:grid}.oc-block-twofactor-qr{block-size:11rem;inline-size:11rem;color:var(--oc-muted-foreground);background:var(--oc-surface-strong);border:1px dashed var(--oc-border-strong);border-radius:var(--oc-radius);place-items:center;font-size:.75rem;display:grid}.oc-block-wizard{flex-direction:column;min-block-size:0;display:flex}@media (width>=48rem){.oc-block-wizard{flex-direction:row}}.oc-block-wizard-rail{border-block-end:1px solid var(--oc-border);flex-shrink:0;padding:.75rem;overflow-x:auto}@media (width>=48rem){.oc-block-wizard-rail{border-block-end:0;border-inline-end:1px solid var(--oc-border);inline-size:15rem;padding:1rem;overflow-y:auto}}.oc-block-wizard-main{flex-direction:column;flex:1;min-inline-size:0;display:flex}.oc-block-wizard-step{flex-direction:column;flex:1;gap:1rem;padding:1.25rem 1.5rem;display:flex}.oc-block-wizard-step[hidden]{display:none}.oc-block-team{border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);background:var(--oc-card);flex-direction:column;display:flex;overflow:hidden}.oc-block-team-row{align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.oc-block-team-row+.oc-block-team-row{border-block-start:1px solid var(--oc-border)}.oc-block-team-row .oc-user{flex:1}.oc-block-team-meta{align-items:center;gap:.5rem;display:flex}.oc-block-formpage{flex-direction:column;gap:1rem;max-inline-size:56rem;display:flex}.oc-block-formpage-grid{gap:1rem;display:grid}@media (width>=40rem){.oc-block-formpage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.oc-block-formpage-actions{background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 2px);box-shadow:0 -4px 16px oklch(from var(--color-black-60) l c h / .08);justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;display:flex;position:sticky;inset-block-end:0}.oc-block-authpage{min-block-size:30rem;color:var(--oc-foreground);background:var(--oc-muted);border-radius:calc(var(--oc-radius) + 4px);place-items:center;padding:2rem 1rem;display:grid}.oc-block-authpage--plain{background:var(--oc-background);border:1px solid var(--oc-border)}.oc-block-authcard{inline-size:100%;max-inline-size:24rem;color:var(--oc-foreground);background:var(--oc-card);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);box-shadow:0 1px 2px oklch(from var(--color-black-60) l c h / .06);flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.oc-block-authcard--flat{box-shadow:none;background:0 0;border:0;padding:0}.oc-block-authcard--wide{max-inline-size:28rem}.oc-block-authcard-logo{block-size:2.5rem;inline-size:2.5rem;color:var(--oc-primary-foreground);background:var(--oc-primary);border-radius:var(--oc-radius);place-items:center;margin-inline:auto;display:grid}.oc-block-authcard-logo svg{block-size:1.35rem;inline-size:1.35rem}.oc-block-authcard-head{text-align:center;flex-direction:column;gap:.25rem;display:flex}.oc-block-authcard-title{letter-spacing:-.01em;margin:0;font-size:1.375rem;font-weight:600}.oc-block-authcard-text{color:var(--oc-muted-foreground);margin:0;font-size:.875rem}.oc-block-authcard-fields{flex-direction:column;gap:1rem;display:flex}.oc-block-authcard-fields .oc-field:has(>.oc-otp){text-align:center;align-items:center}.oc-block-authcard-row{justify-content:space-between;align-items:center;gap:.5rem;font-size:.8125rem;display:flex}.oc-block-authcard-foot{text-align:center;color:var(--oc-muted-foreground);margin:0;font-size:.875rem}.oc-block-authcard-foot a{color:var(--oc-foreground);text-underline-offset:3px;font-weight:500;text-decoration:underline}.oc-block-authcard-legal{text-align:center;color:var(--oc-muted-foreground);margin:0;font-size:.75rem}.oc-block-authcard-legal a{color:inherit;text-underline-offset:3px;text-decoration:underline}.oc-block-authcard-submit{inline-size:100%}.oc-block-authcard-hint{color:var(--oc-muted-foreground);margin:0;font-size:.75rem}.oc-block-authcard-center{flex-direction:column;align-items:center;gap:.75rem;display:flex}.oc-block-authsocial{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.5rem;display:grid}.oc-block-authsocial .oc-btn{inline-size:100%}.oc-block-authduo{color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);overflow:hidden;container:oc-authduo/inline-size}.oc-block-authduo-grid{min-block-size:34rem;display:grid}.oc-block-authduo-panel{color:var(--oc-primary-foreground);background:radial-gradient(ellipse 70% 55% at 85% 100%, oklch(from var(--oc-brand-2) l c h / .4), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 0%, oklch(from var(--oc-brand-3) l c h / .35), transparent 60%), var(--oc-primary);flex-direction:column;justify-content:space-between;gap:2rem;padding:2rem;display:none;position:relative}.oc-block-authduo-panel--image:before{content:"";background:repeating-linear-gradient(135deg, oklch(from var(--oc-primary-foreground) l c h / .07) 0 1px, transparent 1px 14px), linear-gradient(to top, oklch(from var(--oc-primary) l c h / .7), transparent 60%);pointer-events:none;position:absolute;inset:0}.oc-block-authduo-panel--muted{color:var(--oc-foreground);background:var(--oc-muted)}.oc-block-authduo-panel--photo{color:var(--color-white-100);background:linear-gradient(to top, oklch(from var(--color-black-100) l c h / .8), oklch(from var(--color-black-100) l c h / .15) 55%, oklch(from var(--color-black-100) l c h / .5)), var(--oc-authduo-photo,none) center / cover no-repeat, var(--oc-primary)}@container oc-authduo (width>=42rem){.oc-block-authduo-grid{grid-template-columns:1fr 1fr}.oc-block-authduo-panel{display:flex}.oc-block-authduo--reverse .oc-block-authduo-panel{order:2}}.oc-block-authduo-panel>*{position:relative}.oc-block-authduo-logo{color:inherit;align-items:center;gap:.6rem;font-weight:600;text-decoration:none;display:inline-flex}.oc-block-authduo-logo svg{block-size:1.4rem;inline-size:1.4rem}.oc-block-authduo-quote{max-inline-size:26rem;margin:0}.oc-block-authduo-quote p{color:inherit;margin:0 0 .5rem;font-size:1.05rem;font-weight:500;line-height:1.55}.oc-block-authduo-quote footer{opacity:.8;color:inherit;font-size:.8125rem}.oc-block-authduo-form{place-items:center;padding:2rem 1.25rem;display:grid}.oc-block-authmin{min-block-size:26rem;color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);place-items:center;padding:2rem 1rem;display:grid}.oc-block-sb{--oc-block-sb-height:26rem;block-size:var(--oc-block-sb-height);color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);grid-template-columns:auto minmax(0,1fr);display:grid;overflow:hidden}.oc-block-sb--floating{background:var(--oc-muted)}.oc-block-sb-main{flex-direction:column;min-block-size:0;min-inline-size:0;display:flex}.oc-block-sb-bar{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;align-items:center;gap:.5rem;min-block-size:3rem;padding:.5rem .75rem;display:flex}.oc-block-sb-sep{background:var(--oc-border-strong);block-size:1rem;inline-size:1px}.oc-block-sb-body{flex:1;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:4.5rem;gap:.75rem;min-block-size:0;padding:.75rem;display:grid;overflow:auto}.oc-block-sb-ph{background:var(--oc-muted);border-radius:var(--oc-radius)}.oc-block-sb-ph--wide{grid-area:span 3/1/auto/-1}.oc-block-sb-toggle{opacity:0;pointer-events:none;position:absolute}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar{inline-size:var(--oc-sidebar-width-icon)}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-label{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-badge{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-sub{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-group-label{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar .oc-user-text{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) details.oc-sidebar-collapsible>summary:after{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-button{justify-content:center;padding-inline:0}.oc-block-sb-hint{color:var(--oc-muted-foreground);margin:0;padding:0 .75rem;font-size:.75rem}.oc-block-sb-group>summary{letter-spacing:.04em;text-transform:uppercase;color:var(--oc-muted-foreground);cursor:pointer;border-radius:var(--oc-radius);justify-content:space-between;align-items:center;padding:.5rem .625rem .25rem;font-size:.7rem;font-weight:600;list-style:none;display:flex}.oc-block-sb-group>summary::-webkit-details-marker{display:none}.oc-block-sb-group>summary:after{content:"";block-size:.4rem;inline-size:.4rem;transition:rotate var(--oc-transition-fast);border-block-end:1.5px solid;border-inline-end:1.5px solid;rotate:-45deg}.oc-block-sb-group[open]>summary:after{rotate:45deg}.oc-block-sb-group>summary:focus-visible{outline:2px solid var(--oc-ring);outline-offset:-2px}.oc-block-sb-rail{background:var(--oc-muted);border-inline-end:1px solid var(--oc-border);flex-direction:column;align-items:center;gap:.5rem;inline-size:3.5rem;padding:.75rem .5rem;display:flex}.oc-block-sb-rail .oc-sidebar-menu-button{justify-content:center;padding:.5rem}.oc-block-sb-switch{inline-size:100%;font:inherit;color:inherit;cursor:pointer;text-align:start;background:0 0;border:0}.oc-block-sb-tile{block-size:2rem;inline-size:2rem;color:var(--oc-primary-foreground);background:var(--oc-primary);border-radius:var(--oc-radius);flex:none;place-items:center;display:grid}.oc-block-sb-tile svg{block-size:1rem;inline-size:1rem}.oc-block-sb-sub{color:var(--oc-muted-foreground);font-size:.75rem;font-weight:400;display:block}.oc-block-dash-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem;display:grid}.oc-block-dash-table{inline-size:100%}.oc-block-about{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto;container-type:inline-size}.oc-block-about-inner{align-items:center;gap:clamp(2rem,5vw,3.5rem);display:grid}@container (width>=52rem){.oc-block-about-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.oc-block-about--reverse .oc-block-about-media{order:2}}.oc-block-about-media{aspect-ratio:4/3;border:1px solid var(--oc-border);border-radius:var(--oc-radius-lg,1.25rem);background:radial-gradient(circle at 25% 20%, color-mix(in oklch, var(--color-white-50) 28%, transparent), transparent 40%), linear-gradient(140deg, var(--oc-accent-from), var(--oc-accent-to));margin:0;position:relative;overflow:hidden}.oc-block-about-media>img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.oc-block-about-badge{border:1px solid var(--oc-border);border-radius:var(--oc-radius-md,.75rem);background:color-mix(in oklch, var(--oc-background) 85%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--oc-muted-foreground);padding:.75rem 1rem;font-size:.85rem;display:grid;position:absolute;inset:auto auto 1rem 1rem}.oc-block-about-badge strong{color:var(--oc-foreground);font-size:1.4rem;line-height:1.1}.oc-block-about-title{letter-spacing:-.02em;text-wrap:balance;margin:0 0 1rem;font-size:clamp(1.75rem,4vw,2.6rem);font-weight:700;line-height:1.15}.oc-block-about-copy>p:not([class]){color:var(--oc-muted-foreground);margin:0 0 1rem;line-height:1.65}.oc-block-about-copy .oc-timeline{margin-block-start:1.75rem}.oc-block-contact{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto}.oc-block-contact-head{max-inline-size:40rem;margin-block-end:2rem}.oc-block-contact-heading{letter-spacing:-.02em;margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700}.oc-block-contact-lead{color:var(--oc-muted-foreground);margin:0;font-size:1.05rem;line-height:1.6}.oc-block-contact-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1.25rem;display:grid}.oc-block-contact-card{border:1px solid var(--oc-border);border-radius:var(--oc-radius-lg,1.25rem);background:var(--oc-surface);align-content:start;gap:.35rem;padding:1.5rem;font-style:normal;display:grid}.oc-block-contact-card>.oc-product-mark{margin-block-end:.75rem}.oc-block-contact-title{margin:0 0 .25rem;font-size:1.05rem;font-weight:700}.oc-block-contact-line{color:var(--oc-muted-foreground);overflow-wrap:anywhere;margin:0;font-size:.95rem;line-height:1.55;text-decoration:none}a.oc-block-contact-line{color:var(--oc-foreground);font-weight:500}a.oc-block-contact-line:hover{color:var(--oc-brand-1)}.oc-block-contact--plain .oc-block-contact-card{border:0;border-block-start:2px solid var(--oc-border-strong);background:0 0;border-radius:0;padding:1.25rem 0 0}.oc-block-faq{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto;container-type:inline-size}.oc-block-faq-inner{gap:2rem;max-inline-size:48rem;margin-inline:auto;display:grid}.oc-block-faq-head{text-align:center}.oc-block-faq-title{letter-spacing:-.02em;text-wrap:balance;margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700}.oc-block-faq-lead{color:var(--oc-block-text-soft,var(--oc-muted-foreground));margin:0;font-size:1.05rem;line-height:1.6}.oc-block-faq-list{--oc-accordion-width:100%;background:var(--oc-block-surface,var(--oc-card))}.oc-block-faq-more{color:var(--oc-block-text-soft,var(--oc-muted-foreground));text-align:center;margin:0}@container (width>=48rem){.oc-block-faq--split .oc-block-faq-inner{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start;max-inline-size:none}.oc-block-faq--split .oc-block-faq-head{text-align:start;position:sticky;inset-block-start:1rem}.oc-block-faq--split .oc-block-faq-more{text-align:start;grid-column:2}}.oc-block-orbit-visual{aspect-ratio:1;place-items:center;inline-size:100%;max-inline-size:32rem;margin-inline:auto;display:grid;position:relative;container-type:inline-size}.oc-block-orbit-ring{border:1px dashed color-mix(in oklch, var(--oc-border-strong) 80%, transparent);animation:oc-orbit-spin var(--oc-orbit-duration,60s) linear infinite;border-radius:50%;position:absolute;inset:6%}.oc-block-orbit-ring:before{content:"";border:1px solid color-mix(in oklch, var(--oc-border) 70%, transparent);border-radius:50%;position:absolute;inset:18%}.oc-block-orbit-mark{translate:-50% -50%;transform:rotate(var(--oc-orbit-angle,0deg)) translateX(44cqi) rotate(calc(var(--oc-orbit-angle,0deg) * -1));position:absolute;inset-block-start:50%;inset-inline-start:50%}.oc-block-orbit-mark>*{animation:oc-orbit-spin var(--oc-orbit-duration,60s) linear infinite reverse;display:grid}.oc-block-orbit-center{z-index:1;inline-size:min(100%,72cqi);position:relative}.oc-block-orbit-center.oc-code-window .oc-code-window__body{font-size:clamp(.7rem,2.6cqi,.9rem)}@keyframes oc-orbit-spin{to{rotate:360deg}}@media (prefers-reduced-motion:reduce){.oc-block-orbit-ring,.oc-block-orbit-mark>*{animation:none}}.oc-block-portfolio-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;margin-block-end:2rem;display:flex}.oc-block-portfolio-head .oc-display{margin-block-end:0}.oc-block-portfolio-lead{color:var(--oc-muted-foreground);max-inline-size:36rem;margin:.75rem 0 0}.oc-block-portfolio-grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--oc-portfolio-min,18rem)), 1fr));gap:1.5rem;display:grid}.oc-block-portfolio--two{--oc-portfolio-min:26rem}.oc-block-profile{max-inline-size:var(--oc-block-max-width,1200px);margin-inline:auto;container-type:inline-size}.oc-block-profile-banner{aspect-ratio:6;border-radius:var(--oc-block-radius,16px);background:var(--oc-profile-banner,radial-gradient(circle at 85% 30%, color-mix(in oklch, var(--color-white-50) 25%, transparent), transparent 40%)), linear-gradient(120deg, var(--oc-accent-from), var(--oc-accent-to));background-position:50%;background-size:cover;min-block-size:7rem}.oc-block-profile-bar{flex-wrap:wrap;align-items:flex-end;gap:1rem 1.25rem;padding-inline:clamp(1rem,3vw,1.5rem);display:flex}.oc-block-profile-avatar.oc-avatar{border:4px solid var(--oc-background);width:6.5rem;height:6.5rem;margin-block-start:-3.25rem;font-size:2rem}.oc-block-profile-info{flex:16rem;min-inline-size:0;padding-block-start:.75rem}.oc-block-profile-name{letter-spacing:-.02em;margin:0;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700}.oc-block-profile-meta{color:var(--oc-muted-foreground);margin:.2rem 0 0;font-size:.9rem}.oc-block-profile-bio{color:var(--oc-muted-foreground);max-inline-size:44rem;margin:.5rem 0 0;font-size:.95rem}.oc-block-profile-actions{flex-wrap:wrap;gap:.5rem;display:flex}.oc-block-profile-tabs{border-block-end:1px solid var(--oc-border);scrollbar-width:none;gap:.25rem;margin-block-start:1.25rem;padding-inline:clamp(1rem,3vw,1.5rem);display:flex;overflow-x:auto}.oc-block-profile-tab{color:var(--oc-muted-foreground);white-space:nowrap;transition:color var(--oc-transition-fast,.15s), border-color var(--oc-transition-fast,.15s);border-block-end:2px solid #0000;padding:.75rem 1rem;font-size:.92rem;font-weight:500;text-decoration:none}.oc-block-profile-tab:hover{color:var(--oc-foreground)}.oc-block-profile-tab[aria-current=page]{border-block-end-color:var(--oc-brand-1);color:var(--oc-foreground)}.oc-block-profile-tab:focus-visible{outline:2px solid var(--oc-ring);outline-offset:-2px}.oc-block-profile--compact .oc-block-profile-banner{aspect-ratio:10;min-block-size:4.5rem}.oc-block-profile--compact .oc-block-profile-avatar.oc-avatar{width:4.5rem;height:4.5rem;margin-block-start:-2.25rem;font-size:1.4rem}@container (width<=34rem){.oc-block-profile-actions{flex-basis:100%}}
|
|
1
|
+
:root{--oc-block-max-width:1200px;--oc-block-gap:24px;--oc-block-radius:16px;--oc-block-surface:var(--oc-card);--oc-block-surface-soft:var(--oc-muted);--oc-block-border:var(--oc-border);--oc-block-text:var(--oc-foreground);--oc-block-text-soft:var(--oc-muted-foreground);--oc-block-accent:var(--oc-primary)}.oc-block-hero{text-align:center;padding:64px var(--oc-block-gap) 48px;max-width:var(--oc-block-max-width);margin:0 auto}.oc-block-hero-badge{border:1px solid var(--oc-block-border);color:var(--oc-block-accent);background:oklch(from var(--color-vividblue-50) l c h / .08);border-radius:999px;margin-bottom:16px;padding:4px 12px;font-size:.78rem;display:inline-block}.oc-block-hero h1{color:var(--oc-block-text);letter-spacing:-.02em;margin:0 0 16px;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.15}.oc-block-hero p{color:var(--oc-block-text-soft);max-width:640px;margin:0 auto 28px;font-size:1.1rem;line-height:1.6}.oc-block-hero-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.oc-block-hero-split{padding:48px var(--oc-block-gap);max-width:var(--oc-block-max-width);grid-template-columns:1fr 1fr;align-items:center;gap:40px;margin:0 auto;display:grid}.oc-block-hero-split h1{color:var(--oc-block-text);margin:0 0 14px;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;line-height:1.15}.oc-block-hero-split p{color:var(--oc-block-text-soft);margin:0 0 24px;font-size:1rem;line-height:1.6}.oc-block-hero-visual{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);min-height:280px;color:var(--oc-block-text-soft);justify-content:center;align-items:center;font-size:.9rem;display:flex}@media (width<=50rem){.oc-block-hero-split{text-align:center;grid-template-columns:1fr}}.oc-block-auth{max-width:400px;padding:0 var(--oc-block-gap);margin:48px auto}.oc-block-auth-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:32px 28px}.oc-block-auth-card h2{color:var(--oc-block-text);margin:0 0 6px;font-size:1.3rem}.oc-block-auth-card .oc-block-subtitle{color:var(--oc-block-text-soft);margin:0 0 24px;font-size:.88rem}.oc-block-auth-footer{text-align:center;color:var(--oc-block-text-soft);margin-top:16px;font-size:.85rem}.oc-block-auth-footer a{color:var(--oc-block-accent);text-decoration:none}.oc-block-auth-footer a:hover{text-decoration:underline}.oc-block-auth-divider{color:var(--oc-block-text-soft);align-items:center;gap:12px;margin:20px 0;font-size:.82rem;display:flex}.oc-block-auth-divider:before,.oc-block-auth-divider:after{content:"";background:var(--oc-block-border);flex:1;height:1px}.oc-block-pricing{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;margin:48px auto}.oc-block-pricing h2{color:var(--oc-block-text);margin:0 0 8px;font-size:1.8rem}.oc-block-pricing>p{color:var(--oc-block-text-soft);margin:0 0 32px;font-size:1rem}.oc-block-pricing-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;display:grid}.oc-block-pricing-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);text-align:left;flex-direction:column;padding:28px 24px;display:flex}.oc-block-pricing-card--featured{border-color:var(--oc-block-accent);box-shadow:0 0 0 1px var(--oc-block-accent)}.oc-block-pricing-name{color:var(--oc-block-text);margin:0 0 4px;font-size:1rem;font-weight:600}.oc-block-pricing-desc{color:var(--oc-block-text-soft);margin:0 0 16px;font-size:.85rem}.oc-block-pricing-price{color:var(--oc-block-text);margin:0 0 4px;font-size:2.2rem;font-weight:700}.oc-block-pricing-price span{color:var(--oc-block-text-soft);font-size:.9rem;font-weight:400}.oc-block-pricing-features{flex:1;margin:16px 0 24px;padding:0;list-style:none}.oc-block-pricing-features li{color:var(--oc-block-text-soft);border-bottom:1px solid var(--oc-border);padding:6px 0;font-size:.88rem}.oc-block-pricing-features li:before{content:"✓ ";color:var(--oc-block-accent);font-weight:600}.oc-block-features{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;margin:48px auto}.oc-block-features h2{color:var(--oc-block-text);margin:0 0 8px;font-size:1.6rem}.oc-block-features>p{color:var(--oc-block-text-soft);margin:0 0 32px}.oc-block-features-grid{text-align:left;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;display:grid}.oc-block-feature-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:24px}.oc-block-feature-icon{background:oklch(from var(--color-vividblue-50) l c h / .12);width:40px;height:40px;color:var(--oc-block-accent);border-radius:10px;justify-content:center;align-items:center;margin-bottom:14px;font-size:1.2rem;display:flex}.oc-block-feature-card h3{color:var(--oc-block-text);margin:0 0 8px;font-size:1rem}.oc-block-feature-card p{color:var(--oc-block-text-soft);margin:0;font-size:.88rem;line-height:1.55}.oc-block-testimonials{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);margin:48px auto}.oc-block-testimonial-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;display:grid}.oc-block-testimonial-card{background:var(--oc-block-surface);border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);padding:24px}.oc-block-testimonial-card blockquote{color:var(--oc-block-text-soft);margin:0 0 16px;font-size:.92rem;font-style:italic;line-height:1.6}.oc-block-testimonial-author{align-items:center;gap:10px;display:flex}.oc-block-testimonial-author strong{color:var(--oc-block-text);font-size:.88rem;display:block}.oc-block-testimonial-author span{color:var(--oc-block-text-soft);font-size:.78rem}.oc-block-footer{border-top:1px solid var(--oc-block-border);inline-size:100%;padding:40px var(--oc-block-gap) 24px;max-width:var(--oc-block-max-width);margin:48px auto 0}.oc-block-footer-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px;margin-bottom:32px;display:grid}.oc-block-footer-col h4{text-transform:uppercase;letter-spacing:.06em;color:var(--oc-block-text-soft);margin:0 0 12px;font-size:.85rem}.oc-block-footer-col ul{margin:0;padding:0;list-style:none}.oc-block-footer-col li{margin-bottom:8px}.oc-block-footer-col a{color:var(--oc-block-text-soft);font-size:.88rem;text-decoration:none}.oc-block-footer-col a:hover{color:var(--oc-block-text)}.oc-block-footer-bottom{border-top:1px solid var(--oc-block-border);color:var(--oc-block-text-soft);flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:16px;font-size:.82rem;display:flex}.oc-block-cta{background:linear-gradient(135deg, oklch(from var(--color-vividblue-50) l c h / .12), oklch(from var(--color-indigo-10) l c h / .08));border:1px solid var(--oc-block-border);border-radius:var(--oc-block-radius);text-align:center;max-width:var(--oc-block-max-width);margin:48px auto;padding:40px}.oc-block-cta h2{color:var(--oc-block-text);margin:0 0 10px;font-size:1.5rem}.oc-block-cta p{color:var(--oc-block-text-soft);max-width:520px;margin:0 auto 24px}.oc-block-stats{max-width:var(--oc-block-max-width);padding:0 var(--oc-block-gap);text-align:center;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin:48px auto;display:grid}.oc-block-stat{padding:20px}.oc-block-stat-value{color:var(--oc-block-accent);margin-bottom:4px;font-size:2rem;font-weight:700}.oc-block-stat-label{color:var(--oc-block-text-soft);font-size:.85rem}.oc-block-swatch-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px;display:grid}.oc-block-swatch-grid .oc-swatch--ral-group{border-color:var(--color-vividblue-70);background:oklch(from var(--color-vividblue-70) l c h / .12);min-height:88px}.oc-block-shell{--oc-block-shell-height:100dvh;block-size:var(--oc-block-shell-height);background:var(--oc-background);color:var(--oc-foreground);grid-template-columns:auto minmax(0,1fr);display:grid;overflow:hidden}.oc-block-shell-toggle{opacity:0;pointer-events:none;position:absolute}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar{inline-size:var(--oc-sidebar-width-icon)}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-label{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-badge{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-sub{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-group-label{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar .oc-user-text{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) details.oc-sidebar-collapsible>summary:after{display:none}.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-button{justify-content:center;padding-inline:0}.oc-block-shell-main{flex-direction:column;min-block-size:0;min-inline-size:0;display:flex}.oc-block-shell-breadcrumbs{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;padding:.5rem 1rem}.oc-block-shell-content{overscroll-behavior-y:contain;flex:1;min-block-size:0;min-inline-size:0;padding:1rem;overflow:auto}.oc-block-shell-menu-button{display:none}@media (width<=47.99rem){.oc-block-shell{grid-template-columns:minmax(0,1fr)}.oc-block-shell>.oc-sidebar{display:none}.oc-block-shell-menu-button{display:inline-flex}}.oc-block-appbar{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;align-items:center;gap:.75rem;min-block-size:3.5rem;padding:.5rem 1rem;display:flex}.oc-block-appbar-nav{scrollbar-width:none;flex:1;min-inline-size:0;overflow-x:auto}.oc-block-appbar-nav .oc-navmenu{flex-wrap:nowrap}.oc-block-appbar-nav .oc-navmenu-link{white-space:nowrap}.oc-block-appbar-actions{align-items:center;gap:.5rem;margin-inline-start:auto;display:flex}.oc-block-appbar-title{white-space:nowrap;font-size:1rem;font-weight:600}.oc-block-modulehead{padding:1.5rem 0 .5rem}.oc-block-modulehead-band{background:linear-gradient(100deg, oklch(from var(--oc-primary) l c h / .1), oklch(from var(--oc-primary) l c h / .02));border:1px solid oklch(from var(--oc-primary) l c h / .25);border-radius:calc(var(--oc-radius) + 4px);align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;display:flex}.oc-block-modulehead-icon{block-size:2.5rem;inline-size:2.5rem;color:var(--oc-primary);background:oklch(from var(--oc-primary) l c h / .12);border-radius:calc(var(--oc-radius) + 2px);flex-shrink:0;place-items:center;font-size:1.25rem;display:grid}.oc-block-modulehead-icon svg{block-size:1.25em;inline-size:1.25em}.oc-block-authsplit-logo svg{block-size:1.5rem;inline-size:1.5rem}.oc-block-modulehead-body{min-inline-size:0;max-inline-size:42rem}.oc-block-modulehead-title{letter-spacing:-.01em;color:var(--oc-foreground);margin:0;font-size:1.25rem;font-weight:600}.oc-block-modulehead-intro{color:var(--oc-muted-foreground);margin:.25rem 0 0;font-size:.875rem;line-height:1.55}.oc-block-modulehead-meta{flex-wrap:wrap;align-items:center;gap:.5rem;margin-block-start:.5rem;display:flex}.oc-block-modulehead-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding-block:1rem 0;display:flex}.oc-block-datatable{padding:0}.oc-block-datatable-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:1.25rem 1.5rem 0;display:flex}.oc-block-datatable-title{color:var(--oc-foreground);margin:0;font-size:1.1rem;font-weight:600}.oc-block-datatable-description{color:var(--oc-muted-foreground);margin:.125rem 0 0;font-size:.875rem}.oc-block-datatable-body{padding:1rem 1.5rem 1.25rem}.oc-block-datatable .oc-table-wrap{border:1px solid var(--oc-border)}.oc-block-datatable .oc-table{table-layout:auto}.oc-block-datatable .oc-table th,.oc-block-datatable .oc-table td{border-inline:0}.oc-block-datatable .oc-table tbody tr:last-child td{border-block-end:0}.oc-block-datatable .oc-table-wrap>.oc-table{min-inline-size:40rem}.oc-block-datatable-bulk{background:oklch(from var(--oc-primary) l c h / .08);border:1px solid oklch(from var(--oc-primary) l c h / .3);border-radius:var(--oc-radius);align-items:center;gap:.75rem;margin-block-end:.75rem;padding:.5rem .75rem;font-size:.8125rem;display:flex}.oc-block-authsplit{background:var(--oc-background);min-block-size:32rem;color:var(--oc-foreground);display:grid}@media (width>=62rem){.oc-block-authsplit{grid-template-columns:1fr 1fr}}.oc-block-authsplit-brand{color:var(--oc-primary-foreground);background:radial-gradient(ellipse 80% 60% at 20% -10%, oklch(from var(--oc-brand-2) l c h / .35), transparent 55%), var(--oc-primary);border-inline-end:1px solid var(--oc-border);flex-direction:column;justify-content:space-between;gap:2rem;padding:2.5rem;display:none;position:relative}@media (width>=62rem){.oc-block-authsplit-brand{display:flex}}.oc-block-authsplit-brand--photo{color:var(--color-white-100);background:linear-gradient(to top, oklch(from var(--color-black-100) l c h / .8), oklch(from var(--color-black-100) l c h / .15) 55%, oklch(from var(--color-black-100) l c h / .5)), var(--oc-authsplit-photo,none) center / cover no-repeat, var(--oc-primary)}.oc-block-authsplit-brand--photo .oc-block-authsplit-quote{border-inline-start-color:oklch(from var(--color-white-100) l c h / .6)}.oc-block-authsplit-logo{letter-spacing:-.01em;color:inherit;align-items:center;gap:.75rem;font-size:1.1rem;font-weight:600;text-decoration:none;display:inline-flex}.oc-block-authsplit-quote{border-inline-start:2px solid oklch(from var(--oc-primary-foreground) l c h / .55);max-inline-size:28rem;margin:0;padding-inline-start:1.25rem}.oc-block-authsplit-quote p{color:inherit;margin:0 0 .5rem;font-size:1.1rem;font-weight:500;line-height:1.55}.oc-block-authsplit-quote footer{opacity:.75;color:inherit;font-size:.875rem}.oc-block-authsplit-form{justify-content:center;align-items:center;padding:2rem 1rem;display:flex}.oc-block-authsplit-card{inline-size:100%;max-inline-size:26rem}.oc-block-authsplit-title{letter-spacing:-.01em;text-align:center;margin:0 0 .25rem;font-size:1.5rem;font-weight:600}.oc-block-authsplit-subtitle{text-align:center;color:var(--oc-muted-foreground);margin:0 0 1.5rem;font-size:.875rem}.oc-block-authsplit-fields{flex-direction:column;gap:1rem;display:flex}.oc-block-authsplit-row{justify-content:space-between;align-items:center;gap:.5rem;font-size:.8125rem;display:flex}.oc-block-twofactor{gap:1.5rem;max-inline-size:28rem;margin-inline:auto;display:grid}.oc-block-twofactor-step{gap:.75rem;display:grid}.oc-block-twofactor-center{text-align:center;justify-items:center;gap:.75rem;display:grid}.oc-block-twofactor-qr{block-size:11rem;inline-size:11rem;color:var(--oc-muted-foreground);background:var(--oc-surface-strong);border:1px dashed var(--oc-border-strong);border-radius:var(--oc-radius);place-items:center;font-size:.75rem;display:grid}.oc-block-wizard{flex-direction:column;min-block-size:0;display:flex}@media (width>=48rem){.oc-block-wizard{flex-direction:row}}.oc-block-wizard-rail{border-block-end:1px solid var(--oc-border);flex-shrink:0;padding:.75rem;overflow-x:auto}@media (width>=48rem){.oc-block-wizard-rail{border-block-end:0;border-inline-end:1px solid var(--oc-border);inline-size:15rem;padding:1rem;overflow-y:auto}}.oc-block-wizard-main{flex-direction:column;flex:1;min-inline-size:0;display:flex}.oc-block-wizard-step{flex-direction:column;flex:1;gap:1rem;padding:1.25rem 1.5rem;display:flex}.oc-block-wizard-step[hidden]{display:none}.oc-block-team{border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);background:var(--oc-card);flex-direction:column;display:flex;overflow:hidden}.oc-block-team-row{align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.oc-block-team-row+.oc-block-team-row{border-block-start:1px solid var(--oc-border)}.oc-block-team-row .oc-user{flex:1}.oc-block-team-meta{align-items:center;gap:.5rem;display:flex}.oc-block-formpage{flex-direction:column;gap:1rem;max-inline-size:56rem;display:flex}.oc-block-formpage-grid{gap:1rem;display:grid}@media (width>=40rem){.oc-block-formpage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.oc-block-formpage-actions{background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 2px);box-shadow:0 -4px 16px oklch(from var(--color-black-60) l c h / .08);justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;display:flex;position:sticky;inset-block-end:0}.oc-block-authpage{min-block-size:30rem;color:var(--oc-foreground);background:var(--oc-muted);border-radius:calc(var(--oc-radius) + 4px);place-items:center;padding:2rem 1rem;display:grid}.oc-block-authpage--plain{background:var(--oc-background);border:1px solid var(--oc-border)}.oc-block-authcard{inline-size:100%;max-inline-size:24rem;color:var(--oc-foreground);background:var(--oc-card);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);box-shadow:0 1px 2px oklch(from var(--color-black-60) l c h / .06);flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.oc-block-authcard--flat{box-shadow:none;background:0 0;border:0;padding:0}.oc-block-authcard--wide{max-inline-size:28rem}.oc-block-authcard-logo{block-size:2.5rem;inline-size:2.5rem;color:var(--oc-primary-foreground);background:var(--oc-primary);border-radius:var(--oc-radius);place-items:center;margin-inline:auto;display:grid}.oc-block-authcard-logo svg{block-size:1.35rem;inline-size:1.35rem}.oc-block-authcard-head{text-align:center;flex-direction:column;gap:.25rem;display:flex}.oc-block-authcard-title{letter-spacing:-.01em;margin:0;font-size:1.375rem;font-weight:600}.oc-block-authcard-text{color:var(--oc-muted-foreground);margin:0;font-size:.875rem}.oc-block-authcard-fields{flex-direction:column;gap:1rem;display:flex}.oc-block-authcard-fields .oc-field:has(>.oc-otp){text-align:center;align-items:center}.oc-block-authcard-row{justify-content:space-between;align-items:center;gap:.5rem;font-size:.8125rem;display:flex}.oc-block-authcard-foot{text-align:center;color:var(--oc-muted-foreground);margin:0;font-size:.875rem}.oc-block-authcard-foot a{color:var(--oc-foreground);text-underline-offset:3px;font-weight:500;text-decoration:underline}.oc-block-authcard-legal{text-align:center;color:var(--oc-muted-foreground);margin:0;font-size:.75rem}.oc-block-authcard-legal a{color:inherit;text-underline-offset:3px;text-decoration:underline}.oc-block-authcard-submit{inline-size:100%}.oc-block-authcard-hint{color:var(--oc-muted-foreground);margin:0;font-size:.75rem}.oc-block-authcard-center{flex-direction:column;align-items:center;gap:.75rem;display:flex}.oc-block-authsocial{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.5rem;display:grid}.oc-block-authsocial .oc-btn{inline-size:100%}.oc-block-authduo{color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);overflow:hidden;container:oc-authduo/inline-size}.oc-block-authduo-grid{min-block-size:34rem;display:grid}.oc-block-authduo-panel{color:var(--oc-primary-foreground);background:radial-gradient(ellipse 70% 55% at 85% 100%, oklch(from var(--oc-brand-2) l c h / .4), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 0%, oklch(from var(--oc-brand-3) l c h / .35), transparent 60%), var(--oc-primary);flex-direction:column;justify-content:space-between;gap:2rem;padding:2rem;display:none;position:relative}.oc-block-authduo-panel--image:before{content:"";background:repeating-linear-gradient(135deg, oklch(from var(--oc-primary-foreground) l c h / .07) 0 1px, transparent 1px 14px), linear-gradient(to top, oklch(from var(--oc-primary) l c h / .7), transparent 60%);pointer-events:none;position:absolute;inset:0}.oc-block-authduo-panel--muted{color:var(--oc-foreground);background:var(--oc-muted)}.oc-block-authduo-panel--photo{color:var(--color-white-100);background:linear-gradient(to top, oklch(from var(--color-black-100) l c h / .8), oklch(from var(--color-black-100) l c h / .15) 55%, oklch(from var(--color-black-100) l c h / .5)), var(--oc-authduo-photo,none) center / cover no-repeat, var(--oc-primary)}@container oc-authduo (width>=42rem){.oc-block-authduo-grid{grid-template-columns:1fr 1fr}.oc-block-authduo-panel{display:flex}.oc-block-authduo--reverse .oc-block-authduo-panel{order:2}}.oc-block-authduo-panel>*{position:relative}.oc-block-authduo-logo{color:inherit;align-items:center;gap:.6rem;font-weight:600;text-decoration:none;display:inline-flex}.oc-block-authduo-logo svg{block-size:1.4rem;inline-size:1.4rem}.oc-block-authduo-quote{max-inline-size:26rem;margin:0}.oc-block-authduo-quote p{color:inherit;margin:0 0 .5rem;font-size:1.05rem;font-weight:500;line-height:1.55}.oc-block-authduo-quote footer{opacity:.8;color:inherit;font-size:.8125rem}.oc-block-authduo-form{place-items:center;padding:2rem 1.25rem;display:grid}.oc-block-authmin{min-block-size:26rem;color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);place-items:center;padding:2rem 1rem;display:grid}.oc-block-sb{--oc-block-sb-height:26rem;block-size:var(--oc-block-sb-height);color:var(--oc-foreground);background:var(--oc-background);border:1px solid var(--oc-border);border-radius:calc(var(--oc-radius) + 4px);grid-template-columns:auto minmax(0,1fr);display:grid;overflow:hidden}.oc-block-sb--floating{background:var(--oc-muted)}.oc-block-sb-main{flex-direction:column;min-block-size:0;min-inline-size:0;display:flex}.oc-block-sb-bar{background:var(--oc-background);border-block-end:1px solid var(--oc-border);flex-shrink:0;align-items:center;gap:.5rem;min-block-size:3rem;padding:.5rem .75rem;display:flex}.oc-block-sb-sep{background:var(--oc-border-strong);block-size:1rem;inline-size:1px}.oc-block-sb-body{flex:1;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:4.5rem;gap:.75rem;min-block-size:0;padding:.75rem;display:grid;overflow:auto}.oc-block-sb-ph{background:var(--oc-muted);border-radius:var(--oc-radius)}.oc-block-sb-ph--wide{grid-area:span 3/1/auto/-1}.oc-block-sb-toggle{opacity:0;pointer-events:none;position:absolute}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar{inline-size:var(--oc-sidebar-width-icon)}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-label{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-badge{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-sub{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-group-label{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar .oc-user-text{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) details.oc-sidebar-collapsible>summary:after{display:none}.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-button{justify-content:center;padding-inline:0}.oc-block-sb-hint{color:var(--oc-muted-foreground);margin:0;padding:0 .75rem;font-size:.75rem}.oc-block-sb-group>summary{letter-spacing:.04em;text-transform:uppercase;color:var(--oc-muted-foreground);cursor:pointer;border-radius:var(--oc-radius);justify-content:space-between;align-items:center;padding:.5rem .625rem .25rem;font-size:.7rem;font-weight:600;list-style:none;display:flex}.oc-block-sb-group>summary::-webkit-details-marker{display:none}.oc-block-sb-group>summary:after{content:"";block-size:.4rem;inline-size:.4rem;transition:rotate var(--oc-transition-fast);border-block-end:1.5px solid;border-inline-end:1.5px solid;rotate:-45deg}.oc-block-sb-group[open]>summary:after{rotate:45deg}.oc-block-sb-group>summary:focus-visible{outline:2px solid var(--oc-ring);outline-offset:-2px}.oc-block-sb-rail{background:var(--oc-muted);border-inline-end:1px solid var(--oc-border);flex-direction:column;align-items:center;gap:.5rem;inline-size:3.5rem;padding:.75rem .5rem;display:flex}.oc-block-sb-rail .oc-sidebar-menu-button{justify-content:center;padding:.5rem}.oc-block-sb-switch{inline-size:100%;font:inherit;color:inherit;cursor:pointer;text-align:start;background:0 0;border:0}.oc-block-sb-tile{block-size:2rem;inline-size:2rem;color:var(--oc-primary-foreground);background:var(--oc-primary);border-radius:var(--oc-radius);flex:none;place-items:center;display:grid}.oc-block-sb-tile svg{block-size:1rem;inline-size:1rem}.oc-block-sb-sub{color:var(--oc-muted-foreground);font-size:.75rem;font-weight:400;display:block}.oc-block-dash-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem;display:grid}.oc-block-dash-table{inline-size:100%}.oc-block-datatable .oc-table-toolbar :is(.oc-input,.oc-select){block-size:2rem;padding-block:0;font-size:.8125rem}.oc-block-datatable .oc-table-toolbar .oc-input{flex:10rem;min-inline-size:9rem}.oc-block-datatable .oc-filter-pills{border-inline-start:0;padding-inline-start:0}.oc-block-datatable .oc-filter-pill{border-radius:calc(var(--oc-radius) - 2px);block-size:2rem;font:inherit;cursor:pointer;align-items:center;padding-inline:.625rem;font-size:.8125rem;display:inline-flex}.oc-block-datatable .oc-filter-pill[aria-current=true]{color:var(--oc-primary-foreground);background:var(--oc-primary);border-color:var(--oc-primary)}.oc-block-datatable .oc-table thead th{block-size:2.75rem;color:var(--oc-foreground);background:var(--oc-card);font-size:.8125rem;font-weight:600}.oc-block-datatable .oc-table :is(th,td){white-space:nowrap;vertical-align:middle}.oc-block-datatable .oc-table tbody tr:nth-child(2n of :not([hidden])){background:color-mix(in oklch, var(--oc-card), var(--oc-foreground) 3.5%)}.oc-block-datatable .oc-table tbody tr:hover{background:color-mix(in oklch, var(--oc-card), var(--oc-primary) 8%)}.oc-block-datatable td.oc-table-actions{text-align:end}.oc-block-datatable .oc-block-datatable-bulk[hidden],.oc-block-datatable .oc-table tbody tr[hidden]{display:none}.oc-block-datatable td.oc-table-actions>*+*{margin-inline-start:.375rem}.oc-block-datatable .oc-table-footer{color:var(--oc-muted-foreground);grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;font-size:.8125rem;display:grid}.oc-block-datatable .oc-table-footer label{color:var(--oc-foreground);align-items:center;gap:.5rem;display:inline-flex}.oc-block-datatable .oc-table-footer .oc-select{block-size:2rem;inline-size:auto;padding-block:0;font-size:.8125rem}.oc-block-datatable .oc-table-footer nav{justify-self:end}.oc-block-datatable .oc-pagination-item :is(a,button){min-block-size:2rem;min-inline-size:2rem;font-size:.8125rem}.oc-block-datatable .oc-pagination-item:is(.is-active,[aria-current]) :is(a,button),.oc-block-datatable .oc-pagination-item [aria-current=page]{color:var(--oc-primary);background:oklch(from var(--oc-primary) l c h / .1);border-color:oklch(from var(--oc-primary) l c h / .35)}@media (width<=40rem){.oc-block-datatable .oc-table-footer{grid-template-columns:1fr}.oc-block-datatable .oc-table-footer nav{justify-self:start}}.oc-block-about{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto;container-type:inline-size}.oc-block-about-inner{align-items:center;gap:clamp(2rem,5vw,3.5rem);display:grid}@container (width>=52rem){.oc-block-about-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.oc-block-about--reverse .oc-block-about-media{order:2}}.oc-block-about-media{aspect-ratio:4/3;border:1px solid var(--oc-border);border-radius:var(--oc-radius-lg,1.25rem);background:radial-gradient(circle at 25% 20%, color-mix(in oklch, var(--color-white-50) 28%, transparent), transparent 40%), linear-gradient(140deg, var(--oc-accent-from), var(--oc-accent-to));margin:0;position:relative;overflow:hidden}.oc-block-about-media>img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.oc-block-about-badge{border:1px solid var(--oc-border);border-radius:var(--oc-radius-md,.75rem);background:color-mix(in oklch, var(--oc-background) 85%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--oc-muted-foreground);padding:.75rem 1rem;font-size:.85rem;display:grid;position:absolute;inset:auto auto 1rem 1rem}.oc-block-about-badge strong{color:var(--oc-foreground);font-size:1.4rem;line-height:1.1}.oc-block-about-title{letter-spacing:-.02em;text-wrap:balance;margin:0 0 1rem;font-size:clamp(1.75rem,4vw,2.6rem);font-weight:700;line-height:1.15}.oc-block-about-copy>p:not([class]){color:var(--oc-muted-foreground);margin:0 0 1rem;line-height:1.65}.oc-block-about-copy .oc-timeline{margin-block-start:1.75rem}.oc-block-contact{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto}.oc-block-contact-head{max-inline-size:40rem;margin-block-end:2rem}.oc-block-contact-heading{letter-spacing:-.02em;margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700}.oc-block-contact-lead{color:var(--oc-muted-foreground);margin:0;font-size:1.05rem;line-height:1.6}.oc-block-contact-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1.25rem;display:grid}.oc-block-contact-card{border:1px solid var(--oc-border);border-radius:var(--oc-radius-lg,1.25rem);background:var(--oc-surface);align-content:start;gap:.35rem;padding:1.5rem;font-style:normal;display:grid}.oc-block-contact-card>.oc-product-mark{margin-block-end:.75rem}.oc-block-contact-title{margin:0 0 .25rem;font-size:1.05rem;font-weight:700}.oc-block-contact-line{color:var(--oc-muted-foreground);overflow-wrap:anywhere;margin:0;font-size:.95rem;line-height:1.55;text-decoration:none}a.oc-block-contact-line{color:var(--oc-foreground);font-weight:500}a.oc-block-contact-line:hover{color:var(--oc-brand-1)}.oc-block-contact--plain .oc-block-contact-card{border:0;border-block-start:2px solid var(--oc-border-strong);background:0 0;border-radius:0;padding:1.25rem 0 0}.oc-block-faq{max-inline-size:var(--oc-block-max-width,1200px);padding:clamp(3rem, 7vw, 5rem) var(--oc-block-gap,24px);margin-inline:auto;container-type:inline-size}.oc-block-faq-inner{gap:2rem;max-inline-size:48rem;margin-inline:auto;display:grid}.oc-block-faq-head{text-align:center}.oc-block-faq-title{letter-spacing:-.02em;text-wrap:balance;margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700}.oc-block-faq-lead{color:var(--oc-block-text-soft,var(--oc-muted-foreground));margin:0;font-size:1.05rem;line-height:1.6}.oc-block-faq-list{--oc-accordion-width:100%;background:var(--oc-block-surface,var(--oc-card))}.oc-block-faq-more{color:var(--oc-block-text-soft,var(--oc-muted-foreground));text-align:center;margin:0}@container (width>=48rem){.oc-block-faq--split .oc-block-faq-inner{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:start;max-inline-size:none}.oc-block-faq--split .oc-block-faq-head{text-align:start;position:sticky;inset-block-start:1rem}.oc-block-faq--split .oc-block-faq-more{text-align:start;grid-column:2}}.oc-block-orbit-visual{aspect-ratio:1;place-items:center;inline-size:100%;max-inline-size:32rem;margin-inline:auto;display:grid;position:relative;container-type:inline-size}.oc-block-orbit-ring{border:1px dashed color-mix(in oklch, var(--oc-border-strong) 80%, transparent);animation:oc-orbit-spin var(--oc-orbit-duration,60s) linear infinite;border-radius:50%;position:absolute;inset:6%}.oc-block-orbit-ring:before{content:"";border:1px solid color-mix(in oklch, var(--oc-border) 70%, transparent);border-radius:50%;position:absolute;inset:18%}.oc-block-orbit-mark{translate:-50% -50%;transform:rotate(var(--oc-orbit-angle,0deg)) translateX(44cqi) rotate(calc(var(--oc-orbit-angle,0deg) * -1));position:absolute;inset-block-start:50%;inset-inline-start:50%}.oc-block-orbit-mark>*{animation:oc-orbit-spin var(--oc-orbit-duration,60s) linear infinite reverse;display:grid}.oc-block-orbit-center{z-index:1;inline-size:min(100%,72cqi);position:relative}.oc-block-orbit-center.oc-code-window .oc-code-window__body{font-size:clamp(.7rem,2.6cqi,.9rem)}@keyframes oc-orbit-spin{to{rotate:360deg}}@media (prefers-reduced-motion:reduce){.oc-block-orbit-ring,.oc-block-orbit-mark>*{animation:none}}.oc-block-portfolio-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;margin-block-end:2rem;display:flex}.oc-block-portfolio-head .oc-display{margin-block-end:0}.oc-block-portfolio-lead{color:var(--oc-muted-foreground);max-inline-size:36rem;margin:.75rem 0 0}.oc-block-portfolio-grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--oc-portfolio-min,18rem)), 1fr));gap:1.5rem;display:grid}.oc-block-portfolio--two{--oc-portfolio-min:26rem}.oc-block-profile{max-inline-size:var(--oc-block-max-width,1200px);margin-inline:auto;container-type:inline-size}.oc-block-profile-banner{aspect-ratio:6;border-radius:var(--oc-block-radius,16px);background:var(--oc-profile-banner,radial-gradient(circle at 85% 30%, color-mix(in oklch, var(--color-white-50) 25%, transparent), transparent 40%)), linear-gradient(120deg, var(--oc-accent-from), var(--oc-accent-to));background-position:50%;background-size:cover;min-block-size:7rem}.oc-block-profile-bar{flex-wrap:wrap;align-items:flex-end;gap:1rem 1.25rem;padding-inline:clamp(1rem,3vw,1.5rem);display:flex}.oc-block-profile-avatar.oc-avatar{border:4px solid var(--oc-background);width:6.5rem;height:6.5rem;margin-block-start:-3.25rem;font-size:2rem}.oc-block-profile-info{flex:16rem;min-inline-size:0;padding-block-start:.75rem}.oc-block-profile-name{letter-spacing:-.02em;margin:0;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700}.oc-block-profile-meta{color:var(--oc-muted-foreground);margin:.2rem 0 0;font-size:.9rem}.oc-block-profile-bio{color:var(--oc-muted-foreground);max-inline-size:44rem;margin:.5rem 0 0;font-size:.95rem}.oc-block-profile-actions{flex-wrap:wrap;gap:.5rem;display:flex}.oc-block-profile-tabs{border-block-end:1px solid var(--oc-border);scrollbar-width:none;gap:.25rem;margin-block-start:1.25rem;padding-inline:clamp(1rem,3vw,1.5rem);display:flex;overflow-x:auto}.oc-block-profile-tab{color:var(--oc-muted-foreground);white-space:nowrap;transition:color var(--oc-transition-fast,.15s), border-color var(--oc-transition-fast,.15s);border-block-end:2px solid #0000;padding:.75rem 1rem;font-size:.92rem;font-weight:500;text-decoration:none}.oc-block-profile-tab:hover{color:var(--oc-foreground)}.oc-block-profile-tab[aria-current=page]{border-block-end-color:var(--oc-brand-1);color:var(--oc-foreground)}.oc-block-profile-tab:focus-visible{outline:2px solid var(--oc-ring);outline-offset:-2px}label.oc-block-profile-tab{cursor:pointer;position:relative}.oc-block-profile-tab>input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.oc-block-profile-tab:has(input:checked){border-block-end-color:var(--oc-brand-1);color:var(--oc-foreground)}.oc-block-profile-tab:has(input:focus-visible){outline:2px solid var(--oc-ring);outline-offset:-2px}.oc-block-profile-panel{padding:1.25rem clamp(1rem,3vw,1.5rem);display:none}:is(.oc-block-profile:has(.oc-block-profile-tab:first-of-type input:checked) .oc-block-profile-panel:first-of-type,.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(2) input:checked) .oc-block-profile-panel:nth-of-type(2),.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(3) input:checked) .oc-block-profile-panel:nth-of-type(3),.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(4) input:checked) .oc-block-profile-panel:nth-of-type(4),.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(5) input:checked) .oc-block-profile-panel:nth-of-type(5),.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(6) input:checked) .oc-block-profile-panel:nth-of-type(6)){display:block}.oc-block-profile-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr));gap:1rem;margin:0;padding:0;list-style:none;display:grid}.oc-block-profile-grid>li{gap:.4rem;font-size:.875rem;display:grid}.oc-block-profile-grid small{color:var(--oc-muted-foreground)}.oc-block-profile-thumb{aspect-ratio:16/9;border-radius:var(--oc-radius);background:linear-gradient(135deg, var(--oc-accent-from,var(--oc-primary)), var(--oc-accent-to,var(--oc-primary)));opacity:.85}.oc-block-profile--compact .oc-block-profile-banner{aspect-ratio:10;min-block-size:4.5rem}.oc-block-profile--compact .oc-block-profile-avatar.oc-avatar{width:4.5rem;height:4.5rem;margin-block-start:-2.25rem;font-size:1.4rem}@container (width<=34rem){.oc-block-profile-actions{flex-basis:100%}}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/* File: packages/blocks/src/parts/app-data-table-look.css | Map: toolbar controls (2rem, pills) -> header row -> striped rows -> row actions -> footer and pager */
|
|
2
|
+
/* The data table block (server-rendered, also the Livewire DataTable) in the look of the data table component
|
|
3
|
+
(.oc-data-table in packages/ui): the same control height, header, stripes, sort icons and footer. */
|
|
4
|
+
|
|
5
|
+
.oc-block-datatable .oc-table-toolbar :is(.oc-input, .oc-select) { block-size: 2rem; padding-block: 0; font-size: 0.8125rem; }
|
|
6
|
+
.oc-block-datatable .oc-table-toolbar .oc-input { flex: 1 1 10rem; min-inline-size: 9rem; }
|
|
7
|
+
.oc-block-datatable .oc-filter-pills { border-inline-start: 0; padding-inline-start: 0; }
|
|
8
|
+
.oc-block-datatable .oc-filter-pill { display: inline-flex; align-items: center; block-size: 2rem; padding-inline: 0.625rem; border-radius: calc(var(--oc-radius) - 2px); }
|
|
9
|
+
.oc-block-datatable .oc-filter-pill { font: inherit; font-size: 0.8125rem; cursor: pointer; }
|
|
10
|
+
.oc-block-datatable .oc-filter-pill[aria-current="true"] { color: var(--oc-primary-foreground); background: var(--oc-primary); border-color: var(--oc-primary); }
|
|
11
|
+
|
|
12
|
+
.oc-block-datatable .oc-table thead th {
|
|
13
|
+
block-size: 2.75rem;
|
|
14
|
+
font-size: 0.8125rem;
|
|
15
|
+
font-weight: 600;
|
|
16
|
+
color: var(--oc-foreground);
|
|
17
|
+
background: var(--oc-card);
|
|
18
|
+
}
|
|
19
|
+
.oc-block-datatable .oc-table :is(th, td) { white-space: nowrap; vertical-align: middle; }
|
|
20
|
+
.oc-block-datatable .oc-table tbody tr:nth-child(even of :not([hidden])) { background: color-mix(in oklch, var(--oc-card), var(--oc-foreground) 3.5%); }
|
|
21
|
+
.oc-block-datatable .oc-table tbody tr:hover { background: color-mix(in oklch, var(--oc-card), var(--oc-primary) 8%); }
|
|
22
|
+
.oc-block-datatable td.oc-table-actions { text-align: end; }
|
|
23
|
+
.oc-block-datatable .oc-block-datatable-bulk[hidden] { display: none; }
|
|
24
|
+
.oc-block-datatable .oc-table tbody tr[hidden] { display: none; }
|
|
25
|
+
.oc-block-datatable td.oc-table-actions > * + * { margin-inline-start: 0.375rem; }
|
|
26
|
+
|
|
27
|
+
.oc-block-datatable .oc-table-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
|
|
28
|
+
.oc-block-datatable .oc-table-footer label { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--oc-foreground); }
|
|
29
|
+
.oc-block-datatable .oc-table-footer .oc-select { block-size: 2rem; padding-block: 0; inline-size: auto; font-size: 0.8125rem; }
|
|
30
|
+
.oc-block-datatable .oc-table-footer nav { justify-self: end; }
|
|
31
|
+
.oc-block-datatable .oc-pagination-item :is(a, button) { min-inline-size: 2rem; min-block-size: 2rem; font-size: 0.8125rem; }
|
|
32
|
+
.oc-block-datatable .oc-pagination-item:is(.is-active, [aria-current]) :is(a, button),
|
|
33
|
+
.oc-block-datatable .oc-pagination-item [aria-current="page"] {
|
|
34
|
+
color: var(--oc-primary);
|
|
35
|
+
background: oklch(from var(--oc-primary) l c h / 0.1);
|
|
36
|
+
border-color: oklch(from var(--oc-primary) l c h / 0.35);
|
|
37
|
+
}
|
|
38
|
+
@media (max-width: 40rem) {
|
|
39
|
+
.oc-block-datatable .oc-table-footer { grid-template-columns: 1fr; }
|
|
40
|
+
.oc-block-datatable .oc-table-footer nav { justify-self: start; }
|
|
41
|
+
}
|
|
@@ -66,6 +66,23 @@
|
|
|
66
66
|
.oc-block-profile-tab:hover { color: var(--oc-foreground); }
|
|
67
67
|
.oc-block-profile-tab[aria-current="page"] { border-block-end-color: var(--oc-brand-1); color: var(--oc-foreground); }
|
|
68
68
|
.oc-block-profile-tab:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
|
|
69
|
+
/* Tabs on the page itself (no route per tab): label.oc-block-profile-tab with a radio, the matching
|
|
70
|
+
.oc-block-profile-panel (same order) shows. CSS only. */
|
|
71
|
+
label.oc-block-profile-tab { position: relative; cursor: pointer; }
|
|
72
|
+
.oc-block-profile-tab > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
|
|
73
|
+
.oc-block-profile-tab:has(input:checked) { border-block-end-color: var(--oc-brand-1); color: var(--oc-foreground); }
|
|
74
|
+
.oc-block-profile-tab:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
|
|
75
|
+
.oc-block-profile-panel { display: none; padding: 1.25rem clamp(1rem, 3vw, 1.5rem); }
|
|
76
|
+
.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(1) input:checked) .oc-block-profile-panel:nth-of-type(1),
|
|
77
|
+
.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(2) input:checked) .oc-block-profile-panel:nth-of-type(2),
|
|
78
|
+
.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(3) input:checked) .oc-block-profile-panel:nth-of-type(3),
|
|
79
|
+
.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(4) input:checked) .oc-block-profile-panel:nth-of-type(4),
|
|
80
|
+
.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(5) input:checked) .oc-block-profile-panel:nth-of-type(5),
|
|
81
|
+
.oc-block-profile:has(.oc-block-profile-tab:nth-of-type(6) input:checked) .oc-block-profile-panel:nth-of-type(6) { display: block; }
|
|
82
|
+
.oc-block-profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
|
|
83
|
+
.oc-block-profile-grid > li { display: grid; gap: 0.4rem; font-size: 0.875rem; }
|
|
84
|
+
.oc-block-profile-grid small { color: var(--oc-muted-foreground); }
|
|
85
|
+
.oc-block-profile-thumb { aspect-ratio: 16 / 9; border-radius: var(--oc-radius); background: linear-gradient(135deg, var(--oc-accent-from, var(--oc-primary)), var(--oc-accent-to, var(--oc-primary))); opacity: 0.85; }
|
|
69
86
|
|
|
70
87
|
/* Compact: low banner and a smaller avatar. */
|
|
71
88
|
.oc-block-profile--compact .oc-block-profile-banner { aspect-ratio: 10 / 1; min-block-size: 4.5rem; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@birdycom/omniaui-blocks",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.6",
|
|
4
4
|
"description": "OmniaUI blocks: ready-made page sections (hero, features, pricing, stats, CTA, auth, sidebars, dashboards) composed from OmniaCSS utilities and OmniaUI components.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"LICENSE"
|
|
40
40
|
],
|
|
41
41
|
"peerDependencies": {
|
|
42
|
-
"@birdycom/omniaui": "^0.12.
|
|
42
|
+
"@birdycom/omniaui": "^0.12.6"
|
|
43
43
|
},
|
|
44
44
|
"unpkg": "./dist/blocks.min.css",
|
|
45
45
|
"jsdelivr": "./dist/blocks.min.css",
|
package/pro.json
CHANGED
|
@@ -155,6 +155,54 @@
|
|
|
155
155
|
{
|
|
156
156
|
"name": "ecosystem-map",
|
|
157
157
|
"description": "Ecosystem map: your logo on top, your apps per level, dotted flowing lines to what each app builds on"
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"name": "relations-list",
|
|
161
|
+
"description": "A complete relations screen: breadcrumb, title, type tabs with colored counts, list toolbar, filters, a data table with avatar names, type badges, counts and row actions per status, cards and footer"
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"name": "quote-lines",
|
|
165
|
+
"description": "Quote or order lines you put in order by dragging: page head, a bordered data table with grips, column widths and the column menu, and the totals"
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"name": "product-list",
|
|
169
|
+
"description": "Products list with photos, type tabs with counts, category and stock filters, stock badges, prices excl. and incl. VAT, draft badges, row actions, cards and footer"
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"name": "product-detail",
|
|
173
|
+
"description": "Product page for the back office: gallery, summary with price, stock and barcode, commercial and technical sections, stock movements, serial numbers and linked invoices and documents"
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"name": "product-editor",
|
|
177
|
+
"description": "Product form in sections (identification, commercial, stock, media, description, specifications, publication) with a preview and a sticky save bar"
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"name": "product-picker",
|
|
181
|
+
"description": "Products of a quote, order or invoice: Add product opens a dialog (search, photo, article number, price, stock, quantity); the picks show under the button with quantity, amount and remove"
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"name": "shop-catalog",
|
|
185
|
+
"description": "Shop catalog: filters for category, price, availability and rating, sorting, a live count and product cards with photo, rating, price and stock"
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"name": "shop-product",
|
|
189
|
+
"description": "Webshop product page: gallery, rating, price, color and size choice, stock, quantity, add to cart, delivery promises and tabs for description, specifications and reviews"
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"name": "shop-cart",
|
|
193
|
+
"description": "Cart page: lines with photo, variant, quantity, remove and line total, and a summary with delivery, included VAT, discount code and checkout"
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"name": "shop-checkout",
|
|
197
|
+
"description": "One-page checkout: steps, contact, delivery address, delivery and payment as choice cards, order summary with totals and terms"
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
"name": "barcode-maker",
|
|
201
|
+
"description": "Make a barcode: type a value, pick EAN-13, EAN-8, UPC-A or Code 128, see it live and download a print-ready SVG"
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"name": "glass-nav",
|
|
205
|
+
"description": "Liquid glass navigation: a clear glass sheet with an action pill and a menu bar; the backdrop bends and shifts colour through the glass"
|
|
158
206
|
}
|
|
159
207
|
]
|
|
160
208
|
}
|