SGEN Custom Objects: any content type. Native.
SGEN's Custom Objects module models any content type your site needs, property listings, recipes, team bios, portfolio pieces, as native structured data with its own admin, slug, URL structure, and index. Define the type point-and-click and SGEN generates the single, archive, and loop templates, the permalink pattern, the per-type categories, and the full draft-to-trash admin.
Attach the data with the native Custom Fields builder and its 15 field types, all in your dashboard with nothing to install. Each type runs the same lifecycle you already know, a six-state index with live counts, bulk actions, search, and per-row edit, trash and restore, and its content items open in the SG Builder visual editor.
Define any structured content type your site needs.
The Custom Objects module owns five jobs in one admin: define the type, attach its fields, organize it, publish it, and route it. Register the type, attach the fields, and give it a taxonomy from one screen, point-and-click, with nothing to install.
Content-type builder
Register a type with a name, a slug, and its publishing behavior, no code. Each type gets its own Pages browser, its own URL structure and index, plus its own single, archive, and loop-item templates, a permalink-structure control, items-per-page and items-per-row layout, SEO defaults, and header and footer script injection.
Custom Fields, native
Build a group of fields and attach it to any content type, a Page, a Blog post, an Event, or one of your Custom Objects, and the fields render on that type's edit form. 15 field types, from text and number to image picker, repeater, and nested group. Structured data lives in the same dashboard, nothing to install.
Full object CRUD
Every type gets a six-state index: All Objects, Published, Draft, Private, Password Protected, and Trash, with live counts, inline search, bulk publish, draft, or trash, and per-row edit, trash and restore. The workflow you already know from posts, applied to your own content types.
Categories per type
Give any type its own taxonomy with a two-card Categories manager: an inline create-and-update form on the left, a paginated searchable table on the right. Categorize listings by neighborhood or recipes by cuisine and build filtered archives from the category your visitor picked.
Portfolio as a preset
A portfolio is a Custom Objects preset, not a separate engine: define a Portfolio Projects type, attach the fields you care about, client, category, date, hero image, outcome, and publish each piece as an object. It inherits the same fields, categories, and routing your other types use.
One consistent admin
Define the type, attach its fields, set its categories, and publish its objects from the same admin where you manage pages and posts. Object pages open in the SG Builder visual editor, the same builder your pages use, so there is one controller and one UI to learn.
One module. The whole content-type stack, in the box.
SGEN's Custom Objects ships the type registration, the field attachment, and the per-type taxonomy as one native module, on every plan. Register a type, attach its field groups, and add its categories from a single admin, with one update cadence and nothing to license. On WordPress this is three separate plugins; here it is one module.
A native field builder. Fifteen field types. Native.
SGEN's Custom Fields module builds a group of fields and binds it to any of four content types. Define field rows with a label, a name, and a type, set the group's locations and status, and attach a listing's price and bedrooms or a recipe's prep time and servings, with nothing to license.
The palette goes well past plain text and number. Repeatable fields add Item #1, Item #2 rows on the edit form for galleries and feature lists; nested Group fields model a structured sub-record inside one field; the Image and Attachment types are native Media-library pickers that return the file with inline upload and preview; and the HTML type is a full rich-text WYSIWYG editor for long-form body copy, formatted in place, no shortcodes to memorize. These five premium types carry the depth a generic add-a-field toggle hides.
A group renders on every item of the content types you check. Bind one schema to Pages, Blog, Events, or your Custom Objects.
Each field generates a front-end shortcode so you can render its value anywhere in a template.
Repeaters add rows on the edit form, Item #1, Item #2, and nested groups model structured sub-records.
Per-field options carry the depth: Required, Default value, Placeholder, Description, Choices (newline value:label for select, checkbox, and radio), and a generated shortcode per field. The same field group powers Pages, Blog, Events, and Custom Objects, so one schema serves four content types.
Every type carries its own templates, URLs, layout, and SEO.
SGEN generates a full type-definition form behind every Custom Object, far more than a name and a slug. Set the status, the layout, the templates, the permalink pattern, and the per-type SEO, then inject header and footer scripts in in-app code editors, all point-and-click.
2
3// JSON-LD for property listings <span class="a">type</span>=<span class="s">"application/ld+json"</span><span class="t">></span> { <span class="a">"@type"</span>: <span class="s">"RealEstateListing"</span> }</span></div> </div> <div class="cocode"> <div class="ch"><span class="dot"></span><span class="nm">Footer scripts</span><span class="lng">JS</span></div> <div class="cb"><span class="ln">1<br>2</span><span class="co"><span class="c">// per-type analytics tag</span> <span class="t">track</span>(<span class="s">'view'</span>, { type: <span class="s">'properties'</span> })</span></div> </div> </div> <div class="side"> <div class="stbox"> <div class="sl">Status</div> <div class="srow"><span class="k">State</span><span class="v">Published</span></div> <div class="srow"><span class="k">Visibility</span><span class="v">Public</span></div> <div class="srow"><span class="k">Items</span><span class="v">28</span></div> <div class="srow"><span class="k">Author</span><span class="v">Site Owner</span></div> </div> <span class="mk">Update Item</span> <span class="trash">Move to Trash</span> </div> </div> </div> <p class="label reveal" style="margin-top:16px">One form. Per-type templates, permalink pattern, layout, SEO, and in-app script injection, set point-and-click.</p> </div> </section> <!-- 6 · CROSS-LINK · the type to content to taxonomy loop --> <section class="sec surface-dark has-atmos"> <div class="wrap"> <div class="feat reveal" data-d="1" style="border-top:0"> <div class="feat-copy"> <div class="eyebrow">The loop it unlocks</div> <h3 class="h3" style="margin-bottom:12px">Type, then content, then taxonomy, then visual editor.</h3> <p>Define a content type and SGEN opens its own Pages browser for the items inside it, its own Categories taxonomy to organize them, and the SG Builder visual editor to design each page. A type and its content live together: a Properties type holds your listings, a Recipes type holds your recipes, each with its own URL structure and its own filtered archives. Attach the data with the native <a href="../product/custom-fields" style="color:var(--sg-red-hot)">Custom Fields builder</a>, and present it with the <a href="../product/page-builder" style="color:var(--sg-red-hot)">SG Builder</a> you already use for pages.</p> </div> <div class="adwin light rdark" aria-hidden="true"> <div class="adbar"><span class="ic"></span><span class="ti">Custom Object · Properties<small>All Pages</small></span><span class="act">Add Page</span></div> <div class="cotab"> <div class="th" style="grid-template-columns:28px 1.7fr 1.3fr 1fr .9fr"><span></span><span>Title</span><span>Category</span><span>Author</span><span>Created At</span></div> <div class="tr" style="grid-template-columns:28px 1.7fr 1.3fr 1fr .9fr"><span class="ck"></span><span class="nm">14 Maple Court</span><span class="sl">Riverside</span><span class="au">Site Owner</span><span class="dt">May 02</span></div> <div class="tr" style="grid-template-columns:28px 1.7fr 1.3fr 1fr .9fr"><span class="ck"></span><span class="nm">8 Harbor View</span><span class="sl">Waterfront</span><span class="au">Site Owner</span><span class="dt">May 09</span></div> <div class="tr" style="grid-template-columns:28px 1.7fr 1.3fr 1fr .9fr"><span class="ck"></span><span class="nm">221 Elm Street</span><span class="sl">Downtown</span><span class="au">Site Owner</span><span class="dt">May 17</span></div> </div> <div class="copage"><span class="pg ends">First</span><span class="pg on">1</span><span class="pg">2</span><span class="pg">3</span><span class="pg ends">Last</span></div> </div> </div> </div> </section> <!-- 6b · PER-TYPE CATEGORIES · the taxonomy surface, rendered --> <section class="sec sec--warm"> <div class="wrap"> <div class="readw reveal"> <div class="eyebrow">A taxonomy per type</div> <h2 class="h2">Every type gets its own categories, <span class="grad">native taxonomy.</span></h2> <p class="lead" style="margin-top:16px">Open Categories on any Custom Object type and you get a dedicated taxonomy manager: a create-and-update form on the left, a searchable, paginated category table on the right. Group Properties by neighborhood, Recipes by cuisine, Case Studies by industry, then build filtered archives that read from the category your visitor picked. Each type carries its own category set, kept separate from every other type.</p> </div> <div class="adwin reveal rdark" data-d="1" aria-hidden="true" style="margin-top:40px"> <div class="adbar"><span class="ic"></span><span class="ti">Custom Object · Properties<small>Categories</small></span><span class="crumb">Dashboard / Properties / <b>Categories</b></span></div> <div class="cocat"> <div class="catform"> <div class="cfh">Create a category</div> <div class="fld"><span class="lab">Name</span><div class="inp">Waterfront</div></div> <div class="fld"><span class="lab">Slug</span> <div class="perma"><span class="base">/properties/category/</span><span class="slug">waterfront</span></div> </div> <div class="fld"><span class="lab">Description</span><div class="inp tall">Listings on the harbor and riverfront, sorted by price.</div></div> <span class="mk">Add Category</span> </div> <div class="catlist"> <div class="clh"><span class="cnt">5 categories</span><span class="srch">Search categories... <span class="mag"></span></span></div> <div class="ctab"> <div class="th"><span>Name</span><span>Slug</span><span>Count</span><span>Actions</span></div> <div class="tr"><span class="nm">Riverside</span><span class="sl">/riverside</span><span class="ct">12</span><span class="ax"><span>View</span> · <span>Delete</span></span></div> <div class="tr"><span class="nm">Waterfront</span><span class="sl">/waterfront</span><span class="ct">9</span><span class="ax"><span>View</span> · <span>Delete</span></span></div> <div class="tr"><span class="nm">Downtown</span><span class="sl">/downtown</span><span class="ct">7</span><span class="ax"><span>View</span> · <span>Delete</span></span></div> <div class="tr"><span class="nm">Suburban</span><span class="sl">/suburban</span><span class="ct">4</span><span class="ax"><span>View</span> · <span>Delete</span></span></div> <div class="tr"><span class="nm">New Build</span><span class="sl">/new-build</span><span class="ct">3</span><span class="ax"><span>View</span> · <span>Delete</span></span></div> </div> <div class="copage"><span class="pg ends">First</span><span class="pg on">1</span><span class="pg">2</span><span class="pg ends">Last</span></div> </div> </div> </div> <p class="label reveal" style="margin-top:16px">Categories are scoped to the type. A Properties category never bleeds into Recipes, and each category drives its own filtered archive URL.</p> </div> </section> <!-- 7 · DARK STAT PUNCTUATION (no Patchstack on module pages) --> <section class="sec surface-dark has-atmos"> <div class="wrap"> <div class="sec-head readw reveal"><div class="eyebrow">The platform behind the module</div><h2 class="h2">In the box on every plan.</h2></div> <div class="stat-band" style="margin-top:42px"> <div class="s reveal"><span class="stat">15</span><div class="cap">field types in the native Custom Fields builder, in the box</div></div> <div class="s reveal" data-d="1"><span class="stat">0<span class="z"> plugins</span></span><div class="cap">Custom Objects and Custom Fields are native, not bolted on</div></div> <div class="s reveal" data-d="2"><span class="stat">23</span><div class="cap">native modules included on every plan</div></div> </div> </div> </section> <!-- 8 · FAQ --> <section class="sec"> <div class="wrap"> <div class="sec-head reveal"><div class="eyebrow">Questions</div><h2 class="h2">Frequently asked questions about Custom Objects</h2></div> <div class="faq-list" style="margin-top:30px"> <details class="reveal" open><summary>Is Custom Objects the same as WordPress custom post types? <span class="pm">+</span></summary><div class="ans">It fills the same role, defining structured content types beyond pages and posts, but the implementation is native. You register the type point-and-click and wire no schema by hand. You define the type in the Custom Objects admin and SGEN generates the full admin CRUD, the templates, the permalink pattern, and the per-type categories.</div></details> <details class="reveal"><summary>Do I need a developer to create a content type? <span class="pm">+</span></summary><div class="ans">No. The module is a point-and-click admin: give the type a name, a slug, and its publishing settings, and SGEN generates the rest, the single, archive and loop templates, the items-per-page and items-per-row layout, and the per-type SEO. Fields are added through the Custom Fields admin, also without code.</div></details> <details class="reveal"><summary>What is Custom Fields, is it a separate product? <span class="pm">+</span></summary><div class="ans">It is a native companion module, not a separate purchase: a field-group builder with 15 field types (text, number, select, image picker, repeater, nested group, and more) that you attach to any content type including your Custom Objects. The fields render on that type's edit form, and each field carries a front-end shortcode. Native, in the box.</div></details> <details class="reveal"><summary>Can I organize a content type with categories? <span class="pm">+</span></summary><div class="ans">Yes. Every type gets its own Categories taxonomy with a create-and-update form and a searchable category table, so you can categorize listings by neighborhood or recipes by cuisine and build filtered archives, all native.</div></details> <details class="reveal"><summary>Which plan includes Custom Objects? <span class="pm">+</span></summary><div class="ans">Every plan. Custom Objects and Custom Fields are two of the 23 native modules, and every plan is the whole platform; plans differ only by how many live sites you run. Paid plans start at $39/mo (billed annually; $47 monthly), and the free Sandbox runs the module on unlimited staging sites.</div></details> <details class="reveal"><summary>Is there anything Custom Objects does NOT do? <span class="pm">+</span></summary><div class="ans">It is a content-type and content-modeling engine, not an e-commerce catalog or a headless API product. Bulk status changes (publish, draft, trash) and per-row delete are supported, and categories and the per-type templates are configured in the admin. Object pages open in the SG Builder visual editor, the same builder your pages use, not a separately-licensed tool. For product catalogs with inventory and checkout, use the e-commerce module instead.</div></details> </div> </div> </section> <!-- RELATED (internal linking) --> <section class="sec related"> <div class="wrap"> <div class="readw reveal" style="margin-left:auto;margin-right:auto;text-align:center"> <div class="eyebrow" style="justify-content:center">Pairs with</div> <h2 class="h2">The modules that <span class="grad">model and present your content</span>.</h2> </div> <div class="related-grid reveal" data-d="1"> <a class="rel" href="../product/custom-fields"><span class="rn">Custom Fields</span><span class="rd">Attach 15 typed fields to any content type.</span><span class="rg">Explore Custom Fields →</span></a> <a class="rel" href="../product/page-builder"><span class="rn">Page Builder</span><span class="rd">Design every object page on the visual canvas.</span><span class="rg">Explore Page Builder →</span></a> <a class="rel" href="../product/pages-and-posts"><span class="rn">Pages and Posts</span><span class="rd">The same governed list, applied to your own types.</span><span class="rg">Explore Pages and Posts →</span></a> <a class="rel" href="../product/events"><span class="rn">Events</span><span class="rd">A built-in content type with its own fields.</span><span class="rg">Explore Events →</span></a> <a class="rel" href="../product/seo-optimization"><span class="rn">SEO Optimization</span><span class="rd">Per-type SEO defaults and JSON-LD schema.</span><span class="rg">Explore SEO Optimization →</span></a> </div> </div> </section> <!-- 9 · CLOSING PRICING CTA --> <section class="sec surface-dark has-atmos co-close" style="background:var(--sg-bg-deep)"> <div class="wrap"> <div class="eyebrow reveal" style="justify-content:center">Included in your plan</div> <h2 class="h2 reveal" data-d="1" style="margin-top:12px">Native content types. One module. <span class="grad">From $39/mo.</span></h2> <p class="lead reveal" data-d="2" style="margin:16px auto 0;max-width:62ch">Custom Objects and Custom Fields are two of the 23 native modules included in every plan. Define a type, attach its fields, and publish an object on the free Sandbox across unlimited staging sites before you pay anything.</p> <div class="flex reveal" data-d="3" style="justify-content:center;margin-top:28px"> <a class="btn btn-primary" href="../pricing">Try the Free Sandbox <span class="arr">→</span></a> <a class="btn btn-secondary" href="../product/custom-fields">Pair with Custom Fields</a> </div> <div class="related reveal" data-d="3"> <a href="../product/custom-fields">Custom Fields, the 15-type field builder</a> <a href="../product/page-builder">SG Builder, the visual editor for every object page</a> All 23 native modules </div> <p class="fine reveal">From $39/mo, billed annually. $47 monthly. 2-week trial, cancel anytime. Every module included.</p> </div> </section> </main> <script> const hdr = document.getElementById('hdr'); addEventListener('scroll', () => hdr.classList.toggle('is-stuck', scrollY > 10), {passive:true}); const drawer = document.getElementById('drawer'), overlay = document.querySelector('.drawer-overlay'); document.querySelectorAll('[data-drawer-open]').forEach(b => b.addEventListener('click', () => { drawer.classList.add('open'); overlay.classList.add('open'); })); document.querySelectorAll('[data-drawer-close]').forEach(b => b.addEventListener('click', () => { drawer.classList.remove('open'); overlay.classList.remove('open'); })); // scroll-reveal const io = new IntersectionObserver((es)=>{es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}})},{threshold:.12,rootMargin:'0px 0px -6% 0px'}); document.querySelectorAll('.reveal').forEach(el=>io.observe(el)); // mobile sticky bar, appear after hero, hide when footer CTA in view const mbar = document.querySelector('.mobile-bar'); const heroSec = document.querySelector('main section'); const fcta = document.querySelector('.footer-cta'); function updBar(){ if(!mbar||!fcta) return; const past = scrollY > (heroSec ? heroSec.offsetTop + heroSec.offsetHeight - 140 : 480); const footerNear = fcta.getBoundingClientRect().top < innerHeight * 0.94; mbar.classList.toggle('show', past && !footerNear); } addEventListener('scroll', updBar, {passive:true}); addEventListener('resize', updBar); updBar(); // billing toggle (pricing + any page with [data-billing]) document.querySelectorAll('[data-billing]').forEach(t=>t.addEventListener('click',()=>{ const mode=t.dataset.billing; document.querySelectorAll('[data-billing]').forEach(b=>b.classList.toggle('on',b===t)); document.querySelectorAll('[data-annual]').forEach(el=>{ el.textContent = mode==='annual'? el.dataset.annual : el.dataset.monthly; }); document.querySelectorAll('.billed').forEach(el=>{ if(el.dataset.annual) el.textContent = mode==='annual'? el.dataset.annual : el.dataset.monthly; }); })); // megamenu keyboard + screen-reader access. // CSS reveals each panel on .nav-item:hover and :focus-within (progressive enhancement, kept). // Here we add an explicit JS-owned open state: aria-expanded on the trigger + an .is-open class // on the .nav-item so keyboard/SR users get click-to-toggle and Escape-to-close-with-focus-restore. // (A CSS rule keyed on .nav-item.is-open .megamenu makes the explicit-open path visually robust and // lets Escape keep the trigger focused without :focus-within re-revealing the panel; see A9 NOTE.) document.querySelectorAll('.nav-item').forEach(item => { const trig = item.querySelector('.nav-trigger'); const panel = item.querySelector('.megamenu'); if (!trig || !panel) return; let viaPointer = false; // distinguishes a click (pointer) from a Tab (keyboard) into the trigger const sync = on => { item.classList.toggle('is-open', on); trig.setAttribute('aria-expanded', on ? 'true' : 'false'); }; const closeOthers = () => document.querySelectorAll('.nav-item.is-open').forEach(o => { if (o !== item) { o.classList.remove('is-open'); const t = o.querySelector('.nav-trigger'); if (t) t.setAttribute('aria-expanded','false'); } }); // Pointer path: mousedown flags the focus as pointer-driven so focusin does not auto-open; // click then toggles. Keyboard path: no mousedown, so focusin opens on Tab-in. trig.addEventListener('mousedown', () => { viaPointer = true; }); trig.addEventListener('click', e => { e.preventDefault(); const willOpen = trig.getAttribute('aria-expanded') !== 'true'; closeOthers(); sync(willOpen); if (willOpen) trig.focus(); else trig.blur(); viaPointer = false; }); // Keyboard focus into the item opens it (covers Tab-through reveal); pointer focus is left to click. item.addEventListener('focusin', () => { if (viaPointer) return; sync(true); }); item.addEventListener('focusout', () => { if (!item.contains(document.relatedTarget)) sync(false); }); // Escape closes the open panel and returns focus to its trigger. item.addEventListener('keydown', e => { if (e.key === 'Escape' && trig.getAttribute('aria-expanded') === 'true') { e.stopPropagation(); sync(false); trig.focus(); } }); }); // Click outside any nav-item closes open megamenus. document.addEventListener('click', e => { if (!e.target.closest('.nav-item')) document.querySelectorAll('.nav-item.is-open').forEach(o => { o.classList.remove('is-open'); const t = o.querySelector('.nav-trigger'); if (t) t.setAttribute('aria-expanded','false'); }); }); /* ============================================================================ _standard.css - shared signature for STANDARD-tier pages (Type-D module, Type-E solution, etc.). Light marketing canvas + ONE dark punctuation, the floor-intensity component vocabulary. Loads on top of the foundation + chrome. Many pages link THIS (not a per-page sheet). All var(--sg-*). ============================================================================ */ /* hero (copy + product mock) */ .std-hero { display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:56px; padding-block:7vh var(--sg-pad); } .std-hero h1 { max-width:15ch; margin-top:16px; } .std-hero .lead { margin-top:20px; } .std-hero .cta { margin-top:30px; } /* clean light product mock (floor depth, not the cinematic canvas) */ .ui-mock { border-radius:var(--sg-r-lg); background:#fff; border:1px solid var(--sg-line); box-shadow:var(--sg-shadow); overflow:hidden; } .ui-bar { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--sg-line); background:var(--sg-bg-2); } .ui-bar .d { width:9px; height:9px; border-radius:50%; background:#d8d4cd; } .ui-bar .t { font-family:var(--sg-mono); font-size:11px; color:var(--sg-ink-faint); margin-left:6px; } .ui-body { padding:20px; display:flex; flex-direction:column; gap:13px; } .ui-field { border:1px solid var(--sg-line); border-radius:10px; padding:13px 15px; } .ui-field.active { border-color:var(--sg-red); box-shadow:0 0 0 3px var(--sg-red-soft); } .ui-field .lab { font-family:var(--sg-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--sg-ink-faint); } .ui-field .val { height:11px; width:62%; border-radius:4px; background:#eceae5; margin-top:8px; } .ui-toggle { display:flex; align-items:center; justify-content:space-between; padding:12px 15px; border:1px solid var(--sg-line); border-radius:10px; font-size:13px; font-weight:600; color:var(--sg-ink-soft); } .ui-toggle .sw { width:38px; height:22px; border-radius:999px; background:var(--sg-grad-red); position:relative; box-shadow:0 0 12px rgba(213,21,34,.4); } .ui-toggle .sw::after { content:""; position:absolute; top:3px; right:3px; width:16px; height:16px; border-radius:50%; background:#fff; } .ui-row { display:flex; gap:12px; } .ui-row .ui-field { flex:1; } .ui-submit { align-self:flex-start; } /* trust strip */ .logos { display:flex; flex-wrap:wrap; gap:34px; align-items:center; justify-content:center; opacity:.65; } .logos .lg { font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--sg-ink-faint); } /* icon chip for benefit pillars (use with foundation .card) */ .ico { width:44px; height:44px; border-radius:12px; background:var(--sg-red-soft); display:grid; place-items:center; margin-bottom:16px; transition:background .2s; } .ico .m { width:18px; height:18px; border-radius:5px; background:var(--sg-grad-red); } .card:hover .ico { background:var(--sg-red); } /* feature rows (alternating, light) */ .feat { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:46px 0; border-top:1px solid var(--sg-line); } .feat:first-child { border-top:0; } .feat.flip .feat-copy { order:2; } .feat-art { border-radius:var(--sg-r-lg); border:1px solid var(--sg-line); background:var(--sg-bg-2); box-shadow:var(--sg-shadow-rest); min-height:240px; display:grid; place-items:center; overflow:hidden; } .feat-art .tile-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:24px; width:100%; } .feat-art .tile { height:78px; border-radius:10px; background:#fff; border:1px solid var(--sg-line); box-shadow:var(--sg-shadow-rest); display:grid; place-items:center; font-family:var(--sg-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--sg-ink-faint); } .feat-art .tile.accent { background:var(--sg-grad-red); border:0; box-shadow:var(--sg-shadow-red); color:#fff; } /* "replaces these plugins" chips */ .replaces { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; } .rep-chip { font-family:var(--sg-mono); font-size:12px; padding:7px 12px; border-radius:8px; border:1px solid var(--sg-line); color:var(--sg-ink-faint); text-decoration:line-through; text-decoration-color:rgba(213,21,34,.55); } /* dark stat band (the one dark punctuation) */ .stat-band { display:grid; grid-template-columns:repeat(3,1fr); gap:0; } .stat-band .s { padding:0 30px; border-left:1px solid var(--sg-line-2); } .stat-band .s:first-child { border-left:0; padding-left:0; } .stat-band .cap { font-family:var(--sg-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--sg-ink-faint); margin-top:8px; } /* faq (native accordion) */ .faq-list { max-width:840px; } .faq-list details { border-top:1px solid var(--sg-line); } .faq-list details:last-child { border-bottom:1px solid var(--sg-line); } .faq-list summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 2px; font-weight:700; font-size:17px; } .faq-list summary::-webkit-details-marker { display:none; } .faq-list summary .pm { font-family:var(--sg-mono); color:var(--sg-red); font-size:20px; transition:transform .2s var(--sg-ease); } .faq-list details[open] summary .pm { transform:rotate(45deg); } .faq-list .ans { padding:0 2px 22px; color:var(--sg-ink-soft); max-width:70ch; } @media (max-width:920px){ .std-hero, .std-hero.feat { grid-template-columns:1fr; gap:36px; } .std-hero h1 { max-width:none; } .std-hero .ui-mock { max-width:520px; } .feat { grid-template-columns:1fr; gap:30px; } .feat.flip .feat-copy { order:0; } .stat-band { grid-template-columns:1fr; gap:24px; } .stat-band .s { border-left:0; padding:0; } } /* ===== MODULE HERO MOCKS: accurate crafted UI per module (sit in .ui-mock shell) ===== */ /* SERP snippet (seo) */ .mk-serp { padding:20px; display:flex; flex-direction:column; gap:16px; } .mk-serp .url { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--sg-ink-faint); font-family:var(--sg-mono); } .mk-serp .url .fav { width:18px; height:18px; border-radius:50%; background:var(--sg-grad-red); flex:none; } .mk-serp .ttl { color:#1a0dab; font-size:18px; font-weight:500; margin:7px 0 4px; } .mk-serp .desc { font-size:12.5px; color:#4d5156; line-height:1.5; } .mk-serp .meta { border-top:1px solid var(--sg-line); padding-top:14px; display:grid; gap:9px; } .mk-serp .mrow { display:flex; justify-content:space-between; align-items:center; } .mk-serp .mrow .lab { font-family:var(--sg-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--sg-ink-faint); } .mk-serp .mrow .bar { width:130px; height:7px; border-radius:999px; background:var(--sg-bg-2); overflow:hidden; } .mk-serp .mrow .bar span { display:block; height:100%; background:var(--sg-grad-red); } /* security panel */ .mk-rows { padding:14px 16px; display:flex; flex-direction:column; } .mk-status { display:flex; align-items:center; justify-content:space-between; padding:13px 14px; border-radius:10px; background:var(--sg-bg-2); margin-bottom:10px; } .mk-status .ok { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px; } .mk-status .ok .d { width:9px; height:9px; border-radius:50%; background:#3ddc84; box-shadow:0 0 8px rgba(61,220,132,.7); } .mk-status .n { font-weight:900; font-size:20px; letter-spacing:-.02em; } .mk-log { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--sg-line-2); font-size:12px; } .mk-log .t { font-family:var(--sg-mono); font-size:10px; color:var(--sg-ink-faint); } .mk-log .ev { color:var(--sg-ink-soft); flex:1; } .mk-log .tag { font-family:var(--sg-mono); font-size:9px; padding:3px 7px; border-radius:5px; background:var(--sg-red-soft); color:var(--sg-red-deep); } .mk-log .tag.block { background:var(--sg-red); color:#fff; } /* data table (redirects) */ .mk-table { padding:6px 0; } .mk-table .th, .mk-table .tr { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:center; padding:11px 16px; } .mk-table .th { font-family:var(--sg-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--sg-ink-faint); border-bottom:1px solid var(--sg-line); } .mk-table .tr { border-bottom:1px solid var(--sg-line-2); font-size:12.5px; } .mk-table .tr .from { color:var(--sg-ink-faint); font-family:var(--sg-mono); } .mk-table .tr .to { color:var(--sg-ink); font-family:var(--sg-mono); } .mk-table .b301 { font-family:var(--sg-mono); font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px; background:var(--sg-red-soft); color:var(--sg-red-deep); } /* schema builder (custom-objects) */ .mk-schema { padding:16px; display:flex; flex-direction:column; gap:9px; } .mk-schema .obj { font-weight:800; font-size:14px; display:flex; align-items:center; gap:8px; margin-bottom:4px; } .mk-schema .obj .dot { width:8px; height:8px; border-radius:3px; background:var(--sg-grad-red); } .mk-field { display:flex; align-items:center; justify-content:space-between; padding:11px 13px; border:1px solid var(--sg-line); border-radius:9px; } .mk-field .fn { font-weight:600; font-size:13px; } .mk-field .ft { font-family:var(--sg-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--sg-ink-faint); padding:4px 8px; border-radius:5px; background:var(--sg-bg-2); } .mk-field.active { border-color:var(--sg-red); box-shadow:0 0 0 3px var(--sg-red-soft); } /* template gallery */ .mk-gallery { padding:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .mk-tpl { border-radius:9px; overflow:hidden; border:1px solid var(--sg-line); box-shadow:var(--sg-shadow-rest); } .mk-tpl .head { height:34px; } .mk-tpl .body { padding:8px; display:flex; flex-direction:column; gap:4px; } .mk-tpl .body span { height:5px; border-radius:3px; background:#eceae5; } .mk-tpl .body span:nth-child(2){ width:70%; } .mk-tpl.sel { border-color:var(--sg-red); box-shadow:0 0 0 1px var(--sg-red); } /* events calendar */ .mk-cal { padding:16px; } .mk-cal .cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:14px; } .mk-cal .cal .dy { aspect-ratio:1; border-radius:6px; background:var(--sg-bg-2); display:grid; place-items:center; font-size:10px; color:var(--sg-ink-faint); } .mk-cal .cal .dy.on { background:var(--sg-grad-red); color:#fff; font-weight:700; box-shadow:var(--sg-shadow-red); } .mk-ev { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--sg-line); border-radius:9px; margin-bottom:6px; } .mk-ev .date { text-align:center; font-family:var(--sg-mono); } .mk-ev .date .mo { font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--sg-red); } .mk-ev .date .dd { font-size:18px; font-weight:900; letter-spacing:-.02em; } .mk-ev .info .en { font-weight:700; font-size:13px; } .mk-ev .info .et { font-size:11px; color:var(--sg-ink-faint); } /* popup overlay */ .mk-popup { position:relative; min-height:300px; background:linear-gradient(180deg,#f2f1ed,#e6e3dc); overflow:hidden; } .mk-popup .pg { padding:16px; display:flex; flex-direction:column; gap:9px; opacity:.5; } .mk-popup .pg span { height:9px; border-radius:4px; background:#d3cfc7; } .mk-popup .pg span:nth-child(2){width:80%;} .mk-popup .pg span:nth-child(3){width:62%;} .mk-popup .pg span:nth-child(5){width:70%;} .mk-popup .modal { position:absolute; left:22px; right:22px; top:50%; transform:translateY(-50%); background:#fff; border-radius:14px; box-shadow:var(--sg-shadow-2); padding:22px; border:1px solid var(--sg-line); } .mk-popup .modal .x { position:absolute; top:11px; right:14px; color:var(--sg-ink-faint); font-size:16px; } .mk-popup .modal h4 { font-weight:900; font-size:19px; letter-spacing:-.02em; } .mk-popup .modal p { font-size:12.5px; color:var(--sg-ink-soft); margin:6px 0 14px; } .mk-popup .modal .ef { display:flex; gap:8px; } .mk-popup .modal .ef .inp { flex:1; border:1px solid var(--sg-line); border-radius:8px; padding:11px; font-size:11px; color:var(--sg-ink-faint); } /* "replaces the stack" collapse: the replaces-section graphic (franken-stack -> one native module) */ .mk-replaces { padding:24px; display:flex; flex-direction:column; gap:10px; width:100%; } .mk-replaces .old { display:flex; flex-direction:column; gap:8px; } .mk-replaces .p { display:flex; align-items:center; justify-content:space-between; padding:12px 15px; border:1px solid var(--sg-line); border-radius:10px; background:#fff; } .mk-replaces .p .nm { font-weight:600; font-size:13px; color:var(--sg-ink-soft); text-decoration:line-through; text-decoration-color:rgba(213,21,34,.55); } .mk-replaces .p .lic { font-family:var(--sg-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--sg-ink-faint); padding:3px 8px; border:1px solid var(--sg-line); border-radius:999px; } .mk-replaces .merge { display:flex; align-items:center; gap:12px; padding:1px 0; color:var(--sg-ink-faint); font-family:var(--sg-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; } .mk-replaces .merge::before, .mk-replaces .merge::after { content:""; height:1px; flex:1; background:var(--sg-line); } .mk-replaces .one { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-radius:11px; background:var(--sg-grad-red); color:#fff; box-shadow:var(--sg-shadow-red); } .mk-replaces .one .nm { font-weight:800; font-size:15px; letter-spacing:-.01em; } .mk-replaces .one .tag { font-family:var(--sg-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; opacity:.9; } /* ===== more product-surface atoms (for the SECOND render on each page) ===== */ /* filter toolbar */ .mk-toolbar { display:flex; gap:6px; padding:12px 14px; border-bottom:1px solid var(--sg-line); flex-wrap:wrap; } .mk-toolbar .chip { font-family:var(--sg-mono); font-size:10px; padding:5px 11px; border-radius:999px; border:1px solid var(--sg-line); color:var(--sg-ink-faint); } .mk-toolbar .chip.on { background:var(--sg-red-soft); color:var(--sg-red-deep); border-color:transparent; } /* record / inbox list */ .mk-list .row { display:grid; grid-template-columns:1.5fr 1fr auto; gap:10px; align-items:center; padding:12px 15px; border-bottom:1px solid var(--sg-line-2); font-size:12.5px; } .mk-list .row .who { font-weight:600; color:var(--sg-ink); } .mk-list .row .who small { display:block; font-weight:400; font-family:var(--sg-mono); font-size:10px; color:var(--sg-ink-faint); margin-top:2px; } .mk-list .row .src { font-family:var(--sg-mono); font-size:10px; color:var(--sg-ink-faint); } .mk-list .row .st { font-family:var(--sg-mono); font-size:9px; padding:3px 8px; border-radius:5px; background:var(--sg-red-soft); color:var(--sg-red-deep); justify-self:end; } /* report bar chart */ .mk-chart { padding:20px; } .mk-chart .bars { display:flex; align-items:flex-end; gap:9px; height:130px; padding-bottom:8px; border-bottom:1px solid var(--sg-line); } .mk-chart .bars i { flex:1; height:100%; border-radius:6px 6px 0 0; background:var(--sg-bg-2); } .mk-chart .bars i.hot { background:var(--sg-grad-red); box-shadow:var(--sg-shadow-red); } .mk-chart.up .bars i.hot { background:linear-gradient(180deg,#4ce592,#22b465); box-shadow:0 2px 12px rgba(40,192,109,.22); } /* uptime = operational green (matches the status .ok dot) */ .mk-chart .lg { display:flex; justify-content:space-between; margin-top:10px; font-family:var(--sg-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--sg-ink-faint); } /* settings editor: reuse .ui-field / .ui-toggle (already in this file) for field + toggle rows */ .mk-editor { padding:18px; display:flex; flex-direction:column; gap:11px; } .mk-editor .cc { font-family:var(--sg-mono); font-size:9px; color:var(--sg-ink-faint); float:right; } /* ============================================================================ SHARED ATOMS for compare / solutions / customers / showcase / why-sgen pages (added 2026-06-04 for the full-site build; dual-surface aware, all var(--sg-*)) ============================================================================ */ /* head-to-head comparison table: feature | SGEN | competitor */ .vs { width:100%; border-collapse:collapse; font-size:14px; border-radius:var(--sg-r-lg); overflow:hidden; box-shadow:var(--sg-shadow-rest); } .vs th, .vs td { padding:15px 18px; text-align:left; border-bottom:1px solid var(--sg-line); } .surface-dark .vs th, .surface-dark .vs td { border-bottom-color:rgba(255,255,255,.09); } .vs thead th { font-family:var(--sg-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--sg-ink-faint); background:var(--sg-bg-2); } .vs thead th.sg { color:var(--sg-red-deep); } .surface-dark .vs thead th { background:rgba(255,255,255,.04); } .surface-dark .vs thead th.sg { color:var(--sg-red-hot); } .vs td.feat-name { font-weight:600; color:var(--sg-ink); } .vs td.col-sg { background:var(--sg-red-soft); font-weight:600; color:var(--sg-ink); } .surface-dark .vs td.col-sg { background:rgba(213,21,34,.10); } .vs .yes { color:var(--sg-red); font-weight:800; } .surface-dark .vs .yes { color:var(--sg-red-hot); } .vs .no { color:var(--sg-ink-faint); } .vs tr:last-child td, .vs tbody tr:last-child td { border-bottom:0; } /* feature checklist (what's included) */ .checks { display:grid; gap:12px; } .checks .ck { display:flex; align-items:flex-start; gap:12px; font-size:15px; } .checks .ck .mk { width:22px; height:22px; border-radius:7px; background:var(--sg-grad-red); flex:none; display:grid; place-items:center; box-shadow:var(--sg-shadow-red); margin-top:1px; } .checks .ck .mk::after { content:""; width:8px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px); } .checks .ck b { color:var(--sg-ink); } /* verdict / winner callout band */ .verdict { display:flex; align-items:center; gap:18px; padding:24px 26px; border-radius:var(--sg-r-lg); background:var(--sg-grad-red); color:#fff; box-shadow:var(--sg-shadow-red); } .verdict .vk { font-family:var(--sg-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.9; } .verdict .vt { font-weight:900; font-size:clamp(20px,2.4vw,28px); letter-spacing:-.02em; line-height:1.15; } /* showcase site card (crafted browser-frame tile, no real screenshot) */ .sitecard { border-radius:var(--sg-r-lg); overflow:hidden; border:1px solid var(--sg-card-border); background:var(--sg-card-bg); box-shadow:var(--sg-glass-inset); transition:transform .25s var(--sg-ease), box-shadow .25s var(--sg-ease), border-color .25s; } .sitecard:hover { transform:translateY(-5px); border-color:var(--sg-red-tint-22); box-shadow:var(--sg-shadow-red), var(--sg-glass-inset); } .sitecard .top { display:flex; align-items:center; gap:6px; padding:9px 12px; background:#211f22; } .sitecard .top i { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.18); } .sitecard .top .u { margin-left:8px; font-family:var(--sg-mono); font-size:9px; color:rgba(255,255,255,.5); } .sitecard .shot { aspect-ratio:16/10; background:linear-gradient(150deg,#f2efe9,#e5e0d6); position:relative; } .sitecard .shot.d { background:linear-gradient(150deg,#1b1b20,#0e0e12); } .sitecard .shot .lbl { position:absolute; left:16px; bottom:14px; font-weight:800; font-size:17px; letter-spacing:-.02em; color:#1a1a1a; } .sitecard .shot.d .lbl { color:#f4f2ee; } .sitecard .meta { padding:13px 15px; display:flex; align-items:center; justify-content:space-between; } .sitecard .meta .nm { font-weight:700; font-size:14px; } .sitecard .meta .tag { font-family:var(--sg-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--sg-ink-faint); } /* big proof metric (reuse .stat for the number); metric row wrapper */ .metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .metric .k { font-family:var(--sg-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--sg-ink-faint); margin-top:10px; } @media (max-width:760px){ .metrics { grid-template-columns:1fr; gap:22px; } } /* comparison tables fit mobile width (fixed layout + wrap) instead of clipping */ @media (max-width:680px){ .vs { table-layout:fixed; width:100%; font-size:12.5px; } .vs th, .vs td { padding:10px 11px; word-break:break-word; overflow-wrap:anywhere; } } /* ============================================================================ SHARED ADMIN-SURFACE atoms (promoted from forms.css 2026-06-04 flagship build). Reusable crafted-CSS admin window for product dioramas on any module page. CRITICAL: .adwin re-asserts the LIGHT-surface tokens so a white admin card always reads with dark text, even inside a .surface-dark section (the invisible-text bug). Use .adwin for every white admin product surface. ============================================================================ */ .adwin { border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--sg-line); box-shadow:var(--sg-shadow); color:var(--sg-ink); --sg-ink:#1A1A1A; --sg-ink-soft:#5b5853; --sg-ink-faint:#868279; --sg-line:#ECEAE5; --sg-line-2:#f0eeea; --sg-bg-2:#f9f9f9; --sg-red-soft:#fff1f1; --sg-card-bg:#fff; --sg-card-border:#ECEAE5; } .surface-dark .adwin { box-shadow:var(--sg-shadow-cinematic); } .adbar { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--sg-line); background:var(--sg-bg-2); } .adbar .ic { width:24px; height:24px; border-radius:7px; background:var(--sg-grad-red); box-shadow:var(--sg-shadow-red); flex:none; } .adbar .ti { font-weight:800; font-size:14px; letter-spacing:-.01em; color:var(--sg-ink); } .adbar .ti small { display:block; font-weight:500; font-size:10.5px; color:var(--sg-ink-faint); letter-spacing:0; margin-top:1px; } .adbar .act { margin-left:auto; font-family:var(--sg-font); font-size:12px; font-weight:700; color:#fff; padding:8px 13px; border-radius:8px; background:var(--sg-grad-red); box-shadow:var(--sg-shadow-red); white-space:nowrap; } .adbar .act.ghost { background:#fff; color:var(--sg-ink-soft); border:1px solid var(--sg-line); box-shadow:none; } /* status-pill tabs (All / Published / ... with counts) */ .fpills { display:flex; gap:6px; padding:13px 16px 4px; flex-wrap:wrap; } .fpill { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--sg-ink-soft); padding:7px 12px; border-radius:999px; border:1px solid var(--sg-line); } .fpill b { font-family:var(--sg-mono); font-size:10px; padding:1px 6px; border-radius:999px; background:var(--sg-bg-2); color:var(--sg-ink-faint); } .fpill.on { background:var(--sg-red-soft); color:var(--sg-red-deep); border-color:transparent; } .fpill.on b { background:var(--sg-red); color:#fff; } /* shared charts: conic-gradient doughnut + crafted SVG line */ .donut { width:124px; height:124px; border-radius:50%; margin:4px auto 14px; -webkit-mask:radial-gradient(circle 38px at center, transparent 98%, #000 100%); mask:radial-gradient(circle 38px at center, transparent 98%, #000 100%); } .dleg { display:flex; flex-direction:column; gap:7px; } .dleg .dl { display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--sg-ink-soft); } .dleg .dl .sw { width:10px; height:10px; border-radius:3px; flex:none; } .dleg .dl b { margin-left:auto; font-family:var(--sg-mono); color:var(--sg-ink); } .lchart { position:relative; height:150px; border-left:1px solid var(--sg-line); border-bottom:1px solid var(--sg-line); } .lchart svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .chart-axis { display:flex; justify-content:space-between; margin-top:9px; font-family:var(--sg-mono); font-size:9px; color:var(--sg-ink-faint); } /* ============================================================================ DISCUSSIONS atoms (added 2026-06-04, Wave 1): moderation queue + public threaded comments + star reviews. Reused by /discussions and the reviews/comments cross-links on ecommerce, events, blog. All var(--sg-*). ============================================================================ */ /* shared avatar (initials) */ .av { display:grid; place-items:center; border-radius:50%; color:#fff; font-weight:800; flex:none; background:var(--sg-grad-red); box-shadow:var(--sg-shadow-red); } .av.b1 { background:#3b4a73; box-shadow:none; } .av.b2 { background:#1f5c43; box-shadow:none; } .av.b3 { background:#7a2533; box-shadow:none; } .av.g { background:#c9c4bb; box-shadow:none; } /* star rating */ .stars { display:inline-flex; gap:2px; } .stars i { width:12px; height:12px; background:var(--sg-grad-red); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); } .stars i.o { background:#dcd8d0; } .stars.sm i { width:10px; height:10px; } /* moderation queue list (admin surface) */ .mk-modq { padding:4px 0; } .mk-modq .qrow { display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:start; padding:13px 16px; border-bottom:1px solid var(--sg-line-2); } .mk-modq .qrow:last-child { border-bottom:0; } .mk-modq .qrow .av { width:30px; height:30px; font-size:11px; } .mk-modq .bd .who { font-weight:700; font-size:12.5px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .mk-modq .bd .who .on { font-family:var(--sg-mono); font-size:9px; color:var(--sg-ink-faint); font-weight:400; } .mk-modq .bd .cm { font-size:12px; color:var(--sg-ink-soft); margin-top:3px; line-height:1.45; } .mk-modq .st { font-family:var(--sg-mono); font-size:9px; padding:3px 8px; border-radius:5px; align-self:center; white-space:nowrap; letter-spacing:.04em; } .mk-modq .st.ok { background:var(--sg-red-soft); color:var(--sg-red-deep); } .mk-modq .st.pend { background:#f6ead0; color:#7a5b00; } .mk-modq .st.spam { background:#26262c; color:#fff; } /* public threaded comments + reviews (front surface) */ .mk-thread { padding:18px; display:flex; flex-direction:column; gap:15px; } .mk-cmt { display:grid; grid-template-columns:auto 1fr; gap:11px; } .mk-cmt.reply { margin-left:36px; } .mk-cmt .av { width:32px; height:32px; font-size:11px; } .mk-cmt .meta { display:flex; gap:9px; align-items:center; margin-bottom:5px; } .mk-cmt .meta b { color:var(--sg-ink); font-weight:700; font-size:13px; } .mk-cmt .meta .t { font-family:var(--sg-mono); font-size:10px; color:var(--sg-ink-faint); } .mk-cmt .body { font-size:13px; color:var(--sg-ink-soft); line-height:1.5; } .mk-cmt .rep { font-family:var(--sg-mono); font-size:10px; color:var(--sg-red); margin-top:7px; letter-spacing:.04em; } /* ---- HERO ----------------------------------------------------------------- */ .co-hero { padding-block: 9vh var(--sg-pad); } .co-hero .lede { max-width: 980px; } .co-hero h1 { margin-top: 16px; } .co-hero .lead { margin-top: 22px; max-width: 68ch; } .co-hero .beat { margin-top: 16px; max-width: 72ch; color: var(--sg-ink-soft); } .co-hero .cta { margin-top: 30px; } .co-hero .stage { margin-top: 52px; } /* ===== shared light admin window (white card + red accent) ================= */ .adwin { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--sg-line); box-shadow: var(--sg-shadow); --sg-ink: #1A1A1A; --sg-ink-soft: #5b5853; --sg-ink-faint: #868279; --sg-line: #ECEAE5; --sg-line-2: #f0eeea; --sg-bg-2: #f9f9f9; --sg-red-soft: #fff1f1; --sg-card-bg: #fff; --sg-card-border: #ECEAE5; } .surface-dark .adwin { box-shadow: var(--sg-shadow-cinematic); } .adbar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--sg-line); background: var(--sg-bg-2); } .adbar .ic { width: 24px; height: 24px; border-radius: 7px; background: var(--sg-grad-red); box-shadow: var(--sg-shadow-red); flex: none; } .adbar .ti { font-weight: 800; font-size: 14px; letter-spacing: -.01em; color: var(--sg-ink); } .adbar .ti small { display: block; font-weight: 500; font-size: 10.5px; color: var(--sg-ink-faint); letter-spacing: 0; margin-top: 1px; } .adbar .crumb { margin-left: 10px; font-family: var(--sg-mono); font-size: 10px; color: var(--sg-ink-faint); white-space: nowrap; } .adbar .crumb b { color: var(--sg-ink-soft); font-weight: 600; } .adbar .act { margin-left: auto; font-family: var(--sg-font); font-size: 12px; font-weight: 700; color: #fff; padding: 8px 13px; border-radius: 8px; background: var(--sg-grad-red); box-shadow: var(--sg-shadow-red); white-space: nowrap; } .adbar .act.ghost { background: #fff; color: var(--sg-ink-soft); border: 1px solid var(--sg-line); box-shadow: none; } /* ===== SURFACE 1 . All Objects index ====================================== */ /* sub-header descriptor strip */ .co-subhdr { padding: 11px 16px; border-bottom: 1px solid var(--sg-line); background: #fff; font-size: 11.5px; color: var(--sg-ink-faint); } .co-subhdr b { color: var(--sg-ink-soft); font-weight: 600; } /* 6 filter pills with count badges */ .copills { display: flex; gap: 6px; padding: 13px 16px 4px; flex-wrap: wrap; } .copill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--sg-ink-soft); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--sg-line); } .copill b { font-family: var(--sg-mono); font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--sg-bg-2); color: var(--sg-ink-faint); } .copill.on { background: var(--sg-red-soft); color: var(--sg-red-deep); border-color: transparent; } .copill.on b { background: var(--sg-red); color: #fff; } /* toolbar: bulk + apply (left) . search + magnifier (right) */ .cotool { display: flex; align-items: center; gap: 10px; padding: 6px 16px 12px; } .cotool .sel { font-family: var(--sg-mono); font-size: 11px; color: var(--sg-ink-faint); padding: 7px 11px; border: 1px solid var(--sg-line); border-radius: 8px; background: var(--sg-bg-2); } .cotool .ap { font-family: var(--sg-font); font-size: 11px; font-weight: 700; color: #fff; padding: 7px 12px; border-radius: 8px; background: var(--sg-grad-red); box-shadow: var(--sg-shadow-red); } .cotool .srch { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--sg-mono); font-size: 11px; color: var(--sg-ink-faint); padding: 7px 12px; border: 1px solid var(--sg-line); border-radius: 8px; min-width: 170px; } .cotool .srch .mag { width: 13px; height: 13px; border-radius: 50%; border: 1.6px solid var(--sg-red); position: relative; margin-left: auto; flex: none; } .cotool .srch .mag::after { content: ""; position: absolute; right: -4px; bottom: -3px; width: 6px; height: 1.6px; background: var(--sg-red); transform: rotate(45deg); } /* the 6-col registry table */ .cotab .th, .cotab .tr { display: grid; grid-template-columns: 28px 1.7fr 1.3fr 1fr 1fr .9fr; gap: 12px; align-items: center; padding: 12px 16px; } .cotab .th { font-family: var(--sg-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-ink-faint); border-bottom: 1px solid var(--sg-line); } .cotab .tr { border-bottom: 1px solid var(--sg-line-2); font-size: 13px; position: relative; } .cotab .tr:last-child { border-bottom: 0; } .cotab .ck { width: 15px; height: 15px; border: 1px solid var(--sg-line); border-radius: 4px; background: var(--sg-bg-2); } .cotab .nm { font-weight: 700; color: var(--sg-ink); } .cotab .nm .ract { display: block; margin-top: 3px; font-family: var(--sg-mono); font-size: 9.5px; color: var(--sg-ink-faint); } .cotab .nm .ract span { color: var(--sg-red-deep); } .cotab .sl { font-family: var(--sg-mono); font-size: 11px; color: var(--sg-red-deep); background: var(--sg-red-soft); padding: 4px 9px; border-radius: 6px; justify-self: start; } .cotab .pt { font-family: var(--sg-mono); font-size: 10px; color: var(--sg-ink-faint); padding: 3px 9px; border: 1px solid var(--sg-line); border-radius: 999px; justify-self: start; } .cotab .au { font-family: var(--sg-mono); font-size: 11px; color: var(--sg-ink-faint); } .cotab .dt { font-family: var(--sg-mono); font-size: 11px; color: var(--sg-ink-faint); } /* CodeIgniter pagination */ .copage { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--sg-line); } .copage .pg { font-family: var(--sg-mono); font-size: 11px; color: var(--sg-ink-faint); padding: 5px 10px; border: 1px solid var(--sg-line); border-radius: 7px; } .copage .pg.on { background: var(--sg-grad-red); color: #fff; border-color: transparent; box-shadow: var(--sg-shadow-red); } .copage .pg.ends { color: var(--sg-ink-faint); } /* ===== replaces block (light context, reuses .dcard from forms-class) ===== */ .coreplaces { padding: 14px 16px; } .dcard { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid var(--sg-line); border-radius: 11px; margin-bottom: 9px; } .dcard:last-child { margin-bottom: 0; } .dcard .pic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-family: var(--sg-mono); font-weight: 800; font-size: 13px; color: #fff; flex: none; } .dcard .di { flex: 1; } .dcard .di .dn { font-weight: 700; font-size: 13px; color: var(--sg-ink); } .dcard .di .dm { font-family: var(--sg-mono); font-size: 10px; color: var(--sg-ink-faint); margin-top: 2px; } .dcard .pill { font-family: var(--sg-mono); font-size: 9px; padding: 3px 8px; border-radius: 5px; } .dcard .pill.on { background: #e7f7ee; color: #1c7a45; } /* ===== SURFACE 2 . type-definition form (2-col, dark CodeMirror anchor) === */ .codef { display: grid; grid-template-columns: 2fr 1fr; gap: 0; } .codef .main { padding: 18px; border-right: 1px solid var(--sg-line); display: flex; flex-direction: column; gap: 14px; } .codef .side { padding: 18px; background: var(--sg-bg-2); display: flex; flex-direction: column; gap: 13px; } .codef .fld .lab { font-family: var(--sg-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-ink-faint); display: block; margin-bottom: 6px; } .codef .fld .inp { border: 1px solid var(--sg-line); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; color: var(--sg-ink); background: var(--sg-bg-2); } /* permalink-editor widget */ .codef .perma { border: 1px solid var(--sg-line); border-radius: 9px; overflow: hidden; display: flex; align-items: center; font-size: 12px; background: var(--sg-bg-2); } .codef .perma .base { font-family: var(--sg-mono); font-size: 10.5px; color: var(--sg-ink-faint); padding: 10px 4px 10px 12px; } .codef .perma .slug { font-family: var(--sg-mono); font-size: 11px; color: var(--sg-red-deep); padding: 10px 12px 10px 0; } .codef .perma .ed { margin-left: auto; font-family: var(--sg-mono); font-size: 10px; color: var(--sg-ink-faint); border-left: 1px solid var(--sg-line); padding: 0 12px; align-self: stretch; display: grid; place-items: center; } /* status select */ .codef .seg { display: flex; gap: 4px; padding: 4px; border-radius: 9px; background: var(--sg-bg-2); border: 1px solid var(--sg-line); flex-wrap: wrap; } .codef .seg b { flex: 1; min-width: 70px; text-align: center; font-family: var(--sg-mono); font-size: 10px; padding: 7px 4px; border-radius: 6px; color: var(--sg-ink-faint); font-weight: 600; } .codef .seg b.on { background: var(--sg-grad-red); color: #fff; box-shadow: var(--sg-shadow-red); } /* two-up layout row (items per page / row) */ .codef .two { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } /* template pickers row */ .codef .tpl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; } .codef .tpl .pk { border: 1px solid var(--sg-line); border-radius: 9px; padding: 9px 11px; background: var(--sg-bg-2); } .codef .tpl .pk .pl { font-family: var(--sg-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-ink-faint); display: block; margin-bottom: 5px; } .codef .tpl .pk .pv { font-size: 11px; color: var(--sg-ink-soft); display: flex; align-items: center; justify-content: space-between; } .codef .tpl .pk .pv .cv { color: var(--sg-ink-faint); } /* collapsible SEO block */ .coseo { border: 1px solid var(--sg-line); border-radius: 11px; overflow: hidden; } .coseo .sh { display: flex; align-items: center; gap: 9px; padding: 11px 13px; background: var(--sg-bg-2); border-bottom: 1px solid var(--sg-line); } .coseo .sh .st { font-family: var(--sg-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-ink-faint); font-weight: 700; } .coseo .sh .cv { margin-left: auto; color: var(--sg-ink-faint); font-size: 13px; } .coseo .sb { padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; } .coseo .sr { display: flex; flex-direction: column; gap: 5px; } .coseo .sr .l { font-size: 10px; font-weight: 600; color: var(--sg-ink-soft); } .coseo .sr .i { border: 1px solid var(--sg-line); border-radius: 8px; padding: 8px 11px; font-size: 11px; color: var(--sg-ink-faint); background: var(--sg-bg-2); } .coseo .vis { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 0; font-size: 11.5px; color: var(--sg-ink-soft); } .coseo .vis .sw { width: 34px; height: 20px; border-radius: 999px; background: var(--sg-grad-red); position: relative; box-shadow: 0 0 10px rgba(213,21,34,.35); flex: none; } .coseo .vis .sw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; } /* dark CodeMirror script panels - the cinematic anchor */ .cocode { border-radius: 11px; overflow: hidden; border: 1px solid #20242e; background: #12141b; --sg-ink: #e9e6df; --sg-ink-soft: #b8b4ab; } .cocode .ch { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #181b23; border-bottom: 1px solid #20242e; } .cocode .ch .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sg-grad-red); box-shadow: var(--sg-shadow-red); flex: none; } .cocode .ch .nm { font-family: var(--sg-mono); font-size: 10px; letter-spacing: .06em; color: #c7c3ba; } .cocode .ch .lng { margin-left: auto; font-family: var(--sg-mono); font-size: 9px; color: #6f7480; } .cocode .cb { padding: 12px 14px; display: grid; grid-template-columns: 22px 1fr; font-family: var(--sg-mono); font-size: 10.5px; line-height: 1.7; } .cocode .cb .ln { color: #4b5160; text-align: right; padding-right: 12px; user-select: none; } .cocode .cb .co { color: #cdd2dc; white-space: pre; overflow-x: auto; } .cocode .cb .co .t { color: #d57; } .cocode .cb .co .s { color: #7fb069; } .cocode .cb .co .a { color: #d59a3b; } .cocode .cb .co .c { color: #6f7480; } /* side rail */ .codef .side .stbox { border: 1px solid var(--sg-line); border-radius: 11px; padding: 14px; background: #fff; } .codef .side .stbox .sl { font-family: var(--sg-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-ink-faint); margin-bottom: 9px; } .codef .side .stbox .srow { display: flex; justify-content: space-between; font-size: 11.5px; padding: 6px 0; border-top: 1px solid var(--sg-line-2); } .codef .side .stbox .srow:first-of-type { border-top: 0; } .codef .side .stbox .srow .k { color: var(--sg-ink-faint); } .codef .side .stbox .srow .v { color: var(--sg-ink); font-weight: 600; } .codef .side .mk { font-family: var(--sg-font); font-size: 13px; font-weight: 700; color: #fff; padding: 12px; border-radius: 9px; background: var(--sg-grad-red); box-shadow: var(--sg-shadow-red); text-align: center; } .codef .side .trash { text-align: center; font-family: var(--sg-mono); font-size: 11px; color: var(--sg-red-deep); } /* ===== SURFACE 3 . Custom Fields group builder + 15-type palette ========= */ .cfgrp { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0; } .cfgrp .build { padding: 18px; border-right: 1px solid var(--sg-line); display: flex; flex-direction: column; gap: 13px; } .cfgrp .tips { padding: 18px; background: var(--sg-bg-2); display: flex; flex-direction: column; gap: 14px; } .cfgrp .gt .lab { font-family: var(--sg-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-ink-faint); display: block; margin-bottom: 6px; } .cfgrp .gt .inp { border: 1px solid var(--sg-line); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; color: var(--sg-ink); background: var(--sg-bg-2); } /* field-definition rows */ .cfrows { display: flex; flex-direction: column; gap: 9px; } .cfrow { display: grid; grid-template-columns: 16px 1fr 1fr 1.1fr 22px; gap: 9px; align-items: center; padding: 10px 12px; border: 1px solid var(--sg-line); border-radius: 10px; background: #fff; } .cfrow .gr { color: var(--sg-ink-faint); font-family: var(--sg-mono); font-size: 12px; cursor: grab; } .cfrow .cell { border: 1px solid var(--sg-line); border-radius: 7px; padding: 7px 9px; font-size: 11px; color: var(--sg-ink-soft); background: var(--sg-bg-2); } .cfrow .cell.mono { font-family: var(--sg-mono); font-size: 10px; color: var(--sg-ink-faint); } .cfrow .cell.type { display: flex; align-items: center; justify-content: space-between; color: var(--sg-ink); font-weight: 600; } .cfrow .cell.type .cv { color: var(--sg-ink-faint); } .cfrow .rm { color: var(--sg-ink-faint); text-align: center; font-size: 14px; } .cfadd { font-family: var(--sg-mono); font-size: 11px; font-weight: 700; color: var(--sg-red-deep); border: 1px dashed var(--sg-red-tint-22); border-radius: 9px; padding: 10px; text-align: center; } /* locations checkbox group */ .cfloc { border: 1px solid var(--sg-line); border-radius: 11px; padding: 13px; background: var(--sg-bg-2); } .cfloc .lt { font-family: var(--sg-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-ink-faint); margin-bottom: 10px; } .cfloc .lg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cfloc .lo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sg-ink-soft); } .cfloc .lo .bx { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--sg-line); background: #fff; flex: none; } .cfloc .lo.on .bx { background: var(--sg-grad-red); border-color: transparent; box-shadow: var(--sg-shadow-red); position: relative; } .cfloc .lo.on .bx::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); } .cfloc .lo.on { color: var(--sg-ink); font-weight: 600; } /* tips panel */ .cfgrp .tips .tip { border: 1px solid var(--sg-line); border-radius: 11px; padding: 13px; background: #fff; } .cfgrp .tips .tip .tt { font-weight: 700; font-size: 12px; color: var(--sg-ink); margin-bottom: 5px; } .cfgrp .tips .tip p { font-size: 11px; color: var(--sg-ink-faint); line-height: 1.5; } /* the 15-type palette */ .cfpal { padding: 16px; border-top: 1px solid var(--sg-line); } .cfpal .ph { font-family: var(--sg-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-ink-faint); margin-bottom: 12px; } .cfpal .pgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .cfchip { border: 1px solid var(--sg-line); border-radius: 9px; padding: 11px 10px; font-size: 11px; font-weight: 600; color: var(--sg-ink-soft); display: flex; align-items: center; gap: 8px; background: #fff; } .cfchip .gl { width: 8px; height: 8px; border-radius: 3px; background: var(--sg-grad-red); flex: none; } .cfchip.hot { background: var(--sg-red-soft); border-color: transparent; color: var(--sg-red-deep); } .cfchip.hot .gl { box-shadow: var(--sg-shadow-red); } /* ===== SURFACE 4 . per-type Categories manager (two-card CRUD) =========== */ .cocat { display: grid; grid-template-columns: 1fr 1.5fr; gap: 0; } .cocat .catform { padding: 18px; border-right: 1px solid var(--sg-line); display: flex; flex-direction: column; gap: 13px; } .cocat .catlist { padding: 18px; background: var(--sg-bg-2); } .cocat .cfh { font-weight: 800; font-size: 13px; color: var(--sg-ink); letter-spacing: -.01em; } .cocat .fld .lab { font-family: var(--sg-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-ink-faint); display: block; margin-bottom: 6px; } .cocat .fld .inp { border: 1px solid var(--sg-line); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; color: var(--sg-ink); background: var(--sg-bg-2); } .cocat .fld .inp.tall { min-height: 54px; font-size: 11.5px; color: var(--sg-ink-soft); line-height: 1.5; } .cocat .perma { border: 1px solid var(--sg-line); border-radius: 9px; overflow: hidden; display: flex; align-items: center; background: var(--sg-bg-2); } .cocat .perma .base { font-family: var(--sg-mono); font-size: 10px; color: var(--sg-ink-faint); padding: 10px 2px 10px 12px; } .cocat .perma .slug { font-family: var(--sg-mono); font-size: 11px; color: var(--sg-red-deep); padding: 10px 12px 10px 0; } .cocat .mk { margin-top: 2px; font-family: var(--sg-font); font-size: 13px; font-weight: 700; color: #fff; padding: 11px; border-radius: 9px; background: var(--sg-grad-red); box-shadow: var(--sg-shadow-red); text-align: center; } /* list side: header + searchable, paginated table */ .cocat .clh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .cocat .clh .cnt { font-family: var(--sg-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-ink-faint); } .cocat .clh .srch { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--sg-mono); font-size: 11px; color: var(--sg-ink-faint); padding: 7px 12px; border: 1px solid var(--sg-line); border-radius: 8px; background: #fff; min-width: 160px; } .cocat .clh .srch .mag { width: 13px; height: 13px; border-radius: 50%; border: 1.6px solid var(--sg-red); position: relative; margin-left: auto; flex: none; } .cocat .clh .srch .mag::after { content: ""; position: absolute; right: -4px; bottom: -3px; width: 6px; height: 1.6px; background: var(--sg-red); transform: rotate(45deg); } .cocat .ctab { border: 1px solid var(--sg-line); border-radius: 11px; overflow: hidden; background: #fff; } .cocat .ctab .th, .cocat .ctab .tr { display: grid; grid-template-columns: 1.5fr 1.3fr .6fr 1.1fr; gap: 10px; align-items: center; padding: 11px 14px; } .cocat .ctab .th { font-family: var(--sg-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-ink-faint); border-bottom: 1px solid var(--sg-line); background: var(--sg-bg-2); } .cocat .ctab .tr { border-bottom: 1px solid var(--sg-line-2); font-size: 12.5px; } .cocat .ctab .tr:last-child { border-bottom: 0; } .cocat .ctab .nm { font-weight: 700; color: var(--sg-ink); } .cocat .ctab .sl { font-family: var(--sg-mono); font-size: 10px; color: var(--sg-red-deep); background: var(--sg-red-soft); padding: 4px 8px; border-radius: 6px; justify-self: start; } .cocat .ctab .ct { font-family: var(--sg-mono); font-size: 11px; color: var(--sg-ink-faint); } .cocat .ctab .ax { font-family: var(--sg-mono); font-size: 10px; color: var(--sg-ink-faint); } .cocat .ctab .ax span { color: var(--sg-red-deep); } .cocat .catlist .copage { padding: 12px 0 0; border-top: 0; } /* ---- CLOSE --------------------------------------------------------------- */ .co-close { text-align: center; } .co-close .related { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: center; margin-top: 28px; } .co-close .related a { font-family: var(--sg-mono); font-size: 12px; color: var(--sg-ink); border-bottom: 1px solid var(--sg-red-tint-22); padding-bottom: 2px; } .co-close .related a:hover { color: var(--sg-red-hot); } .co-close .fine { font-family: var(--sg-mono); font-size: 12px; color: var(--sg-ink-faint); margin-top: 22px; } /* ---- RESPONSIVE ---------------------------------------------------------- */ @media (max-width: 900px) { .codef, .cfgrp { grid-template-columns: 1fr; } .codef .main { border-right: 0; border-bottom: 1px solid var(--sg-line); } .cfgrp .build { border-right: 0; border-bottom: 1px solid var(--sg-line); } .cfpal .pgrid { grid-template-columns: repeat(3, 1fr); } .codef .tpl { grid-template-columns: 1fr; } .cocat { grid-template-columns: 1fr; } .cocat .catform { border-right: 0; border-bottom: 1px solid var(--sg-line); } } @media (max-width: 640px) { .cotab .th { display: none; } .cotab .tr { grid-template-columns: 1fr auto; row-gap: 4px; } .cotab .ck, .cotab .pt, .cotab .au, .cotab .dt { display: none; } .cfpal .pgrid { grid-template-columns: repeat(2, 1fr); } .cfrow { grid-template-columns: 1fr 1fr; row-gap: 6px; } .cfrow .gr, .cfrow .rm { display: none; } .codef .two.cfloc .lg { grid-template-columns: 1fr; } .cocat .ctab .th, .cocat .ctab .tr { grid-template-columns: 1.4fr .8fr 1fr; } .cocat .ctab .sl { display: none; } }

