40 lines
15 KiB
CSS
40 lines
15 KiB
CSS
:root{--bg:#f4f2ed;--surface:#fff;--ink:#171717;--muted:#646464;--line:#d7d3ca;--accent:#262626;--radius:18px;--shadow:0 16px 40px rgba(0,0,0,.08)}
|
|
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}a{color:inherit}.site-header,footer{max-width:1180px;margin:auto;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}.site-header nav{display:flex;gap:20px}.site-header nav a,.brand{text-decoration:none}.brand{font-weight:800;letter-spacing:-.02em}.site-header nav a{color:var(--muted)}main{max-width:1180px;margin:auto;padding:24px 28px 80px}.hero{padding:72px 0 88px;max-width:920px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:800;color:var(--muted)}h1,h2{letter-spacing:-.045em;line-height:1.03;margin:.25em 0}h1{font-size:clamp(3rem,8vw,6.7rem)}h2{font-size:clamp(2rem,4vw,3.6rem)}.lead{font-size:clamp(1.15rem,2vw,1.45rem);max-width:760px;color:#404040}.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}.badge-row img,.preview-card img{height:20px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,5vw,58px);box-shadow:var(--shadow)}.generator-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:34px 0}.generator-grid label,.code-tabs label{display:flex;flex-direction:column;gap:7px;font-weight:700}.generator-grid .wide{grid-column:1/-1}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#fbfaf7;color:var(--ink);padding:12px 14px}small{font-weight:400;color:var(--muted)}.preview-card{border-top:1px solid var(--line);padding-top:28px}.code-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}.code-tabs textarea{height:110px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}button{border:0;border-radius:999px;background:var(--accent);color:#fff;padding:12px 20px;font-weight:800;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #5b9cff;outline-offset:3px}.docs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}.docs-grid article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;overflow:hidden}.docs-grid h2{font-size:2rem}.docs-grid code{display:block;overflow:auto;padding:12px;background:#eeeae2;border-radius:8px;font-size:.82rem}.declaration-page{max-width:920px}.back{text-decoration:none;color:var(--muted)}.declaration-card{margin-top:36px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,6vw,70px);box-shadow:var(--shadow)}.declaration-card h1{font-size:clamp(2.8rem,7vw,5.5rem)}.facts{margin:42px 0}.facts div{display:grid;grid-template-columns:minmax(150px,.7fr) 1.5fr;gap:24px;padding:15px 0;border-top:1px solid var(--line)}.facts dt{font-weight:800}.facts dd{margin:0;overflow-wrap:anywhere}.notice{background:#eeeae2;border-radius:12px;padding:18px}footer{border-top:1px solid var(--line);color:var(--muted)}@media(max-width:760px){.site-header nav{display:none}.generator-grid,.code-tabs,.docs-grid{grid-template-columns:1fr}.generator-grid .wide{grid-column:auto}.facts div{grid-template-columns:1fr;gap:4px}.hero{padding-top:44px}h1{font-size:3.2rem}}
|
|
.language-switch select{width:auto;min-width:130px;padding:8px 34px 8px 10px;background:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pro-panel{margin:28px 0;border:1px solid var(--line);border-radius:14px;padding:24px;background:#f8f6f1}.pro-panel.enabled{background:#f2f7f3}.pro-panel.locked{background:#f3f1ed}.pro-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.pro-heading h2{font-size:clamp(1.7rem,3vw,2.5rem)}.edition-pill{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.78rem;font-weight:800;text-transform:uppercase;background:#fff}.generator-grid.compact{margin-bottom:0}.pro-panel input:disabled{cursor:not-allowed;opacity:.68}.declaration-card img{max-width:100%;height:auto}
|
|
@media(max-width:760px){.language-switch{margin-left:auto}.site-header{gap:12px}.pro-heading{align-items:center}}
|
|
|
|
/* Marketing page */
|
|
.marketing-main{max-width:1260px}.marketing-header{max-width:1260px}.marketing-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:center;gap:clamp(42px,7vw,96px);padding:72px 0 110px}.marketing-hero h1{font-size:clamp(3.2rem,7vw,6.8rem)}.marketing-hero-copy{min-width:0}.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:999px;font-weight:800;text-decoration:none;border:1px solid var(--accent);transition:transform .15s ease,box-shadow .15s ease}.button:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.1)}.button.primary{background:var(--accent);color:#fff}.button.secondary{background:transparent;color:var(--ink)}.button.inverse{border-color:#fff;color:#fff}.proof-list{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;padding:0;margin:30px 0 0;color:var(--muted);font-weight:700}.proof-list li::before{content:"✓";margin-right:7px;color:var(--ink)}.product-demo{min-width:0}.demo-window{overflow:hidden;border:1px solid #303030;border-radius:20px;background:#151515;color:#eee;box-shadow:0 28px 70px rgba(0,0,0,.22);transform:rotate(1.5deg)}.demo-bar{display:flex;gap:7px;padding:14px 16px;border-bottom:1px solid #303030}.demo-bar span{width:10px;height:10px;border-radius:50%;background:#666}.demo-content{padding:28px}.demo-content img{display:block;max-width:100%;height:22px;margin:14px 0}.demo-url{overflow:hidden;text-overflow:ellipsis;color:#9d9d9d;font:500 .78rem ui-monospace,SFMono-Regular,Menlo,monospace}.demo-content pre{overflow:auto;margin:26px 0 0;padding:18px;border-radius:12px;background:#090909;color:#d7d7d7;font-size:.8rem}.marketing-section{padding:96px 0;border-top:1px solid var(--line)}.section-heading{max-width:800px;margin-bottom:42px}.section-heading>p:last-child{font-size:1.1rem;color:var(--muted);max-width:720px}.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.feature-card{min-height:250px;padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.feature-card h3,.price-card h3,.config-panel h3{font-size:1.45rem;letter-spacing:-.03em;margin:.35rem 0 .8rem}.feature-card p:last-child{color:var(--muted)}.feature-kicker{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted)}.comparison-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.comparison-table,.config-table{width:100%;border-collapse:collapse;min-width:680px}.comparison-table th,.comparison-table td,.config-table th,.config-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}.comparison-table thead th,.config-table thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);background:#f8f6f1}.comparison-table td:nth-child(2),.comparison-table td:nth-child(3){font-weight:700}.comparison-table tbody tr:last-child>* ,.config-table tbody tr:last-child>*{border-bottom:0}.pricing-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:stretch}.price-card{display:flex;flex-direction:column;gap:20px;padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.price-card.featured{border:2px solid var(--ink);box-shadow:var(--shadow);transform:translateY(-8px)}.price-description{color:var(--muted);min-height:72px}.price{margin:0}.price strong{font-size:2.2rem;letter-spacing:-.05em}.price span{color:var(--muted);font-size:.88rem}.price-card ul{flex:1;list-style:none;padding:0;margin:0}.price-card li{padding:8px 0;border-bottom:1px solid #ece9e1;font-size:.92rem}.price-card li::before{content:"✓";margin-right:7px}.pricing-note{max-width:820px;margin:28px 0 0;color:var(--muted);font-size:.88rem}.install-list{display:grid;gap:12px}.install-method{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}.install-method summary{display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;padding:20px 24px;list-style:none}.install-method summary::-webkit-details-marker{display:none}.install-method summary span:first-child{display:flex;flex-direction:column;gap:3px}.install-method summary small{font-size:.9rem}.install-method[open] summary{border-bottom:1px solid var(--line)}.install-method[open] summary span:last-child{transform:rotate(45deg)}.code-block{position:relative;background:#151515;color:#efefef}.code-block pre{overflow:auto;margin:0;padding:28px 24px;font-size:.84rem;line-height:1.65}.copy-code{position:absolute;right:14px;top:14px;padding:7px 12px;background:#fff;color:#111;font-size:.75rem;z-index:1}.config-panel{margin-top:38px;padding:30px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.config-panel .comparison-wrap{margin-top:20px;box-shadow:none}.config-table code{overflow-wrap:anywhere}.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.faq-grid details{padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.faq-grid summary{cursor:pointer;font-weight:800}.faq-grid p{color:var(--muted)}.final-cta{margin:30px 0 100px;padding:clamp(34px,7vw,82px);border-radius:24px;background:#171717;color:#fff}.final-cta h2{max-width:920px}.final-cta>p{max-width:720px;color:#c8c8c8;font-size:1.1rem}
|
|
@media(max-width:1100px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.price-card.featured{transform:none}.price-card:last-child{grid-column:1/-1}}
|
|
@media(max-width:900px){.marketing-hero{grid-template-columns:1fr;padding-top:48px}.product-demo{max-width:620px}.marketing-header nav{display:none}}
|
|
@media(max-width:620px){.feature-grid,.pricing-grid,.faq-grid{grid-template-columns:1fr}.price-card:last-child{grid-column:auto}.marketing-section{padding:68px 0}.marketing-hero{padding-bottom:76px}.demo-window{transform:none}.config-panel{padding:18px}.proof-list{display:grid}.button{width:100%}}
|
|
|
|
/* Article-level declarations */
|
|
.form-subgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-subgrid .wide{grid-column:1/-1}.article-builder{border:1px solid var(--line);border-radius:14px;padding:22px;background:#f8f6f1}.article-builder legend{padding:0 8px;font-weight:800}.article-builder>p{margin-top:0;color:var(--muted)}.article-component-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.article-component{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff}.article-component-grid label{display:flex;flex-direction:column;gap:7px;font-weight:700}.declaration-card{overflow:hidden}.declaration-card h1{font-size:clamp(2.6rem,6vw,5rem);overflow-wrap:anywhere;hyphens:auto;max-width:100%}.declaration-badge{margin:28px 0 8px}.summary-section,.component-section{margin-top:44px}.summary-section h2,.component-section h2{font-size:clamp(1.55rem,3vw,2.2rem);letter-spacing:-.03em}.summary-copy{max-width:76ch}.summary-copy p{font-size:1.05rem;line-height:1.7;margin:.75em 0}.component-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}.component-table{width:100%;border-collapse:collapse;min-width:720px;background:#fff}.component-table th,.component-table td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.component-table thead th{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);background:#f8f6f1}.component-table tbody th{font-weight:800}.component-table tbody tr:last-child>*{border-bottom:0}.component-note td{font-size:.9rem;color:var(--muted);background:#fbfaf7}.metadata-facts{margin-top:32px}
|
|
@media(max-width:760px){.form-subgrid,.article-component-grid{grid-template-columns:1fr}.article-component{grid-template-columns:1fr}.form-subgrid .wide{grid-column:auto}.declaration-card h1{font-size:clamp(2.2rem,11vw,3.5rem)}.summary-copy p{font-size:1rem}}
|
|
|
|
/* Language switcher on declaration results */
|
|
.declaration-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:12px}.declaration-toolbar .eyebrow{margin:.7rem 0 0}.declaration-language{display:flex;align-items:center;gap:10px;flex:0 0 auto}.declaration-language label{font-size:.78rem;font-weight:800;color:var(--muted)}.declaration-language select{width:auto;min-width:145px;background:#fff;padding:9px 34px 9px 11px}.language-link-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.language-link-list a{font-size:.85rem}.language-link-list a[aria-current="page"]{font-weight:800;text-decoration:none}
|
|
@media(max-width:760px){.declaration-toolbar{display:block}.declaration-toolbar .eyebrow{margin-top:0}.declaration-language{margin-top:16px;align-items:flex-start;flex-direction:column;gap:6px}.declaration-language select{width:100%}}
|
|
|
|
/* Structured declaration tables */
|
|
.component-table-wrap{border:0;border-radius:14px;box-shadow:0 0 0 1px var(--line);background:#fff}
|
|
.component-table{table-layout:fixed;border-collapse:separate;border-spacing:0;min-width:760px}
|
|
.component-table .component-col{width:22%}.component-table .extent-col{width:25%}.component-table .activity-col{width:29%}.component-table .review-col{width:24%}
|
|
.component-table th,.component-table td{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 18px;line-height:1.45;overflow-wrap:anywhere;word-break:normal}
|
|
.component-table tr>*:last-child{border-right:0}.component-table tbody tr:last-child>*{border-bottom:0}
|
|
.component-table thead th{vertical-align:bottom;background:#f3f1ec;color:#4f4f4f}
|
|
.component-table tbody th{background:#faf9f6;vertical-align:top}.component-table tbody td{vertical-align:top}
|
|
.component-table tbody tr:not(.component-note):hover>*{background:#f8f7f3}
|
|
.component-table tbody tr:not(.component-note):hover th{background:#f3f1ec}
|
|
.component-note td{border-right:0;background:#fbfaf7;font-style:italic}
|
|
#assurance-description{display:block;max-width:78ch;line-height:1.5}
|
|
|
|
/* Metadata grid */
|
|
.metadata-facts{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
|
|
.metadata-facts div{grid-template-columns:minmax(180px,.7fr) minmax(0,1.5fr);gap:0;padding:0;border-top:1px solid var(--line)}
|
|
.metadata-facts div:first-child{border-top:0}
|
|
.metadata-facts dt,.metadata-facts dd{padding:14px 16px}
|
|
.metadata-facts dt{background:#f3f1ec;border-right:1px solid var(--line)}
|
|
@media(max-width:760px){.metadata-facts div{grid-template-columns:1fr}.metadata-facts dt{border-right:0;border-bottom:1px solid var(--line)}}
|