Styling

Theme CSS comes in two places:

• assets/*.css: styles for the whole website, loaded on every page in file-name order. A theme can have 12 CSS files.
• {% style %} ... {% endstyle %} inside a section file: styles for that section only, loaded on the pages that use the section.

Both are plain CSS. Theme CSS can restyle the website but never the editor around it, because every selector is rewritten to sit under the website (see below). Snippets can't have {% style %}.

#How selectors are scoped

Plangku rewrites your selectors when the theme is saved:

faq stands for the section's file name. The data-code attribute sits on the section's own wrapper element, so inside a section's CSS :scope or & means the whole section, and everything else is a descendant of it. A .promo rule never touches another section's .promo, so short class names are safe in section CSS. In assets/*.css use more specific names.

• Nested rules (native CSS nesting) are left alone: only the outer rule is scoped, and the inner rules sit inside it.
• Rules inside @media, @container and @supports are scoped the same way.
• @keyframes bodies are not touched.
• :root { --brand-soft: #fde8e8; } in an asset file is a handy way to declare your own variables for the whole website.
• Theme CSS is not put in a cascade layer, so it normally wins over the platform's utility classes without !important.

#Keyframes and fonts

Names you define are prefixed with t- so they can't collide with the editor's own spin animation or fonts, and every use inside your theme is renamed to match.

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.card { animation: rise .4s ease both; }   /* becomes t-rise */

@font-face {
  font-family: 'Gelora';                      /* becomes "t-Gelora" */
  src: url(https://fonts.example.com/gelora.woff2) format('woff2');
  font-display: swap;
}
.site-heading { font-family: 'Gelora', serif; }   /* follows the rename */

Uploaded fonts and images work through https:// or /uploads/ addresses. To change the theme's two main fonts (heading and body) use the Theme tab, which loads Google Fonts for you, since @import is not allowed.

#Allowed and removed

Allowed at-rules: @media, @container, @supports, @keyframes (and @-webkit-keyframes), @font-face and @layer. A @layer block is unwrapped: its rules are kept and the layer is dropped, because a layer would sink your rules below the platform's own CSS. A bare @layer a, b; line is removed.

Removed, with a warning in the editor:

@import and the others are removed one at a time: the rest of the file works. The same URL rules apply to inline style="..." attributes in your markup (which are also cut to 4000 characters).

#Warnings in the editor

Warnings are listed in the code editor's problem list with the file and line, and don't stop you from saving. A CSS syntax mistake is an error (CSS error: ...) and does stop the save.

#Design tokens

The website and each section expose their colours and settings as CSS variables. Use them instead of fixed colours and your theme follows whatever the owner picks in the Theme tab.

#On the whole website

#In each section

Every section sets its own colours from its background choice (page colour, soft colour, brand colour, dark, or a photo). They always read well together.

.price { color: var(--s-hl); }
.card { background: var(--s-card); border: 1px solid var(--s-line); border-radius: var(--r); }
.card p { color: var(--s-muted); }
.cta { background: var(--s-btn); color: var(--s-btn-fg); border-radius: var(--r-btn); }

For a block inside a section that should have another background, write style="{{ 'inverse' | section_vars }}" on it (see filters).

#Theme setting variables

Theme settings of the types color, number, range, select and checkbox (from config/settings_schema.json) are published as CSS variables named --ts-<id>, with _ in the id turned into -:

Text, image and link settings are not published; read them in templates with settings.<id>. Give variables a fallback so the CSS also works before the owner changes anything: var(--ts-card-lift, 4px).

#Helper classes

The platform's own classes you can use in your markup so your sections match the built-in ones:

#Classes that exist

#Container queries

The website's root element is a CSS container, so sizes follow the width of the website, not the browser window. This matters in the editor: the phone and tablet previews narrow the website, but not the browser, so @media (min-width: ...) would never change. Use @container:

.cards { display: grid; gap: 1rem; }

@container (min-width: 48rem) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

The breakpoints the built-in sections use are 48rem (tablet and up), 56rem and 64rem. Mobile first: write the phone layout without a query, then add queries for wider sizes.

#Restyling built-in sections

Every section's wrapper has data-section="<type>", so assets/*.css can restyle a built-in section without replacing it. The types are hero, about, features, services, products, menu, pricing, testimonials, gallery, faq, cta, contact, stats, steps, team, logos, marketplace, text, article and video, plus form, collection, entry, inquiry, ai, imported and code. Sections from your own files have data-section="code" and data-code="<handle>".

[data-section="hero"] h1 { letter-spacing: -0.03em; }
[data-section="features"] .site-card { transition: transform .2s; }
[data-section="features"] .site-card:hover { transform: translateY(-4px); }
[data-section="pricing"] .site-card { border-top: 4px solid var(--c-brand); }

Check the real class names with your browser's inspector on the live site. For anything a stylesheet can't do, replace the section with your own file of the same name (a hero.plang replaces the built-in hero everywhere; see sections).

The theme's style options are attributes on the website root, so you can react to them: data-heading-case, data-heading-style, data-buttons, data-cards and data-images:

.site-root[data-cards="shadow"] .card { box-shadow: 0 10px 30px -15px rgb(0 0 0 / .3); }

See examples for a complete assets/theme.css.