@birdycom/omniaui-blocks 0.11.0 → 0.11.2
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/LICENSE +21 -21
- package/README.md +10 -10
- package/blocks/about-timeline.html +23 -23
- package/blocks/app-header.html +32 -32
- package/blocks/app-shell.html +84 -84
- package/blocks/auth-split.html +45 -45
- package/blocks/auth.html +21 -21
- package/blocks/contact-grid.html +38 -38
- package/blocks/cta.html +8 -8
- package/blocks/data-table.html +111 -111
- package/blocks/faq.html +33 -33
- package/blocks/features.html +18 -18
- package/blocks/footer.html +41 -41
- package/blocks/forgot-password.html +34 -34
- package/blocks/form-page.html +28 -28
- package/blocks/hero-code.html +27 -27
- package/blocks/hero-orbit.html +38 -38
- package/blocks/hero-split.html +12 -12
- package/blocks/hero.html +10 -10
- package/blocks/login-01.html +41 -41
- package/blocks/login-02.html +55 -55
- package/blocks/login-03.html +47 -47
- package/blocks/module-header.html +24 -24
- package/blocks/otp-01.html +36 -36
- package/blocks/otp-02.html +46 -46
- package/blocks/page-hero.html +10 -10
- package/blocks/portfolio-grid.html +31 -31
- package/blocks/pricing.html +42 -42
- package/blocks/process.html +19 -19
- package/blocks/product-grid.html +37 -37
- package/blocks/profile-header.html +27 -27
- package/blocks/reset-password.html +45 -45
- package/blocks/showcase.html +27 -27
- package/blocks/sidebar-01.html +56 -56
- package/blocks/sidebar-02.html +55 -55
- package/blocks/sidebar-03.html +53 -53
- package/blocks/sidebar-04.html +56 -56
- package/blocks/sidebar-05.html +68 -68
- package/blocks/signup-01.html +53 -53
- package/blocks/signup-02.html +56 -56
- package/blocks/site-footer.html +39 -39
- package/blocks/site-header.html +14 -14
- package/blocks/spotlight.html +22 -22
- package/blocks/stats-counter.html +15 -15
- package/blocks/stats.html +19 -19
- package/blocks/team-list.html +30 -30
- package/blocks/two-factor.html +33 -33
- package/blocks/wizard-dialog.html +36 -36
- package/dist/blocks.css +371 -343
- package/dist/blocks.min.css +1 -1
- package/dist/parts/site-about-timeline.css +61 -61
- package/dist/parts/site-contact-grid.css +58 -58
- package/dist/parts/site-faq.css +52 -52
- package/dist/parts/site-hero-orbit.css +62 -62
- package/dist/parts/site-portfolio-grid.css +23 -23
- package/dist/parts/site-profile-header.css +77 -77
- package/package.json +55 -55
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,.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-badge,.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-menu-sub,.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar-group-label,.oc-block-shell:has(.oc-block-shell-toggle:checked) .oc-sidebar .oc-user-text,.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-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{margin:0 0 .5rem;font-size:1.1rem;font-weight:500;line-height:1.55}.oc-block-authsplit-quote footer{opacity:.75;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-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}@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{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>*{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{margin:0 0 .5rem;font-size:1.05rem;font-weight:500;line-height:1.55}.oc-block-authduo-quote footer{opacity:.8;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,.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-badge,.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-menu-sub,.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar-group-label,.oc-block-sb:has(.oc-block-sb-toggle:checked) .oc-sidebar .oc-user-text,.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);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{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,61 +1,61 @@
|
|
|
1
|
-
/* File: packages/blocks/src/parts/site-about-timeline.css
|
|
2
|
-
Map: section -> split grid -> media placeholder + badge -> copy -> timeline spacing -> reverse variant
|
|
3
|
-
About block: a picture next to the story of the company, ending in the timeline component. */
|
|
4
|
-
|
|
5
|
-
.oc-block-about {
|
|
6
|
-
container-type: inline-size;
|
|
7
|
-
max-inline-size: var(--oc-block-max-width, 1200px);
|
|
8
|
-
margin-inline: auto;
|
|
9
|
-
padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.oc-block-about-inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
|
|
13
|
-
@container (min-width: 52rem) {
|
|
14
|
-
.oc-block-about-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
|
|
15
|
-
/* Reverse: picture on the right. */
|
|
16
|
-
.oc-block-about--reverse .oc-block-about-media { order: 2; }
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
/* Picture: an <img> inside, or the accent gradient placeholder when empty. */
|
|
20
|
-
.oc-block-about-media {
|
|
21
|
-
position: relative;
|
|
22
|
-
margin: 0;
|
|
23
|
-
aspect-ratio: 4 / 3;
|
|
24
|
-
border: 1px solid var(--oc-border);
|
|
25
|
-
border-radius: var(--oc-radius-lg, 1.25rem);
|
|
26
|
-
background:
|
|
27
|
-
radial-gradient(circle at 25% 20%, color-mix(in oklch, var(--color-white-50) 28%, transparent), transparent 40%),
|
|
28
|
-
linear-gradient(140deg, var(--oc-accent-from), var(--oc-accent-to));
|
|
29
|
-
overflow: hidden;
|
|
30
|
-
}
|
|
31
|
-
.oc-block-about-media > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
|
|
32
|
-
|
|
33
|
-
/* Floating badge on the picture ("Since 2012"). */
|
|
34
|
-
.oc-block-about-badge {
|
|
35
|
-
position: absolute;
|
|
36
|
-
inset: auto auto 1rem 1rem;
|
|
37
|
-
display: grid;
|
|
38
|
-
padding: 0.75rem 1rem;
|
|
39
|
-
border: 1px solid var(--oc-border);
|
|
40
|
-
border-radius: var(--oc-radius-md, 0.75rem);
|
|
41
|
-
background: color-mix(in oklch, var(--oc-background) 85%, transparent);
|
|
42
|
-
backdrop-filter: blur(10px);
|
|
43
|
-
color: var(--oc-muted-foreground);
|
|
44
|
-
font-size: 0.85rem;
|
|
45
|
-
}
|
|
46
|
-
.oc-block-about-badge strong { color: var(--oc-foreground); font-size: 1.4rem; line-height: 1.1; }
|
|
47
|
-
|
|
48
|
-
.oc-block-about-title {
|
|
49
|
-
margin: 0 0 1rem;
|
|
50
|
-
font-size: clamp(1.75rem, 4vw, 2.6rem);
|
|
51
|
-
font-weight: 700;
|
|
52
|
-
line-height: 1.15;
|
|
53
|
-
letter-spacing: -0.02em;
|
|
54
|
-
text-wrap: balance;
|
|
55
|
-
}
|
|
56
|
-
.oc-block-about-copy > p:not([class]) {
|
|
57
|
-
margin: 0 0 1rem;
|
|
58
|
-
color: var(--oc-muted-foreground);
|
|
59
|
-
line-height: 1.65;
|
|
60
|
-
}
|
|
61
|
-
.oc-block-about-copy .oc-timeline { margin-block-start: 1.75rem; }
|
|
1
|
+
/* File: packages/blocks/src/parts/site-about-timeline.css
|
|
2
|
+
Map: section -> split grid -> media placeholder + badge -> copy -> timeline spacing -> reverse variant
|
|
3
|
+
About block: a picture next to the story of the company, ending in the timeline component. */
|
|
4
|
+
|
|
5
|
+
.oc-block-about {
|
|
6
|
+
container-type: inline-size;
|
|
7
|
+
max-inline-size: var(--oc-block-max-width, 1200px);
|
|
8
|
+
margin-inline: auto;
|
|
9
|
+
padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.oc-block-about-inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
|
|
13
|
+
@container (min-width: 52rem) {
|
|
14
|
+
.oc-block-about-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
|
|
15
|
+
/* Reverse: picture on the right. */
|
|
16
|
+
.oc-block-about--reverse .oc-block-about-media { order: 2; }
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Picture: an <img> inside, or the accent gradient placeholder when empty. */
|
|
20
|
+
.oc-block-about-media {
|
|
21
|
+
position: relative;
|
|
22
|
+
margin: 0;
|
|
23
|
+
aspect-ratio: 4 / 3;
|
|
24
|
+
border: 1px solid var(--oc-border);
|
|
25
|
+
border-radius: var(--oc-radius-lg, 1.25rem);
|
|
26
|
+
background:
|
|
27
|
+
radial-gradient(circle at 25% 20%, color-mix(in oklch, var(--color-white-50) 28%, transparent), transparent 40%),
|
|
28
|
+
linear-gradient(140deg, var(--oc-accent-from), var(--oc-accent-to));
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
}
|
|
31
|
+
.oc-block-about-media > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
|
|
32
|
+
|
|
33
|
+
/* Floating badge on the picture ("Since 2012"). */
|
|
34
|
+
.oc-block-about-badge {
|
|
35
|
+
position: absolute;
|
|
36
|
+
inset: auto auto 1rem 1rem;
|
|
37
|
+
display: grid;
|
|
38
|
+
padding: 0.75rem 1rem;
|
|
39
|
+
border: 1px solid var(--oc-border);
|
|
40
|
+
border-radius: var(--oc-radius-md, 0.75rem);
|
|
41
|
+
background: color-mix(in oklch, var(--oc-background) 85%, transparent);
|
|
42
|
+
backdrop-filter: blur(10px);
|
|
43
|
+
color: var(--oc-muted-foreground);
|
|
44
|
+
font-size: 0.85rem;
|
|
45
|
+
}
|
|
46
|
+
.oc-block-about-badge strong { color: var(--oc-foreground); font-size: 1.4rem; line-height: 1.1; }
|
|
47
|
+
|
|
48
|
+
.oc-block-about-title {
|
|
49
|
+
margin: 0 0 1rem;
|
|
50
|
+
font-size: clamp(1.75rem, 4vw, 2.6rem);
|
|
51
|
+
font-weight: 700;
|
|
52
|
+
line-height: 1.15;
|
|
53
|
+
letter-spacing: -0.02em;
|
|
54
|
+
text-wrap: balance;
|
|
55
|
+
}
|
|
56
|
+
.oc-block-about-copy > p:not([class]) {
|
|
57
|
+
margin: 0 0 1rem;
|
|
58
|
+
color: var(--oc-muted-foreground);
|
|
59
|
+
line-height: 1.65;
|
|
60
|
+
}
|
|
61
|
+
.oc-block-about-copy .oc-timeline { margin-block-start: 1.75rem; }
|
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
/* File: packages/blocks/src/parts/site-contact-grid.css
|
|
2
|
-
Map: section -> head -> card grid -> card (mark, title, lines) -> plain variant
|
|
3
|
-
Contact grid block: contact info cards (e-mail, phone, address, hours). */
|
|
4
|
-
|
|
5
|
-
.oc-block-contact {
|
|
6
|
-
max-inline-size: var(--oc-block-max-width, 1200px);
|
|
7
|
-
margin-inline: auto;
|
|
8
|
-
padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.oc-block-contact-head { max-inline-size: 40rem; margin-block-end: 2rem; }
|
|
12
|
-
.oc-block-contact-heading {
|
|
13
|
-
margin: 0 0 0.75rem;
|
|
14
|
-
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
|
15
|
-
font-weight: 700;
|
|
16
|
-
letter-spacing: -0.02em;
|
|
17
|
-
}
|
|
18
|
-
.oc-block-contact-lead { margin: 0; color: var(--oc-muted-foreground); font-size: 1.05rem; line-height: 1.6; }
|
|
19
|
-
|
|
20
|
-
.oc-block-contact-grid {
|
|
21
|
-
display: grid;
|
|
22
|
-
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
|
|
23
|
-
gap: 1.25rem;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.oc-block-contact-card {
|
|
27
|
-
display: grid;
|
|
28
|
-
align-content: start;
|
|
29
|
-
gap: 0.35rem;
|
|
30
|
-
padding: 1.5rem;
|
|
31
|
-
border: 1px solid var(--oc-border);
|
|
32
|
-
border-radius: var(--oc-radius-lg, 1.25rem);
|
|
33
|
-
background: var(--oc-surface);
|
|
34
|
-
font-style: normal; /* the address card is an <address> */
|
|
35
|
-
}
|
|
36
|
-
.oc-block-contact-card > .oc-product-mark { margin-block-end: 0.75rem; }
|
|
37
|
-
.oc-block-contact-title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700; }
|
|
38
|
-
|
|
39
|
-
/* A line of info. As a link it turns to the foreground color on hover. */
|
|
40
|
-
.oc-block-contact-line {
|
|
41
|
-
margin: 0;
|
|
42
|
-
color: var(--oc-muted-foreground);
|
|
43
|
-
font-size: 0.95rem;
|
|
44
|
-
line-height: 1.55;
|
|
45
|
-
text-decoration: none;
|
|
46
|
-
overflow-wrap: anywhere;
|
|
47
|
-
}
|
|
48
|
-
a.oc-block-contact-line { color: var(--oc-foreground); font-weight: 500; }
|
|
49
|
-
a.oc-block-contact-line:hover { color: var(--oc-brand-1); }
|
|
50
|
-
|
|
51
|
-
/* Plain: no card frames, a thin accent line on top of each item. */
|
|
52
|
-
.oc-block-contact--plain .oc-block-contact-card {
|
|
53
|
-
padding: 1.25rem 0 0;
|
|
54
|
-
border: 0;
|
|
55
|
-
border-block-start: 2px solid var(--oc-border-strong);
|
|
56
|
-
border-radius: 0;
|
|
57
|
-
background: none;
|
|
58
|
-
}
|
|
1
|
+
/* File: packages/blocks/src/parts/site-contact-grid.css
|
|
2
|
+
Map: section -> head -> card grid -> card (mark, title, lines) -> plain variant
|
|
3
|
+
Contact grid block: contact info cards (e-mail, phone, address, hours). */
|
|
4
|
+
|
|
5
|
+
.oc-block-contact {
|
|
6
|
+
max-inline-size: var(--oc-block-max-width, 1200px);
|
|
7
|
+
margin-inline: auto;
|
|
8
|
+
padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.oc-block-contact-head { max-inline-size: 40rem; margin-block-end: 2rem; }
|
|
12
|
+
.oc-block-contact-heading {
|
|
13
|
+
margin: 0 0 0.75rem;
|
|
14
|
+
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
|
15
|
+
font-weight: 700;
|
|
16
|
+
letter-spacing: -0.02em;
|
|
17
|
+
}
|
|
18
|
+
.oc-block-contact-lead { margin: 0; color: var(--oc-muted-foreground); font-size: 1.05rem; line-height: 1.6; }
|
|
19
|
+
|
|
20
|
+
.oc-block-contact-grid {
|
|
21
|
+
display: grid;
|
|
22
|
+
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
|
|
23
|
+
gap: 1.25rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.oc-block-contact-card {
|
|
27
|
+
display: grid;
|
|
28
|
+
align-content: start;
|
|
29
|
+
gap: 0.35rem;
|
|
30
|
+
padding: 1.5rem;
|
|
31
|
+
border: 1px solid var(--oc-border);
|
|
32
|
+
border-radius: var(--oc-radius-lg, 1.25rem);
|
|
33
|
+
background: var(--oc-surface);
|
|
34
|
+
font-style: normal; /* the address card is an <address> */
|
|
35
|
+
}
|
|
36
|
+
.oc-block-contact-card > .oc-product-mark { margin-block-end: 0.75rem; }
|
|
37
|
+
.oc-block-contact-title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700; }
|
|
38
|
+
|
|
39
|
+
/* A line of info. As a link it turns to the foreground color on hover. */
|
|
40
|
+
.oc-block-contact-line {
|
|
41
|
+
margin: 0;
|
|
42
|
+
color: var(--oc-muted-foreground);
|
|
43
|
+
font-size: 0.95rem;
|
|
44
|
+
line-height: 1.55;
|
|
45
|
+
text-decoration: none;
|
|
46
|
+
overflow-wrap: anywhere;
|
|
47
|
+
}
|
|
48
|
+
a.oc-block-contact-line { color: var(--oc-foreground); font-weight: 500; }
|
|
49
|
+
a.oc-block-contact-line:hover { color: var(--oc-brand-1); }
|
|
50
|
+
|
|
51
|
+
/* Plain: no card frames, a thin accent line on top of each item. */
|
|
52
|
+
.oc-block-contact--plain .oc-block-contact-card {
|
|
53
|
+
padding: 1.25rem 0 0;
|
|
54
|
+
border: 0;
|
|
55
|
+
border-block-start: 2px solid var(--oc-border-strong);
|
|
56
|
+
border-radius: 0;
|
|
57
|
+
background: none;
|
|
58
|
+
}
|
package/dist/parts/site-faq.css
CHANGED
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
/* File: packages/blocks/src/parts/site-faq.css
|
|
2
|
-
Map: section -> head (eyebrow, title, lead) -> accordion list -> "more" line -> split variant
|
|
3
|
-
FAQ block: a title plus the accordion component on native <details name="…"> (one item open at a time). */
|
|
4
|
-
|
|
5
|
-
.oc-block-faq {
|
|
6
|
-
container-type: inline-size;
|
|
7
|
-
max-inline-size: var(--oc-block-max-width, 1200px);
|
|
8
|
-
margin-inline: auto;
|
|
9
|
-
padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.oc-block-faq-inner {
|
|
13
|
-
display: grid;
|
|
14
|
-
gap: 2rem;
|
|
15
|
-
max-inline-size: 48rem;
|
|
16
|
-
margin-inline: auto;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.oc-block-faq-head { text-align: center; }
|
|
20
|
-
.oc-block-faq-title {
|
|
21
|
-
margin: 0 0 0.75rem;
|
|
22
|
-
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
|
23
|
-
font-weight: 700;
|
|
24
|
-
letter-spacing: -0.02em;
|
|
25
|
-
text-wrap: balance;
|
|
26
|
-
}
|
|
27
|
-
.oc-block-faq-lead {
|
|
28
|
-
margin: 0;
|
|
29
|
-
color: var(--oc-block-text-soft, var(--oc-muted-foreground));
|
|
30
|
-
font-size: 1.05rem;
|
|
31
|
-
line-height: 1.6;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
/* The accordion fills the column (the component default is 46rem wide). */
|
|
35
|
-
.oc-block-faq-list { --oc-accordion-width: 100%; background: var(--oc-block-surface, var(--oc-card)); }
|
|
36
|
-
|
|
37
|
-
.oc-block-faq-more {
|
|
38
|
-
margin: 0;
|
|
39
|
-
color: var(--oc-block-text-soft, var(--oc-muted-foreground));
|
|
40
|
-
text-align: center;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/* Split: head on the left, questions on the right (from 48rem container width). */
|
|
44
|
-
@container (min-width: 48rem) {
|
|
45
|
-
.oc-block-faq--split .oc-block-faq-inner {
|
|
46
|
-
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
|
|
47
|
-
align-items: start;
|
|
48
|
-
max-inline-size: none;
|
|
49
|
-
}
|
|
50
|
-
.oc-block-faq--split .oc-block-faq-head { text-align: start; position: sticky; inset-block-start: 1rem; }
|
|
51
|
-
.oc-block-faq--split .oc-block-faq-more { grid-column: 2; text-align: start; }
|
|
52
|
-
}
|
|
1
|
+
/* File: packages/blocks/src/parts/site-faq.css
|
|
2
|
+
Map: section -> head (eyebrow, title, lead) -> accordion list -> "more" line -> split variant
|
|
3
|
+
FAQ block: a title plus the accordion component on native <details name="…"> (one item open at a time). */
|
|
4
|
+
|
|
5
|
+
.oc-block-faq {
|
|
6
|
+
container-type: inline-size;
|
|
7
|
+
max-inline-size: var(--oc-block-max-width, 1200px);
|
|
8
|
+
margin-inline: auto;
|
|
9
|
+
padding: clamp(3rem, 7vw, 5rem) var(--oc-block-gap, 24px);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.oc-block-faq-inner {
|
|
13
|
+
display: grid;
|
|
14
|
+
gap: 2rem;
|
|
15
|
+
max-inline-size: 48rem;
|
|
16
|
+
margin-inline: auto;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.oc-block-faq-head { text-align: center; }
|
|
20
|
+
.oc-block-faq-title {
|
|
21
|
+
margin: 0 0 0.75rem;
|
|
22
|
+
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
|
23
|
+
font-weight: 700;
|
|
24
|
+
letter-spacing: -0.02em;
|
|
25
|
+
text-wrap: balance;
|
|
26
|
+
}
|
|
27
|
+
.oc-block-faq-lead {
|
|
28
|
+
margin: 0;
|
|
29
|
+
color: var(--oc-block-text-soft, var(--oc-muted-foreground));
|
|
30
|
+
font-size: 1.05rem;
|
|
31
|
+
line-height: 1.6;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* The accordion fills the column (the component default is 46rem wide). */
|
|
35
|
+
.oc-block-faq-list { --oc-accordion-width: 100%; background: var(--oc-block-surface, var(--oc-card)); }
|
|
36
|
+
|
|
37
|
+
.oc-block-faq-more {
|
|
38
|
+
margin: 0;
|
|
39
|
+
color: var(--oc-block-text-soft, var(--oc-muted-foreground));
|
|
40
|
+
text-align: center;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Split: head on the left, questions on the right (from 48rem container width). */
|
|
44
|
+
@container (min-width: 48rem) {
|
|
45
|
+
.oc-block-faq--split .oc-block-faq-inner {
|
|
46
|
+
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
|
|
47
|
+
align-items: start;
|
|
48
|
+
max-inline-size: none;
|
|
49
|
+
}
|
|
50
|
+
.oc-block-faq--split .oc-block-faq-head { text-align: start; position: sticky; inset-block-start: 1rem; }
|
|
51
|
+
.oc-block-faq--split .oc-block-faq-more { grid-column: 2; text-align: start; }
|
|
52
|
+
}
|
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
/* File: packages/blocks/src/parts/site-hero-orbit.css
|
|
2
|
-
Map: visual (square, container) -> dashed ring that turns -> marks on the ring (stay upright) -> center window -> reduced motion
|
|
3
|
-
Hero orbit block: hero-code layout where product marks orbit around the code window.
|
|
4
|
-
Place a mark with style="--oc-orbit-angle: 60deg". The ring turns once per --oc-orbit-duration (default 60s). */
|
|
5
|
-
|
|
6
|
-
/* Square stage; container units (cqi) give the ring radius. */
|
|
7
|
-
.oc-block-orbit-visual {
|
|
8
|
-
position: relative;
|
|
9
|
-
container-type: inline-size;
|
|
10
|
-
display: grid;
|
|
11
|
-
place-items: center;
|
|
12
|
-
inline-size: 100%;
|
|
13
|
-
max-inline-size: 32rem;
|
|
14
|
-
aspect-ratio: 1;
|
|
15
|
-
margin-inline: auto;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
/* The ring: a dashed circle that slowly turns and carries the marks. */
|
|
19
|
-
.oc-block-orbit-ring {
|
|
20
|
-
position: absolute;
|
|
21
|
-
inset: 6%;
|
|
22
|
-
border: 1px dashed color-mix(in oklch, var(--oc-border-strong) 80%, transparent);
|
|
23
|
-
border-radius: 50%;
|
|
24
|
-
animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite;
|
|
25
|
-
}
|
|
26
|
-
/* Second, inner ring for depth (no marks). */
|
|
27
|
-
.oc-block-orbit-ring::before {
|
|
28
|
-
content: "";
|
|
29
|
-
position: absolute;
|
|
30
|
-
inset: 18%;
|
|
31
|
-
border: 1px solid color-mix(in oklch, var(--oc-border) 70%, transparent);
|
|
32
|
-
border-radius: 50%;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/* A mark sits on the ring at its angle. Radius = half the ring = 44% of the stage width. */
|
|
36
|
-
.oc-block-orbit-mark {
|
|
37
|
-
position: absolute;
|
|
38
|
-
inset-block-start: 50%;
|
|
39
|
-
inset-inline-start: 50%;
|
|
40
|
-
translate: -50% -50%;
|
|
41
|
-
transform: rotate(var(--oc-orbit-angle, 0deg)) translateX(44cqi) rotate(calc(var(--oc-orbit-angle, 0deg) * -1));
|
|
42
|
-
}
|
|
43
|
-
/* The mark turns back as fast as the ring turns, so its glyph stays upright. */
|
|
44
|
-
.oc-block-orbit-mark > * {
|
|
45
|
-
display: grid;
|
|
46
|
-
animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite reverse;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
/* Center: the code window (or any visual) above the ring. */
|
|
50
|
-
.oc-block-orbit-center {
|
|
51
|
-
position: relative;
|
|
52
|
-
z-index: 1;
|
|
53
|
-
inline-size: min(100%, 72cqi);
|
|
54
|
-
}
|
|
55
|
-
.oc-block-orbit-center.oc-code-window .oc-code-window__body { font-size: clamp(0.7rem, 2.6cqi, 0.9rem); }
|
|
56
|
-
|
|
57
|
-
@keyframes oc-orbit-spin { to { rotate: 360deg; } }
|
|
58
|
-
|
|
59
|
-
@media (prefers-reduced-motion: reduce) {
|
|
60
|
-
.oc-block-orbit-ring,
|
|
61
|
-
.oc-block-orbit-mark > * { animation: none; }
|
|
62
|
-
}
|
|
1
|
+
/* File: packages/blocks/src/parts/site-hero-orbit.css
|
|
2
|
+
Map: visual (square, container) -> dashed ring that turns -> marks on the ring (stay upright) -> center window -> reduced motion
|
|
3
|
+
Hero orbit block: hero-code layout where product marks orbit around the code window.
|
|
4
|
+
Place a mark with style="--oc-orbit-angle: 60deg". The ring turns once per --oc-orbit-duration (default 60s). */
|
|
5
|
+
|
|
6
|
+
/* Square stage; container units (cqi) give the ring radius. */
|
|
7
|
+
.oc-block-orbit-visual {
|
|
8
|
+
position: relative;
|
|
9
|
+
container-type: inline-size;
|
|
10
|
+
display: grid;
|
|
11
|
+
place-items: center;
|
|
12
|
+
inline-size: 100%;
|
|
13
|
+
max-inline-size: 32rem;
|
|
14
|
+
aspect-ratio: 1;
|
|
15
|
+
margin-inline: auto;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* The ring: a dashed circle that slowly turns and carries the marks. */
|
|
19
|
+
.oc-block-orbit-ring {
|
|
20
|
+
position: absolute;
|
|
21
|
+
inset: 6%;
|
|
22
|
+
border: 1px dashed color-mix(in oklch, var(--oc-border-strong) 80%, transparent);
|
|
23
|
+
border-radius: 50%;
|
|
24
|
+
animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite;
|
|
25
|
+
}
|
|
26
|
+
/* Second, inner ring for depth (no marks). */
|
|
27
|
+
.oc-block-orbit-ring::before {
|
|
28
|
+
content: "";
|
|
29
|
+
position: absolute;
|
|
30
|
+
inset: 18%;
|
|
31
|
+
border: 1px solid color-mix(in oklch, var(--oc-border) 70%, transparent);
|
|
32
|
+
border-radius: 50%;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* A mark sits on the ring at its angle. Radius = half the ring = 44% of the stage width. */
|
|
36
|
+
.oc-block-orbit-mark {
|
|
37
|
+
position: absolute;
|
|
38
|
+
inset-block-start: 50%;
|
|
39
|
+
inset-inline-start: 50%;
|
|
40
|
+
translate: -50% -50%;
|
|
41
|
+
transform: rotate(var(--oc-orbit-angle, 0deg)) translateX(44cqi) rotate(calc(var(--oc-orbit-angle, 0deg) * -1));
|
|
42
|
+
}
|
|
43
|
+
/* The mark turns back as fast as the ring turns, so its glyph stays upright. */
|
|
44
|
+
.oc-block-orbit-mark > * {
|
|
45
|
+
display: grid;
|
|
46
|
+
animation: oc-orbit-spin var(--oc-orbit-duration, 60s) linear infinite reverse;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Center: the code window (or any visual) above the ring. */
|
|
50
|
+
.oc-block-orbit-center {
|
|
51
|
+
position: relative;
|
|
52
|
+
z-index: 1;
|
|
53
|
+
inline-size: min(100%, 72cqi);
|
|
54
|
+
}
|
|
55
|
+
.oc-block-orbit-center.oc-code-window .oc-code-window__body { font-size: clamp(0.7rem, 2.6cqi, 0.9rem); }
|
|
56
|
+
|
|
57
|
+
@keyframes oc-orbit-spin { to { rotate: 360deg; } }
|
|
58
|
+
|
|
59
|
+
@media (prefers-reduced-motion: reduce) {
|
|
60
|
+
.oc-block-orbit-ring,
|
|
61
|
+
.oc-block-orbit-mark > * { animation: none; }
|
|
62
|
+
}
|