Portal CSS Reference
Every selector and every variable a custom stylesheet may target on the portal page: the page regions, the sidebar parts, the plan cards and the blocks, and the palette, tint, type and shape variables the theme emits, with what each one paints.
By the end of this page you will know which names on the portal page are kept stable for your stylesheet, what each one reaches, and which variables carry your design's colours, type and shape.
The Custom CSS field in the Portal Designer takes up to 16 KB of plain rules, added after the theme so your rules win. Those rules need something stable to aim at, so every region, part and block the page draws carries a data-portal-* attribute or a portal-* class, and the theme's variables are named for what they paint. Every name on this page is kept stable: a rule you write keeps working after a release, and a test on every build keeps each name on the page.
What a stylesheet may not do
Nothing that loads or runs is accepted: no @import, no @charset, no url(), no expression(), no behavior:, no -moz-binding, no javascript:, and nothing that would close the style element. A stylesheet with one of those is refused with the token named.
Selectors
| Selector | What it reaches |
|---|---|
[data-portal-sidebar] | The sidebar card |
[data-portal-item="tagline"] | The tagline in the sidebar |
[data-portal-item="metrics"] | The subscriber and follower figures |
[data-portal-item="buttons"] | The connector button and your own second button |
[data-portal-item="description"] | The description in the sidebar |
[data-portal-item="social_links"] | The row of social links |
[data-portal-item="footer"] | The footer links under the card |
[data-portal-locale-switcher] | The list of languages under the card |
[data-portal-content] | The content card beside the sidebar: the plans, the checkout and the member screens |
[data-portal-header] | The Share and Login buttons |
[data-portal-announcement] | The announcement strip |
[data-portal-plans-heading] | The heading and subtitle over the plans |
[data-portal-social-proof] | The joined-this-week line |
[data-portal-plan-list] | The list of plan cards |
[data-portal-plan] | A plan card |
[data-portal-featured] | The featured plan card, which also carries [data-portal-plan] |
[data-portal-block="perks"] | The perks block |
[data-portal-block="about"] | The card about you |
[data-portal-block="faq"] | The questions block |
[data-portal-block="video"] | The video block |
[data-portal-block="gallery"] | The gallery block |
[data-portal-block="testimonials"] | The block of what members say |
.portal-card | Both cards: the sidebar and the content card |
.portal-button | Every button members press, including the ones on the plan cards |
A part or a block that is hidden in the designer, or empty, is not on the page, so a rule for it simply does nothing until it shows.
[data-portal-plan] { border-width: 2px; }
[data-portal-featured] { box-shadow: 0 0 0 4px var(--portal-accent-soft); }
[data-portal-item="metrics"] { display: none; }
.portal-button { letter-spacing: 0.02em; }Variables
The theme sets every variable on :root, in the light half and again in the dark half when the design follows the visitor, so a rule written with a variable keeps your colours whichever half paints the page. The values are what you chose in the designer; on the defaults they are the exact shades the portal always had.
Palette
| Variable | What it paints |
|---|---|
--portal-accent | Your accent |
--portal-accent-foreground | The text drawn on the accent, picked for you |
--portal-accent-2 | The second accent |
--portal-accent-2-foreground | The text drawn on the second accent |
--portal-bg | The page behind the cards |
--portal-surface | The cards |
--portal-heading | Headings |
--portal-text | Body text |
--portal-muted | Captions |
--portal-grid | The faint grid over the background, or transparent when it is off |
Tints
| Variable | What it paints |
|---|---|
--portal-line | Hairlines |
--portal-line-strong | Borders |
--portal-well | Inset panels and chips |
--portal-well-strong | Inset panels and chips, pressed or hovered |
--portal-faint | The lightest captions |
--portal-text-strong | The strongest body text |
--portal-accent-hover | The accent, hovered |
--portal-accent-strong | The accent, pressed |
--portal-accent-ink | The accent as text |
--portal-accent-ink-soft | The accent as lighter text |
--portal-accent-ink-strong | The accent as darker text |
--portal-accent-soft | The accent as a tint |
--portal-accent-soft-strong | The accent as a stronger tint |
--portal-accent-line | The accent as a line |
--portal-accent-line-strong | The accent as a stronger line |
--portal-accent-glow | The accent as a shadow |
--portal-accent-2-ink | The second accent as text |
--portal-accent-2-ink-strong | The second accent as darker text |
--portal-accent-2-soft | The second accent as a tint |
--portal-accent-2-line | The second accent as a line |
--portal-accent-2-line-strong | The second accent as a stronger line |
--portal-accent-2-alt | The companion of the second accent, for the strip of a pass that has not opened yet |
--portal-accent-2-alt-ink, --portal-accent-2-alt-ink-strong, --portal-accent-2-alt-text | That companion as text, three strengths |
--portal-accent-2-alt-faint, --portal-accent-2-alt-soft, --portal-accent-2-alt-line | That companion as a faint tone, a tint and a line |
Type
| Variable | What it sets |
|---|---|
--font-condensed | The display face: the project's name, the headings and the figures |
--font-sans | The body face |
--portal-heading-case | The text transform of headings: uppercase or none |
--portal-button-case | The text transform of button labels |
Shape
| Variable | What it sets |
|---|---|
--portal-radius-card | The corner radius of the two cards |
--portal-button-radius | The corner radius of the buttons |
--portal-button-bg, --portal-button-fg, --portal-button-border, --portal-button-hover-bg | The fill, label, border and hovered fill of the buttons, from the button fill you chose |
--portal-card-border | The hairline around the cards, or transparent when the card border is off |
--portal-shadow-card | The shadow under the cards |
--portal-shadow-float | The shadow under dialogs and the project photo |
--portal-shadow-soft | The softest shadow |
[data-portal-sidebar] { background: color-mix(in oklab, var(--portal-surface) 90%, var(--portal-accent)); }
[data-portal-plans-heading] h2 { font-family: var(--font-sans); text-transform: none; }Where a rule lands
Your stylesheet is printed after the theme on every portal page, the member screens included, and inside the designer's preview, so you see a rule the moment the draft saves. It reaches no other page: not the dashboard, not the checkout hosted by a gateway, not a connector's own screens.
How is this guide?
Last updated on
Portal Designer
Every setting of the portal designer, section by section: what it changes on the page, what it accepts, what is refused and why, and the value every portal had before the designer. The same rules hold on the dashboard, in your bot and over the API.
Smart Links
One tracked address per channel, a video description, a bio, a flyer's QR, with the clicks, members, purchases and payments behind each; a bot deep link and a QR code per link; and two embeds for your own website.